vike-react 0.5.0 → 0.5.1

package/dist/+config.d.ts

@@ -16,6 +16,7 @@ declare const _default: {
             env: {
                 server: true;
             };
+            cumulative: true;
         };
         Layout: {
             env: {
@@ -91,11 +92,13 @@ declare const _default: {
             env: {
                 client: true;
             };
+            cumulative: true;
         };
         onAfterRenderClient: {
             env: {
                 client: true;
             };
+            cumulative: true;
         };
         Wrapper: {
             cumulative: true;
@@ -104,16 +107,6 @@ declare const _default: {
                 server: true;
             };
         };
-        name: {
-            env: {
-                config: true;
-            };
-        };
-        require: {
-            env: {
-                config: true;
-            };
-        };
         reactStrictMode: {
             env: {
                 client: true;

package/dist/+config.js

@@ -23,7 +23,8 @@ export default {
     // https://vike.dev/meta
     meta: {
         Head: {
-            env: { server: true }
+            env: { server: true },
+            cumulative: true
         },
         Layout: {
             env: { server: true, client: true },
@@ -69,23 +70,17 @@ export default {
             env: { server: true }
         },
         onBeforeRenderClient: {
-            env: { client: true }
+            env: { client: true },
+            cumulative: true
         },
         onAfterRenderClient: {
-            env: { client: true }
+            env: { client: true },
+            cumulative: true
         },
         Wrapper: {
             cumulative: true,
             env: { client: true, server: true }
         },
-        // 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). TODO/eventually: remove this once <=0.4.172 versions become rare (also because we use the `require` setting starting from `0.4.173`).
-        name: {
-            env: { config: true }
-        },
-        // Vike already defines the setting 'require', but we redundantly define it here for older Vike versions (otherwise older Vike versions will complain that 'require` is an unknown config). TODO/eventually: remove this once <=0.4.172 versions become rare (also because we use the `require` setting starting from `0.4.173`).
-        require: {
-            env: { config: true }
-        },
         reactStrictMode: {
             env: { client: true, server: true }
         },

package/dist/hooks/useConfig/useConfig-client.d.ts

@@ -1,8 +1,8 @@
 export { useConfig };
-import type { ConfigSetter } from './shared.js';
+import type { ConfigFromHook } from '../../types/Config.js';
 /**
  * Set configurations inside React components and Vike hooks.
  *
  * https://vike.dev/useConfig
  */
-declare function useConfig(): ConfigSetter;
+declare function useConfig(): (config: ConfigFromHook) => void;

package/dist/hooks/useConfig/useConfig-server.d.ts

@@ -1,8 +1,8 @@
 export { useConfig };
-import type { ConfigSetter } from './shared.js';
+import type { ConfigFromHook } from '../../types/Config.js';
 /**
  * Set configurations inside React components and Vike hooks.
  *
  * https://vike.dev/useConfig
  */
-declare function useConfig(): ConfigSetter;
+declare function useConfig(): (config: ConfigFromHook) => void;

package/dist/renderer/getHeadSetting.d.ts

@@ -1,4 +1,5 @@
 export { getHeadSetting };
+import type { PageContext } from 'vike/types';
 import type { PageContextInternal } from '../types/PageContext.js';
 type HeadSetting = 'favicon' | 'lang' | 'title' | 'description' | 'image';
-declare function getHeadSetting(headSetting: HeadSetting, pageContext: PageContextInternal): undefined | null | string;
+declare function getHeadSetting(headSetting: HeadSetting, pageContext: PageContext & PageContextInternal): undefined | null | string;

package/dist/renderer/onRenderClient.d.ts

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

package/dist/renderer/onRenderClient.js

@@ -4,11 +4,12 @@ import ReactDOM from 'react-dom/client';
 import { getHeadSetting } from './getHeadSetting.js';
 import { getPageElement } from './getPageElement.js';
 import './styles.css';
+import { callCumulativeHooks } from '../utils/callCumulativeHooks.js';
 let root;
-const onRenderClient = (pageContext) => {
+const onRenderClient = async (pageContext) => {
     // Use case:
     // - Store hydration https://github.com/vikejs/vike-react/issues/110
-    pageContext.config.onBeforeRenderClient?.(pageContext);
+    await callCumulativeHooks(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.
@@ -41,18 +42,18 @@ const onRenderClient = (pageContext) => {
         updateDocument(pageContext);
     }
     // Use cases:
-    // - Custom user settings: https://vike.dev/head#custom-settings
+    // - Custom user settings: https://vike.dev/head-tags#custom-settings
     // - Testing tools: https://github.com/vikejs/vike-react/issues/95
-    pageContext.config.onAfterRenderClient?.(pageContext);
+    await callCumulativeHooks(pageContext.config.onAfterRenderClient, pageContext);
 };
 function updateDocument(pageContext) {
-    ;
     pageContext._headAlreadySet = true;
     const title = getHeadSetting('title', pageContext);
     const lang = getHeadSetting('lang', 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 he doesn't have a default then he can use `null` to opt into Vike's defaults
     if (title !== undefined)
         document.title = title || '';
     if (lang !== undefined)

package/dist/renderer/onRenderHtml.js

@@ -3,13 +3,12 @@ export { onRenderHtml };
 import React from 'react';
 import { renderToString, renderToStaticMarkup } from 'react-dom/server';
 import { renderToStream } from 'react-streaming/server';
-import { dangerouslySkipEscape, escapeInject, version } from 'vike/server';
+import { dangerouslySkipEscape, escapeInject } from 'vike/server';
 import { PageContextProvider } from '../hooks/usePageContext.js';
 import { getHeadSetting } from './getHeadSetting.js';
 import { getPageElement } from './getPageElement.js';
 import { isReactElement } from '../utils/isReactElement.js';
 import { getTagAttributesString } from '../utils/getTagAttributesString.js';
-checkVikeVersion();
 addEcosystemStamp();
 const onRenderHtml = async (pageContext) => {
     const pageHtml = await getPageHtml(pageContext);
@@ -66,9 +65,9 @@ function getHeadHtml(pageContext) {
         ? ''
         : escapeInject `<meta property="og:image" content="${image}"><meta name="twitter:card" content="summary_large_image">`;
     const headElementsHtml = dangerouslySkipEscape([
-        // <Head> set by +Head
-        pageContext.config.Head,
-        // <Head> set by useConfig()
+        // Added by +Head
+        ...(pageContext.config.Head ?? []),
+        // Added by useConfig()
         ...(pageContext._configFromHook?.Head ?? [])
     ]
         .filter((Head) => Head !== null && Head !== undefined)
@@ -79,10 +78,10 @@ function getHeadHtml(pageContext) {
     const viewportTag = dangerouslySkipEscape(getViewportTag(pageContext.config.viewport));
     const headHtml = escapeInject `
     ${titleTags}
-    ${headElementsHtml}
     ${viewportTag}
-    ${descriptionTags}
+    ${headElementsHtml}
     ${faviconTag}
+    ${descriptionTags}
     ${imageTags}
   `;
     return headHtml;
@@ -128,21 +127,6 @@ function getViewportTag(viewport) {
     }
     return '';
 }
-// 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() {
-    if (version) {
-        const versionParts = version.split('.').map((s) => parseInt(s, 10));
-        if (versionParts[0] > 0)
-            return;
-        if (versionParts[1] > 4)
-            return;
-        if (versionParts[2] >= 173)
-            return;
-    }
-    // We can leave it 0.4.173 until we entirely remove checkVikeVersion() (because starting vike@0.4.173 we use the new `require` setting).
-    throw new Error('Update Vike to 0.4.173 or above');
-}
 // For improving error messages of:
 // - react-streaming https://github.com/brillout/react-streaming/blob/6a43dd20c27fb5d751dca41466b06ee3f4f35462/src/server/useStream.ts#L21
 // - vike https://github.com/vikejs/vike/blob/96c0155380ffebd4976ab076b58e86d8eb2d603a/vike/node/runtime/html/stream/react-streaming.ts#L31

package/dist/types/Config.d.ts

@@ -1,10 +1,14 @@
-import type { ImportString, PageContextClient, PageContext } from 'vike/types';
+import type { ImportString, PageContextClient, PageContext as PageContext_, PageContextServer } from 'vike/types';
 import type { TagAttributes } from '../utils/getTagAttributesString.js';
 import type { Viewport } from '../renderer/onRenderHtml.js';
 declare global {
     namespace Vike {
         interface Config {
-            /** The page's root React component */
+            /**
+             * The page's root React component.
+             *
+             * https://vike.dev/Page
+             */
             Page?: () => React.ReactNode;
             /**
              * Add arbitrary `<head>` tags.
@@ -13,7 +17,7 @@ declare global {
              */
             Head?: Head;
             /**
-             * A component that defines the visual layout of the page common to several pages.
+             * A component that defines the visual layout common to several pages.
              *
              * Technically: the `<Layout>` component wraps the root component `<Page>`.
              *
@@ -39,7 +43,7 @@ declare global {
              *
              * https://vike.dev/title
              */
-            title?: PlainOrGetter<string>;
+            title?: string | ((pageContext: PageContext_) => string);
             /**
              * Set the page's description.
              *
@@ -53,7 +57,7 @@ declare global {
              *
              * https://vike.dev/description
              */
-            description?: PlainOrGetter<string>;
+            description?: string | ((pageContext: PageContextServer) => string);
             /**
              * Set the page's preview image upon URL sharing.
              *
@@ -67,13 +71,13 @@ declare global {
              *
              * https://vike.dev/image
              */
-            image?: PlainOrGetter<string>;
+            image?: string | ((pageContext: PageContextServer) => string);
             /**
              * Set the page's width shown to the user on mobile/tablet devices.
              *
-             * https://vike.dev/viewport
-             *
              * @default "responsive"
+             *
+             * https://vike.dev/viewport
              */
             viewport?: Viewport;
             /**
@@ -88,7 +92,7 @@ declare global {
              *
              * https://vike.dev/favicon
              */
-            favicon?: PlainOrGetter<string>;
+            favicon?: string | ((pageContext: PageContextServer) => string);
             /**
              * Set the page's language (`<html lang>`).
              *
@@ -96,7 +100,7 @@ declare global {
              *
              * https://vike.dev/lang
              */
-            lang?: PlainOrGetter<string> | null;
+            lang?: string | ((pageContext: PageContext_) => string);
             /**
              * Add tag attributes such as `<html class="dark">`.
              *
@@ -114,10 +118,9 @@ declare global {
              *
              * If `false`, the page is rendered only once in the browser.
              *
-             * https://vike.dev/ssr
-             *
              * @default true
              *
+             * https://vike.dev/ssr
              */
             ssr?: boolean;
             /**
@@ -132,7 +135,6 @@ declare global {
              * @default false
              *
              * https://vike.dev/stream
-             *
              */
             stream?: boolean | 'node' | 'web';
             /**
@@ -144,9 +146,9 @@ declare global {
             /**
              * Whether to use `<StrictMode>`.
              *
-             * https://vike.dev/reactStrictMode
-             *
              * @default true
+             *
+             * https://vike.dev/reactStrictMode
              */
             reactStrictMode?: boolean;
             /**
@@ -161,17 +163,24 @@ declare global {
              * https://vike.dev/onAfterRenderClient
              */
             onAfterRenderClient?: (pageContext: PageContextClient) => void;
+            /**
+             * Define loading animations.
+             *
+             * https://vike.dev/Loading
+             */
             Loading?: Loading | ImportString;
         }
         interface ConfigResolved {
             Wrapper?: Wrapper[];
             Layout?: Layout[];
+            Head?: Head[];
             bodyAttributes?: TagAttributes[];
             htmlAttributes?: TagAttributes[];
+            onBeforeRenderClient?: Function[];
+            onAfterRenderClient?: Function[];
         }
     }
 }
-type PlainOrGetter<T> = T | ((pageContext: PageContext) => T);
 export type Head = React.ReactNode | (() => React.ReactNode);
 type Wrapper = (props: {
     children: React.ReactNode;

package/dist/types/PageContext.d.ts

@@ -2,7 +2,6 @@ import type React from 'react';
 import type { JSX } from 'react';
 import type ReactDOM from 'react-dom/client';
 import type { ConfigFromHookResolved } from './Config.js';
-import type { PageContext } from 'vike/types';
 declare global {
     namespace Vike {
         interface PageContext {
@@ -15,7 +14,7 @@ declare global {
         }
     }
 }
-export type PageContextInternal = PageContext & {
+export type PageContextInternal = {
     _configFromHook?: ConfigFromHookResolved;
     _headAlreadySet?: true;
 };

package/dist/utils/callCumulativeHooks.d.ts

@@ -0,0 +1 @@
+export declare function callCumulativeHooks(values: undefined | unknown[], pageContext: unknown): Promise<unknown[]>;

package/dist/utils/callCumulativeHooks.js

@@ -0,0 +1,16 @@
+export async function callCumulativeHooks(values, pageContext) {
+    if (!values)
+        return [];
+    const valuesPromises = values.map((val) => {
+        if (typeof val === 'function') {
+            // Hook
+            return val(pageContext);
+        }
+        else {
+            // Plain value
+            return val;
+        }
+    });
+    const valuesResolved = await Promise.all(valuesPromises);
+    return valuesResolved;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-react",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/hooks/useConfig/shared.d.ts

@@ -1,3 +0,0 @@
-export type { ConfigSetter };
-import type { ConfigFromHook } from '../../types/Config.js';
-type ConfigSetter = (config: ConfigFromHook) => void;

package/dist/hooks/useConfig/shared.js

@@ -1 +0,0 @@
-export {};