vike-react 0.6.5 → 0.6.6

package/dist/hooks/usePageContext.js

@@ -2,7 +2,7 @@ export { usePageContext };
 export { PageContextProvider };
 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 }) {

package/dist/integration/Loading.js

@@ -2,20 +2,26 @@ export default {
     component: LoadingComponent,
 };
 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',
-        } }));
+    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

@@ -20,14 +20,20 @@ function getPageElement(pageContext) {
         page = React.createElement(Wrap, null, page);
         page = addSuspense(page);
     });
+    // TODO/now rename
     page = React.createElement(PageContextProvider, { pageContext: pageContext }, page);
     let renderPromiseResolve;
-    let renderPromise = new Promise((r) => (renderPromiseResolve = r));
+    let renderPromiseReject;
+    let renderPromise = new Promise((resolve, reject) => {
+        renderPromiseResolve = resolve;
+        renderPromiseReject = reject;
+    });
+    // TODO/now rename
     page = React.createElement(RenderPromiseProvider, { 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, }) {
     useEffect(renderPromiseResolve);

package/dist/integration/onRenderClient.d.ts

@@ -1,4 +1,3 @@
 export { onRenderClient };
 import type { OnRenderClientAsync } from 'vike/types';
-import './Loading.css';
 declare const onRenderClient: OnRenderClientAsync;

package/dist/integration/onRenderClient.js

@@ -6,36 +6,54 @@ 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;
+import { getGlobalObject } from '../utils/getGlobalObject.js';
+import { isObject } from '../utils/isObject.js';
+const globalObject = getGlobalObject('onRenderClient.tsx', {});
+// TODO/now: update TS
 const onRenderClient = async (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);
@@ -50,3 +68,18 @@ function applyHead(pageContext) {
     const lang = getHeadSetting('lang', pageContext);
     applyHeadSettings(title, lang);
 }
+// Global callback, attached once upon hydration.
+function onUncaughtErrorGlobal(args, userOptions) {
+    logUncaughtError(args);
+    const [error] = args;
+    globalObject.onUncaughtErrorLocal?.(error);
+    userOptions?.onUncaughtError?.apply(this, args);
+}
+async function logUncaughtError(args) {
+    const [error, errorInfo] = args;
+    console.error('%o\n%s', error, `The above error occurred at:${errorInfo.componentStack}`);
+    // Used by Vike:
+    // https://github.com/vikejs/vike/blob/8ce2cbda756892f0ff083256291515b5a45fe319/packages/vike/client/runtime-client-routing/renderPageClientSide.ts#L838-L844
+    if (isObject(error))
+        error.isAlreadyLogged = true;
+}

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.6",
   "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.4"
   },
   "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.10",
+    "@types/react-dom": "^19.1.7",
+    "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.237",
+    "vite": "^7.1.5"
   },
   "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%;
-  }
-}