[Spike] getComponentMap takes allRoutes
#2337
Conversation
hajinsuha1
changed the base branch from
develop
to
implement-dynamic-update-routes
| getComponentMap(allRoutes: RouteProps[]): ComponentMap { | ||
| const {resourceTypeToComponentMap} = this.getConfig() | ||
| return Object.values(resourceTypeToComponentMap).reduce((map: ComponentMap, componentName) => { | ||
| const component = allRoutes.find(route => route.component?.displayName.includes(componentName))?.component | ||
| if (component) { | ||
| map[componentName] = component | ||
| } | ||
| return map | ||
| }, {}) |
There was a problem hiding this comment.
the getComponentMap implementation searches the routes list for the component with a displayName that matches the component name in the resourceTypeToComponentMap
| public getComponentMap(allRoutes: RouteProps[]): ComponentMap | undefined { | ||
| if (typeof this.getRoutesAsync !== 'undefined') { | ||
| throw new Error( | ||
| `${this.getComponentMap.name} must be defined when getRoutesAsync() is defined in the ${this.getName()} extension` | ||
| ) | ||
| } | ||
| return | ||
| } |
There was a problem hiding this comment.
default impl throws an error if getRoutesAsync() is implemented
| if (!isServerSide()) { | ||
| console.log('JINSUUUU !isServerSide') | ||
| serializedRoutes = window.__EXTENSIONS__[this.getName()].routes | ||
| } else { | ||
| serializedRoutes = this._cachedRoutes | ||
| } |
There was a problem hiding this comment.
one finding is that on the server side we actually do have to deserialize the routes or at least the route we are currently on.
See here.
| const _routes = await getAllRoutes(locals) | ||
|
|
||
| applicationExtensions.forEach((extension) => { | ||
| const componentMap = extension.getComponentMap(_routes) | ||
| console.log('JINSU componentMap', componentMap) | ||
| extension.deserialize(componentMap) | ||
| }) | ||
|
|
||
| const routes = await getAllRoutes(locals) |
There was a problem hiding this comment.
we need to call getAllRoutes twice. First time is to get the routes from the other extensions so we can pass it to getComponentMap and deserialize. The 2nd time is to reload the routes that have been deserialized from cache.
I also thought of loading only the synchrounous routes before deserializing and then loading the async routes after deserializing but i don't think that is viable since it will mess up the order of the routes.
There was a problem hiding this comment.
prioritization and put it the routes at the end
for now we can hard code it to put SEO at the end
or assume it ats the end
getComponentMap only get routes from extension before it
manually process seo one last
deserialize first
routes = [] => deserialize empty ext and add routes into it
| applicationExtensions.forEach((extension) => { | ||
| const componentMap = extension.getComponentMap(_routes) | ||
| console.log('JINSU componentMap', componentMap) | ||
| extension.deserialize(componentMap) | ||
| }) | ||
|
|
||
| let routes = await getAllRoutes(res.locals) |
There was a problem hiding this comment.
we need to deserialize also on the server because after we route match the component of the current route is passed to the initial App state on line 225
| @@ -174,28 +172,20 @@ export class ApplicationExtension< | |||
| * @throws Error if getComponentMap() is not defined. | |||
| * @throws Error if the deserialized component cannot be found in the component map. | |||
| */ | |||
| private deserialize(): DeserializedExtension | null { | |||
| if (isServerSide() || typeof this.getRoutesAsync === 'undefined') { | |||
| public deserialize(componentMap: ComponentMap) { | |||
There was a problem hiding this comment.
we now pass componentMap to deserialize
| if (!isServerSide()) { | ||
| serializedRoutes = window.__EXTENSIONS__[this.getName()].routes | ||
| } else { | ||
| serializedRoutes = this._cachedRoutes | ||
| } |
There was a problem hiding this comment.
We also need to deserialize on the server side because we pass the component of the matched route to the initial app state in react-rendering.js.
pwa-kit/packages/pwa-kit-react-sdk/src/ssr/server/react-rendering.js
Lines 216 to 225 in 8c46fa3
| this._cachedRoutes = routes || null | ||
| return {routes} |
There was a problem hiding this comment.
we now return the routes after deserializing
| if (extension.getRoutesAsync){ | ||
| // Need to call getRoutesAsync so the routes can be cached before deserialize | ||
| await extension.getRoutesAsync({locals}) | ||
| const componentMap = extension.getComponentMap(routes) |
There was a problem hiding this comment.
we pass the accumulated routes from prev extension to getComponentMap
Description
Types of Changes
Changes
How to Test-Drive This PR
Checklists
General
Accessibility Compliance
You must check off all items in one of the follow two lists:
or...
Localization