vike-react 0.3.1 → 0.3.3

package/dist/renderer/+config.d.ts

@@ -1,7 +1,7 @@
 import type { ConfigEffect } from 'vike/types';
 declare const _default: {
-    onRenderHtml: "import:vike-react/renderer/onRenderHtml";
-    onRenderClient: "import:vike-react/renderer/onRenderClient";
+    onRenderHtml: "import:vike-react/renderer/onRenderHtml:onRenderHtml";
+    onRenderClient: "import:vike-react/renderer/onRenderClient:onRenderClient";
     passToClient: string[];
     clientRouting: true;
     hydrationCanBeAborted: true;

package/dist/renderer/+config.js

@@ -19,8 +19,14 @@ const toggleSsrRelatedConfig = ({ configDefinedAt, configValue }) => {
     };
 };
 export default {
-    onRenderHtml: 'import:vike-react/renderer/onRenderHtml',
-    onRenderClient: 'import:vike-react/renderer/onRenderClient',
+    onRenderHtml: 'import:vike-react/renderer/onRenderHtml:onRenderHtml',
+    onRenderClient: 'import:vike-react/renderer/onRenderClient:onRenderClient',
+    // A page can define an onBeforeRender() hook to be run on the server, which
+    // can fetch data and return it as additional page context. Typically it will
+    // return the page's root React component's props and additional data that can
+    // be used by the renderers.
+    // It is a cumulative config option, so a web app using vike-react can extend
+    // this list.
     passToClient: ['pageProps', 'title'],
     clientRouting: true,
     hydrationCanBeAborted: true,

package/dist/renderer/getPageElement.js

@@ -3,6 +3,9 @@ import React from 'react';
 import { PageContextProvider } from './PageContextProvider.js';
 function getPageElement(pageContext) {
     var _a;
+    if (!pageContext.Page) {
+        return React.createElement(React.Fragment, null);
+    }
     const Layout = (_a = pageContext.config.Layout) !== null && _a !== void 0 ? _a : PassThrough;
     const Wrapper = 
     /* Should we implement this? Enabling users to defined a wrapper that is used across all layouts.
@@ -13,8 +16,7 @@ function getPageElement(pageContext) {
     const page = (React.createElement(React.StrictMode, null,
         React.createElement(PageContextProvider, { pageContext: pageContext },
             React.createElement(Wrapper, null,
-                React.createElement(Layout, null,
-                    React.createElement(Page, { ...pageProps }))))));
+                React.createElement(Layout, null, Page ? React.createElement(Page, { ...pageProps }) : null)))));
     return page;
 }
 function PassThrough({ children }) {

package/dist/renderer/getTitle.d.ts

@@ -1,6 +1,7 @@
 export { getTitle };
-import type { ConfigEntries } from 'vike/types';
-declare function getTitle(pageContext: {
-    title?: unknown;
-    configEntries: ConfigEntries;
-}): null | string;
+import type { PageContext } from 'vike/types';
+/**
+ * Get the page's title if defined, either from the additional data fetched by
+ * the page's onBeforeRender() hook or from the config.
+ */
+declare function getTitle(pageContext: PageContext): null | string;

package/dist/renderer/getTitle.js

@@ -1,33 +1,32 @@
 export { getTitle };
 import { isCallable } from './utils/isCallable.js';
+/**
+ * Get the page's title if defined, either from the additional data fetched by
+ * the page's onBeforeRender() hook or from the config.
+ */
 function getTitle(pageContext) {
     var _a;
-    if (pageContext.title) {
-        if (typeof pageContext.title !== 'string') {
-            throw new Error('pageContext.title should be a string');
-        }
+    if (pageContext.title !== undefined) {
         return pageContext.title;
     }
-    else {
-        const titleConfig = (_a = pageContext.configEntries.title) === null || _a === void 0 ? void 0 : _a[0];
-        if (!titleConfig) {
-            return null;
-        }
-        const title = titleConfig.configValue;
-        if (typeof title === 'string') {
-            return title;
-        }
-        if (!title) {
-            return null;
-        }
-        const { configDefinedAt } = titleConfig;
-        if (isCallable(title)) {
-            const val = title(pageContext);
-            if (typeof val !== 'string') {
-                throw new Error(configDefinedAt + ' should return a string');
-            }
-            return val;
+    const titleConfig = (_a = pageContext.configEntries.title) === null || _a === void 0 ? void 0 : _a[0];
+    if (!titleConfig) {
+        return null;
+    }
+    const title = titleConfig.configValue;
+    if (typeof title === 'string') {
+        return title;
+    }
+    if (!title) {
+        return null;
+    }
+    const { configDefinedAt } = titleConfig;
+    if (isCallable(title)) {
+        const val = title(pageContext);
+        if (typeof val !== 'string') {
+            throw new Error(configDefinedAt + ' should return a string');
         }
-        throw new Error(configDefinedAt + ' should be a string or a function returning a string');
+        return val;
     }
+    throw new Error(configDefinedAt + ' should be a string or a function returning a string');
 }

package/dist/renderer/onRenderClient.d.ts

@@ -1,3 +1,3 @@
-export default onRenderClient;
-import type { PageContextClient } from 'vike/types';
-declare function onRenderClient(pageContext: PageContextClient): Promise<void>;
+export { onRenderClient };
+import type { OnRenderClientAsync } from 'vike/types';
+declare const onRenderClient: OnRenderClientAsync;

package/dist/renderer/onRenderClient.js

@@ -1,22 +1,30 @@
-export default onRenderClient;
+// https://vike.dev/onRenderClient
+export { onRenderClient };
 import ReactDOM from 'react-dom/client';
 import { getTitle } from './getTitle.js';
 import { getPageElement } from './getPageElement.js';
 let root;
-async function onRenderClient(pageContext) {
+const onRenderClient = async (pageContext) => {
     const page = getPageElement(pageContext);
     const container = document.getElementById('page-view');
     if (container.innerHTML !== '' && pageContext.isHydration) {
+        // Hydration
         root = ReactDOM.hydrateRoot(container, page);
     }
     else {
         if (!root) {
+            // First rendering
             root = ReactDOM.createRoot(container);
         }
+        else {
+            // Client routing
+            // See https://vike.dev/server-routing-vs-client-routing
+            // Get the page's `title` config value, which may be different from the
+            // previous page. It can even be null, in which case we should unset the
+            // document title.
+            const title = getTitle(pageContext);
+            document.title = title || '';
+        }
         root.render(page);
     }
-    const title = getTitle(pageContext);
-    if (title !== null) {
-        document.title = title;
-    }
-}
+};

package/dist/renderer/onRenderHtml.d.ts

@@ -1,5 +1,3 @@
-export default onRenderHtml;
-import type { PageContext } from 'vike/types';
-declare function onRenderHtml(pageContext: PageContext): Promise<{
-    documentHtml: import("vike/dist/esm/node/runtime/html/renderHtml.js").TemplateWrapped;
-}>;
+export { onRenderHtml };
+import type { OnRenderHtmlAsync } from 'vike/types';
+declare const onRenderHtml: OnRenderHtmlAsync;

package/dist/renderer/onRenderHtml.js

@@ -1,46 +1,41 @@
-export default onRenderHtml;
-import { renderToString } from 'react-dom/server';
-import { escapeInject, dangerouslySkipEscape, version } from 'vike/server';
+// https://vike.dev/onRenderHtml
+export { onRenderHtml };
+import { renderToStream } from 'react-streaming/server';
+import { escapeInject, version } from 'vike/server';
 import { getTitle } from './getTitle.js';
 import { getPageElement } from './getPageElement.js';
 import { PageContextProvider } from './PageContextProvider.js';
 import React from 'react';
 checkVikeVersion();
-async function onRenderHtml(pageContext) {
-    let pageHtml = '';
-    if (!!pageContext.Page) {
-        const page = getPageElement(pageContext);
-        pageHtml = renderToString(page);
-    }
+const onRenderHtml = async (pageContext) => {
+    const lang = pageContext.config.lang || 'en';
+    const { favicon } = pageContext.config;
+    const faviconTag = !favicon ? '' : React.createElement("link", { rel: "icon", href: favicon });
     const title = getTitle(pageContext);
-    const titleTag = !title ? '' : escapeInject `<title>${title}</title>`;
+    const titleTag = !title ? '' : React.createElement("title", null, title);
     const { description } = pageContext.config;
-    const descriptionTag = !description ? '' : escapeInject `<meta name="description" content="${description}" />`;
-    const { favicon } = pageContext.config;
-    const faviconTag = !favicon ? '' : escapeInject `<link rel="icon" href="${favicon}" />`;
+    const descriptionTag = !description ? '' : React.createElement("meta", { name: "description", content: description });
     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))));
-    const headHtml = renderToString(head);
-    const lang = pageContext.config.lang || 'en';
+    const page = getPageElement(pageContext);
+    const stream = await renderToStream(React.createElement(React.Fragment, null,
+        React.createElement("head", null,
+            React.createElement("meta", { charSet: "UTF-8" }),
+            faviconTag,
+            titleTag,
+            descriptionTag,
+            head),
+        React.createElement("body", null,
+            React.createElement("div", { id: "page-view" }, page))), { userAgent: pageContext.userAgent });
     const documentHtml = escapeInject `<!DOCTYPE html>
-    <html lang='${lang}'>
-      <head>
-        <meta charset="UTF-8" />
-        ${faviconTag}
-        ${titleTag}
-        ${descriptionTag}
-        ${dangerouslySkipEscape(headHtml)}
-      </head>
-      <body>
-        <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
-      </body>
-    </html>`;
-    return {
-        documentHtml
-    };
-}
+  <html lang='${lang}'>
+    ${stream}
+    <!-- built with https://github.com/vikejs/vike-react -->
+  </html>`;
+    return documentHtml;
+};
 function checkVikeVersion() {
     if (version) {
         const versionParts = version.split('.').map((s) => parseInt(s, 10));

package/dist/renderer/types.d.ts

@@ -4,8 +4,12 @@ type Component = (props: any) => ReactElement;
 declare global {
     namespace Vike {
         interface PageContext {
-            Page: Component;
-            pageProps: Record<string, unknown>;
+            Page?: Component;
+            /** Properties of the page's root React component. */
+            pageProps?: Record<string, unknown>;
+            /** &lt;title>${title}&lt;/title> - has precedence over the config */
+            title?: string;
+            userAgent?: string;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-react",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "type": "module",
   "main": "./dist/renderer/+config.js",
   "types": "./dist/renderer/+config.d.ts",
@@ -23,7 +23,7 @@
     "vite": "^4.3.8"
   },
   "devDependencies": {
-    "@brillout/release-me": "^0.1.7",
+    "@brillout/release-me": "^0.1.9",
     "@types/node": "^18.17.18",
     "@types/react": "^18.2.22",
     "@types/react-dom": "^18.2.7",
@@ -32,6 +32,9 @@
     "typescript": "^5.2.2",
     "vike": "^0.4.147"
   },
+  "dependencies": {
+    "react-streaming": "^0.3.16"
+  },
   "typesVersions": {
     "*": {
       ".": [