vike-lite-react 1.0.11 → 1.0.13

package/dist/__internal/client/onRenderClient.mjs

@@ -2,16 +2,8 @@ import { t as PageContextProvider } from "../../PageContextProvider-DfE3nMiU.mjs
 import { Component, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { createRoot, hydrateRoot } from "react-dom/client";
 import { matchRoute } from "vike-lite/__internal/shared";
-import { createLinkClickHandler, createLinkPrefetchHandler, finalizeNavigation } from "vike-lite/__internal/client";
+import { buildPageContextJsonUrl, createLinkClickHandler, createLinkPrefetchHandler, createRoutePrefetcher, fetchPageContextJson, finalizeNavigation, loadViewModules, stripBase, tryRecoverFromStaleModuleGraph } from "vike-lite/__internal/client";
 import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/__internal/shared/stripBase.ts
-function stripBase(pathname) {
-	const { BASE_URL } = import.meta.env;
-	if (BASE_URL === "/" || !pathname.startsWith(BASE_URL)) return pathname;
-	const stripped = pathname.slice(BASE_URL.length);
-	return stripped.startsWith("/") ? stripped : "/" + stripped;
-}
-//#endregion
 //#region src/__internal/client/onRenderClient.tsx
 var RootErrorBoundary = class extends Component {
 	static getDerivedStateFromError(error) {
@@ -43,21 +35,7 @@ function RouterApp(props) {
 			setCurrentUrl(url.href);
 			setCurrentPathname(stripBase(url.pathname));
 		});
-		const prefetchedModules = /* @__PURE__ */ new Set();
-		function prefetchRoute(route) {
-			const modules = [
-				[route.page, route.Page],
-				[route.layout, route.Layout],
-				[route.head, route.Head]
-			];
-			for (const [key, loader] of modules) {
-				if (!key || !loader || prefetchedModules.has(key)) continue;
-				prefetchedModules.add(key);
-				loader().catch(() => {
-					prefetchedModules.delete(key);
-				});
-			}
-		}
+		const prefetchRoute = createRoutePrefetcher();
 		const handleLinkPrefetch = createLinkPrefetchHandler((url) => {
 			const matched = matchRoute(stripBase(url.pathname), props.routes);
 			if (matched) prefetchRoute(matched.route);
@@ -108,11 +86,7 @@ function RouterApp(props) {
 		const matched = matchedRoute;
 		const renderErrorPage = async (is404, message) => {
 			if (!props.errorRoute) return;
-			const [ErrorPageMod, ErrorLayoutMod, ErrorHeadMod] = await Promise.all([
-				props.errorRoute.Page(),
-				props.errorRoute.Layout?.() ?? null,
-				props.errorRoute.Head?.() ?? null
-			]);
+			const errorView = await loadViewModules(props.errorRoute);
 			if (signal.aborted) return;
 			setPageContext(() => ({
 				...pageContext,
@@ -125,11 +99,7 @@ function RouterApp(props) {
 				isClientSide: true,
 				isHydration: false
 			}));
-			setView({
-				Page: ErrorPageMod.Page ?? ErrorPageMod.default,
-				Layout: ErrorLayoutMod?.Layout ?? ErrorLayoutMod?.default ?? null,
-				Head: ErrorHeadMod?.Head ?? ErrorHeadMod?.default ?? null
-			});
+			setView(errorView);
 			document.title = is404 ? "Not Found" : "Server Error";
 			finalizeNavigation(shouldScrollToTop.current);
 		};
@@ -140,19 +110,11 @@ function RouterApp(props) {
 			const { route, routeParams } = matched;
 			try {
 				const urlObj = new URL(urlFull);
-				const jsonTarget = pathname === "/" ? "/index" : pathname;
-				const { BASE_URL } = import.meta.env;
-				const jsonUrl = `${BASE_URL.endsWith("/") ? BASE_URL.slice(0, -1) : BASE_URL}${jsonTarget}.pageContext.json${urlObj.search}`;
-				let ctx = null;
-				if (route.data || route.title) {
-					const res = await fetch(jsonUrl, {
-						signal,
-						cache: isReload ? "no-cache" : "default"
-					});
-					const contentType = res.headers.get("content-type") ?? "";
-					if (!contentType.includes("application/json")) throw new Error(`Expected JSON but got "${contentType}" for ${jsonUrl}. Check your proxy/CDN configuration.`);
-					ctx = await res.json();
-				}
+				const jsonUrl = buildPageContextJsonUrl(pathname, urlObj.search);
+				const ctx = route.data || route.title ? await fetchPageContextJson(jsonUrl, {
+					signal,
+					cache: isReload ? "no-cache" : "default"
+				}) : null;
 				if (signal.aborted) return;
 				if (ctx?._redirect) {
 					const urlObjRedirect = new URL(ctx._redirect, globalThis.location.origin);
@@ -167,11 +129,7 @@ function RouterApp(props) {
 					return;
 				}
 				if (ctx && (ctx.is404 || ctx.is500 || ctx.isError)) return renderErrorPage(ctx.is404, ctx.reason || "Server Error");
-				const [PageMod, LayoutMod, HeadMod] = await Promise.all([
-					route.Page(),
-					route.Layout?.() ?? null,
-					route.Head?.() ?? null
-				]);
+				const newView = await loadViewModules(route);
 				if (signal.aborted) return;
 				setPageContext(() => ({
 					routeParams,
@@ -184,11 +142,7 @@ function RouterApp(props) {
 					isClientSide: true,
 					isHydration: false
 				}));
-				setView({
-					Page: PageMod.Page ?? PageMod.default,
-					Layout: LayoutMod?.Layout ?? LayoutMod?.default ?? null,
-					Head: HeadMod?.Head ?? HeadMod?.default ?? null
-				});
+				setView(newView);
 				if (ctx?.title) document.title = ctx.title;
 				requestAnimationFrame(() => {
 					if (globalThis.location.hash) return;
@@ -198,16 +152,7 @@ function RouterApp(props) {
 			} catch (error) {
 				if (error.name === "AbortError") return;
 				const message = error.message || "";
-				if (/dynamically imported module|importing a module script failed/i.test(message)) {
-					const GUARD_KEY = "vike-lite:reload-guard";
-					const last = Number(sessionStorage.getItem(GUARD_KEY) ?? 0);
-					if (Date.now() - last > 1e4) {
-						sessionStorage.setItem(GUARD_KEY, String(Date.now()));
-						console.warn("App update detected, forcing reload…");
-						globalThis.location.assign(urlFull);
-						return;
-					}
-				}
+				if (tryRecoverFromStaleModuleGraph(message, urlFull)) return;
 				console.error("Router Error:", error);
 				renderErrorPage(false, message);
 			} finally {
@@ -250,18 +195,7 @@ async function onRenderClient(clientOptions) {
 	};
 	if (isHydration) {
 		const matched = matchRoute(initialContext.urlPathname ?? globalThis.location.pathname, clientOptions.routes);
-		if (matched) {
-			const [PageMod, LayoutMod, HeadMod] = await Promise.all([
-				matched.route.Page(),
-				matched.route.Layout?.() ?? null,
-				matched.route.Head?.() ?? null
-			]);
-			initialView = {
-				Page: PageMod.Page ?? PageMod.default,
-				Layout: LayoutMod?.Layout ?? LayoutMod?.default ?? null,
-				Head: HeadMod?.Head ?? HeadMod?.default ?? null
-			};
-		}
+		if (matched) initialView = await loadViewModules(matched.route);
 	}
 	const app = /* @__PURE__ */ jsx(RouterApp, {
 		...clientOptions,

package/dist/vite.mjs

@@ -1,22 +1,11 @@
 import react from "@vitejs/plugin-react";
+import { createFrameworkAdapterPlugin } from "vike-lite/__internal/vite";
 //#region src/vite.ts
 function vikeLiteReact({ hydration = true, react: reactOptions } = {}) {
-	const virtualClientId = "virtual:vike-lite/client";
-	const virtualServerId = "virtual:vike-lite/server";
-	const resolvedVirtualClientId = "\0virtual:vike-lite/client";
-	const resolvedVirtualServerId = "\0virtual:vike-lite/server";
-	const adapter = {
-		name: "vike-lite-react",
-		enforce: "pre",
-		resolveId(id) {
-			if (id === virtualClientId) return resolvedVirtualClientId;
-			if (id === virtualServerId) return resolvedVirtualServerId;
-		},
-		load(id) {
-			if (id === resolvedVirtualClientId) return `export const onRenderClient=async(options)=>(await import("vike-lite-react/__internal/client/onRenderClient")).onRenderClient({...options,hydration:${hydration}});`;
-			if (id === resolvedVirtualServerId) return `import { onRenderHtml as _onRenderHtml } from 'vike-lite-react/__internal/server/onRenderHtml';export const onRenderHtml = (ctx) => _onRenderHtml({ ...ctx, hydration: ${hydration} });`;
-		}
-	};
+	const adapter = createFrameworkAdapterPlugin({
+		packageName: "vike-lite-react",
+		hydration
+	});
 	return [...react(reactOptions), adapter];
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-lite-react",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -63,7 +63,7 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "tsdown": "^0.22.9",
-    "vike-lite": "1.15.8",
+    "vike-lite": "1.15.11",
     "vite": "^8.1.5"
   },
   "peerDependencies": {