@void/svelte 1.1.11 → 1.1.12

package/dist/plugin.mjs

@@ -4,7 +4,7 @@ import { existsSync, readFileSync, readdirSync } from "node:fs";
 import nodePath from "node:path";
 import { preprocess } from "svelte/compiler";
 import { normalizePath } from "vite";
-import { ISLANDS_CLIENT_ENTRY_ID, ISLANDS_RENDERER_ID, computePagesNeedingClientJS, editIslandSource, findIslandImports, findStaticCssImports, needsIslandClientBundle, resolveSpecifier, rewriteCssImportForVirtualModule, watchPagesForRescan } from "void/pages-islands-plugin";
+import { ISLANDS_CLIENT_ENTRY_ID, ISLANDS_RENDERER_ID, computePagesNeedingClientJS, editIslandSource, findIslandImports, findStaticCssImports, hasIslandPages, islandStylesPlugin, recordIslandStyles, recordedIslandStyles, resolveSpecifier, rewriteCssImportForVirtualModule, watchPagesForRescan } from "void/pages-islands-plugin";
 //#region ../../node_modules/.pnpm/pathslash@0.1.0/node_modules/pathslash/dist/index.mjs
 const BACKSLASH_RE = /\\/g;
 const isWindows = process.platform === "win32";
@@ -80,136 +80,146 @@ function islandsPlugin(pagesDir, options) {
 			islandId
 		};
 	}
