@void/react 1.1.11 → 1.1.12

package/dist/{context-B0GL7p5m.mjs → context-D2ctU4yT.mjs}

@@ -6,5 +6,6 @@ const ErrorsContext = createContext(null);
 const ParamsContext = createContext(null);
 const RouterContext = createContext(null);
 const NavigationContext = createContext(idleNavigationState());
+const FrontmatterContext = createContext({});
 //#endregion
-export { SharedContext as a, RouterContext as i, NavigationContext as n, ParamsContext as r, ErrorsContext as t };
+export { RouterContext as a, ParamsContext as i, FrontmatterContext as n, SharedContext as o, NavigationContext as r, ErrorsContext as t };

package/dist/index.d.mts

@@ -96,6 +96,7 @@ export declare const ErrorsContext: Context<Record<string, string> | null>;
 export declare const ParamsContext: Context<Record<string, string> | null>;
 export declare const RouterContext: Context<VoidRouter | null>;
 export declare const NavigationContext: Context<NavigationState>;
+export declare const FrontmatterContext: Context<Record<string, unknown>>;
 //#endregion
 //#region src/runtime/index.d.ts
 export type Deferred<T> = Promise<T>;

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { a as SharedContext, i as RouterContext, n as NavigationContext, r as ParamsContext, t as ErrorsContext } from "./context-B0GL7p5m.mjs";
+import { a as RouterContext, i as ParamsContext, n as FrontmatterContext, o as SharedContext, r as NavigationContext, t as ErrorsContext } from "./context-D2ctU4yT.mjs";
 import { n as setActionRouter, t as action } from "./action-4EvQppia.mjs";
 import { useActionState, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { VoidActionError, categorizeActionError, formErrorMessage, formRetryMessage, formSubmissionBlocked, getValidationErrors, interpolateRouteParams, isAbortError, isEqualFormValue, isModifiedEvent, mergeDataIntoHref, scheduleFormRetry, ssrProxy, submitAction } from "void/pages-client";
@@ -460,4 +460,4 @@ function useIslandForm(defaults) {
 	};
 }
 //#endregion
-export { ErrorsContext, Form, Link, NavigationContext, ParamsContext, RouterContext, SharedContext, action, setActionRouter, useForm, useIslandForm, useNavigation, useParams, useRouter, useShared };
+export { ErrorsContext, Form, FrontmatterContext, Link, NavigationContext, ParamsContext, RouterContext, SharedContext, action, setActionRouter, useForm, useIslandForm, useNavigation, useParams, useRouter, useShared };

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";
@@ -291,6 +291,9 @@ function islandsPlugin(pagesDir, options) {
 				}
 			}
 		},
+		buildEnd() {
+			recordIslandStyles(this, pageScan, pagesDir);
+		},
 		resolveId: {
 			filter: { id: /^virtual:void-islands-(renderer|client)$/ },
 			handler(source) {
@@ -309,7 +312,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);
 				}
 			}
 		},
@@ -342,14 +345,13 @@ function islandsPlugin(pagesDir, options) {
 				});
 			}
 		},
