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

package/CHANGELOG.md

@@ -1,13 +1,34 @@
+## 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.9.0-dev (Oct 29, 2024)
+
+## 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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/pwa-kit-react-sdk",
-  "version": "4.0.0-extensibility-preview.3",
+  "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.3",
-    "@salesforce/pwa-kit-runtime": "4.0.0-extensibility-preview.3",
-    "@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.3",
+    "@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.3",
+    "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": "904de01e826117febeea952e034478349e16ea4d"
+  "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.
@@ -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/universal/components/redirect-with-status/index.js

@@ -15,8 +15,8 @@ const _excluded = ["status", "staticContext"];
  * 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 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 `RedirectWithStatus` component is used to specify a different status code when redirecting via
  * the Redirect component.

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;

package/ssr/universal/components/with-legacy-get-props/index.js

@@ -49,7 +49,7 @@ const withLegacyGetProps = Wrapped => {
           // to avoid blocking the execution of the getProps function to maximize performance
           // getTemplateName should be very fast, under 0.2ms
           c.getTemplateName().then(templateName => {
-            res.__performanceTimer.mark(`${_performance.PERFORMANCE_MARKS.getProps}::${templateName}`, 'start');
+            res.__performanceTimer.mark(`${_performance.PERFORMANCE_MARKS.getProps}.${templateName}`, 'start');
           });
           return c.getProps ? c.getProps({
             req,
@@ -58,7 +58,7 @@ const withLegacyGetProps = Wrapped => {
             location
           }).then(result => {
             c.getTemplateName().then(templateName => {
-              res.__performanceTimer.mark(`${_performance.PERFORMANCE_MARKS.getProps}::${templateName}`, 'end');
+              res.__performanceTimer.mark(`${_performance.PERFORMANCE_MARKS.getProps}.${templateName}`, 'end');
             });
             return result;
           }) : Promise.resolve({});

package/ssr/universal/components/with-react-query/index.js

@@ -83,10 +83,10 @@ const withReactQuery = (Wrapped, options = {}) => {
         yield Promise.all(queries.map((q, i) => {
           var _q$meta, _q$meta2;
           // always include the index to avoid duplicate entries
-          const displayName = (_q$meta = q.meta) !== null && _q$meta !== void 0 && _q$meta.displayName ? `${(_q$meta2 = q.meta) === null || _q$meta2 === void 0 ? void 0 : _q$meta2.displayName}:${i}` : `${i}`;
-          res.__performanceTimer.mark(`${_performance.PERFORMANCE_MARKS.reactQueryUseQuery}::${displayName}`, 'start');
+          const displayName = (_q$meta = q.meta) !== null && _q$meta !== void 0 && _q$meta.displayName ? `${(_q$meta2 = q.meta) === null || _q$meta2 === void 0 ? void 0 : _q$meta2.displayName}-${i}` : `${i}`;
+          res.__performanceTimer.mark(`${_performance.PERFORMANCE_MARKS.reactQueryUseQuery}.${displayName}`, 'start');
           return q.fetch().then(result => {
-            res.__performanceTimer.mark(`${_performance.PERFORMANCE_MARKS.reactQueryUseQuery}::${displayName}`, 'end', {
+            res.__performanceTimer.mark(`${_performance.PERFORMANCE_MARKS.reactQueryUseQuery}.${displayName}`, 'end', {
               detail: q.queryHash
             });
             return result;

package/ssr/universal/components/with-react-query/index.test.js

@@ -4,14 +4,23 @@ var _index = require("./index");
 var _react = require("@testing-library/react");
 var _react2 = _interopRequireDefault(require("react"));
 var _loggerInstance = _interopRequireDefault(require("../../../../utils/logger-instance"));
+var _performance = require("../../../../utils/performance");
 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); }); }; }
+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; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /*
  * Copyright (c) 2022, 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
  */
-
+jest.mock('@tanstack/react-query', () => _objectSpread(_objectSpread({}, jest.requireActual('@tanstack/react-query')), {}, {
+  dehydrate: jest.fn().mockReturnValue({})
+}));
 jest.mock('../../../../utils/logger-instance', () => {
   return {
     error: jest.fn()
@@ -98,4 +107,101 @@ describe('withReactQuery', function () {
       getHOCsInUse: () => ['xyz']
     }).getHOCsInUse()).toHaveLength(2);
   });
+  test('Performance markers use hyphen as delimiter for displayName', /*#__PURE__*/_asyncToGenerator(function* () {
+    const mockPerformanceTimer = {
+      mark: jest.fn()
+    };
+    const mockQueryMeta = {
+      displayName: 'TestQuery'
+    };
+    const mockQueryCache = {
+      getAll: jest.fn().mockReturnValue([{
+        options: {
+          enabled: true
+        },
+        meta: mockQueryMeta,
+        queryHash: 'test-hash',
+        fetch: jest.fn().mockResolvedValue({})
+      }])
+    };
+    const mockQueryClient = {
+      getQueryCache: jest.fn().mockReturnValue(mockQueryCache)
+    };
+    const res = {
+      locals: {
+        __queryClient: mockQueryClient
+      },
+      __performanceTimer: mockPerformanceTimer
+    };
+    const Component = (0, _index.withReactQuery)({});
+    yield Component.doInitAppState({
+      res,
+      appJSX: /*#__PURE__*/_react2.default.createElement("div", null, "Test")
+    });
+    expect(mockPerformanceTimer.mark).toHaveBeenCalledWith(`${_performance.PERFORMANCE_MARKS.reactQueryUseQuery}.TestQuery-0`, 'start');
+    expect(mockPerformanceTimer.mark).toHaveBeenCalledWith(`${_performance.PERFORMANCE_MARKS.reactQueryUseQuery}.TestQuery-0`, 'end', expect.objectContaining({
+      detail: 'test-hash'
+    }));
+  }));
+  test('Performance markers use index as displayName when meta.displayName is not available', /*#__PURE__*/_asyncToGenerator(function* () {
+    const mockPerformanceTimer = {
+      mark: jest.fn()
+    };
+    const mockQueryCache = {
+      getAll: jest.fn().mockReturnValue([{
+        options: {
+          enabled: true
+        },
+        meta: {},
+        queryHash: 'test-hash',
+        fetch: jest.fn().mockResolvedValue({})
+      }])
+    };
+    const mockQueryClient = {
+      getQueryCache: jest.fn().mockReturnValue(mockQueryCache)
+    };
+    const res = {
+      locals: {
+        __queryClient: mockQueryClient
+      },
+      __performanceTimer: mockPerformanceTimer
+    };
+    const Component = (0, _index.withReactQuery)({});
+    yield Component.doInitAppState({
+      res,
+      appJSX: /*#__PURE__*/_react2.default.createElement("div", null, "Test")
+    });
+
+    // Verify the performance marker uses just the index when no displayName is available
+    expect(mockPerformanceTimer.mark).toHaveBeenCalledWith(`${_performance.PERFORMANCE_MARKS.reactQueryUseQuery}.0`, 'start');
+    expect(mockPerformanceTimer.mark).toHaveBeenCalledWith(`${_performance.PERFORMANCE_MARKS.reactQueryUseQuery}.0`, 'end', expect.objectContaining({
+      detail: 'test-hash'
+    }));
+  }));
+  test('Performance markers for reactQueryPrerender are set correctly', /*#__PURE__*/_asyncToGenerator(function* () {
+    const mockPerformanceTimer = {
+      mark: jest.fn()
+    };
+    const mockQueryCache = {
+      getAll: jest.fn().mockReturnValue([])
+    };
+    const mockQueryClient = {
+      getQueryCache: jest.fn().mockReturnValue(mockQueryCache)
+    };
+    const res = {
+      locals: {
+        __queryClient: mockQueryClient
+      },
+      __performanceTimer: mockPerformanceTimer
+    };
+    const Component = (0, _index.withReactQuery)({});
+    yield Component.doInitAppState({
+      res,
+      appJSX: /*#__PURE__*/_react2.default.createElement("div", null, "Test")
+    });
+
+    // Verify the performance markers for reactQueryPrerender are set correctly
+    expect(mockPerformanceTimer.mark).toHaveBeenCalledWith(_performance.PERFORMANCE_MARKS.reactQueryPrerender, 'start');
+    expect(mockPerformanceTimer.mark).toHaveBeenCalledWith(_performance.PERFORMANCE_MARKS.reactQueryPrerender, 'end');
+  }));
 });

package/ssr/universal/contexts/index.d.ts

@@ -21,6 +21,24 @@ export namespace CorrelationIdProvider {
     }
 }
 export const ServerContext: React.Context<any>;
+export const RoutesContext: React.Context<any>;
+/**
+ * This provider initializes the routes
+ * @param children
+ * @param routes - array of routes
+ */
+export function RoutesProvider({ routes, children }: {
+    routes: any;
+    children: any;
+}): import("react/jsx-runtime").JSX.Element;
+export namespace RoutesProvider {
+    export namespace propTypes_1 {
+        export const routes: PropTypes.Validator<any[]>;
+        const children_1: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
+        export { children_1 as children };
+    }
+    export { propTypes_1 as propTypes };
+}
 import React from "react";
 import PropTypes from "prop-types";
 //# sourceMappingURL=index.d.ts.map

package/ssr/universal/contexts/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ssr/universal/contexts/index.js"],"names":[],"mappings":"AAYA,sDAAkD;AAGlD;;;;;;;GAOG;AACH;;;;4CAiCC;;;;;;;;;AA3CD,+CAA2C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ssr/universal/contexts/index.js"],"names":[],"mappings":"AAYA,sDAAkD;AAGlD;;;;;;;GAOG;AACH;;;;4CAiCC;;;;;;;;;AA3CD,+CAA2C;AAoD3C,+CAA2C;AAE3C;;;;GAIG;AACH;;;4CAQC"}

package/ssr/universal/contexts/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ServerContext = exports.CorrelationIdProvider = exports.CorrelationIdContext = void 0;
+exports.ServerContext = exports.RoutesProvider = exports.RoutesContext = exports.CorrelationIdProvider = exports.CorrelationIdContext = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactRouterDom = require("react-router-dom");
@@ -69,4 +69,28 @@ CorrelationIdProvider.propTypes = {
   resetOnPageChange: _propTypes.default.bool,
   correlationId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]).isRequired,
   location: _propTypes.default.object
+};
+const RoutesContext = exports.RoutesContext = /*#__PURE__*/_react.default.createContext();
+
+/**
+ * This provider initializes the routes
+ * @param children
+ * @param routes - array of routes
+ */
+const RoutesProvider = ({
+  routes,
+  children
+}) => {
+  const [_routes, setRoutes] = (0, _react.useState)(routes);
+  return /*#__PURE__*/_react.default.createElement(RoutesContext.Provider, {
+    value: {
+      routes: _routes,
+      setRoutes
+    }
+  }, children);
+};
+exports.RoutesProvider = RoutesProvider;
+RoutesProvider.propTypes = {
+  routes: _propTypes.default.array.isRequired,
+  children: _propTypes.default.node.isRequired
 };

