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

package/ssr/universal/components/fetch-strategy/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FetchStrategy = void 0;
+var _react = _interopRequireDefault(require("react"));
+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 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, 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
+ */
+/**
+ * @private
+ */
+class FetchStrategy extends _react.default.Component {
+  /**
+   * @private
+   */
+  static initAppState(args) {
+    var _this = this;
+    return _asyncToGenerator(function* () {
+      try {
+        const promises = _this.getInitializers().map(fn => fn(args));
+        return {
+          error: undefined,
+          appState: _extends({}, ...(yield Promise.all(promises)))
+        };
+      } catch (error) {
+        return {
+          error: error || new Error(),
+          appState: {}
+        };
+      }
+    })();
+  }
+}
+exports.FetchStrategy = FetchStrategy;

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

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _reactQuery = require("@tanstack/react-query");
+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 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) 2023, 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
+ */
+// For good UX, show loading spinner long enough for users to see
+const LOADING_SPINNER_MIN_DURATION = 500;
+
+/**
+ * A _private_ component to show loading spinner while refetching data on the client-side.
+ * To trigger this refetch, we do soft navigation back to the referrer.
+ * So this component is meant to be used as a route with `referrer` search param.
+ *
+ * @example
+ * const navigate = useNavigation()
+ * navigate(`/__refetch-data?referrer=${encodeURIComponent(urlOfCurrentPage)}`, 'replace')
+ *
+ * @private
+ */
+const Refresh = () => {
+  const history = (0, _reactRouterDom.useHistory)();
+  const location = (0, _reactRouterDom.useLocation)();
+  let queryClient;
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    queryClient = (0, _reactQuery.useQueryClient)();
+  } catch (err) {
+    // `useQueryClient` throws an error if the project does not use react-query.
+    // So in this case, leave `queryClient` as undefined. Continue to navigate to the referrer.
+  }
+  (0, _react.useEffect)(() => {
+    const refetchData = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(function* () {
+        var _queryClient;
+        const showLoadingSpinner = new Promise(resolve => setTimeout(resolve, LOADING_SPINNER_MIN_DURATION));
+        const invalidateQueries = (_queryClient = queryClient) === null || _queryClient === void 0 ? void 0 : _queryClient.invalidateQueries();
+        yield Promise.all([showLoadingSpinner, invalidateQueries]);
+
+        // Soft navigate to the referrer
+        let referrer = new URLSearchParams(location.search).get('referrer');
+        if (!referrer) {
+          _loggerInstance.default.warn('Could not find `referrer` search param - redirecting to home page.', {
+            namespace: 'Refresh.useEffect'
+          });
+          referrer = '/';
+        }
+        history.replace(referrer);
+      });
+      return function refetchData() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+    refetchData();
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(LoadingSpinner, null);
+};
+Refresh.displayName = 'Refresh';
+const LoadingSpinner = () => {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("style", null, `
+                .pwa-kit-loading-spinner-outer {
+                    z-index: 1300;
+                    position: absolute;
+                    top: 0px;
+                    left: 0px;
+                    right: 0px;
+                    bottom: 0px;
+                    background: rgba(255, 255, 255, 0.80);
+                }
+                .pwa-kit-loading-spinner-wrapper {
+                    display: inline-block;
+                    border-color: currentColor;
+                    border-style: solid;
+                    border-radius: 99999px;
+                    border-width: 4px;
+                    border-bottom-color: #C9C9C9;
+                    border-left-color: #C9C9C9;
+                    -webkit-animation: animation-b7n1on 0.65s linear infinite;
+                    animation: animation-b7n1on 0.65s linear infinite;
+                    width: 3rem;
+                    height: 3rem;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    margin-left: -1.5em;
+                    margin-top: -1.5em;
+                    color: #0176D3;
+                }
+                .pwa-kit-loading-spinner-inner {
+                    border: 0px;
+                    clip: rect(0, 0, 0, 0);
+                    width: 1px;
+                    height: 1px;
+                    margin: -1px;
+                    padding: 0px;
+                    overflow: hidden;
+                    white-space: nowrap;
+                    position: absolute;
+                }
+                `), /*#__PURE__*/_react.default.createElement("div", {
+    className: "pwa-kit-loading-spinner-outer",
+    "data-testid": "loading-spinner"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "pwa-kit-loading-spinner-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "pwa-kit-loading-spinner-inner"
+  }, "Loading..."))));
+};
+var _default = exports.default = Refresh;

