@void/react 0.20.2 → 0.21.0

package/dist/runtime/pages-client.d.mts

@@ -1,6 +1,7 @@
 import { ComponentType } from "react";
 import { VoidRouter } from "void/pages-client";
 import { CacheForResult } from "void/pages-prefetch";
+import { PageObject } from "void/pages-protocol";
 //#region src/runtime/pages-client.d.ts
 type ComponentModule = {
   default: ComponentType<any>;
@@ -17,6 +18,11 @@ export type ReactPagesConfig = Readonly<{
   viewTransitions: boolean;
   prefetchHoverDelay: number;
   prefetchDefaultCacheFor: CacheForResult;
+  cacheVisitedPageData?: boolean;
+  /** Show this fallback for client visits whose destination remains pending at the next paint. */
+  navigationFallback?: ComponentType<{
+    initialPageData: PageObject;
+  }>;
 }>;
 export type ReactPagesClient = Readonly<{
   router: VoidRouter;

package/dist/runtime/pages-client.mjs

@@ -66,7 +66,7 @@ function appReducer(state, action) {
 	switch (action.type) {
 		case "begin": return {
 			resource: state.resource,
-			rollbackResource: state.resource,
+			rollbackResource: state.rollbackResource || state.resource,
 			pendingId: action.resource.id,
 			routeUrl: state.routeUrl,
 			navigation: action.navigation
@@ -90,6 +90,7 @@ function appReducer(state, action) {
 			if (state.pendingId !== action.resource.id) return state;
 			return {
 				...state,
+				resource: state.rollbackResource || state.resource,
 				rollbackResource: null,
 				pendingId: null,
 				routeUrl: action.location,
@@ -190,7 +191,7 @@ function startViewTransition(resource, reveal, enabled) {
 		return readyForCapture;
 	});
 }
-function App({ engine, router, viewTransitions }) {
+function App({ engine, router, viewTransitions, navigationFallback: NavigationFallback }) {
 	const initialPageData = engine.initialPageData;
 	const sharedStateRef = useRef(initialPageData.shared);
 	const initialResource = useMemo(() => ({
@@ -308,7 +309,7 @@ function App({ engine, router, viewTransitions }) {
 					pendingVisitSettlers.delete(prepared.id);
 					if (activePendingNavigationId === prepared.id) activePendingNavigationId = null;
 					dispatch({
-						type: "finish",
+						type: NavigationFallback ? "abandon" : "finish",
 						resource: prepared,
 						location: currentUrl()
 					});
@@ -328,7 +329,7 @@ function App({ engine, router, viewTransitions }) {
 				if (prepared.method.toUpperCase() === "GET" && !prepared.options._resolveOnShell && isAbortError(error)) resolveVisit(void 0);
 				else rejectVisit(error);
 				if (activePendingNavigationId === prepared.id) activePendingNavigationId = null;
-				if (prepared.options._resolveOnShell || isAbortError(error) || isCallSiteActionError(error)) {
+				if (NavigationFallback || prepared.options._resolveOnShell || isAbortError(error) || isCallSiteActionError(error)) {
 					dispatch({
 						type: "abandon",
 						resource: prepared,
@@ -355,6 +356,30 @@ function App({ engine, router, viewTransitions }) {
 			resource: next,
 			navigation
 		});
+		if (NavigationFallback) {
+			let shellSettled = false;
+			let revealed = false;
+			const reveal = (settled) => {
+				if (revealed || activePendingNavigationId !== next.id) return;
+				revealed = true;
+				if (settled) startTransition(() => dispatch({
+					type: "reveal",
+					resource: next
+				}));
+				else dispatch({
+					type: "reveal",
+					resource: next
+				});
+			};
+			next.shell.then((result) => {
+				shellSettled = true;
+				if (result) reveal(true);
+			});
+			requestAnimationFrame(() => {
+				if (!shellSettled) reveal(false);
+			});
+			return pagePromise;
+		}
 		const reveal = () => {
 			startTransition(() => {
 				dispatch({
@@ -370,6 +395,7 @@ function App({ engine, router, viewTransitions }) {
 	}, [
 		engine,
 		mergeShared,
+		NavigationFallback,
 		startTransition,
 		viewTransitions
 	]);
@@ -393,7 +419,7 @@ function App({ engine, router, viewTransitions }) {
 		};
 	}, [isTransitionPending, state.navigation]);
 	const routerValue = useMemo(() => createRouterFacade(router, () => state.routeUrl), [router, state.routeUrl]);
-	return React.createElement(RouterContext.Provider, { value: routerValue }, React.createElement(NavigationContext.Provider, { value: navigationValue }, React.createElement(Suspense, { fallback: null }, React.createElement(RouteResource, {
+	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
 	}))));
@@ -419,7 +445,8 @@ async function startReactPages(config) {
 		staticPageDataFastPath: config.staticPageDataFastPath,
 		viewTransitions: config.viewTransitions,
 		prefetchHoverDelay: config.prefetchHoverDelay,
-		prefetchDefaultCacheFor: config.prefetchDefaultCacheFor
+		prefetchDefaultCacheFor: config.prefetchDefaultCacheFor,
+		cacheVisitedPageData: config.cacheVisitedPageData
 	});
 	const router = createRouter(engine);
 	setActionRouter(router);
@@ -428,7 +455,8 @@ async function startReactPages(config) {
 	const appRoot = React.createElement(App, {
 		engine,
 		router,
-		viewTransitions: config.viewTransitions
+		viewTransitions: config.viewTransitions,
+		navigationFallback: config.navigationFallback
 	});
 	const isSsr = appEl.getAttribute("data-void-ssr") !== "false";
 	const hasDeferred = Boolean(engine.initialPageData.deferredKeys);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@void/react",
-  "version": "0.20.2",
+  "version": "0.21.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/voidzero-dev/void.git",
@@ -43,13 +43,13 @@
     "react-dom": "^19.3.0",
     "vite": "npm:@voidzero-dev/vite-plus-core@0.3.1",
     "vite-plus": "0.3.1",
-    "void": "0.20.2"
+    "void": "0.21.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "vite": "^8.0.0",
-    "void": "0.20.2"
+    "void": "0.21.0"
   },
   "scripts": {
     "build": "vp pack",