vike-react 0.5.3 → 0.5.5

package/dist/+config.d.ts

@@ -1,13 +1,13 @@
-import { ssrEffect } from './renderer/ssrEffect.js';
-import './types/index.js';
-declare const _default: {
+export { config };
+import { ssrEffect } from './integration/ssrEffect.js';
+declare const config: {
     name: string;
     require: {
         vike: string;
     };
-    Loading: "import:vike-react/components/Loading:default";
-    onRenderHtml: "import:vike-react/renderer/onRenderHtml:onRenderHtml";
-    onRenderClient: "import:vike-react/renderer/onRenderClient:onRenderClient";
+    Loading: "import:vike-react/__internal/components/Loading:default";
+    onRenderHtml: "import:vike-react/__internal/integration/onRenderHtml:onRenderHtml";
+    onRenderClient: "import:vike-react/__internal/integration/onRenderClient:onRenderClient";
     passToClient: string[];
     clientRouting: true;
     hydrationCanBeAborted: true;
@@ -58,6 +58,20 @@ declare const _default: {
                 client: true;
             };
         };
+        bodyHtmlBegin: {
+            env: {
+                server: true;
+            };
+            cumulative: true;
+            global: true;
+        };
+        bodyHtmlEnd: {
+            env: {
+                server: true;
+            };
+            cumulative: true;
+            global: true;
+        };
         htmlAttributes: {
             env: {
                 server: true;
@@ -88,6 +102,12 @@ declare const _default: {
                 server: true;
             };
         };
+        onAfterRenderHtml: {
+            env: {
+                server: true;
+            };
+            cumulative: true;
+        };
         onBeforeRenderClient: {
             env: {
                 client: true;
@@ -121,4 +141,5 @@ declare const _default: {
         };
     };
 };
-export default _default;
+import './types/Config.js';
+import './types/PageContext.js';

package/dist/+config.js

@@ -1,21 +1,20 @@
+export { config };
+import { ssrEffect } from './integration/ssrEffect.js';
 import { isNotFalse } from './utils/isNotFalse.js';
-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 {
+const config = {
     name: 'vike-react',
     require: {
-        vike: '>=0.4.182'
+        vike: '>=0.4.182',
     },
-    Loading: 'import:vike-react/components/Loading:default',
+    Loading: 'import:vike-react/__internal/components/Loading:default',
     // https://vike.dev/onRenderHtml
-    onRenderHtml: 'import:vike-react/renderer/onRenderHtml:onRenderHtml',
+    onRenderHtml: 'import:vike-react/__internal/integration/onRenderHtml:onRenderHtml',
     // https://vike.dev/onRenderClient
-    onRenderClient: 'import:vike-react/renderer/onRenderClient:onRenderClient',
+    onRenderClient: 'import:vike-react/__internal/integration/onRenderClient:onRenderClient',
     passToClient: [
         '_configFromHook',
         // https://github.com/vikejs/vike-react/issues/25
-        process.env.NODE_ENV !== 'production' && '$$typeof'
+        process.env.NODE_ENV !== 'production' && '$$typeof',
     ].filter(isNotFalse),
     // https://vike.dev/clientRouting
     clientRouting: true,
@@ -24,68 +23,85 @@ export default {
     meta: {
         Head: {
             env: { server: true },
-            cumulative: true
+            cumulative: true,
         },
         Layout: {
             env: { server: true, client: true },
-            cumulative: true
+            cumulative: true,
         },
         title: {
-            env: { server: true, client: true }
+            env: { server: true, client: true },
         },
         description: {
-            env: { server: true }
+            env: { server: true },
         },
         image: {
-            env: { server: true }
+            env: { server: true },
         },
         viewport: {
-            env: { server: true }
+            env: { server: true },
         },
         favicon: {
             env: { server: true },
-            global: true
+            global: true,
         },
         lang: {
-            env: { server: true, client: true }
+            env: { server: true, client: true },
+        },
+        bodyHtmlBegin: {
+            env: { server: true },
+            cumulative: true,
+            global: true,
+        },
+        bodyHtmlEnd: {
+            env: { server: true },
+            cumulative: true,
+            global: true,
         },
         htmlAttributes: {
             env: { server: true },
             global: true,
-            cumulative: true // for Vike extensions
+            cumulative: true, // for Vike extensions
         },
         bodyAttributes: {
             env: { server: true },
             global: true,
-            cumulative: true // for Vike extensions
+            cumulative: true, // for Vike extensions
         },
         ssr: {
             env: { config: true },
-            effect: ssrEffect
+            effect: ssrEffect,
         },
         stream: {
-            env: { server: true }
+            env: { server: true },
         },
         streamIsRequired: {
-            env: { server: true }
+            env: { server: true },
+        },
+        onAfterRenderHtml: {
+            env: { server: true },
+            cumulative: true,
         },
         onBeforeRenderClient: {
             env: { client: true },
-            cumulative: true
+            cumulative: true,
         },
         onAfterRenderClient: {
             env: { client: true },
-            cumulative: true
+            cumulative: true,
         },
         Wrapper: {
             cumulative: true,
-            env: { client: true, server: true }
+            env: { client: true, server: true },
         },
         reactStrictMode: {
-            env: { client: true, server: true }
+            env: { client: true, server: true },
         },
         Loading: {
-            env: { server: true, client: true }
-        }
-    }
+            env: { server: true, client: true },
+        },
+    },
 };
+// 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/ClientOnly.d.ts

@@ -1,7 +1,7 @@
 export { ClientOnly };
 import React, { useEffect } from 'react';
 import type { ReactNode } from 'react';
-declare function ClientOnly<T>({ load, children, fallback, deps }: {
+declare function ClientOnly<T>({ load, children, fallback, deps, }: {
     load: () => Promise<{
         default: React.ComponentType<T>;
     } | React.ComponentType<T>>;

package/dist/components/ClientOnly.js

@@ -1,6 +1,6 @@
 export { ClientOnly };
 import React, { lazy, useEffect, useState, startTransition } from 'react';
-function ClientOnly({ load, children, fallback, deps = [] }) {
+function ClientOnly({ load, children, fallback, deps = [], }) {
     // TODO/next-major-release: remove this file/export
     console.warn('[vike-react][warning] <ClientOnly> is deprecated: use clientOnly() instead https://vike.dev/clientOnly');
     const [Component, setComponent] = useState(null);
@@ -9,7 +9,7 @@ function ClientOnly({ load, children, fallback, deps = [] }) {
             const Component = lazy(() => load()
                 .then((LoadedComponent) => {
                 return {
-                    default: () => children('default' in LoadedComponent ? LoadedComponent.default : LoadedComponent)
+                    default: () => children('default' in LoadedComponent ? LoadedComponent.default : LoadedComponent),
                 };
             })
                 .catch((error) => {

package/dist/components/Loading.js

@@ -1,6 +1,6 @@
 import React from 'react';
 export default {
-    component: LoadingComponent
+    component: LoadingComponent,
 };
 function LoadingComponent() {
     return (React.createElement("div", { style: {
@@ -11,6 +11,6 @@ function LoadingComponent() {
             borderRadius: '5px',
             backgroundSize: '200% 100%',
             animation: '1.3s vike-react-shine linear infinite',
-            aspectRatio: '2.5/1'
+            aspectRatio: '2.5/1',
         } }));
 }

package/dist/helpers/clientOnly.js

@@ -1,5 +1,5 @@
 export { clientOnly };
-import React, { Suspense, forwardRef, lazy, useEffect, useState } from 'react';
+import React, { Suspense, forwardRef, lazy, useEffect, useState, } from 'react';
 function clientOnly(load) {
     var _a;
     // Client side: always bundled by Vite, import.meta.env.SSR === false

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

@@ -1,7 +1,7 @@
 export { useConfig };
 import { usePageContext } from '../usePageContext.js';
 import { getPageContext } from 'vike/getPageContext';
-import { applyHeadSettings } from '../../renderer/applyHeadSettings.js';
+import { applyHeadSettings } from '../../integration/applyHeadSettings.js';
 function useConfig() {
     // Vike hook
     let pageContext = getPageContext();

package/dist/hooks/usePageContext.js

@@ -3,7 +3,7 @@ export { PageContextProvider };
 import React, { useContext } from 'react';
 import { getGlobalObject } from '../utils/getGlobalObject.js';
 const globalObject = getGlobalObject('PageContextProvider.ts', {
-    reactContext: React.createContext(undefined)
+    reactContext: React.createContext(undefined),
 });
 function PageContextProvider({ pageContext, children }) {
     const { reactContext } = globalObject;

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 → integration}/getHeadSetting.js

@@ -18,7 +18,7 @@ function getHeadSetting(configName, pageContext) {
         return [
             //
             ...(valFromConfig ?? []).map(getCallable),
-            ...(valFromUseConfig ?? [])
+            ...(valFromUseConfig ?? []),
         ];
     }
 }

package/dist/{renderer → integration}/getPageElement.js

@@ -2,7 +2,7 @@ export { getPageElement };
 import React, { Suspense } from 'react';
 import { PageContextProvider } from '../hooks/usePageContext.js';
 function getPageElement(pageContext) {
-    const { Page, config: { Loading } } = pageContext;
+    const { Page, config: { Loading }, } = pageContext;
     let page = Page ? React.createElement(Page, null) : null;
     // Wrapping
     const addSuspense = (el) => {
@@ -15,7 +15,7 @@ function getPageElement(pageContext) {
         // Inner wrapping
         ...(pageContext.config.Layout || []),
         // Outer wrapping
-        ...(pageContext.config.Wrapper || [])
+        ...(pageContext.config.Wrapper || []),
     ].forEach((Wrap) => {
         page = React.createElement(Wrap, null, page);
         page = addSuspense(page);

package/dist/{renderer → integration}/onRenderClient.js

@@ -25,7 +25,7 @@ const onRenderClient = async (pageContext) => {
         // First render while using SSR, i.e. [hydration](https://vike.dev/hydration)
         root = ReactDOM.hydrateRoot(container, page, {
             // @ts-expect-error
-            onUncaughtError
+            onUncaughtError,
         });
     }
     else {
@@ -33,7 +33,7 @@ const onRenderClient = async (pageContext) => {
             // First render without SSR
             root = ReactDOM.createRoot(container, {
                 // @ts-expect-error
-                onUncaughtError
+                onUncaughtError,
             });
         }
         root.render(page);

package/dist/{renderer → integration}/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 → integration}/onRenderHtml.js

@@ -9,10 +9,12 @@ 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 { bodyHtmlBegin, bodyHtmlEnd } = await getBodyHtmlBoundary(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;
@@ -23,7 +25,9 @@ const onRenderHtml = async (pageContext) => {
         ${headHtml}
       </head>
       <body${dangerouslySkipEscape(bodyAttributesString)}>
+        ${bodyHtmlBegin}
         <div id="root">${pageHtml}</div>
+        ${bodyHtmlEnd}
       </body>
     </html>`;
 };
@@ -36,20 +40,26 @@ 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.
                     // @ts-ignore
                     pageContext.userAgent,
-                disable
+                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) {
@@ -71,7 +81,7 @@ function getHeadHtml(pageContext) {
         // Added by +Head
         ...(pageContext.config.Head ?? []),
         // Added by useConfig()
-        ...(pageContext._configFromHook?.Head ?? [])
+        ...(pageContext._configFromHook?.Head ?? []),
     ]
         .filter((Head) => Head !== null && Head !== undefined)
         .map((Head) => getHeadElementHtml(Head, pageContext))
@@ -139,3 +149,8 @@ function addEcosystemStamp() {
         // We use an object so that we can eventually, in the future, add helpful information as needed. (E.g. the vike-react version.)
         {};
 }
+async function getBodyHtmlBoundary(pageContext) {
+    const bodyHtmlBegin = dangerouslySkipEscape((await callCumulativeHooks(pageContext.config.bodyHtmlBegin, pageContext)).join(''));
+    const bodyHtmlEnd = dangerouslySkipEscape((await callCumulativeHooks(pageContext.config.bodyHtmlEnd, pageContext)).join(''));
+    return { bodyHtmlBegin, bodyHtmlEnd };
+}

package/dist/{renderer → integration}/ssrEffect.js

@@ -8,7 +8,7 @@ function ssrEffect({ configDefinedAt, configValue }) {
         // 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
+        server: configValue !== false,
     };
     return {
         meta: {
@@ -16,7 +16,7 @@ function ssrEffect({ configDefinedAt, configValue }) {
             /* We don't do this to enable wraping <Head> with <Wrapper>
             Wrapper: { env }, */
             Layout: { env },
-            Loading: { env }
-        }
+            Loading: { env },
+        },
     };
 }

package/dist/types/Config.d.ts

@@ -1,6 +1,6 @@
-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 { Viewport } from '../integration/onRenderHtml.js';
 import type { ConfigsCumulative } from '../hooks/useConfig/configsCumulative.js';
 declare global {
     namespace Vike {
@@ -102,6 +102,18 @@ declare global {
              * https://vike.dev/lang
              */
             lang?: string | null | ((pageContext: PageContext_) => string | null | undefined);
+            /**
+             * Raw HTML injected at the start of `<body>`.
+             *
+             * https://vike.dev/bodyHtmlBegin
+             */
+            bodyHtmlBegin?: BodyHtmlBoundary;
+            /**
+             * Raw HTML injected at the end of `<body>`.
+             *
+             * https://vike.dev/bodyHtmlEnd
+             */
+            bodyHtmlEnd?: BodyHtmlBoundary;
             /**
              * Add tag attributes such as `<html class="dark">`.
              *
@@ -152,6 +164,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.
              *
@@ -175,13 +193,18 @@ declare global {
             Wrapper?: Wrapper[];
             Layout?: Layout[];
             Head?: Head[];
+            bodyHtmlBegin?: BodyHtmlBoundary[];
+            bodyHtmlEnd?: BodyHtmlBoundary[];
             bodyAttributes?: TagAttributes[];
             htmlAttributes?: TagAttributes[];
+            onAfterRenderHtml?: Function[];
             onBeforeRenderClient?: Function[];
             onAfterRenderClient?: Function[];
         }
     }
 }
+type PageContext_ = PageContext;
+type BodyHtmlBoundary = string | ((pageContext: PageContext) => string);
 export type Head = React.ReactNode | (() => React.ReactNode);
 type Wrapper = (props: {
     children: React.ReactNode;

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 '../integration/onRenderHtml.js';
 declare global {
     namespace Vike {
         interface PageContext {
@@ -11,6 +12,10 @@ declare global {
             page?: JSX.Element;
             /** The React root DOM container */
             root?: ReactDOM.Root;
+            /** The +Page.jsx component rendered to the HTML string. */
+            pageHtmlString?: string;
+            /** The +Pagejsx component rendered to an HTML stream. */
+            pageHtmlStream?: PageHtmlStream;
         }
     }
 }

package/dist/utils/callCumulativeHooks.d.ts

@@ -1 +1,2 @@
-export declare function callCumulativeHooks(values: undefined | unknown[], pageContext: unknown): Promise<unknown[]>;
+export { callCumulativeHooks };
+declare function callCumulativeHooks(values: undefined | unknown[], pageContext: Record<string, any>): Promise<unknown[]>;

package/dist/utils/callCumulativeHooks.js

@@ -1,8 +1,11 @@
-export async function callCumulativeHooks(values, pageContext) {
+export { callCumulativeHooks };
+import { providePageContext } from 'vike/getPageContext';
+async function callCumulativeHooks(values, pageContext) {
     if (!values)
         return [];
     const valuesPromises = values.map((val) => {
         if (typeof val === 'function') {
+            providePageContext(pageContext);
             // Hook
             return val(pageContext);
         }

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "vike-react",
-  "version": "0.5.3",
+  "version": "0.5.5",
+  "repository": "https://github.com/vikejs/vike-react",
   "type": "module",
-  "main": "./dist/index.js",
-  "types": "./dist/index.d.ts",
   "exports": {
-    "./useData": "./dist/hooks/useData.js",
     "./usePageContext": "./dist/hooks/usePageContext.js",
+    "./useData": "./dist/hooks/useData.js",
     "./useConfig": {
       "browser": "./dist/hooks/useConfig/useConfig-client.js",
       "default": "./dist/hooks/useConfig/useConfig-server.js"
@@ -19,27 +18,30 @@
       "browser": "./dist/components/Head/Head-client.js",
       "default": "./dist/components/Head/Head-server.js"
     },
-    "./ClientOnly": "./dist/components/ClientOnly.js",
     "./clientOnly": "./dist/helpers/clientOnly.js",
+    "./ClientOnly": "./dist/components/ClientOnly.js",
     ".": "./dist/index.js",
     "./config": "./dist/+config.js",
-    "./renderer/onRenderHtml": "./dist/renderer/onRenderHtml.js",
-    "./renderer/onRenderClient": "./dist/renderer/onRenderClient.js",
-    "./components/Loading": "./dist/components/Loading.js"
+    "./__internal/integration/onRenderHtml": "./dist/integration/onRenderHtml.js",
+    "./__internal/integration/onRenderClient": "./dist/integration/onRenderClient.js",
+    "./__internal/components/Loading": "./dist/components/Loading.js"
+  },
+  "dependencies": {
+    "react-streaming": "^0.3.42"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    "vike": ">=0.4.182"
   },
   "scripts": {
     "dev": "tsc --watch",
     "build": "rimraf dist/ && tsc && pnpm run build:css",
-    "build:css": "cp src/renderer/styles.css dist/renderer/styles.css",
+    "build:css": "cp src/integration/styles.css dist/integration/styles.css",
     "release": "release-me patch",
     "release:minor": "release-me minor",
     "release:commit": "release-me commit"
   },
-  "peerDependencies": {
-    "react": ">=18.0.0",
-    "react-dom": ">=18.0.0",
-    "vike": ">=0.4.182"
-  },
   "devDependencies": {
     "@biomejs/biome": "^1.6.4",
     "@brillout/release-me": "^0.3.8",
@@ -51,12 +53,9 @@
     "react-streaming": "^0.3.43",
     "rimraf": "^5.0.5",
     "typescript": "^5.5.4",
-    "vike": "^0.4.183",
+    "vike": "^0.4.191",
     "vite": "^5.4.0"
   },
-  "dependencies": {
-    "react-streaming": "^0.3.42"
-  },
   "typesVersions": {
     "*": {
       "useData": [
@@ -86,17 +85,21 @@
       "config": [
         "./dist/+config.d.ts"
       ],
-      "renderer/onRenderHtml": [
-        "./dist/renderer/onRenderHtml.d.ts"
+      "__/internal/integration/onRenderHtml": [
+        "./dist/integration/onRenderHtml.d.ts"
       ],
-      "renderer/onRenderClient": [
-        "./dist/renderer/onRenderClient.d.ts"
+      "__/internal/integration/onRenderClient": [
+        "./dist/integration/onRenderClient.d.ts"
       ]
     }
   },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist/"
   ],
-  "repository": "github:vikejs/vike-react",
-  "license": "MIT"
+  "license": "MIT",
+  "keywords": [
+    "react"
+  ]
 }

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';