fix(core): bundled local scripts keep their own place, defer and async

The bundler joined every local <script src> into one inline script at the first one's position. That dropped defer and async (a deferred main.js ran before a deferred CDN gsap), moved later files ahead of CDN scripts between them, and let one file's error stop the rest. Each local script is now inlined where it stands with its attributes; a deferred or async one keeps its tag with its file as a data: URL. Inline-script merging also no longer folds in nomodule scripts, which dropped the attribute.

Author: miguel-heygen

packages/core/src/compiler/htmlBundler.test.ts

@@ -2514,6 +2514,97 @@ describe("bundleToSingleHtml script order", () => {
     }
   });
 
+  const LOCAL_ORDER_GSAP = "https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js";
+  async function bundledBody(scripts: string, files: Record<string, string>) {
+    const dir = makeTempProject({
+      "index.html": `<!doctype html>
+<html><body>
+  <div data-composition-id="root" data-width="320" data-height="180"></div>
+  ${scripts}
+</body></html>`,
+      ...files,
+    });
+    try {
+      const { document } = parseHTML(await bundleToSingleHtml(dir));
+      return [...document.querySelectorAll("body script")];
+    } finally {
+      rmSync(dir, { recursive: true, force: true });
+    }
+  }
+  const dataUrlSource = (el: Element | undefined) =>
+    decodeURIComponent(
+      (el?.getAttribute("src") ?? "").replace(/^data:text\/javascript;charset=utf-8,/, ""),
+    );
+
+  it("keeps each local script in its own place around a CDN script", async () => {
+    const scripts = await bundledBody(
+      `<script src="setup.js"></script>
+  <script src="${LOCAL_ORDER_GSAP}"></script>
+  <script src="main.js"></script>`,
+      { "setup.js": "window.SETUP_RAN = 1;", "main.js": "window.MAIN_RAN = gsap.version;" },
+    );
+    const setupAt = scripts.findIndex((el) => el.textContent?.includes("SETUP_RAN"));
+    const gsapAt = scripts.findIndex((el) => el.getAttribute("src") === LOCAL_ORDER_GSAP);
+    const mainAt = scripts.findIndex((el) => el.textContent?.includes("MAIN_RAN"));
+    expect(setupAt).toBeGreaterThan(-1);
+    expect(setupAt).toBeLessThan(gsapAt);
+    expect(gsapAt).toBeLessThan(mainAt);
+  });
+
+  it.each(["defer", "async"])(
+    "keeps a local %s script's own timing, with its file as the source",
+    async (when) => {
+      const scripts = await bundledBody(
+        `<script defer src="${LOCAL_ORDER_GSAP}"></script>
+  <script ${when} src="main.js"></script>`,
+        { "main.js": "window.MAIN_RAN = gsap.version;" },
+      );
+      const gsapAt = scripts.findIndex((el) => el.getAttribute("src") === LOCAL_ORDER_GSAP);
+      const main = scripts[gsapAt + 1];
+      expect(main?.hasAttribute(when)).toBe(true);
+      expect(main?.getAttribute("src")).toMatch(/^data:text\/javascript;charset=utf-8,/);
+      expect(dataUrlSource(main)).toBe("window.MAIN_RAN = gsap.version;");
+      expect(
+        scripts.some((el) => !el.hasAttribute("src") && el.textContent?.includes("MAIN_RAN")),
+      ).toBe(false);
+    },
+  );
+
+  it("keeps a throw in one local script from stopping the next", async () => {
+    const scripts = await bundledBody(
+      `<script src="a.js"></script>\n  <script src="${LOCAL_ORDER_GSAP}"></script>\n  <script src="b.js"></script>`,
+      {
+        "a.js": "throw new Error('a');",
+        "b.js": "window.B_RAN = 1;",
+      },
+    );
+    const holders = scripts.filter((el) => /throw new Error|B_RAN/.test(el.textContent ?? ""));
+    expect(holders).toHaveLength(2);
+  });
+
+  it.each([
+    ["a local file", `<script nomodule src="legacy.js"></script>`],
+    ["an inline script", `<script nomodule>window.LEGACY_RAN = 1;</script>`],
+  ])("keeps nomodule on %s, so modern browsers still skip it", async (_, legacy) => {
+    const scripts = await bundledBody(
+      `<script>window.FIRST = 1;</script>\n  ${legacy}\n  <script>window.LAST = 1;</script>`,
+      {
+        "legacy.js": "window.LEGACY_RAN = 1;",
+      },
+    );
+    const holder = scripts.find((el) => el.textContent?.includes("LEGACY_RAN"));
+    expect(holder?.hasAttribute("nomodule")).toBe(true);
+    expect(holder?.textContent).not.toMatch(/FIRST|LAST/);
+  });
+
+  it("keeps a local script's non-JavaScript type, so it is not run as JavaScript", async () => {
+    const scripts = await bundledBody(`<script type="text/babel" src="app.jsx"></script>`, {
+      "app.jsx": "const App = () => <div />;",
+    });
+    const holder = scripts.find((el) => el.textContent?.includes("const App"));
+    expect(holder?.getAttribute("type")).toBe("text/babel");
+  });
+
   it("still merges adjacent inline scripts into one at the end of the body", async () => {
     const dir = makeTempProject({
       "index.html": `<!doctype html>

packages/core/src/compiler/htmlBundler.ts

@@ -1226,9 +1226,6 @@ async function bundleProject(projectDir: string, options?: BundleOptions): Promi
     templateEl.remove();
   }
 
-  // Inline local JS
-  const localJsChunks: string[] = [];
-  let jsAnchorPlaced = false;
   for (const el of [...document.querySelectorAll("script[src]")]) {
     const src = el.getAttribute("src");
     if (!src || !isRelativeUrl(src)) continue;
@@ -1240,27 +1237,15 @@ async function bundleProject(projectDir: string, options?: BundleOptions): Promi
     const jsPath = resolveEntryPath(src);
     const js = jsPath ? safeReadFile(jsPath) : null;
     if (js == null) continue;
-    localJsChunks.push(js);
-    if (!jsAnchorPlaced) {
-      const anchor = document.createElement("script");
-      anchor.setAttribute("data-hf-bundled-local-js", "1");
-      el.replaceWith(anchor);
-      jsAnchorPlaced = true;
-    } else {
-      el.remove();
-    }
-  }
-  if (localJsChunks.length > 0) {
-    const anchor = document.querySelector('script[data-hf-bundled-local-js="1"]');
-    const joinedJs = joinJsChunks(localJsChunks);
-    if (anchor) {
-      anchor.removeAttribute("data-hf-bundled-local-js");
-      anchor.textContent = joinedJs;
-    } else {
-      const script = document.createElement("script");
-      script.textContent = joinedJs;
-      document.body.appendChild(script);
+    if (el.hasAttribute("defer") || el.hasAttribute("async")) {
+      el.setAttribute("src", `data:text/javascript;charset=utf-8,${encodeURIComponent(js)}`);
+      continue;
     }
+    const inline = document.createElement("script");
+    for (const { name, value } of [...el.attributes])
+      if (name !== "src") inline.setAttribute(name, value);
+    inline.textContent = js;
+    el.replaceWith(inline);
   }
 
   for (const link of compExternalLinks) ensureExternalLinkTag(document, link);

packages/core/src/compiler/scriptRuns.ts

@@ -5,6 +5,7 @@ export interface InlineScriptRun {
 }
 
 function isClassicInline(el: Element): boolean {
+  if (el.hasAttribute("nomodule")) return false;
   const type = (el.getAttribute("type") || "").trim().toLowerCase();
   return !type || type === "text/javascript" || type === "application/javascript";
 }