-		config(_, env) {
-			if (!existsSync(pagesDir)) return;
-			if (env.command !== "serve" && needsIslandClientBundle(pagesDir, /\.island\.(tsx|jsx)$/, false)) return { build: {
+		async config(_, env) {
+			if (env.command !== "serve" && await hasIslandPages(root, pagesDir)) return { environments: { client: { build: {
 				manifest: true,
 				rollupOptions: { input: { "islands-client": ISLANDS_CLIENT_ENTRY_ID } }
-			} };
+			} } } };
 		}
-	}];
+	}, islandStylesPlugin(pagesDir)];
 }
 function generateIslandRenderer(scan, pagesDir, isDev, mdScriptIds, pagesNeedingClientJS) {
 	const preambleScript = isDev ? REACT_REFRESH_PREAMBLE : "";
@@ -358,8 +360,9 @@ function generateIslandRenderer(scan, pagesDir, isDev, mdScriptIds, pagesNeeding
 	return `
 import React from "react";
 import { renderToString } from "react-dom/server";
-import { SharedContext, ErrorsContext, ParamsContext } from "@void/react";
+import { SharedContext, ErrorsContext, ParamsContext, FrontmatterContext } from "@void/react";
 import { renderHeadToString, renderHtmlAttrs, renderBodyAttrs } from "void/pages-head";
+import { islandFrontmatterScript } from "void/pages-server";
 
 ${generateComponentManifest(scan, pagesDir)}
 ${mdScriptIdsCode}
@@ -372,7 +375,9 @@ 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 __frontmatter = __pageModule.frontmatter ?? {};
   const layoutIds = layoutTree[pageObj.component] || [];
   const layoutComponents = await Promise.all(
     layoutIds.map(async (id) => (await components[id]()).default)
@@ -383,7 +388,8 @@ export async function renderIslandPage(pageObj, assetTags) {
     element = React.createElement(layoutComponents[i], null, element);
   }
 
-  // No RouterContext — islands have no Void Router
+  // No RouterContext — islands have no Void Router.
+  // Frontmatter wraps the layouts so they can read the Markdown page's values.
   element = React.createElement(
     SharedContext.Provider,
     { value: pageObj.shared || {} },
@@ -393,12 +399,17 @@ export async function renderIslandPage(pageObj, assetTags) {
       React.createElement(
         ErrorsContext.Provider,
         { value: pageObj.errors || {} },
-        element
+        React.createElement(FrontmatterContext.Provider, { value: __frontmatter }, element)
       )
     )
   );
 
   const html = renderToString(element);
+  // 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) : "";
@@ -409,35 +420,42 @@ export async function renderIslandPage(pageObj, assetTags) {
 <head>\${headHtml}\${PREAMBLE_SCRIPT}\${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");
 		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 { hydrateRoot } = await import("react-dom/client");
   const React = await import("react");
   const Component = mod.default || mod;
+  let island = React.createElement(Component, props);
+  if (Object.keys(frontmatter).length > 0) {
+    const { FrontmatterContext } = await import("@void/react");
+    island = React.createElement(FrontmatterContext.Provider, { value: frontmatter }, island);
+  }
   function HydratedIsland() {
     React.useLayoutEffect(() => {
       el.setAttribute("data-hydrated", "true");
     }, []);
-    return React.createElement(Component, props);
+    return island;
   }
   hydrateRoot(el, React.createElement(HydratedIsland));
 }

package/dist/runtime/pages-client.mjs

@@ -1,7 +1,7 @@
-import { a as SharedContext, i as RouterContext, n as NavigationContext, r as ParamsContext, t as ErrorsContext } from "../context-B0GL7p5m.mjs";
+import { a as RouterContext, i as ParamsContext, o as SharedContext, r as NavigationContext, t as ErrorsContext } from "../context-D2ctU4yT.mjs";
 import { n as setActionRouter } from "../action-4EvQppia.mjs";
 import { n as DEFERRED_SHELL_END_ID } from "../deferred-shell-DOuP2YAo.mjs";
-import React, { Suspense, startTransition, use, useCallback, useEffect, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useTransition } from "react";
+import React, { Suspense, startTransition, use, useCallback, useEffect, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useState, useTransition } from "react";
 import { createPageNavigationEngine, createRouterFacade, idleNavigationState, isAbortError, isCallSiteActionError } from "void/pages-client";
 import { createRoot, hydrateRoot } from "react-dom/client";
 //#region src/runtime/pages-client.ts
@@ -11,6 +11,7 @@ const pendingVisitSettlers = /* @__PURE__ */ new Map();
 const committedResources = /* @__PURE__ */ new Set();
 const EMPTY_PARAMS = {};
 let activePendingNavigationId = null;
+let prerenderedUrl = null;
 let scheduleVisit = null;
 function createDeferredResource() {
 	let resolve;
@@ -54,6 +55,36 @@ function normalizeUrl(value) {
 	const url = value instanceof URL ? value : new URL(value, window.location.origin);
 	return url.origin === window.location.origin ? url.pathname + url.search + url.hash : url.href;
 }
+/** Page data holds a decoded path. Compare it with browser URLs in their encoded form. */
+function encodedPageUrl(url) {
+	if (!url) return url;
+	const parsed = new URL(url, window.location.origin);
+	return parsed.pathname + parsed.search;
+}
+/** Static hosts serve one page at `/a`, `/a/`, `/a.html` and `/a/index.html`. */
+function staticPagePath(pathname) {
+	let path = pathname;
+	if (path.endsWith("/index.html")) path = path.slice(0, -10);
+	else if (path.endsWith(".html")) path = path.slice(0, -5);
+	return path.length > 1 && path.endsWith("/") ? path.slice(0, -1) : path;
+}
+/**
+* Static page data serves every query of a path, so its url has no query. Returns the query of
+* fetchUrl when the page data is such data for its path, or null.
+*/
+function staticVisitQuery(pageUrl, fetchUrl) {
+	if (!pageUrl || pageUrl.includes("?")) return null;
+	const queryStart = fetchUrl.indexOf("?");
+	if (staticPagePath(queryStart === -1 ? fetchUrl : fetchUrl.slice(0, queryStart)) !== staticPagePath(pageUrl)) return null;
+	return queryStart === -1 ? "" : fetchUrl.slice(queryStart);
+}
+/**
+* The URL prerendered HTML was rendered with, when it lacks the visitor's query, or null.
+*/
+function prerenderedRouteUrl(pageData) {
+	const pageUrl = encodedPageUrl(pageData.url);
+	return staticVisitQuery(pageUrl, window.location.pathname + window.location.search) ? pageUrl + window.location.hash : null;
+}
 function navigationForResource(resource) {
 	const method = resource.method.toUpperCase();
 	return {
@@ -159,13 +190,20 @@ function RouteResource({ resource, onCommit }) {
 	const pageData = result.pageData;
 	const PageComponent = result.component;
 	const routeParams = pageData.params ?? EMPTY_PARAMS;
-	const routeRouter = useMemo(() => createRouterFacade(outerRouter, () => {
-		const outerUrl = outerRouter.url;
-		const outerPath = outerUrl.pathname + outerUrl.search;
-		return outerPath === pageData.url ? outerPath + outerUrl.hash : pageData.url + resource.hash;
-	}, () => routeParams), [
+	const routeRouter = useMemo(() => {
+		const pageUrl = encodedPageUrl(pageData.url);
+		return createRouterFacade(outerRouter, () => {
+			const outerUrl = outerRouter.url;
+			const outerPath = outerUrl.pathname + outerUrl.search;
+			if (outerPath === pageUrl) return outerPath + outerUrl.hash;
+			const query = staticVisitQuery(pageUrl, resource.fetchUrl);
+			if (query !== null) return pageUrl + query + (outerPath === resource.fetchUrl ? outerUrl.hash : resource.hash);
+			return pageUrl + resource.hash;
+		}, () => routeParams);
+	}, [
 		outerRouter,
 		pageData.url,
+		resource.fetchUrl,
 		resource.hash,
 		routeParams
 	]);
@@ -193,10 +231,11 @@ function startViewTransition(resource, reveal, enabled) {
 }
 function App({ engine, router, viewTransitions, navigationFallback: NavigationFallback }) {
 	const initialPageData = engine.initialPageData;
+	const [hydrated, setHydrated] = useState(prerenderedUrl === null);
 	const initialResource = useMemo(() => ({
 		id: 0,
 		url: initialPageData.url || currentUrl(),
-		fetchUrl: initialPageData.url || currentUrl(),
+		fetchUrl: window.location.pathname + window.location.search,
 		hash: window.location.hash,
 		method: "GET",
 		options: {},
@@ -210,6 +249,10 @@ function App({ engine, router, viewTransitions, navigationFallback: NavigationFa
 		async commit() {
 			engine.commitInitialRender();
 			document.getElementById("app").setAttribute("data-hydrated", "true");
+			if (prerenderedUrl !== null) {
+				prerenderedUrl = null;
+				React.startTransition(() => setHydrated(true));
+			}
 		},
 		dispose() {}
 	}), [engine, initialPageData]);
@@ -403,7 +446,11 @@ function App({ engine, router, viewTransitions, navigationFallback: NavigationFa
 			method: "GET"
 		};
 	}, [isTransitionPending, state.navigation]);
-	const routerValue = useMemo(() => createRouterFacade(router, () => state.routeUrl), [router, state.routeUrl]);
+	const routerValue = useMemo(() => createRouterFacade(router, () => hydrated ? state.routeUrl : prerenderedUrl ?? state.routeUrl), [
+		router,
+		state.routeUrl,
+		hydrated
+	]);
 	return React.createElement(RouterContext.Provider, { value: routerValue }, React.createElement(NavigationContext.Provider, { value: navigationValue }, React.createElement(Suspense, { fallback: NavigationFallback && state.pendingId !== null ? React.createElement(NavigationFallback, { initialPageData }) : null }, React.createElement(RouteResource, {
 		resource: state.resource,
 		onCommit: finishNavigation
@@ -414,6 +461,7 @@ async function startReactPages(config) {
 	pendingVisitSettlers.clear();
 	committedResources.clear();
 	activePendingNavigationId = null;
+	prerenderedUrl = null;
 	const engine = await createPageNavigationEngine({
 		adapter: {
 			createDeferred: createDeferredResource,
@@ -436,13 +484,14 @@ async function startReactPages(config) {
 	setActionRouter(router);
 	const appEl = document.getElementById("app");
 	if (!appEl) throw new Error("pages: Missing #app element for Void React pages hydration.");
+	const isSsr = appEl.getAttribute("data-void-ssr") !== "false";
+	if (isSsr) prerenderedUrl = prerenderedRouteUrl(engine.initialPageData);
 	const appRoot = React.createElement(App, {
 		engine,
 		router,
 		viewTransitions: config.viewTransitions,
 		navigationFallback: config.navigationFallback
 	});
-	const isSsr = appEl.getAttribute("data-void-ssr") !== "false";
 	const hasDeferred = Boolean(engine.initialPageData.deferredKeys);
 	const app = isSsr && hasDeferred ? React.createElement(React.Fragment, null, appRoot, React.createElement("template", { id: DEFERRED_SHELL_END_ID })) : appRoot;
 	startTransition(() => {

package/dist/runtime/pages-server.mjs

@@ -1,4 +1,4 @@
-import { a as SharedContext, i as RouterContext, n as NavigationContext, r as ParamsContext, t as ErrorsContext } from "../context-B0GL7p5m.mjs";
+import { a as RouterContext, i as ParamsContext, o as SharedContext, r as NavigationContext, t as ErrorsContext } from "../context-D2ctU4yT.mjs";
 import { n as DEFERRED_SHELL_END_ID, r as DEFERRED_SHELL_END_MARKER, t as DEFERRED_SHELL_CANCEL_REASON } from "../deferred-shell-DOuP2YAo.mjs";
 import React from "react";
 import { createSsrRouter, idleNavigationState } from "void/pages-client";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@void/react",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "description": "React pages, server rendering, forms, and navigation for Void.",
   "homepage": "https://void.cloud",
   "bugs": {
@@ -49,13 +49,13 @@
     "react-dom": "^19.3.0",
     "vite": "npm:@voidzero-dev/vite-plus-core@1.2.0",
     "vite-plus": "1.2.0",
-    "void": "1.1.11"
+    "void": "1.1.12"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "vite": "^8.0.0",
-    "void": "1.1.11"
+    "void": "1.1.12"
   },
   "scripts": {
     "build": "vp pack",