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 13, 2024 · 92f8da4 · 92f8da4
1 parent 35f68a0
commit 92f8da4
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git a/packages/vike-react/src/+config.ts b/packages/vike-react/src/+config.ts
@@ -31,7 +31,8 @@ export default {
       env: { server: true }
     },
     Layout: {
-      env: { server: true, client: true }
+      env: { server: true, client: true },
+      cumulative: true
     },
     title: {
       env: { server: true, client: true }

diff --git a/packages/vike-react/src/renderer/getPageElement.tsx b/packages/vike-react/src/renderer/getPageElement.tsx
@@ -1,17 +1,20 @@
 export { getPageElement }
 
-import React, { type ReactNode } from 'react'
+import React from 'react'
 import type { PageContext } from 'vike/types'
 import { PageContextProvider } from '../hooks/usePageContext.js'
 
 function getPageElement(pageContext: PageContext): JSX.Element {
-  // Main component
-  const Layout = pageContext.config.Layout ?? PassThrough
   const { Page } = pageContext
-  let page = <Layout>{Page ? <Page /> : null}</Layout>
+  let page = Page ? <Page /> : null
 
-  // Wrapper components
-  ;(pageContext.config.Wrapper || []).forEach((Wrapper) => {
+  // Wrapping
+  ;[
+    // Inner wrapping
+    ...(pageContext.config.Layout || []),
+    // Outer wrapping
+    ...(pageContext.config.Wrapper || [])
+  ].forEach((Wrapper) => {
     page = <Wrapper>{page}</Wrapper>
   })
   page = <PageContextProvider pageContext={pageContext}>{page}</PageContextProvider>
@@ -21,7 +24,3 @@ function getPageElement(pageContext: PageContext): JSX.Element {
 
   return page
 }
-
-function PassThrough({ children }: { children: ReactNode }) {
-  return <>{children}</>
-}
diff --git a/packages/vike-react/src/types/Config.ts b/packages/vike-react/src/types/Config.ts
@@ -17,7 +17,7 @@ declare global {
        *
        * https://vike.dev/Layout
        */
-      Layout?: (props: { children: React.ReactNode }) => React.ReactNode
+      Layout?: Layout
 
       /**
        * A component wrapping the the root component `<Page>`.
@@ -93,8 +93,10 @@ declare global {
     }
     interface ConfigResolved {
       Wrapper?: Wrapper[]
+      Layout?: Layout[]
     }
   }
 }
 
 type Wrapper = (props: { children: React.ReactNode }) => React.ReactNode
+type Layout = Wrapper