@master/internal-site 0.2.3 → 0.2.4

package/dist/astro.mjs

@@ -250,7 +250,7 @@ async function inlineGeneratedStyles(file, ancestors = []) {
 }
 /** Preserve HTML link order and each reusable entry's cache identity. Originals
 * remain available to any JS/CSS references; no client loading logic is added. */
-async function compactStyleAssets(output) {
+async function compactStyleAssets(output, transformPage = (html) => html) {
 	const root = resolve(output), replacements = /* @__PURE__ */ new Map();
 	const documents = /* @__PURE__ */ new Map(), users = /* @__PURE__ */ new Map();
 	const boundaries = /* @__PURE__ */ new Set();
@@ -322,9 +322,32 @@ async function compactStyleAssets(output) {
 			await flush();
 			html = html.replace(run[0], replacement);
 		}
-		await writeFile(file, html);
+		await writeFile(file, transformPage(html));
 	}
 }
+// src/astro/island-scripts.ts
+const islandScriptSlot = "<!--master-site:island-scripts-->";
+const islandStyles = "<style>astro-island,astro-slot,astro-static-slot{display:contents}</style>";
+/** Move Astro's first client:load preamble ahead of the stylesheets. A classic
+* script after a stylesheet pauses HTML parsing until that stylesheet arrives. */
+function hoistIslandScripts(html) {
+	const slot = html.indexOf(islandScriptSlot);
+	if (slot < 0) return html;
+	const unchanged = () => html.replace(islandScriptSlot, "");
+	const headEnd = html.indexOf("</head>", slot);
+	const body = html.indexOf("<body", headEnd);
+	if (headEnd < 0 || body < 0) return unchanged();
+	const island = html.indexOf("<astro-island ", body);
+	const styles = html.indexOf(islandStyles, body);
+	if (island < 0 || styles < 0 || styles > island) return unchanged();
+	const start = styles + 74;
+	const preamble = html.slice(start, island);
+	const scripts = preamble.match(/<script>[\s\S]*?<\/script>/g);
+	if (!scripts || scripts.length !== 2 || preamble.trim() !== scripts.join("")) return unchanged();
+	const [directive, runtime] = scripts;
+	if (!directive.includes("astro:load") || !directive.includes("self.Astro") || !runtime.includes("customElements.define(") || !runtime.includes("astro-island")) return unchanged();
+	return (html.slice(0, start) + html.slice(island)).replace(islandScriptSlot, directive + runtime);
+}
 // src/docs-shell/remark/slug-and-toc.js
 function remarkSlugAndTOC() {
 	return (tree) => {
@@ -688,7 +711,7 @@ function masterSite(site) {
 					recursive: true,
 					force: false
 				});
-				await compactStyleAssets(fileURLToPath(destination));
+				await compactStyleAssets(fileURLToPath(destination), hoistIslandScripts);
 			}
 		}
 	};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@master/internal-site",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "type": "module",
   "description": "First-party Astro and Svelte website framework for Master sites.",
   "engines": {

package/src/astro/index.ts

@@ -17,6 +17,7 @@ import serverStyles from './server-styles'
 import svgMarkup from './svg-markup'
 import localizedMdx from './localized-mdx'
 import { compactStyleAssets } from './style-assets'
+import { hoistIslandScripts } from './island-scripts'
 import remarkSlugAndTOC from '../docs-shell/remark/slug-and-toc.js'
 import remarkMarkdownComponents from '../docs-shell/remark/markdown-components.js'
 import svgoConfig from '../docs-shell/common/svgo.config.js'
@@ -123,7 +124,7 @@ export default function masterSite(site: SiteConfig): AstroIntegration {
         const destination = output
         await mkdir(destination, { recursive: true })
         await cp(new URL('../public/', import.meta.url), destination, { recursive: true, force: false })
-        await compactStyleAssets(fileURLToPath(destination))
+        await compactStyleAssets(fileURLToPath(destination), hoistIslandScripts)
       }
     }
   }

package/src/astro/island-scripts.ts

