Give layouts access to the props that the app is booted with

packages/fastify-renderer/src/client/react/Root.tsx

@@ -8,13 +8,18 @@ export interface LayoutProps {
  isNavigating: boolean
  navigationDestination: string
  children: React.ReactNode
+ bootProps: Record<string, any>
 }
 
-const RouteTable = (props: { Layout: React.FunctionComponent<LayoutProps>; routes: JSX.Element[] }) => {
+const RouteTable = (props: {
+ Layout: React.FunctionComponent<LayoutProps>
+ routes: JSX.Element[]
+ bootProps: Record<string, any>
+}) => {
  const [isNavigating, navigationDestination] = useNavigationDetails()
 
  return (
- <props.Layout isNavigating={isNavigating} navigationDestination={navigationDestination}>
+ <props.Layout isNavigating={isNavigating} navigationDestination={navigationDestination} bootProps={props.bootProps}>
  <Switch>{props.routes}</Switch>
  </props.Layout>
  )
@@ -75,7 +80,7 @@ export function Root<BootProps>(props: {
 
  return (
  <Router base={props.basePath} hook={useTransitionLocation as any} matcher={matcher}>
- <RouteTable routes={routes} Layout={props.Layout} />
+ <RouteTable routes={routes} Layout={props.Layout} bootProps={props.bootProps} />
  </Router>
  )
 }

packages/test-apps/simple-react/BootPropsLayout.tsx

@@ -0,0 +1,14 @@
+import React, { Suspense } from 'react'
+
+const Layout = (props: { children: React.ReactNode; bootProps: Record<string, any> }) => {
+ return (
+ <Suspense fallback={<div>Loading...</div>}>
+ <pre id="bootprops">
+ <code>{JSON.stringify(props.bootProps)}</code>
+ </pre>
+ {props.children}
+ </Suspense>
+ )
+}
+
+export default Layout

packages/test-apps/simple-react/Home.tsx

@@ -15,6 +15,8 @@ const Home = (props: { time: number }) => {
  Red About
  </Link>
  <br />
+ <Link href="~/bootprops/test">Boot props test</Link>
+ <br />
  <Link href="navigation-test"> Navigation Test </Link>
  </>
  )

packages/test-apps/simple-react/package.json

@@ -14,6 +14,7 @@
  "react-dom": "*"
  },
  "devDependencies": {
+ "@playwright/test": "^1.23.0",
  "html-validator": "^5.1.18"
  }
 }

packages/test-apps/simple-react/server.ts

@@ -71,13 +71,23 @@ export const server = async () => {
  })
  })
 
+ await server.register(async (instance) => {
+ instance.setRenderConfig({ base: '/bootprops', layout: require.resolve('./BootPropsLayout') })
+
+ instance.get('/bootprops/test', { render: require.resolve('./About') }, async (request) => {
+ return { hostname: os.hostname(), requestIP: request.ip, bootProp: 'this is a boot prop' }
+ })
+ })
+
  await server.ready()
  return server
 }
 
 if (require.main === module) {
  void server().then((server) => {
  console.warn(server.printRoutes())
- return server.listen(3000)
+ return server.listen(3000).then((address) => {
+ console.warn(`Test server listening on ${address}`)
+ })
  })
 }

packages/test-apps/simple-react/test/boot-props.spec.ts

@@ -0,0 +1,17 @@
+import { expect } from '@playwright/test'
+import { Page } from 'playwright-chromium'
+import { newTestPage, reactReady, rootURL } from '../../helpers'
+
+describe('boot props', () => {
+ let page: Page
+
+ beforeEach(async () => {
+ page = await newTestPage()
+ })
+
+ test('should make the boot props available to the layout', async () => {
+ await page.goto(`${rootURL}/bootprops/test`)
+ await reactReady(page)
+ await (expect(page.locator('#bootprops')) as any).toContainText('this is a boot prop')
+ })
+})

yarn.lock

@@ -1190,6 +1190,14 @@
  resolved "https://registry.yarnpkg.com/@opentelemetry/api/-/api-1.1.0.tgz#563539048255bbe1a5f4f586a4a10a1bb737f44a"
  integrity sha512-hf+3bwuBwtXsugA2ULBc95qxrOqP2pOekLz34BJhcAKawt94vfeNyUKpYc0lZQ/3sCP6LqRa7UAdHA7i5UODzQ==
 
+"@playwright/test@^1.23.0":
+ version "1.23.0"
+ resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.23.0.tgz#5d07ace37e1598a4a1a785b07856620b4e26fc43"
+ integrity sha512-RPWI8AHBVBiDyfTuxi1BhOaY3yaVy3S5ZsGKkSGGeWpZtSgN4SerInCYvgh9+EunIAK4RJQo+bzupbAn5pVqHQ==
+ dependencies:
+ "@types/node" "*"
+ playwright-core "1.23.0"
+
 "@rollup/pluginutils@^4.1.1":
  version "4.1.1"
  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-4.1.1.tgz#1d4da86dd4eded15656a57d933fda2b9a08d47ec"
