@salesforce/pwa-kit-react-sdk 3.0.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(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 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
+                                                                                                                                                                                                                                                                                                                                                                                                       */
+/**
+ * @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/route-component/index.js

@@ -0,0 +1,409 @@
+"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");
+const _excluded = ["component"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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; }
+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); }); }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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) 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 = [..._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;