vike-react 0.5.6 → 0.5.8

package/README.md

@@ -1,2 +1 @@
-Docs: [vike.dev/vike-react](https://vike.dev/vike-react)  
-Source code: [GitHub > vikejs/vike-react](https://github.com/vikejs/vike-react)
+See [Vike Docs > vike-react](https://vike.dev/vike-react).

package/dist/+config.d.ts

@@ -1,5 +1,6 @@
+export { config as default };
 import { ssrEffect } from './integration/ssrEffect.js';
-declare const _default: {
+declare const config: {
     name: string;
     require: {
         vike: string;
@@ -101,6 +102,12 @@ declare const _default: {
                 server: true;
             };
         };
+        onBeforeRenderHtml: {
+            env: {
+                server: true;
+            };
+            cumulative: true;
+        };
         onAfterRenderHtml: {
             env: {
                 server: true;
@@ -140,6 +147,5 @@ declare const _default: {
         };
     };
 };
-export default _default;
 import './types/Config.js';
 import './types/PageContext.js';

package/dist/+config.js

@@ -1,6 +1,7 @@
+export { config as default };
 import { ssrEffect } from './integration/ssrEffect.js';
 import { isNotFalse } from './utils/isNotFalse.js';
-export default {
+const config = {
     name: 'vike-react',
     require: {
         vike: '>=0.4.182',
@@ -77,6 +78,10 @@ export default {
         streamIsRequired: {
             env: { server: true },
         },
+        onBeforeRenderHtml: {
+            env: { server: true },
+            cumulative: true,
+        },
         onAfterRenderHtml: {
             env: { server: true },
             cumulative: true,

package/dist/components/Loading.d.ts

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

package/dist/components/Loading.js

@@ -1,7 +1,7 @@
-import React from 'react';
 export default {
     component: LoadingComponent,
 };
+import React from 'react';
 function LoadingComponent() {
     return (React.createElement("div", { style: {
             width: '100%',

package/dist/integration/getPageElement.d.ts

@@ -1,3 +1,6 @@
 export { getPageElement };
 import type { PageContext } from 'vike/types';
-declare function getPageElement(pageContext: PageContext): JSX.Element;
+declare function getPageElement(pageContext: PageContext): {
+    page: JSX.Element;
+    renderPromise: Promise<void>;
+};

package/dist/integration/getPageElement.js

@@ -1,5 +1,5 @@
 export { getPageElement };
-import React, { Suspense } from 'react';
+import React, { Suspense, useEffect } from 'react';
 import { PageContextProvider } from '../hooks/usePageContext.js';
 function getPageElement(pageContext) {
     const { Page, config: { Loading }, } = pageContext;
@@ -21,8 +21,15 @@ function getPageElement(pageContext) {
         page = addSuspense(page);
     });
     page = React.createElement(PageContextProvider, { pageContext: pageContext }, page);
+    let renderPromiseResolve;
+    let renderPromise = new Promise((r) => (renderPromiseResolve = r));
+    page = React.createElement(RenderPromiseProvider, { renderPromiseResolve: renderPromiseResolve }, page);
     if (pageContext.config.reactStrictMode !== false) {
         page = React.createElement(React.StrictMode, null, page);
     }
-    return page;
+    return { page, renderPromise };
+}
+function RenderPromiseProvider({ children, renderPromiseResolve, }) {
+    useEffect(renderPromiseResolve);
+    return children;
 }

package/dist/integration/onRenderClient.js

@@ -12,7 +12,7 @@ const onRenderClient = async (pageContext) => {
     // Use case:
     // - Store hydration https://github.com/vikejs/vike-react/issues/110
     await callCumulativeHooks(pageContext.config.onBeforeRenderClient, pageContext);
-    const page = getPageElement(pageContext);
+    const { page, renderPromise } = getPageElement(pageContext);
     pageContext.page = page;
     // 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
@@ -39,6 +39,7 @@ const onRenderClient = async (pageContext) => {
         root.render(page);
     }
     pageContext.root = root;
+    await renderPromise;
     if (!pageContext.isHydration) {
         pageContext._headAlreadySet = true;
         applyHead(pageContext);

package/dist/integration/onRenderHtml.js

@@ -32,27 +32,26 @@ const onRenderHtml = async (pageContext) => {
     </html>`;
 };
 async function getPageHtml(pageContext) {
-    let pageHtml;
-    if (!pageContext.Page) {
-        pageHtml = '';
-    }
-    else {
-        const page = getPageElement(pageContext);
+    if (pageContext.Page)
+        pageContext.page = getPageElement(pageContext).page;
+    // https://github.com/vikejs/vike-react/issues/87#issuecomment-2488742744
+    await callCumulativeHooks(pageContext.config.onBeforeRenderHtml, pageContext);
+    let pageHtml = '';
+    if (pageContext.page) {
         const { stream, streamIsRequired } = pageContext.config;
         if (!stream && !streamIsRequired) {
-            const pageHtmlString = renderToString(page);
+            const pageHtmlString = renderToString(pageContext.page);
             pageContext.pageHtmlString = pageHtmlString;
             pageHtml = dangerouslySkipEscape(pageHtmlString);
         }
         else {
-            const disable = stream === false ? true : undefined;
-            const pageHtmlStream = await renderToStream(page, {
+            const pageHtmlStream = await renderToStream(pageContext.page, {
                 webStream: typeof stream === 'string' ? stream === 'web' : undefined,
                 userAgent: pageContext.headers?.['user-agent'] ||
                     // TODO/eventually: remove old way of acccessing the User Agent header.
                     // @ts-ignore
                     pageContext.userAgent,
-                disable,
+                disable: stream === false ? true : undefined,
             });
             pageContext.pageHtmlStream = pageHtmlStream;
             pageHtml = pageHtmlStream;

package/dist/types/Config.d.ts

@@ -165,7 +165,13 @@ declare global {
              */
             reactStrictMode?: boolean;
             /**
-             * Server-side hook called right after rendering the page's root React component to HTML.
+             * Hook called right before rendering the page's root React component to HTML.
+             *
+             * https://vike.dev/onBeforeRenderHtml
+             */
+            onBeforeRenderHtml?: (pageContext: PageContextServer) => void;
+            /**
+             * Hook called right after rendering the page's root React component to HTML.
              *
              * https://vike.dev/onAfterRenderHtml
              */
@@ -197,6 +203,7 @@ declare global {
             bodyHtmlEnd?: BodyHtmlBoundary[];
             bodyAttributes?: TagAttributes[];
             htmlAttributes?: TagAttributes[];
+            onBeforeRenderHtml?: Function[];
             onAfterRenderHtml?: Function[];
             onBeforeRenderClient?: Function[];
             onAfterRenderClient?: Function[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-react",
-  "version": "0.5.6",
+  "version": "0.5.8",
   "repository": "https://github.com/vikejs/vike-react",
   "type": "module",
   "exports": {
@@ -44,7 +44,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.6.4",
-    "@brillout/release-me": "^0.3.8",
+    "@brillout/release-me": "^0.4.2",
     "@types/node": "^20.11.17",
     "@types/react": "^18.2.55",
     "@types/react-dom": "^18.2.19",
@@ -53,7 +53,7 @@
     "react-streaming": "^0.3.43",
     "rimraf": "^5.0.5",
     "typescript": "^5.5.4",
-    "vike": "^0.4.191",
+    "vike": "^0.4.203",
     "vite": "^5.4.0"
   },
   "typesVersions": {