CHECKOUT-9450: Export ESM modules and separate payment integration strategies from core bundle

.circleci/config.yml

@@ -66,7 +66,7 @@ jobs:
 
   build:
     <<: *node_executor
-    resource_class: large
+    resource_class: xlarge
     steps:
       - ci/pre-setup
       - node/npm-install
@@ -110,7 +110,7 @@ jobs:
 
   build_cdn:
     <<: *node_executor
-    resource_class: medium+
+    resource_class: xlarge
     steps:
       - ci/pre-setup
       - node/npm-install

.eslintignore

@@ -1,2 +1,2 @@
-/packages/core/src/generated/*.ts
+/packages/core/src/generated/**/*.ts
 /dist/*

package.json

@@ -3,8 +3,26 @@
   "version": "1.795.1",
   "description": "BigCommerce Checkout JavaScript SDK",
   "license": "MIT",
-  "main": "dist/checkout-sdk.js",
-  "typings": "dist/checkout-sdk.d.ts",
+  "main": "dist/cjs/checkout-sdk.js",
+  "module": "dist/esm/checkout-sdk.js",
+  "typings": "dist/types/checkout-sdk.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/checkout-sdk.d.ts",
+      "import": "./dist/esm/checkout-sdk.js",
+      "require": "./dist/cjs/checkout-sdk.js"
+    },
+    "./essential": {
+      "types": "./dist/types/checkout-sdk.d.ts",
+      "import": "./dist/esm/checkout-sdk-essential.js",
+      "require": "./dist/cjs/checkout-sdk-essential.js"
+    },
+    "./integrations/*": {
+      "types": "./dist/types/integrations/*.d.ts",
+      "import": "./dist/esm/integrations/*.js",
+      "require": "./dist/cjs/integrations/*.js"
+    }
+  },
   "files": [
     "dist/",
     "docs/"
@@ -32,7 +50,7 @@
     "build-cdn": "npx nx run core:build-cdn",
     "prebundle": "rm -rf dist",
     "bundle": "npx nx run core:build",
-    "bundle:analyze": "npm run --silent bundle -- --config-name umd --profile --json > webpack-stats.json && webpack-bundle-analyzer webpack-stats.json dist --default-sizes gzip",
+    "bundle:analyze": "npx nx run core:build-analyze",
     "bundle:watch": "export WATCH=true; npx nx run core:build-watch",
     "bundle-dts": "npx nx run core:build-dts",
     "docs": "npx nx run core:docs",

packages/adyen-utils/src/index.ts

@@ -1,8 +1,10 @@
+import * as adyenV2Mock from './adyenv2/adyenv2.mock';
+import * as adyenV3Mock from './adyenv3/adyenv3.mock';
+
 export { default as AdyenV2ScriptLoader } from './adyenv2/adyenv2-script-loader';
 export { default as AdyenV3ScriptLoader } from './adyenv3/adyenv3-script-loader';
 export * from './types';
-export * as adyenV2Mock from './adyenv2/adyenv2.mock';
-export * as adyenV3Mock from './adyenv3/adyenv3.mock';
+export { adyenV2Mock, adyenV3Mock };
 export { WithAdyenV3PaymentInitializeOptions } from './adyenv3/adyenv3-initialize-options';
 export { default as AdyenV3PaymentInitializeOptions } from './adyenv3/adyenv3-initialize-options';
 export { WithAdyenV2PaymentInitializeOptions } from './adyenv2/adyenv2-initialize-options';

packages/adyen-utils/src/types.ts

@@ -195,11 +195,7 @@ export interface AdyenAdditionalActionCallbacks {
 
 export interface AdyenAdditionalActionErrorResponse {
     provider_data: AdyenAdditionalAction;
-    errors: [
-        {
-            code: string;
-        },
-    ];
+    errors: [{ code: string }];
 }
 
 export interface AdyenAdditionalActionOptions extends AdyenAdditionalActionCallbacks {

packages/core/api-extractor/checkout-button.json

@@ -4,6 +4,6 @@
         "entryPointSourceFile": "../../temp/core/src/bundles/checkout-button.d.ts"
     },
     "dtsRollup": {
-        "mainDtsRollupPath": "checkout-button.d.ts"
+        "mainDtsRollupPath": "types/checkout-button.d.ts"
     }
 }

packages/core/api-extractor/checkout-sdk.json

@@ -17,6 +17,6 @@
     },
     "dtsRollup": {
         "enabled": true,
-        "mainDtsRollupPath": "checkout-sdk.d.ts"
+        "mainDtsRollupPath": "types/checkout-sdk.d.ts"
     }
 }

packages/core/api-extractor/embedded-checkout.json

@@ -4,6 +4,6 @@
         "entryPointSourceFile": "../../temp/core/src/bundles/embedded-checkout.d.ts"
     },
     "dtsRollup": {
-        "mainDtsRollupPath": "embedded-checkout.d.ts"
+        "mainDtsRollupPath": "types/embedded-checkout.d.ts"
     }
 }

packages/core/api-extractor/internal-mappers.json

@@ -4,6 +4,6 @@
         "entryPointSourceFile": "../../temp/core/src/bundles/internal-mappers.d.ts"
     },
     "dtsRollup": {
-        "mainDtsRollupPath": "internal-mappers.d.ts"
+        "mainDtsRollupPath": "types/internal-mappers.d.ts"
     }
 }

packages/core/auto-export.config.json

@@ -3,17 +3,24 @@
         {
             "inputPath": "packages/*/src/index.ts",
             "outputPath": "packages/core/src/generated/payment-strategies.ts",
