@salesforce/pwa-kit-react-sdk 3.8.0-preview.0-basepath → 3.8.0-preview.0

package/CHANGELOG.md

@@ -1,10 +1,6 @@
-## v3.8.0-preview.0-basepath (Sep 05, 2024)
-## v3.8.0-preview.0 (Sep 05, 2024)
-## v3.8.0-preview.basepath (Sep 05, 2024)
-## v3.8.0-dev (Aug 08, 2024)
-
-- Add support for environment level base paths, a new configuration option `envBasePath` [#1970](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1970)
-- Add support for React Router level base paths, a new `getBasePath` method to the `AppConfig` component [#1988](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1988)
+## v3.8.0-preview.0 (Oct 23, 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)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/pwa-kit-react-sdk",
-  "version": "3.8.0-preview.0-basepath",
+  "version": "3.8.0-preview.0",
   "description": "A library that supports the isomorphic React rendering pipeline for Commerce Cloud Managed Runtime apps",
   "homepage": "https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/pwa-kit-react-sdk#readme",
   "bugs": {
@@ -37,7 +37,7 @@
     "@loadable/babel-plugin": "^5.15.3",
     "@loadable/server": "^5.15.3",
     "@loadable/webpack-plugin": "^5.15.2",
-    "@salesforce/pwa-kit-runtime": "3.8.0-preview.0-basepath",
+    "@salesforce/pwa-kit-runtime": "3.8.0-preview.0",
     "@tanstack/react-query": "^4.28.0",
     "cross-env": "^5.2.1",
     "event-emitter": "^0.3.5",
@@ -50,11 +50,11 @@
   },
   "devDependencies": {
     "@loadable/component": "^5.15.3",
-    "@salesforce/pwa-kit-dev": "3.8.0-preview.0-basepath",
+    "@salesforce/pwa-kit-dev": "3.8.0-preview.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "internal-lib-build": "3.8.0-preview.0-basepath",
+    "internal-lib-build": "3.8.0-preview.0",
     "node-html-parser": "^3.3.6",
     "nodemon": "^2.0.22",
     "react": "^18.2.0",
@@ -78,5 +78,6 @@
   },
   "publishConfig": {
     "directory": "dist"
-  }
+  },
+  "gitHead": "6f0e672fef7517c7d8a5b80242a9cc0e929bc5ac"
 }

package/ssr/browser/main.js

