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

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(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) 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,405 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.render = 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 _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 _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 _sprite = _interopRequireDefault(require("svg-sprite-loader/runtime/sprite.build"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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 }; }
+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 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
+                                                                                                                                                                                                                                                                                                                                                                                                       */ /**
+                                                                                                                                                                                                                                                                                                                                                                                                           * @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 = [];
+
+/**
+ * Convert from thrown Error or String to {message, status} that we need for
+ * rendering.
+ * @private
+ * @param err - Error to be converted
+ * @function
+ * @return {Object}
+ */
+exports.ALLOWLISTED_INLINE_SCRIPTS = ALLOWLISTED_INLINE_SCRIPTS;
+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();
+    console.error(cause);
+    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 => {
+  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 => {
+      newParams.append(key, 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}
+ */
+const render = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator(function* (req, res, next) {
+    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)
+    };
+
+    // Step 1 - Find the match.
+    let route;
+    let match;
+    routes.some(_route => {
+      const _match = (0, _reactRouterDom.matchPath)(req.path, _route);
+      if (_match) {
+        match = _match;
+        route = _route;
+      }
+      return !!match;
+    });
+
+    // Step 2 - Get the component
+    const component = yield route.component.getComponent();
+
+    // 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 {
+      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;
+    }
+    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;
+    if (redirectUrl) {
+      res.redirect(302, redirectUrl);
+    } else {
+      res.status(status).send(html);
+    }
+  });
+  return function render(_x, _x2, _x3) {
+    return _ref.apply(this, arguments);
+  };
+}();
+exports.render = render;
+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 = serverRenderer;
+exports.default = _default;