fix(studio): a first animation in a sub-composition file runs from inside its template

Author: miguel-heygen

packages/studio-server/src/routes/files.test.ts

@@ -1714,6 +1714,39 @@ const tl = gsap.timeline({ paused: true });
     expect(html.indexOf('tl.set("#card"')).toBeGreaterThan(declaration);
   });
 
+  it("a first animation in a sub-composition file lands inside its template", async () => {
+    const projectDir = createProjectDir();
+    const app = new Hono();
+    registerFileRoutes(app, createAdapter(projectDir));
+    const sub =
+      '<template id="sub-template"><div data-composition-id="sub"><div id="card"></div></div></template>\n';
+    mkdirSync(join(projectDir, "compositions"), { recursive: true });
+    writeHtml(projectDir, "compositions/sub.html", sub);
+
+    const res = await app.request(
+      "http://localhost/projects/demo/gsap-mutations/compositions/sub.html",
+      {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          type: "add",
+          targetSelector: "#card",
+          method: "to",
+          position: 0,
+          properties: { opacity: 0 },
+        }),
+      },
+    );
+
+    expect(res.status).toBe(200);
+    const html = readFileSync(join(projectDir, "compositions/sub.html"), "utf-8");
+    const close = html.indexOf("</template>");
+    expect(html.indexOf('window.__timelines["sub"]')).toBeGreaterThan(-1);
+    expect(html.lastIndexOf("<script")).toBeLessThan(close);
+    expect(html.slice(close).trim()).toBe("</template>");
+    expect(html).not.toContain("<body");
+  });
+
   it("consolidate-position-writes leaves exactly one position write per selector", async () => {
     const projectDir = createProjectDir();
     const CORRUPTED = `<!DOCTYPE html><html><body><script data-hyperframes-gsap>

packages/studio-server/src/routes/files.ts

@@ -1267,6 +1267,12 @@ function containsRawGsapExpression(value: unknown): boolean {
   return Object.values(value).some(containsRawGsapExpression);
 }
 
+/** A sub-composition file is only its `<template>`, and the loader runs the scripts inside it. */
+function insertBeforeTemplateClose(html: string, markup: string): string | null {
+  const at = html.lastIndexOf("</template>");
+  return at === -1 ? null : `${html.slice(0, at)}${markup}\n${html.slice(at)}`;
+}
+
 async function prepareGsapMutationScript(
   c: RouteContext,
   res: ResolvedGsapFile,
@@ -1293,7 +1299,10 @@ async function prepareGsapMutationScript(
       `window.__timelines["${compId}"] = tl;`,
       "</script>",
     ].join("\n");
-    html = insertBeforeCloseTag(html, "body", `${bootstrap}\n`) ?? `${html}\n${bootstrap}`;
+    html =
+      insertBeforeCloseTag(html, "body", `${bootstrap}\n`) ??
+      insertBeforeTemplateClose(html, bootstrap) ??
+      `${html}\n${bootstrap}`;
     block = extractGsapScriptBlock(html);
   }
   if (