vike-react 0.5.2 → 0.5.3

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

@@ -14,6 +14,8 @@ 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>
@@ -74,8 +76,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 { 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 {
@@ -195,5 +195,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

@@ -16,5 +16,5 @@ declare global {
 }
 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",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",