vike-lite-react 1.0.1 → 1.0.3

package/README.md

@@ -1,4 +1,5 @@
-# vike-lite-react
+# Vike Lite React
+<a href="https://npmjs.com/package/vike-lite-react"><img src="https://img.shields.io/npm/v/vike-lite-react.svg" alt="npm package"></a>
 
 The official React integration for `vike-lite`. It provides seamless Server-Side Rendering (SSR), Static Site Generation (SSG), and client hydration out of the box, with a focus on minimalism and performance.
 
@@ -19,7 +20,7 @@ yarn add -D vike-lite-react @vitejs/plugin-react
 yarn add react react-dom
 ```
 
-### ⚙️ Vite Plugin
+### 🛠️ Vite Plugin
 
 ```ts
 // vite.config.ts
@@ -141,7 +142,7 @@ Why choose `vike-lite`? It's built to be as minimal and fast as possible. Here a
 | **Reactivity Architecture** | _Single Source of Truth_ | _Separation of Concerns_ | `vike-lite-react` keeps page data (`pageContext`) and the active UI (`view`: Page/Layout/Head) as two separate `useState` atoms, so a data update doesn't force React to re-resolve which components are mounted, and vice versa.
 | **Accessibility (A11y)** | _Not_ handled by default | _Automatic_ handled | After a client-side navigation, `vike-lite-react` moves the focus to `#root`. This significantly improves UX for keyboard navigation and screen readers.
 | `useData()` **Hook** | `getter` only | `[getter, setter]` | `vike-lite-react` allows you to mutate the route data locally without needing other state managers.
