fix: support vites renderBuiltURL api

marko-js · Dec 1, 2023 · 419b1df · 419b1df
1 parent f670838
commit 419b1df
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 31 deletions.
diff --git a/.changeset/real-jars-hang.md b/.changeset/real-jars-hang.md
@@ -0,0 +1,5 @@
+---
+"arc-vite": patch
+---
+
+Fix support for renderBuiltURL vite api
diff --git a/src/plugins/build-web.ts b/src/plugins/build-web.ts
@@ -49,6 +49,9 @@ export function pluginBuildWeb({
   let proxyModuleId = 0;
   let initModuleId = 0;
   let basePath = "/";
+  let resolveAssetURL: (fileName: string, from: string) => string = (
+    fileName: string,
+  ) => basePath + fileName;
   return [
     {
       name: "arc-vite:build-web",
@@ -59,6 +62,24 @@ export function pluginBuildWeb({
       },
       configResolved(config) {
         basePath = config.base;
+        const { renderBuiltUrl: originalRenderBuiltURL } = config.experimental;
+        if (originalRenderBuiltURL) {
+          resolveAssetURL = (fileName, from) => {
+            const url = originalRenderBuiltURL(fileName, {
+              ssr: false,
+              type: "asset",
+              hostId: from,
+              hostType: "html",
+            });
+            if (typeof url !== "string") {
+              throw new Error(
+                `renderBuiltURL must return a string for html assets`,
+              );
+            }
+
+            return url;
+          };
+        }
       },
       closeBundle() {
         proxyModuleId = initModuleId = 0;
@@ -383,23 +404,24 @@ export function pluginBuildWeb({
         return null;
       },
       transformIndexHtml(html, { chunk, bundle }) {
-        if (!bundle || !chunk?.facadeModuleId) return;
-        const adaptiveChunkMeta = metaForAdaptiveChunk.get(
-          chunk.facadeModuleId,
-        );
+        if (!bundle) return;
+        const moduleId = chunk?.facadeModuleId;
+        if (!moduleId) return;
+        const adaptiveChunkMeta = metaForAdaptiveChunk.get(moduleId);
 
         if (adaptiveChunkMeta) {
-          for (const fileName in bundle) {
-            const curChunk = bundle[fileName];
+          const { entryId } = adaptiveChunkMeta;
+          for (const curFile in bundle) {
+            const curChunk = bundle[curFile];
             if (
               curChunk.type === "chunk" &&
               curChunk.isEntry &&
-              curChunk.facadeModuleId === adaptiveChunkMeta.entryId
+              curChunk.facadeModuleId === entryId
             ) {
               return prepareArcEntryHTML(
-                basePath,
                 runtimeId,
                 html,
+                (fileName: string) => resolveAssetURL(fileName, entryId),
                 curChunk,
                 chunk,
               );
@@ -409,7 +431,10 @@ export function pluginBuildWeb({
           return;
         }
 
-        return stripEntryScript(basePath, chunk.fileName, html);
+        return stripEntryScript(
+          resolveAssetURL(chunk.fileName, moduleId),
+          html,
+        );
       },
     },
     {

diff --git a/src/utils/prepare-arc-entry-html.ts b/src/utils/prepare-arc-entry-html.ts
@@ -8,18 +8,20 @@ const parserOptions = { decodeEntities: false, encodeEntities: false };
 const emptyScriptReg = /^[\s;]+$/;
 
 export function prepareArcEntryHTML(
-  basePath: string,
   runtimeId: string,
   html: string,
+  renderAssetURL: (fileName: string) => string,
   originalChunk: Rollup.OutputChunk,
   adaptedChunk: Rollup.OutputChunk,
 ) {
   const dom = parseDocument(html, parserOptions);
   const originalChunkIsEmpty = emptyScriptReg.test(originalChunk.code);
   const adaptedChunkIsEmpty = emptyScriptReg.test(adaptedChunk.code);
+  const originalChunkURL = renderAssetURL(originalChunk.fileName);
+  const adaptedChunkURL = renderAssetURL(adaptedChunk.fileName);
 
   for (const script of filter(isModule, dom) as Element[]) {
-    if (stripBasePath(basePath, script.attribs.src) === adaptedChunk.fileName) {
+    if (script.attribs.src === adaptedChunkURL) {
       if (originalChunkIsEmpty && adaptedChunkIsEmpty) {
         removeElement(script);
       } else if (originalChunkIsEmpty) {
@@ -33,7 +35,7 @@ export function prepareArcEntryHTML(
           ),
         );
       } else if (adaptedChunkIsEmpty) {
-        script.attribs.src = basePath + originalChunk.fileName;
+        script.attribs.src = originalChunkURL;
       } else {
         delete script.attribs.src;
         prepend(
@@ -48,9 +50,9 @@ export function prepareArcEntryHTML(
         appendChild(
           script,
           new Text(
-            `import ${JSON.stringify(
-              basePath + adaptedChunk.fileName,
-            )}\nimport ${JSON.stringify(basePath + originalChunk.fileName)}`,
+            `import ${JSON.stringify(adaptedChunkURL)}\nimport ${JSON.stringify(
+              originalChunkURL,
+            )}`,
           ),
         );
       }
@@ -68,8 +70,3 @@ function isModule(node: Node): node is Element {
     !!node.attribs.src
   );
 }
-
-function stripBasePath(basePath: string, path: string) {
-  if (path.startsWith(basePath)) return path.slice(basePath.length);
-  return path;
-}
diff --git a/src/utils/strip-entry-script.ts b/src/utils/strip-entry-script.ts
@@ -4,14 +4,10 @@ import { parseDocument, DomUtils } from "htmlparser2";
 
 const { isTag, removeElement, filter } = DomUtils;
 
-export function stripEntryScript(
-  basePath: string,
-  fileName: string,
-  html: string,
-) {
+export function stripEntryScript(entryScriptURL: string, html: string) {
   const dom = parseDocument(html);
   for (const script of filter(isModule, dom) as Element[]) {
-    if (stripBasePath(basePath, script.attribs.src) === fileName) {
+    if (script.attribs.src === entryScriptURL) {
       removeElement(script);
     }
   }
@@ -27,8 +23,3 @@ function isModule(node: Node): node is Element {
     !!node.attribs.src
   );
 }
-
-function stripBasePath(basePath: string, path: string) {
-  if (path.startsWith(basePath)) return path.slice(basePath.length);
-  return path;
-}