@@ -0,0 +1,130 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.start = exports.registerServiceWorker = exports.OuterApp = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _client = require("react-dom/client");
+var _reactRouterDom = require("react-router-dom");
+var _contexts = require("../universal/contexts");
+var _app = _interopRequireDefault(require("../universal/components/_app"));
+var _compatibility = require("../universal/compatibility");
+var _switch = _interopRequireDefault(require("../universal/components/switch"));
+var _routeComponent = require("../universal/components/route-component");
+var _component = require("@loadable/component");
+var _uuidv = require("../../utils/uuidv4.client");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _loggerInstance = _interopRequireDefault(require("../../utils/logger-instance"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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 _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); } /*
+ * Copyright (c) 2021, 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
+ */ /* global __webpack_require__ */
+/* istanbul ignore next */
+const registerServiceWorker = url => {
+  return Promise.resolve().then(() => {
+    if ('serviceWorker' in navigator) {
+      return Promise.resolve().then(() => new Promise(resolve => window.addEventListener('load', resolve))).then(() => navigator.serviceWorker.register(url)).then(registration => _loggerInstance.default.info(`ServiceWorker registration successful with scope: ${registration.scope}`, {
+        namespace: 'registerServiceWorker'
+      })).catch(err => _loggerInstance.default.error('ServiceWorker registration failed', {
+        namespace: 'registerServiceWorker',
+        additionalProperties: {
+          error: err
+        }
+      }));
+    }
+  });
+};
+exports.registerServiceWorker = registerServiceWorker;
+const OuterApp = ({
+  routes,
+  error,
+  WrappedApp,
+  locals,
+  onHydrate
+}) => {
+  const AppConfig = (0, _compatibility.getAppConfig)();
+  const isInitialPageRef = (0, _react.useRef)(true);
+  return /*#__PURE__*/_react.default.createElement(_contexts.ServerContext.Provider, {
+    value: {}
+  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, {
+    ref: onHydrate
+  }, /*#__PURE__*/_react.default.createElement(_contexts.CorrelationIdProvider, {
+    correlationId: () => {
+      // If we are hydrating an error page use the server correlation id.
+      if (isInitialPageRef.current && window.__ERROR__) {
+        isInitialPageRef.current = false;
+        return window.__INITIAL_CORRELATION_ID__;
+      }
+      return (0, _uuidv.uuidv4)();
+    }
+  }, /*#__PURE__*/_react.default.createElement(AppConfig, {
+    locals: locals
+  }, /*#__PURE__*/_react.default.createElement(_switch.default, {
+    error: error,
+    appState: window.__PRELOADED_STATE__,
+    routes: routes,
+    App: WrappedApp
+  })))));
+};
+exports.OuterApp = OuterApp;
+OuterApp.propTypes = {
+  routes: _propTypes.default.array.isRequired,
+  error: _propTypes.default.object,
+  WrappedApp: _propTypes.default.func.isRequired,
+  locals: _propTypes.default.object,
+  onHydrate: _propTypes.default.func
+};
+/* istanbul ignore next */
+const start = () => {
+  const AppConfig = (0, _compatibility.getAppConfig)();
+  const rootEl = document.getElementsByClassName('react-target')[0];
+  const data = JSON.parse(document.getElementById('mobify-data').innerHTML);
+
+  // Set all globals sent from the server on the window object.
+  Object.entries(data).forEach(([key, value]) => {
+    window[key] = value;
+  });
+
+  // Tell webpack how to find javascript files
+  Object.defineProperty(__webpack_require__, 'p', {
+    get: () => window.Progressive.buildOrigin
+  });
+
+  // On the browser we don't have request.locals, so we just provide an empty
+  // object that exists for the lifetime of the app. AppConfig components can use
+  // this to set up, eg. Redux stores.
+  const locals = {};
+
+  // AppConfig.restore *must* come before getRoutes()
+  AppConfig.restore(locals, window.__PRELOADED_STATE__.__STATE_MANAGEMENT_LIBRARY);
+
+  // We need to tell the routeComponent HOC when the app is hydrating in order to
+  // prevent pages from re-fetching data on the first client-side render. The
+  // reason we do this is that we expect a render to have taken place
+  // on the server already. That server-side render already called getProps()
+  // and froze the application state as a JSON blob on the page.
+  //
+  // This is VERY fiddly – don't go crazy with window.__HYDRATING__. You have
+  // been warned.
+  window.__HYDRATING__ = true;
+  const props = {
+    error: window.__ERROR__,
+    locals: locals,
+    routes: (0, _routeComponent.getRoutes)(locals),
+    WrappedApp: (0, _routeComponent.routeComponent)(_app.default, false, locals)
+  };
+  return Promise.resolve().then(() => new Promise(resolve => (0, _component.loadableReady)(resolve))).then(() => {
+    (0, _client.hydrateRoot)(rootEl, /*#__PURE__*/_react.default.createElement(OuterApp, _extends({}, props, {
+      onHydrate: () => {
+        window.__HYDRATING__ = false;
+      }
+    })));
+  });
+};
+exports.start = start;

