feat: support setting {body,html}Attributes based on pageContext

vikejs · Aug 12, 2024 · ce05a56 · ce05a56
1 parent 4c342bb
commit ce05a56
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/vike-solid/hooks/useConfig/useConfig-server.ts b/vike-solid/hooks/useConfig/useConfig-server.ts
@@ -31,7 +31,7 @@ function useConfig(): (config: ConfigFromHook) => void {
 }
 
 const configsClientSide = ["title"];
-const configsCumulative = ["Head"] as const;
+const configsCumulative = ["Head", "bodyAttributes", "htmlAttributes"] as const;
 function setPageContextConfigFromHook(config: ConfigFromHook, pageContext: PageContext & PageContextInternal) {
   pageContext._configFromHook ??= {};
   objectKeys(config).forEach((configName) => {

diff --git a/vike-solid/renderer/onRenderHtml.tsx b/vike-solid/renderer/onRenderHtml.tsx
@@ -117,8 +117,8 @@ function getTagAttributes(pageContext: PageContextServer) {
   // 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 bodyAttributes = mergeTagAttributesList(getHeadSetting<TagAttributes[]>("bodyAttributes", pageContext));
+  const htmlAttributes = mergeTagAttributesList(getHeadSetting<TagAttributes[]>("htmlAttributes", pageContext));
 
   const bodyAttributesString = getTagAttributesString(bodyAttributes);
   const htmlAttributesString = getTagAttributesString({ ...htmlAttributes, lang: lang ?? htmlAttributes.lang });

diff --git a/vike-solid/types/Config.ts b/vike-solid/types/Config.ts
@@ -121,14 +121,14 @@ declare global {
        *
        * https://vike.dev/htmlAttributes
        */
-      htmlAttributes?: TagAttributes;
+      htmlAttributes?: TagAttributes | ((pageContext: PageContextServer) => TagAttributes | undefined);
 
       /**
        * Add tag attributes such as `<body class="dark">`.
        *
        * https://vike.dev/bodyAttributes
        */
-      bodyAttributes?: TagAttributes;
+      bodyAttributes?: TagAttributes | ((pageContext: PageContextServer) => TagAttributes | undefined);
 
       /**
        * If `true`, the page is rendered twice: on the server-side (to HTML) and on the client-side (hydration).
@@ -177,7 +177,7 @@ type PickWithoutGetter<T, K extends keyof T> = {
 };
 export type ConfigFromHook = PickWithoutGetter<
   Vike.Config,
-  "Head" | "title" | "description" | "image" | "favicon" | "lang" | "viewport"
+  "Head" | "title" | "description" | "image" | "favicon" | "lang" | "viewport" | "bodyAttributes" | "htmlAttributes"
 >;
 export type ConfigFromHookResolved = Omit<ConfigFromHook, ConfigFromHookCumulative> &
   Pick<Vike.ConfigResolved, ConfigFromHookCumulative>;