feat: make Layout setting cumulative

examples/full/pages/+Layout.tsx

@@ -20,6 +20,7 @@ function Layout({ children }: { children: React.ReactNode }) {
         <Link href="/star-wars">Data Fetching</Link>
         <Link href="/streaming">HTML Streaming</Link>
         <Link href="/without-ssr">Without SSR</Link>
+        <Link href="/starship">Nested Layout</Link>
       </Sidebar>
       <Content>{children}</Content>
     </div>

examples/full/pages/starship/+Layout.tsx

@@ -0,0 +1,114 @@
+export { Layout }
+
+import React, { useState } from 'react'
+
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <h1>Starship 🚀</h1>
+      <p>
+        <b>
+          This page uses the layout <code>/pages/+Layout.tsx</code> with a nested layout{' '}
+          <code>/pages/starship/+Layout.tsx</code>.
+        </b>
+      </p>
+      <p>
+        <b>
+          State is preserved upon navigating within the nested layout. Click on the counter then on the links below:
+          observe how the counter state is preserved.
+        </b>{' '}
+        <Counter />
+      </p>
+      <br />
+      <div>
+        <Link href="/starship">Overview</Link> <Link href="/starship/reviews">Reviews</Link>{' '}
+        <Link href="/starship/spec">Tech Spec</Link>
+      </div>
+      <div style={{ marginTop: 20, border: '1px solid black', padding: '10px 40px' }}>{children}</div>
+      <br />
+      <p>
+        <b>The scroll position is preserved when navigating the nested layout.</b>
+      </p>
+      <DummyText />
+    </>
+  )
+}
+
+function Link(props: any) {
+  // We set `keep-scroll-position` to tell Vike to preserve the current scroll position
+  return <a keep-scroll-position="" style={{ marginRight: 10, ...props.style }} {...props} />
+}
+
+function Counter() {
+  const [count, setCount] = useState(0)
+  return (
+    <button type="button" onClick={() => setCount((count) => count + 1)}>
+      Counter {count}
+    </button>
+  )
+}
+
+function DummyText() {
+  return (
+    <>
+      <p>
+        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum
+        sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies
+        nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel,
+        aliquet nec, vulputate eget, arcu.
+      </p>
+      <p>
+        In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
+        Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo
+        ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat
+        a, tellus.
+      </p>
+      <p>
+        Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel
+        augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget
+        condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit
+        vel, luctus pulvinar, hendrerit id, lorem.
+      </p>
+      <p>
+        Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante.
+        Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales
+        sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a
+        libero. Fusce vulputate eleifend sapien.
+      </p>
+      <p>
+        Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras
+        ultricies mi eu turpis hendrerit fringilla. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
+        posuere cubilia Curae; In ac dui quis mi consectetuer lacinia. Nam pretium turpis et arcu.
+      </p>
+      <p>
+        Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed aliquam ultrices mauris. Integer
+        ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Praesent adipiscing. Phasellus ullamcorper ipsum
+        rutrum nunc. Nunc nonummy metus. Vestibulum volutpat pretium libero. Cras id dui. Aenean ut eros et nisl
+        sagittis vestibulum.
+      </p>
+      <p>
+        Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Sed lectus. Donec mollis hendrerit
+        risus. Phasellus nec sem in justo pellentesque facilisis. Etiam imperdiet imperdiet orci. Nunc nec neque.
+        Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non,
+        euismod vitae, posuere imperdiet, leo.
+      </p>
+      <p>
+        Maecenas malesuada. Praesent congue erat at massa. Sed cursus turpis vitae tortor. Donec posuere vulputate arcu.
+        Phasellus accumsan cursus velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere
+        cubilia Curae; Sed aliquam, nisi quis porttitor congue, elit erat euismod orci, ac placerat dolor lectus quis
+        orci. Phasellus consectetuer vestibulum elit.
+      </p>
+      <p>
+        Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Vestibulum fringilla pede sit amet augue. In
+        turpis. Pellentesque posuere. Praesent turpis. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit
+        nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales nec, volutpat a, suscipit non,
+        turpis. Nullam sagittis.
+      </p>
+      <p>
+        Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis
+        nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut
+        varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque.
+      </p>
+    </>
+  )
+}

examples/full/pages/starship/+Page.tsx

@@ -0,0 +1,14 @@
+export { Page }
+
+import React from 'react'
+
+function Page() {
+  return (
+    <>
+      <h2>Overview</h2>
+      <p>The Starship will, at term, repalce all SpaceX's rocket models.</p>
+      <p>The mission: Make life multi planetary.</p>
+      <p>Starship drastically reduces the cost of sending payload to space, ensuring SpaceX's financial prosperity.</p>
+    </>
+  )
+}

examples/full/pages/starship/reviews/+Page.tsx

@@ -0,0 +1,13 @@
+export { Page }
+
+import React from 'react'
+
+function Page() {
+  return (
+    <>
+      <h2>Reviews</h2>
+      <p>"The Starship brought me and my family to Mars safely." -- Anonymous Family</p>
+      <p>"A handful of Starships was enough to set up SkyNet. It worked like a charm." -- Skynet Research</p>
+    </>
+  )
+}

examples/full/pages/starship/spec/+Page.tsx

@@ -0,0 +1,20 @@
+export { Page }
+
+import React from 'react'
+
+function Page() {
+  return (
+    <>
+      <h2>Spec</h2>
+      <pre>
+        {[
+          'HEIGHT                  50 m / 164 ft',
+          'DIAMETER                9 m / 30 ft',
+          'PROPELLANT CAPACITY     1200 t / 2.6 Mlb',
+          'THRUST                  1500 tf / 3.2Mlbf',
+          'PAYLOAD CAPACITY        100-150 t orbit dependent'
+        ].join('\n')}
+      </pre>
+    </>
+  )
+}

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 }

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}</>
-}

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