package/ssr/universal/components/refresh/index.test.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _reactQuery = require("@tanstack/react-query");
+var _react = require("@testing-library/react");
+var _react2 = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _index = _interopRequireDefault(require("./index"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; } /*
+ * Copyright (c) 2023, 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.useFakeTimers();
+const referrerURL = 'some-url';
+jest.mock('react-router-dom', () => {
+  const replace = jest.fn();
+  return {
+    useHistory: jest.fn(() => ({
+      replace
+    })),
+    useLocation: jest.fn(() => ({
+      search: `?referrer=${referrerURL}`
+    }))
+  };
+});
+jest.mock('@tanstack/react-query', () => {
+  const invalidateQueries = jest.fn();
+  return {
+    useQueryClient: jest.fn(() => ({
+      invalidateQueries
+    }))
+  };
+});
+test('renders a loading spinner initially', () => {
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, null));
+  expect(_react.screen.getByTestId('loading-spinner')).toBeInTheDocument();
+});
+test('wait for react-query cache to be invalidated', /*#__PURE__*/_asyncToGenerator(function* () {
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, null));
+  yield (0, _react.waitFor)(() => {
+    expect((0, _reactQuery.useQueryClient)().invalidateQueries).toHaveBeenCalled();
+  });
+}));
+test('a project not using react-query', /*#__PURE__*/_asyncToGenerator(function* () {
+  // If customer project does not use react-query, calling useQueryClient would throw an error
+  _reactQuery.useQueryClient.mockImplementationOnce(() => {
+    throw new Error();
+  });
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, null));
+  jest.runAllTimers();
+  yield (0, _react.waitFor)(() => {
+    // Expect to still continue despite the project not using react-query,
+    // specifically continue to navigate back to the referrer.
+    expect((0, _reactRouterDom.useHistory)().replace).toHaveBeenCalledWith(referrerURL);
+  });
+}));
+test('wait for soft navigation to the referrer', /*#__PURE__*/_asyncToGenerator(function* () {
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, null));
+  jest.runAllTimers();
+  yield (0, _react.waitFor)(() => {
+    expect((0, _reactRouterDom.useHistory)().replace).toHaveBeenCalledWith(referrerURL);
+  });
+}));
+test('navigate to homepage if `referrer` search param cannot be found in the page url', /*#__PURE__*/_asyncToGenerator(function* () {
+  jest.spyOn(console, 'warn');
+  _reactRouterDom.useLocation.mockImplementationOnce(() => ({
+    search: ''
+  }));
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_index.default, null));
+  jest.runAllTimers();
+  yield (0, _react.waitFor)(() => {
+    expect(console.warn).toHaveBeenCalled();
+    expect((0, _reactRouterDom.useHistory)().replace).toHaveBeenCalledWith('/');
+  });
+}));

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