+            "packageOutputPath": "packages/core/src/generated/integrations/<moduleName>/index.ts",
             "memberPattern": "^create.+PaymentStrategy$"
         },
         {
             "inputPath": "packages/*/src/index.ts",
             "outputPath": "packages/core/src/generated/customer-strategies.ts",
+            "packageOutputPath": "packages/core/src/generated/integrations/<moduleName>/index.ts",
             "memberPattern": "^create.+CustomerStrategy$"
         },
         {
             "inputPath": "packages/*/src/index.ts",
             "outputPath": "packages/core/src/generated/checkout-button-strategies.ts",
+            "packageOutputPath": "packages/core/src/generated/integrations/<moduleName>/index.ts",
             "memberPattern": "^create.+ButtonStrategy$"
         }
-    ]
+    ],
+    "apiExtractorConfig": {
+        "entryPointSourceFile": "../../temp/core/src/generated/integrations/<moduleName>/index.d.ts",
+        "mainDtsRollupPath": "types/integrations/<moduleName>.d.ts"
+    }
 }

packages/core/project.json

@@ -19,10 +19,30 @@
                 }
             ]
         },
+        "build-analyze": {
+            "executor": "@nrwl/workspace:run-commands",
+            "options": {
+                "commands": [
+                    "webpack --config webpack.config.js --config-name esm --profile --json > webpack-stats.json",
+                    "webpack-bundle-analyzer webpack-stats.json dist --default-sizes gzip"
+                ],
+                "parallel": false
+            },
+            "dependsOn": [
+                {
+                    "target": "generate",
+                    "projects": "self"
+                },
+                {
+                    "target": "build",
+                    "projects": "dependencies"
+                }
+            ]
+        },
         "build-watch": {
             "executor": "@nrwl/workspace:run-commands",
             "options": {
-                "command": "webpack --config webpack.config.js --config-name cjs --watch --progress"
+                "command": "webpack --config webpack.config.js --config-name esm --watch --progress"
             },
             "dependsOn": [
                 {
@@ -63,6 +83,7 @@
                 "commands": [
                     "tsc --outDir ../../temp --declaration --emitDeclarationOnly",
                     "api-extractor run --config api-extractor/checkout-sdk.json & api-extractor run --config api-extractor/checkout-button.json & api-extractor run --config api-extractor/embedded-checkout.json & api-extractor run --config api-extractor/internal-mappers.json",
+                    "find src/generated/integrations -name 'api-extractor.json' | xargs -I {} -P 8 sh -c 'cd \"$(dirname \"{}\")\" && npx api-extractor run --config api-extractor.json'",
                     "rm -rf ../../temp",
                     "nx run hosted-form-v2:build-dts"
                 ]
@@ -74,7 +95,7 @@
                 "cwd": "packages/core",
                 "parallel": false,
                 "commands": [
-                    "mkdir -p src/generated && cp ../../dist/checkout-sdk.d.ts src/generated/checkout-sdk.d.ts",
+                    "mkdir -p src/generated && cp ../../dist/types/checkout-sdk.d.ts src/generated/checkout-sdk.d.ts",
                     "typedoc --plugin typedoc-plugin-markdown --options typedoc.json --tsconfig tsconfig.json src/generated/checkout-sdk.d.ts"
                 ]
             },
@@ -118,6 +139,7 @@
             "executor": "@nrwl/workspace:run-commands",
             "options": {
                 "commands": [
+                    "rm -rf packages/core/src/generated",
                     "npx nx generate @bigcommerce/checkout-sdk/workspace-tools:auto-export --projectName=core",
                     "npx nx generate @bigcommerce/checkout-sdk/workspace-tools:extend-interface --projectName=core",
                     "npx nx generate @bigcommerce/checkout-sdk/workspace-tools:create-enum --projectName=core"

packages/core/src/common/utility/set-prototype-of.spec.ts

@@ -6,8 +6,6 @@ describe('setPrototypeOf', () => {
 
         const error = new CustomError();
 
-        expect(error instanceof CustomError).toBeFalsy();
-
         setPrototypeOf(error, CustomError.prototype);
 
         expect(error instanceof CustomError).toBeTruthy();

packages/external-integration/src/external-payment-strategy.ts

@@ -47,7 +47,11 @@ export default class ExternalPaymentStrategy implements PaymentStrategy {
                 },
             } = error;
 
-            return new Promise(() => this.redirectUrl(redirect_url));
+            // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+            return new Promise(() => {
+                this.redirectUrl(redirect_url);
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            }) as any;
         }
     }
 

packages/google-pay-integration/src/google-pay-payment-processor.ts

@@ -7,6 +7,7 @@ import {
     guard,
     NotInitializedError,
     NotInitializedErrorType,
+    Omit,
     PaymentMethod,
     PaymentMethodFailedError,
     SDK_VERSION_HEADERS,

packages/google-pay-integration/src/google-pay-payment-strategy.ts

@@ -7,6 +7,7 @@ import {
     MissingDataErrorType,
     NotInitializedError,
     NotInitializedErrorType,
+    Omit,
     OrderFinalizationNotRequiredError,
     OrderRequestBody,
     PaymentArgumentInvalidError,

packages/hosted-form-v2/src/common/utility/set-prototype-of.spec.ts

@@ -6,8 +6,6 @@ describe('setPrototypeOf', () => {
 
         const error = new CustomError();
 
-        expect(error instanceof CustomError).toBeFalsy();
-
         setPrototypeOf(error, CustomError.prototype);
 
         expect(error instanceof CustomError).toBeTruthy();

packages/paypal-express-integration/src/paypal-express-button-initialize-options.ts

@@ -1,4 +1,4 @@
-import { StandardError } from '@bigcommerce/checkout-sdk/payment-integration-api';
+import { Omit, StandardError } from '@bigcommerce/checkout-sdk/payment-integration-api';
 
 import { PaypalStyleOptions } from './paypal-express-types';
 

packages/squarev2-integration/src/create-squarev2-payment-strategy.ts

@@ -1,6 +1,7 @@
 import { getScriptLoader } from '@bigcommerce/script-loader';
 
 import {
+    PaymentStrategy,
     PaymentStrategyFactory,
     toResolvableModule,
 } from '@bigcommerce/checkout-sdk/payment-integration-api';
@@ -9,7 +10,7 @@ import SquareV2PaymentProcessor from './squarev2-payment-processor';
 import SquareV2PaymentStrategy from './squarev2-payment-strategy';
 import SquareV2ScriptLoader from './squarev2-script-loader';
 
-const createSquareV2PaymentStrategy: PaymentStrategyFactory<SquareV2PaymentStrategy> = (
+const createSquareV2PaymentStrategy: PaymentStrategyFactory<PaymentStrategy> = (
     paymentIntegrationService,
 ) => {
     return new SquareV2PaymentStrategy(

packages/workspace-tools/src/generators/auto-export/__snapshots__/auto-export.spec.ts.snap

@@ -1,9 +1,46 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`autoExport() export matching members from files to another file 1`] = `
-"export { StrategyA } from '../__fixtures__/strategy-a';
+Object {
+  "apiExtractorConfigs": Map {
+    "workspace-tools" => "{
+    \\"compiler\\": {
+        \\"configType\\": \\"tsconfig\\",
+        \\"rootFolder\\": \\"../../../..\\"
+    },
+    \\"project\\": {
+        \\"entryPointSourceFile\\": \\"/__temp__/workspace-tools/index.d.ts\\"
+    },
+    \\"validationRules\\": {
+        \\"missingReleaseTags\\": \\"allow\\"
+    },
+    \\"apiReviewFile\\": {
+        \\"enabled\\": false
+    },
+    \\"apiJsonFile\\": {
+        \\"enabled\\": false
+    },
+    \\"dtsRollup\\": {
+        \\"enabled\\": true,
+        \\"mainDtsRollupPath\\": \\"/__temp__/workspace-tools.d.ts\\"
+    }
+}",
+  },
+  "packageExports": Map {
+    "workspace-tools" => "export { StrategyA } from '../../__fixtures__/strategy-a';
+export { StrategyB } from '../../__fixtures__/strategy-b';
+",
+  },
+  "packageExportsGrouped": "export { StrategyA } from '../__fixtures__/strategy-a';
 export { StrategyB } from '../__fixtures__/strategy-b';
-"
+",
+}
 `;
 
-exports[`autoExport() handles scenario where no matching member is found 1`] = `""`;
+exports[`autoExport() handles scenario where no matching member is found 1`] = `
+Object {
+  "apiExtractorConfigs": Map {},
+  "packageExports": Map {},
+  "packageExportsGrouped": "",
+}
+`;

packages/workspace-tools/src/generators/auto-export/auto-export-config.ts

@@ -1,9 +1,16 @@
 export default interface AutoExportConfig {
     entries: AutoExportConfigEntry[];
+    apiExtractorConfig: ApiExtractorConfig;
 }
 
 export interface AutoExportConfigEntry {
     inputPath: string;
     outputPath: string;
+    packageOutputPath: string;
     memberPattern: string;
 }
+
+export interface ApiExtractorConfig {
+    entryPointSourceFile: string;
+    mainDtsRollupPath: string;
+}

packages/workspace-tools/src/generators/auto-export/auto-export.spec.ts

@@ -8,6 +8,11 @@ describe('autoExport()', () => {
             inputPath: path.join(__dirname, '/__fixtures__/**/index.ts'),
             outputPath: path.join(__dirname, '/__temp__/output.ts'),
             memberPattern: '^Strategy',
+            packageOutputPath: path.join(__dirname, '/__temp__/<moduleName>/output.ts'),
+            apiExtractorConfig: {
+                entryPointSourceFile: '/__temp__/<moduleName>/index.d.ts',
+                mainDtsRollupPath: '/__temp__/<moduleName>.d.ts',
+            },
         };
 
         expect(await autoExport(options)).toMatchSnapshot();
@@ -18,6 +23,11 @@ describe('autoExport()', () => {
             inputPath: path.join(__dirname, '/__fixtures__/**/index.ts'),
             outputPath: path.join(__dirname, '/__temp__/output.ts'),
             memberPattern: '^Test',
+            packageOutputPath: path.join(__dirname, '/__temp__/<moduleName>/output.ts'),
+            apiExtractorConfig: {
+                entryPointSourceFile: '/__temp__/<moduleName>/index.d.ts',
+                mainDtsRollupPath: '/__temp__/<moduleName>.d.ts',
+            },
         };
 
         expect(await autoExport(options)).toMatchSnapshot();