implement route serialization/deserialization

Author: hajinsuha1

packages/pwa-kit-react-sdk/src/ssr/browser/main.jsx

@@ -132,10 +132,40 @@ export const start = async () => {
         locals
     })
 
+    // Await the async getRoutes function
+    let routes = await getRoutes(locals)
+
+    // Deserialize routes
+    let serializedRoutes = window.__CONFIG__.app.routes
+    serializedRoutes = serializedRoutes.map(
+        ({path, componentName, componentProps}) => {
+            let component = routes.find((route) =>
+                route.component?.displayName?.includes(componentName)
+            )?.component
+            if (!component) {
+                // TODO: Error handling if given component couldn't be found
+                console.error('Component', componentName, 'could not be deserialized for path', path)
+                return
+            }
+
+            if (componentProps) {
+                const Component = component
+                component = () => <Component {...componentProps} />
+            }
+            return {
+                path,
+                exact: true,
+                component
+            }
+        }
+    )
+    serializedRoutes = serializedRoutes.filter((route) => !!route)
+    routes = serializedRoutes
+
     const props = {
         error: window.__ERROR__,
         locals: locals,
-        routes: getRoutes(locals),
+        routes: routes,
         extensions: applicationExtensions,
         WrappedApp
     }

packages/pwa-kit-react-sdk/src/ssr/server/react-rendering.js

@@ -139,7 +139,7 @@ export const render = async (req, res, next) => {
         locals: res.locals
     })
 
-    let routes = getRoutes(res.locals)
+    let routes = await getRoutes(res.locals, req)
 
     const [pathname] = req.originalUrl.split('?')
 
@@ -150,6 +150,14 @@ export const render = async (req, res, next) => {
         })
     }
 
+    // Serialize the routes and add them to the config. We'll use this on the client-side later.
+    // TODO: Don't serialize all the routes (only the one route or only the non-localized routes before configurRoutes is run)
+    config.app.routes = routes.map((route) => ({
+        path: route.path,
+        componentName: route.component.displayName.match(/\((\w+)\)/)[1],
+        componentProps: route.props
+    }))
+
     // Step 1 - Find the match.
 
     // Call `beforeRouteMatch` application extension hook.

packages/pwa-kit-react-sdk/src/ssr/universal/components/route-component/index.js

@@ -402,17 +402,17 @@ export const routeComponent = (Wrapped, isPage, locals) => {
  *
  * @private
  */
-export const getRoutes = (locals = {}) => {
+export const getRoutes = async (locals = {}, req = {}) => {
     let _routes = routes
     const {applicationExtensions = []} = locals
     if (typeof routes === 'function') {
-        _routes = routes()
+        _routes = await routes(locals)
     }
 
     // Call the `extendRoutes` function for all the Application Extensions.
-    applicationExtensions.forEach((applicationExtension) => {
-        _routes = applicationExtension.extendRoutes(_routes)
-    })
+    for (const applicationExtension of applicationExtensions) {
+        _routes = await applicationExtension.extendRoutes(_routes, req)
+    }
 
     const allRoutes = [
         // NOTE: this route needs to be above _routes, in case _routes has a fallback route of `path: '*'`

packages/pwa-kit-react-sdk/src/ssr/universal/components/switch/index.jsx

@@ -4,12 +4,16 @@
  * SPDX-License-Identifier: BSD-3-Clause
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/BSD-3-Clause
  */
-import React from 'react'
+import React, {useContext, useState} from 'react'
 import PropTypes from 'prop-types'
 import {Switch as RouterSwitch, Route} from 'react-router-dom'
 import AppErrorBoundary from '../app-error-boundary'
 import {UIDReset, UIDFork} from 'react-uid'
 
+// TODO: can the context be moved to a HOC so routes don't always have to be serialized
+const RoutesContext = React.createContext({})
+export const useRoutesContext = () => useContext(RoutesContext)
+
 /**
  * The Switch component packages up the bits of rendering that are shared between
  * server and client-side. It's *mostly* a react-router Switch component, hence the
@@ -21,24 +25,30 @@ import {UIDReset, UIDFork} from 'react-uid'
  */
 const Switch = (props) => {
     const {error, appState, routes, App} = props
+    const [_routes, setRoutes] = useState(routes)
     return (
         <UIDReset>
             <AppErrorBoundary error={error}>
                 {!error && (
-                    <App preloadedProps={appState.appProps}>
-                        <RouterSwitch>
-                            {routes.map((route, i) => {
-                                const {component: Component, ...routeProps} = route
-                                return (
-                                    <Route key={i} {...routeProps}>
-                                        <UIDFork>
-                                            <Component preloadedProps={appState.pageProps} />
-                                        </UIDFork>
-                                    </Route>
-                                )
-                            })}
-                        </RouterSwitch>
-                    </App>
+                    <RoutesContext.Provider value={{
+                        routes: _routes,
+                        setRoutes
+                    }}>
+                        <App preloadedProps={appState.appProps}>
+                            <RouterSwitch>
+                                {_routes.map((route, i) => {
+                                    const {component: Component, ...routeProps} = route
+                                    return (
+                                        <Route key={i} {...routeProps}>
+                                            <UIDFork>
+                                                <Component preloadedProps={appState.pageProps} />
+                                            </UIDFork>
+                                        </Route>
+                                    )
+                                })}
+                            </RouterSwitch>
+                        </App>
+                    </RoutesContext.Provider>
                 )}
             </AppErrorBoundary>
         </UIDReset>