vike-react 0.5.2 → 0.5.3-commit-acd5466

package/dist/+config.d.ts

@@ -1,6 +1,6 @@
+export { config };
 import { ssrEffect } from './renderer/ssrEffect.js';
-import './types/index.js';
-declare const _default: {
+declare const config: {
     name: string;
     require: {
         vike: string;
@@ -88,6 +88,12 @@ declare const _default: {
                 server: true;
             };
         };
+        onAfterRenderHtml: {
+            env: {
+                server: true;
+            };
+            cumulative: true;
+        };
         onBeforeRenderClient: {
             env: {
                 client: true;
@@ -121,4 +127,5 @@ declare const _default: {
         };
     };
 };
-export default _default;
+import './types/Config.js';
+import './types/PageContext.js';

package/dist/+config.js

@@ -1,8 +1,7 @@
-import { isNotFalse } from './utils/isNotFalse.js';
+export { config };
 import { ssrEffect } from './renderer/ssrEffect.js';
-// This is required to make TypeScript load the global interfaces such as Vike.PageContext so that they're always loaded: we can assume that the user always imports this file over `import vikeReact from 'vike-react/config'`
-import './types/index.js';
-export default {
+import { isNotFalse } from './utils/isNotFalse.js';
+const config = {
     name: 'vike-react',
     require: {
         vike: '>=0.4.182'
@@ -69,6 +68,10 @@ export default {
         streamIsRequired: {
             env: { server: true }
         },
+        onAfterRenderHtml: {
+            env: { server: true },
+            cumulative: true
+        },
         onBeforeRenderClient: {
             env: { client: true },
             cumulative: true
@@ -89,3 +92,6 @@ export default {
         }
     }
 };
+// This is required to make TypeScript load the global interfaces Vike.Config and Vike.PageContext so that they're always loaded: we can assume that the user always imports this file over `import vikeReact from 'vike-react/config'`
+import './types/Config.js';
+import './types/PageContext.js';

package/dist/components/Config/Config-client.d.ts

@@ -1,8 +1,3 @@
 export { Config };
 import type { ConfigFromHook } from '../../types/Config.js';
-/**
- * Set configurations inside React components.
- *
- * https://vike.dev/useConfig
- */
 declare function Config(props: ConfigFromHook): null;

package/dist/components/Config/Config-client.js

@@ -1,11 +1,5 @@
 export { Config };
-// Same as ./Config-server.ts but importing useConfig-client.js
 import { useConfig } from '../../hooks/useConfig/useConfig-client.js';
-/**
- * Set configurations inside React components.
- *
- * https://vike.dev/useConfig
- */
 function Config(props) {
     const config = useConfig();
     config(props);

package/dist/components/Config/Config-server.js

@@ -1,5 +1,4 @@
 export { Config };
-// Same as ./Config-client.ts but importing useConfig-server.js
 import { useConfig } from '../../hooks/useConfig/useConfig-server.js';
 /**
  * Set configurations inside React components.

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

@@ -0,0 +1,2 @@
+export declare const configsCumulative: readonly ["Head", "bodyAttributes", "htmlAttributes"];
+export type ConfigsCumulative = (typeof configsCumulative)[number];

package/dist/hooks/useConfig/configsCumulative.js

@@ -0,0 +1 @@
+export const configsCumulative = ['Head', 'bodyAttributes', 'htmlAttributes'];

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

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

package/dist/hooks/useConfig/useConfig-client.js

@@ -1,24 +1,20 @@
 export { useConfig };
 import { usePageContext } from '../usePageContext.js';
 import { getPageContext } from 'vike/getPageContext';
-/**
- * Set configurations inside React components and Vike hooks.
- *
- * https://vike.dev/useConfig
- */
+import { applyHeadSettings } from '../../renderer/applyHeadSettings.js';
 function useConfig() {
     // Vike hook
     let pageContext = getPageContext();
     if (pageContext)
         return (config) => setPageContextConfigFromHook(config, pageContext);
-    // React component
+    // Component
     pageContext = usePageContext();
     return (config) => {
         if (!('_headAlreadySet' in pageContext)) {
             setPageContextConfigFromHook(config, pageContext);
         }
         else {
-            apply(config);
+            applyHead(config);
         }
     };
 }
@@ -26,8 +22,7 @@ function setPageContextConfigFromHook(config, pageContext) {
     pageContext._configFromHook ?? (pageContext._configFromHook = {});
     Object.assign(pageContext._configFromHook, config);
 }
-function apply(config) {
-    const { title } = config;
-    if (title)
-        window.document.title = title;
+function applyHead(config) {
+    const { title, lang } = config;
+    applyHeadSettings(title, lang);
 }

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

@@ -1,10 +1,8 @@
 export { useConfig };
-export type ConfigFromHookCumulative = (typeof configsCumulative)[number];
 import type { ConfigFromHook } from '../../types/Config.js';
 /**
- * Set configurations inside React components and Vike hooks.
+ * Set configurations inside components and Vike hooks.
  *
  * https://vike.dev/useConfig
  */
 declare function useConfig(): (config: ConfigFromHook) => void;
-declare const configsCumulative: readonly ["Head", "bodyAttributes", "htmlAttributes"];

package/dist/hooks/useConfig/useConfig-server.js

@@ -4,8 +4,9 @@ import { getPageContext } from 'vike/getPageContext';
 import { useStream } from 'react-streaming';
 import { objectKeys } from '../../utils/objectKeys.js';
 import { includes } from '../../utils/includes.js';
+import { configsCumulative } from './configsCumulative.js';
 /**
- * Set configurations inside React components and Vike hooks.
+ * Set configurations inside components and Vike hooks.
  *
  * https://vike.dev/useConfig
  */
@@ -14,7 +15,7 @@ function useConfig() {
     let pageContext = getPageContext();
     if (pageContext)
         return (config) => setPageContextConfigFromHook(config, pageContext);
-    // React component
+    // Component
     pageContext = usePageContext();
     const stream = useStream();
     return (config) => {
@@ -28,7 +29,6 @@ function useConfig() {
     };
 }
 const configsClientSide = ['title'];
-const configsCumulative = ['Head', 'bodyAttributes', 'htmlAttributes'];
 function setPageContextConfigFromHook(config, pageContext) {
     pageContext._configFromHook ?? (pageContext._configFromHook = {});
     objectKeys(config).forEach((configName) => {

package/dist/index.d.ts

@@ -1 +1 @@
-export { default } from './+config.js';
+export { config as default } from './+config.js';

package/dist/index.js

@@ -1,3 +1,3 @@
 // TODO/next-major-release: remove this file/export
 console.warn("[vike-react][warning][deprecation] Replace `import vikeReact from 'vike-react'` with `import vikeReact from 'vike-react/config'` (typically in your /pages/+config.js)");
-export { default } from './+config.js';
+export { config as default } from './+config.js';

package/dist/renderer/applyHeadSettings.d.ts

@@ -0,0 +1,3 @@
+export { applyHeadSettings };
+type Value = string | null | undefined;
+declare function applyHeadSettings(title: Value, lang: Value): void;

package/dist/renderer/applyHeadSettings.js

@@ -0,0 +1,11 @@
+export { applyHeadSettings };
+// - 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
+function applyHeadSettings(title, lang) {
+    if (title !== undefined)
+        document.title = title || '';
+    if (lang !== undefined)
+        document.documentElement.lang = lang || 'en';
+}

package/dist/renderer/getHeadSetting.d.ts

@@ -2,5 +2,4 @@ export { getHeadSetting };
 import type { PageContext } from 'vike/types';
 import type { PageContextInternal } from '../types/PageContext.js';
 import type { ConfigFromHookResolved } from '../types/Config.js';
-type HeadSetting = Exclude<keyof ConfigFromHookResolved, 'Head'>;
-declare function getHeadSetting<T>(headSetting: HeadSetting, pageContext: PageContext & PageContextInternal): undefined | T;
+declare function getHeadSetting<T>(configName: keyof ConfigFromHookResolved, pageContext: PageContext & PageContextInternal): undefined | T;

package/dist/renderer/getHeadSetting.js

@@ -1,18 +1,24 @@
 export { getHeadSetting };
 import { isCallable } from '../utils/isCallable.js';
-function getHeadSetting(headSetting, pageContext) {
+import { configsCumulative } from '../hooks/useConfig/configsCumulative.js';
+import { includes } from '../utils/includes.js';
+// We use `any` instead of doing proper validation in order to save KBs sent to the client-side.
+function getHeadSetting(configName, pageContext) {
     // Set by useConfig()
-    {
-        const val = pageContext._configFromHook?.[headSetting];
-        if (val !== undefined)
-            return val;
-    }
+    const valFromUseConfig = pageContext._configFromHook?.[configName];
     // Set by +configName.js
-    const val = pageContext.config[headSetting];
-    if (isCallable(val)) {
-        return val(pageContext);
+    const valFromConfig = pageContext.config[configName];
+    const getCallable = (val) => (isCallable(val) ? val(pageContext) : val);
+    if (!includes(configsCumulative, configName)) {
+        if (valFromUseConfig !== undefined)
+            return valFromUseConfig;
+        return getCallable(valFromConfig);
     }
     else {
-        return val;
+        return [
+            //
+            ...(valFromConfig ?? []).map(getCallable),
+            ...(valFromUseConfig ?? [])
+        ];
     }
 }

package/dist/renderer/onRenderClient.js

@@ -5,8 +5,10 @@ import { getHeadSetting } from './getHeadSetting.js';
 import { getPageElement } from './getPageElement.js';
 import './styles.css';
 import { callCumulativeHooks } from '../utils/callCumulativeHooks.js';
+import { applyHeadSettings } from './applyHeadSettings.js';
 let root;
 const onRenderClient = async (pageContext) => {
+    pageContext._headAlreadySet = pageContext.isHydration;
     // Use case:
     // - Store hydration https://github.com/vikejs/vike-react/issues/110
     await callCumulativeHooks(pageContext.config.onBeforeRenderClient, pageContext);
@@ -38,24 +40,16 @@ const onRenderClient = async (pageContext) => {
     }
     pageContext.root = root;
     if (!pageContext.isHydration) {
-        // E.g. document.title
-        updateDocument(pageContext);
+        pageContext._headAlreadySet = true;
+        applyHead(pageContext);
     }
     // Use cases:
     // - Custom user settings: https://vike.dev/head-tags#custom-settings
     // - Testing tools: https://github.com/vikejs/vike-react/issues/95
     await callCumulativeHooks(pageContext.config.onAfterRenderClient, pageContext);
 };
-function updateDocument(pageContext) {
-    pageContext._headAlreadySet = true;
+function applyHead(pageContext) {
     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)
-        document.documentElement.lang = lang || 'en';
+    applyHeadSettings(title, lang);
 }

package/dist/renderer/onRenderHtml.d.ts

@@ -1,4 +1,6 @@
 export { onRenderHtml };
+import { renderToStream } from 'react-streaming/server';
 import type { OnRenderHtmlAsync } from 'vike/types';
 declare const onRenderHtml: OnRenderHtmlAsync;
+export type PageHtmlStream = Awaited<ReturnType<typeof renderToStream>>;
 export type Viewport = 'responsive' | number | null;

package/dist/renderer/onRenderHtml.js

@@ -9,11 +9,14 @@ import { getHeadSetting } from './getHeadSetting.js';
 import { getPageElement } from './getPageElement.js';
 import { isReactElement } from '../utils/isReactElement.js';
 import { getTagAttributesString } from '../utils/getTagAttributesString.js';
+import { callCumulativeHooks } from '../utils/callCumulativeHooks.js';
 addEcosystemStamp();
 const onRenderHtml = async (pageContext) => {
     const pageHtml = await getPageHtml(pageContext);
     const headHtml = getHeadHtml(pageContext);
     const { htmlAttributesString, bodyAttributesString } = getTagAttributes(pageContext);
+    // Not needed on the client-side, thus we remove it to save KBs sent to the client
+    delete pageContext._configFromHook;
     return escapeInject `<!DOCTYPE html>
     <html${dangerouslySkipEscape(htmlAttributesString)}>
       <head>
@@ -34,11 +37,13 @@ async function getPageHtml(pageContext) {
         const page = getPageElement(pageContext);
         const { stream, streamIsRequired } = pageContext.config;
         if (!stream && !streamIsRequired) {
-            pageHtml = dangerouslySkipEscape(renderToString(page));
+            const pageHtmlString = renderToString(page);
+            pageContext.pageHtmlString = pageHtmlString;
+            pageHtml = dangerouslySkipEscape(pageHtmlString);
         }
         else {
             const disable = stream === false ? true : undefined;
-            pageHtml = await renderToStream(page, {
+            const pageHtmlStream = await renderToStream(page, {
                 webStream: typeof stream === 'string' ? stream === 'web' : undefined,
                 userAgent: pageContext.headers?.['user-agent'] ||
                     // TODO/eventually: remove old way of acccessing the User Agent header.
@@ -46,8 +51,12 @@ async function getPageHtml(pageContext) {
                     pageContext.userAgent,
                 disable
             });
+            pageContext.pageHtmlStream = pageHtmlStream;
+            pageHtml = pageHtmlStream;
         }
     }
+    // https://github.com/vikejs/vike/discussions/1804#discussioncomment-10394481
+    await callCumulativeHooks(pageContext.config.onAfterRenderHtml, pageContext);
     return pageHtml;
 }
 function getHeadHtml(pageContext) {
@@ -74,8 +83,6 @@ function getHeadHtml(pageContext) {
         .filter((Head) => Head !== null && Head !== undefined)
         .map((Head) => getHeadElementHtml(Head, pageContext))
         .join('\n'));
-    // Not needed on the client-side, thus we remove it to save KBs sent to the client
-    delete pageContext._configFromHook;
     const headHtml = escapeInject `
     ${titleTags}
     ${viewportTag}

package/dist/types/Config.d.ts

@@ -1,7 +1,7 @@
-import type { ImportString, PageContextClient, PageContext as PageContext_, PageContextServer } from 'vike/types';
+import type { ImportString, PageContextServer, PageContext, PageContextClient } from 'vike/types';
 import type { TagAttributes } from '../utils/getTagAttributesString.js';
 import type { Viewport } from '../renderer/onRenderHtml.js';
-import type { ConfigFromHookCumulative } from '../hooks/useConfig/useConfig-server.js';
+import type { ConfigsCumulative } from '../hooks/useConfig/configsCumulative.js';
 declare global {
     namespace Vike {
         interface Config {
@@ -152,6 +152,12 @@ declare global {
              * https://vike.dev/reactStrictMode
              */
             reactStrictMode?: boolean;
+            /**
+             * Server-side hook called right after rendering the page's root React component to HTML.
+             *
+             * https://vike.dev/onAfterRenderHtml
+             */
+            onAfterRenderHtml?: (pageContext: PageContextServer) => void;
             /**
              * Client-side hook called before the page is rendered.
              *
@@ -177,11 +183,13 @@ declare global {
             Head?: Head[];
             bodyAttributes?: TagAttributes[];
             htmlAttributes?: TagAttributes[];
+            onAfterRenderHtml?: Function[];
             onBeforeRenderClient?: Function[];
             onAfterRenderClient?: Function[];
         }
     }
 }
+type PageContext_ = PageContext;
 export type Head = React.ReactNode | (() => React.ReactNode);
 type Wrapper = (props: {
     children: React.ReactNode;
@@ -195,5 +203,5 @@ type PickWithoutGetter<T, K extends keyof T> = {
     [P in K]: Exclude<T[P], Function>;
 };
 export type ConfigFromHook = PickWithoutGetter<Vike.Config, 'Head' | 'title' | 'description' | 'image' | 'favicon' | 'lang' | 'viewport' | 'bodyAttributes' | 'htmlAttributes'>;
-export type ConfigFromHookResolved = Omit<ConfigFromHook, ConfigFromHookCumulative> & Pick<Vike.ConfigResolved, ConfigFromHookCumulative>;
+export type ConfigFromHookResolved = Omit<ConfigFromHook, ConfigsCumulative> & Pick<Vike.ConfigResolved, ConfigsCumulative>;
 export {};

package/dist/types/PageContext.d.ts

@@ -2,6 +2,7 @@ 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 { PageHtmlStream } from '../renderer/onRenderHtml.js';
 declare global {
     namespace Vike {
         interface PageContext {
@@ -11,10 +12,12 @@ declare global {
             page?: JSX.Element;
             /** The React root DOM container */
             root?: ReactDOM.Root;
+            pageHtmlString?: string;
+            pageHtmlStream?: PageHtmlStream;
         }
     }
 }
 export type PageContextInternal = {
     _configFromHook?: ConfigFromHookResolved;
-    _headAlreadySet?: true;
+    _headAlreadySet?: boolean;
 };

package/package.json

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

package/dist/types/index.d.ts

@@ -1,2 +0,0 @@
-import './PageContext.js';
-import './Config.js';

package/dist/types/index.js

@@ -1,2 +0,0 @@
-import './PageContext.js';
-import './Config.js';