@@ -0,0 +1,31 @@
+export const islandScriptSlot = '<!--master-site:island-scripts-->'
+
+const islandStyles = '<style>astro-island,astro-slot,astro-static-slot{display:contents}</style>'
+
+/** Move Astro's first client:load preamble ahead of the stylesheets. A classic
+ * script after a stylesheet pauses HTML parsing until that stylesheet arrives. */
+export function hoistIslandScripts(html: string) {
+  const slot = html.indexOf(islandScriptSlot)
+  if (slot < 0) return html
+  const unchanged = () => html.replace(islandScriptSlot, '')
+
+  const headEnd = html.indexOf('</head>', slot)
+  const body = html.indexOf('<body', headEnd)
+  if (headEnd < 0 || body < 0) return unchanged()
+
+  const island = html.indexOf('<astro-island ', body)
+  const styles = html.indexOf(islandStyles, body)
+  if (island < 0 || styles < 0 || styles > island) return unchanged()
+
+  const start = styles + islandStyles.length
+  const preamble = html.slice(start, island)
+  const scripts = preamble.match(/<script>[\s\S]*?<\/script>/g)
+  if (!scripts || scripts.length !== 2 || preamble.trim() !== scripts.join('')) return unchanged()
+  const [directive, runtime] = scripts
+  // Leave unfamiliar Astro output alone. Only the shell's known first island
+  // can supply this preamble. Author scripts and later directives stay put.
+  if (!directive.includes('astro:load') || !directive.includes('self.Astro')
+    || !runtime.includes('customElements.define(') || !runtime.includes('astro-island')) return unchanged()
+
+  return (html.slice(0, start) + html.slice(island)).replace(islandScriptSlot, directive + runtime)
+}

package/src/astro/style-assets.ts

@@ -30,7 +30,7 @@ export async function inlineGeneratedStyles(file: string, ancestors: string[] =
 
 /** Preserve HTML link order and each reusable entry's cache identity. Originals
  * remain available to any JS/CSS references; no client loading logic is added. */
-export async function compactStyleAssets(output: string) {
+export async function compactStyleAssets(output: string, transformPage = (html: string) => html) {
   const root = resolve(output), replacements = new Map<string, string>()
   const documents = new Map<string, string>(), users = new Map<string, string[]>()
   const boundaries = new Set<string>()
@@ -102,6 +102,6 @@ export async function compactStyleAssets(output: string) {
       await flush()
       html = html.replace(run[0], replacement)
     }
-    await writeFile(file, html)
+    await writeFile(file, transformPage(html))
   }
 }

package/src/layouts/Document.astro

@@ -9,6 +9,7 @@ import { localizePathname } from '../astro/route-paths'
 import { siteContextElementId } from '../docs-shell/site'
 import type { Metadata } from '../docs-shell/types/Metadata'
 import type { PageAssets } from '../astro/propagated-assets'
+import { islandScriptSlot } from '../astro/island-scripts'
 import NavigationTransition from './NavigationTransition.astro'
 
 interface Props {
@@ -50,14 +51,15 @@ if (['dark', 'light'].includes(value)) document.documentElement.style.colorSchem
     <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="any" />
     <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
     <script is:inline blocking="render" set:html={themeScript}></script>
+    {!bare && import.meta.env.PROD && <Fragment set:html={islandScriptSlot} />}
     <link blocking="render" rel="preload" as="font" href="/fonts/GeistVariable.woff2" crossorigin="anonymous" />
     <link blocking="render" rel="preload" as="font" href="/fonts/IBMPlexMono-Regular.woff2" crossorigin="anonymous" />
     {(site.locale !== 'en' || basePathname === '/brand') && <link href={`https://fonts.googleapis.com/css2?family=Noto+Sans+${({ ja: 'JP', ko: 'KR', cn: 'SC' } as Record<string, string>)[site.locale] ?? 'TC'}:wght@100..900&display=swap`} rel="stylesheet" />}
     <style is:inline blocking="render" set:html={fontCSS}></style>
+    {assets.links.map((href) => <link rel="stylesheet" href={href} />)}
     {/* client:load islands can hydrate while a streamed body is still parsing.
-        Their request-local context must already exist, even with cached CSS/JS. */}
+        Keep their context in the head, after stylesheet discovery. */}
     <script is:inline type="application/json" id={siteContextElementId} set:html={siteContextJSON}></script>
-    {assets.links.map((href) => <link rel="stylesheet" href={href} />)}
     {/* Without the dev id, Vite appends a second copy when an island imports the same CSS, reordering the cascade. */}
     {assets.styles.map(({ id, content }) => <style is:inline data-vite-dev-id={id} set:html={content}></style>)}
     <title>{head.title}</title>