@void/vue 1.1.11 → 1.1.12

package/dist/plugin.mjs

@@ -3,7 +3,7 @@ import { generateComponentManifest, resolveEffectiveLayoutChain, resolvePagesDir
 import { existsSync, readFileSync, readdirSync } from "node:fs";
 import nodePath from "node:path";
 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";
@@ -119,6 +119,14 @@ function islandsPlugin(pagesDir, options) {
 				}
 			}
 		},
+		buildEnd() {
+			recordIslandStyles(this, pageScan, pagesDir);
+			if (this.environment.config.consumer !== "client") return;
+			for (const id of recordedIslandStyles(pagesDir) ?? []) {
+				const vite = this.getModuleInfo(id)?.meta.vite;
+				if (vite?.cssScopeTo) delete vite.cssScopeTo;
+			}
+		},
 		resolveId: {
 			filter: { id: /^virtual:void-islands-(renderer|client)$/ },
 			handler(source) {
@@ -137,7 +145,7 @@ function islandsPlugin(pagesDir, options) {
 				}
 				if (id === "\0" + ISLANDS_CLIENT_ENTRY_ID) {
 					if (!pageScan) return "";
-					return generateIslandClientEntry(islandManifest, islandCssFiles, isDev);
+					return generateIslandClientEntry(islandManifest, islandCssFiles, recordedIslandStyles(pagesDir), islandManifest.size > 0 || computePagesNeedingClientJS(pageScan, pagesDir, resolvedConfig).size > 0, isDev);
 				}
 			}
 		},
@@ -180,15 +188,15 @@ function islandsPlugin(pagesDir, options) {
 				}
 			}
 		},
-		config(_, env) {
+		async config(_, env) {
 			if (!existsSync(pagesDir)) return;
 			if (env.command === "serve") return { optimizeDeps: { include: ["vue"] } };
-			if (needsIslandClientBundle(pagesDir, /\.island\.vue$/, true)) return { environments: { client: { build: {
+			if (await hasIslandPages(root, pagesDir)) return { environments: { client: { build: {
 				manifest: true,
 				rollupOptions: { input: { "islands-client": ISLANDS_CLIENT_ENTRY_ID } }
 			} } } };
 		}
-	}];
+	}, islandStylesPlugin(pagesDir)];
 }
 function generateIslandRenderer(scan, pagesDir, mdScriptIds, pagesNeedingClientJS) {
 	const mdScriptIdsCode = `const __mdClientScriptIds = new Set(${JSON.stringify([...mdScriptIds])});`;
@@ -197,6 +205,7 @@ function generateIslandRenderer(scan, pagesDir, mdScriptIds, pagesNeedingClientJ
 import { createSSRApp, h, reactive, provide } from "vue";
 import { renderToString } from "vue/server-renderer";
 import { renderHeadToString, renderHtmlAttrs, renderBodyAttrs } from "void/pages-head";
+import { islandFrontmatterScript } from "void/pages-server";
 
 ${generateComponentManifest(scan, pagesDir)}
 ${mdScriptIdsCode}
@@ -233,6 +242,11 @@ export async function renderIslandPage(pageObj, assetTags) {
   });
 
   const html = await renderToString(app);
+  // 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) : "";
@@ -243,19 +257,19 @@ export async function renderIslandPage(pageObj, assetTags) {
 <head>\${headHtml}\${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) {
+	if (!isDev && styles) for (const id of styles) lines.push(`import ${JSON.stringify(id)};`);
+	else if (!isDev) {
 		const styleRe = /<style\b([^>]*)>/g;
 		for (const file of cssFiles) {
 			const content = readFileSync(file, "utf-8");
@@ -275,14 +289,17 @@ function generateIslandClientEntry(manifest, cssFiles, isDev) {
 			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 { createSSRApp, h } = await import("vue");
   const Component = mod.default || mod;
   const app = createSSRApp({ render: () => h(Component, props) });
+  app.provide("__void_frontmatter", frontmatter);
   app.mount(el);
   el.setAttribute("data-hydrated", "true");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@void/vue",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "description": "Vue pages, server rendering, forms, and navigation for Void.",
   "homepage": "https://void.cloud",
   "bugs": {
@@ -41,12 +41,12 @@
     "pathslash": "^0.1.0",
     "vite": "npm:@voidzero-dev/vite-plus-core@1.2.0",
     "vite-plus": "1.2.0",
-    "void": "1.1.11",
+    "void": "1.1.12",
     "vue": "^3.5.44"
   },
   "peerDependencies": {
     "vite": "^8.0.0",
-    "void": "1.1.11",
+    "void": "1.1.12",
     "vue": "^3.5.0"
   },
   "scripts": {