-| URL parsed | manual `new URL(pageContext.urlOriginal)` | [useUrl()](#useurl) | A dedicated hook, consistent with `vike-lite-solid`.
+| URL parsed | [pageContext.urlParsed](https://vike.dev/pageContext#urlParsed) | [useUrl()](#useurl) | A dedicated hook, consistent with `vike-lite-react`
 
 ---
 

package/dist/PageContextProvider-Dec19bRR.mjs

@@ -0,0 +1,9 @@
+import { t as PageContextReactContext } from "./globalContext-BIY5-Fdk.mjs";
+//#region src/hooks/PageContextProvider.tsx
+function PageContextProvider({ value, children }) {
+	return <PageContextReactContext.Provider value={value}>
+      {children}
+    </PageContextReactContext.Provider>;
+}
+//#endregion
+export { PageContextProvider as t };

package/dist/__internal/client/onRenderClient.d.mts

@@ -0,0 +1,8 @@
+import { VikeState } from "vike-lite/__internal/server";
+//#region src/__internal/client/onRenderClient.d.ts
+declare function onRenderClient(clientOptions: {
+  routes: VikeState['routes'];
+  errorRoute: VikeState['errorRoute'];
+}): Promise<void>;
+//#endregion
+export { onRenderClient as default };

package/dist/__internal/client/onRenderClient.mjs

@@ -0,0 +1,299 @@
+import { t as PageContextProvider } from "../../PageContextProvider-Dec19bRR.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 { hydration } from "virtual:vike-lite/config";
+//#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) {
+		return { error };
+	}
+	state = { error: null };
+	render() {
+		if (this.state.error) return <div>Error: {this.state.error.message}</div>;
+		return this.props.children;
+	}
+};
+function RouterApp(props) {
+	const [pageContext, setPageContextState] = useState(props.initialContext);
+	const [view, setView] = useState(props.initialView);
+	const [currentUrl, setCurrentUrl] = useState(props.initialUrl);
+	const [currentPathname, setCurrentPathname] = useState(props.initialContext.urlPathname);
+	const [reloadTick, setReloadTick] = useState(0);
+	const shouldScrollToTop = useRef(false);
+	const pendingContextOverride = useRef(null);
+	const reloadResolvers = useRef([]);
+	const isFirstRun = useRef(true);
+	const setPageContext = useCallback((updater) => {
+		setPageContextState(updater);
+	}, []);
+	const matchedRoute = useMemo(() => matchRoute(currentPathname, props.routes), [currentPathname, props.routes]);
+	useEffect(() => {
+		const handleLinkClick = (e) => {
+			const target = e.target.closest("a");
+			if (!target?.href || target.target === "_blank" || e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
+			const url = new URL(target.href);
+			if (url.origin !== globalThis.location.origin) return;
+			if (url.pathname === globalThis.location.pathname && url.search === globalThis.location.search) return;
+			e.preventDefault();
+			globalThis.history.pushState({ triggeredBy: "vike-lite" }, "", url.href);
+			if (!url.hash) shouldScrollToTop.current = true;
+			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 handleLinkPrefetch = (e) => {
+			const target = e.target.closest("a");
+			if (!target?.href) return;
+			if (target.target && target.target !== "_self") return;
+			if (target.hasAttribute("download")) return;
+			const url = new URL(target.href);
+			if (url.origin !== globalThis.location.origin) return;
+			if (url.pathname === globalThis.location.pathname && url.search === globalThis.location.search) return;
+			const matched = matchRoute(stripBase(url.pathname), props.routes);
+			if (!matched) return;
+			prefetchRoute(matched.route);
+		};
+		const handlePopState = () => {
+			setCurrentUrl(globalThis.location.href);
+			setCurrentPathname(stripBase(globalThis.location.pathname));
+		};
+		const handleProgrammaticNavigate = (e) => {
+			const detail = e.detail || {};
+			if (!detail.keepScrollPosition) shouldScrollToTop.current = true;
+			if (detail.pageContext) pendingContextOverride.current = detail.pageContext;
+			setCurrentUrl(globalThis.location.href);
+			setCurrentPathname(stripBase(globalThis.location.pathname));
+		};
+		const handleProgrammaticReload = (e) => {
+			const resolve = e.detail?.resolve;
+			if (resolve) reloadResolvers.current.push(resolve);
+			setReloadTick((t) => t + 1);
+		};
+		document.addEventListener("click", handleLinkClick);
+		document.addEventListener("pointerenter", handleLinkPrefetch, { capture: true });
+		document.addEventListener("focusin", handleLinkPrefetch);
+		globalThis.addEventListener("popstate", handlePopState);
+		globalThis.addEventListener("vike-navigate", handleProgrammaticNavigate);
+		globalThis.addEventListener("vike-reload", handleProgrammaticReload);
+		return () => {
+			document.removeEventListener("click", handleLinkClick);
+			document.removeEventListener("pointerenter", handleLinkPrefetch, { capture: true });
+			document.removeEventListener("focusin", handleLinkPrefetch);
+			globalThis.removeEventListener("popstate", handlePopState);
+			globalThis.removeEventListener("vike-navigate", handleProgrammaticNavigate);
+			globalThis.removeEventListener("vike-reload", handleProgrammaticReload);
+		};
+	}, [props.routes]);
+	useEffect(() => {
+		const pathname = currentPathname;
+		const isReload = reloadTick > 0;
+		if (isFirstRun.current && !isReload && globalThis.__PAGE_CONTEXT__?.urlPathname === pathname) {
+			isFirstRun.current = false;
+			globalThis.__PAGE_CONTEXT__.urlPathname = void 0;
+			return;
+		}
+		isFirstRun.current = false;
+		const controller = new AbortController();
+		const signal = controller.signal;
+		const urlFull = currentUrl;
+		const matched = matchedRoute;
+		const loadRoute = async () => {
+			const contextOverride = pendingContextOverride.current;
+			pendingContextOverride.current = null;
+			function finalizeNavigation() {
+				if (shouldScrollToTop.current) {
+					globalThis.scrollTo(0, 0);
+					shouldScrollToTop.current = false;
+				} else if (globalThis.location.hash) requestAnimationFrame(() => {
+					try {
+						document.querySelector(decodeURIComponent(globalThis.location.hash))?.scrollIntoView();
+					} catch {}
+				});
+			}
+			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
+				]);
+				if (signal.aborted) return;
+				setPageContext(() => ({
+					urlOriginal: urlFull,
+					urlPathname: pathname,
+					routeParams: {},
+					is404,
+					is500: !is404,
+					errorMessage: message,
+					isClientSide: true,
+					isHydration: false
+				}));
+				setView({
+					Page: ErrorPageMod.Page ?? ErrorPageMod.default,
+					Layout: ErrorLayoutMod?.Layout ?? ErrorLayoutMod?.default ?? null,
+					Head: ErrorHeadMod?.Head ?? ErrorHeadMod?.default ?? null
+				});
+				document.title = is404 ? "Not Found" : "Server Error";
+				finalizeNavigation();
+			};
+			if (!matched) return renderErrorPage(true);
+			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();
+				}
+				if (signal.aborted) return;
+				if (ctx?._redirect) {
+					const urlObjRedirect = new URL(ctx._redirect, globalThis.location.origin);
+					if (urlObjRedirect.origin !== globalThis.location.origin) {
+						globalThis.location.assign(ctx._redirect);
+						return;
+					}
+					globalThis.history.pushState({ triggeredBy: "vike-lite" }, "", ctx._redirect);
+					shouldScrollToTop.current = true;
+					setCurrentUrl(urlObjRedirect.href);
+					setCurrentPathname(stripBase(urlObjRedirect.pathname));
+					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
+				]);
+				if (signal.aborted) return;
+				setPageContext(() => ({
+					routeParams,
+					urlOriginal: urlObj.href,
+					urlPathname: pathname,
+					search: urlObj.search,
+					...ctx?.data && { data: ctx.data },
+					...ctx?.title && { title: ctx.title },
+					...contextOverride,
+					isClientSide: true,
+					isHydration: false
+				}));
+				setView({
+					Page: PageMod.Page ?? PageMod.default,
+					Layout: LayoutMod?.Layout ?? LayoutMod?.default ?? null,
+					Head: HeadMod?.Head ?? HeadMod?.default ?? null
+				});
+				if (ctx?.title) document.title = ctx.title;
+				requestAnimationFrame(() => {
+					if (globalThis.location.hash) return;
+					document.querySelector("#root")?.focus({ preventScroll: true });
+				});
+				finalizeNavigation();
+			} 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;
+					}
+				}
+				console.error("Router Error:", error);
+				renderErrorPage(false, message);
+			} finally {
+				if (!signal.aborted) {
+					for (const resolve of reloadResolvers.current) resolve();
+					reloadResolvers.current = [];
+				}
+			}
+		};
+		loadRoute();
+		return () => controller.abort();
+	}, [
+		currentPathname,
+		currentUrl,
+		matchedRoute,
+		reloadTick
+	]);
+	const { Page, Layout } = view;
+	const contextValue = useMemo(() => ({
+		pageContext,
+		setPageContext
+	}), [pageContext, setPageContext]);
+	return <RootErrorBoundary>
+      <PageContextProvider value={contextValue}>
+        {Layout ? <Layout><Page /></Layout> : <Page />}
+      </PageContextProvider>
+    </RootErrorBoundary>;
+}
+async function onRenderClient(clientOptions) {
+	const container = document.querySelector("#root");
+	const rawContext = globalThis.__PAGE_CONTEXT__ ?? {};
+	const isHydration = hydration && !!globalThis.__PAGE_CONTEXT__;
+	const initialContext = {
+		...rawContext,
+		isClientSide: true,
+		isHydration
+	};
+	let initialView = {
+		Page: null,
+		Layout: null,
+		Head: null
+	};
+	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
+			};
+		}
+	}
+	const app = <RouterApp {...clientOptions} initialView={initialView} initialContext={initialContext} initialUrl={globalThis.location.href} />;
+	if (isHydration) hydrateRoot(container, app);
+	else {
+		container.replaceChildren();
+		createRoot(container).render(app);
+	}
+}
+//#endregion
+export { onRenderClient as default };

