feat(core): CHECKOUT-9450 Lazy load payment strategies through essential build

Author: davidchin

.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

package-lock.json

@@ -3,8 +3,26 @@
   "version": "1.793.0",
   "description": "BigCommerce Checkout JavaScript SDK",
   "license": "MIT",
-  "main": "dist/checkout-sdk.js",
+  "main": "dist/cjs/checkout-sdk.js",
+  "module": "dist/esm/checkout-sdk.js",
   "typings": "dist/checkout-sdk.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/checkout-sdk.d.ts",
+      "import": "./dist/esm/checkout-sdk.js",
+      "require": "./dist/cjs/checkout-sdk.js"
+    },
+    "./essential": {
+      "types": "./dist/checkout-sdk.d.ts",
+      "import": "./dist/esm/checkout-sdk-essential.js",
+      "require": "./dist/cjs/checkout-sdk-essential.js"
+    },
+    "./integrations": {
+      "types": "./dist/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",
@@ -53,7 +71,7 @@
   },
   "dependencies": {
     "@bigcommerce/bigpay-client": "^5.28.1",
-    "@bigcommerce/data-store": "^1.0.1",
+    "@bigcommerce/data-store": "^1.0.3",
     "@bigcommerce/form-poster": "^1.5.0",
     "@bigcommerce/memoize": "^1.0.0",
     "@bigcommerce/request-sender": "^1.2.4",
@@ -122,7 +140,7 @@
     "typedoc": "^0.22.0",
     "typedoc-plugin-markdown": "^3.11.0",
     "typescript": "^4.7.2",
-    "webpack": "^5.72.0",
+    "webpack": "^5.101.3",
     "webpack-assets-manifest": "^5.1.0",
     "webpack-bundle-analyzer": "^4.5.0",
     "webpack-cli": "^4.9.2",

package.json

@@ -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/index.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/adyen-utils/src/types.ts

@@ -0,0 +1,22 @@
+{
+    "compiler": {
+        "configType": "tsconfig",
+        "rootFolder": "."
+    },
+    "project": {
+        "entryPointSourceFile": "../../temp/core/src/bundles/integrations.d.ts"
+    },
+    "validationRules": {
+        "missingReleaseTags": "allow"
+    },
+    "apiReviewFile": {
+        "enabled": false
+    },
+    "apiJsonFile": {
+        "enabled": false
+    },
+    "dtsRollup": {
+        "enabled": true,
+        "mainDtsRollupPath": "integrations.d.ts"
+    }
+}

packages/core/api-extractor/integrations.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": [
                 {
@@ -62,7 +82,7 @@
                 "parallel": false,
                 "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",
+                    "api-extractor run --config api-extractor/checkout-sdk.json & api-extractor run --config api-extractor/integrations.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",
                     "rm -rf ../../temp",
                     "nx run hosted-form-v2:build-dts"
                 ]

packages/core/project.json

@@ -0,0 +1,2 @@
+export * from '../generated/payment-strategies';
+export * from '../generated/customer-strategies';

packages/core/src/bundles/integrations.ts

@@ -26,7 +26,7 @@ describe('CheckoutButtonInitializer', () => {
 
         buttonActionCreator = new CheckoutButtonStrategyActionCreator(
             createCheckoutButtonRegistry(store, createRequestSender(), createFormPoster(), 'en'),
-            createCheckoutButtonRegistryV2(createPaymentIntegrationService(store)),
+            createCheckoutButtonRegistryV2(createPaymentIntegrationService(store), {}),
             new PaymentMethodActionCreator(new PaymentMethodRequestSender(createRequestSender())),
         );
 

packages/core/src/checkout-buttons/checkout-button-initializer.spec.ts

@@ -48,7 +48,7 @@ describe('CheckoutButtonStrategyActionCreator', () => {
         );
         strategy = new MockButtonStrategy();
         store = createCheckoutStore();
-        registryV2 = createCheckoutButtonRegistryV2(createPaymentIntegrationService(store));
+        registryV2 = createCheckoutButtonRegistryV2(createPaymentIntegrationService(store), {});
         registry.register(CheckoutButtonMethodType.MASTERPASS, () => strategy);
 
         jest.spyOn(paymentMethodActionCreator, 'loadPaymentMethod').mockReturnValue(() =>