@@ -0,0 +1,415 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.routeComponent = exports.getRoutes = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
+var _appErrorBoundary = require("../../components/app-error-boundary");
+var _throw2 = _interopRequireDefault(require("../../components/throw-404"));
+var _compatibility = require("../../compatibility");
+var _routes2 = _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 n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.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.indexOf(n) >= 0) 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; }
+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 _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
+ */
+const noop = () => undefined;
+const isServerSide = typeof window === 'undefined';
+const isHydrating = () => !isServerSide && window.__HYDRATING__;
+const hasPerformanceAPI = !isServerSide && window.performance && window.performance.timing;
+
+/* istanbul ignore next */
+const now = () => {
+  return hasPerformanceAPI ? window.performance.timing.navigationStart + window.performance.now() : Date.now();
+};
+
+/**
+ * @private
+ */
+const withErrorHandling = Wrapped => {
+  /* istanbul ignore next */
+  const wrappedComponentName = Wrapped.displayName || Wrapped.name;
+  const WithErrorHandling = props => /*#__PURE__*/_react.default.createElement(_appErrorBoundary.AppErrorContext.Consumer, null, ctx => /*#__PURE__*/_react.default.createElement(Wrapped, _extends({}, props, ctx)));
+
+  // Expose statics from the wrapped component on the HOC
+  (0, _hoistNonReactStatics.default)(WithErrorHandling, Wrapped);
+  WithErrorHandling.displayName = `WithErrorHandling(${wrappedComponentName})`;
+  return WithErrorHandling;
+};
+
+/**
+ * The `routeComponent` HOC is automatically used on every component in a project's
+ * route-config. It provides an interface, via static methods on React components,
+ * that can be used to fetch data on the server and on the client, seamlessly.
+ */
+const routeComponent = (Wrapped, isPage, locals) => {
+  const AppConfig = (0, _compatibility.getAppConfig)();
+  const hocs = AppConfig.getHOCsInUse();
+  const getPropsEnabled = hocs.indexOf(_withLegacyGetProps.withLegacyGetProps) >= 0;
+  const extraArgs = getPropsEnabled ? AppConfig.extraGetPropsArgs(locals) : {};
+
+  /* istanbul ignore next */
+  const wrappedComponentName = Wrapped.displayName || Wrapped.name;
+  class RouteComponent extends _react.default.Component {
+    constructor(props, context) {
+      super(props, context);
+      this.state = {
+        childProps: _objectSpread(_objectSpread({}, isServerSide || isHydrating() ? this.props.preloadedProps : undefined), {}, {
+          isLoading: false
+        })
+      };
+      this._suppressUpdate = false;
+    }
+
+    /**
+     * Route-components implement `shouldGetProps()` to control when the
+     * component should fetch data from the server by calling `getProps()`.
+     * Typically, this is done by looking at the request URL.
+     *
+     * If not implemented, route-components will call `getProps()` again whenever
+     * `location.pathname` changes.
+     *
+     * The `shouldGetProps` function is called once on the server and every time
+     * a component updates on the client.
+     *
+     * @param {Object} args
+     *
+     * @param {Location} args.previousLocation - the previous value of
+     *   window.location, or a server-side equivalent.
+     *
+     * @param {Location} args.location - the current value of window.location,
+     *   or a server-side equivalent.
+     *
+     * @param {Object} args.previousParams - the previous parameters that were
+     *   parsed from the URL by react-router.
+     *
+     * @param {Object} args.params - the current parameters that were parsed
+     *   from the URL by react-router.
+     *
+     * @return {Promise<Boolean>}
+     */
+    static shouldGetProps(args) {
+      return _asyncToGenerator(function* () {
+        if (!getPropsEnabled) {
+          return false;
+        }
+        const defaultImpl = () => {
+          const {
+            previousLocation,
+            location
+          } = args;
+          return !previousLocation || previousLocation.pathname !== location.pathname;
+        };
+        const component = yield RouteComponent.getComponent();
+        return component.shouldGetProps ? component.shouldGetProps(args) : defaultImpl();
+      })();
+    }
+
+    /**
+     * Route-components implement `getProps()` to fetch the data they need to
+     * display. The `getProps` function must return an Object which is later
+     * passed to the component as props for rendering. The returned Object is
+     * serialzied and embedded into the rendered HTML as the initial app
+     * state when running server-side.
+     *
+     * Throwing or rejecting inside `getProps` will cause the server to return
+     * an Error, with an appropriate status code.
+     *
+     * Note that `req` and `res` are only defined on the server – the only place
+     * the code actually has access to Express requests or responses.
+     *
+     * If not implemented `getProps()` does nothing and the component will not
+     * fetch any data.
+     *
+     * Before the promise is returned, a reference is stored for later
+     * comparision with a call to isLatestPropsPromise. This is used to
+     * resolve race conditions when there are multiple getProps calls
+     * active.
+     *
+     * @param {Object} args
+     *
+     * @param {Request} args.req - an Express HTTP Request object on the server,
+     *   undefined on the client.
+     *
+     * @param {Response} args.res - an Express HTTP Response object on the server,
+     *   undefined on the client.
+     *
+     * @param {Object} args.params - the parameters that were parsed from the URL
+     *   by react-router.
+     *
+     * @param {Location} args.location - the current value of window.location,
+     *   or a server-side equivalent.
+     *
+     * @param {Boolean} args.isLoading - the current execution state of `getProps`,
+     *    `true` while `getProp` is executing, and `false` when it's not.
+     *
+     * @return {Promise<Object>}
+     */
+    static getProps(args) {
+      if (!getPropsEnabled) {
+        return Promise.resolve({});
+      }
+      RouteComponent._latestPropsPromise = RouteComponent.getComponent().then(component => component.getProps ? component.getProps(_objectSpread(_objectSpread({}, args), extraArgs)) : Promise.resolve());
+      return RouteComponent._latestPropsPromise;
+    }
+
+    /**
+     * Get the underlying component this HoC wraps. This handles loading of
+     * `@loadable/component` components.
+     *
+     * @return {Promise<React.Component>}
+     */
+    static getComponent() {
+      return _asyncToGenerator(function* () {
+        return Wrapped.load ? Wrapped.load().then(module => module.default) : Promise.resolve(Wrapped);
+      })();
+    }
+
+    /**
+     * Route-components implement `getTemplateName()` to return a readable
+     * name for the component that is used internally for analytics-tracking –
+     * eg. performance/page-view events.
+     *
+     * If not implemented defaults to the `displayName` of the React component.
+     *
+     * @return {Promise<String>}
+     */
+    static getTemplateName() {
+      return _asyncToGenerator(function* () {
+        return RouteComponent.getComponent().then(c => c.getTemplateName ? c.getTemplateName() : Promise.resolve(wrappedComponentName));
+      })();
+    }
+
+    /**
+     * Check if a promise is still the latest call to getProps. This is used
+     * to check if the results are outdated before using them.
+     *
+     * @param {Promise} propsPromise - The promise from the call to getProps to check
+     * @returns true or false
+     */
+    static isLatestPropsPromise(propsPromise) {
+      return propsPromise === RouteComponent._latestPropsPromise;
+    }
+    componentDidMount() {
+      this.componentDidUpdate({});
+    }
+    componentDidUpdate(previousProps) {
+      var _this = this;
+      return _asyncToGenerator(function* () {
+        // Because we are setting the component state from within this function we need a
+        // guard prevent various events (update, error, complete, and load) from being
+        // called multiple times.
+        if (_this._suppressUpdate) {
+          _this._suppressUpdate = false;
+          return;
+        }
+        const {
+          location: previousLocation,
+          match: previousMatch
+        } = previousProps;
+        const {
+          location,
+          match,
+          onGetPropsComplete,
+          onGetPropsError,
+          onUpdateComplete
+        } = _this.props;
+        const {
+          params
+        } = match || {};
+        const {
+          params: previousParams
+        } = previousMatch || {};
+
+        // The wasHydratingOnUpdate flag MUST only be used to decide whether
+        // or not to call static lifecycle methods.  Do not use it in
+        // component rendering - you will not be able to trigger updates,
+        // because this is intentionally outside of a component's
+        // state/props.
+        const wasHydratingOnUpdate = isHydrating();
+
+        /* istanbul ignore next */
+        // Don't getProps() when hydrating - the server has already done
+        // getProps() frozen the state in the page.
+        const shouldGetPropsNow = /*#__PURE__*/function () {
+          var _ref = _asyncToGenerator(function* () {
+            return !wasHydratingOnUpdate && (yield RouteComponent.shouldGetProps({
+              previousLocation,
+              location,
+              previousParams,
+              params
+            }));
+          });
+          return function shouldGetPropsNow() {
+            return _ref.apply(this, arguments);
+          };
+        }();
+        const setStateAsync = newState => {
+          return new Promise(resolve => {
+            _this.setState(newState, resolve);
+          });
+        };
+
+        // Note: We've built a reasonable notion of a "page load time" here:
+        //
+        // 1. For first loads the load time is the time elapsed between the
+        //    user pressing enter in the URL bar and the first pageLoad event
+        //    fired by this component.
+        //
+        // 2. For subsequent loads the load time is the time elapsed while
+        //    running the getProps() function.
+        //
+        // Since the time is overwhelmingly spent fetching data on soft-navs,
+        // we think this is a good approximation in both cases.
+
+        const templateName = yield RouteComponent.getTemplateName();
+        const start = now();
+        const emitPageLoadEvent = (templateName, end) => isPage && _events.pages.pageLoad(templateName, start, end);
+        const emitPageErrorEvent = (name, content) => isPage && _events.pages.error(name, content);
+
+        // If hydrating, we know that the server just fetched and
+        // rendered for us, embedding the app-state in the page HTML.
+        // For that reason, we don't ever do getProps while Hydrating.
+        // However, we still want to report a page load time for this
+        // initial render. Rather than fetching again, trigger the event
+        // right away and do nothing.
+
+        if (wasHydratingOnUpdate) {
+          emitPageLoadEvent(templateName, now());
+        }
+        const willGetProps = yield shouldGetPropsNow();
+        if (!willGetProps) {
+          onUpdateComplete();
+          return;
+        }
+        try {
+          _this._suppressUpdate = true;
+          yield setStateAsync({
+            childProps: _objectSpread(_objectSpread({}, _this.state.childProps), {}, {
+              isLoading: true
+            })
+          });
+
+          /**
+           * When a user triggers two getProps for the same component,
+           * we'd like to always use the one for the later user action
+           * instead of the one that resolves last. getProps
+           * stores a reference to the promise that we check before we use
+           * the results from it.
+           */
+          const req = undefined;
+          const res = undefined;
+          const propsPromise = RouteComponent.getProps({
+            req,
+            res,
+            params,
+            location
+          });
+          const childProps = yield propsPromise;
+          _this._suppressUpdate = false;
+          if (RouteComponent.isLatestPropsPromise(propsPromise)) {
+            yield setStateAsync({
+              childProps: _objectSpread(_objectSpread({}, childProps), {}, {
+                isLoading: false
+              })
+            });
+          }
+          onGetPropsComplete();
+          emitPageLoadEvent(templateName, now());
+        } catch (err) {
+          onGetPropsError(err);
+          emitPageErrorEvent(templateName, err);
+        }
+        onUpdateComplete();
+      })();
+    }
+
+    /**
+     * Return the props that are intended for the wrapped component, excluding
+     * private or test-only props for this HOC.
+     */
+    getChildProps() {
+      const excludes = ['onGetPropsComplete', 'onGetPropsError', 'onUpdateComplete', 'preloadedProps'];
+      return _extends({}, ...Object.entries(this.props).filter(entry => excludes.indexOf(entry[0]) < 0).map(([k, v]) => ({
+        [k]: v
+      })));
+    }
+    render() {
+      return /*#__PURE__*/_react.default.createElement(Wrapped, _extends({}, this.getChildProps(), this.state.childProps));
+    }
+  }
+  RouteComponent.displayName = `routeComponent(${wrappedComponentName})`;
+  RouteComponent.defaultProps = {
+    onGetPropsComplete: noop,
+    onGetPropsError: noop,
+    onUpdateComplete: noop
+  };
+  RouteComponent.propTypes = {
+    location: _propTypes.default.object,
+    match: _propTypes.default.object,
+    onGetPropsComplete: _propTypes.default.func,
+    onGetPropsError: _propTypes.default.func,
+    onUpdateComplete: _propTypes.default.func,
+    preloadedProps: _propTypes.default.object
+  };
+  const excludes = {
+    shouldGetProps: true,
+    getProps: true,
+    getTemplateName: true
+  };
+  (0, _hoistNonReactStatics.default)(RouteComponent, Wrapped, excludes);
+  return withErrorHandling((0, _reactRouterDom.withRouter)(RouteComponent));
+};
+
+/**
+ * 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.
+ *
+ * @private
+ */
+exports.routeComponent = routeComponent;
+const getRoutes = locals => {
+  let _routes = _routes2.default;
+  if (typeof _routes2.default === 'function') {
+    _routes = (0, _routes2.default)();
+  }
+  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;