vike-react 0.4.6 → 0.4.8

package/README.md

@@ -38,7 +38,7 @@ npm install vike-react
 2. Extend your existing Vike config files with `vike-react`:
 
 ```diff
- // /pages/+config.h.js
+ // /pages/+config.js
 
 +import vikeReact from 'vike-react/config'
 +

package/dist/+config.d.ts

@@ -48,6 +48,16 @@ declare const _default: {
                 server: true;
             };
         };
+        _streamIsRequied: {
+            env: {
+                server: true;
+            };
+        };
+        onAfterRenderClient: {
+            env: {
+                client: true;
+            };
+        };
         VikeReactQueryWrapper: {
             env: {
                 client: true;

package/dist/+config.js

@@ -3,7 +3,6 @@ import { ssrEffect } from './renderer/ssrEffect.js';
 // This is required to make TypeScript load the global interfaces such as Vike.PageContext so that they're always loaded: we can assume that the user always imports this file over `import vikeReact from 'vike-react/config'`
 import './types/index.js';
 export default {
-    // @ts-ignore Remove this ts-ignore once Vike's new version is released.
     name: 'vike-react',
     // https://vike.dev/onRenderHtml
     onRenderHtml: 'import:vike-react/renderer/onRenderHtml:onRenderHtml',
@@ -40,6 +39,12 @@ export default {
         stream: {
             env: { server: true }
         },
+        _streamIsRequied: {
+            env: { server: true }
+        },
+        onAfterRenderClient: {
+            env: { client: true }
+        },
         VikeReactQueryWrapper: {
             env: { client: true, server: true }
         },

package/dist/index.js

@@ -1,3 +1,3 @@
 // TODO/next-major-release: 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.h.js)");
+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/renderer/onRenderClient.js

@@ -6,15 +6,25 @@ import { getPageElement } from './getPageElement.js';
 let root;
 const onRenderClient = (pageContext) => {
     const page = getPageElement(pageContext);
-    const container = document.getElementById('page-view');
+    // TODO: implement this? So that, upon errors, onRenderClient() throws an error and Vike can render the error. 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) => { };
+    const container = document.getElementById('react-root');
     if (container.innerHTML !== '' && pageContext.isHydration) {
         // First render (hydration)
-        root = ReactDOM.hydrateRoot(container, page);
+        root = ReactDOM.hydrateRoot(container, page, {
+            // @ts-expect-error
+            onUncaughtError
+        });
     }
     else {
         if (!root) {
             // First render (not hydration)
-            root = ReactDOM.createRoot(container);
+            root = ReactDOM.createRoot(container, {
+                // @ts-expect-error
+                onUncaughtError
+            });
         }
         else {
             // Client-side navigation
@@ -32,6 +42,9 @@ const onRenderClient = (pageContext) => {
         }
         root.render(page);
     }
+    pageContext.page = page;
+    pageContext.root = root;
+    pageContext.config.onAfterRenderClient?.(pageContext);
 };
 // https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically/260876#260876
 function setFavicon(faviconUrl) {

package/dist/renderer/onRenderHtml.js

@@ -8,6 +8,7 @@ import { getPageElement } from './getPageElement.js';
 import { PageContextProvider } from '../hooks/usePageContext.js';
 import React from 'react';
 checkVikeVersion();
+addEcosystemStamp();
 const onRenderHtml = async (pageContext) => {
     const title = getHeadSetting('title', pageContext);
     const favicon = getHeadSetting('favicon', pageContext);
@@ -25,9 +26,16 @@ const onRenderHtml = async (pageContext) => {
     }
     else {
         const page = getPageElement(pageContext);
-        pageView = !pageContext.config.stream
-            ? dangerouslySkipEscape(renderToString(page))
-            : await renderToStream(page, { userAgent: pageContext.userAgent });
+        const { stream, 
+        // @ts-expect-error
+        _streamIsRequied } = pageContext.config;
+        if (!stream && !_streamIsRequied) {
+            pageView = dangerouslySkipEscape(renderToString(page));
+        }
+        else {
+            const disable = stream === false ? true : undefined;
+            pageView = await renderToStream(page, { userAgent: pageContext.userAgent, disable });
+        }
     }
     const documentHtml = escapeInject `<!DOCTYPE html>
     <html lang='${lang}'>
