@void/react 0.7.4 → 0.7.6

package/README.md

@@ -36,6 +36,7 @@ Main runtime APIs live at `@void/react`:
 
 - `Link`
 - `useRouter()`
+- `useParams()`
 - `useNavigation()`
 - `useShared()`
 - `useForm()`
@@ -142,6 +143,11 @@ accepts `{ data, method, params }`.
 `useRouter()` returns the Void Router. `visit()`, `refresh()`, and `prefetch()`
 are awaitable; `prefetch()` resolves when the page data has been cached.
 
+### `useParams`
+
+`useParams()` returns dynamic route params for the page currently being rendered.
+Use it instead of parsing `useRouter().path` in dynamic Pages routes.
+
 ### `Link`
 
 `Link` is the React Pages navigation component. GET links render an `<a>` and

package/dist/{context-BCeFV8Jy.mjs → context-CBGCQE3p.mjs}

@@ -3,7 +3,8 @@ import { idleNavigationState } from "void/pages-client";
 //#region src/runtime/context.ts
 const SharedContext = createContext(null);
 const ErrorsContext = createContext(null);
+const ParamsContext = createContext(null);
 const RouterContext = createContext(null);
 const NavigationContext = createContext(idleNavigationState());
 //#endregion
-export { SharedContext as i, NavigationContext as n, RouterContext as r, ErrorsContext as t };
+export { SharedContext as a, RouterContext as i, NavigationContext as n, ParamsContext as r, ErrorsContext as t };

package/dist/{index-6hxGVqsE.d.mts → index-75EO-lLe.d.mts}

