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

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## v3.8.0-preview.2-basepath (Sep 05, 2024)
+## v3.8.0-preview.1-basepath (Sep 05, 2024)
+## v3.8.0-preview.4-basepath (Sep 05, 2024)
+## v3.8.0-preview.4-basepath (Sep 05, 2024)
+## v3.8.0-preview.3-basepath (Sep 05, 2024)
+## v3.8.0-preview.3-basepath (Sep 05, 2024)
+## v3.8.0-preview.1-basepath (Sep 05, 2024)
+## v3.8.0-preview.2-basepath (Sep 05, 2024)
+## v3.8.0-preview.1-basepath (Sep 05, 2024)
+## v3.8.0-preview.1-basepath (Sep 05, 2024)
 ## v3.8.0-preview.0-basepath (Sep 05, 2024)
 ## v3.8.0-preview.0 (Sep 05, 2024)
 ## v3.8.0-preview.basepath (Sep 05, 2024)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/pwa-kit-react-sdk",
-  "version": "3.8.0-preview.0-basepath",
+  "version": "3.8.0-preview.2-basepath",
   "description": "A library that supports the isomorphic React rendering pipeline for Commerce Cloud Managed Runtime apps",
   "homepage": "https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/pwa-kit-react-sdk#readme",
   "bugs": {
@@ -37,7 +37,7 @@
     "@loadable/babel-plugin": "^5.15.3",
     "@loadable/server": "^5.15.3",
     "@loadable/webpack-plugin": "^5.15.2",
-    "@salesforce/pwa-kit-runtime": "3.8.0-preview.0-basepath",
+    "@salesforce/pwa-kit-runtime": "3.8.0-preview.2-basepath",
     "@tanstack/react-query": "^4.28.0",
     "cross-env": "^5.2.1",
     "event-emitter": "^0.3.5",
@@ -50,11 +50,11 @@
   },
   "devDependencies": {
     "@loadable/component": "^5.15.3",
-    "@salesforce/pwa-kit-dev": "3.8.0-preview.0-basepath",
+    "@salesforce/pwa-kit-dev": "3.8.0-preview.2-basepath",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
-    "internal-lib-build": "3.8.0-preview.0-basepath",
+    "internal-lib-build": "3.8.0-preview.2-basepath",
     "node-html-parser": "^3.3.6",
     "nodemon": "^2.0.22",
     "react": "^18.2.0",
@@ -78,5 +78,6 @@
   },
   "publishConfig": {
     "directory": "dist"
-  }
+  },
+  "gitHead": "bdcffbe26f2d9188069914e1e7485e54291c8217"
 }