@@ -38,7 +46,7 @@ const onRenderHtml = async (pageContext) => {
         ${faviconTag}
       </head>
       <body>
-        <div id="page-view">${pageView}</div>
+        <div id="react-root">${pageView}</div>
       </body>
     </html>`;
     return documentHtml;
@@ -55,3 +63,14 @@ function checkVikeVersion() {
     }
     throw new Error('Update Vike to 0.4.147 or above');
 }
+// Used by:
+// - react-streaming (to improve error messages, see https://github.com/brillout/react-streaming/blob/70c168de1e97b9c4385a4c3002b5013f1e406341/src/utils/isVikeReactApp.ts#L4)
+function addEcosystemStamp() {
+    const g = globalThis;
+    g._isVikeReactApp =
+        /* Don't set to true so that consumers do `!!globalThis._isVikeApp` instead of `globalThis._isVikeApp === true`.
+        true
+        */
+        // We use an object so that we can eventually, in the future, add helpful information as needed. (E.g. the vike-react version.)
+        {};
+}

package/dist/types/Config.d.ts

@@ -1,3 +1,4 @@
+import type { PageContextClient } from 'vike/types';
 declare global {
     namespace VikePackages {
         interface ConfigVikeReact {
@@ -5,10 +6,24 @@ declare global {
             Page?: () => React.ReactNode;
             /** React element rendered and appended into <head></head> */
             Head?: () => React.ReactNode;
-            /** A component, usually common to several pages, that wraps the root component `Page` */
+            /**
+             * A component that defines the visual layout of the page common to several pages.
+             *
+             * Technically: the `<Layou>` component wraps the root component `<Page>`.
+             *
+             * https://vike.dev/Layout
+             */
             Layout?: (props: {
                 children: React.ReactNode;
             }) => React.ReactNode;
+            /**
+             * A component wrapping the the root component `<Page>`.
+             *
+             * https://vike.dev/Wrapper
+             */
+            Wrapper?: (props: {
+                children: React.ReactNode;
+            }) => React.ReactNode;
             /** &lt;title>${title}&lt;/title> */
             title?: string;
             /** &lt;link rel="icon" href="${favicon}" /> */
@@ -20,12 +35,11 @@ declare global {
              */
             lang?: string;
             /**
-             * If true, render mode is SSR or pre-rendering (aka SSG). In other words, the
-             * page's HTML will be rendered at build-time or request-time.
-             * If false, render mode is SPA. In other words, the page will only be
-             * rendered in the browser.
+             * If `true`, the page is rendered twice: on the server-side (to HTML) and on the client-side (hydration).
              *
-             * See https://vike.dev/render-modes
+             * If `false`, the page is rendered only once in the browser.
+             *
+             * https://vike.dev/ssr
              *
              * @default true
              *
@@ -38,9 +52,11 @@ declare global {
              *
              */
             stream?: boolean;
+            /**
+             * Client-side hook called after the page is rendered.
+             */
+            onAfterRenderClient?: (pageContext: PageContextClient) => void;
             VikeReactQueryWrapper?: React.ReactNode;
-            Wrapper?: () => React.ReactNode;
         }
     }
 }
-export {};

package/dist/types/PageContext.d.ts

@@ -1,9 +1,17 @@
+import type React from 'react';
+import type { JSX } from 'react';
+import type ReactDOM from 'react-dom/client';
 declare global {
     namespace Vike {
         interface PageContext {
+            /** The root React component of the page */
             Page?: () => React.ReactNode;
+            /** The user agent string of the user's browser */
             userAgent?: string;
+            /** The root React element of the page */
+            page?: JSX.Element;
+            /** The React root DOM container */
+            root?: ReactDOM.Root;
         }
     }
 }
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-react",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -16,9 +16,9 @@
   "scripts": {
     "dev": "tsc --watch",
     "build": "rm -rf dist/ && tsc",
-    "release": "release-me --git-prefix vike-react --changelog-dir packages/vike-react/ patch",
-    "release:minor": "release-me --git-prefix vike-react --changelog-dir packages/vike-react/ minor",
-    "release:commit": "release-me --git-prefix vike-react --changelog-dir packages/vike-react/ commit"
+    "release": "release-me --git-tag-prefix vike-react patch",
+    "release:minor": "release-me --git-tag-prefix vike-react minor",
+    "release:commit": "release-me --git-tag-prefix vike-react commit"
   },
   "peerDependencies": {
     "react": "18.x.x",
@@ -27,17 +27,18 @@
     "vite": "^4.3.8 || ^5.0.10"
   },
   "devDependencies": {
-    "@brillout/release-me": "^0.1.14",
+    "@biomejs/biome": "^1.6.4",
+    "@brillout/release-me": "^0.2.1",
     "@types/node": "^20.11.17",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.3.3",
-    "vike": "^0.4.161"
+    "vike": "^0.4.168"
   },
   "dependencies": {
-    "react-streaming": "^0.3.22"
+    "react-streaming": "^0.3.27"
   },
   "typesVersions": {
     "*": {