vike-react 0.4.17 → 0.4.18-commit-5c88c7b

package/dist/+config.d.ts

@@ -5,6 +5,7 @@ declare const _default: {
     require: {
         vike: string;
     };
+    Loading: "import:vike-react/components/Loading:default";
     onRenderHtml: "import:vike-react/renderer/onRenderHtml:onRenderHtml";
     onRenderClient: "import:vike-react/renderer/onRenderClient:onRenderClient";
     passToClient: string[];
@@ -90,6 +91,12 @@ declare const _default: {
                 server: true;
             };
         };
+        Loading: {
+            env: {
+                server: true;
+                client: true;
+            };
+        };
     };
 };
 export default _default;

package/dist/+config.js

@@ -7,6 +7,7 @@ export default {
     require: {
         vike: '>=0.4.178'
     },
+    Loading: 'import:vike-react/components/Loading:default',
     // https://vike.dev/onRenderHtml
     onRenderHtml: 'import:vike-react/renderer/onRenderHtml:onRenderHtml',
     // https://vike.dev/onRenderClient
@@ -66,6 +67,9 @@ export default {
         },
         reactStrictMode: {
             env: { client: true, server: true }
+        },
+        Loading: {
+            env: { server: true, client: true }
         }
     }
 };

package/dist/components/Loading.d.ts

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

package/dist/components/Loading.js

@@ -0,0 +1,16 @@
+import React from 'react';
+export default {
+    component: LoadingComponent
+};
+function LoadingComponent() {
+    return (React.createElement("div", { style: {
+            width: '100%',
+            height: '100%',
+            maxHeight: '100%',
+            background: 'linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%)',
+            borderRadius: '5px',
+            backgroundSize: '200% 100%',
+            animation: '1.3s vike-react-shine linear infinite',
+            aspectRatio: '2.5/1'
+        } }));
+}

package/dist/renderer/getPageElement.js

@@ -1,16 +1,24 @@
 export { getPageElement };
