vike-react 0.6.5 → 0.6.7

package/dist/components/ClientOnly.js

@@ -1,7 +1,7 @@
 export { ClientOnly };
 import React, { lazy, useEffect, useState, startTransition } from 'react';
 function ClientOnly({ load, children, fallback, deps = [], }) {
-    // TODO/next-major: remove this file/export
+    // TO-DO/next-major: remove this file/export
     console.warn('[vike-react][warning] <ClientOnly> is deprecated: use clientOnly() instead https://vike.dev/clientOnly');
     const [Component, setComponent] = useState(null);
     useEffect(() => {

package/dist/config.js

@@ -101,7 +101,7 @@ const config = {
             cumulative: true,
             env: { client: true, server: true },
         },
-        // TODO/next-major: move to +react.js > strictMode ?
+        // TO-DO/next-major: move to +react.js > strictMode ?
         reactStrictMode: {
             env: { client: true, server: true },
         },

package/dist/hooks/usePageContext.d.ts

@@ -1,8 +1,8 @@
 export { usePageContext };
-export { PageContextProvider };
+export { VikeReactProviderPageContext };
 import React from 'react';
 import type { PageContext } from 'vike/types';
-declare function PageContextProvider({ pageContext, children }: {
+declare function VikeReactProviderPageContext({ pageContext, children, }: {
     pageContext: PageContext;
     children: React.ReactNode;
 }): React.JSX.Element;

package/dist/hooks/usePageContext.js

@@ -1,11 +1,11 @@
 export { usePageContext };
-export { PageContextProvider };
+export { VikeReactProviderPageContext };
 import React, { useContext } from 'react';
 import { getGlobalObject } from '../utils/getGlobalObject.js';
-const globalObject = getGlobalObject('PageContextProvider.ts', {
+const globalObject = getGlobalObject('usePageContext.tsx', {
     reactContext: React.createContext(undefined),
 });
-function PageContextProvider({ pageContext, children }) {
+function VikeReactProviderPageContext({ pageContext, children, }) {
     const { reactContext } = globalObject;
     return React.createElement(reactContext.Provider, { value: pageContext }, children);
 }

package/dist/index.js

@@ -1,3 +1,3 @@
-// TODO/next-major: remove this file/export
+// TO-DO/next-major: remove this file/export
 console.warn("[vike-react][warning][deprecation] Replace `import vikeReact from 'vike-react'` with `import vikeReact from 'vike-react/config'` (typically in your /pages/+config.js)");
 export { default } from './config.js';

package/dist/integration/Loading.d.ts

@@ -1,6 +1,6 @@
 declare const _default: {
-    component: typeof LoadingComponent;
+    component: typeof VikeReactLoadingComponent;
 };
 export default _default;
 import React from 'react';
-declare function LoadingComponent(): React.JSX.Element;
+declare function VikeReactLoadingComponent(): React.JSX.Element;

package/dist/integration/Loading.js

@@ -1,21 +1,27 @@
 export default {
-    component: LoadingComponent,
+    component: VikeReactLoadingComponent,
 };
 import React from 'react';
-/* We can't import it here: https://github.com/vikejs/vike/issues/2460
- * - We import it inside onRenderClient.js instead.
- * - We'll be able to do it if Vite + Rolldown always transpiles the server-side.
-import './Loading.css'
-*/
-function LoadingComponent() {
-    return (React.createElement("div", { style: {
-            width: '100%',
-            height: '100%',
-            maxHeight: '100%',
-            background: 'linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%)',
-            borderRadius: '5px',
-            backgroundSize: '200% 100%',
-            animation: '1.3s vike-react-shine linear infinite',
-            aspectRatio: '2.5/1',
-        } }));
+function VikeReactLoadingComponent() {
+    return (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: {
+                width: '100%',
+                height: '100%',
+                maxHeight: '100%',
+                background: 'linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%)',
+                borderRadius: '5px',
+                backgroundSize: '200% 100%',
+                animation: '1.3s vike-react-loading linear infinite',
+                aspectRatio: '2.5/1',
+            } }),
+        React.createElement("style", { href: "vike-react-loading", 
+            // https://react.dev/reference/react-dom/components/style#special-rendering-behavior
+            // https://github.com/vikejs/vike-react/pull/184#discussion_r2348075206
+            precedence: "default" }, `
+          @keyframes vike-react-loading {
+            to {
+              background-position-x: -200%;
+            }
+          }
+        `)));
 }

package/dist/integration/getPageElement.d.ts

@@ -4,4 +4,5 @@ import type { PageContext } from 'vike/types';
 declare function getPageElement(pageContext: PageContext): {
     page: React.JSX.Element;
     renderPromise: Promise<void>;
+    renderPromiseReject: (err: unknown) => void;
 };

package/dist/integration/getPageElement.js

@@ -1,6 +1,6 @@
 export { getPageElement };
 import React, { Suspense, useEffect } from 'react';
-import { PageContextProvider } from '../hooks/usePageContext.js';
+import { VikeReactProviderPageContext } from '../hooks/usePageContext.js';
 function getPageElement(pageContext) {
     const { Page, config: { Loading }, } = pageContext;
     let page = Page ? React.createElement(Page, null) : null;
@@ -20,16 +20,20 @@ function getPageElement(pageContext) {
         page = React.createElement(Wrap, null, page);
         page = addSuspense(page);
     });
-    page = React.createElement(PageContextProvider, { pageContext: pageContext }, page);
+    page = React.createElement(VikeReactProviderPageContext, { pageContext: pageContext }, page);
     let renderPromiseResolve;
-    let renderPromise = new Promise((r) => (renderPromiseResolve = r));
-    page = React.createElement(RenderPromiseProvider, { renderPromiseResolve: renderPromiseResolve }, page);
+    let renderPromiseReject;
+    let renderPromise = new Promise((resolve, reject) => {
+        renderPromiseResolve = resolve;
+        renderPromiseReject = reject;
+    });
+    page = (React.createElement(VikeReactProviderRenderPromise, { renderPromiseResolve: renderPromiseResolve }, page));
     if (pageContext.config.reactStrictMode !== false) {
         page = React.createElement(React.StrictMode, null, page);
     }
-    return { page, renderPromise };
+    return { page, renderPromise, renderPromiseReject };
 }
-function RenderPromiseProvider({ children, renderPromiseResolve, }) {
+function VikeReactProviderRenderPromise({ children, renderPromiseResolve, }) {
     useEffect(renderPromiseResolve);
     return children;
 }

package/dist/integration/onRenderClient.d.ts

@@ -1,4 +1,4 @@
 export { onRenderClient };
-import type { OnRenderClientAsync } from 'vike/types';
-import './Loading.css';
-declare const onRenderClient: OnRenderClientAsync;
+import type { PageContextClient } from 'vike/types';
+import type { PageContextInternal } from '../types/PageContext.js';
+declare function onRenderClient(pageContext: PageContextClient & PageContextInternal): Promise<void>;

package/dist/integration/onRenderClient.js

@@ -6,36 +6,53 @@ import { getPageElement } from './getPageElement.js';
 import { callCumulativeHooks } from '../utils/callCumulativeHooks.js';
 import { applyHeadSettings } from './applyHeadSettings.js';
 import { resolveReactOptions } from './resolveReactOptions.js';
-import './Loading.css'; // See comment inside Loading.tsx
-let root;
-const onRenderClient = async (pageContext) => {
+import { getGlobalObject } from '../utils/getGlobalObject.js';
+import { isObject } from '../utils/isObject.js';
+const globalObject = getGlobalObject('onRenderClient.tsx', {});
+async function onRenderClient(pageContext) {
     pageContext._headAlreadySet = pageContext.isHydration;
     // Use case:
     // - Store hydration https://github.com/vikejs/vike-react/issues/110
     await callCumulativeHooks(pageContext.config.onBeforeRenderClient, pageContext);
-    const { page, renderPromise } = getPageElement(pageContext);
+    const { page, renderPromise, renderPromiseReject } = getPageElement(pageContext);
     pageContext.page = page;
-    // TODO: implement this? So that, upon errors, onRenderClient() throws an error and Vike can render the error page. As of April 2024 it isn't released yet.
-    //  - https://react-dev-git-fork-rickhanlonii-rh-root-options-fbopensource.vercel.app/reference/react-dom/client/createRoot#show-a-dialog-for-uncaught-errors
-    //  - https://react-dev-git-fork-rickhanlonii-rh-root-options-fbopensource.vercel.app/reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors
-    const onUncaughtError = (_error, _errorInfo) => { };
+    // Local callback for current page
+    globalObject.onUncaughtErrorLocal = (err) => {
+        renderPromiseReject(err);
+    };
     const container = document.getElementById('root');
     const { hydrateRootOptions, createRootOptions } = resolveReactOptions(pageContext);
     if (pageContext.isHydration &&
         // Whether the page was [Server-Side Rendered](https://vike.dev/ssr).
         container.innerHTML !== '') {
         // First render while using SSR, i.e. [hydration](https://vike.dev/hydration)
-        root = ReactDOM.hydrateRoot(container, page, hydrateRootOptions);
+        globalObject.root = ReactDOM.hydrateRoot(container, page, {
+            ...hydrateRootOptions,
+            // onUncaughtError is the right callback: https://gist.github.com/brillout/b9516e83a7a4517f4dbd0ef50e9dd716
+            onUncaughtError(...args) {
+                onUncaughtErrorGlobal.call(this, args, hydrateRootOptions);
+            },
+        });
     }
     else {
-        if (!root) {
+        if (!globalObject.root) {
             // First render without SSR
-            root = ReactDOM.createRoot(container, createRootOptions);
+            globalObject.root = ReactDOM.createRoot(container, {
+                ...createRootOptions,
+                onUncaughtError(...args) {
+                    onUncaughtErrorGlobal.call(this, args, createRootOptions);
+                },
+            });
         }
-        root.render(page);
+        globalObject.root.render(page);
+    }
+    pageContext.root = globalObject.root;
+    try {
+        await renderPromise;
+    }
+    finally {
+        delete globalObject.onUncaughtErrorLocal;
     }
-    pageContext.root = root;
-    await renderPromise;
     if (!pageContext.isHydration) {
         pageContext._headAlreadySet = true;
         applyHead(pageContext);
@@ -44,9 +61,48 @@ const onRenderClient = async (pageContext) => {
     // - Custom user settings: https://vike.dev/head-tags#custom-settings
     // - Testing tools: https://github.com/vikejs/vike-react/issues/95
     await callCumulativeHooks(pageContext.config.onAfterRenderClient, pageContext);
-};
+}
 function applyHead(pageContext) {
     const title = getHeadSetting('title', pageContext);
     const lang = getHeadSetting('lang', pageContext);
     applyHeadSettings(title, lang);
 }
+// Global callback, attached once upon hydration.
+function onUncaughtErrorGlobal(args, userOptions) {
+    const [errorOriginal, errorInfo] = args;
+    const errorEnhanced = getErrorEnhanced(errorOriginal, errorInfo);
+    console.error(errorEnhanced);
+    // Used by Vike:
+    // https://github.com/vikejs/vike/blob/8ce2cbda756892f0ff083256291515b5a45fe319/packages/vike/client/runtime-client-routing/renderPageClientSide.ts#L838-L844
+    if (isObject(errorEnhanced))
+        errorEnhanced.isAlreadyLogged = true;
+    globalObject.onUncaughtErrorLocal?.(errorEnhanced);
+    userOptions?.onUncaughtError?.call(this, errorEnhanced, errorInfo);
+}
+function getErrorEnhanced(errorOriginal, errorInfo) {
+    if (!errorInfo?.componentStack || !isObject(errorOriginal))
+        return errorOriginal;
+    const errorOiginalStackLines = String(errorOriginal.stack).split('\n');
+    const cutoff = errorOiginalStackLines.findIndex((l) => l.includes('node_modules') && l.includes('react'));
+    if (cutoff === -1)
+        return errorOriginal;
+    const stackEnhanced = [
+        ...errorOiginalStackLines.slice(0, cutoff),
+        ...errorInfo.componentStack.split('\n').filter(Boolean),
+        ...errorOiginalStackLines.slice(cutoff),
+    ].join('\n');
+    const errorEnhanced = structuredClone(errorOriginal);
+    errorEnhanced.stack = stackEnhanced;
+    // https://gist.github.com/brillout/066293a687ab7cf695e62ad867bc6a9c
+    Object.defineProperty(errorEnhanced, 'getOriginalError', {
+        value: () => errorOriginal,
+        enumerable: true,
+    });
+    /* Not needed. Let's skip this to save client-side KBs.
+    Object.defineProperty(errorOriginal, 'getEnhancedError', {
+      value: () => errorEnhanced,
+      enumerable: true,
+    })
+    //*/
+    return errorEnhanced;
+}

package/dist/integration/onRenderHtml.d.ts

@@ -1,6 +1,8 @@
 export { onRenderHtml };
 import { renderToStream } from 'react-streaming/server';
-import type { OnRenderHtmlAsync } from 'vike/types';
-declare const onRenderHtml: OnRenderHtmlAsync;
+import { escapeInject } from 'vike/server';
+import type { PageContextServer } from 'vike/types';
+import type { PageContextInternal } from '../types/PageContext.js';
+declare function onRenderHtml(pageContext: PageContextServer & PageContextInternal): Promise<ReturnType<typeof escapeInject>>;
 export type PageHtmlStream = Awaited<ReturnType<typeof renderToStream>>;
 export type Viewport = 'responsive' | number | null;

package/dist/integration/onRenderHtml.js

@@ -4,7 +4,7 @@ import React from 'react';
 import { renderToString, renderToStaticMarkup } from 'react-dom/server';
 import { renderToStream } from 'react-streaming/server';
 import { dangerouslySkipEscape, escapeInject } from 'vike/server';
-import { PageContextProvider } from '../hooks/usePageContext.js';
+import { VikeReactProviderPageContext } from '../hooks/usePageContext.js';
 import { getHeadSetting } from './getHeadSetting.js';
 import { getPageElement } from './getPageElement.js';
 import { isReactElement } from '../utils/isReactElement.js';
@@ -16,7 +16,7 @@ import { isNotNullish } from '../utils/isNotNullish.js';
 import { isObject } from '../utils/isObject.js';
 import { isType } from '../utils/isType.js';
 addEcosystemStamp();
-const onRenderHtml = async (pageContext) => {
+async function onRenderHtml(pageContext) {
     await renderPageToHtml(pageContext);
     const headHtml = getHeadHtml(pageContext);
     const { bodyHtmlBegin, bodyHtmlEnd } = await getBodyHtmlBoundary(pageContext);
@@ -47,7 +47,7 @@ const onRenderHtml = async (pageContext) => {
         ${bodyHtmlEnd}
       </body>
     </html>`;
-};
+}
 async function renderPageToHtml(pageContext) {
     if (pageContext.Page)
         pageContext.page = getPageElement(pageContext).page;
@@ -69,7 +69,7 @@ async function renderPageToHtml(pageContext) {
                         undefined
                     : streamSetting.type === 'web',
                 userAgent: pageContext.headers?.['user-agent'] ||
-                    // TODO/eventually: remove old way of acccessing the User Agent header.
+                    // TO-DO/eventually: remove old way of acccessing the User Agent header.
                     // @ts-ignore
                     pageContext.userAgent,
                 disable: 
@@ -128,7 +128,7 @@ function getHeadElementHtml(Head, pageContext) {
         headElement = Head;
     }
     else {
-        headElement = (React.createElement(PageContextProvider, { pageContext: pageContext },
+        headElement = (React.createElement(VikeReactProviderPageContext, { pageContext: pageContext },
             React.createElement(Head, null)));
     }
     if (pageContext.config.reactStrictMode !== false) {
@@ -182,7 +182,7 @@ async function getBodyHtmlBoundary(pageContext) {
 }
 function resolveStreamSetting(pageContext) {
     const { stream, 
-    // TODO/eventually: remove +streamIsRequired
+    // TO-DO/eventually: remove +streamIsRequired
     //  - Let's remove it once following last vike-react-{query,apollo} releases using +streamIsRequired can be considered old versions.
     //    - Last vike-react-query version that uses +streamIsRequired was 0.1.3
     //    - Last vike-react-apollo version that uses +streamIsRequired was 0.1.1

package/dist/utils/getGlobalObject.d.ts

@@ -1 +1 @@
-export declare function getGlobalObject<T extends Record<string, unknown> = never>(key: `${string}.ts`, defaultValue: T): T;
+export declare function getGlobalObject<T extends Record<string, unknown> = never>(key: `${string}.ts` | `${string}.tsx`, defaultValue: T): T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-react",
-  "version": "0.6.5",
+  "version": "0.6.7",
   "repository": "https://github.com/vikejs/vike-react",
   "type": "module",
   "exports": {
@@ -27,7 +27,7 @@
     "./__internal/integration/Loading": "./dist/integration/Loading.js"
   },
   "dependencies": {
-    "react-streaming": "^0.4.3"
+    "react-streaming": "^0.4.5"
   },
   "peerDependencies": {
     "react": ">=19",
@@ -38,14 +38,14 @@
     "@biomejs/biome": "^1.9.4",
     "@brillout/release-me": "^0.4.8",
     "@types/node": "^24.0.8",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
     "rimraf": "^5.0.5",
-    "typescript": "^5.8.3",
-    "vike": "^0.4.235",
-    "vite": "^6.2.5"
+    "typescript": "^5.9.2",
+    "vike": "^0.4.241",
+    "vite": "^7.1.7"
   },
   "typesVersions": {
     "*": {
@@ -95,8 +95,7 @@
   ],
   "scripts": {
     "dev": "tsc --watch",
-    "build": "rimraf dist/ && tsc && pnpm run build:css",
-    "build:css": "cp src/integration/Loading.css dist/integration/Loading.css",
+    "build": "rimraf dist/ && tsc",
     "release": "release-me patch",
     "release:minor": "release-me minor",
     "release:commit": "release-me commit"

package/dist/integration/Loading.css

@@ -1,10 +0,0 @@
-/*
-This CSS is loaded for all vike-react users, even if they don't use the <Loading> component because it's imported not directly but over depednency injection, see:
-https://github.com/vikejs/vike/discussions/2340
-*/
-
-@keyframes vike-react-shine {
-  to {
-    background-position-x: -200%;
-  }
-}