@elliemae/pui-app-bridge 2.24.0 → 2.26.0-alpha.0

package/dist/cjs/appBridge.js

@@ -153,18 +153,19 @@ class CAppBridge {
   };
   /**
    * add app to active app list
-   * @param param0
-   * @param param0.id
-   * @param param0.instanceId
-   * @param elementIds
-   * @param param0.documentEle
-   * @param param0.elementIds
+   * @param options
+   * @param options.id - application id
+   * @param options.instanceId - unique instance id
+   * @param options.documentEle - iframe document
+   * @param options.elementIds - ids of injected script/style elements
+   * @param options.microFEHost - pre-created host reference for guest-initiated loading
    */
   #addAppToActiveAppList = ({
     id,
     instanceId,
     documentEle,
-    elementIds
+    elementIds,
+    microFEHost
   }) => {
     const app = this.#appRegistry.get({ id, instanceId });
     if (!app) {
@@ -177,7 +178,8 @@ class CAppBridge {
       guest: {
         guestWindow: documentEle?.defaultView,
         ...app
-      }
+      },
+      microFEHost
     });
   };
   #initApplication = async ({
@@ -189,7 +191,8 @@ class CAppBridge {
     homeRoute,
     initialRoute,
     history,
-    theme
+    theme,
+    microFEHost
   }) => {
     const app = this.#appRegistry.get({ id, instanceId });
     if (!app) {
@@ -201,10 +204,8 @@ class CAppBridge {
       throw new Error(
         `Application ${id} with instance id ${instanceId} doesn't expose init method`
       );
-    const host = new import_microfeHost.CMicroFEHost({
-      guest: {
-        id
-      },
+    const host = microFEHost ?? new import_microfeHost.CMicroFEHost({
+      guest: { id },
       version: this.#version,
       containerId,
       logger: this.#logger,
@@ -232,7 +233,7 @@ class CAppBridge {
         `Application ${id} with instance id ${instanceId} is loading...`
       );
       let assets = files;
-      const manifest = await import_loaders.ManifestLoader.get(options);
+      const manifest = options.manifest ?? await import_loaders.ManifestLoader.get(options);
       assets = import_loaders.ManifestLoader.getFullFileNameofAssets(manifest, files);
       const cssAssets = assets.filter((fileName) => isCss(fileName));
       const jsAssets = assets.filter((fileName) => !isCss(fileName));
@@ -250,9 +251,12 @@ class CAppBridge {
         id,
         instanceId,
         documentEle,
-        elementIds: [...styleElementIds, ...scriptElementIds]
+        elementIds: [...styleElementIds, ...scriptElementIds],
+        microFEHost: options.microFEHost
       });
-      await this.#initApplication(options);
+      if (!options.selfInitialize) {
+        await this.#initApplication(options);
+      }
       this.#logger.audit(
         `Application ${id} with instance id ${instanceId} loaded`
       );
@@ -351,6 +355,56 @@ class CAppBridge {
       });
     }
   };
+  /**
+   * If the guest's module SO exposes _setUnloadHandler (duck-typed),
+   * bind it to closeApp so the guest can trigger its own teardown.
+   * @param id
+   * @param instanceId
+   */
+  #bindModuleUnload = (id, instanceId) => {
+    const moduleSO = this.#soManager.getObject(
+      import_pui_scripting_object.ScriptingObjectNames.Module,
+      { id }
+    );
+    const so = moduleSO;
+    const handler = so?._setUnloadHandler;
+    if (typeof handler === "function") {
+      handler(
+        () => this.closeApp(instanceId)
+      );
+    }
+  };
+  /**
+   * Dispatch the module.unloading event and collect feedback.
+   * Returns true if unload is allowed, false if any listener vetoed.
+   * @param id
+   */
+  #canUnload = async (id) => {
+    const moduleSO = this.#soManager.getObject(
+      import_pui_scripting_object.ScriptingObjectNames.Module,
+      { id }
+    );
+    if (!moduleSO) return true;
+    try {
+      const feedback = await this.#eventManager.dispatchEvent(moduleSO, {
+        event: { id: "module.unloading", name: "unloading" },
+        eventParams: { moduleId: id },
+        eventOptions: { timeout: 1e3 }
+      });
+      if (Array.isArray(feedback) && feedback.some((v) => v === false)) {
+        this.#logger.info(
+          `Unload denied by guest ${id} via module.unloading event`
+        );
+        return false;
+      }
+    } catch (err) {
+      this.#logger.warn({
+        message: `Error dispatching module.unloading event for ${id}`,
+        exception: err
+      });
+    }
+    return true;
+  };
   /**
    * clear session management for the guest application
    * @param instanceId unique instance id of the application
@@ -483,6 +537,7 @@ class CAppBridge {
       return;
     }
     const { id } = app;
+    if (!await this.#canUnload(id)) return;
     const appConfig = this.#microFEConfig.getConfigById(id);
     if (!appConfig) {
       this.#logger.warn(`Configuration for application ${id} is not found`);
@@ -543,14 +598,46 @@ class CAppBridge {
    */
   getApps = () => [...this.#activeApps.values()].map((app) => app.guest);
   /**
-   * Initialize appBridge
+   * Initialize appBridge.
+   * @param preloadedAppConfig - Already-parsed config object. When provided
+   *   the bridge skips its own HTTP fetch of app.config.json.
    */
-  init = async () => {
-    await this.#appConfig.load();
+  init = async (preloadedAppConfig) => {
+    if (preloadedAppConfig) {
+      this.#appConfig.setPreloadedConfig(preloadedAppConfig);
+    } else {
+      await this.#appConfig.load();
+    }
     this.#microFEConfig.init({
       version: this.#version,
       appConfig: this.#appConfig
     });
+    this.#injectPreconnects();
+  };
+  /**
+   * Inject `<link rel="preconnect">` tags into the parent document for each
+   * unique micro-app origin. Called once at the end of {@link init} so that
+   * DNS/TCP/TLS handshakes start before any iframe is created.
+   */
+  #injectPreconnects = () => {
+    const apps = this.#appConfig.get("microFrontendApps") ?? {};
+    const origins = /* @__PURE__ */ new Set();
+    Object.keys(apps).forEach((id) => {
+      const cfg = this.#microFEConfig.getConfigById(id);
+      if (cfg?.hostUrl) {
+        try {
+          origins.add(new URL(cfg.hostUrl).origin);
+        } catch {
+        }
+      }
+    });
+    origins.forEach((origin) => {
+      const link = document.createElement("link");
+      link.rel = "preconnect";
+      link.href = origin;
+      link.crossOrigin = "anonymous";
+      document.head.appendChild(link);
+    });
   };
   /**
    * Mount guest micro frontend application into DOM
@@ -571,10 +658,42 @@ class CAppBridge {
     }
     await this.#mountApp({ ...appConfig, instanceId });
   };
+  /**
+   * Prepare the iframe: create a CMicroFEHost, expose it on window.emui,
+   * and inject a preconnect hint for the guest origin.
+   * @param frameDoc
+   * @param appConfig
+   * @param appConfig.hostUrl
+   * @param options
+   * @param options.id
+   * @param options.containerId
+   */
+  #setupIframe = (frameDoc, appConfig, options) => {
+    const microFEHost = new import_microfeHost.CMicroFEHost({
+      guest: { id: options.id },
+      version: this.#version,
+      containerId: options.containerId,
+      logger: this.#logger,
+      soManager: this.#soManager,
+      eventManager: this.#eventManager
+    });
+    const iframeWindow = frameDoc.defaultView;
+    if (iframeWindow) {
+      iframeWindow.emui = iframeWindow.emui ?? {};
+      iframeWindow.emui.__host = microFEHost;
+    }
+    const preconnect = frameDoc.createElement("link");
+    preconnect.rel = "preconnect";
+    preconnect.href = appConfig.hostUrl;
+    preconnect.crossOrigin = "anonymous";
+    frameDoc.head.appendChild(preconnect);
+    return microFEHost;
+  };
   /**
    * Open guest micro frontend application
    * @param {OpenAppParams} params - options to open guest application
    */
