@salesforce/pwa-kit-react-sdk 4.0.0-extensibility-preview.1 → 4.0.0-extensibility-preview.3

package/CHANGELOG.md

@@ -1,9 +1,17 @@
+## v4.0.0-extensibility-preview.3 (Dec 13, 2024)
+## v4.0.0-extensibility-preview.2 (Dec 09, 2024)
 ## v4.0.0-extensibility-preview.1 (Dec 09, 2024)
 ## v4.0.0-extensibility-preview.0 (Nov 28, 2024)
 - Integrate Application Extensions Project. (#2099)[https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2099]
 - Add new `getStaticAssetUrl` utility to access assets specifically in the `/static` folder. (#2040)[https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2040]
 - Update Application Extensions import in `react-rendering.js` and `main.js` (#2004)[https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2004]
 - Define interface of the app extension's config [#2010](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2010)
+## v3.9.0-dev (Oct 29, 2024)
+- Add RedirectWithStatus component, allowing finer grained control of rediriects and their status code [#2173](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2173)
+
+## v3.8.0 (Oct 28, 2024)
+- [Server Affinity] - Attach dwsid to SCAPI request headers [#2090](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2090)
+- Create useOrigin hook to return an app origin that takes x-forwarded-host header into consideration. [#2050](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/2050)
 
 ## v3.7.0 (Aug 07, 2024)
 - Add `beforeHydrate` option to withReactQuery component [#1912](https://github.com/SalesforceCommerceCloud/pwa-kit/pull/1912)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/pwa-kit-react-sdk",
-  "version": "4.0.0-extensibility-preview.1",
+  "version": "4.0.0-extensibility-preview.3",
   "description": "A library that supports the isomorphic React rendering pipeline for Commerce Cloud Managed Runtime apps",
   "types": "dist/index.d.ts",
   "homepage": "https://github.com/SalesforceCommerceCloud/pwa-kit/tree/develop/packages/pwa-kit-react-sdk#readme",
@@ -38,8 +38,8 @@
     "@loadable/babel-plugin": "^5.15.3",
     "@loadable/server": "^5.15.3",
     "@loadable/webpack-plugin": "^5.15.2",
-    "@salesforce/pwa-kit-extension-sdk": "4.0.0-extensibility-preview.1",
-    "@salesforce/pwa-kit-runtime": "4.0.0-extensibility-preview.1",
+    "@salesforce/pwa-kit-extension-sdk": "4.0.0-extensibility-preview.3",
+    "@salesforce/pwa-kit-runtime": "4.0.0-extensibility-preview.3",
     "@tanstack/react-query": "^4.28.0",
     "cross-env": "^5.2.1",
     "event-emitter": "^0.3.5",
@@ -52,14 +52,14 @@
   },
   "devDependencies": {
     "@loadable/component": "^5.15.3",
-    "@salesforce/pwa-kit-dev": "4.0.0-extensibility-preview.1",
+    "@salesforce/pwa-kit-dev": "4.0.0-extensibility-preview.3",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/hoist-non-react-statics": "~3.3.5",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.1",
-    "internal-lib-build": "4.0.0-extensibility-preview.1",
+    "internal-lib-build": "4.0.0-extensibility-preview.3",
     "node-html-parser": "^3.3.6",
     "nodemon": "^2.0.22",
     "react": "^18.2.0",
@@ -84,5 +84,5 @@
   "publishConfig": {
     "directory": "dist"
   },
-  "gitHead": "5728f89cb53ab1b0c89418578f3e90c755efb0f8"
+  "gitHead": "904de01e826117febeea952e034478349e16ea4d"
 }

package/ssr/server/react-rendering.js

@@ -252,7 +252,7 @@ const render = exports.render = /*#__PURE__*/function () {
       res.setHeader('Server-Timing', res.__performanceTimer.buildServerTimingHeader());
     }
     if (redirectUrl) {
-      res.redirect(302, redirectUrl);
+      res.redirect(routerContext.status || 302, redirectUrl);
     } else {
       res.status(status).send(html);
     }

package/ssr/server/react-rendering.test.js

@@ -58,6 +58,7 @@ jest.mock('../universal/routes', () => {
   const React = require('react');
   const PropTypes = require('prop-types');
   const errors = require('../universal/errors');
+  const RedirectWithStatus = require('../universal/components/redirect-with-status').default;
   const {
     Redirect
   } = require('react-router-dom');
@@ -175,6 +176,17 @@ jest.mock('../universal/routes', () => {
       });
     }
   }
+  class RedirectWithStatusPage extends React.Component {
+    static getProps() {
+      return Promise.resolve();
+    }
+    render() {
+      return /*#__PURE__*/React.createElement(RedirectWithStatus, {
+        to: "/elsewhere/",
+        status: 301
+      });
+    }
+  }
   class HelmetPage extends React.Component {
     static getProps() {
       return Promise.resolve();
@@ -289,6 +301,9 @@ jest.mock('../universal/routes', () => {
     }, {
       path: '/redirect/',
       component: RedirectPage
+    }, {
+      path: '/redirectWithStatus/',
+      component: RedirectWithStatusPage
     }, {
       path: '/init-sets-status/',
       component: InitSetsStatusPage
@@ -512,6 +527,14 @@ describe('The Node SSR Environment', () => {
     assertions: res => {
       expect(res.statusCode).toBe(302);
     }
+  }, {
+    description: `can redirect with HTTP 301 status`,
+    req: {
+      url: '/redirectWithStatus/'
+    },
+    assertions: res => {
+      expect(res.statusCode).toBe(301);
+    }
   }, {
     description: `500 on unknown errors in getProps`,
     req: {

package/ssr/universal/components/redirect-with-status/index.d.ts

@@ -0,0 +1,3 @@
+declare const _default: any;
+export default _default;
+//# sourceMappingURL=index.d.ts.map

package/ssr/universal/components/redirect-with-status/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ssr/universal/components/redirect-with-status/index.jsx"],"names":[],"mappings":""}

package/ssr/universal/components/redirect-with-status/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _propTypes = _interopRequireDefault(require("prop-types"));
+const _excluded = ["status", "staticContext"];
+/*
+ * Copyright (c) 2024, 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
+ */
+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 s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.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.includes(n)) continue; t[n] = r[n]; } return t; }
+/**
+ * The `RedirectWithStatus` component is used to specify a different status code when redirecting via
+ * the Redirect component.
+ * The default redirect behavior when this component is not used is to set a 302 status.
+ *
+ * @param {number} status - The HTTP status code. Defaults to 302 if not specified
+ * @param {object} staticContext - The router context
+ * @param {string} to - The redirect's target path
+ */
+const RedirectWithStatus = _ref => {
+  let {
+      status = 302,
+      staticContext
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // Handle server-side rendering
+  if (staticContext) {
+    staticContext.status = status;
+  }
+  return /*#__PURE__*/_react.default.createElement(_reactRouterDom.Redirect, props);
+};
+RedirectWithStatus.propTypes = {
+  status: _propTypes.default.number,
+  staticContext: _propTypes.default.object,
+  to: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object])
+};
+var _default = exports.default = (0, _reactRouterDom.withRouter)(RedirectWithStatus);

package/ssr/universal/components/redirect-with-status/index.test.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@testing-library/react");
+var _reactRouterDom = require("react-router-dom");
+var _history = require("history");
+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) 2024, 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
+ */
+describe('RedirectWithStatus', () => {
+  test('Redirects if no status or context is provided', () => {
+    const targetUrl = '/target';
+    const history = (0, _history.createMemoryHistory)();
+    history.push('/redirect');
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_reactRouterDom.Router, {
+      history: history
+    }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
+      path: "/redirect"
+    }, /*#__PURE__*/_react.default.createElement(_index.default, {
+      to: targetUrl
+    }))));
+    expect(history.location.pathname).toBe(targetUrl);
+  });
+  test('Redirect renders with correct status', /*#__PURE__*/_asyncToGenerator(function* () {
+    const context = {};
+    const status = 303;
+    const targetUrl = '/target';
+    (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_reactRouterDom.StaticRouter, {
+      location: "/redirect",
+      context: context
+    }, /*#__PURE__*/_react.default.createElement(_reactRouterDom.Route, {
+      path: "/redirect"
+    }, /*#__PURE__*/_react.default.createElement(_index.default, {
+      status: status,
+      to: targetUrl
+    }))));
+    expect(context.status).toBe(status);
+    expect(context.url).toBe(targetUrl);
+  }));
+});

package/ssr/universal/hooks/index.d.ts

@@ -1,5 +1,8 @@
 export function useCorrelationId(): object;
 export function useServerContext(): ServerContext;
+export function useOrigin({ fromXForwardedHeader }: {
+    fromXForwardedHeader?: boolean | undefined;
+}): string;
 /**
  * Server context
  */

package/ssr/universal/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ssr/universal/hooks/index.js"],"names":[],"mappings":"AAgBO,oCAFM,MAAM,CAQlB;AAiBM,oCANM,aAAa,CAUzB;;;;;;;;SAhBa,MAAM;;;;SACN,MAAM"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ssr/universal/hooks/index.js"],"names":[],"mappings":"AAgBO,oCAFM,MAAM,CAQlB;AAiBM,oCANM,aAAa,CAUzB;AAcM;;IAHM,MAAM,CAiBlB;;;;;;;;SA5Ca,MAAM;;;;SACN,MAAM"}

package/ssr/universal/hooks/index.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useServerContext = exports.useCorrelationId = void 0;
+exports.useServerContext = exports.useOrigin = exports.useCorrelationId = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _contexts = require("../contexts");
 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; }
 /*
- * Copyright (c) 2022, salesforce.com, inc.
+ * Copyright (c) 2024, 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
@@ -49,4 +49,36 @@ const useServerContext = () => {
   const serverContext = (0, _react.useContext)(_contexts.ServerContext);
   return serverContext;
 };
-exports.useServerContext = useServerContext;
+
+/**
+ * Returns the application's origin.
+ *
+ * By default, it will return the ORIGIN under which we are serving the page.
+ *
+ * If `fromXForwardedHeader` is true, it will use the value of `x-forwarded-proto` and `x-forwarded-host` headers in req
+ * to build origin. (it is false by default)
+ *
+ * NOTE: this is a React hook, so it has to be used in a React rendering pipeline.
+ * @returns {string} origin string
+ *
+ */
+exports.useServerContext = useServerContext;
+const useOrigin = ({
+  fromXForwardedHeader = false
+}) => {
+  const {
+    res
+  } = useServerContext();
+  if (typeof window !== 'undefined') {
+    return window.location.origin;
+  }
+  const {
+    APP_ORIGIN
+  } = process.env;
+  const xForwardedOrigin = res.locals.xForwardedOrigin;
+  if (fromXForwardedHeader && xForwardedOrigin) {
+    return xForwardedOrigin;
+  }
+  return APP_ORIGIN;
+};
+exports.useOrigin = useOrigin;

