@salesforce/pwa-kit-react-sdk 3.0.0-preview.0

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

@@ -0,0 +1,375 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _index = require("./index");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } /*
+                                                                                                                                                                                                                                                                                                                                                                                                       * 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
+                                                                                                                                                                                                                                                                                                                                                                                                       */
+// TODO: The way mocks are set up in this file is kinda weird...
+/* eslint-disable @typescript-eslint/no-var-requires */
+const delay = t => new Promise(resolve => setTimeout(resolve, t));
+
+/**
+ * Return a mock that returns true, false, false, false, which is what
+ * we want when testing shouldGetProps – always returning true would cause
+ * an infinite loop.
+ */
+const trueOnceThenFalse = () => jest.fn().mockReturnValue(false).mockReturnValueOnce(true);
+const falseOnceThenTrue = () => jest.fn().mockReturnValue(true).mockReturnValueOnce(false);
+jest.mock('../_app-config', () => {
+  const React = require('react');
+  const PropTypes = require('prop-types');
+  const MockAppConfig = () => /*#__PURE__*/React.createElement("h1", null, "MockAppConfig");
+  MockAppConfig.freeze = jest.fn(() => ({
+    frozen: 'frozen'
+  }));
+  MockAppConfig.restore = jest.fn(() => undefined);
+  MockAppConfig.extraGetPropsArgs = jest.fn(() => ({
+    anotherArg: 'anotherArg'
+  }));
+  MockAppConfig.propTypes = {
+    children: PropTypes.node
+  };
+  return {
+    __esModule: true,
+    default: MockAppConfig
+  };
+});
+jest.mock('../../routes', () => {
+  const React = require('react');
+  const PropTypes = require('prop-types');
+  const Component = ({
+    children
+  }) => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h1", null, "This is the root"), children);
+  Component.propTypes = {
+    children: PropTypes.node
+  };
+  return [{
+    path: '',
+    component: Component,
+    exact: true
+  }];
+});
+
+// NOTE: `react-router-dom` is being mocked because I was not able to get around the
+// issue where you can't use a `withRoute` HoC outside of a Router component for this
+// specific test. TODO: Revisit this, so that we don't have to mock `react-router-dom`
+jest.mock('react-router-dom', () => {
+  const React = require('react');
+  const hoistNonReactStatic = require('hoist-non-react-statics');
+  const withRouter = Wrapped => {
+    const wrappedComponentName = Wrapped.displayName || Wrapped.name;
+    const WithRouter = props => /*#__PURE__*/React.createElement(Wrapped, props);
+    hoistNonReactStatic(WithRouter, Wrapped);
+    WithRouter.displayName = `withRouter(${wrappedComponentName})`;
+    return WithRouter;
+  };
+  return {
+    __esModule: true,
+    default: {},
+    withRouter
+  };
+});
+const getMockComponent = () => {
+  const MockComponent = () => /*#__PURE__*/_react.default.createElement("p", null, "MockComponent");
+  MockComponent.displayName = 'MockComponent';
+  MockComponent.shouldGetProps = trueOnceThenFalse();
+  MockComponent.getProps = jest.fn(() => {
+    return Promise.resolve();
+  });
+  MockComponent.getTemplateName = jest.fn(() => 'MockComponent');
+  return MockComponent;
+};
+beforeEach(() => {
+  delete global.__HYDRATING__;
+});
+describe('The routeComponent component', () => {
+  test('Is a higher-order component', () => {
+    const Mock = getMockComponent();
+    const Component = (0, _index.routeComponent)(Mock);
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Component, {
+      isHydrating: false
+    }));
+    expect(_react2.screen.getByText(/mockComponent/i)).toBeInTheDocument();
+  });
+  test('Should call getProps on components at the right times during updates/rendering', () => {
+    const Mock = getMockComponent();
+    const Component = (0, _index.routeComponent)(Mock);
+    Component.displayName = 'routeComponent';
+    expect(Mock.shouldGetProps.mock.calls).toHaveLength(0);
+    expect(Mock.getProps.mock.calls).toHaveLength(0);
+    let wrapper;
+    return Promise.resolve().then(() => {
+      // Mock Hydrating Start
+      global.__HYDRATING__ = true;
+    }).then(() => {
+      // Simulate the initial client-side mount (hydrating=true)
+      return new Promise(resolve => {
+        wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Component, {
+          history: {
+            location: {
+              pathname: '/home/'
+            }
+          },
+          onUpdateComplete: resolve
+        }));
+      });
+    }).then(() => {
+      expect(Mock.shouldGetProps.mock.calls).toHaveLength(0);
+      expect(Mock.getProps.mock.calls).toHaveLength(0);
+    }).then(() => {
+      // Mock Hydrating Complete
+      global.__HYDRATING__ = false;
+    }).then(() => {
+      // Simulate visiting a different URL, which should trigger shouldMount() and getProps()
+      return new Promise(resolve => {
+        wrapper.rerender( /*#__PURE__*/_react.default.createElement(Component, {
+          history: {
+            location: {
+              pathname: '/plp/'
+            }
+          },
+          onUpdateComplete: resolve
+        }));
+      });
+    }).then(() => {
+      expect(Mock.shouldGetProps.mock.calls).toHaveLength(1);
+      expect(Mock.getProps.mock.calls).toHaveLength(1);
+    });
+  });
+  test('Provides defaults for getProps(), shouldGetProps() and getTemplateName()', () => {
+    const ComponentWithoutStatics = () => /*#__PURE__*/_react.default.createElement("p", null, "ComponentWithoutStatics");
+    const Component = (0, _index.routeComponent)(ComponentWithoutStatics);
+    const l1 = {
+      pathname: '/location-one/'
+    };
+    const l2 = {
+      pathname: '/location-two/'
+    };
+    const checks = [Component.shouldGetProps({
+      previousLocation: l1,
+      location: l1
+    }).then(v => expect(v).toBe(false)), Component.shouldGetProps({
+      previousLocation: l1,
+      location: l2
+    }).then(v => expect(v).toBe(true)), Component.getTemplateName().then(v => expect(v).toBe('ComponentWithoutStatics')), Component.getProps().then(result => expect(result).toBeUndefined())];
+    expect.assertions(checks.length);
+    return Promise.all(checks);
+  });
+  test('Allows the wrapped component to override getProps(), shouldGetProps and getTemplateName()', () => {
+    class Mock extends _react.default.Component {
+      static shouldGetProps({
+        location
+      }) {
+        return location.pathname === '/should-get-props/';
+      }
+      static getProps() {
+        return Promise.resolve('overridden-get-props');
+      }
+      static getTemplateName() {
+        return 'overriden-template-name';
+      }
+      render() {
+        return /*#__PURE__*/_react.default.createElement("div", null, "Mock");
+      }
+    }
+    const Component = (0, _index.routeComponent)(Mock);
+    const l1 = {
+      pathname: '/location-one/'
+    };
+    const l2 = {
+      pathname: '/location-two/'
+    };
+    const l3 = {
+      pathname: '/should-get-props/'
+    };
+    const checks = [Component.shouldGetProps({
+      previousLocation: l1,
+      location: l1
+    }).then(v => expect(v).toBe(false)), Component.shouldGetProps({
+      previousLocation: l1,
+      location: l2
+    }).then(v => expect(v).toBe(false)), Component.shouldGetProps({
+      previousLocation: l1,
+      location: l3
+    }).then(v => expect(v).toBe(true)), Component.getTemplateName().then(v => expect(v).toBe('overriden-template-name')), Component.getProps().then(v => expect(v).toBe('overridden-get-props'))];
+    expect.assertions(checks.length);
+    return Promise.all(checks);
+  });
+  test(`Catches and calls onGetPropsError() when getProps throws`, () => {
+    const error = 'throwErrorText';
+    const Mock = () => /*#__PURE__*/_react.default.createElement("div", null, "Mock");
+    Mock.shouldGetProps = trueOnceThenFalse();
+    Mock.getProps = () => {
+      throw error;
+    };
+    const Component = (0, _index.routeComponent)(Mock, {}, true);
+    return new Promise(resolve => (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Component, {
+      isHydrating: false,
+      onGetPropsError: resolve
+    }))).then(caught => expect(caught).toBe(error));
+  });
+  test(`Catches and calls onGetPropsError() when getProps rejects`, () => {
+    const errorText = 'rejectErrorText';
+    const Mock = () => /*#__PURE__*/_react.default.createElement("div", null, "Mock");
+    Mock.shouldGetProps = trueOnceThenFalse();
+    Mock.getProps = () => delay(10).then(() => Promise.reject(errorText));
+    const Component = (0, _index.routeComponent)(Mock);
+    return new Promise(resolve => (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Component, {
+      isHydrating: false,
+      onGetPropsError: resolve
+    }))).then(caught => expect(caught).toBe(errorText));
+  });
+  test(`Passes props returned from getProps to the wrapped component`, /*#__PURE__*/_asyncToGenerator(function* () {
+    const initialProps = {
+      foo: 'bar'
+    };
+    const Mock = props => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "props"
+    }, JSON.stringify(props)));
+    Mock.displayName = 'MockComponent';
+    Mock.getProps = () => delay(150).then(() => initialProps);
+    Mock.shouldGetProps = trueOnceThenFalse();
+    const Component = (0, _index.routeComponent)(Mock, {}, true);
+    yield new Promise(resolve => {
+      (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Component, {
+        onUpdateComplete: () => {
+          resolve();
+        }
+      }));
+    });
+    yield (0, _react2.waitFor)(() => {
+      expect(_react2.screen.getByTestId('props').innerHTML).toEqual(JSON.stringify({
+        foo: 'bar',
+        isLoading: false
+      }));
+    });
+  }));
+});
+describe('getRoutes', () => {
+  test('wraps components with the routeComponent HOC', () => {
+    const mappedRoutes = (0, _index.getRoutes)();
+    expect(mappedRoutes).toHaveLength(2);
+    const [first, second] = mappedRoutes;
+    const expectedName = 'WithErrorHandling(withRouter(routeComponent(Component)))';
+    expect(first.component.displayName).toBe(expectedName);
+    const expected404Name = 'WithErrorHandling(withRouter(routeComponent(Throw404)))';
+    expect(second.component.displayName).toBe(expected404Name);
+  });
+});
+
+/**
+ * A race condition is created when a user clicks two links for the same
+ * component. If the getProps call for the second link resolves before the
+ * first, we want to make sure the results of the first are ignored. In this
+ * test we rerender returned from first rendering twice to trigger getProps calls and make sure only the
+ * second one updates the component.
+ */
+describe('Handles race conditions for getProps', () => {
+  test(`unresolved calls to 'getProps' are squashed by new new calls`, /*#__PURE__*/_asyncToGenerator(function* () {
+    const renderFunc = jest.fn();
+
+    // We can't inspect the render directly, so include this mock function
+    // in the render and inspect that
+    // eslint-disable-next-line react/prop-types
+    const MockComponent = ({
+      callId
+    }) => /*#__PURE__*/_react.default.createElement("p", null, renderFunc(callId));
+    // Skip getProps on mount by returning false the first time
+    MockComponent.shouldGetProps = falseOnceThenTrue();
+    MockComponent.getProps = jest.fn().mockImplementationOnce(() => Promise.resolve({
+      callId: 1
+    })).mockImplementationOnce(() => Promise.resolve({
+      callId: 2
+    }));
+    const Component = (0, _index.routeComponent)(MockComponent, {}, true);
+    let resolver = [];
+    let wrapper;
+    const onUpdateComplete = () => {
+      const r = resolver.pop();
+      if (r) {
+        r(wrapper);
+      }
+    };
+    yield new Promise(resolve => {
+      resolver.push(resolve);
+      wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Component, {
+        onUpdateComplete: onUpdateComplete
+      }));
+    });
+
+    // Update the wrappers props 2 times in succession, this will cause `getProps` to be called
+    // twice, but only the later should call `setStateAsync` causing a re-render.
+    const p1 = new Promise(resolve => {
+      resolver.push(resolve);
+      wrapper.rerender( /*#__PURE__*/_react.default.createElement(Component, {
+        onUpdateComplete: onUpdateComplete
+      }));
+    });
+    const p2 = new Promise(resolve => {
+      resolver.push(resolve);
+      wrapper.rerender( /*#__PURE__*/_react.default.createElement(Component, {
+        onUpdateComplete: onUpdateComplete
+      }));
+    });
+    yield Promise.all([p1, p2]);
+    expect(MockComponent.getProps.mock.calls).toHaveLength(2);
+    expect(renderFunc).not.toHaveBeenCalledWith(1);
+    expect(renderFunc).toHaveBeenCalledWith(2);
+  }));
+});
+describe('Uses preloaded props on initial clientside page load', () => {
+  test('Uses preloadedProps when hydrating', /*#__PURE__*/_asyncToGenerator(function* () {
+    global.__HYDRATING__ = true;
+    const preloadedProps = {
+      foo: 'bar'
+    };
+    const expectedPreloadedChildProps = {
+      foo: 'bar',
+      isLoading: false
+    };
+    const Mock = props => /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "props"
+    }, JSON.stringify(props));
+    Mock.displayName = 'MockComponent';
+    const Component = (0, _index.routeComponent)(Mock, true, {});
+    yield new Promise(resolve => {
+      const wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Component, {
+        preloadedProps: preloadedProps,
+        onUpdateComplete: () => resolve(wrapper)
+      }));
+    });
+    yield (0, _react2.waitFor)(() => {
+      expect(_react2.screen.getByTestId('props').innerHTML).toEqual(JSON.stringify(expectedPreloadedChildProps));
+    });
+  }));
+  test('Does not use preloadedProps when not hydrating', /*#__PURE__*/_asyncToGenerator(function* () {
+    global.__HYDRATING__ = false;
+    const preloadedProps = {
+      foo: 'bar'
+    };
+    const expectedNotPreloadedChildProps = {
+      isLoading: false
+    };
+    const Mock = props => /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "props"
+    }, JSON.stringify(props));
+    Mock.displayName = 'MockComponent';
+    const Component = (0, _index.routeComponent)(Mock, true, {});
+    yield new Promise(resolve => {
+      const wrapper = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(Component, {
+        preloadedProps: preloadedProps,
+        onUpdateComplete: () => resolve(wrapper)
+      }));
+    });
+    yield (0, _react2.waitFor)(() => {
+      expect(_react2.screen.getByTestId('props').innerHTML).toEqual(JSON.stringify(expectedNotPreloadedChildProps));
+    });
+  }));
+});

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

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactRouterDom = require("react-router-dom");
+var _appErrorBoundary = _interopRequireDefault(require("../app-error-boundary"));
+var _reactUid = require("react-uid");
+const _excluded = ["component"];
+/*
+ * 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
+ */
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * 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
+ * name.
+ *
+ * This is for internal use only.
+ *
+ * @private
+ */
+const Switch = props => {
+  const {
+    error,
+    appState,
+    routes,
+    App
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_reactUid.UIDReset, null, /*#__PURE__*/_react.default.createElement(_appErrorBoundary.default, {
+    error: error
+  }, !error && /*#__PURE__*/_react.default.createElement(App, {
+    preloadedProps: appState.appProps
+  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Switch, null, routes.map((route, i) => {
+    const {
+        component: Component
+      } = route,
+      routeProps = _objectWithoutProperties(route, _excluded);
+    return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, _extends({
+      key: i
+    }, 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
+};
+var _default = Switch;
+exports.default = _default;

package/ssr/universal/components/throw-404/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var errors = _interopRequireWildcard(require("../../errors"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/*
+ * 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
+ */
+
+/**
+ * This is designed to be put into a react-router config as a fallback
+ * with path="*", simply to trigger the normal error handling code we have.
+ * As a result, this component should never be rendered – it should
+ * trigger the error page instead.
+ *
+ * @private
+ */
+class Throw404 extends _react.default.Component {
+  static getProps() {
+    throw new errors.HTTPNotFound('Not found');
+  }
+  render() {
+    // This should be unreachable
+    return /*#__PURE__*/_react.default.createElement("div", null);
+  }
+}
+var _default = Throw404;
+exports.default = _default;

package/ssr/universal/components/throw-404/index.test.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _index = _interopRequireDefault(require("./index"));
+var errors = _interopRequireWildcard(require("../../errors"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/*
+ * 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
+ */
+
+describe('Throw404', () => {
+  test('Renders correctly', () => {
+    (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_index.default, null));
+    const content = document.querySelector('body').firstElementChild.innerHTML;
+    expect(content).toBe('<div></div>');
+  });
+  test('Throws on getProps', () => {
+    expect(() => _index.default.getProps()).toThrow(errors.HTTPNotFound);
+  });
+});

package/ssr/universal/components/with-correlation-id/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withCorrelationId = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("../../hooks");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
+                                                                                                                                                                                                                                                                                                                                                     * 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
+                                                                                                                                                                                                                                                                                                                                                     */
+/**
+ * An HOC that injects the correlation id to a component
+ * @param Component
+ *
+ */
+const withCorrelationId = Component => {
+  const wrappedComponentName = Component.displayName || Component.name;
+  const WrappedComponent = _ref => {
+    let passThroughProps = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
+    const {
+      correlationId
+    } = (0, _hooks.useCorrelationId)();
+    return /*#__PURE__*/_react.default.createElement(Component, _extends({}, passThroughProps, {
+      correlationId: correlationId
+    }));
+  };
+  WrappedComponent.displayName = `withCorrelationId(${wrappedComponentName})`;
+  return WrappedComponent;
+};
+exports.withCorrelationId = withCorrelationId;

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

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withLegacyGetProps = void 0;
+var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
+var _fetchStrategy = require("../fetch-strategy");
+var _react = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; } /*
+                                                                                                                                                                                                                                                                                                                                                                                                       * 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
+                                                                                                                                                                                                                                                                                                                                                                                                       */
+const withLegacyGetProps = Wrapped => {
+  /* istanbul ignore next */
+  const wrappedComponentName = Wrapped.displayName || Wrapped.name;
+
+  /**
+   * @private
+   */
+  class WithLegacyGetProps extends _fetchStrategy.FetchStrategy {
+    render() {
+      return /*#__PURE__*/_react.default.createElement(Wrapped, this.props);
+    }
+
+    /**
+     * @private
+     */
+    static doInitAppState({
+      App,
+      match,
+      route,
+      req,
+      res,
+      location
+    }) {
+      return _asyncToGenerator(function* () {
+        const {
+          params
+        } = match;
+        const components = [App, route.component];
+        const promises = components.map(c => c.getProps ? c.getProps({
+          req,
+          res,
+          params,
+          location
+        }) : Promise.resolve({}));
+        const [appProps, pageProps] = yield Promise.all(promises);
+        return {
+          appProps,
+          pageProps
+        };
+      })();
+    }
+
+    /**
+     * @private
+     */
+    static getInitializers() {
+      var _Wrapped$getInitializ;
+      return [WithLegacyGetProps.doInitAppState, ...(((_Wrapped$getInitializ = Wrapped.getInitializers) === null || _Wrapped$getInitializ === void 0 ? void 0 : _Wrapped$getInitializ.call(Wrapped)) ?? [])];
+    }
+
+    /**
+     * @private
+     */
+    static getHOCsInUse() {
+      var _Wrapped$getHOCsInUse;
+      return [withLegacyGetProps, ...(((_Wrapped$getHOCsInUse = Wrapped.getHOCsInUse) === null || _Wrapped$getHOCsInUse === void 0 ? void 0 : _Wrapped$getHOCsInUse.call(Wrapped)) ?? [])];
+    }
+  }
+  WithLegacyGetProps.displayName = `withLegacyGetProps(${wrappedComponentName})`;
+  const exclude = {
+    doInitAppState: true,
+    getInitializers: true,
+    initAppState: true,
+    getHOCsInUse: true
+  };
+  (0, _hoistNonReactStatics.default)(WithLegacyGetProps, Wrapped, exclude);
+  return WithLegacyGetProps;
+};
+exports.withLegacyGetProps = withLegacyGetProps;

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

@@ -0,0 +1,35 @@
+"use strict";
+
+var _index = require("./index");
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/*
+ * 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
+ */
+
+describe('withLegacyGetProps', function () {
+  test('Renders correctly', () => {
+    const Wrapped = () => /*#__PURE__*/_react2.default.createElement("p", null, "Hello world");
+    const Component = (0, _index.withLegacyGetProps)(Wrapped);
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(Component, {
+      locals: {}
+    }));
+    expect(_react.screen.getByText(/Hello world/i)).toBeInTheDocument();
+  });
+  test(`Has working getInitializers method`, () => {
+    expect((0, _index.withLegacyGetProps)({}).getInitializers()).toHaveLength(1);
+    expect((0, _index.withLegacyGetProps)({
+      getInitializers: () => ['xyz']
+    }).getInitializers()).toHaveLength(2);
+  });
+  test(`Has working getHOCsInUse method`, () => {
+    expect((0, _index.withLegacyGetProps)({}).getHOCsInUse()).toHaveLength(1);
+    expect((0, _index.withLegacyGetProps)({
+      getHOCsInUse: () => ['xyz']
+    }).getHOCsInUse()).toHaveLength(2);
+  });
+});