+  // eslint-disable-next-line max-statements
   openApp = async (params) => {
     const {
       id,
@@ -583,7 +702,8 @@ class CAppBridge {
       theme,
       homeRoute,
       initialRoute,
-      metadata
+      metadata,
+      selfInitialize
     } = params;
     const instanceId = (0, import_uuid.v4)();
     if (metadata) this.#guestMetadata.set(id, metadata);
@@ -591,15 +711,15 @@ class CAppBridge {
     if (!appConfig) {
       throw new Error(`Application ${id} is not found in app config`);
     }
+    const manifestPromise = import_loaders.ManifestLoader.get(appConfig);
+    manifestPromise.catch(() => {
+    });
     const frameEle = await import_frame.Frame.create({
       id,
       instanceId,
       manifestPath: appConfig.manifestPath,
       hostUrl: appConfig.hostUrl,
-      options: {
-        title: appConfig.name,
-        ...frameOptions
-      }
+      options: { title: appConfig.name, ...frameOptions }
     });
     if (!frameEle?.contentDocument)
       throw new Error("unable to create iframe for the microapp");
@@ -609,6 +729,15 @@ class CAppBridge {
         instanceId,
         documentEle: frameEle.contentDocument
       });
+      const microFEHost = this.#setupIframe(
+        frameEle.contentDocument,
+        appConfig,
+        {
+          id,
+          containerId: frameOptions?.containerId
+        }
+      );
+      const manifest = await manifestPromise;
       await this.#loadApp({
         instanceId,
         history,
@@ -617,10 +746,16 @@ class CAppBridge {
         containerId: frameOptions?.containerId,
         ...appConfig,
         homeRoute: homeRoute ?? appConfig.homeRoute,
-        initialRoute
+        initialRoute,
+        microFEHost,
+        selfInitialize,
+        manifest
       });
