vike-react 0.3.0 → 0.3.2

package/README.md

@@ -1,12 +1,11 @@
 <!-- WARNING: keep links absolute in this file so they work on NPM too -->
 
-[<img src="https://avatars.githubusercontent.com/u/86403530?s=200&v=4" align="right" width="64" height="64">](https://vike.dev)
+[<img src="https://vike.dev/vike-readme.svg" align="right" height="90">](https://vike.dev)
 [![npm version](https://img.shields.io/npm/v/vike-react)](https://www.npmjs.com/package/vike-react)
 
 # `vike-react`
 
-React integration for [Vike](https://github.com/vikejs/vike/issues/736) (using the
-[V1 design](https://vike.dev/migration/v1-design)).
+React integration for [Vike](https://vike.dev) (using the [V1 design](https://vike.dev/migration/v1-design)).
 
 > For integrations with Vue and Solid, see the other [`vike-*` packages](https://vike.dev/vike-packages).
 

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

@@ -1,31 +1,47 @@
 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;
     meta: {
         Head: {
-            env: "server-only";
+            env: {
+                server: true;
+            };
         };
         Layout: {
-            env: "server-and-client";
+            env: {
+                server: true;
+                client: true;
+            };
         };
         title: {
-            env: "server-and-client";
+            env: {
+                server: true;
+                client: true;
+            };
         };
         description: {
-            env: "server-only";
+            env: {
+                server: true;
+            };
         };
         favicon: {
-            env: "server-only";
+            env: {
+                server: true;
+            };
         };
         lang: {
-            env: "server-only";
+            env: {
+                server: true;
+            };
         };
         ssr: {
-            env: "config-only";
+            env: {
+                config: true;
+            };
             effect: ConfigEffect;
         };
     };

package/dist/renderer/+config.js

@@ -12,39 +12,45 @@ const toggleSsrRelatedConfig = ({ configDefinedAt, configValue }) => {
             // accessible only in the client's renderer.
             Page: {
                 env: configValue
-                    ? 'server-and-client' // default
-                    : 'client-only'
+                    ? { server: true, client: true } // default
+                    : { client: true }
             }
         }
     };
 };
 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,
     meta: {
         Head: {
-            env: 'server-only'
+            env: { server: true }
         },
         Layout: {
-            env: 'server-and-client'
+            env: { server: true, client: true }
         },
         title: {
-            env: 'server-and-client'
+            env: { server: true, client: true }
         },
         description: {
-            env: 'server-only'
+            env: { server: true }
         },
         favicon: {
-            env: 'server-only'
+            env: { server: true }
         },
         lang: {
-            env: 'server-only'
+            env: { server: true }
         },
         ssr: {
-            env: 'config-only',
+            env: { config: true },
             effect: toggleSsrRelatedConfig
         }
     }

package/dist/renderer/PageContextProvider.d.ts

@@ -7,37 +7,4 @@ declare function PageContextProvider({ pageContext, children }: {
     children: React.ReactNode;
 }): React.JSX.Element;
 /** Access the pageContext from any React component */
-declare function usePageContext(): (Partial<{
-    Page: unknown;
-    routeParams: Record<string, string>;
-    config: import("vike/dist/esm/shared/page-configs/Config/PageContextConfig.js").PageContextConfig;
-    configEntries: import("vike/dist/esm/shared/getPageFiles/getExports.js").ConfigEntries;
-    exports: Record<string, unknown>;
-    exportsAll: import("vike/dist/esm/shared/getPageFiles/getExports.js").ExportsAll;
-    urlOriginal: string;
-    is404: boolean | null;
-    isClientSideNavigation: boolean;
-    abortReason?: unknown;
-    abortStatusCode?: undefined;
-    errorWhileRendering?: unknown;
-    url: string;
-    pageExports: Record<string, unknown>;
-}> & Pick<{
-    Page: unknown;
-    routeParams: Record<string, string>;
-    config: import("vike/dist/esm/shared/page-configs/Config/PageContextConfig.js").PageContextConfig;
-    configEntries: import("vike/dist/esm/shared/getPageFiles/getExports.js").ConfigEntries;
-    exports: Record<string, unknown>;
-    exportsAll: import("vike/dist/esm/shared/getPageFiles/getExports.js").ExportsAll;
-    urlOriginal: string;
-    is404: boolean | null;
-    isClientSideNavigation: boolean;
-    abortReason?: unknown;
-    abortStatusCode?: undefined;
-    errorWhileRendering?: unknown;
-    url: string;
-    pageExports: Record<string, unknown>;
-}, "Page" | "pageExports" | "config" | "configEntries" | "exports" | "exportsAll" | "abortReason"> & {
-    isHydration: boolean;
-    isBackwardNavigation: boolean | null;
-} & import("vike/dist/esm/shared/addUrlComputedProps.js").PageContextUrlComputedPropsClient & Vike.PageContext) | import("vike/dist/esm/shared/types.js").PageContextServer;
+declare function usePageContext(): PageContext;

package/dist/renderer/getPageElement.js

@@ -13,8 +13,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,11 +1,13 @@
-export default onRenderHtml;
+// https://vike.dev/onRenderHtml
+export { onRenderHtml };
 import { renderToString } from 'react-dom/server';
-import { escapeInject, dangerouslySkipEscape } from 'vike/server';
+import { escapeInject, dangerouslySkipEscape, version } from 'vike/server';
 import { getTitle } from './getTitle.js';
 import { getPageElement } from './getPageElement.js';
 import { PageContextProvider } from './PageContextProvider.js';
 import React from 'react';
-async function onRenderHtml(pageContext) {
+checkVikeVersion();
+const onRenderHtml = async (pageContext) => {
     let pageHtml = '';
     if (!!pageContext.Page) {
         const page = getPageElement(pageContext);
@@ -35,8 +37,19 @@ async function onRenderHtml(pageContext) {
       <body>
         <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
       </body>
+      <!-- built with https://github.com/vikejs/vike-react -->
     </html>`;
-    return {
-        documentHtml
-    };
+    return documentHtml;
+};
+function checkVikeVersion() {
+    if (version) {
+        const versionParts = version.split('.').map((s) => parseInt(s, 10));
+        if (versionParts[0] > 0)
+            return;
+        if (versionParts[1] > 4)
+            return;
+        if (versionParts[2] >= 147)
+            return;
+    }
+    throw new Error('Update Vike to its latest version (or vike@0.4.147 and any version above)');
 }

package/dist/renderer/types.d.ts

@@ -4,8 +4,11 @@ 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;
         }
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-react",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "type": "module",
   "main": "./dist/renderer/+config.js",
   "types": "./dist/renderer/+config.d.ts",
@@ -19,18 +19,18 @@
   "peerDependencies": {
     "react": "18.x.x",
     "react-dom": "18.x.x",
-    "vike": "^0.4.142",
+    "vike": "^0.4.147",
     "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",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^5.2.2",
-    "vike": "^0.4.142"
+    "vike": "^0.4.147"
   },
   "typesVersions": {
     "*": {