vike-react 0.5.4 → 0.5.5

package/dist/+config.d.ts

@@ -1,13 +1,13 @@
 export { config };
-import { ssrEffect } from './renderer/ssrEffect.js';
+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 config: {
                 client: true;
             };
         };
+        bodyHtmlBegin: {
+            env: {
+                server: true;
+            };
+            cumulative: true;
+            global: true;
+        };
+        bodyHtmlEnd: {
+            env: {
+                server: true;
+            };
+            cumulative: true;
+            global: true;
+        };
         htmlAttributes: {
             env: {
                 server: true;

package/dist/+config.js

@@ -1,20 +1,20 @@
 export { config };
-import { ssrEffect } from './renderer/ssrEffect.js';
+import { ssrEffect } from './integration/ssrEffect.js';
 import { isNotFalse } from './utils/isNotFalse.js';
 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,
@@ -23,74 +23,84 @@ const config = {
     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
+            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';

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/{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.js

@@ -14,6 +14,7 @@ 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;
@@ -24,7 +25,9 @@ const onRenderHtml = async (pageContext) => {
         ${headHtml}
       </head>
       <body${dangerouslySkipEscape(bodyAttributesString)}>
+        ${bodyHtmlBegin}
         <div id="root">${pageHtml}</div>
+        ${bodyHtmlEnd}
       </body>
     </html>`;
 };
@@ -49,7 +52,7 @@ async function getPageHtml(pageContext) {
                     // TODO/eventually: remove old way of acccessing the User Agent header.
                     // @ts-ignore
                     pageContext.userAgent,
-                disable
+                disable,
             });
             pageContext.pageHtmlStream = pageHtmlStream;
             pageHtml = pageHtmlStream;
@@ -78,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))
@@ -146,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, 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">`.
              *
@@ -181,6 +193,8 @@ declare global {
             Wrapper?: Wrapper[];
             Layout?: Layout[];
             Head?: Head[];
+            bodyHtmlBegin?: BodyHtmlBoundary[];
+            bodyHtmlEnd?: BodyHtmlBoundary[];
             bodyAttributes?: TagAttributes[];
             htmlAttributes?: TagAttributes[];
             onAfterRenderHtml?: Function[];
@@ -190,6 +204,7 @@ declare global {
     }
 }
 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,7 +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';
+import type { PageHtmlStream } from '../integration/onRenderHtml.js';
 declare global {
     namespace Vike {
         interface PageContext {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-react",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "repository": "https://github.com/vikejs/vike-react",
   "type": "module",
   "exports": {
@@ -22,9 +22,9 @@
     "./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"
@@ -37,7 +37,7 @@
   "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"
@@ -85,11 +85,11 @@
       "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"
       ]
     }
   },