Route serialization to support Shopper SEO URL mapping integration

packages/extension-chakra-storefront/src/setup-app.tsx

@@ -116,6 +116,15 @@ class ChakraStorefront extends ApplicationExtension<Config> {
             ignoredRoutes: ['/callback']
         })
     }
+
+    async getComponentMap() {
+        const modules = await import('./pages')
+        const componentMap = Object.keys(modules).reduce((acc, key) => {
+            acc[modules[key].displayName] = modules[key]
+            return acc
+        }, {})
+        return componentMap 
+    }
 }
 
 export default ChakraStorefront

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

@@ -19,6 +19,8 @@ import {ServerContext, CorrelationIdProvider} from '../universal/contexts'
 import App from '../universal/components/_app'
 import {getAppConfig} from '../universal/compatibility'
 import Switch from '../universal/components/switch'
+import Refresh from '../universal/components/refresh'
+import Throw404 from '../universal/components/throw-404'
 import {getRoutes, routeComponent} from '../universal/components/route-component'
 import {uuidv4} from '../../utils/uuidv4.client'
 import logger from '../../utils/logger-instance'
@@ -132,10 +134,48 @@ export const start = async () => {
         locals
     })
 
+    // Create the component map
+    const PWA_KIT_REACT_SDK = "PWAKitReactSdk"
+    const componentMap = {
+        [PWA_KIT_REACT_SDK]: {
+            [Refresh.displayName]: Refresh,
+            [Throw404.displayName]: Throw404,
+        }
+    }
+    for (const applicationExtension of applicationExtensions) {
+        const extensionName = applicationExtension.constructor.name
+        componentMap[extensionName] = await applicationExtension.getComponentMap()
+    }
+
+    // Deserialize routes
+    let serializedRoutes = window.__CONFIG__.app.routes
+    serializedRoutes = serializedRoutes.map(
+        ({path, extensionId, componentName, componentProps}) => {
+            let component = componentMap[extensionId || PWA_KIT_REACT_SDK][componentName]
+            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,18 @@ 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: we should not serialize the localized routes to reduce byte size
+    config.app.routes = routes.map((route) => {
+        const displayNameParts = route.component.displayName.match(/\(([^()]+)\)(?!.*\([^()]*\))/)[1].split('.')
+        return {
+            path: route.path,
+            extensionId: displayNameParts.length > 1 ? displayNameParts[0] : null,
+            componentName: displayNameParts.length > 1 ? displayNameParts[1]: displayNameParts[0],
+            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,26 @@ 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) {
+        const routes = await applicationExtension.extendRoutes(_routes, req)
+        const extensionName = applicationExtension.constructor.name
+
+        // Prefix each component displayName with the extension name so it can later be deserialized
+        routes.forEach((route) => {
+            // Skip if component is already prefixed with an application extension name
+            if (route.component.displayName.includes(".") && route.component.displayName.match(/^[^.]+/)[0]) return
+            route.component.displayName = `${extensionName}.${route.component.displayName}`
+        })
+        _routes = routes
+    }
 
     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>

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

@@ -26,4 +26,6 @@ class Throw404 extends React.Component {
     }
 }
 
+Throw404.displayName = 'Throw404'
+
 export default Throw404