feat: make Layout setting cumulative

Will amend to this commit later.
vikejs · Jun 14, 2024 · e43ac4c · e43ac4c
1 parent c664faa
commit e43ac4c
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 8 deletions.
diff --git a/vike-solid/+config.ts b/vike-solid/+config.ts
@@ -45,6 +45,7 @@ const config = {
     },
     Layout: {
       env: { server: true, client: true },
+      cumulative: true,
     },
     title: {
       env: { server: true, client: true },

diff --git a/vike-solid/package.json b/vike-solid/package.json
@@ -29,7 +29,7 @@
     "solid-js": "^1.8.17",
     "tslib": "^2.6.3",
     "typescript": "^5.4.5",
-    "vike": "^0.4.174",
+    "vike": "^0.4.176",
     "vite": "^5.2.13"
   },
   "exports": {

diff --git a/vike-solid/renderer/getPageElement.tsx b/vike-solid/renderer/getPageElement.tsx
@@ -2,8 +2,9 @@ import type { PageContext } from "vike/types";
 import { PageContextProvider } from "./PageContextProvider.js";
 import { usePageContext } from "../hooks/usePageContext.js";
 import type { JSX } from "solid-js";
+import { createComponent, createMemo } from "solid-js";
 import { Dynamic } from "solid-js/web";
-import type { Store } from "solid-js/store";
+import { type Store } from "solid-js/store";
 
 export function getPageElement(pageContext: Store<PageContext>): JSX.Element {
   const page = (
@@ -18,11 +19,31 @@ export function getPageElement(pageContext: Store<PageContext>): JSX.Element {
 
 function Layout(props: { children: JSX.Element }) {
   const pageContext = usePageContext();
-  return (
-    <Dynamic component={pageContext.config.Layout ?? Passthrough}>
-      {props.children}
-    </Dynamic>
-  );
+
+  const layouts = createMemo(() => {
+    return pageContext.config.Layout?.toReversed() ?? [];
+  });
+
+  const fn = (i: number) => {
+    let item: any = layouts()[i];
+
+    if (!item) return props.children;
+
+    const layoutProps: { value?: any; children: JSX.Element } = {
+      get children() {
+        return fn(i + 1);
+      },
+    };
+    if (Array.isArray(item)) {
+      layoutProps.value = item[1];
+      item = item[0];
+      if (typeof item !== "function") item = Passthrough;
+    }
+
+    return createComponent(item, layoutProps);
+  };
+
+  return fn(0);
 }
 
 function Page() {

diff --git a/vike-solid/types/index.ts b/vike-solid/types/index.ts
@@ -1,11 +1,14 @@
 export type { Component } from "solid-js";
 
-import type { JSX } from "solid-js";
+import type { Component, JSX } from "solid-js";
 
 type Page = () => JSX.Element;
 
 declare global {
   namespace Vike {
+    interface ConfigResolved {
+      Layout?: Array<Component>;
+    }
     interface PageContext {
       // Page is undefined in onRenderHtml() when setting the `ssr` config flag to `false`
       Page?: Page;