package/ssr/universal/contexts/index.test.js

@@ -98,4 +98,30 @@ describe('CorrelationIdProvider', function () {
     // expecting the provider to have a different correlation id when a page navigation happens
     expect(firstRenderedId).not.toEqual(secondRenderedId);
   }));
+});
+describe('RoutesProvider', () => {
+  it('provides routes via context', () => {
+    const testRoutes = [{
+      path: '/home'
+    }, {
+      path: '/about'
+    }];
+    const TestComponent = () => {
+      const {
+        routes
+      } = (0, _hooks.useRoutes)();
+      return /*#__PURE__*/_react.default.createElement("div", null, routes.map(route => route.path).join(', '));
+    };
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.RoutesProvider, {
+      routes: testRoutes
+    }, /*#__PURE__*/_react.default.createElement(TestComponent, null)));
+    expect(_react2.screen.getByText('/home, /about')).toBeInTheDocument();
+  });
+  it('throws an error when useRoutes is used outside RoutesProvider', () => {
+    const TestComponent = () => {
+      (0, _hooks.useRoutes)();
+      return null;
+    };
+    expect(() => (0, _react2.render)(/*#__PURE__*/_react.default.createElement(TestComponent, null))).toThrow('useRoutes must be used within a RoutesProvider');
+  });
 });

