vike-react 0.4.8 → 0.4.9

package/dist/+config.d.ts

@@ -53,6 +53,11 @@ declare const _default: {
                 server: true;
             };
         };
+        onBeforeRenderClient: {
+            env: {
+                client: true;
+            };
+        };
         onAfterRenderClient: {
             env: {
                 client: true;
@@ -75,6 +80,12 @@ declare const _default: {
                 config: true;
             };
         };
+        reactStrictMode: {
+            env: {
+                client: true;
+                server: true;
+            };
+        };
     };
 };
 export default _default;

package/dist/+config.js

@@ -42,6 +42,9 @@ export default {
         _streamIsRequied: {
             env: { server: true }
         },
+        onBeforeRenderClient: {
+            env: { client: true }
+        },
         onAfterRenderClient: {
             env: { client: true }
         },
@@ -54,6 +57,9 @@ export default {
         // Vike already defines the setting 'name', but we redundantly define it here for older Vike versions (otherwise older Vike versions will complain that 'name` is an unknown config).
         name: {
             env: { config: true }
+        },
+        reactStrictMode: {
+            env: { client: true, server: true }
         }
     }
 };

package/dist/renderer/getPageElement.js

@@ -6,11 +6,13 @@ function getPageElement(pageContext) {
     const Wrapper = pageContext.config.Wrapper ?? PassThrough;
     const VikeReactQueryWrapper = pageContext.config.VikeReactQueryWrapper ?? PassThrough;
     const { Page } = pageContext;
-    const page = (React.createElement(React.StrictMode, null,
-        React.createElement(PageContextProvider, { pageContext: pageContext },
-            React.createElement(VikeReactQueryWrapper, { pageContext: pageContext },
-                React.createElement(Wrapper, null,
-                    React.createElement(Layout, null, Page ? React.createElement(Page, null) : null))))));
+    let page = (React.createElement(PageContextProvider, { pageContext: pageContext },
+        React.createElement(VikeReactQueryWrapper, { pageContext: pageContext },
+            React.createElement(Wrapper, null,
+                React.createElement(Layout, null, Page ? React.createElement(Page, null) : null)))));
+    if (pageContext.config.reactStrictMode !== false) {
+        page = React.createElement(React.StrictMode, null, page);
+    }
     return page;
 }
 function PassThrough({ children }) {

package/dist/renderer/onRenderClient.js

@@ -5,14 +5,21 @@ import { getHeadSetting } from './getHeadSetting.js';
 import { getPageElement } from './getPageElement.js';
 let root;
 const onRenderClient = (pageContext) => {
+    // Use case:
+    // - Store hydration https://github.com/vikejs/vike-react/issues/110
+    pageContext.config.onBeforeRenderClient?.(pageContext);
     const page = getPageElement(pageContext);
     // 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)
+    if (
+    // Whether the page was rendered to HTML. (I.e. whether the user set the [`ssr`](https://vike.dev/ssr) setting to `false`.)
+    container.innerHTML !== '' &&
+        // Whether the page was already rendered to HTML. (I.e. whether this is the first client-side rendering.)
+        pageContext.isHydration) {
+        // Hydration
         root = ReactDOM.hydrateRoot(container, page, {
             // @ts-expect-error
             onUncaughtError
@@ -44,6 +51,8 @@ const onRenderClient = (pageContext) => {
     }
     pageContext.page = page;
     pageContext.root = root;
+    // Use case:
+    // - Testing tool https://github.com/vikejs/vike-react/issues/95
     pageContext.config.onAfterRenderClient?.(pageContext);
 };
 // https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically/260876#260876

package/dist/renderer/onRenderHtml.js

@@ -16,9 +16,11 @@ const onRenderHtml = async (pageContext) => {
     const titleTag = !title ? '' : escapeInject `<title>${title}</title>`;
     const faviconTag = !favicon ? '' : escapeInject `<link rel="icon" href="${favicon}" />`;
     const Head = pageContext.config.Head || (() => React.createElement(React.Fragment, null));
-    const head = (React.createElement(React.StrictMode, null,
-        React.createElement(PageContextProvider, { pageContext: pageContext },
-            React.createElement(Head, null))));
+    let head = (React.createElement(PageContextProvider, { pageContext: pageContext },
+        React.createElement(Head, null)));
+    if (pageContext.config.reactStrictMode !== false) {
+        head = React.createElement(React.StrictMode, null, head);
+    }
     const headHtml = dangerouslySkipEscape(renderToString(head));
     let pageView;
     if (!pageContext.Page) {

package/dist/types/Config.d.ts

@@ -52,6 +52,16 @@ declare global {
              *
              */
             stream?: boolean;
+            /**
+             * Whether to use `<React.StrictMode>`, see https://react.dev/reference/react/StrictMode
+             *
+             * @default true
+             */
+            reactStrictMode?: boolean;
+            /**
+             * Client-side hook called before the page is rendered.
+             */
+            onBeforeRenderClient?: (pageContext: PageContextClient) => void;
             /**
              * Client-side hook called after the page is rendered.
              */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-react",
-  "version": "0.4.8",
+  "version": "0.4.9",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -15,10 +15,10 @@
   },
   "scripts": {
     "dev": "tsc --watch",
-    "build": "rm -rf dist/ && tsc",
-    "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"
+    "build": "rimraf dist/ && tsc",
+    "release": "release-me patch",
+    "release:minor": "release-me minor",
+    "release:commit": "release-me commit"
   },
   "peerDependencies": {
     "react": "18.x.x",
@@ -28,12 +28,13 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.6.4",
-    "@brillout/release-me": "^0.2.1",
+    "@brillout/release-me": "^0.3.4",
     "@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",
+    "rimraf": "^5.0.5",
     "typescript": "^5.3.3",
     "vike": "^0.4.168"
   },