@@ -48,6 +48,9 @@ declare function Link({
 //#region src/runtime/use-router.d.ts
 declare function useRouter(): VoidRouter;
 //#endregion
+//#region src/runtime/use-params.d.ts
+declare function useParams<T extends Record<string, string> = Record<string, string>>(): T;
+//#endregion
 //#region src/runtime/use-shared.d.ts
 declare function useShared<T = CloudContextVariables["shared"]>(): T;
 //#endregion
@@ -116,10 +119,11 @@ declare function action<U extends ActionUrl & string>(url: U, ...args: HasParams
 //#region src/runtime/context.d.ts
 declare const SharedContext: Context<Record<string, unknown> | null>;
 declare const ErrorsContext: Context<Record<string, string> | null>;
+declare const ParamsContext: Context<Record<string, string> | null>;
 declare const RouterContext: Context<VoidRouter | null>;
 declare const NavigationContext: Context<NavigationState>;
 //#endregion
 //#region src/runtime/index.d.ts
 type Deferred<T> = Promise<T>;
 //#endregion
-export { RouterContext as a, setActionRouter as c, useForm as d, useShared as f, NavigationContext as i, useIslandForm as l, Link as m, InferProps as n, SharedContext as o, useRouter as p, ErrorsContext as r, action as s, Deferred as t, useNavigation as u };
+export { ParamsContext as a, action as c, useNavigation as d, useForm as f, Link as g, useRouter as h, NavigationContext as i, setActionRouter as l, useParams as m, InferProps as n, RouterContext as o, useShared as p, ErrorsContext as r, SharedContext as s, Deferred as t, useIslandForm as u };

package/dist/index.d.mts

@@ -1,2 +1,2 @@
-import { a as RouterContext, c as setActionRouter, d as useForm, f as useShared, i as NavigationContext, l as useIslandForm, m as Link, n as InferProps, o as SharedContext, p as useRouter, r as ErrorsContext, s as action, t as Deferred, u as useNavigation } from "./index-6hxGVqsE.mjs";
-export { Deferred, ErrorsContext, InferProps, Link, NavigationContext, RouterContext, SharedContext, action, setActionRouter, useForm, useIslandForm, useNavigation, useRouter, useShared };
+import { a as ParamsContext, c as action, d as useNavigation, f as useForm, g as Link, h as useRouter, i as NavigationContext, l as setActionRouter, m as useParams, n as InferProps, o as RouterContext, p as useShared, r as ErrorsContext, s as SharedContext, t as Deferred, u as useIslandForm } from "./index-75EO-lLe.mjs";
+export { Deferred, ErrorsContext, InferProps, Link, NavigationContext, ParamsContext, RouterContext, SharedContext, action, setActionRouter, useForm, useIslandForm, useNavigation, useParams, useRouter, useShared };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { i as SharedContext, n as NavigationContext, r as RouterContext, t as ErrorsContext } from "./context-BCeFV8Jy.mjs";
-import { a as useRouter, i as useShared, n as useNavigation, o as Link, r as useForm, t as useIslandForm } from "./runtime-C24S_Dlg.mjs";
+import { a as SharedContext, i as RouterContext, n as NavigationContext, r as ParamsContext, t as ErrorsContext } from "./context-CBGCQE3p.mjs";
+import { a as useParams, i as useShared, n as useNavigation, o as useRouter, r as useForm, s as Link, t as useIslandForm } from "./runtime-BpEAl7K2.mjs";
 import { n as setActionRouter, t as action } from "./action-BFWtavbf.mjs";
-export { ErrorsContext, Link, NavigationContext, RouterContext, SharedContext, action, setActionRouter, useForm, useIslandForm, useNavigation, useRouter, useShared };
+export { ErrorsContext, Link, NavigationContext, ParamsContext, RouterContext, SharedContext, action, setActionRouter, useForm, useIslandForm, useNavigation, useParams, useRouter, useShared };

package/dist/plugin.mjs

@@ -2,7 +2,7 @@ import react from "@vitejs/plugin-react";
 import { existsSync, readFileSync, readdirSync } from "node:fs";
 import { normalizePath } from "vite";
 import { generateComponentManifest, resolveEffectiveLayoutChain, resolveStaticPageDataBuildOptions, scanPages } from "void/pages";
-import { ISLANDS_CLIENT_ENTRY_ID, ISLANDS_RENDERER_ID, computePagesNeedingClientJS, configureIslandCssServer, extractCssImports, fileHasCssImports, needsIslandClientBundle, rebuildIslandCssMap, resolveSpecifier, rewriteCssImportForVirtualModule, watchPagesForRescan } from "void/pages-islands-plugin";
+import { ISLANDS_CLIENT_ENTRY_ID, ISLANDS_RENDERER_ID, computePagesNeedingClientJS, extractCssImports, needsIslandClientBundle, resolveSpecifier, rewriteCssImportForVirtualModule, watchPagesForRescan } from "void/pages-islands-plugin";
 //#region ../../node_modules/.pnpm/pathe@2.0.3/node_modules/pathe/dist/shared/pathe.M-eThtNZ.mjs
 const _DRIVE_LETTER_START_RE = /^[A-Za-z]:\//;
 function normalizeWindowsPath(input = "") {
@@ -148,13 +148,7 @@ function islandsPlugin(pagesDir) {
 	const islandManifest = /* @__PURE__ */ new Map();
 	const islandCssFiles = /* @__PURE__ */ new Set();
 	let viteRoot = "";
-	const islandCssMap = /* @__PURE__ */ new Map();
 	let resolvedConfig = null;
-	/** Rebuild islandCssMap from current file contents (re-runs fileHasCssImports). */
-	function rebuildCssMapLocal() {
-		if (!pageScan) return;
-		rebuildIslandCssMap(pageScan, pagesDir, islandCssMap, fileHasCssImports);
-	}
 	function computePagesNeedingClientJSLocal() {
 		if (!pageScan) return /* @__PURE__ */ new Set();
 		return computePagesNeedingClientJS(pageScan, pagesDir, resolvedConfig);
@@ -167,10 +161,8 @@ function islandsPlugin(pagesDir) {
 			isDev = config.command === "serve";
 		},
 		configureServer(server) {
-			configureIslandCssServer(server, islandCssFiles, viteRoot, rebuildCssMapLocal);
 			watchPagesForRescan(server, pagesDir, root, (scan) => {
 				pageScan = scan;
-				rebuildCssMapLocal();
 			});
 		},
 		async buildStart() {
@@ -218,7 +210,6 @@ function islandsPlugin(pagesDir) {
 					const layoutChain = resolveEffectiveLayoutChain(page, pageScan.layouts, pageScan.namedLayouts);
 					for (const layout of layoutChain) islandCssFiles.add(normalizePath(resolve(pagesDir, layout.filePath)));
 				}
-				rebuildCssMapLocal();
 			}
 		},
 		resolveId: {
@@ -243,7 +234,7 @@ function islandsPlugin(pagesDir) {
 					const mdPlugin = resolvedConfig?.plugins?.find((p) => p.name === "void-md");
 					const mdScriptIds = new Set(mdPlugin?.api?.getClientScripts?.()?.keys() ?? []);
 					const needsJS = computePagesNeedingClientJSLocal();
-					return generateIslandRenderer(pageScan, pagesDir, isDev, islandCssMap, viteRoot, mdScriptIds, needsJS);
+					return generateIslandRenderer(pageScan, pagesDir, isDev, mdScriptIds, needsJS);
 				}
 				if (id === "\0" + ISLANDS_CLIENT_ENTRY_ID) {
 					if (!pageScan) return "";
@@ -304,7 +295,7 @@ function islandsPlugin(pagesDir) {
 		}
 	}];
 }
-function generateIslandRenderer(scan, pagesDir, isDev, islandCssMap, viteRoot, mdScriptIds, pagesNeedingClientJS) {
+function generateIslandRenderer(scan, pagesDir, isDev, mdScriptIds, pagesNeedingClientJS) {
 	const preambleScript = isDev ? `
 <script type="module">
   import RefreshRuntime from "/@react-refresh"
@@ -313,22 +304,15 @@ function generateIslandRenderer(scan, pagesDir, isDev, islandCssMap, viteRoot, m
   window.$RefreshSig$ = () => (type) => type
   window.__vite_plugin_react_preamble_installed__ = true
 <\/script>` : "";
-	let cssMapCode = "";
-	if (isDev && islandCssMap.size > 0) {
-		const cssMapObj = {};
-		for (const [compId, paths] of islandCssMap) cssMapObj[compId] = paths.map((p) => "/" + normalizePath(relative(viteRoot, p)) + ".css");
-		cssMapCode = `const __cssPaths = ${JSON.stringify(cssMapObj)};`;
-	}
 	const mdScriptIdsCode = `const __mdClientScriptIds = new Set(${JSON.stringify([...mdScriptIds])});`;
 	const needsJSCode = `const __pagesNeedingClientJS = new Set(${JSON.stringify([...pagesNeedingClientJS])});`;
 	return `
 import React from "react";
 import { renderToString } from "react-dom/server";
-import { SharedContext, ErrorsContext } from "@void/react";
+import { SharedContext, ErrorsContext, ParamsContext } from "@void/react";
 import { renderHeadToString, renderHtmlAttrs, renderBodyAttrs } from "void/pages-head";
 
 ${generateComponentManifest(scan, pagesDir)}
-${cssMapCode}
 ${mdScriptIdsCode}
 ${needsJSCode}
 
@@ -355,9 +339,13 @@ export async function renderIslandPage(pageObj, assetTags) {
     SharedContext.Provider,
     { value: pageObj.shared || {} },
     React.createElement(
-      ErrorsContext.Provider,
-      { value: pageObj.errors || {} },
-      element
+      ParamsContext.Provider,
+      { value: pageObj.params || {} },
+      React.createElement(
+        ErrorsContext.Provider,
+        { value: pageObj.errors || {} },
+        element
+      )
     )
   );
 
@@ -369,7 +357,7 @@ export async function renderIslandPage(pageObj, assetTags) {
 
   return \`<!doctype html>
 <html\${htmlAttrs}>
-<head>\${headHtml}\${typeof __cssPaths !== "undefined" ? (__cssPaths[pageObj.component] || []).map(url => '<link rel="stylesheet" href="' + url + '">').join("\\n") : ""}\${PREAMBLE_SCRIPT}\${assetTags.css}\${__pagesNeedingClientJS.has(pageObj.component) ? assetTags.preloads : ""}</head>
+<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 : ""}

package/dist/runtime/index.d.mts

@@ -1,2 +1,2 @@
-import { a as RouterContext, c as setActionRouter, d as useForm, f as useShared, i as NavigationContext, l as useIslandForm, m as Link, n as InferProps, o as SharedContext, p as useRouter, r as ErrorsContext, s as action, t as Deferred, u as useNavigation } from "../index-6hxGVqsE.mjs";
-export { Deferred, ErrorsContext, InferProps, Link, NavigationContext, RouterContext, SharedContext, action, setActionRouter, useForm, useIslandForm, useNavigation, useRouter, useShared };
+import { a as ParamsContext, c as action, d as useNavigation, f as useForm, g as Link, h as useRouter, i as NavigationContext, l as setActionRouter, m as useParams, n as InferProps, o as RouterContext, p as useShared, r as ErrorsContext, s as SharedContext, t as Deferred, u as useIslandForm } from "../index-75EO-lLe.mjs";
+export { Deferred, ErrorsContext, InferProps, Link, NavigationContext, ParamsContext, RouterContext, SharedContext, action, setActionRouter, useForm, useIslandForm, useNavigation, useParams, useRouter, useShared };

package/dist/runtime/index.mjs

@@ -1,4 +1,4 @@
-import { i as SharedContext, n as NavigationContext, r as RouterContext, t as ErrorsContext } from "../context-BCeFV8Jy.mjs";
-import { a as useRouter, i as useShared, n as useNavigation, o as Link, r as useForm, t as useIslandForm } from "../runtime-C24S_Dlg.mjs";
+import { a as SharedContext, i as RouterContext, n as NavigationContext, r as ParamsContext, t as ErrorsContext } from "../context-CBGCQE3p.mjs";
+import { a as useParams, i as useShared, n as useNavigation, o as useRouter, r as useForm, s as Link, t as useIslandForm } from "../runtime-BpEAl7K2.mjs";
 import { n as setActionRouter, t as action } from "../action-BFWtavbf.mjs";
-export { ErrorsContext, Link, NavigationContext, RouterContext, SharedContext, action, setActionRouter, useForm, useIslandForm, useNavigation, useRouter, useShared };
+export { ErrorsContext, Link, NavigationContext, ParamsContext, RouterContext, SharedContext, action, setActionRouter, useForm, useIslandForm, useNavigation, useParams, useRouter, useShared };

package/dist/runtime/pages-client.mjs

@@ -1,4 +1,4 @@
-import { i as SharedContext, n as NavigationContext, r as RouterContext, t as ErrorsContext } from "../context-BCeFV8Jy.mjs";
+import { a as SharedContext, i as RouterContext, n as NavigationContext, r as ParamsContext, t as ErrorsContext } from "../context-CBGCQE3p.mjs";
 import { n as setActionRouter } from "../action-BFWtavbf.mjs";
 import React, { Suspense, startTransition, use, useCallback, useEffect, useInsertionEffect, useLayoutEffect, useMemo, useReducer, useRef, useTransition } from "react";
 import { createPageNavigationEngine, createRouterFacade, idleNavigationState, isAbortError, isCallSiteActionError } from "void/pages-client";
@@ -8,6 +8,7 @@ const deferredState = /* @__PURE__ */ new WeakMap();
 const viewTransitionWaiters = /* @__PURE__ */ new Map();
 const pendingVisitSettlers = /* @__PURE__ */ new Map();
 const committedResources = /* @__PURE__ */ new Set();
+const EMPTY_PARAMS = {};
 let activePendingNavigationId = null;
 let scheduleVisit = null;
 function createDeferredResource() {
@@ -116,6 +117,9 @@ function createRouter(engine) {
 		get query() {
 			return this.url.searchParams;
 		},
+		get params() {
+			return {};
+		},
 		visit(url, options = {}) {
 			if (!scheduleVisit) return Promise.reject(/* @__PURE__ */ new Error("router.visit() called before router initialized"));
 			return scheduleVisit(normalizeUrl(url), options);
@@ -141,6 +145,7 @@ function createRouter(engine) {
 }
 function RouteResource({ resource, onCommit }) {
 	const result = use(resource.shell);
+	const outerRouter = React.useContext(RouterContext);
 	useLayoutEffect(() => {
 		if (result) onCommit(resource, result);
 	}, [
@@ -151,12 +156,23 @@ function RouteResource({ resource, onCommit }) {
 	if (!result) return null;
 	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), [
+		outerRouter,
+		pageData.url,
+		resource.hash,
+		routeParams
+	]);
 	let element = React.createElement(PageComponent, pageData.props);
 	for (let i = result.layouts.length - 1; i >= 0; i--) {
 		const Layout = result.layouts[i];
 		element = React.createElement(Layout, null, element);
 	}
-	return React.createElement(SharedContext.Provider, { value: pageData.shared }, React.createElement(ErrorsContext.Provider, { value: pageData.errors ?? {} }, element));
+	return React.createElement(RouterContext.Provider, { value: routeRouter }, React.createElement(ParamsContext.Provider, { value: routeParams }, React.createElement(SharedContext.Provider, { value: pageData.shared }, React.createElement(ErrorsContext.Provider, { value: pageData.errors ?? {} }, element))));
 }
 function startViewTransition(resource, reveal, enabled) {
 	if (!enabled || typeof document.startViewTransition !== "function") {

package/dist/runtime/pages-server.mjs

@@ -1,4 +1,4 @@
-import { i as SharedContext, n as NavigationContext, r as RouterContext, t as ErrorsContext } from "../context-BCeFV8Jy.mjs";
+import { a as SharedContext, i as RouterContext, n as NavigationContext, r as ParamsContext, t as ErrorsContext } from "../context-CBGCQE3p.mjs";
 import React from "react";
 import { createSsrRouter, idleNavigationState } from "void/pages-client";
 import { renderToReadableStream } from "react-dom/server";
@@ -84,7 +84,7 @@ async function renderReactPage({ pageObj, assetTags, components, layoutTree, pre
 	const renderProps = propsForReactRender(pageObj);
 	let element = React.createElement(PageComponent, renderProps);
 	for (let i = layoutComponents.length - 1; i >= 0; i--) element = React.createElement(layoutComponents[i], null, element);
-	element = React.createElement(RouterContext.Provider, { value: createSsrRouter(pageObj.url || "/") }, React.createElement(NavigationContext.Provider, { value: idleNavigationState() }, React.createElement(React.Suspense, { fallback: null }, React.createElement(SharedContext.Provider, { value: pageObj.shared || {} }, React.createElement(ErrorsContext.Provider, { value: pageObj.errors || {} }, element)))));
+	element = React.createElement(RouterContext.Provider, { value: createSsrRouter(pageObj.url || "/", pageObj.params ?? {}) }, React.createElement(NavigationContext.Provider, { value: idleNavigationState() }, React.createElement(React.Suspense, { fallback: null }, React.createElement(SharedContext.Provider, { value: pageObj.shared || {} }, React.createElement(ParamsContext.Provider, { value: pageObj.params ?? {} }, React.createElement(ErrorsContext.Provider, { value: pageObj.errors || {} }, element))))));
 	const appStream = await renderToReadableStream(pageObj.deferredKeys ? React.createElement(React.Fragment, null, element, React.createElement("template", { id: DEFERRED_SHELL_END_ID })) : element, { onError(error) {
 		if (error === DEFERRED_SHELL_CANCEL_REASON) return;
 		throw error;

package/dist/{runtime-C24S_Dlg.mjs → runtime-BpEAl7K2.mjs}

@@ -1,4 +1,4 @@
-import { i as SharedContext, n as NavigationContext, r as RouterContext } from "./context-BCeFV8Jy.mjs";
+import { a as SharedContext, i as RouterContext, n as NavigationContext, r as ParamsContext } from "./context-CBGCQE3p.mjs";
 import "./action-BFWtavbf.mjs";
 import { useActionState, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { VoidActionError, categorizeActionError, isAbortError, isEqualFormValue, ssrProxy, submitAction } from "void/pages-client";
@@ -232,6 +232,13 @@ function useRouter() {
 	return useContext(RouterContext) ?? ssrProxy;
 }
 //#endregion
+//#region src/runtime/use-params.ts
+function useParams() {
+	const params = useContext(ParamsContext);
+	if (params === null) throw new Error("useParams(): must be used inside a Void page.");
+	return params;
+}
+//#endregion
 //#region src/runtime/use-shared.ts
 function useShared() {
 	const shared = useContext(SharedContext);
@@ -489,4 +496,4 @@ function useIslandForm(defaults) {
 	};
 }
 //#endregion
-export { useRouter as a, useShared as i, useNavigation as n, Link as o, useForm as r, useIslandForm as t };
+export { useParams as a, useShared as i, useNavigation as n, useRouter as o, useForm as r, Link as s, useIslandForm as t };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@void/react",
-  "version": "0.7.4",
+  "version": "0.7.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/voidzero-dev/void.git",
@@ -51,13 +51,13 @@
     "react-dom": "^19.2.6",
     "vite": "npm:@voidzero-dev/vite-plus-core@0.1.20",
     "vite-plus": "^0.1.20",
-    "void": "0.7.4"
+    "void": "0.7.6"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "vite": "npm:@voidzero-dev/vite-plus-core@0.1.20",
-    "void": "0.7.4"
+    "void": "0.7.6"
   },
   "scripts": {
     "build": "vp pack",