@openmrs/esm-dynamic-loading 10.0.1-pre.5299 → 10.0.1-pre.5309

package/.turbo/turbo-build.log

@@ -1,3 +1,3 @@
-[0] Successfully compiled: 5 files with swc (120.97ms)
+[0] Successfully compiled: 5 files with swc (140.08ms)
 [0] swc --strip-leading-paths src -d dist exited with code 0
 [1] tsc --project tsconfig.build.json exited with code 0

package/dist/dynamic-loading.d.ts

@@ -34,7 +34,8 @@ export declare function importDynamic<T = any>(jsPackage: string, share?: string
  * @internal
  *
  * This internal method is used to ensure that the script belonging
- * to the given package is loaded and added to the head.
+ * to the given package is loaded and added to the head. Concurrent and
+ * repeat calls for the same package share a single request for it.
  *
  * @param jsPackage The package to load
  * @param importMap The import map to use for loading this package.

package/dist/dynamic-loading.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-loading.d.ts","sourceRoot":"","sources":["../src/dynamic-loading.ts"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAI1E;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,UAEnC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAsB,aAAa,CAAC,CAAC,GAAG,GAAG,EACzC,SAAS,EAAE,MAAM,EACjB,KAAK,GAAE,MAAkB,EACzB,OAAO,CAAC,EAAE;IACR,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GACA,OAAO,CAAC,CAAC,CAAC,CAyCZ;AAuBD;;;;;;;;;;GAUG;AACH,wBAAsB,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,SAAS,iBAoD3E;AAED;;;;;;GAMG;AACH,wBAAsB,mBAAmB,uBAExC"}
+{"version":3,"file":"dynamic-loading.d.ts","sourceRoot":"","sources":["../src/dynamic-loading.ts"],"names":[],"mappings":"AAEA,OAAO,EAAsB,KAAK,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAI1E;;;;;;;GAOG;AACH,wBAAgB,OAAO,CAAC,IAAI,EAAE,MAAM,UAEnC;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAsB,aAAa,CAAC,CAAC,GAAG,GAAG,EACzC,SAAS,EAAE,MAAM,EACjB,KAAK,GAAE,MAAkB,EACzB,OAAO,CAAC,EAAE;IACR,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB,GACA,OAAO,CAAC,CAAC,CAAC,CAyCZ;AAuBD;;;;;;;;;;;GAWG;AACH,wBAAsB,aAAa,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,CAAC,EAAE,SAAS,iBAkD3E;AAED;;;;;;GAMG;AACH,wBAAsB,mBAAmB,uBAExC"}

package/dist/dynamic-loading.js

@@ -84,7 +84,8 @@ import { getCurrentPageMap, getImportMapOverrideMap, resetImportMapOverrides } f
  * @internal
  *
  * This internal method is used to ensure that the script belonging
- * to the given package is loaded and added to the head.
+ * to the given package is loaded and added to the head. Concurrent and
+ * repeat calls for the same package share a single request for it.
  *
  * @param jsPackage The package to load
  * @param importMap The import map to use for loading this package.
