fix(core): a data script in a sub-composition no longer stops every timeline (#5205)

* fix(core): a data script in a sub-composition no longer stops every timeline

A sub-composition's <script type="application/json"> was wrapped and run as
JavaScript, and because the bundle merges every composition script into one,
its parse error stopped every scene's timeline. Data scripts now stay in the
DOM as authored, and a script run that does not parse is left unmerged so a
bad script fails alone.

* fix(core): render and preview keep a broken composition script from stopping the rest

The render path's script merge had the same gap as the bundler: one script
that does not parse stopped every timeline. Both now share one parse check.
A run left unmerged, and every scene-part script, is still escaped, so a
string holding "</script>" can no longer end the script early in preview.

* refactor(core): carry the bundler's script-merge reasons in names, not comments

* fix(core): every composition path runs only the scripts a browser would

A script check now matches the browser (esbuild accepted export and top-level
await), so such a script can no longer stop every timeline. Inline template
compositions keep data scripts and run module and import map scripts as such.
A data script beside the composition root is mounted next to it, a nomodule
script never runs, and the render path merges scripts on a page with no head.

* fix(core): keep inline-template data scripts and run a script with a top-level return alone

- parsesAsScript compiles with vm.Script, so a top-level return or new.target
  no longer passes as mergeable and stops every timeline.
- The bundler's inline <template id="X-template"> path asks the shared
  assembly plan for its root and mounts the inert scripts authored beside it.
- nomodule only stops classic scripts; type="module" nomodule runs, as in
  browsers.

* refactor(core): the inline template path reads its root id from the shared assembly plan

* fix(core): a broken composition script stays apart under Bun as well as Node

parsesAsScript now parses with acorn in script mode instead of vm.Script.
Bun 1.3's vm.Script compiles lazily and accepted any text, so the Studio dev
server merged a broken script with the rest and every timeline stopped.
acorn is already locked for parsers and lint; core now declares it.

* test(core): name the parse-check test for what it pins

* style(core): wrap the data-block comment under the line limit

Author: miguel-heygen

bun.lock

@@ -902,6 +902,7 @@
     "@hyperframes/lint": "workspace:*",
     "@hyperframes/parsers": "workspace:*",
     "@hyperframes/studio-server": "workspace:*",
+    "acorn": "^8.17.0",
     "bpm-detective": "^2.0.5",
     "linkedom": "^0.18.12",
     "postcss": "^8.5.8",

packages/core/package.json

@@ -126,6 +126,14 @@ describe("planCompositionAssembly", () => {
     expect(ids(plan.scriptSources)).toEqual(["head-script", "body-script"]);
   });
 
+  it.each([
+    [`<script nomodule></script>`, false],
+    [`<script type="module" nomodule></script>`, true],
+  ])("extracts %s only when a browser runs it: %s", (script, runs) => {
+    const plan = planFor(`<template><div data-composition-id="s">${script}</div></template>`, "s");
+    expect(plan.scriptSources).toHaveLength(runs ? 1 : 0);
+  });
+
   it("does not treat a templated composition's page head as an asset source", () => {
     // The head belongs to the host page, not to the composition; only the
     // non-templated (full-document) shape carries composition assets in <head>.

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

@@ -34,7 +34,64 @@ const SCRIPT_SELECTOR = "script";
  */
 const HOISTED_LINK_SELECTOR = 'link[rel="stylesheet"], link[rel="preconnect"]';
 
-export const EXTRACTED_COMPOSITION_ASSET_SELECTOR = `${STYLE_SELECTOR}, ${SCRIPT_SELECTOR}, ${HOISTED_LINK_SELECTOR}`;
+// The HTML spec's JavaScript MIME type essence matches: a script with any of these types runs as classic.
+const JAVASCRIPT_TYPES = new Set([
+  "",
+  "application/ecmascript",
+  "application/javascript",
+  "application/x-ecmascript",
+  "application/x-javascript",
+  "text/ecmascript",
+  "text/javascript",
+  "text/javascript1.0",
+  "text/javascript1.1",
+  "text/javascript1.2",
+  "text/javascript1.3",
+  "text/javascript1.4",
+  "text/javascript1.5",
+  "text/jscript",
+  "text/livescript",
+  "text/x-ecmascript",
+  "text/x-javascript",
+]);
+
+const scriptType = (el: AssemblyAttributed) => (el.getAttribute("type") || "").trim().toLowerCase();
+
+export function isJavaScriptType(el: AssemblyAttributed): boolean {
+  return JAVASCRIPT_TYPES.has(scriptType(el));
+}
+
+/**
+ * A data block (application/json, text/template, ...) or a classic nomodule script never runs,
+ * so it is mounted as authored.
+ */
+function isExecutableScript(el: AssemblyAttributed): boolean {
+  const type = scriptType(el);
+  if (type === "module" || type === "importmap") return true;
+  return JAVASCRIPT_TYPES.has(type) && el.getAttribute("nomodule") === null;
+}
+
+function inertScripts<TElement extends AssemblyAttributed>(
+  node: AssemblyQueryable<TElement> | null | undefined,
+): TElement[] {
+  return toArray(node?.querySelectorAll(SCRIPT_SELECTOR)).filter((el) => !isExecutableScript(el));
+}
+
+export function executableScripts<TElement extends AssemblyAttributed>(
+  node: AssemblyQueryable<TElement> | null | undefined,
+): TElement[] {
+  return toArray(node?.querySelectorAll(SCRIPT_SELECTOR)).filter(isExecutableScript);
+}
+
+/** The styles, scripts and links both paths extract, so the mounted copy must drop them. */
+export function extractedCompositionAssets<TElement extends AssemblyAttributed>(
+  node: AssemblyQueryable<TElement>,
+): TElement[] {
+  return [
+    ...toArray(node.querySelectorAll(`${STYLE_SELECTOR}, ${HOISTED_LINK_SELECTOR}`)),
+    ...executableScripts(node),
+  ];
+}
 
 /**
  * The compiler's nesting cap, enforced against the ancestry chain rather than a
@@ -136,6 +193,9 @@ export interface CompositionAssemblyPlan<TElement extends AssemblyAttributed> {
   /** Head and content links to hoist into the host document. */
   linkSources: TElement[];
 
+  /** Inert scripts the mounted root would leave behind; both paths mount them next to it. */
+  inertScriptsOutsideRoot: TElement[];
+
   /**
    * Nodes that may declare the composition's variable defaults, in precedence
    * order — later wins. Full-document compositions declare on `<html>`;
@@ -159,9 +219,9 @@ function toArray<TElement>(items: Iterable<TElement> | null | undefined): TEleme
  * how it is identified. Pure: it reads attributes and runs selectors, and does
  * not mutate, fetch, or touch a filesystem.
  */
-export function planCompositionAssembly<TElement extends AssemblyAttributed>(
-  input: CompositionAssemblyInput<TElement>,
-): CompositionAssemblyPlan<TElement> {
+export function planCompositionAssembly<
+  TElement extends AssemblyAttributed & AssemblyQueryable<TElement>,
+>(input: CompositionAssemblyInput<TElement>): CompositionAssemblyPlan<TElement> {
   const { contentNode, head, documentElement, hasTemplate, compositionId } = input;
 
   const compositionRoots = toArray(contentNode.querySelectorAll(COMPOSITION_ROOT_SELECTOR));
@@ -177,6 +237,7 @@ export function planCompositionAssembly<TElement extends AssemblyAttributed>(
 
   // A templated composition's <head> belongs to its host page, not to it.
   const assetHead = hasTemplate ? null : (head ?? null);
+  const mountedInert = innerRoot ? inertScripts(innerRoot) : [];
 
   return {
     innerRoot,
@@ -187,14 +248,15 @@ export function planCompositionAssembly<TElement extends AssemblyAttributed>(
       ...toArray(assetHead?.querySelectorAll(STYLE_SELECTOR)),
       ...toArray(contentNode.querySelectorAll(STYLE_SELECTOR)),
     ],
-    scriptSources: [
-      ...toArray(assetHead?.querySelectorAll(SCRIPT_SELECTOR)),
-      ...toArray(contentNode.querySelectorAll(SCRIPT_SELECTOR)),
-    ],
+    scriptSources: [...executableScripts(assetHead), ...executableScripts(contentNode)],
     linkSources: [
       ...toArray(head?.querySelectorAll(HOISTED_LINK_SELECTOR)),
       ...toArray(contentNode.querySelectorAll(HOISTED_LINK_SELECTOR)),
     ],
+    inertScriptsOutsideRoot: [
+      ...inertScripts(assetHead),
+      ...(innerRoot ? inertScripts(contentNode).filter((el) => !mountedInert.includes(el)) : []),
+    ],
     variableDefaultCarriers: [documentElement, innerRoot].filter(
       (carrier): carrier is TElement => carrier != null,
     ),