package/ssr/browser/main.test.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _main = require("./main");
+var _react2 = require("@testing-library/react");
+var _routeComponent = require("../universal/components/route-component");
+var errors = _interopRequireWildcard(require("../universal/errors"));
+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 }; }
+/*
+ * 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', () => {
+    _uuidv.uuidv4.mockReturnValueOnce('7f21aea5-6962-4162-8204-9da85c802022');
+    const oldPreloadedState = window.__PRELOADED_STATE__;
+    window.__PRELOADED_STATE__ = {
+      appProps: {}
+    };
+    const App = () => /*#__PURE__*/_react.default.createElement("div", null, "App");
+    const locals = {};
+    const props = {
+      error: undefined,
+      locals,
+      routes: (0, _routeComponent.getRoutes)(locals),
+      WrappedApp: (0, _routeComponent.routeComponent)(App, false, locals)
+    };
+    (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', () => {
+    const oldWindowError = window.__ERROR__;
+    window.__ERROR__ = new errors.HTTPNotFound('Not found');
+    const App = () => /*#__PURE__*/_react.default.createElement("div", null, "App");
+    const locals = {};
+    const props = {
+      error: window.__ERROR__,
+      locals,
+      routes: (0, _routeComponent.getRoutes)(locals),
+      WrappedApp: (0, _routeComponent.routeComponent)(App, false, locals)
+    };
+    (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.js

@@ -0,0 +1,434 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.render = exports.getLocationSearch = exports.default = exports.ALLOWLISTED_INLINE_SCRIPTS = void 0;
+var _path = _interopRequireDefault(require("path"));
+var _react = _interopRequireDefault(require("react"));
+var _server = _interopRequireDefault(require("react-dom/server"));
+var _reactHelmet = require("react-helmet");
+var _server2 = require("@loadable/server");
+var _reactRouterDom = require("react-router-dom");
+var _serializeJavascript = _interopRequireDefault(require("serialize-javascript"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _sprite = _interopRequireDefault(require("svg-sprite-loader/runtime/sprite.build"));
+var _ssrServer = require("@salesforce/pwa-kit-runtime/utils/ssr-server");
+var _ssrShared = require("@salesforce/pwa-kit-runtime/utils/ssr-shared");
+var _ssrConfig = require("@salesforce/pwa-kit-runtime/utils/ssr-config");
+var _utils = require("../universal/utils");
+var _contexts = require("../universal/contexts");
+var _document = _interopRequireDefault(require("../universal/components/_document"));
+var _app = _interopRequireDefault(require("../universal/components/_app"));
+var _throw2 = _interopRequireDefault(require("../universal/components/throw-404"));
+var _compatibility = require("../universal/compatibility");
+var _switch = _interopRequireDefault(require("../universal/components/switch"));
+var _routeComponent = require("../universal/components/route-component");
+var errors = _interopRequireWildcard(require("../universal/errors"));
+var _loggerInstance = _interopRequireDefault(require("../../utils/logger-instance"));
+var _performance = _interopRequireWildcard(require("../../utils/performance"));
+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 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); }
+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) 2021, 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
+ */ /**
+ * @module progressive-web-sdk/ssr/server/react-rendering
+ */
+const CWD = process.cwd();
+const BUNDLES_PATH = _path.default.resolve(CWD, 'build/loadable-stats.json');
+const VALID_TAG_NAMES = ['base', 'body', 'head', 'html', 'link', 'meta', 'noscript', 'script', 'style', 'title'];
+const ALLOWLISTED_INLINE_SCRIPTS = exports.ALLOWLISTED_INLINE_SCRIPTS = [];
+
+/**
+ * Convert from thrown Error or String to {message, status} that we need for
+ * rendering.
+ * @private
+ * @param err - Error to be converted
+ * @function
+ * @return {Object}
+ */
+const logAndFormatError = err => {
+  if (err instanceof errors.HTTPError) {
+    // These are safe to display – we expect end-users to throw them
+    return {
+      message: err.message,
+      status: err.status,
+      stack: err.stack
+    };
+  } else {
+    const cause = err.stack || err.toString();
+    _loggerInstance.default.error(cause, {
+      namespace: 'react-rendering.render'
+    });
+    const safeMessage = 'Internal Server Error';
+    return {
+      message: safeMessage,
+      status: 500,
+      stack: err.stack
+    };
+  }
+};
+
+// Because multi-value params are not supported in `aws-serverless-express` create a proper
+// search string using the `query` property. We pay special attention to the order the params
+// as best as we can.
+const getLocationSearch = (req, opts = {}) => {
+  const {
+    interpretPlusSignAsSpace = false
+  } = opts;
+  const [_, search] = req.originalUrl.split('?');
+  const params = new URLSearchParams(search);
+  const newParams = new URLSearchParams();
+  const orderedKeys = [...new Set(params.keys())];
+
+  // Maintain the original order of the parameters by iterating the
+  // ordered list of keys, and using the `req.query` object as the source of values.
+  orderedKeys.forEach(key => {
+    const value = req.query[key];
+    const values = Array.isArray(value) ? value : [value];
+    values.forEach(v => {
+      // To have feature parity to SFRA, the + sign can be treated as space
+      // However, this could potential a breaking change since not all users want to treat it as such
+      // Therefore, we create a flag for it via the app configuration
+      newParams.append(key, interpretPlusSignAsSpace ? decodeURIComponent(v).replace(/\+/, ' ') : v);
+    });
+  });
+  const searchString = newParams.toString();
+  // Update the location objects reference.
+  return searchString ? `?${searchString}` : '';
+};
+
+/**
+ * This is the main react-rendering function for SSR. It is an Express handler.
+ *
+ * @param req - Request
+ * @param res - Response
+ *
+ * @function
+ *
+ * @return {Promise}
+ */
+exports.getLocationSearch = getLocationSearch;
+const render = exports.render = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(function* (req, res, next) {
+    var _config$app, _config$app$url;
+    const includeServerTimingHeader = ('__server_timing' in req.query);
+    const shouldTrackPerformance = includeServerTimingHeader || process.env.SERVER_TIMING;
+    res.__performanceTimer = new _performance.default({
+      enabled: shouldTrackPerformance
+    });
+    res.__performanceTimer.mark(_performance.PERFORMANCE_MARKS.total, 'start');
+    const AppConfig = (0, _compatibility.getAppConfig)();
+    // Get the application config which should have been stored at this point.
+    const config = (0, _ssrConfig.getConfig)();
+    AppConfig.restore(res.locals);
+    const routes = (0, _routeComponent.getRoutes)(res.locals);
+    const WrappedApp = (0, _routeComponent.routeComponent)(_app.default, false, res.locals);
+    const [pathname] = req.originalUrl.split('?');
+    const location = {
+      pathname,
+      search: getLocationSearch(req, {
+        interpretPlusSignAsSpace: config === null || config === void 0 ? void 0 : (_config$app = config.app) === null || _config$app === void 0 ? void 0 : (_config$app$url = _config$app.url) === null || _config$app$url === void 0 ? void 0 : _config$app$url.interpretPlusSignAsSpace
+      })
+    };
+
+    // Step 1 - Find the match.
+    res.__performanceTimer.mark(_performance.PERFORMANCE_MARKS.routeMatching, 'start');
+    let route;
+    let match;
+    routes.some(_route => {
+      const _match = (0, _reactRouterDom.matchPath)(req.path, _route);
+      if (_match) {
+        match = _match;
+        route = _route;
+      }
+      return !!match;
+    });
+    res.__performanceTimer.mark(_performance.PERFORMANCE_MARKS.routeMatching, 'end');
+
+    // Step 2 - Get the component
+    res.__performanceTimer.mark(_performance.PERFORMANCE_MARKS.loadComponent, 'start');
+    const component = yield route.component.getComponent();
+    res.__performanceTimer.mark(_performance.PERFORMANCE_MARKS.loadComponent, 'end');
+
+    // Step 3 - Init the app state
+    const props = {
+      error: null,
+      appState: {},
+      routerContext: {},
+      req,
+      res,
+      App: WrappedApp,
+      routes,
+      location
+    };
+    let appJSX = /*#__PURE__*/_react.default.createElement(OuterApp, props);
+    let appState, appStateError;
+    if (component === _throw2.default) {
+      appState = {};
+      appStateError = new errors.HTTPNotFound('Not found');
+    } else {
+      res.__performanceTimer.mark(_performance.PERFORMANCE_MARKS.fetchStrategies, 'start');
+      const ret = yield AppConfig.initAppState({
+        App: WrappedApp,
+        component,
+        match,
+        route,
+        req,
+        res,
+        location,
+        appJSX
+      });
+      appState = _objectSpread(_objectSpread({}, ret.appState), {}, {
+        __STATE_MANAGEMENT_LIBRARY: AppConfig.freeze(res.locals)
+      });
+      appStateError = ret.error;
+      res.__performanceTimer.mark(_performance.PERFORMANCE_MARKS.fetchStrategies, 'end');
+    }
+    res.__performanceTimer.mark(_performance.PERFORMANCE_MARKS.renderToString, 'start');
+    appJSX = /*#__PURE__*/_react.default.cloneElement(appJSX, {
+      error: appStateError,
+      appState
+    });
+
+    // Step 4 - Render the App
+    let renderResult;
+    try {
+      renderResult = renderApp({
+        App: WrappedApp,
+        appState,
+        appStateError: appStateError && logAndFormatError(appStateError),
+        routes,
+        req,
+        res,
+        location,
+        config,
+        appJSX
+      });
+    } catch (e) {
+      // This is an unrecoverable error.
+      // (errors handled by the AppErrorBoundary are considered recoverable)
+      // Here, we use Express's convention to invoke error middleware.
+      // Note, we don't have an error handling middleware yet! This is calling the
+      // default error handling middleware provided by Express
+      return next(e);
+    }
+
+    // Step 5 - Determine what is going to happen, redirect, or send html with
+    // the correct status code.
+    const {
+      html,
+      routerContext,
+      error
+    } = renderResult;
+    const redirectUrl = routerContext.url;
+    const status = error && error.status || res.statusCode;
+    res.__performanceTimer.mark(_performance.PERFORMANCE_MARKS.renderToString, 'end');
+    res.__performanceTimer.mark(_performance.PERFORMANCE_MARKS.total, 'end');
+    res.__performanceTimer.log();
+    if (includeServerTimingHeader) {
+      res.setHeader('Server-Timing', res.__performanceTimer.buildServerTimingHeader());
+    }
+    if (redirectUrl) {
+      res.redirect(302, redirectUrl);
+    } else {
+      res.status(status).send(html);
+    }
+  });
+  return function render(_x, _x2, _x3) {
+    return _ref.apply(this, arguments);
+  };
+}();
+const OuterApp = ({
+  req,
+  res,
+  error,
+  App,
+  appState,
+  routes,
+  routerContext,
+  location
+}) => {
+  const AppConfig = (0, _compatibility.getAppConfig)();
+  return /*#__PURE__*/_react.default.createElement(_contexts.ServerContext.Provider, {
+    value: {
+      req,
+      res
+    }
+  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.StaticRouter, {
+    location: location,
+    context: routerContext
+  }, /*#__PURE__*/_react.default.createElement(_contexts.CorrelationIdProvider, {
+    correlationId: res.locals.requestId,
+    resetOnPageChange: false
+  }, /*#__PURE__*/_react.default.createElement(AppConfig, {
+    locals: res.locals
+  }, /*#__PURE__*/_react.default.createElement(_switch.default, {
+    error: error,
+    appState: appState,
+    routes: routes,
+    App: App
+  })))));
+};
+OuterApp.propTypes = {
+  req: _propTypes.default.object,
+  res: _propTypes.default.object,
+  error: _propTypes.default.object,
+  App: _propTypes.default.elementType,
+  appState: _propTypes.default.object,
+  routes: _propTypes.default.array,
+  routerContext: _propTypes.default.object,
+  location: _propTypes.default.object
+};
+const renderToString = (jsx, extractor) => _server.default.renderToString(extractor.collectChunks(jsx));
+const renderApp = args => {
+  const {
+    req,
+    res,
+    appStateError,
+    appJSX,
+    appState,
+    config
+  } = args;
+  const extractor = new _server2.ChunkExtractor({
+    statsFile: BUNDLES_PATH,
+    publicPath: (0, _utils.getAssetUrl)()
+  });
+  const ssrOnly = 'mobify_server_only' in req.query || '__server_only' in req.query;
+  const prettyPrint = 'mobify_pretty' in req.query || '__pretty_print' in req.query;
+  const indent = prettyPrint ? 8 : 0;
+  let routerContext;
+  let appHtml;
+  let renderError;
+  // It's important that we render the App before extracting the script elements,
+  // otherwise it won't return the correct chunks.
+
+  try {
+    routerContext = {};
+    appHtml = renderToString( /*#__PURE__*/_react.default.cloneElement(appJSX, {
+      routerContext
+    }), extractor);
+  } catch (e) {
+    // This will catch errors thrown from the app and pass the error
+    // to the AppErrorBoundary component, and renders the error page.
+    routerContext = {};
+    renderError = logAndFormatError(e);
+    appHtml = renderToString( /*#__PURE__*/_react.default.cloneElement(appJSX, {
+      routerContext,
+      error: renderError
+    }), extractor);
+  }
+
+  // Setting type: 'application/json' stops the browser from executing the code.
+  const scriptProps = ssrOnly ? {
+    type: 'application/json'
+  } : {};
+  let bundles = [];
+  /* istanbul ignore next */
+  if (extractor) {
+    bundles = extractor.getScriptElements().map(el => /*#__PURE__*/_react.default.cloneElement(el, _objectSpread(_objectSpread({}, el.props), scriptProps)));
+  }
+  const helmet = _reactHelmet.Helmet.renderStatic();
+
+  // Return the first error encountered during the rendering pipeline.
+  const error = appStateError || renderError;
+  // Remove the stacktrace when executing remotely as to not leak any important
+  // information to users about our system.
+  if (error && (0, _ssrServer.isRemote)()) {
+    delete error.stack;
+  }
+
+  // Do not include *dynamic*, executable inline scripts – these cause issues with
+  // strict CSP headers that customers often want to use. Avoid inline scripts,
+  // full-stop, whenever possible.
+
+  // Each key in `windowGlobals` is expected to be set on the window
+  // object, client-side, by code in ssr/browser/main.jsx.
+  //
+  // Do *not* add to these without a very good reason - globals are a liability.
+  const windowGlobals = {
+    __INITIAL_CORRELATION_ID__: res.locals.requestId,
+    __CONFIG__: config,
+    __PRELOADED_STATE__: appState,
+    __ERROR__: error,
+    // `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)
+  };
+  const scripts = [/*#__PURE__*/_react.default.createElement("script", {
+    id: "mobify-data",
+    key: "mobify-data",
+    type: "application/json" // Not executable
+    ,
+    dangerouslySetInnerHTML: {
+      __html: (0, _serializeJavascript.default)(windowGlobals, {
+        isJSON: true,
+        space: indent
+      })
+    }
+  }), ...bundles];
+  const svgs = [/*#__PURE__*/_react.default.createElement("div", {
+    key: "svg_sprite",
+    dangerouslySetInnerHTML: {
+      __html: _sprite.default.stringify()
+    }
+  })];
+  const helmetHeadTags = VALID_TAG_NAMES.map(tag => helmet[tag] && helmet[tag].toComponent()).filter(tag => tag);
+  const html = _server.default.renderToString( /*#__PURE__*/_react.default.createElement(_document.default, {
+    head: [...helmetHeadTags],
+    html: appHtml,
+    afterBodyStart: svgs,
+    beforeBodyEnd: scripts,
+    htmlAttributes: helmet.htmlAttributes.toComponent(),
+    bodyAttributes: helmet.bodyAttributes.toComponent()
+  }));
+  return {
+    error,
+    html: ['<!doctype html>', html].join(''),
+    routerContext
+  };
+};
+const getWindowProgressive = (req, res) => {
+  const options = req.app.options || {};
+  return {
+    buildOrigin: (0, _utils.getAssetUrl)(''),
+    cacheManifest: options.cacheHashManifest || {},
+    ssrOptions: {
+      // The hostname and origin under which this page is served
+      appHostname: options.appHostname,
+      appOrigin: options.appOrigin,
+      // The id of the bundle being served, as a string,
+      // defaulting to 'development' for the local dev server
+      bundleId: process.env.BUNDLE_ID || 'development',
+      // The id of the deploy as a string, defaulting to '0'
+      // for the local dev server
+      deployId: process.env.DEPLOY_ID || '0',
+      // On a local dev server, the DEPLOY_TARGET environment variable
+      // isn't defined by default. Developers may define it if it's
+      // used by the UPWA to modify behaviour.
+      deployTarget: process.env.DEPLOY_TARGET || 'local',
+      proxyConfigs: _ssrShared.proxyConfigs,
+      // The request class (undefined by default)
+      requestClass: res.locals.requestClass
+    }
+  };
+};
+const serverRenderer =
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+({
+  clientStats,
+  serverStats
+}) => {
+  return (req, res, next) => render(req, res, next);
+};
+var _default = exports.default = serverRenderer;