diff --git a/packages/core/src/compiler/compositionAssembly.ts b/packages/core/src/compiler/compositionAssembly.ts index 7564c30200..256ae161c4 100644 --- a/packages/core/src/compiler/compositionAssembly.ts +++ b/packages/core/src/compiler/compositionAssembly.ts @@ -29,11 +29,13 @@ const STYLE_SELECTOR = "style"; const SCRIPT_SELECTOR = "script"; /** - * `` links both paths hoist into the host document. Stylesheets carry + * Links both paths hoist into the host document. Stylesheets carry * webfonts a composition's CSS depends on; preconnects are their latency hint. */ const HOISTED_LINK_SELECTOR = 'link[rel="stylesheet"], link[rel="preconnect"]'; +export const EXTRACTED_COMPOSITION_ASSET_SELECTOR = `${STYLE_SELECTOR}, ${SCRIPT_SELECTOR}, ${HOISTED_LINK_SELECTOR}`; + /** * The compiler's nesting cap, enforced against the ancestry chain rather than a * counter so a wide tree is not penalised for a deep sibling. @@ -131,7 +133,7 @@ export interface CompositionAssemblyPlan { */ scriptSources: TElement[]; - /** `` links to hoist into the host document. */ + /** Head and content links to hoist into the host document. */ linkSources: TElement[]; /** @@ -189,7 +191,10 @@ export function planCompositionAssembly( ...toArray(assetHead?.querySelectorAll(SCRIPT_SELECTOR)), ...toArray(contentNode.querySelectorAll(SCRIPT_SELECTOR)), ], - linkSources: toArray(head?.querySelectorAll(HOISTED_LINK_SELECTOR)), + linkSources: [ + ...toArray(head?.querySelectorAll(HOISTED_LINK_SELECTOR)), + ...toArray(contentNode.querySelectorAll(HOISTED_LINK_SELECTOR)), + ], variableDefaultCarriers: [documentElement, innerRoot].filter( (carrier): carrier is TElement => carrier != null, ), diff --git a/packages/core/src/compiler/inlineSubCompositions.test.ts b/packages/core/src/compiler/inlineSubCompositions.test.ts index a05e993fab..e89d0dee88 100644 --- a/packages/core/src/compiler/inlineSubCompositions.test.ts +++ b/packages/core/src/compiler/inlineSubCompositions.test.ts @@ -68,6 +68,26 @@ describe("inlineSubCompositions – #ID selector scoping divergence", () => { expect(result.scripts).toHaveLength(0); }); + it("hoists stylesheet and preconnect links from a bare fragment", () => { + const document = makeHostDocument("intro"); + const host = document.querySelector('[data-composition-src="intro.html"]')!; + const result = inlineSubCompositions(document, [host], { + resolveHtml: () => ` + + +
Hello
`, + parseHtml: (html) => parseHTML(html).document, + }); + + expect(result.externalLinks).toEqual([ + { href: "theme.css", rel: "stylesheet", crossorigin: undefined }, + { href: "https://fonts.example", rel: "preconnect", crossorigin: "" }, + { href: "nested.css", rel: "stylesheet", crossorigin: undefined }, + ]); + expect(host.querySelectorAll('link[rel="stylesheet"]')).toHaveLength(0); + expect(host.querySelectorAll('link[rel="icon"]')).toHaveLength(1); + }); + it("passes the failure reason through to onMissingComposition", () => { const document = makeHostDocument("intro"); const host = document.querySelector('[data-composition-src="intro.html"]')!; diff --git a/packages/core/src/compiler/inlineSubCompositions.ts b/packages/core/src/compiler/inlineSubCompositions.ts index 57d42ec5d9..c0fcadb64d 100644 --- a/packages/core/src/compiler/inlineSubCompositions.ts +++ b/packages/core/src/compiler/inlineSubCompositions.ts @@ -22,8 +22,15 @@ import { wrapInlineScriptWithErrorBoundary, wrapScopedCompositionScript, } from "./compositionScoping"; -import { checkSubCompositionUsability } from "@hyperframes/parsers/sub-composition-validity"; -import { enumerateNestedCompositionHosts, planCompositionAssembly } from "./compositionAssembly"; +import { + checkSubCompositionUsability, + resolveSubCompositionContent, +} from "@hyperframes/parsers/sub-composition-validity"; +import { + enumerateNestedCompositionHosts, + planCompositionAssembly, + EXTRACTED_COMPOSITION_ASSET_SELECTOR, +} from "./compositionAssembly"; // --------------------------------------------------------------------------- // Public interface @@ -154,7 +161,7 @@ function defaultBuildScopeSelector(compId: string): string { * Inline sub-compositions into a document. For each host element in `hosts`: * * 1. Resolve the sub-composition HTML via `options.resolveHtml` - * 2. Parse it, find `