-import React from 'react';
+import React, { Suspense } from 'react';
 import { PageContextProvider } from '../hooks/usePageContext.js';
 function getPageElement(pageContext) {
-    const { Page } = pageContext;
+    const { Page, config: { Loading } } = pageContext;
     let page = Page ? React.createElement(Page, null) : null;
+    // Wrapping
+    const addSuspense = (el) => {
+        if (!Loading?.layout)
+            return el;
+        return React.createElement(Suspense, { fallback: React.createElement(Loading.layout, null) }, page);
+    };
+    page = addSuspense(page);
     [
         // Inner wrapping
         ...(pageContext.config.Layout || []),
         // Outer wrapping
         ...(pageContext.config.Wrapper || [])
-    ].forEach((Wrapper) => {
-        page = React.createElement(Wrapper, null, page);
+    ].forEach((Wrap) => {
+        page = React.createElement(Wrap, null, page);
+        page = addSuspense(page);
     });
     page = React.createElement(PageContextProvider, { pageContext: pageContext }, page);
     if (pageContext.config.reactStrictMode !== false) {

package/dist/renderer/onRenderClient.d.ts

@@ -1,3 +1,4 @@
 export { onRenderClient };
 import type { OnRenderClientSync } from 'vike/types';
+import './styles.css';
 declare const onRenderClient: OnRenderClientSync;

package/dist/renderer/onRenderClient.js

@@ -3,23 +3,23 @@ export { onRenderClient };
 import ReactDOM from 'react-dom/client';
 import { getHeadSetting } from './getHeadSetting.js';
 import { getPageElement } from './getPageElement.js';
+import './styles.css';
 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);
+    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
     //  - 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('root');
-    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
+    if (pageContext.isHydration &&
+        // Whether the page was [Server-Side Rendered](https://vike.dev/ssr).
+        container.innerHTML !== '') {
+        // First render while using SSR, i.e. [hydration](https://vike.dev/hydration)
         root = ReactDOM.hydrateRoot(container, page, {
             // @ts-expect-error
             onUncaughtError
@@ -27,34 +27,39 @@ const onRenderClient = (pageContext) => {
     }
     else {
         if (!root) {
-            // First render (not hydration)
+            // First render without SSR
             root = ReactDOM.createRoot(container, {
                 // @ts-expect-error
                 onUncaughtError
             });
         }
-        else {
-            // Client-side navigation
-            const title = getHeadSetting('title', pageContext) || '';
-            const lang = getHeadSetting('lang', pageContext) || 'en';
-            const favicon = getHeadSetting('favicon', pageContext);
-            // We skip if the value is undefined because we shouldn't remove values set in HTML (by the Head setting).
-            //  - This also means that previous values will leak: upon client-side navigation, the title set by the previous page won't be removed if the next page doesn't override it. But that's okay because usually pages always have a favicon and title, which means that previous values are always overriden. Also, as a workaround, the user can set the value to `null` to ensure that previous values are overriden.
-            if (title !== undefined)
-                document.title = title;
-            if (lang !== undefined)
-                document.documentElement.lang = lang;
-            if (favicon !== undefined)
-                setFavicon(favicon);
-        }
         root.render(page);
     }
-    pageContext.page = page;
     pageContext.root = root;
-    // Use case:
-    // - Testing tool https://github.com/vikejs/vike-react/issues/95
+    if (!pageContext.isHydration) {
+        // E.g. document.title
+        updateDocument(pageContext);
+    }
+    // Use cases:
+    // - User-land document settings (e.g. user-land implementation of `config.favicon`)
+    // - Testing tools https://github.com/vikejs/vike-react/issues/95
     pageContext.config.onAfterRenderClient?.(pageContext);
 };
+function updateDocument(pageContext) {
+    const title = getHeadSetting('title', pageContext);
+    const lang = getHeadSetting('lang', pageContext);
+    const favicon = getHeadSetting('favicon', pageContext);
+    // - We skip if `undefined` as we shouldn't remove values set by the Head setting.
+    // - Setting a default prevents the previous value to be leaked: upon client-side navigation, the value set by the previous page won't be removed if the next page doesn't override it.
+    //   - Most of the time, the user sets a default himself (i.e. a value defined at /pages/+config.js)
+    if (title !== undefined)
+        document.title = title || '';
+    if (lang !== undefined)
+        document.documentElement.lang = lang || 'en';
+    if (favicon !== undefined)
+        setFavicon(favicon);
+}
+// TODO/next-major-release: remove config.favicon and, instead, add docs showcasing how to implement a favicon setting on the user-land.
 // https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically/260876#260876
 function setFavicon(faviconUrl) {
     let link = document.querySelector("link[rel~='icon']");

package/dist/renderer/onRenderHtml.js

@@ -10,53 +10,62 @@ import { getPageElement } from './getPageElement.js';
 checkVikeVersion();
 addEcosystemStamp();
 const onRenderHtml = async (pageContext) => {
-    const title = getHeadSetting('title', pageContext);
-    const favicon = getHeadSetting('favicon', pageContext);
-    const lang = getHeadSetting('lang', pageContext) || 'en';
-    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));
-    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;
+    const pageHtml = await getPageHtml(pageContext);
+    const { headHtml, lang } = getHeadHtml(pageContext);
+    return escapeInject `<!DOCTYPE html>
+    <html lang='${lang}'>
+      <head>${headHtml}</head>
+      <body>
+        <div id="root">${pageHtml}</div>
+      </body>
+    </html>`;
+};
+async function getPageHtml(pageContext) {
+    let pageHtml;
     if (!pageContext.Page) {
-        pageView = '';
+        pageHtml = '';
     }
     else {
         const page = getPageElement(pageContext);
         const { stream, streamIsRequired } = pageContext.config;
         if (!stream && !streamIsRequired) {
-            pageView = dangerouslySkipEscape(renderToString(page));
+            pageHtml = dangerouslySkipEscape(renderToString(page));
         }
         else {
             const disable = stream === false ? true : undefined;
-            pageView = await renderToStream(page, {
+            pageHtml = await renderToStream(page, {
                 webStream: typeof stream === 'string' ? stream === 'web' : undefined,
                 userAgent: pageContext.headers?.['user-agent'] ||
-                    // Deprecated way of acccessing User Agent header. Eventually remove it.
+                    // TODO/eventually: remove old way of acccessing the User Agent header.
+                    // @ts-ignore
                     pageContext.userAgent,
                 disable
             });
         }
     }
-    const documentHtml = escapeInject `<!DOCTYPE html>
-    <html lang='${lang}'>
-      <head>
-        <meta charset="UTF-8" />
-        ${titleTag}
-        ${headHtml}
-        ${faviconTag}
-      </head>
-      <body>
-        <div id="root">${pageView}</div>
-      </body>
-    </html>`;
-    return documentHtml;
-};
+    return pageHtml;
+}
+function getHeadHtml(pageContext) {
+    const title = getHeadSetting('title', pageContext);
+    const favicon = getHeadSetting('favicon', pageContext);
+    const lang = getHeadSetting('lang', pageContext) || 'en';
+    const titleTags = !title ? '' : escapeInject `<title>${title}</title><meta property="og:title" content="${title}" />`;
+    const faviconTag = !favicon ? '' : escapeInject `<link rel="icon" href="${favicon}" />`;
+    const Head = pageContext.config.Head || (() => React.createElement(React.Fragment, null));
+    let headElement = (React.createElement(PageContextProvider, { pageContext: pageContext },
+        React.createElement(Head, null)));
+    if (pageContext.config.reactStrictMode !== false) {
+        headElement = React.createElement(React.StrictMode, null, headElement);
+    }
+    const headElementHtml = dangerouslySkipEscape(renderToString(headElement));
+    const headHtml = escapeInject `
+    <meta charset="UTF-8" />
+    ${titleTags}
+    ${headElementHtml}
+    ${faviconTag}
+  `;
+    return { headHtml, lang };
+}
 // We don't need this anymore starting from vike@0.4.173 which added the `require` setting.
 // TODO/eventually: remove this once <=0.4.172 versions become rare.
 function checkVikeVersion() {

package/dist/renderer/ssrEffect.js

@@ -2,18 +2,21 @@ export { ssrEffect };
 function ssrEffect({ configDefinedAt, configValue }) {
     if (typeof configValue !== 'boolean')
         throw new Error(`${configDefinedAt} should be a boolean`);
+    const env = {
+        // Always load on the client-side.
+        client: true,
+        // When the SSR flag is false, we want to render the page only on the client-side.
+        // We achieve this by loading `Page` only on the client-side: when onRenderHtml()
+        // gets a `Page` value that is undefined it skip server-side rendering.
+        server: configValue !== false
+    };
     return {
         meta: {
-            Page: {
-                env: {
-                    // Always load `Page` on the client-side.
-                    client: true,
-                    // When the SSR flag is false, we want to render the page only on the client-side.
-                    // We achieve this by loading `Page` only on the client-side: when onRenderHtml()
-                    // gets a `Page` value that is undefined it skip server-side rendering.
-                    server: configValue !== false
-                }
-            }
+            Page: { env },
+            /* We don't do this to enable wraping <Head> with <Wrapper>
+            Wrapper: { env }, */
+            Layout: { env },
+            Loading: { env }
         }
     };
 }

package/dist/renderer/styles.css

@@ -0,0 +1,6 @@
+/* For components/Loading.tsx */
+@keyframes vike-react-shine {
+  to {
+    background-position-x: -200%;
+  }
+}

package/dist/types/Config.d.ts

@@ -1,4 +1,4 @@
-import type { ImportString, PageContextClient } from 'vike/types';
+import type { ImportString, PageContextClient, PageContext } from 'vike/types';
 declare global {
     namespace Vike {
         interface Config {
@@ -20,16 +20,26 @@ declare global {
              * https://vike.dev/Wrapper
              */
             Wrapper?: Wrapper | ImportString;
-            /** <title>${title}</title> */
-            title?: string;
-            /** <link rel="icon" href="${favicon}" /> */
-            favicon?: string;
-            /** <html lang="${lang}">
-             *
-             *  @default 'en'
-             *
+            /**
+             * ```js
+             * <title>${title}</title>
+             * <meta property="og:title" content="${title}" />
+             * ```
+             */
+            title?: PlainOrGetter<string>;
+            /**
+             * ```js
+             * <link rel="icon" href="${favicon}" />
+             * ```
+             */
+            favicon?: PlainOrGetter<string>;
+            /**
+             * ```js
+             * <html lang="${lang}">
+             * ```
+             * @default 'en'
              */
-            lang?: string;
+            lang?: PlainOrGetter<string>;
             /**
              * If `true`, the page is rendered twice: on the server-side (to HTML) and on the client-side (hydration).
              *
@@ -82,6 +92,7 @@ declare global {
              * https://vike.dev/onAfterRenderClient
              */
             onAfterRenderClient?: (pageContext: PageContextClient) => void;
+            Loading?: Loading | ImportString;
         }
         interface ConfigResolved {
             Wrapper?: Wrapper[];
@@ -89,8 +100,13 @@ declare global {
         }
     }
 }
+type PlainOrGetter<T> = T | ((pageContext: PageContext) => T);
 type Wrapper = (props: {
     children: React.ReactNode;
 }) => React.ReactNode;
 type Layout = Wrapper;
+type Loading = {
+    component?: () => React.ReactNode;
+    layout?: () => React.ReactNode;
+};
 export {};

package/dist/types/PageContext.d.ts

@@ -6,8 +6,6 @@ declare global {
         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 */

package/dist/utils/assert.d.ts

@@ -0,0 +1 @@
+export declare function assert(condition: unknown): asserts condition;

package/dist/utils/assert.js

@@ -0,0 +1,5 @@
+export function assert(condition) {
+    if (condition)
+        return;
+    throw new Error('You stumbled upon a vike-react bug, reach out on GitHub.');
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-react",
-  "version": "0.4.17",
+  "version": "0.4.18-commit-5c88c7b",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -12,11 +12,13 @@
     ".": "./dist/index.js",
     "./config": "./dist/+config.js",
     "./renderer/onRenderHtml": "./dist/renderer/onRenderHtml.js",
-    "./renderer/onRenderClient": "./dist/renderer/onRenderClient.js"
+    "./renderer/onRenderClient": "./dist/renderer/onRenderClient.js",
+    "./components/Loading": "./dist/components/Loading.js"
   },
   "scripts": {
     "dev": "tsc --watch",
-    "build": "rimraf dist/ && tsc",
+    "build": "rimraf dist/ && tsc && pnpm run build:css",
+    "build:css": "cp src/renderer/styles.css dist/renderer/styles.css",
     "release": "release-me patch",
     "release:minor": "release-me minor",
     "release:commit": "release-me commit"
@@ -36,11 +38,11 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
-    "typescript": "^5.3.3",
+    "typescript": "^5.5.3",
     "vike": "^0.4.178"
   },
   "dependencies": {
-    "react-streaming": "^0.3.41"
+    "react-streaming": "^0.3.42"
   },
   "typesVersions": {
     "*": {