remove loop from umd bundle loading

immutable · Feb 16, 2024 · 3ebbf8d · 3ebbf8d
1 parent d819f68
commit 3ebbf8d
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 56 deletions.
diff --git a/packages/checkout/sdk/src/sdk.ts b/packages/checkout/sdk/src/sdk.ts
@@ -71,14 +71,14 @@ import { HttpClient } from './api/http';
 import { isMatchingAddress } from './utils/utils';
 import { WidgetConfiguration } from './widgets/definitions/configurations';
 import { SemanticVersion } from './widgets/definitions/types';
+import { validateAndBuildVersion } from './widgets/version';
 
 const SANDBOX_CONFIGURATION = {
   baseConfig: {
     environment: Environment.SANDBOX,
   },
   passport: undefined,
 };
-const WIDGETS_SCRIPT_TIMEOUT = 100;
 
 // Checkout SDK
 export class Checkout {
@@ -140,24 +140,52 @@ export class Checkout {
     const checkout = this;
 
     const factory = new Promise<ImmutableCheckoutWidgets.WidgetsFactory>((resolve, reject) => {
-      function checkForWidgetsBundleLoaded() {
-        if (typeof ImmutableCheckoutWidgets !== 'undefined') {
-          resolve(new ImmutableCheckoutWidgets.WidgetsFactory(checkout, config));
-        } else {
-        // If ImmutableCheckoutWidgets is not defined, wait for set amount of time.
-        // When time has elapsed, check again if ImmutableCheckoutWidgets is defined.
-        // Once it's defined, the promise will resolve and setTimeout won't be called again.
-          setTimeout(checkForWidgetsBundleLoaded, WIDGETS_SCRIPT_TIMEOUT);
-        }
-      }
-
       try {
-        const script = loadUnresolvedBundle(version);
-        if (script.loaded && typeof ImmutableCheckoutWidgets !== 'undefined') {
-          resolve(new ImmutableCheckoutWidgets.WidgetsFactory(checkout, config));
-        } else {
-          checkForWidgetsBundleLoaded();
+        const scriptId = 'immutable-checkout-widgets-bundle';
+        const validVersion = validateAndBuildVersion(version);
+
+        // Prevent the script to be loaded more than once
+        // by checking the presence of the script and its version.
+        const initScript = document.getElementById(scriptId) as HTMLScriptElement;
+        if (initScript) {
+          if (typeof ImmutableCheckoutWidgets !== 'undefined') {
+            resolve(new ImmutableCheckoutWidgets.WidgetsFactory(checkout, config));
+          } else {
+            reject(
+              new CheckoutError(
+                'Failed to find ImmutableCheckoutWidgets script',
+                CheckoutErrorType.WIDGETS_SCRIPT_LOAD_ERROR,
+              ),
+            );
+          }
         }
+
+        const tag = document.createElement('script');
+
+        tag.addEventListener('load', () => {
+          if (typeof ImmutableCheckoutWidgets !== 'undefined') {
+            resolve(new ImmutableCheckoutWidgets.WidgetsFactory(checkout, config));
+          } else {
+            reject(
+              new CheckoutError(
+                'Failed to find ImmutableCheckoutWidgets script',
+                CheckoutErrorType.WIDGETS_SCRIPT_LOAD_ERROR,
+              ),
+            );
+          }
+        });
+
+        tag.addEventListener('error', (err) => {
+          reject(
+            new CheckoutError(
+              'Failed to load widgets script',
+              CheckoutErrorType.WIDGETS_SCRIPT_LOAD_ERROR,
+              { error: err },
+            ),
+          );
+        });
+
+        loadUnresolvedBundle(tag, scriptId, validVersion);
       } catch (err: any) {
         reject(
           new CheckoutError(

diff --git a/packages/checkout/sdk/src/widgets/load.test.ts b/packages/checkout/sdk/src/widgets/load.test.ts
@@ -4,38 +4,16 @@ import { getWidgetsEsmUrl, loadUnresolvedBundle } from './load';
 
 describe('load', () => {
   const SDK_VERSION = SDK_VERSION_MARKER;
+  const scriptId = 'immutable-checkout-widgets-bundle';
 
   beforeEach(() => {
     jest.spyOn(console, 'warn').mockImplementation(() => {});
   });
 
   describe('load unresolved bundle', () => {
     it('should validate the versioning', () => {
-      loadUnresolvedBundle();
-      expect(document.head.innerHTML).toBe(
-        '<script id="immutable-checkout-widgets-bundle" '
-        + 'data-version="__SDK_VERSION__" '
-        + `src="https://cdn.jsdelivr.net/npm/@imtbl/sdk@${SDK_VERSION}/dist/browser/checkout/widgets.js"></script>`,
-      );
-    });
-
-    it('should not re-add script', () => {
-      loadUnresolvedBundle();
-      loadUnresolvedBundle();
-      loadUnresolvedBundle();
-      expect(document.head.innerHTML).toBe(
-        '<script id="immutable-checkout-widgets-bundle" '
-        + 'data-version="__SDK_VERSION__" '
-        + `src="https://cdn.jsdelivr.net/npm/@imtbl/sdk@${SDK_VERSION}/dist/browser/checkout/widgets.js"></script>`,
-      );
-    });
-
-    it('should change version', () => {
-      loadUnresolvedBundle();
-      loadUnresolvedBundle({
-        major: 1,
-        minor: 2,
-      });
+      const tag = document.createElement('script');
+      loadUnresolvedBundle(tag, scriptId, SDK_VERSION);
       expect(document.head.innerHTML).toBe(
         '<script id="immutable-checkout-widgets-bundle" '
         + 'data-version="__SDK_VERSION__" '

diff --git a/packages/checkout/sdk/src/widgets/load.ts b/packages/checkout/sdk/src/widgets/load.ts
@@ -4,8 +4,10 @@ import { validateAndBuildVersion } from './version';
 
 // Loads the checkout widgets bundle from the CDN and appends the script to the document head
 export function loadUnresolvedBundle(
-  version?: SemanticVersion,
-): { loaded: boolean, element: HTMLScriptElement } {
+  tag: HTMLScriptElement,
+  scriptId: string,
+  validVersion: string,
+) {
   if (window === undefined) {
     throw new Error('missing window object: please run Checkout client side');
   }
@@ -14,16 +16,6 @@ export function loadUnresolvedBundle(
     throw new Error('missing document object: please run Checkout client side');
   }
 
-  const scriptId = 'immutable-checkout-widgets-bundle';
-  const validVersion = validateAndBuildVersion(version);
-
-  // Prevent the script to be loaded more than once
-  // by checking the presence of the script and its version.
-  const initScript = document.getElementById(scriptId) as HTMLScriptElement;
-  if (initScript) return { loaded: true, element: initScript };
-
-  const tag = document.createElement('script');
-
   let cdnUrl = `https://cdn.jsdelivr.net/npm/@imtbl/sdk@${validVersion}/dist/browser/checkout/widgets.js`;
   if (useLocalBundle()) cdnUrl = `http://${window.location.host}/lib/js/widgets.js`;
 
@@ -32,8 +24,6 @@ export function loadUnresolvedBundle(
   tag.setAttribute('src', cdnUrl);
 
   document.head.appendChild(tag);
-
-  return { loaded: false, element: tag };
 }
 
 // Gets the CDN url for the split checkout widgets bundle