package/ssr/universal/errors.d.ts

@@ -1,13 +1,9 @@
-export class HTTPError extends Error {
-    constructor(status: any, message: any);
-    constructor: typeof HTTPError;
-    __proto__: HTTPError;
-    message: any;
-    status: any;
+export declare class HTTPError extends Error {
+    status: number;
+    constructor(status: number, message: string);
+    toString(): string;
 }
-export class HTTPNotFound extends HTTPError {
-    constructor(message: any);
-    constructor: typeof HTTPNotFound;
-    __proto__: HTTPNotFound;
+export declare class HTTPNotFound extends HTTPError {
+    constructor(message: string);
 }
 //# sourceMappingURL=errors.d.ts.map

package/ssr/universal/errors.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../../../src/ssr/universal/errors.js"],"names":[],"mappings":"AAOA;IACI,uCAMC;IAJG,8BAA4B;IAC5B,qBAAoC;IACpC,aAAsB;IACtB,YAAoB;CAM3B;AAED;IACI,0BAIC;IAFG,iCAA+B;IAC/B,wBAAuC;CAE9C"}
+{"version":3,"file":"errors.d.ts","sourceRoot":"","sources":["../../../src/ssr/universal/errors.ts"],"names":[],"mappings":"AAOA,qBAAa,SAAU,SAAQ,KAAK;IAChC,MAAM,EAAE,MAAM,CAAA;gBAEF,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM;IAK3C,QAAQ;CAGX;AAED,qBAAa,YAAa,SAAQ,SAAS;gBAC3B,OAAO,EAAE,MAAM;CAG9B"}

package/ssr/universal/errors.js

@@ -14,9 +14,6 @@ exports.HTTPNotFound = exports.HTTPError = void 0;
 class HTTPError extends Error {
   constructor(status, message) {
     super(message);
-    this.constructor = HTTPError;
-    this.__proto__ = HTTPError.prototype;
-    this.message = message;
     this.status = status;
   }
   toString() {
@@ -27,8 +24,6 @@ exports.HTTPError = HTTPError;
 class HTTPNotFound extends HTTPError {
   constructor(message) {
     super(404, message);
-    this.constructor = HTTPNotFound;
-    this.__proto__ = HTTPNotFound.prototype;
   }
 }
 exports.HTTPNotFound = HTTPNotFound;

package/ssr/universal/events.d.ts

@@ -3,7 +3,7 @@ export namespace PAGEEVENTS {
     const ERROR: string;
 }
 export const pages: Pages;
-declare class Pages {
+declare class Pages extends EventTarget {
     pageLoad(templateName: any, start: any, end: any): void;
     error(name: any, content: any): void;
 }

package/ssr/universal/events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../src/ssr/universal/events.js"],"names":[],"mappings":";;;;AAiCA,0BAAgC;AApBhC;IACI,wDAOC;IACD,qCAMC;CACJ"}
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../../src/ssr/universal/events.js"],"names":[],"mappings":";;;;AA6BA,0BAAgC;AAlBhC;IACI,wDAOC;IACD,qCAMC;CACJ"}

package/ssr/universal/events.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.pages = exports.PAGEEVENTS = void 0;
-var _eventEmitter = _interopRequireDefault(require("event-emitter"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /*
  * Copyright (c) 2021, salesforce.com, inc.
  * All rights reserved.
@@ -17,22 +15,25 @@ const PAGEEVENTS = exports.PAGEEVENTS = {
   PAGELOAD: 'PAGELOAD',
   ERROR: 'ERROR'
 };
-class Pages {
+class Pages extends EventTarget {
   pageLoad(templateName, start, end) {
     const payload = {
       templateName,
       start,
       end
     };
-    this.emit(PAGEEVENTS.PAGELOAD, payload);
+    this.dispatchEvent(new CustomEvent(PAGEEVENTS.PAGELOAD, {
+      detail: payload
+    }));
   }
   error(name, content) {
     const payload = {
       name,
       content
     };
-    this.emit(PAGEEVENTS.ERROR, payload);
+    this.dispatchEvent(new CustomEvent(PAGEEVENTS.ERROR, {
+      detail: payload
+    }));
   }
 }
-(0, _eventEmitter.default)(Pages.prototype);
 const pages = exports.pages = new Pages();

package/ssr/universal/events.test.js

@@ -12,8 +12,8 @@ describe('Page Events', () => {
   test('emit and receive a PAGELOAD Page Event', () => {
     expect.assertions(1);
     return new Promise(resolve => {
-      _events.pages.on(_events.PAGEEVENTS.PAGELOAD, evt => {
-        expect(JSON.stringify(evt)).toEqual(JSON.stringify({
+      _events.pages.addEventListener(_events.PAGEEVENTS.PAGELOAD, evt => {
+        expect(JSON.stringify(evt.detail)).toEqual(JSON.stringify({
           templateName: 'blah',
           start: 123,
           end: 456
@@ -26,8 +26,8 @@ describe('Page Events', () => {
   test('emit and receive a ERROR Page Event', () => {
     expect.assertions(1);
     return new Promise(resolve => {
-      _events.pages.on(_events.PAGEEVENTS.ERROR, evt => {
-        expect(JSON.stringify(evt)).toEqual(JSON.stringify({
+      _events.pages.addEventListener(_events.PAGEEVENTS.ERROR, evt => {
+        expect(JSON.stringify(evt.detail)).toEqual(JSON.stringify({
           name: 'blah',
           content: 'more blah'
         }));

package/ssr/universal/hooks/index.d.ts

@@ -3,6 +3,7 @@ export function useServerContext(): ServerContext;
 export function useOrigin({ fromXForwardedHeader }: {
     fromXForwardedHeader?: boolean | undefined;
 }): string;
+export function useRoutes(): object;
 /**
  * Server context
  */

package/ssr/universal/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ssr/universal/hooks/index.js"],"names":[],"mappings":"AAgBO,oCAFM,MAAM,CAQlB;AAiBM,oCANM,aAAa,CAUzB;AAcM;;IAHM,MAAM,CAiBlB;;;;;;;;SA5Ca,MAAM;;;;SACN,MAAM"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ssr/universal/hooks/index.js"],"names":[],"mappings":"AAgBO,oCAFM,MAAM,CAQlB;AAiBM,oCANM,aAAa,CAUzB;AAcM;;IAHM,MAAM,CAiBlB;AAOM,6BAFM,MAAM,CAQlB;;;;;;;;SAzDa,MAAM;;;;SACN,MAAM"}

package/ssr/universal/hooks/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useServerContext = exports.useOrigin = exports.useCorrelationId = void 0;
+exports.useServerContext = exports.useRoutes = exports.useOrigin = exports.useCorrelationId = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _contexts = require("../contexts");
 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); }
@@ -81,4 +81,18 @@ const useOrigin = ({
   }
   return APP_ORIGIN;
 };
-exports.useOrigin = useOrigin;
+
+/**
+ * Use this hook to get the routes value of the closest RoutesProvider component.
+ *
+ * @returns {object} array of routes
+ */
+exports.useOrigin = useOrigin;
+const useRoutes = () => {
+  const context = (0, _react.useContext)(_contexts.RoutesContext);
+  if (!context) {
+    throw new Error('useRoutes must be used within a RoutesProvider');
+  }
+  return context;
+};
+exports.useRoutes = useRoutes;

package/ssr/universal/utils.d.ts

@@ -18,7 +18,7 @@ export declare const getAssetUrl: (path: string) => string;
  * @function
  * @returns {string} The full URL to the static asset.
  */
-export declare const getStaticAssetUrl: (path: string, opts: GetAssetUrlOptions) => string;
+export declare const getStaticAssetUrl: (path?: string, opts?: GetAssetUrlOptions) => string;
 /**
  * @typedef {Object} ProxyConfig
  * @property {String} protocol - http or https

package/ssr/universal/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ssr/universal/utils.ts"],"names":[],"mappings":"AAuBA,KAAK,kBAAkB,GAAG;IACtB,uBAAuB,CAAC,EAAE,MAAM,CAAA;CACnC,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,SAAU,MAAM,WAQvC,CAAA;AAID;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,SAAU,MAAM,QAAQ,kBAAkB,WAiBvE,CAAA;AAED;;;;;GAKG;AAEH;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,WAS3B,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ssr/universal/utils.ts"],"names":[],"mappings":"AAuBA,KAAK,kBAAkB,GAAG;IACtB,uBAAuB,CAAC,EAAE,MAAM,CAAA;CACnC,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,WAAW,SAAU,MAAM,WAQvC,CAAA;AAID;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,yBAAqB,kBAAkB,WAkBpE,CAAA;AAED;;;;;GAKG;AAEH;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,WAS3B,CAAA"}

package/ssr/universal/utils.js

@@ -20,7 +20,7 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  */ /* eslint-disable @typescript-eslint/ban-ts-comment */ // @ts-ignore
 // @ts-ignore
 const onClient = typeof window !== 'undefined';
-const EXTENIONS_NAMESPACE = '__extensions';
+const EXTENSIONS_NAMESPACE = '__extensions';
 const STATIC_FOLDER = 'static';
 /**
  * Get the URL that should be used to load an asset from the bundle.
@@ -38,7 +38,7 @@ const getAssetUrl = path => {
 };
 
 // TODO: Once we establish that we have a new @salesforce/pwa-kit-extensibility package, we can move this utility to
-// it as to not have direct references to extensibilty in the sdk. This will also reduce duplicate code.
+// it as to not have direct references to extensibility in the sdk. This will also reduce duplicate code.
 /**
  * Get the URL that should be used to load a static asset from the bundle.
  *
@@ -49,21 +49,22 @@ const getAssetUrl = path => {
  * @returns {string} The full URL to the static asset.
  */
 exports.getAssetUrl = getAssetUrl;
-const getStaticAssetUrl = (path, opts) => {
+const getStaticAssetUrl = (path = '', opts = {}) => {
   const {
     appExtensionPackageName = ''
   } = opts || {};
 
   /* istanbul ignore next */
-  const publicPath = onClient ?
-  // @ts-ignore
-  `${window.Progressive.buildOrigin}` : `${_ssrNamespacePaths.bundleBasePath}/${process.env.BUNDLE_ID || 'development'}/`;
+  let publicPath = getAssetUrl('');
 
   // Ensure all defined path arguments start with `/`.
   if (path && !path.startsWith('/')) {
     path = `/${path}`;
   }
-  return `${publicPath}/${STATIC_FOLDER}${appExtensionPackageName ? `/${EXTENIONS_NAMESPACE}/${appExtensionPackageName}` : ''}${path ? path : ''}`;
+  if (publicPath && !publicPath.endsWith('/')) {
+    publicPath = `${publicPath}/`;
+  }
+  return `${publicPath}${STATIC_FOLDER}${appExtensionPackageName ? `/${EXTENSIONS_NAMESPACE}/${appExtensionPackageName}` : ''}${path ? path : ''}`;
 };
 
 /**

package/utils/performance.js

@@ -14,14 +14,14 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  */
 
 const PERFORMANCE_MARKS = exports.PERFORMANCE_MARKS = {
-  total: 'ssr:total',
-  renderToString: 'ssr:render-to-string',
-  routeMatching: 'ssr:route-matching',
-  loadComponent: 'ssr:load-component',
-  fetchStrategies: 'ssr:fetch-strategies',
-  reactQueryPrerender: 'ssr:fetch-strategies:react-query:pre-render',
-  reactQueryUseQuery: 'ssr:fetch-strategies:react-query:use-query',
-  getProps: 'ssr:fetch-strategies:get-prop'
+  total: 'ssr.total',
+  renderToString: 'ssr.render-to-string',
+  routeMatching: 'ssr.route-matching',
+  loadComponent: 'ssr.load-component',
+  fetchStrategies: 'ssr.fetch-strategies',
+  reactQueryPrerender: 'ssr.fetch-strategies.react-query.pre-render',
+  reactQueryUseQuery: 'ssr.fetch-strategies.react-query.use-query',
+  getProps: 'ssr.fetch-strategies.get-prop'
 };
 
 /**
@@ -60,7 +60,7 @@ class PerformanceTimer {
    */
   buildServerTimingHeader() {
     const header = this.metrics.map(metric => {
-      return `${metric.name};dur=${metric.duration}`;
+      return `${metric.name};dur=${metric.duration.toFixed(2)}`;
     }).join(', ');
     return header;
   }