vike-react 0.4.18 → 0.5.0

package/dist/+config.d.ts

@@ -30,11 +30,26 @@ declare const _default: {
                 client: true;
             };
         };
+        description: {
+            env: {
+                server: true;
+            };
+        };
+        image: {
+            env: {
+                server: true;
+            };
+        };
+        viewport: {
+            env: {
+                server: true;
+            };
+        };
         favicon: {
             env: {
                 server: true;
-                client: true;
             };
+            global: true;
         };
         lang: {
             env: {
@@ -42,6 +57,20 @@ declare const _default: {
                 client: true;
             };
         };
+        htmlAttributes: {
+            env: {
+                server: true;
+            };
+            global: true;
+            cumulative: true;
+        };
+        bodyAttributes: {
+            env: {
+                server: true;
+            };
+            global: true;
+            cumulative: true;
+        };
         ssr: {
             env: {
                 config: true;

package/dist/+config.js

@@ -5,7 +5,7 @@ import './types/index.js';
 export default {
     name: 'vike-react',
     require: {
-        vike: '>=0.4.178'
+        vike: '>=0.4.182'
     },
     Loading: 'import:vike-react/components/Loading:default',
     // https://vike.dev/onRenderHtml
@@ -13,6 +13,7 @@ export default {
     // https://vike.dev/onRenderClient
     onRenderClient: 'import:vike-react/renderer/onRenderClient:onRenderClient',
     passToClient: [
+        '_configFromHook',
         // https://github.com/vikejs/vike-react/issues/25
         process.env.NODE_ENV !== 'production' && '$$typeof'
     ].filter(isNotFalse),
@@ -31,12 +32,32 @@ export default {
         title: {
             env: { server: true, client: true }
         },
+        description: {
+            env: { server: true }
+        },
+        image: {
+            env: { server: true }
+        },
+        viewport: {
+            env: { server: true }
+        },
         favicon: {
-            env: { server: true, client: true }
+            env: { server: true },
+            global: true
         },
         lang: {
             env: { server: true, client: true }
         },
+        htmlAttributes: {
+            env: { server: true },
+            global: true,
+            cumulative: true // for Vike extensions
+        },
+        bodyAttributes: {
+            env: { server: true },
+            global: true,
+            cumulative: true // for Vike extensions
+        },
         ssr: {
             env: { config: true },
             effect: ssrEffect

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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,13 @@
+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);
+    return null;
+}

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

@@ -0,0 +1,8 @@
+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-server.js

@@ -0,0 +1,13 @@
+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.
+ *
+ * https://vike.dev/useConfig
+ */
+function Config(props) {
+    const config = useConfig();
+    config(props);
+    return null;
+}

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

@@ -0,0 +1,11 @@
+export { Head };
+/**
+ * Add arbitrary `<head>` tags.
+ *
+ * (The children are teleported to `<head>`.)
+ *
+ * https://vike.dev/Head
+ */
+declare function Head({ children }: {
+    children: React.ReactNode;
+}): null;

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

@@ -0,0 +1,15 @@
+export { Head };
+// Same as ./Head-server.ts but importing useConfig-client.js
+import { useConfig } from '../../hooks/useConfig/useConfig-client.js';
+/**
+ * Add arbitrary `<head>` tags.
+ *
+ * (The children are teleported to `<head>`.)
+ *
+ * https://vike.dev/Head
+ */
+function Head({ children }) {
+    const config = useConfig();
+    config({ Head: children });
+    return null;
+}

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

@@ -0,0 +1,11 @@
+export { Head };
+/**
+ * Add arbitrary `<head>` tags.
+ *
+ * (The children are teleported to `<head>`.)
+ *
+ * https://vike.dev/Head
+ */
+declare function Head({ children }: {
+    children: React.ReactNode;
+}): null;

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

@@ -0,0 +1,15 @@
+export { Head };
+// Same as ./Head-client.ts but importing useConfig-server.js
+import { useConfig } from '../../hooks/useConfig/useConfig-server.js';
+/**
+ * Add arbitrary `<head>` tags.
+ *
+ * (The children are teleported to `<head>`.)
+ *
+ * https://vike.dev/Head
+ */
+function Head({ children }) {
+    const config = useConfig();
+    config({ Head: children });
+    return null;
+}

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

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

package/dist/hooks/useConfig/shared.js

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

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

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

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

@@ -0,0 +1,41 @@
+export { useConfig };
+import { usePageContext } from '../usePageContext.js';
+import { getPageContext } from 'vike/getPageContext';
+/**
+ * Set configurations inside React components and Vike hooks.
+ *
+ * https://vike.dev/useConfig
+ */
+function useConfig() {
+    const configSetter = (config) => setConfigOverPageContext(config, pageContext);
+    // Vike hook
+    let pageContext = getPageContext();
+    if (pageContext)
+        return configSetter;
+    // React component
+    pageContext = usePageContext();
+    return (config) => {
+        if (!('_headAlreadySet' in pageContext)) {
+            configSetter(config);
+        }
+        else {
+            sideEffect(config);
+        }
+    };
+}
+const configsClientSide = ['title'];
+function setConfigOverPageContext(config, pageContext) {
+    pageContext._configFromHook ?? (pageContext._configFromHook = {});
+    configsClientSide.forEach((configName) => {
+        const configValue = config[configName];
+        if (!configValue)
+            return;
+        pageContext._configFromHook[configName] = configValue;
+    });
+}
+function sideEffect(config) {
+    const { title } = config;
+    if (title) {
+        window.document.title = title;
+    }
+}

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

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

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

@@ -0,0 +1,62 @@
+export { useConfig };
+import { usePageContext } from '../usePageContext.js';
+import { getPageContext } from 'vike/getPageContext';
+import { useStream } from 'react-streaming';
+/**
+ * Set configurations inside React components and Vike hooks.
+ *
+ * https://vike.dev/useConfig
+ */
+function useConfig() {
+    const configSetter = (config) => setConfigOverPageContext(config, pageContext);
+    // Vike hook
+    let pageContext = getPageContext();
+    if (pageContext)
+        return configSetter;
+    // React component
+    pageContext = usePageContext();
+    const stream = useStream();
+    return (config) => {
+        if (!pageContext._headAlreadySet) {
+            configSetter(config);
+        }
+        else {
+            // <head> already sent to the browser => send DOM-manipulating scripts during HTML streaming
+            sideEffect(config, stream);
+        }
+    };
+}
+const configsHtmlOnly = ['Head', 'description', 'image'];
+const configsCumulative = ['Head'];
+const configsOverridable = ['title', 'description', 'image'];
+function setConfigOverPageContext(config, pageContext) {
+    pageContext._configFromHook ?? (pageContext._configFromHook = {});
+    if (pageContext.isClientSideNavigation) {
+        // Remove HTML only configs which the client-side doesn't need (also avoiding serialization errors)
+        for (const configName of configsHtmlOnly)
+            delete config[configName];
+    }
+    // Cumulative values
+    configsCumulative.forEach((configName) => {
+        var _a;
+        const configValue = config[configName];
+        if (!configValue)
+            return;
+        (_a = pageContext._configFromHook)[configName] ?? (_a[configName] = []);
+        pageContext._configFromHook[configName].push(configValue);
+    });
+    // Overridable values
+    configsOverridable.forEach((configName) => {
+        const configValue = config[configName];
+        if (!configValue)
+            return;
+        pageContext._configFromHook[configName] = configValue;
+    });
+}
+function sideEffect(config, stream) {
+    const { title } = config;
+    if (title) {
+        const htmlSnippet = `<script>document.title = ${JSON.stringify(title)}</script>`;
+        stream.injectToStream(htmlSnippet);
+    }
+}

package/dist/renderer/getHeadSetting.d.ts

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

package/dist/renderer/getHeadSetting.js

@@ -1,6 +1,11 @@
 export { getHeadSetting };
 import { isCallable } from '../utils/isCallable.js';
 function getHeadSetting(headSetting, pageContext) {
+    {
+        const val = pageContext._configFromHook?.[headSetting];
+        if (val !== undefined)
+            return val;
+    }
     const config = pageContext.configEntries[headSetting]?.[0];
     if (!config)
         return undefined;

package/dist/renderer/onRenderClient.js

@@ -10,17 +10,16 @@ const onRenderClient = (pageContext) => {
     // - Store hydration https://github.com/vikejs/vike-react/issues/110
     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.
     //  - https://react-dev-git-fork-rickhanlonii-rh-root-options-fbopensource.vercel.app/reference/react-dom/client/createRoot#show-a-dialog-for-uncaught-errors
     //  - https://react-dev-git-fork-rickhanlonii-rh-root-options-fbopensource.vercel.app/reference/react-dom/client/hydrateRoot#show-a-dialog-for-uncaught-errors
     const onUncaughtError = (_error, _errorInfo) => { };
     const container = document.getElementById('root');
-    if (
-    // Whether the page was rendered to HTML. (I.e. whether the user set the [`ssr`](https://vike.dev/ssr) setting to `false`.)
-    container.innerHTML !== '' &&
-        // Whether the page was already rendered to HTML. (I.e. whether this is the first client-side rendering.)
-        pageContext.isHydration) {
-        // Hydration
+    if (pageContext.isHydration &&
+        // Whether the page was [Server-Side Rendered](https://vike.dev/ssr).
+        container.innerHTML !== '') {
+        // First render while using SSR, i.e. [hydration](https://vike.dev/hydration)
         root = ReactDOM.hydrateRoot(container, page, {
             // @ts-expect-error
             onUncaughtError
@@ -28,46 +27,34 @@ const onRenderClient = (pageContext) => {
     }
     else {
         if (!root) {
-            // First render (not hydration)
+            // First render without SSR
             root = ReactDOM.createRoot(container, {
                 // @ts-expect-error
                 onUncaughtError
             });
         }
-        else {
-            // Client-side navigation
-            const title = getHeadSetting('title', pageContext) || '';
-            const lang = getHeadSetting('lang', pageContext) || 'en';
-            const favicon = getHeadSetting('favicon', pageContext);
-            // We skip if the value is undefined because we shouldn't remove values set in HTML (by the Head setting).
-            //  - This also means that previous values will leak: upon client-side navigation, the title set by the previous page won't be removed if the next page doesn't override it. But that's okay because usually pages always have a favicon and title, which means that previous values are always overriden. Also, as a workaround, the user can set the value to `null` to ensure that previous values are overriden.
-            if (title !== undefined)
-                document.title = title;
-            if (lang !== undefined)
-                document.documentElement.lang = lang;
-            if (favicon !== undefined)
-                setFavicon(favicon);
-        }
         root.render(page);
     }
-    pageContext.page = page;
     pageContext.root = root;
-    // Use case:
-    // - Testing tool https://github.com/vikejs/vike-react/issues/95
+    if (!pageContext.isHydration) {
+        // E.g. document.title
+        updateDocument(pageContext);
+    }
+    // Use cases:
+    // - Custom user settings: https://vike.dev/head#custom-settings
+    // - Testing tools: https://github.com/vikejs/vike-react/issues/95
     pageContext.config.onAfterRenderClient?.(pageContext);
 };
-// https://stackoverflow.com/questions/260857/changing-website-favicon-dynamically/260876#260876
-function setFavicon(faviconUrl) {
-    let link = document.querySelector("link[rel~='icon']");
-    if (!faviconUrl) {
-        if (link)
-            document.head.removeChild(link);
-        return;
-    }
-    if (!link) {
-        link = document.createElement('link');
-        link.rel = 'icon';
-        document.head.appendChild(link);
-    }
-    link.href = faviconUrl;
+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 (title !== undefined)
+        document.title = title || '';
+    if (lang !== undefined)
+        document.documentElement.lang = lang || 'en';
 }

package/dist/renderer/onRenderHtml.d.ts

@@ -1,3 +1,4 @@
 export { onRenderHtml };
 import type { OnRenderHtmlAsync } from 'vike/types';
 declare const onRenderHtml: OnRenderHtmlAsync;
+export type Viewport = 'responsive' | number | null;

package/dist/renderer/onRenderHtml.js

@@ -1,21 +1,27 @@
 // https://vike.dev/onRenderHtml
 export { onRenderHtml };
 import React from 'react';
-import { renderToString } from 'react-dom/server';
+import { renderToString, renderToStaticMarkup } from 'react-dom/server';
 import { renderToStream } from 'react-streaming/server';
 import { dangerouslySkipEscape, escapeInject, version } 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);
-    const { headHtml, lang } = getHeadHtml(pageContext);
+    const headHtml = getHeadHtml(pageContext);
+    const { htmlAttributesString, bodyAttributesString } = getTagAttributes(pageContext);
     return escapeInject `<!DOCTYPE html>
-    <html lang='${lang}'>
-      <head>${headHtml}</head>
-      <body>
+    <html${dangerouslySkipEscape(htmlAttributesString)}>
+      <head>
+        <meta charset="UTF-8" />
+        ${headHtml}
+      </head>
+      <body${dangerouslySkipEscape(bodyAttributesString)}>
         <div id="root">${pageHtml}</div>
       </body>
     </html>`;
@@ -46,25 +52,81 @@ async function getPageHtml(pageContext) {
     return pageHtml;
 }
 function getHeadHtml(pageContext) {
-    const title = getHeadSetting('title', pageContext);
+    pageContext._headAlreadySet = true;
     const favicon = getHeadSetting('favicon', pageContext);
-    const lang = getHeadSetting('lang', pageContext) || 'en';
-    const titleTags = !title ? '' : escapeInject `<title>${title}</title><meta property="og:title" content="${title}" />`;
+    const title = getHeadSetting('title', pageContext);
+    const description = getHeadSetting('description', pageContext);
+    const image = getHeadSetting('image', pageContext);
     const faviconTag = !favicon ? '' : escapeInject `<link rel="icon" href="${favicon}" />`;
-    const Head = pageContext.config.Head || (() => React.createElement(React.Fragment, null));
-    let headElement = (React.createElement(PageContextProvider, { pageContext: pageContext },
-        React.createElement(Head, null)));
-    if (pageContext.config.reactStrictMode !== false) {
-        headElement = React.createElement(React.StrictMode, null, headElement);
-    }
-    const headElementHtml = dangerouslySkipEscape(renderToString(headElement));
+    const titleTags = !title ? '' : escapeInject `<title>${title}</title><meta property="og:title" content="${title}" />`;
+    const descriptionTags = !description
+        ? ''
+        : escapeInject `<meta name="description" content="${description}" /><meta property="og:description" content="${description}" />`;
+    const imageTags = !image
+        ? ''
+        : 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()
+        ...(pageContext._configFromHook?.Head ?? [])
+    ]
+        .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 viewportTag = dangerouslySkipEscape(getViewportTag(pageContext.config.viewport));
     const headHtml = escapeInject `
-    <meta charset="UTF-8" />
     ${titleTags}
-    ${headElementHtml}
+    ${headElementsHtml}
+    ${viewportTag}
+    ${descriptionTags}
     ${faviconTag}
+    ${imageTags}
   `;
-    return { headHtml, lang };
+    return headHtml;
+}
+function getHeadElementHtml(Head, pageContext) {
+    let headElement;
+    if (isReactElement(Head)) {
+        headElement = Head;
+    }
+    else {
+        headElement = (React.createElement(PageContextProvider, { pageContext: pageContext },
+            React.createElement(Head, null)));
+    }
+    if (pageContext.config.reactStrictMode !== false) {
+        headElement = React.createElement(React.StrictMode, null, headElement);
+    }
+    return renderToStaticMarkup(headElement);
+}
+function getTagAttributes(pageContext) {
+    let lang = getHeadSetting('lang', pageContext);
+    // Don't set `lang` to its default value if it's `null` (so that users can set it to `null` in order to remove the default value)
+    if (lang === undefined)
+        lang = 'en';
+    const bodyAttributes = mergeTagAttributesList(pageContext.config.bodyAttributes);
+    const htmlAttributes = mergeTagAttributesList(pageContext.config.htmlAttributes);
+    const bodyAttributesString = getTagAttributesString(bodyAttributes);
+    const htmlAttributesString = getTagAttributesString({ ...htmlAttributes, lang: lang ?? htmlAttributes.lang });
+    return { htmlAttributesString, bodyAttributesString };
+}
+function mergeTagAttributesList(tagAttributesList = []) {
+    const tagAttributes = {};
+    tagAttributesList.forEach((tagAttrs) => Object.assign(tagAttributes, tagAttrs));
+    return tagAttributes;
+}
+function getViewportTag(viewport) {
+    if (viewport === 'responsive' || viewport === undefined) {
+        // `user-scalable=no` isn't recommended anymore:
+        //   - https://stackoverflow.com/questions/22354435/to-user-scalable-no-or-not-to-user-scalable-no/22544312#comment120949420_22544312
+        return '<meta name="viewport" content="width=device-width,initial-scale=1">';
+    }
+    if (typeof viewport === 'number') {
+        return `<meta name="viewport" content="width=${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.

package/dist/types/Config.d.ts

@@ -1,11 +1,17 @@
 import type { ImportString, PageContextClient, PageContext } 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 */
             Page?: () => React.ReactNode;
-            /** React element rendered and appended into <head></head> */
-            Head?: () => React.ReactNode;
+            /**
+             * Add arbitrary `<head>` tags.
+             *
+             * https://vike.dev/Head
+             */
+            Head?: Head;
             /**
              * A component that defines the visual layout of the page common to several pages.
              *
@@ -21,25 +27,88 @@ declare global {
              */
             Wrapper?: Wrapper | ImportString;
             /**
-             * ```js
-             * <title>${title}</title>
-             * <meta property="og:title" content="${title}" />
+             * Set the page's tilte.
+             *
+             * Generates:
+             * ```jsx
+             * <head>
+             *   <title>{title}</title>
+             *   <meta property="og:title" content={title} />
+             * </head>
              * ```
+             *
+             * https://vike.dev/title
              */
             title?: PlainOrGetter<string>;
             /**
-             * ```js
-             * <link rel="icon" href="${favicon}" />
+             * Set the page's description.
+             *
+             * Generates:
+             * ```jsx
+             * <head>
+             *   <meta name="description" content={description}>
+             *   <meta property="og:description" content={description}>
+             * </head>
              * ```
+             *
+             * https://vike.dev/description
              */
-            favicon?: PlainOrGetter<string>;
+            description?: PlainOrGetter<string>;
             /**
-             * ```js
-             * <html lang="${lang}">
+             * Set the page's preview image upon URL sharing.
+             *
+             * Generates:
+             * ```jsx
+             * <head>
+             *   <meta property="og:image" content={image}>
+             *   <meta name="twitter:card" content="summary_large_image">
+             * </head>
+             * ```
+             *
+             * https://vike.dev/image
+             */
+            image?: PlainOrGetter<string>;
+            /**
+             * Set the page's width shown to the user on mobile/tablet devices.
+             *
+             * https://vike.dev/viewport
+             *
+             * @default "responsive"
+             */
+            viewport?: Viewport;
+            /**
+             * Set the page's favicon.
+             *
+             * Generates:
+             * ```jsx
+             * <head>
+             *   <link rel="icon" href={favicon} />
+             * </head>
              * ```
+             *
+             * https://vike.dev/favicon
+             */
+            favicon?: PlainOrGetter<string>;
+            /**
+             * Set the page's language (`<html lang>`).
+             *
              * @default 'en'
+             *
+             * https://vike.dev/lang
+             */
+            lang?: PlainOrGetter<string> | null;
+            /**
+             * Add tag attributes such as `<html class="dark">`.
+             *
+             * https://vike.dev/htmlAttributes
              */
-            lang?: PlainOrGetter<string>;
+            htmlAttributes?: TagAttributes;
+            /**
+             * Add tag attributes such as `<body class="dark">`.
+             *
+             * https://vike.dev/bodyAttributes
+             */
+            bodyAttributes?: TagAttributes;
             /**
              * If `true`, the page is rendered twice: on the server-side (to HTML) and on the client-side (hydration).
              *
@@ -97,10 +166,13 @@ declare global {
         interface ConfigResolved {
             Wrapper?: Wrapper[];
             Layout?: Layout[];
+            bodyAttributes?: TagAttributes[];
+            htmlAttributes?: TagAttributes[];
         }
     }
 }
 type PlainOrGetter<T> = T | ((pageContext: PageContext) => T);
+export type Head = React.ReactNode | (() => React.ReactNode);
 type Wrapper = (props: {
     children: React.ReactNode;
 }) => React.ReactNode;
@@ -109,4 +181,14 @@ type Loading = {
     component?: () => React.ReactNode;
     layout?: () => React.ReactNode;
 };
+type PickWithoutGetter<T, K extends keyof T> = {
+    [P in K]: Exclude<T[P], Function>;
+};
+export type ConfigFromHook = PickWithoutGetter<Vike.Config, 'Head' | 'title' | 'description' | 'image'>;
+export type ConfigFromHookResolved = {
+    Head?: Head[];
+    title?: string;
+    description?: string;
+    image?: string;
+};
 export {};

package/dist/types/PageContext.d.ts

@@ -1,6 +1,8 @@
 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 {
@@ -13,3 +15,7 @@ declare global {
         }
     }
 }
+export type PageContextInternal = PageContext & {
+    _configFromHook?: ConfigFromHookResolved;
+    _headAlreadySet?: true;
+};

package/dist/utils/getTagAttributesString.d.ts

@@ -0,0 +1,4 @@
+export { getTagAttributesString };
+export type { TagAttributes };
+type TagAttributes = Record<string, string | number | boolean | undefined | null>;
+declare function getTagAttributesString(tagAttributes: TagAttributes): string;

package/dist/utils/getTagAttributesString.js

@@ -0,0 +1,15 @@
+export { getTagAttributesString };
+function getTagAttributesString(tagAttributes) {
+    const tagAttributesString = Object.entries(tagAttributes)
+        .filter(([_key, value]) => value !== false && value !== null && value !== undefined)
+        .map(([key, value]) => `${ensureIsValidAttributeName(key)}=${JSON.stringify(String(value))}`)
+        .join(' ');
+    if (tagAttributesString.length === 0)
+        return '';
+    return ` ${tagAttributesString}`;
+}
+function ensureIsValidAttributeName(str) {
+    if (/^[a-z][a-z0-9\-]*$/i.test(str) && !str.endsWith('-'))
+        return str;
+    throw new Error(`Invalid HTML tag attribute name ${JSON.stringify(str)}`);
+}

package/dist/utils/isReactElement.d.ts

@@ -0,0 +1,5 @@
+export { isReactElement };
+import React from 'react';
+declare function isReactElement(value: ReactElement | ReactComponent): value is ReactElement;
+type ReactElement = React.ReactNode;
+type ReactComponent = () => ReactElement;

package/dist/utils/isReactElement.js

@@ -0,0 +1,5 @@
+export { isReactElement };
+import { isValidElement } from 'react';
+function isReactElement(value) {
+    return isValidElement(value) || Array.isArray(value);
+}

package/package.json

@@ -1,13 +1,25 @@
 {
   "name": "vike-react",
-  "version": "0.4.18",
+  "version": "0.5.0",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     "./useData": "./dist/hooks/useData.js",
     "./usePageContext": "./dist/hooks/usePageContext.js",
+    "./useConfig": {
+      "browser": "./dist/hooks/useConfig/useConfig-client.js",
+      "default": "./dist/hooks/useConfig/useConfig-server.js"
+    },
     "./ClientOnly": "./dist/components/ClientOnly.js",
+    "./Head": {
+      "browser": "./dist/components/Head/Head-client.js",
+      "default": "./dist/components/Head/Head-server.js"
+    },
+    "./Config": {
+      "browser": "./dist/components/Config/Config-client.js",
+      "default": "./dist/components/Config/Config-server.js"
+    },
     "./clientOnly": "./dist/helpers/clientOnly.js",
     ".": "./dist/index.js",
     "./config": "./dist/+config.js",
@@ -26,7 +38,7 @@
   "peerDependencies": {
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
-    "vike": ">=0.4.178",
+    "vike": ">=0.4.182",
     "vite": ">=4.3.8"
   },
   "devDependencies": {
@@ -39,7 +51,7 @@
     "react-dom": "^18.2.0",
     "rimraf": "^5.0.5",
     "typescript": "^5.5.3",
-    "vike": "^0.4.178"
+    "vike": "^0.4.182"
   },
   "dependencies": {
     "react-streaming": "^0.3.42"
@@ -52,6 +64,15 @@
       "usePageContext": [
         "./dist/hooks/usePageContext.d.ts"
       ],
+      "useConfig": [
+        "./dist/hooks/useConfig/useConfig-server.d.ts"
+      ],
+      "Head": [
+        "./dist/components/Head/Head-server.d.ts"
+      ],
+      "Config": [
+        "./dist/components/Config/Config-server.d.ts"
+      ],
       "ClientOnly": [
         "./dist/components/ClientOnly.d.ts"
       ],