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

package/ssr/server/react-rendering.js

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