Route serialization to support Shopper SEO URL mapping integration

packages/extension-chakra-store-locator/src/setup-app.ts

@@ -71,15 +71,15 @@ class StoreLocatorExtension extends ApplicationExtension<Config> {
         return applyHOCs(App, HOCs)
     }
 
-    extendRoutes(routes: RouteProps[]): RouteProps[] {
-        return [
+    extendRoutes(routes: RouteProps[]): Promise<RouteProps[]> {
+        return Promise.resolve([
             {
                 exact: true,
                 path: this.getConfig().path,
                 component: StoreLocatorPage
             },
             ...routes
-        ]
+        ])
     }
 }
 

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

@@ -49,7 +49,7 @@ class ChakraStorefront extends ApplicationExtension<Config> {
         return applyHOCs(App, requiredHOCs)
     }
 
-    extendRoutes(routes: RouteProps[]): RouteProps[] {
+    getRoutes(): Promise<RouteProps[]> {
         const config = this.getConfig()
 
         const extensionRoutes = [
@@ -105,7 +105,8 @@ class ChakraStorefront extends ApplicationExtension<Config> {
                 component: Pages.ProductList
             }
         ].filter((route) => route.path !== false)
-        return [...routes, ...(extensionRoutes as RouteProps[])]
+
+        return Promise.resolve(extensionRoutes as RouteProps[])
     }
 
     // Called before the route with all the routes
@@ -116,6 +117,11 @@ class ChakraStorefront extends ApplicationExtension<Config> {
             ignoredRoutes: ['/callback']
         })
     }
+
+    async getComponentMap() {
+        const modules = await import('./pages')
+        return this.generateComponentMapFromModules(modules)
+    }
 }
 
 export default ChakraStorefront

packages/extension-starter/src/setup-app.ts

