@W-18172401 Integrate getUrlMapping on server-side navigation by hajinsuha1 · Pull Request #2290 · SalesforceCommerceCloud/pwa-kit

hajinsuha1 · 2025-02-26T21:22:09Z

Description

Types of Changes

Bug fix (non-breaking change that fixes an issue)
New feature (non-breaking change that adds functionality)
Documentation update
Breaking change (could cause existing functionality to not work as expected)
Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

Removing a public function or component or prop

Adding a required argument to a function

Changing the data type of a function parameter or return value

Adding a new peer dependency to package.json

Changes

add extension-seo-url-mapping extension
- overrides the extendRoutes method to make a Shopper SEO getUrlMapping API call and add it to the routes if a response is returned
update pwa-kit-react-sdk to serialize and deserialize routes to allow dynamically modifying the routes list

How to Test-Drive This PR

Revert this commit to test the changes

git revert 98a5011bfeafe4aa66df8c34983afa1745690cf3

Build the app
```
npm install
```

Start the local server

cd `packages/template-typescript-minimal`
npm start

Navigate to http://localhost:3000/sample-page
- verify the Sample page is rendered with title "A custom title from the extension"
Navigate to http://localhost:3000/seo-category
- verify a PLP page with the New Arrivals category is rendered
Navigate to http://localhost:3000/seo-product
- verify a PDP page with the Platinum Blue Stripes Easy Care Fitted Shirt product is rendered
Navigate to http://localhost:3000/seo-redirect
- verify that you are redirected to /category/top-sellers

Checklists

General

Changes are covered by test cases
CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

There are no changes to UI

or...

Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
Changes comply with WCAG 2.0 guidelines levels A and AA
Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

Changes include a UI text update in the Retail React App (which requires translation)

packages/extension-seo-url-mapping/src/setup-app.ts

packages/extension-seo-url-mapping/src/setup-app.tsx

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

packages/pwa-kit-react-sdk/src/utils/routes.js

packages/extension-seo-url-mapping/README.md

packages/extension-seo-url-mapping/config/README.md

packages/extension-seo-url-mapping/package.json

packages/extension-seo-url-mapping/src/setup-app.tsx

packages/extension-seo-url-mapping/src/types/config.ts

packages/extension-seo-url-mapping/src/setup-app.tsx

packages/extension-seo-url-mapping/src/types/index.ts

packages/extension-seo-url-mapping/src/types/routes.ts

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

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

packages/template-typescript-minimal/package.json

…eo-url-mapping

packages/extension-commerce-bm-seo/src/setup-app.tsx

hajinsuha1 · 2025-05-02T15:42:12Z

packages/template-typescript-minimal/config/default.js