-      await this.#mountApp({ instanceId, ...appConfig });
+      if (!selfInitialize) {
+        await this.#mountApp({ instanceId, ...appConfig });
+      }
       this.#manageSession({ id, instanceId });
+      this.#bindModuleUnload(id, instanceId);
       return instanceId;
     } catch (err) {
       this.#unloadApp({
@@ -654,6 +789,18 @@ class CAppBridge {
   removeScriptingObject = (objectId, guestId) => {
     this.#soManager.removeScriptingObject(objectId, guestId);
   };
+  /**
+   * Pre-fetch the manifest for a guest application so that a subsequent
+   * {@link openApp} call can skip the manifest network round-trip.
+   * Safe to call multiple times — results are cached.
+   * @param id application id as defined in app.config.json
+   */
+  warmUp = (id) => {
+    const appConfig = this.#microFEConfig.getConfigById(id);
+    if (!appConfig) return;
+    import_loaders.ManifestLoader.get(appConfig).catch(() => {
+    });
+  };
   /**
    * Unmount guest micro frontend application from DOM
    * @param instanceId unique instance id of guest micro frontend application

package/dist/cjs/config/app.js

@@ -85,6 +85,14 @@ class CAppConfig {
    * @returns true if key exists
    */
   has = (key = "") => (0, import_has.default)(this.#gAppConfig, key);
+  /**
+   * Accept an already-parsed config object, skipping the HTTP fetch.
+   * Useful when the caller (e.g. pui-app-sdk) has already loaded the config.
+   * @param config
+   */
+  setPreloadedConfig = (config) => {
+    this.#gAppConfig = config;
+  };
   /**
    * add version to the base url
    * @returns versioned base url

package/dist/cjs/frame.html

@@ -6,27 +6,6 @@
     <meta name="mobile-web-app-capable" content="yes" />
     <link rel="icon" href="/favicon.ico" />
     <title>Application</title>
-    <script nonce="__CSP_NONCE__">
-      (function (i, s, o, g, r, a, m) {
-        i['GoogleAnalyticsObject'] = r;
-        (i[r] =
-          i[r] ||
-          function () {
-            (i[r].q = i[r].q || []).push(arguments);
-          }),
-          (i[r].l = 1 * new Date());
-        (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
-        a.async = 1;
-        a.src = g;
-        m.parentNode.insertBefore(a, m);
-      })(
-        window,
-        document,
-        'script',
-        'https://www.google-analytics.com/analytics.js',
-        'ga',
-      );
-    </script>
     <style nonce="__CSP_NONCE__">
       .full-width {
         width: 100%;

package/dist/cjs/loaders/script.js

@@ -121,9 +121,11 @@ class ScriptLoader {
    * This method:
    * - Partitions assets into CDN (HTTP/HTTPS) and non-CDN (relative) arrays in a single pass
    * - Creates modulepreload links for all assets for performance optimization
-   * - Loads CDN scripts sequentially first (they may set global variables needed by non-CDN scripts)
-   * - Then loads non-CDN scripts sequentially
-   * - Sequential execution ensures proper dependency resolution and initialization order
+   * - Appends all script elements to the DOM synchronously so the browser
+   *   can download them in parallel
+   * - Execution order is preserved by the spec: type="module" scripts
+   *   execute in document order; dynamic async=false scripts execute in
+   *   insertion order
    * @example
    * ```typescript
    * const scriptIds = await scriptLoader.load(
@@ -158,15 +160,13 @@ class ScriptLoader {
         nonCdnAssets: []
       }
     );
-    for (const { href, id } of [...cdnAssets, ...nonCdnAssets]) {
-      await this.#loadScript({
-        id,
-        href,
-        documentEle,
-        isESMModule
-      });
-    }
-    return [...cdnAssets, ...nonCdnAssets].map((asset) => asset.id);
+    const orderedAssets = [...cdnAssets, ...nonCdnAssets];
+    await Promise.all(
+      orderedAssets.map(
+        ({ id, href }) => this.#loadScript({ id, href, documentEle, isESMModule })
+      )
+    );
+    return orderedAssets.map((asset) => asset.id);
   };
   /**
    * Removes a script element from the document by its ID.

package/dist/cjs/tests/serverHandlers.js

@@ -155,14 +155,6 @@ const getServerHandlers = () => {
   return versionedHandlers;
 };
 const serverHandlers = [
-  import_msw.rest.get(
-    "https://www.google-analytics.com/analytics.js",
-    (req, res, ctx) => res(
-      ctx.status(200),
-      ctx.set("Content-Type", "application/javascript"),
-      ctx.body("")
-    )
-  ),
   import_msw.rest.get(
     "/latest/app.config.json",
     (req, res, ctx) => res(ctx.json(import_app_config.default))