Merge pull request #365 from gadget-inc/bootprops

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

Author: airhorns

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

@@ -1195,6 +1195,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"
@@ -1361,17 +1369,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/[email protected]", "@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" "*"
@@ -5697,6 +5705,11 @@ [email protected]:
     yauzl "2.10.0"
     yazl "2.5.1"
 
+[email protected]:
+  version "1.23.0"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.23.0.tgz#51e24121b3a5bbe759d79738d8eff7a63156293c"
+  integrity sha512-Zzhyr5RZGoJ1ek2sgfJCt2076kdOg8hnNwFBqAYeLySiutXyxSQk93vZ5gbnFiWV1sHvueCcwla9n35acUTxtA==
+
 [email protected]:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-6.0.0.tgz#ca9e5d2aa48db0228a52c419c3308e87720da821"
@@ -5882,7 +5895,15 @@ [email protected]:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-react-dom@*, [email protected]:
+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"
+
+[email protected]:
   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==
@@ -5906,7 +5927,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@*, [email protected]:
+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"
+
+[email protected]:
   version "0.0.0-experimental-4ead6b530"
   resolved "https://registry.yarnpkg.com/react/-/react-0.0.0-experimental-4ead6b530.tgz#88cdae012012a758dd039a63104758c6351115df"
   integrity sha512-tpbYm6FEuC1L6tCVXIKYAhgGAkS8DShzKpmXosowZvLqeByeLQQe77Ef6bi5HdEkFm2v0lZffLWckSM8R4TToA==
@@ -6165,6 +6193,13 @@ [email protected]:
     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"