vike-solid 0.7.1 → 0.7.3-commit-704e0a7

package/dist/+config.d.ts

@@ -1,25 +1,25 @@
 import { ConfigEffect } from 'vike/types';
+import './Config-DOVdsmM1.js';
 import { JSX } from 'solid-js';
-import './Config-CVJUysUv.js';
 
 declare function ssrEffect({ configDefinedAt, configValue }: Parameters<ConfigEffect>[0]): ReturnType<ConfigEffect>;
 
 declare global {
     namespace Vike {
         interface PageContext {
-            /** The root React component of the page */
+            /** The root Solid component of the page */
             Page?: () => JSX.Element;
         }
     }
 }
 
-declare const _default: {
+declare const config: {
     name: string;
     require: {
         vike: string;
     };
-    onRenderHtml: "import:vike-solid/renderer/onRenderHtml:onRenderHtml";
-    onRenderClient: "import:vike-solid/renderer/onRenderClient:onRenderClient";
+    onRenderHtml: "import:vike-solid/__internal/integration/onRenderHtml:onRenderHtml";
+    onRenderClient: "import:vike-solid/__internal/integration/onRenderClient:onRenderClient";
     clientRouting: true;
     hydrationCanBeAborted: true;
     passToClient: string[];
@@ -37,6 +37,13 @@ declare const _default: {
             };
             cumulative: true;
         };
+        Wrapper: {
+            env: {
+                server: true;
+                client: true;
+            };
+            cumulative: true;
+        };
         title: {
             env: {
                 server: true;
@@ -105,4 +112,4 @@ declare const _default: {
     };
 };
 
-export { _default as default };
+export { config };

package/dist/+config.js

@@ -19,15 +19,15 @@ function ssrEffect({
   };
 }
 
-var _config = {
+const config = {
   name: "vike-solid",
   require: {
-    vike: ">=0.4.182"
+    vike: ">=0.4.191"
   },
   // https://vike.dev/onRenderHtml
-  onRenderHtml: "import:vike-solid/renderer/onRenderHtml:onRenderHtml",
+  onRenderHtml: "import:vike-solid/__internal/integration/onRenderHtml:onRenderHtml",
   // https://vike.dev/onRenderClient
-  onRenderClient: "import:vike-solid/renderer/onRenderClient:onRenderClient",
+  onRenderClient: "import:vike-solid/__internal/integration/onRenderClient:onRenderClient",
   // https://vike.dev/clientRouting
   clientRouting: true,
   hydrationCanBeAborted: true,
@@ -47,6 +47,13 @@ var _config = {
       },
       cumulative: true
     },
+    Wrapper: {
+      env: {
+        server: true,
+        client: true
+      },
+      cumulative: true
+    },
     title: {
       env: {
         server: true,
@@ -115,4 +122,4 @@ var _config = {
   }
 };
 
-export { _config as default };
+export { config };

package/dist/{Config-CVJUysUv.d.ts → Config-DOVdsmM1.d.ts}

@@ -1,5 +1,5 @@
+import { PageContextServer, PageContextClient, PageContext } from 'vike/types';
 import { JSX, Component } from 'solid-js';
-import { PageContext, PageContextServer, PageContextClient } from 'vike/types';
 
 type TagAttributes = Record<string, string | number | boolean | undefined | null>;
 
@@ -28,6 +28,12 @@ declare global {
              * https://vike.dev/Layout
              */
             Layout?: Component;
+            /**
+             * A component wrapping the the root component `<Page>`.
+             *
+             * https://vike.dev/Wrapper
+             */
+            Wrapper?: Component;
             /**
              * Set the page's tilte.
              *
@@ -41,7 +47,7 @@ declare global {
              *
              * https://vike.dev/title
              */
-            title?: string | null | ((pageContext: PageContext) => string | null | undefined);
+            title?: string | null | ((pageContext: PageContext_) => string | null | undefined);
             /**
              * Set the page's description.
              *
@@ -98,7 +104,7 @@ declare global {
              *
              * https://vike.dev/lang
              */
-            lang?: string | null | ((pageContext: PageContext) => string | null | undefined);
+            lang?: string | null | ((pageContext: PageContext_) => string | null | undefined);
             /**
              * Add tag attributes such as `<html class="dark">`.
              *
@@ -140,6 +146,7 @@ declare global {
         }
         interface ConfigResolved {
             Layout?: Array<Component>;
+            Wrapper?: Array<Component>;
             Head?: Array<Head>;
             bodyAttributes?: TagAttributes[];
             htmlAttributes?: TagAttributes[];
@@ -147,6 +154,7 @@ declare global {
         }
     }
 }
+type PageContext_ = PageContext;
 type Head = Component | JSX.Element;
 type PickWithoutGetter<T, K extends keyof T> = {
     [P in K]: Exclude<T[P], Function>;

package/dist/applyHeadSettings-BwjKVYXB.js

@@ -0,0 +1,11 @@
+// - 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";
+}
+
+export { applyHeadSettings as a };

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

@@ -1,12 +1,7 @@
-import { C as ConfigFromHook } from '../../Config-CVJUysUv.js';
-import 'solid-js';
+import { C as ConfigFromHook } from '../../Config-DOVdsmM1.js';
 import 'vike/types';
+import 'solid-js';
 
-/**
- * Set configurations inside React components.
- *
- * https://vike.dev/useConfig
- */
 declare function Config(props: ConfigFromHook): null;
 
 export { Config };

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

@@ -3,12 +3,8 @@ import '../../hooks/usePageContext.js';
 import 'solid-js/web';
 import 'solid-js';
 import 'vike/getPageContext';
+import '../../applyHeadSettings-BwjKVYXB.js';
 
-/**
- * Set configurations inside React components.
- *
- * https://vike.dev/useConfig
- */
 function Config(props) {
   const config = useConfig();
   config(props);

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

@@ -1,9 +1,9 @@
-import { C as ConfigFromHook } from '../../Config-CVJUysUv.js';
-import 'solid-js';
+import { C as ConfigFromHook } from '../../Config-DOVdsmM1.js';
 import 'vike/types';
+import 'solid-js';
 
 /**
- * Set configurations inside React components.
+ * Set configurations inside Solid components.
  *
  * https://vike.dev/useConfig
  */

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

@@ -3,9 +3,10 @@ import '../../hooks/usePageContext.js';
 import 'solid-js/web';
 import 'solid-js';
 import 'vike/getPageContext';
+import '../../includes-B0OUVLz0.js';
 
 /**
- * Set configurations inside React components.
+ * Set configurations inside Solid components.
  *
  * https://vike.dev/useConfig
  */

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

@@ -3,6 +3,7 @@ import '../../hooks/usePageContext.js';
 import 'solid-js/web';
 import 'solid-js';
 import 'vike/getPageContext';
+import '../../includes-B0OUVLz0.js';
 
 /**
  * Add arbitrary `<head>` tags.

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

@@ -1,12 +1,7 @@
-import { C as ConfigFromHook } from '../../Config-CVJUysUv.js';
-import 'solid-js';
+import { C as ConfigFromHook } from '../../Config-DOVdsmM1.js';
 import 'vike/types';
+import 'solid-js';
 
-/**
- * Set configurations inside React components and Vike hooks.
- *
- * https://vike.dev/useConfig
- */
 declare function useConfig(): (config: ConfigFromHook) => void;
 
 export { useConfig };

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

@@ -1,25 +1,21 @@
 import { usePageContext } from '../usePageContext.js';
 import { getPageContext } from 'vike/getPageContext';
+import { a as applyHeadSettings } from '../../applyHeadSettings-BwjKVYXB.js';
 import 'solid-js/web';
 import 'solid-js';
 
-/**
- * Set configurations inside React components and Vike hooks.
- *
- * https://vike.dev/useConfig
- */
 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);
     }
   };
 }
@@ -27,11 +23,12 @@ function setPageContextConfigFromHook(config, pageContext) {
   pageContext._configFromHook ??= {};
   Object.assign(pageContext._configFromHook, config);
 }
-function apply(config) {
+function applyHead(config) {
   const {
-    title
+    title,
+    lang
   } = config;
-  if (title) window.document.title = title;
+  applyHeadSettings(title, lang);
 }
 
 export { useConfig };

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

@@ -1,15 +1,12 @@
-import { C as ConfigFromHook } from '../../Config-CVJUysUv.js';
-import 'solid-js';
+import { C as ConfigFromHook } from '../../Config-DOVdsmM1.js';
 import 'vike/types';
-
-type ConfigFromHookCumulative = (typeof configsCumulative)[number];
+import 'solid-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"];
 
-export { type ConfigFromHookCumulative, useConfig };
+export { useConfig };

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

@@ -1,5 +1,6 @@
 import { usePageContext } from '../usePageContext.js';
 import { getPageContext } from 'vike/getPageContext';
+import { i as includes, c as configsCumulative } from '../../includes-B0OUVLz0.js';
 import 'solid-js/web';
 import 'solid-js';
 
@@ -10,19 +11,8 @@ function objectKeys(obj) {
   return Object.keys(obj);
 }
 
-// https://stackoverflow.com/questions/56565528/typescript-const-assertions-how-to-use-array-prototype-includes/74213179#74213179
-/** Same as Array.prototype.includes() but with type inference */
-function includes(values, x) {
-  return values.includes(x);
-}
-/*
-export function includes<Arr extends any[] | readonly any[]>(arr: Arr, el: unknown): el is Arr[number] {
-  return arr.includes(el as any)
-}
-*/
-
 /**
- * Set configurations inside React components and Vike hooks.
+ * Set configurations inside components and Vike hooks.
  *
  * https://vike.dev/useConfig
  */
@@ -31,7 +21,7 @@ function useConfig() {
   let pageContext = getPageContext();
   if (pageContext) return config => setPageContextConfigFromHook(config, pageContext);
 
-  // React component
+  // Component
   pageContext = usePageContext();
   return config => {
     if (!pageContext._headAlreadySet) {
@@ -42,7 +32,6 @@ function useConfig() {
   };
 }
 const configsClientSide = ["title"];
-const configsCumulative = ["Head", "bodyAttributes", "htmlAttributes"];
 function setPageContextConfigFromHook(config, pageContext) {
   pageContext._configFromHook ??= {};
   objectKeys(config).forEach(configName => {

package/dist/includes-B0OUVLz0.js

@@ -0,0 +1,14 @@
+const configsCumulative = ["Head", "bodyAttributes", "htmlAttributes"];
+
+// https://stackoverflow.com/questions/56565528/typescript-const-assertions-how-to-use-array-prototype-includes/74213179#74213179
+/** Same as Array.prototype.includes() but with type inference */
+function includes(values, x) {
+  return values.includes(x);
+}
+/*
+export function includes<Arr extends any[] | readonly any[]>(arr: Arr, el: unknown): el is Arr[number] {
+  return arr.includes(el as any)
+}
+*/
+
+export { configsCumulative as c, includes as i };

package/dist/{renderer → integration}/onRenderClient.js

@@ -1,27 +1,30 @@
 import { createComponent, Dynamic, memo, hydrate, render } from 'solid-js/web';
+import { i as includes, c as configsCumulative } from '../includes-B0OUVLz0.js';
 import { PageContextProvider, usePageContext } from '../hooks/usePageContext.js';
 import { createComputed, createComponent as createComponent$1 } from 'solid-js';
 import { createStore, reconcile } from 'solid-js/store';
+import { providePageContext } from 'vike/getPageContext';
+import { a as applyHeadSettings } from '../applyHeadSettings-BwjKVYXB.js';
 
 function isCallable(thing) {
   return thing instanceof Function || typeof thing === "function";
 }
 
-// We use `any` instead of doing proper validation in order to save KBs sent to the client-side
+// We use `any` instead of doing proper validation in order to save KBs sent to the client-side.
 
-function getHeadSetting(headSetting, pageContext) {
+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 ?? [])];
   }
 }
 
@@ -29,7 +32,7 @@ function getPageElement(pageContext) {
   const page = createComponent(PageContextProvider, {
     pageContext: pageContext,
     get children() {
-      return createComponent(Layout, {
+      return createComponent(Wrapper, {
         get children() {
           return createComponent(Page, {});
         }
@@ -38,23 +41,27 @@ function getPageElement(pageContext) {
   });
   return page;
 }
-function Layout(props) {
+function Wrapper(props) {
   const pageContext = usePageContext();
-  const [layouts, setLayouts] = createStore([]);
+  const [wrappers, setWrappers] = createStore([]);
   createComputed(() => {
-    setLayouts(reconcile(pageContext.config.Layout));
+    setWrappers(reconcile([
+    // Inner wrapping
+    ...(pageContext.config.Layout || []),
+    // Outer wrapping
+    ...(pageContext.config.Wrapper || [])]));
   });
-  const renderLayouts = (i = 0) => {
-    let item = layouts.at(-(i + 1));
+  const renderWrappers = (i = 0) => {
+    let item = wrappers.at(-(i + 1));
     if (!item) return props.children;
     if (typeof item !== "function") item = Passthrough;
     return createComponent$1(item, {
       get children() {
-        return renderLayouts(i + 1);
+        return renderWrappers(i + 1);
       }
     });
   };
-  return renderLayouts();
+  return renderWrappers();
 }
 function Page() {
   const pageContext = usePageContext();
@@ -72,6 +79,7 @@ async function callCumulativeHooks(values, pageContext) {
   if (!values) return [];
   const valuesPromises = values.map(val => {
     if (typeof val === "function") {
+      providePageContext(pageContext);
       // Hook
       return val(pageContext);
     } else {
@@ -88,6 +96,7 @@ const [pageContextStore, setPageContext] = createStore({});
 let dispose;
 let rendered = false;
 const onRenderClient = async pageContext => {
+  pageContext._headAlreadySet = pageContext.isHydration;
   if (!rendered) {
     // Dispose to prevent duplicate pages when navigating.
     if (dispose) dispose();
@@ -107,8 +116,8 @@ const onRenderClient = async pageContext => {
     setPageContext(pageContext);
   }
   if (!pageContext.isHydration) {
-    // E.g. document.title
-    updateDocument(pageContext);
+    pageContext._headAlreadySet = true;
+    applyHead(pageContext);
   }
 
   // Use cases:
@@ -116,17 +125,10 @@ const onRenderClient = async pageContext => {
   // - 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);
 }
 
 export { onRenderClient };

package/dist/{renderer → integration}/onRenderHtml.js

@@ -1,5 +1,6 @@
 import { createComponent, Dynamic, generateHydrationScript, renderToString, renderToStream } from 'solid-js/web';
 import { escapeInject, dangerouslySkipEscape, stampPipe } from 'vike/server';
+import { i as includes, c as configsCumulative } from '../includes-B0OUVLz0.js';
 import { PageContextProvider, usePageContext } from '../hooks/usePageContext.js';
 import { createComputed, createComponent as createComponent$1 } from 'solid-js';
 import { createStore, reconcile } from 'solid-js/store';
@@ -8,21 +9,21 @@ function isCallable(thing) {
   return thing instanceof Function || typeof thing === "function";
 }
 
-// We use `any` instead of doing proper validation in order to save KBs sent to the client-side
+// We use `any` instead of doing proper validation in order to save KBs sent to the client-side.
 
-function getHeadSetting(headSetting, pageContext) {
+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 ?? [])];
   }
 }
 
@@ -30,7 +31,7 @@ function getPageElement(pageContext) {
   const page = createComponent(PageContextProvider, {
     pageContext: pageContext,
     get children() {
-      return createComponent(Layout, {
+      return createComponent(Wrapper, {
         get children() {
           return createComponent(Page, {});
         }
@@ -39,23 +40,27 @@ function getPageElement(pageContext) {
   });
   return page;
 }
-function Layout(props) {
+function Wrapper(props) {
   const pageContext = usePageContext();
-  const [layouts, setLayouts] = createStore([]);
+  const [wrappers, setWrappers] = createStore([]);
   createComputed(() => {
-    setLayouts(reconcile(pageContext.config.Layout));
+    setWrappers(reconcile([
+    // Inner wrapping
+    ...(pageContext.config.Layout || []),
+    // Outer wrapping
+    ...(pageContext.config.Wrapper || [])]));
   });
-  const renderLayouts = (i = 0) => {
-    let item = layouts.at(-(i + 1));
+  const renderWrappers = (i = 0) => {
+    let item = wrappers.at(-(i + 1));
     if (!item) return props.children;
     if (typeof item !== "function") item = Passthrough;
     return createComponent$1(item, {
       get children() {
-        return renderLayouts(i + 1);
+        return renderWrappers(i + 1);
       }
     });
   };
-  return renderLayouts();
+  return renderWrappers();
 }
 function Page() {
   const pageContext = usePageContext();
@@ -86,6 +91,9 @@ const onRenderHtml = async pageContext => {
     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>
@@ -129,9 +137,6 @@ function getHeadHtml(pageContext) {
   ...(pageContext.config.Head ?? []),
   // Added 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 headHtml = escapeInject`
     ${titleTags}
     ${viewportTag}

package/dist/vite-plugin-vike-solid.js

@@ -6,7 +6,7 @@ function overrideConfig() {
     name: "vite-plugin-vike-solid",
     config: () => ({
       optimizeDeps: {
-        include: ["solid-js", "vike-solid/renderer/onRenderClient"]
+        include: ["solid-js", "vike-solid/__internal/integration/onRenderClient"]
       }
     })
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vike-solid",
-  "version": "0.7.1",
+  "version": "0.7.3-commit-704e0a7",
   "type": "module",
   "scripts": {
     "dev": "rollup -c rollup.config.js --watch",
@@ -15,25 +15,26 @@
   },
   "peerDependencies": {
     "solid-js": "^1.8.7",
-    "vike": ">=0.4.182"
+    "vite": ">=5.0.0",
+    "vike": ">=0.4.191"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.9",
-    "@babel/preset-env": "^7.24.8",
+    "@babel/core": "^7.25.2",
+    "@babel/preset-env": "^7.25.4",
     "@babel/preset-typescript": "^7.24.7",
-    "@brillout/release-me": "^0.3.9",
+    "@brillout/release-me": "^0.4.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "@types/node": "^20.14.11",
-    "babel-preset-solid": "^1.8.18",
-    "bumpp": "^9.4.1",
-    "rollup": "^4.19.0",
+    "@types/node": "^22.4.0",
+    "babel-preset-solid": "^1.8.19",
+    "bumpp": "^9.5.2",
+    "rollup": "^4.21.0",
     "rollup-plugin-dts": "^6.1.1",
-    "solid-js": "^1.8.18",
-    "tslib": "^2.6.3",
-    "typescript": "^5.5.3",
-    "vike": "^0.4.183",
-    "vite": "^5.4.0"
+    "solid-js": "^1.8.21",
+    "tslib": "^2.7.0",
+    "typescript": "^5.5.4",
+    "vike": "^0.4.193",
+    "vite": "^5.4.2"
   },
   "exports": {
     "./config": "./dist/+config.js",
@@ -53,8 +54,8 @@
       "default": "./dist/components/Head/Head-server.js"
     },
     "./clientOnly": "./dist/helpers/clientOnly.js",
-    "./renderer/onRenderHtml": "./dist/renderer/onRenderHtml.js",
-    "./renderer/onRenderClient": "./dist/renderer/onRenderClient.js",
+    "./__internal/integration/onRenderHtml": "./dist/integration/onRenderHtml.js",
+    "./__internal/integration/onRenderClient": "./dist/integration/onRenderClient.js",
     "./client": {
       "types": "./client.d.ts"
     }