vike-react 0.6.10 → 0.6.12

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

@@ -1,3 +1,3 @@
 export { Config };
-import type { ConfigFromHook } from '../../types/Config.js';
-declare function Config(props: ConfigFromHook): null;
+import type { ConfigViaHook } from '../../types/Config.js';
+declare function Config(props: ConfigViaHook): null;

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

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

package/dist/config.d.ts

@@ -72,6 +72,20 @@ declare const config: {
             cumulative: true;
             global: true;
         };
+        headHtmlBegin: {
+            env: {
+                server: true;
+            };
+            cumulative: true;
+            global: true;
+        };
+        headHtmlEnd: {
+            env: {
+                server: true;
+            };
+            cumulative: true;
+            global: true;
+        };
         htmlAttributes: {
             env: {
                 server: true;

package/dist/config.js

@@ -14,7 +14,7 @@ const config = {
     onRenderClient: 'import:vike-react/__internal/integration/onRenderClient:onRenderClient',
     // @eject-remove end
     passToClient: [
-        '_configFromHook',
+        '_configViaHook',
         // https://github.com/vikejs/vike-react/issues/25
         process.env.NODE_ENV !== 'production' && '$$typeof',
     ].filter(isNotFalse),
@@ -60,6 +60,16 @@ const config = {
             cumulative: true,
             global: true,
         },
+        headHtmlBegin: {
+            env: { server: true },
+            cumulative: true,
+            global: true,
+        },
+        headHtmlEnd: {
+            env: { server: true },
+            cumulative: true,
+            global: true,
+        },
         htmlAttributes: {
             env: { server: true },
             global: true,

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

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

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

@@ -6,21 +6,21 @@ function useConfig() {
     // Vike hook
     let pageContext = getPageContext();
     if (pageContext)
-        return (config) => setPageContextConfigFromHook(config, pageContext);
+        return (config) => setPageContextConfigViaHook(config, pageContext);
     // Component
     pageContext = usePageContext();
     return (config) => {
         if (!('_headAlreadySet' in pageContext)) {
-            setPageContextConfigFromHook(config, pageContext);
+            setPageContextConfigViaHook(config, pageContext);
         }
         else {
             applyHead(config);
         }
     };
 }
-function setPageContextConfigFromHook(config, pageContext) {
-    pageContext._configFromHook ?? (pageContext._configFromHook = {});
-    Object.assign(pageContext._configFromHook, config);
+function setPageContextConfigViaHook(config, pageContext) {
+    pageContext._configViaHook ?? (pageContext._configViaHook = {});
+    Object.assign(pageContext._configViaHook, config);
 }
 function applyHead(config) {
     const { title, lang } = config;

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

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

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

@@ -15,13 +15,13 @@ function useConfig() {
     // Vike hook
     let pageContext = getPageContext();
     if (pageContext)
-        return (config) => setPageContextConfigFromHook(config, pageContext);
+        return (config) => setPageContextConfigViaHook(config, pageContext);
     // Component
     pageContext = usePageContext();
     const stream = useStreamOptional();
     return (config) => {
         if (!pageContext._headAlreadySet) {
-            setPageContextConfigFromHook(config, pageContext);
+            setPageContextConfigViaHook(config, pageContext);
         }
         else {
             assert(stream);
@@ -31,8 +31,8 @@ function useConfig() {
     };
 }
 const configsClientSide = ['title'];
-function setPageContextConfigFromHook(config, pageContext) {
-    pageContext._configFromHook ?? (pageContext._configFromHook = {});
+function setPageContextConfigViaHook(config, pageContext) {
+    pageContext._configViaHook ?? (pageContext._configViaHook = {});
     objectKeys(config).forEach((configName) => {
         var _a;
         // Skip HTML only configs which the client-side doesn't need, saving KBs sent to the client as well as avoiding serialization errors.
@@ -43,15 +43,15 @@ function setPageContextConfigFromHook(config, pageContext) {
             const configValue = config[configName];
             if (configValue === undefined)
                 return;
-            pageContext._configFromHook[configName] = configValue;
+            pageContext._configViaHook[configName] = configValue;
         }
         else {
             // Cumulative config
             const configValue = config[configName];
             if (!configValue)
                 return;
-            (_a = pageContext._configFromHook)[configName] ?? (_a[configName] = []);
-            pageContext._configFromHook[configName].push(configValue);
+            (_a = pageContext._configViaHook)[configName] ?? (_a[configName] = []);
+            pageContext._configViaHook[configName].push(configValue);
         }
     });
 }

package/dist/integration/getHeadSetting.d.ts

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

package/dist/integration/getHeadSetting.js

@@ -5,20 +5,20 @@ 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 valFromUseConfig = pageContext._configFromHook?.[configName];
+    const valFromHook = pageContext._configViaHook?.[configName];
     // Set by +configName.js
     const valFromConfig = pageContext.config[configName];
     const getCallable = (val) => (isCallable(val) ? val(pageContext) : val);
     if (!includes(configsCumulative, configName)) {
-        if (valFromUseConfig !== undefined)
-            return valFromUseConfig;
+        if (valFromHook !== undefined)
+            return valFromHook;
         return getCallable(valFromConfig);
     }
     else {
         return [
             //
             ...(valFromConfig ?? []).map(getCallable),
-            ...(valFromUseConfig ?? []),
+            ...(valFromHook ?? []),
         ];
     }
 }

package/dist/integration/onRenderHtml.d.ts

@@ -6,3 +6,4 @@ import type { PageContextInternal } from '../types/PageContext.js';
 declare function onRenderHtml(pageContext: PageContextServer & PageContextInternal): Promise<ReturnType<typeof escapeInject>>;
 export type PageHtmlStream = Awaited<ReturnType<typeof renderToStream>>;
 export type Viewport = 'responsive' | number | null;
+export type HtmlInjection = string | ((pageContext: PageContextServer) => string);

package/dist/integration/onRenderHtml.js

@@ -19,10 +19,10 @@ addEcosystemStamp();
 async function onRenderHtml(pageContext) {
     await renderPageToHtml(pageContext);
     const headHtml = getHeadHtml(pageContext);
-    const { bodyHtmlBegin, bodyHtmlEnd } = await getBodyHtmlBoundary(pageContext);
+    const { headHtmlBegin, headHtmlEnd, bodyHtmlBegin, bodyHtmlEnd } = await getHtmlInjections(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;
+    delete pageContext._configViaHook;
     // pageContext.{pageHtmlString,pageHtmlStream} is set by renderPageToHtml() and can be overridden by user at onAfterRenderHtml()
     let pageHtmlStringOrStream = 
     // Set to empty string if SSR is disabled
@@ -39,7 +39,9 @@ async function onRenderHtml(pageContext) {
     <html${dangerouslySkipEscape(htmlAttributesString)}>
       <head>
         <meta charset="UTF-8" />
+        ${headHtmlBegin}
         ${headHtml}
+        ${headHtmlEnd}
       </head>
       <body${dangerouslySkipEscape(bodyAttributesString)}>
         ${bodyHtmlBegin}
@@ -107,7 +109,7 @@ function getHeadHtml(pageContext) {
         // Added by +Head
         ...(pageContext.config.Head ?? []),
         // Added by useConfig()
-        ...(pageContext._configFromHook?.Head ?? []),
+        ...(pageContext._configViaHook?.Head ?? []),
     ]
         .filter((Head) => Head !== null && Head !== undefined)
         .map((Head) => getHeadElementHtml(Head, pageContext))
@@ -175,10 +177,19 @@ 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 };
+async function getHtmlInjections(pageContext) {
+    const { config } = pageContext;
+    const renderHooks = async (hooks) => {
+        const values = await callCumulativeHooks(hooks, pageContext);
+        return dangerouslySkipEscape(values.join(''));
+    };
+    const [headHtmlBegin, headHtmlEnd, bodyHtmlBegin, bodyHtmlEnd] = await Promise.all([
+        renderHooks(config.headHtmlBegin),
+        renderHooks(config.headHtmlEnd),
+        renderHooks(config.bodyHtmlBegin),
+        renderHooks(config.bodyHtmlEnd),
+    ]);
+    return { bodyHtmlBegin, bodyHtmlEnd, headHtmlBegin, headHtmlEnd };
 }
 function resolveStreamSetting(pageContext) {
     const { stream, 

package/dist/types/Config.d.ts

@@ -1,6 +1,6 @@
 import type { ImportString, PageContext } from 'vike/types';
 import type { TagAttributes } from '../utils/getTagAttributesString.js';
-import type { Viewport } from '../integration/onRenderHtml.js';
+import type { Viewport, HtmlInjection } from '../integration/onRenderHtml.js';
 import type { ConfigsCumulative } from '../hooks/useConfig/configsCumulative.js';
 import type React from 'react';
 import type { HydrationOptions, RootOptions } from 'react-dom/client';
@@ -110,13 +110,25 @@ declare global {
              *
              * https://vike.dev/bodyHtmlBegin
              */
-            bodyHtmlBegin?: BodyHtmlBoundary;
+            bodyHtmlBegin?: HtmlInjection;
             /**
              * Raw HTML injected at the end of `<body>`.
              *
              * https://vike.dev/bodyHtmlEnd
              */
-            bodyHtmlEnd?: BodyHtmlBoundary;
+            bodyHtmlEnd?: HtmlInjection;
+            /**
+             * Raw HTML injected at the start of `<head>`.
+             *
+             * https://vike.dev/headHtmlBegin
+             */
+            headHtmlBegin?: HtmlInjection;
+            /**
+             * Raw HTML injected at the end of `<head>`.
+             *
+             * https://vike.dev/headHtmlEnd
+             */
+            headHtmlEnd?: HtmlInjection;
             /**
              * Add tag attributes such as `<html class="dark">`.
              *
@@ -219,8 +231,10 @@ declare global {
             Wrapper?: Wrapper[];
             Layout?: Layout[];
             Head?: Head[];
-            bodyHtmlBegin?: BodyHtmlBoundary[];
-            bodyHtmlEnd?: BodyHtmlBoundary[];
+            bodyHtmlBegin?: HtmlInjection[];
+            bodyHtmlEnd?: HtmlInjection[];
+            headHtmlBegin?: HtmlInjection[];
+            headHtmlEnd?: HtmlInjection[];
             bodyAttributes?: TagAttributes[];
             htmlAttributes?: TagAttributes[];
             onBeforeRenderHtml?: Function[];
@@ -233,7 +247,6 @@ declare global {
     }
 }
 type PageContext_ = PageContext;
-type BodyHtmlBoundary = string | ((pageContext: PageContext) => string);
 export type Head = React.ReactNode | (() => React.ReactNode);
 type Wrapper = (props: {
     children: React.ReactNode;
@@ -246,8 +259,8 @@ type Loading = {
 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, ConfigsCumulative> & Pick<Vike.ConfigResolved, ConfigsCumulative>;
+export type ConfigViaHook = PickWithoutGetter<Vike.Config, 'Head' | 'title' | 'description' | 'image' | 'favicon' | 'lang' | 'viewport' | 'bodyAttributes' | 'htmlAttributes'>;
+export type ConfigViaHookResolved = Omit<ConfigViaHook, ConfigsCumulative> & Pick<Vike.ConfigResolved, ConfigsCumulative>;
 export type ReactOptions = {
     hydrateRootOptions?: HydrationOptions;
     createRootOptions?: RootOptions;

package/dist/types/PageContext.d.ts

@@ -1,6 +1,6 @@
 import type React from 'react';
 import type ReactDOM from 'react-dom/client';
-import type { ConfigFromHookResolved } from './Config.js';
+import type { ConfigViaHookResolved } from './Config.js';
 import type { PageHtmlStream } from '../integration/onRenderHtml.js';
 declare global {
     namespace Vike {
@@ -19,6 +19,6 @@ declare global {
     }
 }
 export type PageContextInternal = {
-    _configFromHook?: ConfigFromHookResolved;
+    _configViaHook?: ConfigViaHookResolved;
     _headAlreadySet?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-react",
-  "version": "0.6.10",
+  "version": "0.6.12",
   "repository": "https://github.com/vikejs/vike-react",
   "type": "module",
   "exports": {