@@ -55,6 +55,8 @@ class Sample extends ApplicationExtension<Config> {
     extendApp<T extends React.ComponentType<T>>(
         App: React.ComponentType<T>
     ): React.ComponentType<T> {
+        // DEBUG
+        console.log(this.getConfig().path)
         const HOCs = [
             // Example higher-order component, this can be safely removed.
             sampleHOC,
@@ -76,18 +78,20 @@ class Sample extends ApplicationExtension<Config> {
      *
      * NOTE: If you instead want to modify a list of all the routes, refer to the `beforeRouteMatch` below.
      */
-    extendRoutes(routes: RouteProps[]): RouteProps[] {
-        return [
+    // TODO: do we need to pass in additional params like request.path? Get familiar with the SEO API.
+    // TODO: how can developers call SCAPI? How can we pass in the api client (with the access token)?
+    getRoutes(): Promise<RouteProps[]> {
+        return Promise.resolve([
             {
                 exact: true,
                 path: this.getConfig().path,
                 component: SamplePage
-            },
-            ...routes
-        ]
+            }
+        ])
     }
 
     /**
+     * TODO: update comment to make it clearer that beforeRouteMatch is also called on the client side
      * This method is used on the server during the rendering pipeline. It's provided a list of all the routes that your application
      * is configured with, including those defined in the base application and those added by all the extensions. You can use this
      * method to modify these routes in any way you want, but you must return an array of routes as a result.

packages/pwa-kit-extension-sdk/src/react/classes/ApplicationExtension.test.tsx

@@ -53,7 +53,7 @@ describe('ApplicationExtension', () => {
             const extendRoutesSpy = jest
                 .spyOn(extension, 'extendRoutes')
                 .mockImplementation((baseRoutes) => {
-                    return [...baseRoutes, additionalRoute]
+                    return Promise.resolve([...baseRoutes, additionalRoute])
                 })
 
             const modifiedRoutes = extension.extendRoutes(routes)

packages/pwa-kit-extension-sdk/src/react/classes/ApplicationExtension.ts

@@ -11,7 +11,7 @@ import {RouteProps} from 'react-router-dom'
 import {ApplicationExtension as ApplicationExtensionBase} from '../../shared/classes/application-extension-base'
 
 // Types
-import {ApplicationExtensionConfig} from '../../types'
+import {ApplicationExtensionConfig, Modules, SerializedRoute} from '../../types'
 
 export type ReactApplicationExtensionConfig = ApplicationExtensionConfig
 
@@ -27,6 +27,10 @@ export type ReactApplicationExtensionConfig = ApplicationExtensionConfig
 export class ApplicationExtension<
     Config extends ReactApplicationExtensionConfig
 > extends ApplicationExtensionBase<Config> {
+    constructor(config: Config) {
+        super(config)
+        this.extendRoutes = this.extendRoutes.bind(this)
+    }
     /**
      * Called during the rendering of the base application on the server and the client.
      * It is predominantly used to enhance the "base" application by wrapping it with React providers.
@@ -50,8 +54,12 @@ export class ApplicationExtension<
      * @param routes - The list application routes currently loaded.
      * @returns routes - The modified application routes.
      */
-    public extendRoutes(routes: RouteProps[]): RouteProps[] {
-        return routes
+    public extendRoutes(routes: RouteProps[]): Promise<RouteProps[]> {
+        return Promise.resolve(routes)
+    }
+
+    public getRoutes(): Promise<RouteProps[]> {
+        return Promise.resolve([])
     }
 
     /**
@@ -65,4 +73,69 @@ export class ApplicationExtension<
     public beforeRouteMatch(routes: RouteProps[]): RouteProps[] {
         return routes
     }
+
+    public async serialize(): Promise<SerializedRoute[]> {
+        const routes = await this.getRoutes()
+        return routes.map((route) => {
+            if (!route.component?.displayName) {
+                throw new Error(`Component for route with path "${route.path}" is missing a displayName`)
+            }
+            return {
+                path: route.path,
+                componentName: route.component?.displayName,
+                // TODO: do we need to serialize props?
+                //componentProps: route.props
+            }
+        })
+    }
+
+    public deserialize(serializedRoutes: SerializedRoute[], componentMap: Modules): any[] {
+        return serializedRoutes.map(
+            ({path, componentName}) => {
+                let component = componentMap[componentName]
+                if (!component) {
+                    throw new Error(`${componentName} component could not be deserialized for route with path: ${path}`)
+                }
+
+                // if (componentProps) {
+                //     const Component = component
+                //     component = () => <Component {...componentProps} />
+                // }
+                return {
+                    path,
+                    exact: true,
+                    component
+                }
+            }
+        )
+    }
+
+    /**
+     * Protected method to get the component map. This method should be called
+     * by subclasses to provide the correct path for importing modules.
+     *
+     * @protected
+     * @param path - The path to the modules directory that contains the page components.
+     * @returns A promise that resolves to the component map.
+     */
+    protected async generateComponentMapFromModules(modules: Modules): Promise<Modules> {
+        const componentMap = Object.keys(modules).reduce((acc: Modules, key: string) => {
+            const module = modules[key]
+            // TODO: will displayName always exist or do we need error handling?
+            acc[module.displayName] = module
+            return acc
+        }, {})
+        return componentMap 
+    }
+
+
+    // TODO: should we make an abstract class for getComponentMap to enforce 
+    // subclasses to implement it?
+    /**
+     * Default method to get the component map using the default path './pages'.
+     * Subclasses can override this method if they need to use a different path.
+     *
+     * @returns A promise that resolves to the component map.
+     */
+    // public abstract getComponentMap(): Promise<Modules>
 }

packages/pwa-kit-extension-sdk/src/types.ts

@@ -36,3 +36,18 @@ export type BuildCandidatePathsOptions = {
     projectDir: string
     extensionEntries: ApplicationExtensionEntry[]
 }
+
+// TODO: jsdocs
+export type Module = {
+    displayName: string
+}
+
+export type Modules = {
+    [key: string]: Module
+}
+
+export type SerializedRoute = {
+    path: string | readonly string[] | undefined,
+    componentName: string
+    //componentProps: RouteProps
+}

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

@@ -19,7 +19,7 @@ import {ServerContext, CorrelationIdProvider} from '../universal/contexts'
 import App from '../universal/components/_app'
 import {getAppConfig} from '../universal/compatibility'
 import Switch from '../universal/components/switch'
-import {getRoutes, routeComponent} from '../universal/components/route-component'
+import {getAllRoutes, routeComponent} from '../universal/components/route-component'
 import {uuidv4} from '../../utils/uuidv4.client'
 import logger from '../../utils/logger-instance'
 
@@ -132,10 +132,11 @@ export const start = async () => {
         locals
     })
 
+    const routes = await getAllRoutes(locals)
     const props = {
         error: window.__ERROR__,
         locals: locals,
-        routes: getRoutes(locals),
+        routes,
         extensions: applicationExtensions,
         WrappedApp
     }

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

@@ -34,7 +34,7 @@ import Document from '../universal/components/_document'
 import Throw404 from '../universal/components/throw-404'
 import {getAppConfig} from '../universal/compatibility'
 import Switch from '../universal/components/switch'
-import {getRoutes, routeComponent} from '../universal/components/route-component'
+import {getAllRoutes, routeComponent} from '../universal/components/route-component'
 import * as errors from '../universal/errors'
 import logger from '../../utils/logger-instance'
 import PerformanceTimer, {PERFORMANCE_MARKS} from '../../utils/performance'
@@ -139,7 +139,7 @@ export const render = async (req, res, next) => {
         locals: res.locals
     })
 
-    let routes = getRoutes(res.locals)
+    let routes = await getAllRoutes(res.locals)
 
     const [pathname] = req.originalUrl.split('?')
 
@@ -150,6 +150,16 @@ export const render = async (req, res, next) => {
         })
     }
 