+module.exports = {
+    app: {
+        extensions: [
+            ['@salesforce/extension-commerce-bm-seo', {}],


the order in which extension-commerce-bm-seo does not matter anymore for the server-side navigation to work

@hajinsuha1 But I think we'll want the seo extension to be first, though. So that other extensions after it can reuse the Auth object.

pwa-kit/packages/extension-commerce-bm-seo/src/utils/shopper-seo-utils.tsx

Lines 23 to 31 in 6cfecf0

// Saving/reusing the commerce api auth (so all extensions have access to it)

locals[authProperty] =

locals[authProperty] ??

new Auth({

...commerceAPI.parameters,

proxy: `${appOrigin}${commerceAPI.proxyPath}`,

redirectURI: `${appOrigin}/callback`,

logger: console // TODO: proper logger

})

hajinsuha1 · 2025-05-02T16:18:54Z

packages/extension-commerce-bm-seo/src/utils/shopper-seo-utils.tsx

+// Local Imports
+import {Config} from '../types'
+
+export const getShopperSeoClient = async (locals: Record<string, any>, config: Config) => {


@bendvc @vmarta wanted to check in if we're okay going forward with this approach of pulling in ShopperSeo directly from commerce-sdk-isomorphic. This is because we need to make the API call in getRoutesAsync which is outside the HOC. On lines 24-31 it also looks like we handle saving the Auth in locals so we don't recreate it each time.

I think this means the SEO extension requires the commerceApi to be defined in the config unlike chakra-store-locator

@hajinsuha1 I don't know if there's another way to do it. Our commerce-sdk-react does not provide us with a non-react way to get the api client. So we would have to rely on the underlying sdk-isomorphic lib.

To minimize the impact, we still wanted to use the Auth class from commerce-sdk-react, since that's one of the main benefits to using that library.

vmarta

I'll continue to review this PR, in particular the files in the SEO extension.

vmarta · 2025-05-02T21:19:47Z

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

                ...route,
-                componentName: route.component.displayName
+                componentName: route.component.displayName,
+                ...(route.componentProps && {componentProps: route.componentProps})


@hajinsuha1 I'm seeing a typescript error on this line:

Property 'componentProps' does not exist on type 'RouteProps<string, { [x: string]: string | undefined; }>'. (tsserver 2339)

Which makes the pwa-kit-extension-sdk package unable to build successfully.

vmarta · 2025-05-02T21:33:44Z

packages/extension-commerce-bm-seo/config/default.json

+        }
+    },
+    "commerceAPIAuth": {
+        "propertyNameInLocals": "commerceAPIAuth"


@hajinsuha1 if you want to hardcode it, perhaps we should make the property name more unlikely to collide → something like __commerceAPIAuth.

vmarta · 2025-05-02T21:38:03Z

packages/extension-commerce-bm-seo/src/utils/shopper-seo-utils.tsx

+export const getAppOrigin = (
+    locals: Record<string, any> = {},
+    fromXForwardedHeader = false
+): string => {
+    if (typeof window !== 'undefined') {
+        return window.location.origin
+    }
+
+    const xForwardedOrigin = locals.xForwardedOrigin
+    if (fromXForwardedHeader && xForwardedOrigin) {
+        return xForwardedOrigin
+    }
+
+    const {APP_ORIGIN = ''} = process.env
+    return APP_ORIGIN
+}


@hajinsuha1 I think so. Currently getAppOrigin has this older implementation, and I'm not sure why it's being deprecated.

pwa-kit/packages/pwa-kit-react-sdk/src/utils/url.js

Lines 23 to 37 in 6cfecf0

export const getAppOrigin = () => {

if (typeof window !== 'undefined') {

return window.location.origin

}

const {APP_ORIGIN} = process.env

if (!APP_ORIGIN) {

throw new Error(

`Application is not initialized. Please ensure '_createApp' has been invoked before using this method.`

)

}

return process.env.APP_ORIGIN

}

vmarta · 2025-05-02T21:45:12Z

packages/extension-commerce-bm-seo/src/utils/shopper-seo-utils.tsx

+// Local Imports
+import {Config} from '../types'
+
+export const getShopperSeoClient = async (locals: Record<string, any>, config: Config) => {


@hajinsuha1 I don't know if there's another way to do it. Our commerce-sdk-react does not provide us with a non-react way to get the api client. So we would have to rely on the underlying sdk-isomorphic lib.

To minimize the impact, we still wanted to use the Auth class from commerce-sdk-react, since that's one of the main benefits to using that library.

vmarta · 2025-05-02T21:47:21Z

packages/template-typescript-minimal/config/default.js

+module.exports = {
+    app: {
+        extensions: [
+            ['@salesforce/extension-commerce-bm-seo', {}],


@hajinsuha1 But I think we'll want the seo extension to be first, though. So that other extensions after it can reuse the Auth object.

pwa-kit/packages/extension-commerce-bm-seo/src/utils/shopper-seo-utils.tsx

Lines 23 to 31 in 6cfecf0

// Saving/reusing the commerce api auth (so all extensions have access to it)

locals[authProperty] =

locals[authProperty] ??

new Auth({

...commerceAPI.parameters,

proxy: `${appOrigin}${commerceAPI.proxyPath}`,

redirectURI: `${appOrigin}/callback`,

logger: console // TODO: proper logger

})

vmarta

Ok, done reviewing.

vmarta · 2025-05-02T23:35:39Z

packages/extension-commerce-bm-seo/src/setup-app.tsx

+     * 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.
+     */
+    beforeRouteMatch({allRoutes}: BeforeRouteMatchParams): RouteProps[] {


FYI there are several type errors in beforeRouteMatch:

vmarta · 2025-05-03T00:25:49Z

packages/extension-commerce-bm-seo/src/setup-app.tsx

+            {
+                path: requestURL.pathname,
+                component,
+                componentProps: props,


@hajinsuha1 just an aside: sometimes I feel you have important comments made in Github PR that I think it's best if they're written as code comments instead. Such comments in Github would be easily lost/forgotten.

packages/extension-commerce-bm-seo/src/setup-app.tsx

…-routes

…om pwa-kit-react-sdk

…SalesforceCommerceCloud/pwa-kit into implement-dynamic-update-routes

This reverts commit ade541e.

…-routes

…31976@) (#2390) * Remove extension prefix * Clean changes in template-typescript-minimal * Optimize detecting extensions logic * WIP Fix tests * Fix tests * Fix tests * Move import constant * Refactor packagePath ternary * Condensed fullPackagePath into one line * Update package namespace and name extract logic * Use validate-npm-package-name in generator * lint * Adjust generator copy * Update packages/pwa-kit-create-app/scripts/create-mobify-app.js Co-authored-by: Kevin He <kevin.he@salesforce.com> Signed-off-by: Adam Raya <adamraya@users.noreply.github.com> * PR Feedback detectExtensions args --------- Signed-off-by: Adam Raya <adamraya@users.noreply.github.com> Co-authored-by: Kevin He <kevin.he@salesforce.com>

…SalesforceCommerceCloud/pwa-kit into implement-dynamic-update-routes

… in package.json

This reverts commit 1d524d1.

hajinsuha1 added 3 commits February 26, 2025 09:21

initial implementation of extension seo url mapping extension

02e1334

make beforeRouteMatch async

41b34a7

generate component map from react-sdk util function

87567d8

hajinsuha1 commented Feb 26, 2025

View reviewed changes

packages/extension-seo-url-mapping/src/setup-app.ts Outdated Show resolved Hide resolved

hajinsuha1 added 9 commits February 27, 2025 15:28

use a component map that maps resource type to component display name

0a42f90

move logic from beforeRouteMatch to extendRoutes

9b1dada

make extendRoutes async

b8505d0

pass request to extendRoutes

74ea27a

add route serialization

5988996

make category urlMappings work

61839ff

make urlMapping resourceType product work

1a8d1be

cleanup

8380df6

move serializing to pwa-kit-react-sdk

182f7b6

hajinsuha1 commented Mar 4, 2025

View reviewed changes

packages/extension-seo-url-mapping/src/setup-app.tsx Outdated Show resolved Hide resolved

hajinsuha1 commented Mar 4, 2025

View reviewed changes

packages/pwa-kit-react-sdk/src/ssr/browser/main.jsx Outdated Show resolved Hide resolved

hajinsuha1 commented Mar 4, 2025

View reviewed changes

packages/pwa-kit-react-sdk/src/utils/routes.js Outdated Show resolved Hide resolved

hajinsuha1 commented Mar 4, 2025

View reviewed changes

packages/pwa-kit-react-sdk/src/utils/routes.js Outdated Show resolved Hide resolved