@@ -1356,17 +1364,17 @@
  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
-"@types/react-dom@17.0.4", "@types/react-dom@^17.0.11":
- version "17.0.4"
- resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.4.tgz#d65159a847aca2a0fc87a7544a2f8fece8754d04"
- integrity sha512-Wb6rlnPJfqbhpkvYN39y1NM/pOGGPzzIRquu0RdUMvTwgXNvASFO7pdtrtvyxGTQNb9wzBaQxXAWDdEqegZw2A==
+"@types/react-dom@^17.0.11":
+ version "17.0.17"
+ resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.17.tgz#2e3743277a793a96a99f1bf87614598289da68a1"
+ integrity sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==
  dependencies:
- "@types/react" "*"
+ "@types/react" "^17"
 
-"@types/react@*", "@types/react@17.0.4", "@types/react@^17.0.43":
- version "17.0.4"
- resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.4.tgz#a67c6f7a460d2660e950d9ccc1c2f18525c28220"
- integrity sha512-onz2BqScSFMoTRdJUZUDD/7xrusM8hBA2Fktk2qgaTYPCgPvWnDEgkrOs8hhPUf2jfcIXkJ5yK6VfYormJS3Jw==
+"@types/react@^17", "@types/react@^17.0.43":
+ version "17.0.47"
+ resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.47.tgz#4ee71aaf4c5a9e290e03aa4d0d313c5d666b3b78"
+ integrity sha512-mk0BL8zBinf2ozNr3qPnlu1oyVTYq+4V7WA76RgxUAtf0Em/Wbid38KN6n4abEkvO4xMTBWmnP1FtQzgkEiJoA==
  dependencies:
  "@types/prop-types" "*"
  "@types/scheduler" "*"
@@ -5573,6 +5581,11 @@ playwright-core@1.21.0:
  yauzl "2.10.0"
  yazl "2.5.1"
 
+playwright-core@1.23.0:
+ version "1.23.0"
+ resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.23.0.tgz#51e24121b3a5bbe759d79738d8eff7a63156293c"
+ integrity sha512-Zzhyr5RZGoJ1ek2sgfJCt2076kdOg8hnNwFBqAYeLySiutXyxSQk93vZ5gbnFiWV1sHvueCcwla9n35acUTxtA==
+
 pngjs@6.0.0:
  version "6.0.0"
  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-6.0.0.tgz#ca9e5d2aa48db0228a52c419c3308e87720da821"
@@ -5758,7 +5771,15 @@ raw-body@2.4.0:
  iconv-lite "0.4.24"
  unpipe "1.0.0"
 
-react-dom@*, react-dom@0.0.0-experimental-4ead6b530:
+react-dom@*:
+ version "18.2.0"
+ resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
+ integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+ dependencies:
+ loose-envify "^1.1.0"
+ scheduler "^0.23.0"
+
+react-dom@0.0.0-experimental-4ead6b530:
  version "0.0.0-experimental-4ead6b530"
  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-experimental-4ead6b530.tgz#6ca831f5aa7ab86f7299b9a2f7b81dffabfa4eb4"
  integrity sha512-a03ptS8lhhEENNgne6zQMXQWX/Z6WMEBGJQY0laOC0NgJywidePYpgkiE72fUAaj/r7t9a6XsdVyqx4UsEZijg==
@@ -5782,7 +5803,14 @@ react-refresh@^0.10.0:
  resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.10.0.tgz#2f536c9660c0b9b1d500684d9e52a65e7404f7e3"
  integrity sha512-PgidR3wST3dDYKr6b4pJoqQFpPGNKDSCDx4cZoshjXipw3LzO7mG1My2pwEzz2JVkF+inx3xRpDeQLFQGH/hsQ==
 
-react@*, react@0.0.0-experimental-4ead6b530:
+react@*:
+ version "18.2.0"
+ resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
+ integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+ dependencies:
+ loose-envify "^1.1.0"
+
+react@0.0.0-experimental-4ead6b530:
  version "0.0.0-experimental-4ead6b530"
  resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-4ead6b530.tgz#88cdae012012a758dd039a63104758c6351115df"
  integrity sha512-tpbYm6FEuC1L6tCVXIKYAhgGAkS8DShzKpmXosowZvLqeByeLQQe77Ef6bi5HdEkFm2v0lZffLWckSM8R4TToA==
@@ -6032,6 +6060,13 @@ scheduler@0.0.0-experimental-4ead6b530:
  loose-envify "^1.1.0"
  object-assign "^4.1.1"
 
+scheduler@^0.23.0:
+ version "0.23.0"
+ resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
+ integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+ dependencies:
+ loose-envify "^1.1.0"
+
 secure-json-parse@^2.0.0:
  version "2.4.0"
  resolved "https://registry.yarnpkg.com/secure-json-parse/-/secure-json-parse-2.4.0.tgz#5aaeaaef85c7a417f76271a4f5b0cc3315ddca85"