Merge pull request #107 from vikejs/phonzammi/feat-wrapper

feat: new setting [Wrapper](https://vike.dev/Wrapper)
vikejs · Aug 22, 2024 · 50e3b4d · 50e3b4d
2 parents addbecd + 12eb11e
commit 50e3b4d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 9 deletions.
diff --git a/vike-solid/+config.ts b/vike-solid/+config.ts
@@ -30,6 +30,10 @@ const config = {
       env: { server: true, client: true },
       cumulative: true,
     },
+    Wrapper: {
+      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
@@ -8,37 +8,45 @@ import { createStore, reconcile, type Store } from "solid-js/store";
 export function getPageElement(pageContext: Store<PageContext>): JSX.Element {
   const page = (
     <PageContextProvider pageContext={pageContext}>
-      <Layout>
+      <Wrapper>
         <Page />
-      </Layout>
+      </Wrapper>
     </PageContextProvider>
   );
   return page;
 }
 
-function Layout(props: { children: JSX.Element }) {
+function Wrapper(props: { children: JSX.Element }) {
   const pageContext = usePageContext();
 
-  const [layouts, setLayouts] = createStore<FlowComponent[]>([]);
+  const [wrappers, setWrappers] = createStore<FlowComponent[]>([]);
 
   createComputed(() => {
-    setLayouts(reconcile(pageContext.config.Layout!));
+    setWrappers(
+      reconcile([
+        // Inner wrapping
+        ...(pageContext.config.Layout || []),
+        // Outer wrapping
+        ...(pageContext.config.Wrapper || []),
+      ]),
+    );
   });
-  const renderLayouts = (i: number = 0) => {
-    let item = layouts.at(-(i + 1));
+
+  const renderWrappers = (i: number = 0) => {
+    let item = wrappers.at(-(i + 1));
 
     if (!item) return props.children;
 
     if (typeof item !== "function") item = Passthrough;
 
     return createComponent(item, {
       get children(): JSX.Element {
-        return renderLayouts(i + 1);
+        return renderWrappers(i + 1);
       },
     });
   };
 
-  return renderLayouts();
+  return renderWrappers();
 }
 
 function Page() {

diff --git a/vike-solid/types/Config.ts b/vike-solid/types/Config.ts
@@ -31,6 +31,13 @@ declare global {
        */
       Layout?: Component;
 
+      /**
+       * A component wrapping the the root component `<Page>`.
+       *
+       * https://vike.dev/Wrapper
+       */
+      Wrapper?: Component;
+
       /**
        * Set the page's tilte.
        *
@@ -153,6 +160,7 @@ declare global {
     }
     interface ConfigResolved {
       Layout?: Array<Component>;
+      Wrapper?: Array<Component>;
       Head?: Array<Head>;
       bodyAttributes?: TagAttributes[];
       htmlAttributes?: TagAttributes[];