-	return [{
-		name: "void-svelte:islands",
-		enforce: "pre",
-		configResolved(config) {
-			resolvedConfig = config;
-			isDev = config.command === "serve";
-		},
-		configureServer(server) {
-			watchPagesForRescan(server, pagesDir, root, (scan) => {
-				pageScan = scan;
-			});
-		},
-		async buildStart() {
-			if (existsSync(pagesDir)) {
-				pageScan = await scanPages(root, { pagesDir });
-				const filesToScan = [
-					...pageScan.pages.map((page) => ({
-						filePath: page.componentPath,
-						island: page.island
-					})),
-					...pageScan.layouts.map((layout) => ({
-						filePath: layout.filePath,
-						island: layout.island
-					})),
-					...pageScan.namedLayouts.map((namedLayout) => ({
-						filePath: namedLayout.filePath,
-						island: namedLayout.island
-					}))
-				];
-				for (const entry of filesToScan) {
-					if (!entry.island) continue;
-					const filePath = resolve(pagesDir, entry.filePath);
-					const code = readFileSync(filePath, "utf-8");
-					const importerDir = dirname(filePath);
-					for (const islandImport of findIslandImports(code, filePath)) registerIsland(islandImport.specifier, importerDir, islandImport.hydrate);
+	return [
+		{
+			name: "void-svelte:islands",
+			enforce: "pre",
+			configResolved(config) {
+				resolvedConfig = config;
+				isDev = config.command === "serve";
+			},
+			configureServer(server) {
+				watchPagesForRescan(server, pagesDir, root, (scan) => {
+					pageScan = scan;
+				});
+			},
+			async buildStart() {
+				if (existsSync(pagesDir)) {
+					pageScan = await scanPages(root, { pagesDir });
+					const filesToScan = [
+						...pageScan.pages.map((page) => ({
+							filePath: page.componentPath,
+							island: page.island
+						})),
+						...pageScan.layouts.map((layout) => ({
+							filePath: layout.filePath,
+							island: layout.island
+						})),
+						...pageScan.namedLayouts.map((namedLayout) => ({
+							filePath: namedLayout.filePath,
+							island: namedLayout.island
+						}))
+					];
+					for (const entry of filesToScan) {
+						if (!entry.island) continue;
+						const filePath = resolve(pagesDir, entry.filePath);
+						const code = readFileSync(filePath, "utf-8");
+						const importerDir = dirname(filePath);
+						for (const islandImport of findIslandImports(code, filePath)) registerIsland(islandImport.specifier, importerDir, islandImport.hydrate);
+					}
+					for (const page of pageScan.pages) {
+						if (!page.island) continue;
+						if (page.componentPath.endsWith(".svelte")) islandCssFiles.add(normalizePath(resolve(pagesDir, page.componentPath)));
+						const layoutChain = resolveEffectiveLayoutChain(page, pageScan.layouts, pageScan.namedLayouts);
+						for (const layout of layoutChain) islandCssFiles.add(normalizePath(resolve(pagesDir, layout.filePath)));
+					}
 				}
-				for (const page of pageScan.pages) {
-					if (!page.island) continue;
-					if (page.componentPath.endsWith(".svelte")) islandCssFiles.add(normalizePath(resolve(pagesDir, page.componentPath)));
-					const layoutChain = resolveEffectiveLayoutChain(page, pageScan.layouts, pageScan.namedLayouts);
-					for (const layout of layoutChain) islandCssFiles.add(normalizePath(resolve(pagesDir, layout.filePath)));
+			},
+			buildEnd() {
+				recordIslandStyles(this, pageScan, pagesDir);
+			},
+			resolveId: {
+				filter: { id: /^(virtual:void-islands-(renderer|client)|\/@void-island-wrap\/)/ },
+				handler(source) {
+					if (source === ISLANDS_RENDERER_ID || source === ISLANDS_CLIENT_ENTRY_ID) return "\0" + source;
+					if (source.startsWith(WRAPPER_PREFIX)) return source;
 				}
-			}
-		},
-		resolveId: {
-			filter: { id: /^(virtual:void-islands-(renderer|client)|\/@void-island-wrap\/)/ },
-			handler(source) {
-				if (source === ISLANDS_RENDERER_ID || source === ISLANDS_CLIENT_ENTRY_ID) return "\0" + source;
-				if (source.startsWith(WRAPPER_PREFIX)) return source;
-			}
-		},
-		load: {
-			filter: { id: /^(\0virtual:void-islands-(renderer|client)|\/@void-island-wrap\/)/ },
-			handler(id) {
-				if (id === "\0" + ISLANDS_RENDERER_ID) {
-					if (!pageScan) return "export function renderIslandPage() { throw new Error('No pages found'); }";
-					const mdPlugin = resolvedConfig?.plugins?.find((plugin) => plugin.name === "void-md");
-					const mdScriptIds = new Set(mdPlugin?.api?.getClientScripts?.()?.keys() ?? []);
-					const needsJS = computePagesNeedingClientJS(pageScan, pagesDir, resolvedConfig);
-					return generateIslandRenderer(pageScan, pagesDir, mdScriptIds, needsJS);
+			},
+			load: {
+				filter: { id: /^(\0virtual:void-islands-(renderer|client)|\/@void-island-wrap\/)/ },
+				handler(id) {
+					if (id === "\0" + ISLANDS_RENDERER_ID) {
+						if (!pageScan) return "export function renderIslandPage() { throw new Error('No pages found'); }";
+						const mdPlugin = resolvedConfig?.plugins?.find((plugin) => plugin.name === "void-md");
+						const mdScriptIds = new Set(mdPlugin?.api?.getClientScripts?.()?.keys() ?? []);
+						const needsJS = computePagesNeedingClientJS(pageScan, pagesDir, resolvedConfig);
+						return generateIslandRenderer(pageScan, pagesDir, mdScriptIds, needsJS);
+					}
+					if (id === "\0" + ISLANDS_CLIENT_ENTRY_ID) {
+						if (!pageScan) return "";
+						return generateIslandClientEntry(islandManifest, islandCssFiles, recordedIslandStyles(pagesDir), islandManifest.size > 0 || computePagesNeedingClientJS(pageScan, pagesDir, resolvedConfig).size > 0, isDev);
+					}
+					if (id.startsWith(WRAPPER_PREFIX)) return generateWrapperComponent(id);
 				}
-				if (id === "\0" + ISLANDS_CLIENT_ENTRY_ID) {
-					if (!pageScan) return "";
-					return generateIslandClientEntry(islandManifest, islandCssFiles, isDev);
+			},
+			transform: {
+				filter: { id: /\.island\.svelte$/ },
+				handler(code, id) {
+					if (/import\s+\{[^}]*\buseForm\b/.test(code)) this.warn(`islands: useForm cannot be imported in island page '${id}'. Use useIslandForm instead.`);
+					const importerDir = dirname(id);
+					const edits = [];
+					for (const islandImport of findIslandImports(code, id)) {
+						const name = islandImport.importName;
+						const spec = islandImport.specifier;
+						const strategy = islandImport.hydrate;
+						const { absPath, islandId } = registerIsland(spec, importerDir, strategy);
+						const wrapperUrl = WRAPPER_PREFIX + encodeURIComponent(islandId) + ".svelte?src=" + encodeURIComponent(absPath || spec) + "&island=" + encodeURIComponent(islandId) + "&hydrate=" + encodeURIComponent(strategy);
+						const replacement = `import ${name} from ${JSON.stringify(wrapperUrl)}`;
+						edits.push({
+							start: islandImport.start,
+							end: islandImport.end,
+							text: replacement
+						});
+					}
+					if (edits.length > 0) return editIslandSource(code, edits);
 				}
-				if (id.startsWith(WRAPPER_PREFIX)) return generateWrapperComponent(id);
+			},
+			async config(_, env) {
+				if (!existsSync(pagesDir)) return;
+				if (env.command === "serve") return { optimizeDeps: { include: ["svelte"] } };
+				if (await hasIslandPages(root, pagesDir)) return { environments: { client: { build: {
+					manifest: true,
+					rollupOptions: { input: { "islands-client": ISLANDS_CLIENT_ENTRY_ID } }
+				} } } };
 			}
 		},
-		transform: {
-			filter: { id: /\.island\.svelte$/ },
-			handler(code, id) {
-				if (/import\s+\{[^}]*\buseForm\b/.test(code)) this.warn(`islands: useForm cannot be imported in island page '${id}'. Use useIslandForm instead.`);
-				const importerDir = dirname(id);
-				const edits = [];
-				for (const islandImport of findIslandImports(code, id)) {
-					const name = islandImport.importName;
-					const spec = islandImport.specifier;
-					const strategy = islandImport.hydrate;
-					const { absPath, islandId } = registerIsland(spec, importerDir, strategy);
-					const wrapperUrl = WRAPPER_PREFIX + encodeURIComponent(islandId) + ".svelte?src=" + encodeURIComponent(absPath || spec) + "&island=" + encodeURIComponent(islandId) + "&hydrate=" + encodeURIComponent(strategy);
-					const replacement = `import ${name} from ${JSON.stringify(wrapperUrl)}`;
-					edits.push({
-						start: islandImport.start,
-						end: islandImport.end,
-						text: replacement
-					});
+		{
+			name: "void-svelte:islands-style",
+			apply: "build",
+			resolveId: {
+				filter: { id: /\.svelte\.css\?island-style$/ },
+				handler(source) {
+					return source;
 				}
-				if (edits.length > 0) return editIslandSource(code, edits);
-			}
-		},
-		config(_, env) {
-			if (!existsSync(pagesDir)) return;
-			if (env.command === "serve") return { optimizeDeps: { include: ["svelte"] } };
-			if (needsIslandClientBundle(pagesDir, /\.island\.svelte$/, true)) return { environments: { client: { build: {
-				manifest: true,
-				rollupOptions: { input: { "islands-client": ISLANDS_CLIENT_ENTRY_ID } }
-			} } } };
-		}
-	}, {
-		name: "void-svelte:islands-style",
-		apply: "build",
-		resolveId: {
-			filter: { id: /\.svelte\.css\?island-style$/ },
-			handler(source) {
-				return source;
-			}
-		},
-		load: {
-			filter: { id: /\.svelte\.css\?island-style$/ },
-			async handler(id) {
-				const file = id.slice(0, -17);
-				const api = resolvedConfig?.plugins.find((plugin) => plugin.name === "vite-plugin-svelte:config")?.api;
-				if (typeof api?.compileSvelte !== "function" || typeof api.idParser !== "function") this.error("Svelte island page styles need the @sveltejs/vite-plugin-svelte version that @void/svelte depends on.");
-				this.addWatchFile(file);
-				let code = readFileSync(file, "utf-8");
-				let map;
-				if (api.options.preprocess) {
-					const processed = await preprocess(code, api.options.preprocess, { filename: file });
-					code = processed.code;
-					map = processed.map;
-					for (const dependency of processed.dependencies ?? []) this.addWatchFile(dependency);
+			},
+			load: {
+				filter: { id: [/\.svelte\.css\?island-style$/, /\.svelte\?svelte&type=style/] },
+				order: "pre",
+				async handler(id) {
+					const islandStyle = id.endsWith(".css?island-style");
+					if (!islandStyle && (this.environment.config.consumer !== "client" || !recordedIslandStyles(pagesDir)?.includes(id))) return;
+					const file = islandStyle ? id.slice(0, -17) : id.slice(0, id.indexOf("?"));
+					const api = resolvedConfig?.plugins.find((plugin) => plugin.name === "vite-plugin-svelte:config")?.api;
+					if (typeof api?.compileSvelte !== "function" || typeof api.idParser !== "function") this.error("Svelte island page styles need the @sveltejs/vite-plugin-svelte version that @void/svelte depends on.");
+					this.addWatchFile(file);
+					let code = readFileSync(file, "utf-8");
+					let map;
+					if (api.options.preprocess) {
+						const processed = await preprocess(code, api.options.preprocess, { filename: file });
+						code = processed.code;
+						map = processed.map;
+						for (const dependency of processed.dependencies ?? []) this.addWatchFile(dependency);
+					}
+					const { compiled } = await api.compileSvelte(api.idParser(file, false), code, api.options, this.environment, map);
+					return {
+						code: compiled.css?.code ?? "",
+						map: compiled.css?.map ?? null
+					};
 				}
-				const { compiled } = await api.compileSvelte(api.idParser(file, false), code, api.options, this.environment, map);
-				return {
-					code: compiled.css?.code ?? "",
-					map: compiled.css?.map ?? null
-				};
 			}
-		}
-	}];
+		},
+		islandStylesPlugin(pagesDir)
+	];
 }
 function generateWrapperComponent(id) {
 	const url = new URL(id, "file://");
@@ -232,6 +242,7 @@ function generateIslandRenderer(scan, pagesDir, mdScriptIds, pagesNeedingClientJ
 import { render } from "svelte/server";
 import App from "@void/svelte/App.svelte";
 import { renderHeadToString, renderHtmlAttrs, renderBodyAttrs } from "void/pages-head";
+import { islandFrontmatterScript } from "void/pages-server";
 
 ${generateComponentManifest(scan, pagesDir)}
 ${mdScriptIdsCode}
@@ -242,7 +253,8 @@ function escapeAttr(s) {
 }
 
 export async function renderIslandPage(pageObj, assetTags) {
-  const PageComponent = (await components[pageObj.component]()).default;
+  const __pageModule = await components[pageObj.component]();
+  const PageComponent = __pageModule.default;
   const layoutIds = layoutTree[pageObj.component] || [];
   const layoutComponents = await Promise.all(
     layoutIds.map(async (id) => (await components[id]()).default)
@@ -255,11 +267,18 @@ export async function renderIslandPage(pageObj, assetTags) {
       pageProps: pageObj.props,
       shared: pageObj.shared || {},
       params: pageObj.params || {},
+      // Set above the layouts so they can read the Markdown page's values.
+      frontmatter: __pageModule.frontmatter,
       router: null,
       stores: null,
     },
   });
 
+  // Islands hydrate as separate roots. Send the page frontmatter so their
+  // useFrontmatter() returns the same value in the browser.
+  const __frontmatterScript = __pagesNeedingClientJS.has(pageObj.component) && html.includes("data-island=")
+    ? islandFrontmatterScript(__pageModule.frontmatter)
+    : "";
   const __mdScriptAttr = __mdClientScriptIds.has(pageObj.component) ? \` data-md-script="\${escapeAttr(pageObj.component)}"\` : "";
   const headHtml = pageObj.head ? renderHeadToString(pageObj.head) : "";
   const htmlAttrs = pageObj.head ? renderHtmlAttrs(pageObj.head) : "";
@@ -270,31 +289,34 @@ export async function renderIslandPage(pageObj, assetTags) {
 <head>\${headHtml}\${head}\${assetTags.css}\${__pagesNeedingClientJS.has(pageObj.component) ? assetTags.preloads : ""}</head>
 <body\${bodyAttrs}>
   <div id="app"\${__mdScriptAttr}>\${html}</div>
-  \${__pagesNeedingClientJS.has(pageObj.component) ? assetTags.body : ""}
+  \${__frontmatterScript}\${__pagesNeedingClientJS.has(pageObj.component) ? assetTags.body : ""}
 </body>
 </html>\`;
 }
 `;
 }
-function generateIslandClientEntry(manifest, cssFiles, isDev) {
+function generateIslandClientEntry(manifest, cssFiles, styles, needsRuntime, isDev) {
 	const entries = [...manifest.values()];
 	const uniqueIslands = /* @__PURE__ */ new Map();
 	for (const entry of entries) uniqueIslands.set(entry.islandId, entry.componentPath);
 	const lines = [];
-	lines.push("import { initIslands } from \"void/pages-client\";");
-	if (!isDev) for (const file of cssFiles) {
+	if (!isDev && styles) for (const id of styles) lines.push(`import ${JSON.stringify(id)};`);
+	else if (!isDev) for (const file of cssFiles) {
 		const content = readFileSync(file, "utf-8");
 		if (/<style\b/.test(content)) lines.push(`import ${JSON.stringify(file + ".css?island-style")};`);
 		for (const item of findStaticCssImports(content, file)) lines.push(rewriteCssImportForVirtualModule(item.statement, item.specifier, file));
 	}
+	if (!needsRuntime && !isDev) return lines.join("\n");
+	lines.push("import { initIslands } from \"void/pages-client\";");
 	lines.push("const islands = {");
 	for (const [id, path] of uniqueIslands) lines.push(`  ${JSON.stringify(id)}: () => import(${JSON.stringify(path)}),`);
 	lines.push("};");
 	lines.push(`
-async function hydrateIsland(el, mod, props) {
+async function hydrateIsland(el, mod, props, frontmatter) {
   const { hydrate } = await import("svelte");
   const Component = mod.default || mod;
-  hydrate(Component, { target: el, props });
+  const context = new Map([["__void_frontmatter", frontmatter]]);
+  hydrate(Component, { target: el, props, context });
   el.setAttribute("data-hydrated", "true");
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@void/svelte",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "description": "Svelte pages, server rendering, forms, and navigation for Void.",
   "homepage": "https://void.cloud",
   "bugs": {
@@ -43,12 +43,12 @@
     "svelte": "^5.57.2",
     "vite": "npm:@voidzero-dev/vite-plus-core@1.2.0",
     "vite-plus": "1.2.0",
-    "void": "1.1.11"
+    "void": "1.1.12"
   },
   "peerDependencies": {
     "svelte": "^5.0.0",
     "vite": "^8.0.0",
-    "void": "1.1.11"
+    "void": "1.1.12"
   },
   "scripts": {
     "build": "vp pack",

package/src/runtime/App.svelte

@@ -13,6 +13,7 @@
     pageProps: props.pageProps,
     shared: props.shared,
     params: props.params,
+    frontmatter: props.frontmatter,
     router: props.router,
     routeUrl: props.routeUrl,
     navigation: props.navigation,
@@ -51,6 +52,10 @@
   setContext("__void_navigation", {
     get value() { return navigation; },
   });
+  // Island pages pass Markdown frontmatter so layouts can read it (useFrontmatter).
+  if (init.frontmatter) {
+    setContext("__void_frontmatter", init.frontmatter);
+  }
 
   // Client mode: subscribe to stores for live updates after hydration.
   // onMount only runs on the client, not during SSR.