CHECKOUT-9450: Lazy load payment strategies through essential build

.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/checkout-buttons/checkout-button-initializer.spec.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-strategy-action-creator.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(() =>

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

@@ -3,6 +3,7 @@ import { createRequestSender } from '@bigcommerce/request-sender';
 
 import { createCheckoutStore } from '../checkout';
 import { ConfigState } from '../config';
+import * as defaultCheckoutButtonStrategyFactories from '../generated/checkout-button-strategies';
 import { PaymentMethodActionCreator, PaymentMethodRequestSender } from '../payment';
 import { createPaymentIntegrationService } from '../payment-integration';
 
@@ -53,7 +54,12 @@ export default function createCheckoutButtonInitializer(
     const requestSender = createRequestSender({ host });
     const formPoster = createFormPoster({ host });
     const paymentIntegrationService = createPaymentIntegrationService(store);
-    const registryV2 = createCheckoutButtonRegistryV2(paymentIntegrationService);
+    const registryV2 = createCheckoutButtonRegistryV2(
+        paymentIntegrationService,
+        defaultCheckoutButtonStrategyFactories,
+        // TODO: Replace once CHECKOUT-9450.lazy_load_payment_strategies experiment is rolled out
+        // process.env.ESSENTIAL_BUILD ? {} : defaultCheckoutButtonStrategyFactories,
+    );
 
     return new CheckoutButtonInitializer(
         store,

packages/core/src/checkout-buttons/create-checkout-button-registry-v2.ts

@@ -7,15 +7,14 @@ import {
 } from '@bigcommerce/checkout-sdk/payment-integration-api';
 
 import { ResolveIdRegistry } from '../common/registry';
-import * as defaultCheckoutButtonStrategyFactories from '../generated/checkout-button-strategies';
 
 export interface CheckoutButtonStrategyFactories {
     [key: string]: CheckoutButtonStrategyFactory<CheckoutButtonStrategy>;
 }
 
 export default function createCheckoutButtonStrategyRegistry(
     paymentIntegrationService: PaymentIntegrationService,
-    checkoutButtonStrategyFactories: CheckoutButtonStrategyFactories = defaultCheckoutButtonStrategyFactories,
+    checkoutButtonStrategyFactories: CheckoutButtonStrategyFactories,
 ): ResolveIdRegistry<CheckoutButtonStrategy, CheckoutButtonStrategyResolveId> {
     const registry = new ResolveIdRegistry<
         CheckoutButtonStrategy,

packages/core/src/checkout/checkout-service.spec.ts

@@ -253,8 +253,8 @@ describe('CheckoutService', () => {
         jest.spyOn(paymentStrategy, 'deinitialize').mockResolvedValue(Promise.resolve());
 
         paymentStrategyRegistry = new PaymentStrategyRegistry();
-        paymentStrategyRegistryV2 = createPaymentStrategyRegistryV2(paymentIntegrationService);
-        customerRegistryV2 = createCustomerStrategyRegistryV2(paymentIntegrationService);
+        paymentStrategyRegistryV2 = createPaymentStrategyRegistryV2(paymentIntegrationService, {});
+        customerRegistryV2 = createCustomerStrategyRegistryV2(paymentIntegrationService, {});
 
         // This can't be fixed until we have differences between core and payment integration api payment strategy types
         // TODO: remove ts-ignore and update test with related type (PAYPAL-4383)
@@ -379,6 +379,7 @@ describe('CheckoutService', () => {
         customerStrategyActionCreator = new CustomerStrategyActionCreator(
             createCustomerStrategyRegistry(store, requestSender, locale),
             customerRegistryV2,
+            paymentIntegrationService,
         );
 
         instrumentActionCreator = new InstrumentActionCreator(instrumentRequestSender);
@@ -397,6 +398,7 @@ describe('CheckoutService', () => {
             paymentStrategyRegistryV2,
             orderActionCreator,
             spamProtectionActionCreator,
+            paymentIntegrationService,
         );
 
         shippingStrategyActionCreator = new ShippingStrategyActionCreator(

packages/core/src/checkout/create-checkout-service.ts

@@ -28,7 +28,8 @@ import {
     WorkerExtensionMessenger,
 } from '../extension';
 import { FormFieldsActionCreator, FormFieldsRequestSender } from '../form';
-import * as defaultPaymentStrategyFactories from '../generated/payment-strategies';
+import * as customerStrategyFactories from '../generated/customer-strategies';
+import * as paymentStrategyFactories from '../generated/payment-strategies';
 import { CountryActionCreator, CountryRequestSender } from '../geography';
 import { OrderActionCreator, OrderRequestSender } from '../order';
 import {
@@ -136,12 +137,20 @@ export default function createCheckoutService(options?: CheckoutServiceOptions):
         formFieldsActionCreator,
     );
     const paymentIntegrationService = createPaymentIntegrationService(store);
+
     const registryV2 = createPaymentStrategyRegistryV2(
         paymentIntegrationService,
-        defaultPaymentStrategyFactories,
+        paymentStrategyFactories,
+        // TODO: Replace once CHECKOUT-9450.lazy_load_payment_strategies experiment is rolled out
+        // process.env.ESSENTIAL_BUILD ? {} : paymentStrategyFactories,
         { useFallback: true },
     );
-    const customerRegistryV2 = createCustomerStrategyRegistryV2(paymentIntegrationService);
+    const customerRegistryV2 = createCustomerStrategyRegistryV2(
+        paymentIntegrationService,
+        customerStrategyFactories,
+        // TODO: Replace once CHECKOUT-9450.lazy_load_payment_strategies experiment is rolled out
+        // process.env.ESSENTIAL_BUILD ? {} : customerStrategyFactories,
+    );
     const extensionActionCreator = new ExtensionActionCreator(
         new ExtensionRequestSender(requestSender),
     );
@@ -174,6 +183,7 @@ export default function createCheckoutService(options?: CheckoutServiceOptions):
         new CustomerStrategyActionCreator(
             createCustomerStrategyRegistry(store, requestSender, locale),
             customerRegistryV2,
+            paymentIntegrationService,
         ),
         new ErrorActionCreator(),
         new GiftCertificateActionCreator(new GiftCertificateRequestSender(requestSender)),
@@ -191,6 +201,7 @@ export default function createCheckoutService(options?: CheckoutServiceOptions):
             registryV2,
             orderActionCreator,
             spamProtectionActionCreator,
+            paymentIntegrationService,
         ),
         new PickupOptionActionCreator(new PickupOptionRequestSender(requestSender)),
         new ShippingCountryActionCreator(

packages/core/src/common/registry/registry.ts

@@ -32,6 +32,13 @@ export default class Registry<T, K extends string = string> {
         }
     }
 
+    getFactory(token: string): Factory<T> | undefined {
+        const resolvedToken = this._tokenResolver(token, Object.keys(this._factories));
+        const factory = resolvedToken ? this._factories[resolvedToken] : undefined;
+
+        return factory;
+    }
+
     register(token: K, factory: Factory<T>): void {
         if (this._hasFactory(token)) {
             throw new InvalidArgumentError(`'${token}' is already registered.`);
@@ -50,8 +57,7 @@ export default class Registry<T, K extends string = string> {
 
     private _getInstance(token: string, cacheToken: string): T {
         if (!this._hasInstance(cacheToken)) {
-            const resolvedToken = this._tokenResolver(token, Object.keys(this._factories));
-            const factory = resolvedToken && this._factories[resolvedToken];
+            const factory = this.getFactory(token);
 
             if (!factory) {
                 throw new InvalidArgumentError(`'${token}' is not registered.`);

packages/core/src/common/registry/resolve-id-registry.ts

@@ -18,6 +18,14 @@ export default class ResolveIdRegistry<TType, TToken extends { [key: string]: un
         return this._registry.get(this._encodeToken(resolveId));
     }
 
+    getFactory(resolveId: TToken): Factory<TType> | undefined {
+        try {
+            return this._registry.getFactory(this._encodeToken(resolveId));
+        } catch (error) {
+            return undefined;
+        }
+    }
+
     register(resolveId: TToken, factory: Factory<TType>): void {
         this._registry.register(this._encodeToken(resolveId), factory);
     }

packages/core/src/common/types/sentry.ts

@@ -0,0 +1,7 @@
+export interface Sentry {
+    captureMessage(message: string): void;
+}
+
+export interface SentryWindow extends Window {
+    Sentry?: Sentry;
+}

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();