feat: make Layout setting cumulative

Will amend to this commit later.
vikejs · Jun 16, 2024 · 697a0b0 · 697a0b0
1 parent c664faa
commit 697a0b0
Show file tree

Hide file tree

Showing 4 changed files with 34 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
@@ -1,9 +1,10 @@
 import type { PageContext } from "vike/types";
 import { PageContextProvider } from "./PageContextProvider.js";
 import { usePageContext } from "../hooks/usePageContext.js";
-import type { JSX } from "solid-js";
+import type { FlowComponent, JSX } from "solid-js";
+import { createComponent, createEffect, createMemo } from "solid-js";
 import { Dynamic } from "solid-js/web";
-import type { Store } from "solid-js/store";
+import { createStore, reconcile, unwrap, type Store } from "solid-js/store";
 
 export function getPageElement(pageContext: Store<PageContext>): JSX.Element {
   const page = (
@@ -18,11 +19,32 @@ 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 [layoutStore, setLayoutStore] = createStore(
+    pageContext.config.Layout?.toReversed() as FlowComponent[]
   );
+
+  createEffect(() => {
+    setLayoutStore(
+      reconcile(pageContext.config.Layout?.toReversed() as FlowComponent[])
+    );
+  });
+
+  const fn = (i: number) => {
+    let item: FlowComponent = layoutStore[i];
+
+    if (!item) return props.children;
+
+    const layoutProps: { children: JSX.Element } = {
+      get children() {
+        return fn(i + 1);
+      },
+    };
+
+    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;