package/dist/__internal/server/onRenderHtml.d.mts

@@ -0,0 +1,13 @@
+import { ComponentType, ReactNode } from "react";
+import { RenderContext } from "vike-lite/__internal/shared";
+//#region src/__internal/server/onRenderHtml.d.ts
+interface ReactRenderContext extends RenderContext {
+  Page: ComponentType;
+  Head?: ComponentType;
+  Layout?: ComponentType<{
+    children: ReactNode;
+  }>;
+}
+declare function onRenderHtml({ pageContext, Page, Head, Layout, pageTitleTag, serializedContext, assets }: ReactRenderContext): string;
+//#endregion
+export { ReactRenderContext, onRenderHtml };

package/dist/__internal/server/onRenderHtml.mjs

@@ -0,0 +1,33 @@
+import { t as PageContextProvider } from "../../PageContextProvider-Dec19bRR.mjs";
+import { renderToString } from "react-dom/server";
+import { hydration } from "virtual:vike-lite/renderer";
+//#region src/__internal/server/onRenderHtml.tsx
+function onRenderHtml({ pageContext, Page, Head, Layout, pageTitleTag, serializedContext, assets }) {
+	const { cssLinks, jsPreloads, entryClient } = assets;
+	const providerValue = {
+		pageContext,
+		setPageContext: () => {}
+	};
+	return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+${pageTitleTag}
+${cssLinks}
+${jsPreloads}
+${Head ? renderToString(<PageContextProvider value={providerValue}>
+        <Head />
+      </PageContextProvider>) : ""}
+<script>window.__PAGE_CONTEXT__=${serializedContext}<\/script>
+</head>
+<body>
+<div id="root" tabindex="-1">${hydration ? renderToString(<PageContextProvider value={providerValue}>
+        {Layout ? <Layout><Page /></Layout> : <Page />}
+      </PageContextProvider>) : ""}</div>
+<script type="module" src="${entryClient}"><\/script>
+</body>
+</html>`;
+}
+//#endregion
+export { onRenderHtml };

package/dist/globalContext-BIY5-Fdk.mjs

@@ -0,0 +1,8 @@
+import { createContext } from "react";
+//#region src/hooks/globalContext.tsx
+const KEY = "__vike_lite_react_context__";
+const g = globalThis;
+if (!Object.hasOwn(g, KEY)) g[KEY] = createContext(null);
+const PageContextReactContext = g[KEY];
+//#endregion
+export { PageContextReactContext as t };

package/dist/index.mjs

@@ -1,10 +1,5 @@
-import { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
-//#region src/hooks/globalContext.tsx
-const KEY = "__vike_lite_react_context__";
-const g = globalThis;
-if (!Object.hasOwn(g, KEY)) g[KEY] = createContext(null);
-const PageContextReactContext = g[KEY];
-//#endregion
+import { t as PageContextReactContext } from "./globalContext-BIY5-Fdk.mjs";
+import { useCallback, useContext, useEffect, useMemo, useState } from "react";
 //#region src/hooks/useData.tsx
 function useData() {
 	const ctx = useContext(PageContextReactContext);

package/dist/vite.d.mts

@@ -1,6 +1,6 @@
 import { Options } from "@vitejs/plugin-react";
 import { Plugin } from "vite";
-//#region src/vite-plugin.d.ts
+//#region src/vite.d.ts
 interface VikeLiteReactOptions {
   /**
    * Enable client hydration (SSR + hydrate) or full client takeover (SPA mode).

package/dist/vite.mjs

@@ -1,5 +1,5 @@
 import react from "@vitejs/plugin-react";
-//#region src/vite-plugin.ts
+//#region src/vite.ts
 function vikeLiteReact({ hydration = true, react: reactOptions } = {}) {
 	const virtualConfigId = "virtual:vike-lite/config";
 	const virtualClientId = "virtual:vike-lite/client";
@@ -16,9 +16,9 @@ function vikeLiteReact({ hydration = true, react: reactOptions } = {}) {
 			if (id === virtualServerId) return resolvedVirtualServerId;
 		},
 		load(id) {
-			if (id === resolvedVirtualConfigId) return `export const hydration = ${JSON.stringify(hydration)};`;
+			if (id === resolvedVirtualConfigId) return `export const hydration=${hydration};`;
 			if (id === resolvedVirtualClientId) return "export const onRenderClient=()=>import(\"vike-lite-react/__internal/client/onRenderClient\");";
-			if (id === resolvedVirtualServerId) return `export { onRenderHtml } from 'vike-lite-react/__internal/server/onRenderHtml';`;
+			if (id === resolvedVirtualServerId) return `export {onRenderHtml}from'vike-lite-react/__internal/server/onRenderHtml';`;
 		}
 	};
 	return [...react(reactOptions), adapter];

package/package.json

@@ -1,7 +1,32 @@
 {
   "name": "vike-lite-react",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/node-ecosystem/vike-lite.git"
+  },
+  "homepage": "https://github.com/node-ecosystem/vike-lite#readme",
+  "bugs": {
+    "url": "https://github.com/node-ecosystem/vike-lite/issues"
+  },
+  "keywords": [
+    "framework",
+    "lite",
+    "react",
+    "react-ssr",
+    "server-side-rendering",
+    "ssg",
+    "ssr",
+    "static-site-generator",
+    "vike",
+    "vike-lite",
+    "vite",
+    "vite-plugin",
+    "vite-ssr",
+    "vitejs",
+    "web-framework"
+  ],
   "type": "module",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.mts",
@@ -15,22 +40,14 @@
       "import": "./dist/vite.mjs"
     },
     "./__internal/client/onRenderClient": {
-      "types": "./src/__internal/client/onRenderClient.tsx",
-      "import": "./src/__internal/client/onRenderClient.tsx"
+      "types": "./dist/__internal/client/onRenderClient.d.mts",
+      "import": "./dist/__internal/client/onRenderClient.mjs"
     },
     "./__internal/server/onRenderHtml": {
-      "types": "./src/__internal/server/onRenderHtml.tsx",
-      "import": "./src/__internal/server/onRenderHtml.tsx"
+      "types": "./dist/__internal/server/onRenderHtml.d.mts",
+      "import": "./dist/__internal/server/onRenderHtml.mjs"
     }
   },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/node-ecosystem/vike-lite-react.git"
-  },
-  "homepage": "https://github.com/node-ecosystem/vike-lite-react#readme",
-  "bugs": {
-    "url": "https://github.com/node-ecosystem/vike-lite-react/issues"
-  },
   "files": [
     "dist"
   ],
@@ -45,8 +62,8 @@
     "@vitejs/plugin-react": "^6.0.3",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "tsdown": "^0.22.5",
-    "vike-lite": "1.13.2",
+    "tsdown": "^0.22.8",
+    "vike-lite": "1.15.1",
     "vite": "^8.1.4"
   },
   "peerDependencies": {