From 697a0b0bc4e4f7fc267dc5d3627a9b9f9723470d Mon Sep 17 00:00:00 2001
From: Blankeos <carloantonioct@gmail.com>
Date: Fri, 14 Jun 2024 02:32:17 +0800
Subject: [PATCH] feat: make Layout setting cumulative

Will amend to this commit later.
---
 vike-solid/+config.ts                  |  1 +
 vike-solid/package.json                |  2 +-
 vike-solid/renderer/getPageElement.tsx | 34 +++++++++++++++++++++-----
 vike-solid/types/index.ts              |  5 +++-
 4 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/vike-solid/+config.ts b/vike-solid/+config.ts
index 12c5b3d..058d0ce 100644
--- 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
index e213590..38ebc99 100644
--- 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
index 7d40906..00c024c 100644
--- 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
index 135cc10..69c6a1e 100644
--- 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;