package/ssr/browser/main.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.start = exports.registerServiceWorker = exports.OuterApp = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _client = require("react-dom/client");
+var _reactRouterDom = require("react-router-dom");
+var _contexts = require("../universal/contexts");
+var _app = _interopRequireDefault(require("../universal/components/_app"));
+var _compatibility = require("../universal/compatibility");
+var _switch = _interopRequireDefault(require("../universal/components/switch"));
+var _routeComponent = require("../universal/components/route-component");
+var _component = require("@loadable/component");
+var _uuidv = require("../../utils/uuidv4.client");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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 _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
+ */ /* global __webpack_require__ */
+/* istanbul ignore next */
+const registerServiceWorker = url => {
+  return Promise.resolve().then(() => {
+    if ('serviceWorker' in navigator) {
+      return Promise.resolve().then(() => new Promise(resolve => window.addEventListener('load', resolve))).then(() => navigator.serviceWorker.register(url)).then(registration => _loggerInstance.default.info(`ServiceWorker registration successful with scope: ${registration.scope}`, {
+        namespace: 'registerServiceWorker'
+      })).catch(err => _loggerInstance.default.error('ServiceWorker registration failed', {
+        namespace: 'registerServiceWorker',
+        additionalProperties: {
+          error: err
+        }
+      }));
+    }
+  });
+};
+exports.registerServiceWorker = registerServiceWorker;
+const OuterApp = ({
+  routes,
+  error,
+  WrappedApp,
+  locals,
+  onHydrate
+}) => {
+  var _AppConfig$getBasePat, _AppConfig$getBasePat2;
+  const AppConfig = (0, _compatibility.getAppConfig)();
+  const isInitialPageRef = (0, _react.useRef)(true);
+  const basepath = ((_AppConfig$getBasePat = AppConfig.getBasePath) === null || _AppConfig$getBasePat === void 0 ? void 0 : (_AppConfig$getBasePat2 = _AppConfig$getBasePat.call(AppConfig, {
+    req: undefined,
+    res: undefined
+  })) === null || _AppConfig$getBasePat2 === void 0 ? void 0 : _AppConfig$getBasePat2.replace(/\/$/, '')) || '';
+  return /*#__PURE__*/_react.default.createElement(_contexts.ServerContext.Provider, {
+    value: {}
+  }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.BrowserRouter, {
+    ref: onHydrate,
+    basename: basepath
+  }, /*#__PURE__*/_react.default.createElement(_contexts.CorrelationIdProvider, {
+    correlationId: () => {
+      // If we are hydrating an error page use the server correlation id.
+      if (isInitialPageRef.current && window.__ERROR__) {
+        isInitialPageRef.current = false;
+        return window.__INITIAL_CORRELATION_ID__;
+      }
+      return (0, _uuidv.uuidv4)();
+    }
+  }, /*#__PURE__*/_react.default.createElement(AppConfig, {
+    locals: locals
+  }, /*#__PURE__*/_react.default.createElement(_switch.default, {
+    error: error,
+    appState: window.__PRELOADED_STATE__,
+    routes: routes,
+    App: WrappedApp
+  })))));
+};
+exports.OuterApp = OuterApp;
+OuterApp.propTypes = {
+  routes: _propTypes.default.array.isRequired,
+  error: _propTypes.default.object,
+  WrappedApp: _propTypes.default.func.isRequired,
+  locals: _propTypes.default.object,
+  onHydrate: _propTypes.default.func
+};
+/* istanbul ignore next */
+const start = () => {
+  const AppConfig = (0, _compatibility.getAppConfig)();
+  const rootEl = document.getElementsByClassName('react-target')[0];
+  const data = JSON.parse(document.getElementById('mobify-data').innerHTML);
+
+  // Set all globals sent from the server on the window object.
+  Object.entries(data).forEach(([key, value]) => {
+    window[key] = value;
+  });
+
+  // Tell webpack how to find javascript files
+  Object.defineProperty(__webpack_require__, 'p', {
+    get: () => window.Progressive.buildOrigin
+  });
+
+  // On the browser we don't have request.locals, so we just provide an empty
+  // object that exists for the lifetime of the app. AppConfig components can use
+  // this to set up, eg. Redux stores.
+  const locals = {};
+
+  // AppConfig.restore *must* come before getRoutes()
+  AppConfig.restore(locals, window.__PRELOADED_STATE__.__STATE_MANAGEMENT_LIBRARY);
+
+  // We need to tell the routeComponent HOC when the app is hydrating in order to
+  // prevent pages from re-fetching data on the first client-side render. The
+  // reason we do this is that we expect a render to have taken place
+  // on the server already. That server-side render already called getProps()
+  // and froze the application state as a JSON blob on the page.
+  //
+  // This is VERY fiddly – don't go crazy with window.__HYDRATING__. You have
+  // been warned.
+  window.__HYDRATING__ = true;
+  const props = {
+    error: window.__ERROR__,
+    locals: locals,
+    routes: (0, _routeComponent.getRoutes)(locals),
+    WrappedApp: (0, _routeComponent.routeComponent)(_app.default, false, locals)
+  };
+  return Promise.resolve().then(() => new Promise(resolve => (0, _component.loadableReady)(resolve))).then(() => {
+    (0, _client.hydrateRoot)(rootEl, /*#__PURE__*/_react.default.createElement(OuterApp, _extends({}, props, {
+      onHydrate: () => {
+        window.__HYDRATING__ = false;
+      }
+    })));
+  });
+};
+exports.start = start;

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(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 }; }
+/*
+ * 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;
+  });
+});