Fix Annoying things with this Package.

package.json

@@ -11,8 +11,14 @@
     "url": "git+https://github.com/SalesforceCommerceCloud/commerce-sdk-isomorphic.git"
   },
   "license": "BSD-3-Clause",
-  "main": "lib/index.cjs.js",
-  "module": "lib/index.esm.js",
+  "exports": {
+    ".": {
+      "require": "./lib/index.cjs",
+      "import": "./lib/index.mjs",
+      "types": "./lib/index.d.ts"
+    }
+  },
+  "main": "./lib/index.cjs",
   "style": "lib/default.css",
   "files": [
     "lib",
@@ -97,7 +103,7 @@
   },
   "dependencies": {
     "nanoid": "^3.3.4",
-    "node-fetch": "2.6.12"
+    "node-fetch": "3.3.2"
   },
   "devDependencies": {
     "@babel/cli": "7.18.6",
@@ -115,7 +121,6 @@
     "@testing-library/react": "10.4.9",
     "@types/fs-extra": "^9.0.13",
     "@types/handlebars-helpers": "^0.5.3",
-    "@types/node-fetch": "^2.6.2",
     "@types/react-dom": "^16.9.16",
     "@typescript-eslint/eslint-plugin": "^4.33.0",
     "@typescript-eslint/parser": "^4.33.0",
@@ -147,7 +152,7 @@
     "react-dom": "^16.14.0",
     "react-scripts": "4.0.3",
     "rollup": "2.77.0",
-    "rollup-plugin-filesize": "9.1.2",
+    "rollup-plugin-filesize": "10.0.0",
     "rollup-plugin-includepaths": "0.2.4",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "3.1.8",
@@ -165,12 +170,9 @@
     "typedoc-plugin-nojekyll": "^1.0.1",
     "typescript": "^4.4.4"
   },
-  "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
-  },
+  "packageManager": "[email protected]",
   "engines": {
-    "node": ">=10"
+    "node": ">=12"
   },
   "bundlesize": [
     {

rollup.config.js

@@ -26,7 +26,7 @@ const outputs = [
     format: 'umd',
   },
   {
-    file: process.env.REACT_APP_PKG_MODULE || pkg.module,
+    file: process.env.REACT_APP_PKG_MODULE || pkg.exports['.'].import,
     format: 'es',
   },
 ];

src/static/clientConfig.ts

@@ -18,6 +18,12 @@ type BrowserRequestInit = RequestInit;
  */
 export type FetchOptions = NodeRequestInit & BrowserRequestInit;
 
+export type FetchFunction = (
+  input: RequestInfo,
+  init?: FetchOptions | undefined
+) => Promise<Response>;
+
+export type FetchArgs = [input: RequestInfo, init?: FetchOptions | undefined];
 /**
  * Base options that can be passed to the `ClientConfig` class.
  */
@@ -27,18 +33,14 @@ export interface ClientConfigInit<Params extends BaseUriParameters> {
   headers?: {[key: string]: string};
   parameters: Params;
   fetchOptions?: FetchOptions;
+  fetchFunction?: FetchFunction;
   transformRequest?: (
     data: unknown,
     headers: {[key: string]: string}
   ) => Required<FetchOptions>['body'];
   throwOnBadResponse?: boolean;
 }
 
-export type FetchFunction = (
-  input: RequestInfo,
-  init?: FetchOptions | undefined
-) => Promise<Response>;
-
 /**
  * Configuration parameters common to Commerce SDK clients
  */
@@ -55,6 +57,8 @@ export default class ClientConfig<Params extends BaseUriParameters>
 
   public fetchOptions: FetchOptions;
 
+  public fetchFunction?: FetchFunction;
+
   public transformRequest: NonNullable<
     ClientConfigInit<Params>['transformRequest']
   >;
@@ -82,6 +86,9 @@ export default class ClientConfig<Params extends BaseUriParameters>
     if (config.proxy) {
       this.proxy = config.proxy;
     }
+    if (config.fetchFunction) {
+      this.fetchFunction = config.fetchFunction;
+    }
     this.throwOnBadResponse = !!config.throwOnBadResponse;
   }
 

src/static/helpers/environment.ts

@@ -4,8 +4,8 @@
  * 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
  */
-import type {FetchFunction} from '../clientConfig';
-
+import {RequestInfo} from 'node-fetch';
+import type {FetchArgs, FetchFunction, FetchOptions} from '../clientConfig';
 /*
  * Copyright (c) 2022, Salesforce, Inc.
  * All rights reserved.
@@ -27,15 +27,18 @@ export const hasFetchAvailable = typeof globalObject.fetch === 'function';
 // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
 export const fetch: FetchFunction = (() => {
   if (isNode) {
-    // .default is added because the newer versions of babel doesn't get the default export automatically for require().
-    // eslint-disable-next-line global-require, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-var-requires, @typescript-eslint/no-unsafe-member-access
-    return require('node-fetch').default;
+    return (...args: FetchArgs) =>
+      import('node-fetch').then(({default: nodeFetch}) =>
+        nodeFetch(
+          ...(args as [input: RequestInfo, init?: FetchOptions | undefined])
+        )
+      ) as Promise<Response>;
   }
 
   if (!hasFetchAvailable)
     throw new Error(
       'Bad environment: it is not a node environment but fetch is not defined'
     );
 
-  return globalObject.fetch;
+  return globalObject.fetch as FetchFunction;
 })();

templates/operations.ts.hbs

@@ -186,7 +186,8 @@
         method: "{{loud method}}"
       };
 
-      const response = await fetch(url.toString(), requestOptions);
+      const fetchFunction = this.clientConfig?.fetchFunction ?? fetch;
+      const response = await fetchFunction(url.toString(), requestOptions);
       if (rawResponse) {
         return response;
       } else if (this.clientConfig.throwOnBadResponse && !response.ok && response.status !== 304) {