+    // TODO: How do we create a new field in config.app called serializedExtensions to store the routes?
+    config.app.routes = Object.fromEntries(
+        await Promise.all(
+            applicationExtensions.map(async (extension) => {
+                const serializedData = await extension.serialize()
+                return [extension.constructor.name, serializedData]
+            })
+        )
+    )
+
     // Step 1 - Find the match.
 
     // Call `beforeRouteMatch` application extension hook.

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

@@ -11,7 +11,7 @@ import hoistNonReactStatic from 'hoist-non-react-statics'
 import {AppErrorContext} from '../../components/app-error-boundary'
 import Throw404 from '../../components/throw-404'
 import {getAppConfig} from '../../compatibility'
-import routes from '../../routes'
+import appRoutes from '../../routes'
 import {pages as pageEvents} from '../../events'
 import {withLegacyGetProps} from '../../components/with-legacy-get-props'
 import Refresh from '../refresh'
@@ -396,30 +396,41 @@ export const routeComponent = (Wrapped, isPage, locals) => {
 }
 
 /**
+ * TODO: update this comment
  * Wrap all the components found in the application's route config with the
  * route-component HOC so that they all support `getProps` methods server-side
  * and client-side in the same way.
  *
  * @private
  */
-export const getRoutes = (locals = {}) => {
-    let _routes = routes
+export const getAllRoutes = async (locals = {}) => {
     const {applicationExtensions = []} = locals
-    if (typeof routes === 'function') {
-        _routes = routes()
-    }
 
-    // Call the `extendRoutes` function for all the Application Extensions.
-    applicationExtensions.forEach((applicationExtension) => {
-        _routes = applicationExtension.extendRoutes(_routes)
-    })
+    let extensionRoutes = []
+    if (isServerSide){
+        extensionRoutes = (
+            await Promise.all(applicationExtensions.map((extension) => extension.getRoutes()))
+        ).flat()
+    } else {
+        // Deserialize the routes from the server
+        const serializedRoutes = window.__CONFIG__.app.routes
+        for (const applicationExtension of applicationExtensions) {
+            const extensionName = applicationExtension.constructor.name
+            const componentMap = await applicationExtension.getComponentMap()
+            const deserializedRoutes = applicationExtension.deserialize(serializedRoutes[extensionName], componentMap)
+            extensionRoutes = [...extensionRoutes, ...deserializedRoutes]
+        }
+    }
 
     const allRoutes = [
         // NOTE: this route needs to be above _routes, in case _routes has a fallback route of `path: '*'`
         {path: '/__pwa-kit/refresh', component: Refresh},
-        ..._routes,
+        ...extensionRoutes,
+        ...(typeof appRoutes === 'function' ? appRoutes() : appRoutes),
         {path: '*', component: Throw404}
     ]
+    console.log('--- routes', allRoutes)
+
     return allRoutes.map(({component, ...rest}) => {
         return {
             component: component ? routeComponent(component, true, locals) : component,

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

@@ -4,12 +4,15 @@
  * 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'
 
+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 +24,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>