@salesforce/pwa-kit-react-sdk 4.0.0-extensibility-preview.2 → 4.0.0-extensibility-preview.4

package/CHANGELOG.md

@@ -1,11 +1,39 @@
+## v4.0.0-extensibility-preview.4 (Feb 12, 2025)
+- Replace `event-emitter` in favor of the native `EventTarget` [#2289](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2289)
+- Call app extension's new methods `getRoutes` and `getRoutesAsync` [#2308](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2308)
+- Call app extension's `beforeRouteMatch` method with updated parameters [#2308](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2308)
+- Enhanced SSR rendering by serializing application extension async routes [#2300](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2300)
+
+## v4.0.0-extensibility-preview.3 (Dec 13, 2024)
+
 ## v4.0.0-extensibility-preview.2 (Dec 09, 2024)
+
 ## v4.0.0-extensibility-preview.1 (Dec 09, 2024)
+
 ## v4.0.0-extensibility-preview.0 (Nov 28, 2024)
 - Integrate Application Extensions Project. (#2099)[https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2099]
 - Add new `getStaticAssetUrl` utility to access assets specifically in the `/static` folder. (#2040)[https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2040]
 - Update Application Extensions import in `react-rendering.js` and `main.js` (#2004)[https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2004]
 - Define interface of the app extension's config [#2010](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2010)
 
+## v3.10.0 (Feb 18, 2025)
+- Fix the performance logging util to use the correct delimiter for the server-timing header. [#2225](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2295)
+
+## v3.9.2 (Mar 07, 2025)
+- Update PWA-Kit SDKs to v3.9.2 [#2304](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2304)
+
+## v3.9.1 (Mar 05, 2025)
+- Update PWA-Kit SDKs to v3.9.1 [#2301](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2301)
+
+## v3.9.0 (Feb 18, 2025)
+- Fix the performance logging util to not round duration. [#2199](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2199)
+- Add RedirectWithStatus component, allowing finer grained control of rediriects and their status code [#2173](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2173)
+- Support Node 22 [#2218](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2218)
+
+## v3.8.0 (Oct 28, 2024)
+- [Server Affinity] - Attach dwsid to SCAPI request headers [#2090](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2090)
+- Create useOrigin hook to return an app origin that takes x-forwarded-host header into consideration. [#2050](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2050)
+
 ## v3.7.0 (Aug 07, 2024)
 - Add `beforeHydrate` option to withReactQuery component [#1912](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1912)
 - Add server side rendering performance metrics via query parameter `__server_timing` or environment variable `SERVER_TIMING`, the metrics is available in the console logs and response header `server-timing`. [#1895](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1895)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/pwa-kit-react-sdk",
-  "version": "4.0.0-extensibility-preview.2",
+  "version": "4.0.0-extensibility-preview.4",
   "description": "A library that supports the isomorphic React rendering pipeline for Commerce Cloud Managed Runtime apps",
   "types": "dist/index.d.ts",
   "homepage": "https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/pwa-kit-react-sdk#readme",
@@ -38,11 +38,9 @@
     "@loadable/babel-plugin": "^5.15.3",
     "@loadable/server": "^5.15.3",
     "@loadable/webpack-plugin": "^5.15.2",
-    "@salesforce/pwa-kit-extension-sdk": "4.0.0-extensibility-preview.2",
-    "@salesforce/pwa-kit-runtime": "4.0.0-extensibility-preview.2",
-    "@tanstack/react-query": "^4.28.0",
+    "@salesforce/pwa-kit-extension-sdk": "4.0.0-extensibility-preview.4",
+    "@salesforce/pwa-kit-runtime": "4.0.0-extensibility-preview.4",
     "cross-env": "^5.2.1",
-    "event-emitter": "^0.3.5",
     "hoist-non-react-statics": "^3.3.2",
     "prop-types": "^15.8.1",
     "react-ssr-prepass": "^1.5.0",
@@ -52,14 +50,15 @@
   },
   "devDependencies": {
     "@loadable/component": "^5.15.3",
-    "@salesforce/pwa-kit-dev": "4.0.0-extensibility-preview.2",
+    "@salesforce/pwa-kit-dev": "4.0.0-extensibility-preview.4",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/hoist-non-react-statics": "~3.3.5",
+    "@types/mocha": "^10.0.10",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.1",
-    "internal-lib-build": "4.0.0-extensibility-preview.2",
+    "internal-lib-build": "4.0.0-extensibility-preview.4",
     "node-html-parser": "^3.3.6",
     "nodemon": "^2.0.22",
     "react": "^18.2.0",
@@ -72,17 +71,18 @@
   },
   "peerDependencies": {
     "@loadable/component": "^5.15.3",
+    "@tanstack/react-query": "^4.28.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^5.3.4"
   },
   "engines": {
-    "node": "^16.11.0 || ^18.0.0 || ^20.0.0",
-    "npm": "^8.0.0 || ^9.0.0 || ^10.0.0"
+    "node": "^16.11.0 || ^18.0.0 || ^20.0.0 || ^22.0.0",
+    "npm": "^8.0.0 || ^9.0.0 || ^10.0.0 || ^11.0.0"
   },
   "publishConfig": {
     "directory": "dist"
   },
-  "gitHead": "6b5da20f750f39d89c490cf77f1bf160c7e3d8f7"
+  "gitHead": "5ad3b1f0e598cfe0fbdec5b1212b4dabc0a8733c"
 }

package/ssr/browser/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../src/ssr/browser/main.jsx"],"names":[],"mappings":"AA0BO,2EAoBN;AAEM;;;;;;;4CAmCN;;;;;;;;;;;AAWM,uCA6DN"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../src/ssr/browser/main.jsx"],"names":[],"mappings":"AA0BO,2EAoBN;AAEM;;;;;;;4CAmCN;;;;;;;;;;;AAWM,uCA8DN"}

package/ssr/browser/main.js

@@ -58,7 +58,10 @@ const OuterApp = ({
   // Invoke the Application Extensions 'beforeRouteMatch' hook. This hook accepts ALL the routes for the current
   // application including all routes added from the configured extensions.
   extensions.forEach(applicationExtension => {
-    routes = applicationExtension.beforeRouteMatch(routes);
+    routes = applicationExtension.beforeRouteMatch({
+      allRoutes: routes,
+      locals
+    });
   });
   return /*#__PURE__*/_react.default.createElement(_contexts.ServerContext.Provider, {
     value: {}
@@ -113,7 +116,7 @@ const start = exports.start = /*#__PURE__*/function () {
     // this to set up, eg. Redux stores.
     const locals = {};
 
-    // AppConfig.restore *must* come before getRoutes()
+    // AppConfig.restore *must* come before getAllRoutes()
     AppConfig.restore(locals, window.__PRELOADED_STATE__.__STATE_MANAGEMENT_LIBRARY);
 
     // We need to tell the routeComponent HOC when the app is hydrating in order to
@@ -132,10 +135,11 @@ const start = exports.start = /*#__PURE__*/function () {
       applicationExtensions,
       locals
     });
+    const routes = yield (0, _routeComponent.getAllRoutes)(locals);
     const props = {
       error: window.__ERROR__,
       locals: locals,
-      routes: (0, _routeComponent.getRoutes)(locals),
+      routes,
       extensions: applicationExtensions,
       WrappedApp
     };

package/ssr/browser/main.test.js

@@ -9,16 +9,16 @@ var _uuidv = require("../../utils/uuidv4.client");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/*
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; } /*
  * Copyright (c) 2022, salesforce.com, inc.
  * All rights reserved.
  * 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
  */
-
 jest.mock('../../utils/uuidv4.client');
 describe('main', function () {
-  test('OuterApp renders without error', () => {
+  test('OuterApp renders without error', /*#__PURE__*/_asyncToGenerator(function* () {
     _uuidv.uuidv4.mockReturnValueOnce('7f21aea5-6962-4162-8204-9da85c802022');
     const oldPreloadedState = window.__PRELOADED_STATE__;
     window.__PRELOADED_STATE__ = {
@@ -29,15 +29,15 @@ describe('main', function () {
     const props = {
       error: undefined,
       locals,
-      routes: (0, _routeComponent.getRoutes)(locals),
+      routes: yield (0, _routeComponent.getAllRoutes)(locals),
       WrappedApp: (0, _routeComponent.routeComponent)(App, false, locals),
       extensions: []
     };
     (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_main.OuterApp, props));
     expect(_react2.screen.getByText('App')).toBeInTheDocument();
     window.__PRELOADED_STATE__ = oldPreloadedState;
-  });
-  test('OuterApp triggers the error page when there is an error', () => {
+  }));
+  test('OuterApp triggers the error page when there is an error', /*#__PURE__*/_asyncToGenerator(function* () {
     const oldWindowError = window.__ERROR__;
     window.__ERROR__ = new errors.HTTPNotFound('Not found');
     const App = () => /*#__PURE__*/_react.default.createElement("div", null, "App");
@@ -45,12 +45,12 @@ describe('main', function () {
     const props = {
       error: window.__ERROR__,
       locals,
-      routes: (0, _routeComponent.getRoutes)(locals),
+      routes: yield (0, _routeComponent.getAllRoutes)(locals),
       WrappedApp: (0, _routeComponent.routeComponent)(App, false, locals),
       extensions: []
     };
     (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_main.OuterApp, props));
     expect(_react2.screen.getByText('Error Status: 404')).toBeInTheDocument();
     window.__ERROR__ = oldWindowError;
-  });
+  }));
 });

package/ssr/server/react-rendering.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react-rendering.d.ts","sourceRoot":"","sources":["../../../src/ssr/server/react-rendering.js"],"names":[],"mappings":"AAyDA,+CAA4C;AAyBrC,+DA4BN;AAYM,oEA0IN;;AAiKD;;;oDAIK"}
+{"version":3,"file":"react-rendering.d.ts","sourceRoot":"","sources":["../../../src/ssr/server/react-rendering.js"],"names":[],"mappings":"AAyDA,+CAA4C;AAyBrC,+DA4BN;AAYM,oEAsJN;;AAkKD;;;oDAIK"}

package/ssr/server/react-rendering.js

@@ -140,7 +140,7 @@ const render = exports.render = /*#__PURE__*/function () {
       applicationExtensions,
       locals: res.locals
     });
-    let routes = (0, _routeComponent.getRoutes)(res.locals);
+    let routes = yield (0, _routeComponent.getAllRoutes)(res.locals);
     const [pathname] = req.originalUrl.split('?');
     const location = {
       pathname,
@@ -149,11 +149,25 @@ const render = exports.render = /*#__PURE__*/function () {
       })
     };
 
+    // Some application extensions need to be serialized because they have asynchronous state
+    const serializedExtensions = Object.fromEntries(applicationExtensions.flatMap(extension => {
+      if (typeof extension.getRoutesAsync !== 'function') return [];
+      const routes = extension.serializeAsyncRoutes();
+      // TODO W-18257236: Use a unique key for each extension like the extension ID from
+      // extension-meta.json
+      return [[extension.getName(), {
+        routes
+      }]];
+    }));
+
     // Step 1 - Find the match.
 
     // Call `beforeRouteMatch` application extension hook.
     applicationExtensions.forEach(applicationExtension => {
-      routes = applicationExtension.beforeRouteMatch(routes);
+      routes = applicationExtension.beforeRouteMatch({
+        allRoutes: routes,
+        locals: res.locals
+      });
     });
     res.__performanceTimer.mark(_performance.PERFORMANCE_MARKS.routeMatching, 'start');
     let route;
@@ -225,7 +239,8 @@ const render = exports.render = /*#__PURE__*/function () {
         res,
         location,
         config,
-        appJSX
+        appJSX,
+        serializedExtensions
       });
     } catch (e) {
       // This is an unrecoverable error.
@@ -252,7 +267,7 @@ const render = exports.render = /*#__PURE__*/function () {
       res.setHeader('Server-Timing', res.__performanceTimer.buildServerTimingHeader());
     }
     if (redirectUrl) {
-      res.redirect(302, redirectUrl);
+      res.redirect(routerContext.status || 302, redirectUrl);
     } else {
       res.status(status).send(html);
     }
@@ -310,7 +325,8 @@ const renderApp = args => {
     appStateError,
     appJSX,
     appState,
-    config
+    config,
+    serializedExtensions
   } = args;
   const extractor = new _server2.ChunkExtractor({
     statsFile: BUNDLES_PATH,
@@ -373,6 +389,7 @@ const renderApp = args => {
     __CONFIG__: config,
     __PRELOADED_STATE__: appState,
     __ERROR__: error,
+    __EXTENSIONS__: serializedExtensions,
     // `window.Progressive` has a long history at Mobify and some
     // client-side code depends on it. Maintain its name out of tradition.
     Progressive: getWindowProgressive(req, res)

package/ssr/server/react-rendering.test.js

@@ -58,6 +58,7 @@ jest.mock('../universal/routes', () => {
   const React = require('react');
   const PropTypes = require('prop-types');
   const errors = require('../universal/errors');
+  const RedirectWithStatus = require('../universal/components/redirect-with-status').default;
   const {
     Redirect
   } = require('react-router-dom');
@@ -175,6 +176,17 @@ jest.mock('../universal/routes', () => {
       });
     }
   }
+  class RedirectWithStatusPage extends React.Component {
+    static getProps() {
+      return Promise.resolve();
+    }
+    render() {
+      return /*#__PURE__*/React.createElement(RedirectWithStatus, {
+        to: "/elsewhere/",
+        status: 301
+      });
+    }
+  }
   class HelmetPage extends React.Component {
     static getProps() {
       return Promise.resolve();
@@ -289,6 +301,9 @@ jest.mock('../universal/routes', () => {
     }, {
       path: '/redirect/',
       component: RedirectPage
+    }, {
+      path: '/redirectWithStatus/',
+      component: RedirectWithStatusPage
     }, {
       path: '/init-sets-status/',
       component: InitSetsStatusPage
@@ -512,6 +527,14 @@ describe('The Node SSR Environment', () => {
     assertions: res => {
       expect(res.statusCode).toBe(302);
     }
+  }, {
+    description: `can redirect with HTTP 301 status`,
+    req: {
+      url: '/redirectWithStatus/'
+    },
+    assertions: res => {
+      expect(res.statusCode).toBe(301);
+    }
   }, {
     description: `500 on unknown errors in getProps`,
     req: {

package/ssr/universal/components/redirect-with-status/index.d.ts

@@ -0,0 +1,3 @@
+declare const _default: any;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/ssr/universal/components/redirect-with-status/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ssr/universal/components/redirect-with-status/index.jsx"],"names":[],"mappings":""}

package/ssr/universal/components/redirect-with-status/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+const _excluded = ["status", "staticContext"];
+/*
+ * Copyright (c) 2024, Salesforce, Inc.
+ * All rights reserved.
+ * 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
+ */
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+/**
+ * The `RedirectWithStatus` component is used to specify a different status code when redirecting via
+ * the Redirect component.
+ * The default redirect behavior when this component is not used is to set a 302 status.
+ *
+ * @param {number} status - The HTTP status code. Defaults to 302 if not specified
+ * @param {object} staticContext - The router context
+ * @param {string} to - The redirect's target path
+ */
+const RedirectWithStatus = _ref => {
+  let {
+      status = 302,
+      staticContext
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Handle server-side rendering
+  if (staticContext) {
+    staticContext.status = status;
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Redirect, props);
+};
+RedirectWithStatus.propTypes = {
+  status: _propTypes.default.number,
+  staticContext: _propTypes.default.object,
+  to: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])
+};
+var _default = exports.default = (0, _reactRouterDom.withRouter)(RedirectWithStatus);

package/ssr/universal/components/redirect-with-status/index.test.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _reactRouterDom = require("react-router-dom");
+var _history = require("history");
+var _index = _interopRequireDefault(require("./index"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; } /*
+ * Copyright (c) 2024, salesforce.com, inc.
+ * All rights reserved.
+ * 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
+ */
+describe('RedirectWithStatus', () => {
+  test('Redirects if no status or context is provided', () => {
+    const targetUrl = '/target';
+    const history = (0, _history.createMemoryHistory)();
+    history.push('/redirect');
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_reactRouterDom.Router, {
+      history: history
+    }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
+      path: "/redirect"
+    }, /*#__PURE__*/_react.default.createElement(_index.default, {
+      to: targetUrl
+    }))));
+    expect(history.location.pathname).toBe(targetUrl);
+  });
+  test('Redirect renders with correct status', /*#__PURE__*/_asyncToGenerator(function* () {
+    const context = {};
+    const status = 303;
+    const targetUrl = '/target';
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_reactRouterDom.StaticRouter, {
+      location: "/redirect",
+      context: context
+    }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
+      path: "/redirect"
+    }, /*#__PURE__*/_react.default.createElement(_index.default, {
+      status: status,
+      to: targetUrl
+    }))));
+    expect(context.status).toBe(status);
+    expect(context.url).toBe(targetUrl);
+  }));
+});

package/ssr/universal/components/route-component/index.d.ts

@@ -2,5 +2,5 @@ export function routeComponent(Wrapped: any, isPage: any, locals: any): {
     (props: any): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export function getRoutes(locals?: {}): any[];
+export function getAllRoutes(locals?: {}): Promise<any[]>;
 //# sourceMappingURL=index.d.ts.map

package/ssr/universal/components/route-component/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ssr/universal/components/route-component/index.js"],"names":[],"mappings":"AAyDO;;;EAkVN;AASM,8CAwBN"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ssr/universal/components/route-component/index.js"],"names":[],"mappings":"AAyDO;;;EAkVN;AAWM,0DA0BN"}

package/ssr/universal/components/route-component/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.routeComponent = exports.getRoutes = void 0;
+exports.routeComponent = exports.getAllRoutes = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _reactRouterDom = require("react-router-dom");
@@ -11,14 +11,14 @@ var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-stat
 var _appErrorBoundary = require("../../components/app-error-boundary");
 var _throw2 = _interopRequireDefault(require("../../components/throw-404"));
 var _compatibility = require("../../compatibility");
-var _routes2 = _interopRequireDefault(require("../../routes"));
+var _routes = _interopRequireDefault(require("../../routes"));
 var _events = require("../../events");
 var _withLegacyGetProps = require("../../components/with-legacy-get-props");
 var _refresh = _interopRequireDefault(require("../refresh"));
 const _excluded = ["component"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -381,43 +381,45 @@ const routeComponent = (Wrapped, isPage, locals) => {
 };
 
 /**
- * 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.
+ * Get all of the routes, including those from the app itself, the app
+ * extensions, and the SDK's internal routes.
+ *
+ * Also, wrap each route's component with the route-component HOC so that
+ * they all support `getProps` methods server-side and client-side in the same way.
  *
  * @private
  */
 exports.routeComponent = routeComponent;
-const getRoutes = (locals = {}) => {
-  let _routes = _routes2.default;
-  const {
-    applicationExtensions = []
-  } = locals;
-  if (typeof _routes2.default === 'function') {
-    _routes = (0, _routes2.default)();
-  }
-
-  // Call the `extendRoutes` function for all the Application Extensions.
-  applicationExtensions.forEach(applicationExtension => {
-    _routes = applicationExtension.extendRoutes(_routes);
+const getAllRoutes = exports.getAllRoutes = /*#__PURE__*/function () {
+  var _ref2 = _asyncToGenerator(function* (locals = {}) {
+    const {
+      applicationExtensions = []
+    } = locals;
+    const extensionRoutes = (yield Promise.all(applicationExtensions.map(extension => typeof extension.getRoutesAsync === 'function' ? extension.getRoutesAsync({
+      locals
+    }) : extension.getRoutes({
+      locals
+    })))).flat();
+    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.default
+    }, ...extensionRoutes, ...(typeof _routes.default === 'function' ? (0, _routes.default)() : _routes.default), {
+      path: '*',
+      component: _throw2.default
+    }];
+    return allRoutes.map(_ref3 => {
+      let {
+          component
+        } = _ref3,
+        rest = _objectWithoutProperties(_ref3, _excluded);
+      return _objectSpread({
+        component: component ? routeComponent(component, true, locals) : component
+      }, rest);
+    });
   });
-  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.default
-  }, ..._routes, {
-    path: '*',
-    component: _throw2.default
-  }];
-  return allRoutes.map(_ref2 => {
-    let {
-        component
-      } = _ref2,
-      rest = _objectWithoutProperties(_ref2, _excluded);
-    return _objectSpread({
-      component: component ? routeComponent(component, true, locals) : component
-    }, rest);
-  });
-};
-exports.getRoutes = getRoutes;
+  return function getAllRoutes() {
+    return _ref2.apply(this, arguments);
+  };
+}();

package/ssr/universal/components/route-component/index.test.js

@@ -253,9 +253,9 @@ describe('The routeComponent component', () => {
     });
   }));
 });
-describe('getRoutes', () => {
-  test('wraps components with the routeComponent HOC', () => {
-    const mappedRoutes = (0, _index.getRoutes)();
+describe('getAllRoutes', () => {
+  test('wraps components with the routeComponent HOC', /*#__PURE__*/_asyncToGenerator(function* () {
+    const mappedRoutes = yield (0, _index.getAllRoutes)();
     expect(mappedRoutes).toHaveLength(3);
     const [first, second, third] = mappedRoutes;
     const expectedRefetchName = 'WithErrorHandling(withRouter(routeComponent(Refresh)))';
@@ -264,7 +264,7 @@ describe('getRoutes', () => {
     expect(second.component.displayName).toBe(expectedName);
     const expected404Name = 'WithErrorHandling(withRouter(routeComponent(Throw404)))';
     expect(third.component.displayName).toBe(expected404Name);
-  });
+  }));
 });
 
 /**

package/ssr/universal/components/switch/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ssr/universal/components/switch/index.jsx"],"names":[],"mappings":";AAYA;;;;;;;;GAQG;AACH,6EAwBC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ssr/universal/components/switch/index.jsx"],"names":[],"mappings":";AAcA;;;;;;;;GAQG;AACH,6EAeC"}

package/ssr/universal/components/switch/index.js

@@ -9,6 +9,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactRouterDom = require("react-router-dom");
 var _appErrorBoundary = _interopRequireDefault(require("../app-error-boundary"));
 var _reactUid = require("react-uid");
+var _contexts = require("../../contexts");
+var _hooks = require("../../hooks");
 const _excluded = ["component"];
 /*
  * Copyright (c) 2021, salesforce.com, inc.
@@ -18,8 +20,8 @@ const _excluded = ["component"];
  */
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
 /**
  * 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
@@ -38,9 +40,28 @@ const Switch = props => {
   } = props;
   return /*#__PURE__*/_react.default.createElement(_reactUid.UIDReset, null, /*#__PURE__*/_react.default.createElement(_appErrorBoundary.default, {
     error: error
-  }, !error && /*#__PURE__*/_react.default.createElement(App, {
+  }, !error && /*#__PURE__*/_react.default.createElement(_contexts.RoutesProvider, {
+    routes: routes
+  }, /*#__PURE__*/_react.default.createElement(App, {
     preloadedProps: appState.appProps
-  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Switch, null, routes.map((route, i) => {
+  }, /*#__PURE__*/_react.default.createElement(RoutesConsumer, {
+    appState: appState
+  })))));
+};
+Switch.propTypes = {
+  error: _propTypes.default.object,
+  appState: _propTypes.default.object,
+  routes: _propTypes.default.array,
+  App: _propTypes.default.func,
+  preloadedProps: _propTypes.default.object
+};
+const RoutesConsumer = ({
+  appState
+}) => {
+  const {
+    routes
+  } = (0, _hooks.useRoutes)();
+  return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Switch, null, routes.map((route, i) => {
     const {
         component: Component
       } = route,
@@ -50,13 +71,9 @@ const Switch = props => {
     }, routeProps), /*#__PURE__*/_react.default.createElement(_reactUid.UIDFork, null, /*#__PURE__*/_react.default.createElement(Component, {
       preloadedProps: appState.pageProps
     })));
-  })))));
+  }));
 };
-Switch.propTypes = {
-  error: _propTypes.default.object,
-  appState: _propTypes.default.object,
-  routes: _propTypes.default.array,
-  App: _propTypes.default.func,
-  preloadedProps: _propTypes.default.object
+RoutesConsumer.propTypes = {
+  appState: _propTypes.default.object.isRequired
 };
 var _default = exports.default = Switch;