feat: make Layout setting cumulative

BREAKING CHANGE: The `Layout` setting cannot be overriden anymore because it's now cumulative, see: - https://vike.dev/Layout#multiple-layouts - https://vike.dev/Layout#nested-layouts
vikejs · Jun 18, 2024 · 33eadc7 · 33eadc7
1 parent 8affcc5
commit 33eadc7
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 10 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/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 { JSX, FlowComponent, FlowProps, ParentComponent } from "solid-js";
+import { createComponent, createComputed, createEffect, createMemo, For } 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,27 @@ 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, setLayouts] = createStore<FlowComponent[]>([]);
+
+  createComputed(() => {
+    setLayouts(reconcile(pageContext.config.Layout!));
+  })
+  const renderLayouts = (i: number = 0) => {
+    let item: FlowComponent = layouts[i];
+
+    if (!item) return props.children;
+
+    if (typeof item !== "function") item = Passthrough;
+
+    return createComponent(item, {
+      get children(): JSX.Element {
+        return renderLayouts(i + 1);
+      },
+    });
+  };
+
+  return renderLayouts();
 }
 
 function Page() {
@@ -37,3 +54,20 @@ function Page() {
 function Passthrough(props: { children: JSX.Element }) {
   return <>{props.children}</>;
 }
+
+/**
+ * Utility for tracking non-primitive values inside a store. (e.g. Arrays, Objects, Functions).
+ *
+ * Otherwise, your createMemo or createEffect won't run even if it actually changed.
+ *
+ * Reference: https://github.com/solidjs/solid/discussions/829#discussioncomment-2102335
+ */
+function deepTrack(store: any) {
+  for (const k in store) {
+    const value = store[k];
+    if (typeof value === "object") {
+      deepTrack(value);
+    }
+  }
+}
+
diff --git a/vike-solid/renderer/onRenderClient.tsx b/vike-solid/renderer/onRenderClient.tsx
@@ -5,7 +5,7 @@ import { hydrate, render } from "solid-js/web";
 import { getHeadSetting } from "./getHeadSetting.js";
 import type { OnRenderClientAsync, PageContextClient } from "vike/types";
 import { getPageElement } from "./getPageElement.js";
-import { createStore, reconcile } from "solid-js/store";
+import { createStore, produce, reconcile } from "solid-js/store";
 
 const [pageContextStore, setPageContext] = createStore<PageContextClient>(
   {} as PageContextClient
@@ -17,6 +17,9 @@ let rendered = false;
 const onRenderClient: OnRenderClientAsync = async (
   pageContext
 ): ReturnType<OnRenderClientAsync> => {
+  // Reverse the layouts.
+  pageContext.config.Layout = pageContext.config.Layout?.toReversed() ?? [];
+
   if (!rendered) {
     // Dispose to prevent duplicate pages when navigating.
     if (dispose) dispose();
@@ -35,7 +38,7 @@ const onRenderClient: OnRenderClientAsync = async (
   } else {
     // Client-side navigation
 
-    setPageContext(reconcile(pageContext));
+    setPageContext(pageContext);
 
     const title = getHeadSetting("title", pageContext) || "";
     const lang = getHeadSetting("lang", pageContext) || "en";

diff --git a/vike-solid/renderer/onRenderHtml.tsx b/vike-solid/renderer/onRenderHtml.tsx
@@ -22,6 +22,9 @@ checkVikeVersion();
 const onRenderHtml: OnRenderHtmlAsync = async (
   pageContext
 ): ReturnType<OnRenderHtmlAsync> => {
+  // Reverse the layouts.
+  pageContext.config.Layout = pageContext.config.Layout?.toReversed() ?? [];
+
   const title = getHeadSetting("title", pageContext);
   const favicon = getHeadSetting("favicon", pageContext);
   const lang = getHeadSetting("lang", pageContext) || "en";

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;