package/utils/performance.js

@@ -73,7 +73,7 @@ class PerformanceTimer {
    */
   log() {
     this.metrics.forEach(metric => {
-      _loggerInstance.default.info(`${metric.name} - ${metric.duration}ms ${metric.detail || ''}`, {
+      _loggerInstance.default.info(`${metric.name} - ${metric.duration.toFixed(4)}ms ${metric.detail || ''}`, {
         namespace: 'performance'
       });
     });
@@ -115,7 +115,7 @@ class PerformanceTimer {
       if (startMark) {
         const measurement = {
           name,
-          duration: (timestamp - startMark.timestamp).toFixed(2),
+          duration: timestamp - startMark.timestamp,
           detail: options.detail
         };
         this.metrics.push(measurement);

package/utils/url.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"url.d.ts","sourceRoot":"","sources":["../../src/utils/url.js"],"names":[],"mappings":"AAoBO,gCANM,MAAM,CAoBlB"}
+{"version":3,"file":"url.d.ts","sourceRoot":"","sources":["../../src/utils/url.js"],"names":[],"mappings":"AAsBO,gCANM,MAAM,CAoBlB"}

package/utils/url.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getAppOrigin = void 0;
 /*
- * Copyright (c) 2021, salesforce.com, inc.
+ * Copyright (c) 2024, 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
@@ -18,6 +18,8 @@ exports.getAppOrigin = void 0;
  * initialized using the `_createApp` method (This happens in your /app/ssr.js file).
  *
  * @function
+ * @deprecated use `useOrigin()` instead.
+ * This function will be removed in version 4.0.0.
  * @returns {string} Returns the ORIGIN under which we are serving the page.
  * @example
  * import {getAppOrigin} from '@salesforce/pwa-kit-react-sdk/utils/url'