fix(core): an added sub-composition keeps its declared variable defaults when bundled (#4539)

* fix(core): an added sub-composition keeps its declared variable defaults when bundled

parseHTMLContent only treated input as a full document when it started with
a doctype or <html>. Files installed by `hyperframes add` start with a marker
comment, so they were wrapped as a fragment in a new <html> and lost their own
<html data-composition-variables>. Leading comments are now skipped first.

* fix(studio-server): an installed block's preview keeps its <html> variables

isFullHtmlDocument moves to core beside parseHTMLContent and both callers use
it, so the standalone preview of a file that `hyperframes add` installed (a
marker comment above the doctype) is treated as the full document it is. The
leading-comment skip also handles an empty `<!-->` comment, and `<html-card>`
style elements no longer count as a document.

* fix(core): a doctype written without a space still reads as a full document

Author: miguel-heygen

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

@@ -962,6 +962,32 @@ describe("bundleToSingleHtml", () => {
     expect(externalHost?.querySelector("p")?.textContent).toBe("External scene");
   });
 
+  it("keeps an installed sub-composition's declared defaults for getVariables", async () => {
+    // `hyperframes add` writes a marker comment above the doctype.
+    const dir = makeTempProject({
+      "index.html": `<!doctype html>
+<html><head></head><body>
+  <div id="root" data-composition-id="main" data-width="1920" data-height="1080">
+    <div data-composition-id="blk" data-composition-src="compositions/blk.html"></div>
+  </div>
+  <script>window.__timelines={};</script>
+</body></html>`,
+      "compositions/blk.html": `<!-- hyperframes-registry-item: blk -->
+<!doctype html>
+<html data-composition-variables='[{"id":"image1","type":"image","default":"assets/blk/one.jpg"}]'>
+  <body>
+    <div id="blk-root" data-composition-id="blk" data-width="1920" data-height="1080">
+      <script>window.__blkVars = __hyperframes.getVariables();</script>
+    </div>
+  </body>
+</html>`,
+    });
+
+    const bundled = await bundleToSingleHtml(dir);
+
+    expect(bundled).toMatch(/__hfVariablesByComp = Object\.assign\([^;]*assets\/blk\/one\.jpg/);
+  });
+
   it("emits per-instance scoped variables for bundled sub-compositions", async () => {
     const dir = makeTempProject({
       "index.html": `<!doctype html>

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

@@ -4,11 +4,29 @@ import {
   injectScriptsIntoHtml,
   injectTagsAtHeadStart,
   insertBeforeCloseTag,
+  isFullHtmlDocument,
   parseHTMLContent,
   stripEmbeddedRuntimeScripts,
 } from "./htmlDocument.js";
 
 describe("htmlDocument helpers", () => {
+  it("keeps a document's <html> attributes when a comment comes before the doctype", () => {
+    const doc = parseHTMLContent(
+      '<!-- hyperframes-registry-item: blk -->\n<!doctype html>\n<html lang="en" data-composition-variables="[]"><body></body></html>',
+    );
+    expect(doc.documentElement.getAttribute("lang")).toBe("en");
+    expect(doc.documentElement.hasAttribute("data-composition-variables")).toBe(true);
+  });
+
+  it("tells a document from a fragment past leading comments", () => {
+    expect(isFullHtmlDocument("<!-- marker -->\n<!doctype html><html></html>")).toBe(true);
+    expect(isFullHtmlDocument("<!-- a --><!-- b --><html lang='en'></html>")).toBe(true);
+    expect(isFullHtmlDocument("<!-- marker --><div data-composition-id='x'></div>")).toBe(false);
+    expect(isFullHtmlDocument("<!--><div></div><!-- --><html></html>")).toBe(false);
+    expect(isFullHtmlDocument("<html-card></html-card>")).toBe(false);
+    expect(isFullHtmlDocument("<!DOCTYPEhtml><html/ lang='en'></html>")).toBe(true);
+  });
+
   it("wraps fragments before parsing", () => {
     const doc = parseHTMLContent("<template><span>hello</span></template>");
     expect(doc.body.querySelector("template")?.innerHTML).toContain("<span>hello</span>");

packages/core/src/compiler/htmlDocument.ts

@@ -22,13 +22,18 @@ const SIMPLE_RUNTIME_FLAG_ASSIGNMENTS = [
   /^window\.__renderReady\s*=\s*(?:true|false)\s*;?$/,
 ];
 
+const LEADING_COMMENTS = /^(?:\s|<!--(?:>|->|[\s\S]*?-->))*/;
+
+export function isFullHtmlDocument(html: string): boolean {
+  return /^(?:<!doctype|<html[\s>/])/i.test(html.replace(LEADING_COMMENTS, ""));
+}
+
 /**
  * Parse a full HTML document or wrap a fragment so linkedom consistently puts
  * fragment content under document.body.
  */
 export function parseHTMLContent(html: string): Document {
-  const trimmed = html.trimStart().toLowerCase();
-  if (trimmed.startsWith("<!doctype") || trimmed.startsWith("<html")) {
+  if (isFullHtmlDocument(html)) {
     return parseHTML(html).document;
   }
   return parseHTML(`<!DOCTYPE html><html><head></head><body>${html}</body></html>`).document;

packages/studio-server/src/helpers/subComposition.test.ts

@@ -90,6 +90,26 @@ describe("buildSubCompositionHtml", () => {
     expect(html).toContain('lang="en"');
   });
 
+  it("keeps an installed block's <html> variables though a marker comment precedes the doctype", () => {
+    const dir = makeTempProject({
+      "index.html": `<!doctype html>
+<html><head></head><body></body></html>`,
+      "compositions/blk.html": `<!-- hyperframes-registry-item: blk -->
+<!doctype html>
+<html lang="en" data-composition-variables='[{"id":"image1","type":"image","default":"assets/blk/one.jpg"}]'>
+  <body>
+    <div id="root" data-composition-id="blk" data-width="1920" data-height="1080"></div>
+  </body>
+</html>`,
+    });
+
+    const html = buildSubCompositionHtml(dir, "compositions/blk.html", "/api/runtime.js", "/p/");
+
+    const body = html!.indexOf("<body");
+    expect(html!.slice(0, body)).toContain("data-composition-variables=");
+    expect(html!.slice(body)).not.toContain("<html");
+  });
+
   it("handles raw fragment compositions (no template, no full document)", () => {
     const dir = makeTempProject({
       "index.html": `<!doctype html>

packages/studio-server/src/helpers/subComposition.ts

@@ -7,16 +7,7 @@ import {
   rewriteInlineStyleAssetUrls,
 } from "@hyperframes/core";
 import { stripEmbeddedRuntimeScripts } from "@hyperframes/core/compiler";
-
-/**
- * Detect whether `html` is a full document (has `<html>`, `<head>`, or
- * `<!doctype`), as opposed to a `<template>`-wrapped fragment.
- * Anchored to start-of-string (ignoring leading whitespace) so stray
- * occurrences inside script/template content don't false-positive.
- */
-function isFullHtmlDocument(html: string): boolean {
-  return /^\s*(?:<!doctype\s|<html[\s>])/i.test(html);
-}
+import { isFullHtmlDocument } from "@hyperframes/core/compiler/html-document";
 
 /**
  * Rewrite relative asset paths in a parsed DOM tree. Shared across all