React: fix layout shortcut

Author: skryukov

packages/react/src/App.ts

@@ -10,7 +10,7 @@ import {
 import { createElement, FunctionComponent, ReactNode, useEffect, useMemo, useState } from 'react'
 import HeadContext from './HeadContext'
 import PageContext from './PageContext'
-import { LayoutFunction, ReactComponent, ReactPageHandlerArgs } from './types'
+import { LayoutComponent, LayoutFunction, ReactComponent, ReactPageHandlerArgs } from './types'
 
 let currentIsInitialPage = true
 let routerIsInitialized = false
@@ -101,19 +101,22 @@ export default function App<SharedProps extends PageProps = PageProps>({
     children ||
     (({ Component, props, key }) => {
       const child = createElement(Component, { key, ...props })
-
-      if (typeof Component.layout === 'function') {
-        return (Component.layout as LayoutFunction)(child)
-      }
-
-      if (Array.isArray(Component.layout)) {
-        return (Component.layout as any)
-          .concat(child)
-          .reverse()
-          .reduce((children: any, Layout: any) => createElement(Layout, { children, ...props }))
+      const layout = Component.layout
+      if (!layout) return child
+
+      if (typeof layout === 'function') {
+        try {
+          return (layout as LayoutFunction)(child)
+        } catch {
+          return createElement(layout as LayoutComponent, { ...props, children: child })
+        }
       }
 
-      return child
+      const layouts = Array.isArray(layout) ? layout : [layout]
+      return layouts.reduceRight<ReactNode>(
+        (acc, Layout) => createElement(Layout as LayoutComponent, { ...props, children: acc }),
+        child,
+      )
     })
 
   return createElement(

packages/react/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageA.tsx

@@ -13,12 +13,6 @@ const PageA = () => {
   )
 }
 
-PageA.layout = (page: React.ReactNode) => {
-  return (
-    <SiteLayout>
-      <NestedLayout children={page} />
-    </SiteLayout>
-  )
-}
+PageA.layout = [SiteLayout, NestedLayout]
 
 export default PageA

packages/react/test-app/Pages/PersistentLayouts/Shorthand/Nested/PageB.tsx

@@ -13,12 +13,6 @@ const PageB = () => {
   )
 }
 
-PageB.layout = (page: React.ReactNode) => {
-  return (
-    <SiteLayout>
-      <NestedLayout children={page} />
-    </SiteLayout>
-  )
-}
+PageB.layout = [SiteLayout, NestedLayout]
 
 export default PageB

packages/react/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageA.tsx

@@ -12,6 +12,6 @@ const PageA = () => {
   )
 }
 
-PageA.layout = (page: React.ReactNode) => <SiteLayout children={page} />
+PageA.layout = SiteLayout
 
 export default PageA

packages/react/test-app/Pages/PersistentLayouts/Shorthand/Simple/PageB.tsx

@@ -12,6 +12,6 @@ const PageB = () => {
   )
 }
 
-PageB.layout = (page: React.ReactNode) => <SiteLayout children={page} />
+PageB.layout = SiteLayout
 
 export default PageB