@void/react 0.7.4 → 0.7.5

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

@@ -324,7 +324,7 @@ function generateIslandRenderer(scan, pagesDir, isDev, islandCssMap, viteRoot, m
 	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)}
@@ -355,9 +355,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
+      )
     )
   );
 

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.5",
   "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.5"
   },
   "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.5"
   },
   "scripts": {
     "build": "vp pack",