@@ -110,9 +111,7 @@ import { getCurrentPageMap, getImportMapOverrideMap, resetImportMapOverrides } f
         }
         const isOverridden = jsPackage in getImportMapOverrideMap().imports;
         try {
-            return await new Promise((resolve, reject)=>{
-                loadScript(url, resolve, reject);
-            });
+            return await loadScript(url);
         } catch (err) {
             if (isOverridden) {
                 dispatchToastShown({
@@ -146,76 +145,65 @@ function isFederatedModule(a) {
     return typeof a === 'object' && a !== null && 'init' in a && typeof a['init'] === 'function' && 'get' in a && typeof a['get'] === 'function';
 }
 // internals to track script loading
-// basically, if we're already loading a script, we should wait until the script is loaded
-// we use a global to track this
-const OPENMRS_SCRIPT_LOADING = Symbol('__openmrs_script_loading');
+// if we're already loading a script, we should wait until the script is loaded
+// we use a global to track this; we use `Symbol.for()` in case this gets loaded
+// twice
+const OPENMRS_SCRIPT_LOADING = Symbol.for('__openmrs_script_loading');
 /**
- * Appends a `<script>` to the DOM with the given URL.
- */ function loadScript(url, resolve, reject) {
-    const scriptElement = document.head.querySelector(`script[src="${url}"]`);
-    let scriptLoading = window[OPENMRS_SCRIPT_LOADING];
-    if (!scriptLoading) {
-        scriptLoading = window[OPENMRS_SCRIPT_LOADING] = new Set([]);
+ * The scripts this loader has requested, keyed by URL. A pending entry is in flight and a settled
+ * one has loaded; failed requests are removed, so any entry can be awaited rather than re-requested.
+ */ function getScriptRegistry() {
+    var _window, _OPENMRS_SCRIPT_LOADING;
+    return (_window = window)[_OPENMRS_SCRIPT_LOADING = OPENMRS_SCRIPT_LOADING] ?? (_window[_OPENMRS_SCRIPT_LOADING] = new Map());
+}
+/**
+ * Appends a `<script>` to the DOM with the given URL, unless it has been requested already, and
+ * resolves once it has loaded. Callers arriving at any point in a script's lifecycle share one
+ * request for it.
+ *
+ * A script which fails loading is removed from the DOM and can be retried. A script which throws
+ * when loading, however, will remain in the DOM as the script loaded.
+ */ function loadScript(url) {
+    const registry = getScriptRegistry();
+    const requested = registry.get(url);
+    if (requested) {
+        return requested;
     }
-    if (!scriptElement) {
-        scriptLoading.add(url);
-        const element = document.createElement('script');
-        element.src = url;
-        element.type = 'text/javascript';
-        element.async = true;
-        // loadTime() displays an error if a script takes more than 5 seconds to load
+    if (document.head.querySelector(`script[src="${url}"]`)) {
+        // something other than this loader put the script in the document, so assume it's usable
+        console.warn(`Script at ${url} already loaded. Not loading it again.`);
+        return Promise.resolve();
+    }
+    const element = document.createElement('script');
+    element.src = url;
+    element.type = 'text/javascript';
+    element.async = true;
+    const request = new Promise((resolve, reject)=>{
+        // displays an error if a script takes more than 5 seconds to load
         const loadTimeout = setTimeout(()=>{
             console.error(`The script at ${url} did not load within 5 seconds. This may indicate an issue with the imports in the script's entry-point file or with the script's bundler configuration.`);
         }, 5000); // 5 seconds; this is arbitrary
-        let loadFn, errFn, finishScriptLoading;
-        finishScriptLoading = ()=>{
+        function finishScriptLoading() {
             clearTimeout(loadTimeout);
-            scriptLoading.delete(url);
-            if (loadFn) {
-                element.removeEventListener('load', loadFn);
-            }
-            if (errFn) {
-                element.removeEventListener('error', errFn);
-            }
-        };
-        loadFn = ()=>{
+            element.removeEventListener('load', loadFn);
+            element.removeEventListener('error', errFn);
+        }
+        function loadFn() {
             finishScriptLoading();
-            resolve(null);
-        };
-        errFn = (ev)=>{
+            resolve();
+        }
+        function errFn(ev) {
             finishScriptLoading();
+            registry.delete(url);
+            element.remove();
             const msg = `Failed to load script from ${url}`;
             console.error(msg, ev);
             reject(ev.message ?? msg);
-        };
+        }
         element.addEventListener('load', loadFn);
         element.addEventListener('error', errFn);
         document.head.appendChild(element);
-    } else {
-        if (scriptLoading.has(url)) {
-            let loadFn, errFn, finishScriptLoading;
-            finishScriptLoading = ()=>{
-                if (loadFn) {
-                    scriptElement.removeEventListener('load', loadFn);
-                }
-                if (errFn) {
-                    scriptElement.removeEventListener('error', errFn);
-                }
-            };
-            loadFn = ()=>{
-                finishScriptLoading();
-                resolve(null);
-            };
-            // this errFn does not log anything
-            errFn = (ev)=>{
-                finishScriptLoading();
-                reject(ev.message);
-            };
-            scriptElement.addEventListener('load', loadFn);
-            scriptElement.addEventListener('error', errFn);
-        } else {
-            console.warn(`Script at ${url} already loaded. Not loading it again.`);
-            resolve(null);
-        }
-    }
+    });
+    registry.set(url, request);
+    return request;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-dynamic-loading",
-  "version": "10.0.1-pre.5299",
+  "version": "10.0.1-pre.5309",
   "license": "MPL-2.0",
   "description": "Utilities for dynamically loading code in OpenMRS",
   "type": "module",
@@ -54,12 +54,12 @@
     "access": "public"
   },
   "peerDependencies": {
-    "@openmrs/esm-globals": "^10.0.1-pre.5299",
-    "@openmrs/esm-translations": "^10.0.1-pre.5299"
+    "@openmrs/esm-globals": "^10.0.1-pre.5309",
+    "@openmrs/esm-translations": "^10.0.1-pre.5309"
   },
   "devDependencies": {
-    "@openmrs/esm-globals": "10.0.1-pre.5299",
-    "@openmrs/esm-translations": "10.0.1-pre.5299",
+    "@openmrs/esm-globals": "10.0.1-pre.5309",
+    "@openmrs/esm-translations": "10.0.1-pre.5309",
     "@swc/cli": "0.8.1",
     "@swc/core": "1.15.21",
     "@vitest/coverage-v8": "^4.1.2",

package/src/dynamic-loading.test.ts

@@ -58,6 +58,7 @@ describe('dynamic-loading', () => {
   beforeEach(() => {
     localStorage.clear();
     document.head.querySelectorAll('script').forEach((el) => el.remove());
+    delete (window as any)[Symbol.for('__openmrs_script_loading')];
     (globalThis as any).__webpack_share_scopes__ = { default: {} };
     (window as any).spaBase = '/openmrs/spa';
     mockGetImportMapOverrideMap.mockReturnValue({ imports: {} });
@@ -128,7 +129,7 @@ describe('dynamic-loading', () => {
 
       script.dispatchEvent(new Event('load'));
 
-      await expect(promise).resolves.toBeNull();
+      await expect(promise).resolves.toBeUndefined();
     });
 
     it('rejects when the script fails to load', async () => {
@@ -201,7 +202,7 @@ describe('dynamic-loading', () => {
 
       script.dispatchEvent(new Event('load'));
 
-      await expect(promise).resolves.toBeNull();
+      await expect(promise).resolves.toBeUndefined();
       expect(mockGetCurrentPageMap).not.toHaveBeenCalled();
     });
 
@@ -216,24 +217,89 @@ describe('dynamic-loading', () => {
       expect(script).not.toBeNull();
       script.dispatchEvent(new Event('load'));
 
-      await expect(promise).resolves.toBeNull();
+      await expect(promise).resolves.toBeUndefined();
     });
 
-    it('does not reload a script that is already in the DOM and finished loading', async () => {
+    it('does not re-request a script that has already loaded', async () => {
       const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
       mockGetCurrentPageMap.mockResolvedValue({
         imports: { '@openmrs/esm-foo': 'http://localhost/foo.js' },
       });
 
-      // First load
       const firstPromise = preloadImport('@openmrs/esm-foo');
       const script = await waitForScript('http://localhost/foo.js');
       script.dispatchEvent(new Event('load'));
       await firstPromise;
 
-      // Second load — script is in DOM but slug not on window, so it resolves with a warning
-      await expect(preloadImport('@openmrs/esm-foo')).resolves.toBeNull();
+      // the package defines no container global, so this is decided by the script registry alone
+      await expect(preloadImport('@openmrs/esm-foo')).resolves.toBeUndefined();
+      expect(warnSpy).not.toHaveBeenCalled();
+      expect(document.head.querySelectorAll('script[src="http://localhost/foo.js"]')).toHaveLength(1);
+    });
+
+    it('shares the request with a caller that reaches it after the script loaded', async () => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      const importMap = { imports: { '@openmrs/esm-foo': 'http://localhost/foo.js' } };
+
+      let releaseSecondMap!: () => void;
+      const secondMap = new Promise((resolve) => {
+        releaseSecondMap = () => resolve(importMap);
+      });
+      mockGetCurrentPageMap.mockResolvedValueOnce(importMap).mockReturnValueOnce(secondMap);
+
+      const first = preloadImport('@openmrs/esm-foo');
+      const second = preloadImport('@openmrs/esm-foo');
+
+      const script = await waitForScript('http://localhost/foo.js');
+      script.dispatchEvent(new Event('load'));
+      await first;
+
+      // the second caller only learns the URL now, long after the load event it needed to see
+      releaseSecondMap();
+
+      await expect(second).resolves.toBeUndefined();
+      expect(warnSpy).not.toHaveBeenCalled();
+      expect(document.head.querySelectorAll('script[src="http://localhost/foo.js"]')).toHaveLength(1);
+    });
+
+    it('warns about, and does not re-request, a script it did not load itself', async () => {
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      mockGetCurrentPageMap.mockResolvedValue({
+        imports: { '@openmrs/esm-foo': 'http://localhost/foo.js' },
+      });
+
+      const foreign = document.createElement('script');
+      foreign.src = 'http://localhost/foo.js';
+      document.head.appendChild(foreign);
+
+      await expect(preloadImport('@openmrs/esm-foo')).resolves.toBeUndefined();
       expect(warnSpy).toHaveBeenCalledWith(expect.stringContaining('already loaded'));
+      expect(document.head.querySelectorAll('script[src="http://localhost/foo.js"]')).toHaveLength(1);
+    });
+
+    it('retries a script that failed to load', async () => {
+      vi.spyOn(console, 'error').mockImplementation(() => {});
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      mockGetCurrentPageMap.mockResolvedValue({
+        imports: { '@openmrs/esm-foo': 'http://localhost/foo.js' },
+      });
+
+      const firstPromise = preloadImport('@openmrs/esm-foo');
+      const failed = await waitForScript('http://localhost/foo.js');
+      failed.dispatchEvent(new ErrorEvent('error', { message: 'net::ERR_FAILED' }));
+      await expect(firstPromise).rejects.toBe('net::ERR_FAILED');
+
+      // the dead element is gone, so the retry is a real request rather than a false success
+      expect(document.head.querySelector('script[src="http://localhost/foo.js"]')).toBeNull();
+
+      const secondPromise = preloadImport('@openmrs/esm-foo');
+      const retried = await waitForScript('http://localhost/foo.js');
+      expect(retried).not.toBe(failed);
+
+      retried.dispatchEvent(new Event('load'));
+
+      await expect(secondPromise).resolves.toBeUndefined();
+      expect(warnSpy).not.toHaveBeenCalled();
     });
 
     it('resolves both callers when the same script is preloaded concurrently', async () => {
@@ -248,8 +314,8 @@ describe('dynamic-loading', () => {
       const script = await waitForScript('http://localhost/foo.js');
       script.dispatchEvent(new Event('load'));
 
-      await expect(first).resolves.toBeNull();
-      await expect(second).resolves.toBeNull();
+      await expect(first).resolves.toBeUndefined();
+      await expect(second).resolves.toBeUndefined();
     });
 
     it('rejects both callers when a concurrently-loaded script fails', async () => {

package/src/dynamic-loading.ts

@@ -109,7 +109,8 @@ function humanReadableMs(ms: number) {
  * @internal
  *
  * This internal method is used to ensure that the script belonging
- * to the given package is loaded and added to the head.
+ * to the given package is loaded and added to the head. Concurrent and
+ * repeat calls for the same package share a single request for it.
  *
  * @param jsPackage The package to load
  * @param importMap The import map to use for loading this package.
@@ -140,9 +141,7 @@ export async function preloadImport(jsPackage: string, importMap?: ImportMap) {
 
     const isOverridden = jsPackage in getImportMapOverrideMap().imports;
     try {
-      return await new Promise<void>((resolve, reject) => {
-        loadScript(url, resolve, reject);
-      });
+      return await loadScript(url);
     } catch (err: any) {
       if (isOverridden) {
         dispatchToastShown({
@@ -198,99 +197,81 @@ function isFederatedModule(a: unknown): a is FederatedModule {
 }
 
 // internals to track script loading
-// basically, if we're already loading a script, we should wait until the script is loaded
-// we use a global to track this
-const OPENMRS_SCRIPT_LOADING = Symbol('__openmrs_script_loading');
+
+// if we're already loading a script, we should wait until the script is loaded
+// we use a global to track this; we use `Symbol.for()` in case this gets loaded
+// twice
+const OPENMRS_SCRIPT_LOADING = Symbol.for('__openmrs_script_loading');
+
+/**
+ * The scripts this loader has requested, keyed by URL. A pending entry is in flight and a settled
+ * one has loaded; failed requests are removed, so any entry can be awaited rather than re-requested.
+ */
+function getScriptRegistry(): Map<string, Promise<void>> {
+  return (window[OPENMRS_SCRIPT_LOADING] ??= new Map<string, Promise<void>>());
+}
 
 /**
- * Appends a `<script>` to the DOM with the given URL.
+ * Appends a `<script>` to the DOM with the given URL, unless it has been requested already, and
+ * resolves once it has loaded. Callers arriving at any point in a script's lifecycle share one
+ * request for it.
+ *
+ * A script which fails loading is removed from the DOM and can be retried. A script which throws
+ * when loading, however, will remain in the DOM as the script loaded.
  */
-function loadScript(
-  url: string,
-  resolve: (value: unknown | PromiseLike<unknown>) => void,
-  reject: (reason?: any) => void,
-) {
-  const scriptElement = document.head.querySelector(`script[src="${url}"]`);
-  let scriptLoading: Set<string> = window[OPENMRS_SCRIPT_LOADING];
-  if (!scriptLoading) {
-    scriptLoading = window[OPENMRS_SCRIPT_LOADING] = new Set([]);
+function loadScript(url: string): Promise<void> {
+  const registry = getScriptRegistry();
+
+  const requested = registry.get(url);
+  if (requested) {
+    return requested;
+  }
+
+  if (document.head.querySelector(`script[src="${url}"]`)) {
+    // something other than this loader put the script in the document, so assume it's usable
+    console.warn(`Script at ${url} already loaded. Not loading it again.`);
+    return Promise.resolve();
   }
 
-  if (!scriptElement) {
-    scriptLoading.add(url);
-    const element = document.createElement('script');
-    element.src = url;
-    element.type = 'text/javascript';
-    element.async = true;
+  const element = document.createElement('script');
+  element.src = url;
+  element.type = 'text/javascript';
+  element.async = true;
 
-    // loadTime() displays an error if a script takes more than 5 seconds to load
+  const request = new Promise<void>((resolve, reject) => {
+    // displays an error if a script takes more than 5 seconds to load
     const loadTimeout = setTimeout(() => {
       console.error(
         `The script at ${url} did not load within 5 seconds. This may indicate an issue with the imports in the script's entry-point file or with the script's bundler configuration.`,
       );
     }, 5_000); // 5 seconds; this is arbitrary
 
-    let loadFn: () => void, errFn: (ev: ErrorEvent) => void, finishScriptLoading: () => void;
-
-    finishScriptLoading = () => {
+    function finishScriptLoading() {
       clearTimeout(loadTimeout);
-      scriptLoading.delete(url);
-
-      if (loadFn) {
-        element.removeEventListener('load', loadFn);
-      }
-
-      if (errFn) {
-        element.removeEventListener('error', errFn);
-      }
-    };
+      element.removeEventListener('load', loadFn);
+      element.removeEventListener('error', errFn);
+    }
 
-    loadFn = () => {
+    function loadFn() {
       finishScriptLoading();
-      resolve(null);
-    };
+      resolve();
+    }
 
-    errFn = (ev: ErrorEvent) => {
+    function errFn(ev: ErrorEvent) {
       finishScriptLoading();
+      registry.delete(url);
+      element.remove();
       const msg = `Failed to load script from ${url}`;
       console.error(msg, ev);
       reject(ev.message ?? msg);
-    };
+    }
 
     element.addEventListener('load', loadFn);
     element.addEventListener('error', errFn);
 
     document.head.appendChild(element);
-  } else {
-    if (scriptLoading.has(url)) {
-      let loadFn: () => void, errFn: (ev: ErrorEvent) => void, finishScriptLoading: () => void;
-
-      finishScriptLoading = () => {
-        if (loadFn) {
-          scriptElement.removeEventListener('load', loadFn);
-        }
-
-        if (errFn) {
-          scriptElement.removeEventListener('error', errFn);
-        }
-      };
-
-      loadFn = () => {
-        finishScriptLoading();
-        resolve(null);
-      };
-
-      // this errFn does not log anything
-      errFn = (ev: ErrorEvent) => {
-        finishScriptLoading();
-        reject(ev.message);
-      };
-
-      scriptElement.addEventListener('load', loadFn);
-      scriptElement.addEventListener('error', errFn);
-    } else {
-      console.warn(`Script at ${url} already loaded. Not loading it again.`);
-      resolve(null);
-    }
-  }
+  });
+
+  registry.set(url, request);
+  return request;
 }