@elliemae/pui-app-bridge 2.28.3 → 2.28.5

package/dist/cjs/frame.js

@@ -33,7 +33,36 @@ __export(frame_exports, {
 });
 module.exports = __toCommonJS(frame_exports);
 var import_frame = __toESM(require("./frame.html?resource"), 1);
+var import_utils = require("./utils.js");
 const FRAME_APP_CONTAINER_ID_PREFIX = "pui-app-container-";
+const buildFrameSrc = (options) => {
+  const baseSrc = options.src ?? (import_frame.default.default ?? import_frame.default);
+  if (!options.queryParams) return baseSrc;
+  const sanitized = options.queryParams.replace(/[^a-zA-Z0-9&=_.~%+-]/g, "");
+  return `${baseSrc}${baseSrc.includes("?") ? "&" : "?"}${sanitized}`;
+};
+const appendManifestBaseTag = ({
+  documentEle,
+  hostUrl,
+  manifestPath,
+  guestId
+}) => {
+  const containerEle = documentEle.getElementById(
+    FRAME_APP_CONTAINER_ID_PREFIX
+  );
+  if (containerEle) {
+    containerEle.id = `${containerEle.id}${guestId}`;
+  }
+  const manifestBaseUrl = (0, import_utils.resolveManifestBaseUrl)(hostUrl, manifestPath);
+  let baseTag = documentEle.getElementsByTagName("base")?.[0];
+  if (baseTag) {
+    baseTag.href = manifestBaseUrl;
+    return;
+  }
+  baseTag = documentEle.createElement("base");
+  baseTag.href = manifestBaseUrl;
+  documentEle.getElementsByTagName("head")[0].appendChild(baseTag);
+};
 const create = ({
   id,
   instanceId,
@@ -43,6 +72,11 @@ const create = ({
 }) => (
   // eslint-disable-next-line max-statements
   new Promise((resolve, reject) => {
+    const { signal } = options;
+    if (signal?.aborted) {
+      reject(new DOMException("iframe creation aborted", "AbortError"));
+      return;
+    }
     const iframeContainer = document.createElement("div");
     iframeContainer.setAttribute(
       "style",
@@ -61,21 +95,35 @@ const create = ({
       "style",
       options.style ?? "flex-grow: 1;border: none;margin: 0;padding: 0;display: block;min-width: 100%;height: 100%;"
     );
-    const baseSrc = options.src ?? (import_frame.default.default ?? import_frame.default);
-    let srcWithParams = baseSrc;
-    if (options.queryParams) {
-      const sanitized = options.queryParams.replace(
-        /[^a-zA-Z0-9&=_.~%+-]/g,
-        ""
-      );
-      srcWithParams = `${baseSrc}${baseSrc.includes("?") ? "&" : "?"}${sanitized}`;
-    }
-    frame.setAttribute("src", srcWithParams);
+    frame.setAttribute("src", buildFrameSrc(options));
     const FRAME_LOAD_TIMEOUT_MS = 1e4;
     let settled = false;
-    const timeoutId = setTimeout(() => {
+    let timeoutId;
+    let onAbort;
+    const cleanup = () => {
+      clearTimeout(timeoutId);
+      signal?.removeEventListener("abort", onAbort);
+    };
+    const rejectIfAborted = () => {
+      if (!signal?.aborted) return false;
+      if (!settled) {
+        settled = true;
+        cleanup();
+        iframeContainer.remove();
+        reject(new DOMException("iframe creation aborted", "AbortError"));
+      }
+      return true;
+    };
+    onAbort = () => {
+      rejectIfAborted();
+    };
+    if (rejectIfAborted()) return;
+    signal?.addEventListener("abort", onAbort);
+    timeoutId = setTimeout(() => {
       if (!settled) {
         settled = true;
+        cleanup();
+        iframeContainer.remove();
         reject(
           new Error(
             `iframe for ${id} failed to load within ${FRAME_LOAD_TIMEOUT_MS}ms`
@@ -86,28 +134,22 @@ const create = ({
     frame.addEventListener("error", () => {
       if (!settled) {
         settled = true;
-        clearTimeout(timeoutId);
+        cleanup();
+        iframeContainer.remove();
         reject(new Error(`iframe for ${id} failed to load`));
       }
     });
     frame.addEventListener("load", () => {
-      if (settled) return;
+      if (settled || rejectIfAborted()) return;
       if (!frame.contentDocument) return;
       settled = true;
-      clearTimeout(timeoutId);
-      const documentEle = frame.contentDocument;
-      const ele = documentEle.getElementById(FRAME_APP_CONTAINER_ID_PREFIX);
-      if (ele) {
-        ele.id = `${ele.id}${id}`;
-      }
-      let baseTag = documentEle.getElementsByTagName("base")?.[0];
-      if (baseTag) {
-        baseTag.href = new URL(manifestPath, hostUrl).href;
-      } else {
-        baseTag = documentEle.createElement("base");
-        baseTag.href = new URL(manifestPath, hostUrl).href;
-        documentEle.getElementsByTagName("head")[0].appendChild(baseTag);
-      }
+      cleanup();
+      appendManifestBaseTag({
+        documentEle: frame.contentDocument,
+        hostUrl,
+        manifestPath,
+        guestId: id
+      });
       resolve(frame);
     });
     iframeContainer.appendChild(frame);

package/dist/cjs/loaders/manifest.js

@@ -38,8 +38,7 @@ const get = async ({
   hostUrl,
   manifestPath
 }) => {
-  const url = new URL(`${manifestPath}manifest.json`, hostUrl);
-  const manifestUrl = (0, import_utils.removeDoubleSlash)(url.href);
+  const manifestUrl = (0, import_utils.resolveManifestUrl)(hostUrl, manifestPath);
   const cached = manifestCache.get(manifestUrl);
   if (cached) return cached;
   const fetchManifest = async (fetchUrl) => {
@@ -60,9 +59,7 @@ const get = async ({
   } catch (error) {
     const unVersionedManifestPath = getUnVersionedManifestPath(manifestPath);
     if (manifestPath !== unVersionedManifestPath) {
-      const fallbackUrl = (0, import_utils.removeDoubleSlash)(
-        new URL(`${unVersionedManifestPath}manifest.json`, hostUrl).href
-      );
+      const fallbackUrl = (0, import_utils.resolveManifestUrl)(hostUrl, unVersionedManifestPath);
       return await fetchManifest(fallbackUrl);
     }
     throw error;

package/dist/cjs/loaders/script.js

@@ -23,6 +23,7 @@ __export(script_exports, {
 });
 module.exports = __toCommonJS(script_exports);
 var import_utils = require("../utils.js");
+var import_script_origin = require("../utils/script-origin.js");
 var import_webpack_public_path = require("../utils/webpack-public-path.js");
 const APP_SCRIPT_ID_PREFIX = "ice-script-";
 class ScriptLoader {
@@ -110,39 +111,41 @@ class ScriptLoader {
     documentEle.head.appendChild(ele);
   });
   /**
-   * Appends script elements in document order like inline HTML module tags:
-   * synchronous insert for each batch, parallel fetch, execution in order.
-   * Scripts through global.js are one batch; public path is synced after
-   * global.js loads, then the remaining tags are inserted as a second batch.
-   * @param scripts
+   * Appends script elements in document order and waits for each to load.
+   * @param entries
    * @param documentEle
    * @param isESMModule
-   * @private
    */
-  #loadOrderedModuleScripts = async (scripts, documentEle, isESMModule) => {
-    if (scripts.length === 0) return;
-    const appendScripts = (entries) => entries.map(
+  #loadAndWaitForScripts = async (entries, documentEle, isESMModule) => {
+    if (entries.length === 0) return;
+    const promises = entries.map(
       ({ id, href }) => this.#loadScript({ id, href, documentEle, isESMModule })
     );
-    const globalIndex = scripts.findIndex(
-      ({ href }) => import_webpack_public_path.GLOBAL_SCRIPT_PATTERN.test(href)
-    );
-    if (globalIndex === -1) {
-      await Promise.all(appendScripts(scripts));
+    await Promise.all(promises);
+  };
+  /**
+   * Stages external scripts before local guest-host scripts.
+   * @param root0
+   * @param root0.scripts
+   * @param root0.documentEle
+   * @param root0.isESMModule
+   * @param root0.hostUrl
+   */
+  #loadOrderedModuleScripts = async ({
+    scripts,
+    documentEle,
+    isESMModule,
+    hostUrl
+  }) => {
+    if (scripts.length === 0) return;
+    if (!hostUrl) {
+      await this.#loadAndWaitForScripts(scripts, documentEle, isESMModule);
       return;
     }
-    const throughGlobal = scripts.slice(0, globalIndex + 1);
-    const afterGlobal = scripts.slice(globalIndex + 1);
-    const throughGlobalPromises = appendScripts(throughGlobal);
-    await throughGlobalPromises[throughGlobalPromises.length - 1];
-    (0, import_webpack_public_path.syncWebpackPublicPathFromAssetPath)(documentEle.defaultView);
-    const pendingPromises = [
-      ...throughGlobalPromises.slice(0, -1),
-      ...appendScripts(afterGlobal)
-    ];
-    if (pendingPromises.length > 0) {
-      await Promise.all(pendingPromises);
-    }
+    const { external, local } = (0, import_script_origin.partitionScriptsByOrigin)(scripts, hostUrl);
+    await this.#loadAndWaitForScripts(external, documentEle, isESMModule);
+    (0, import_webpack_public_path.syncWebpackPublicPath)(documentEle.defaultView, hostUrl);
+    await this.#loadAndWaitForScripts(local, documentEle, isESMModule);
   };
   /**
    * Loads multiple script assets in manifest order, like HTML module script tags.
@@ -155,18 +158,18 @@ class ScriptLoader {
    * @returns A promise that resolves with an array of script element IDs when all scripts are loaded
    * @remarks
    * This method:
-   * - Preserves manifest order (CDN and local scripts stay in their original sequence)
+   * - Stages external (CDN) scripts before local guest-host scripts
+   * - Preserves manifest order within each origin group
    * - Creates modulepreload links for all assets for performance optimization
-   * - Inserts script tags synchronously in batches so the browser can fetch in parallel
-   * - Relies on module script execution order (document order) within each batch
-   * - Waits for global.js before inserting dependent bundles, then syncs webpack public path
+   * - Inserts script tags synchronously per stage so the browser can fetch in parallel
+   * - Syncs webpack public path from hostUrl (or guest _ASSET_PATH) before local scripts run
    * @example
    * ```typescript
    * const scriptIds = await scriptLoader.load(
    *   ['https://cdn.example.com/lib.js', 'global.js', 'runtime~app.js'],
    *   {
    *     name: 'myApp',
-   *     hostUrl: 'https://example.com',
+   *     hostUrl: 'https://example.com/my-app/',
    *     documentEle: document,
    *     isESMModule: true
    *   }
@@ -182,12 +185,13 @@ class ScriptLoader {
       this.#preLoadScript({ href, documentEle, isESMModule });
       return { id, href };
     });
-    await this.#loadOrderedModuleScripts(
-      orderedScripts,
+    await this.#loadOrderedModuleScripts({
+      scripts: orderedScripts,
       documentEle,
-      isESMModule
-    );
-    (0, import_webpack_public_path.syncWebpackPublicPathFromAssetPath)(documentEle.defaultView);
+      isESMModule,
+      hostUrl: options.hostUrl
+    });
+    (0, import_webpack_public_path.syncWebpackPublicPath)(documentEle.defaultView, options.hostUrl);
     return orderedScripts.map((asset) => asset.id);
   };
   /**

package/dist/cjs/utils/script-origin.js

@@ -0,0 +1,45 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var script_origin_exports = {};
+__export(script_origin_exports, {
+  isExternalScriptHref: () => isExternalScriptHref,
+  partitionScriptsByOrigin: () => partitionScriptsByOrigin
+});
+module.exports = __toCommonJS(script_origin_exports);
+const HTTP_PATTERN = /^https?:\/\//i;
+const isExternalScriptHref = (href, hostUrl) => {
+  if (!HTTP_PATTERN.test(href)) return false;
+  try {
+    return !href.startsWith(new URL(hostUrl).href);
+  } catch {
+    return true;
+  }
+};
+const partitionScriptsByOrigin = (scripts, hostUrl) => {
+  const external = [];
+  const local = [];
+  scripts.forEach((script) => {
+    if (isExternalScriptHref(script.href, hostUrl)) {
+      external.push(script);
+    } else {
+      local.push(script);
+    }
+  });
+  return { external, local };
+};

package/dist/cjs/utils/webpack-public-path.js

@@ -18,8 +18,9 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var webpack_public_path_exports = {};
 __export(webpack_public_path_exports, {
-  GLOBAL_SCRIPT_PATTERN: () => GLOBAL_SCRIPT_PATTERN,
-  syncWebpackPublicPathFromAssetPath: () => syncWebpackPublicPathFromAssetPath
+  syncWebpackPublicPath: () => syncWebpackPublicPath,
+  syncWebpackPublicPathFromAssetPath: () => syncWebpackPublicPathFromAssetPath,
+  syncWebpackPublicPathFromHost: () => syncWebpackPublicPathFromHost
 });
 module.exports = __toCommonJS(webpack_public_path_exports);
 const syncWebpackPublicPathFromAssetPath = (targetWindow) => {
@@ -29,4 +30,20 @@ const syncWebpackPublicPathFromAssetPath = (targetWindow) => {
   if (!assetPath) return;
   win.__webpack_public_path__ = new URL("../", assetPath).href;
 };
-const GLOBAL_SCRIPT_PATTERN = /\/global(?:-prod)?\.js(?:\?|#|$)/i;
+const syncWebpackPublicPathFromHost = (targetWindow, hostUrl) => {
+  if (!targetWindow || !hostUrl) return;
+  try {
+    const win = targetWindow;
+    win.__webpack_public_path__ = new URL("./", hostUrl).href;
+  } catch {
+  }
+};
+const syncWebpackPublicPath = (targetWindow, hostUrl) => {
+  if (!targetWindow) return;
+  const win = targetWindow;
+  if (win.emui?._ASSET_PATH) {
+    syncWebpackPublicPathFromAssetPath(targetWindow);
+    return;
+  }
+  syncWebpackPublicPathFromHost(targetWindow, hostUrl);
+};

package/dist/cjs/utils.js

@@ -23,7 +23,9 @@ __export(utils_exports, {
   escapeRegExp: () => escapeRegExp,
   getAbsoluteUrl: () => getAbsoluteUrl,
   isJSDOM: () => isJSDOM,
-  removeDoubleSlash: () => removeDoubleSlash
+  removeDoubleSlash: () => removeDoubleSlash,
+  resolveManifestBaseUrl: () => resolveManifestBaseUrl,
+  resolveManifestUrl: () => resolveManifestUrl
 });
 module.exports = __toCommonJS(utils_exports);
 const removeDoubleSlash = (url) => url.replace(/([^:]\/)\/+/g, "$1");
@@ -34,5 +36,19 @@ const getAbsoluteUrl = (url) => {
 };
 const appendTrailingSlash = (url) => url?.replace?.(/\/?$/, "/");
 const appendPath = (base, path) => `${base.replace(/\/+$/, "")}/${path.replace(/^\/+/, "")}`;
+const isAbsoluteManifestPath = (manifestPath) => /^(\/|https?:\/\/)/.test(manifestPath);
+const resolveManifestBaseUrl = (hostUrl, manifestPath) => {
+  const normalizedPath = appendTrailingSlash(manifestPath);
+  if (isAbsoluteManifestPath(normalizedPath)) {
+    const { origin } = new URL(hostUrl, window.location.href);
+    return removeDoubleSlash(new URL(normalizedPath, origin).href);
+  }
+  return removeDoubleSlash(
+    new URL(normalizedPath, appendTrailingSlash(hostUrl)).href
+  );
+};
+const resolveManifestUrl = (hostUrl, manifestPath) => removeDoubleSlash(
+  new URL("manifest.json", resolveManifestBaseUrl(hostUrl, manifestPath)).href
+);
 const isJSDOM = () => window.navigator.userAgent.includes("jsdom");
 const escapeRegExp = (str) => str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");

package/dist/esm/frame.js

@@ -1,5 +1,34 @@
 import frameHtml from "./frame.html?resource";
+import { resolveManifestBaseUrl } from "./utils.js";
 const FRAME_APP_CONTAINER_ID_PREFIX = "pui-app-container-";
+const buildFrameSrc = (options) => {
+  const baseSrc = options.src ?? (frameHtml.default ?? frameHtml);
+  if (!options.queryParams) return baseSrc;
+  const sanitized = options.queryParams.replace(/[^a-zA-Z0-9&=_.~%+-]/g, "");
+  return `${baseSrc}${baseSrc.includes("?") ? "&" : "?"}${sanitized}`;
+};
+const appendManifestBaseTag = ({
+  documentEle,
+  hostUrl,
+  manifestPath,
+  guestId
+}) => {
+  const containerEle = documentEle.getElementById(
+    FRAME_APP_CONTAINER_ID_PREFIX
+  );
+  if (containerEle) {
+    containerEle.id = `${containerEle.id}${guestId}`;
+  }
+  const manifestBaseUrl = resolveManifestBaseUrl(hostUrl, manifestPath);
+  let baseTag = documentEle.getElementsByTagName("base")?.[0];
+  if (baseTag) {
+    baseTag.href = manifestBaseUrl;
+    return;
+  }
+  baseTag = documentEle.createElement("base");
+  baseTag.href = manifestBaseUrl;
+  documentEle.getElementsByTagName("head")[0].appendChild(baseTag);
+};
 const create = ({
   id,
   instanceId,
@@ -9,6 +38,11 @@ const create = ({
 }) => (
   // eslint-disable-next-line max-statements
   new Promise((resolve, reject) => {
+    const { signal } = options;
+    if (signal?.aborted) {
+      reject(new DOMException("iframe creation aborted", "AbortError"));
+      return;
+    }
     const iframeContainer = document.createElement("div");
     iframeContainer.setAttribute(
       "style",
@@ -27,21 +61,35 @@ const create = ({
       "style",
       options.style ?? "flex-grow: 1;border: none;margin: 0;padding: 0;display: block;min-width: 100%;height: 100%;"
     );
-    const baseSrc = options.src ?? (frameHtml.default ?? frameHtml);
-    let srcWithParams = baseSrc;
-    if (options.queryParams) {
-      const sanitized = options.queryParams.replace(
-        /[^a-zA-Z0-9&=_.~%+-]/g,
-        ""
-      );
-      srcWithParams = `${baseSrc}${baseSrc.includes("?") ? "&" : "?"}${sanitized}`;
-    }
-    frame.setAttribute("src", srcWithParams);
+    frame.setAttribute("src", buildFrameSrc(options));
     const FRAME_LOAD_TIMEOUT_MS = 1e4;
     let settled = false;
-    const timeoutId = setTimeout(() => {
+    let timeoutId;
+    let onAbort;
+    const cleanup = () => {
+      clearTimeout(timeoutId);
+      signal?.removeEventListener("abort", onAbort);
+    };
+    const rejectIfAborted = () => {
+      if (!signal?.aborted) return false;
+      if (!settled) {
+        settled = true;
+        cleanup();
+        iframeContainer.remove();
+        reject(new DOMException("iframe creation aborted", "AbortError"));
+      }
+      return true;
+    };
+    onAbort = () => {
+      rejectIfAborted();
+    };
+    if (rejectIfAborted()) return;
+    signal?.addEventListener("abort", onAbort);
+    timeoutId = setTimeout(() => {
       if (!settled) {
         settled = true;
+        cleanup();
+        iframeContainer.remove();
         reject(
           new Error(
             `iframe for ${id} failed to load within ${FRAME_LOAD_TIMEOUT_MS}ms`
@@ -52,28 +100,22 @@ const create = ({
     frame.addEventListener("error", () => {
       if (!settled) {
         settled = true;
-        clearTimeout(timeoutId);
+        cleanup();
+        iframeContainer.remove();
         reject(new Error(`iframe for ${id} failed to load`));
       }
     });
     frame.addEventListener("load", () => {
-      if (settled) return;
+      if (settled || rejectIfAborted()) return;
       if (!frame.contentDocument) return;
       settled = true;
-      clearTimeout(timeoutId);
-      const documentEle = frame.contentDocument;
-      const ele = documentEle.getElementById(FRAME_APP_CONTAINER_ID_PREFIX);
-      if (ele) {
-        ele.id = `${ele.id}${id}`;
-      }
-      let baseTag = documentEle.getElementsByTagName("base")?.[0];
-      if (baseTag) {
-        baseTag.href = new URL(manifestPath, hostUrl).href;
-      } else {
-        baseTag = documentEle.createElement("base");
-        baseTag.href = new URL(manifestPath, hostUrl).href;
-        documentEle.getElementsByTagName("head")[0].appendChild(baseTag);
-      }
+      cleanup();
+      appendManifestBaseTag({
+        documentEle: frame.contentDocument,
+        hostUrl,
+        manifestPath,
+        guestId: id
+      });
       resolve(frame);
     });
     iframeContainer.appendChild(frame);

package/dist/esm/loaders/manifest.js

@@ -1,4 +1,4 @@
-import { removeDoubleSlash } from "../utils.js";
+import { resolveManifestUrl } from "../utils.js";
 const getUnVersionedManifestPath = (path) => path.replace(/\/\d+\.\d+/, "/latest");
 const isValidHttpUrl = (fileName) => {
   let url;
@@ -15,8 +15,7 @@ const get = async ({
   hostUrl,
   manifestPath
 }) => {
-  const url = new URL(`${manifestPath}manifest.json`, hostUrl);
-  const manifestUrl = removeDoubleSlash(url.href);
+  const manifestUrl = resolveManifestUrl(hostUrl, manifestPath);
   const cached = manifestCache.get(manifestUrl);
   if (cached) return cached;
   const fetchManifest = async (fetchUrl) => {
@@ -37,9 +36,7 @@ const get = async ({
   } catch (error) {
     const unVersionedManifestPath = getUnVersionedManifestPath(manifestPath);
     if (manifestPath !== unVersionedManifestPath) {
-      const fallbackUrl = removeDoubleSlash(
-        new URL(`${unVersionedManifestPath}manifest.json`, hostUrl).href
-      );
+      const fallbackUrl = resolveManifestUrl(hostUrl, unVersionedManifestPath);
       return await fetchManifest(fallbackUrl);
     }
     throw error;

package/dist/esm/loaders/script.js

@@ -1,8 +1,6 @@
 import { removeDoubleSlash, isJSDOM, escapeRegExp } from "../utils.js";
-import {
-  GLOBAL_SCRIPT_PATTERN,
-  syncWebpackPublicPathFromAssetPath
-} from "../utils/webpack-public-path.js";
+import { partitionScriptsByOrigin } from "../utils/script-origin.js";
+import { syncWebpackPublicPath } from "../utils/webpack-public-path.js";
 const APP_SCRIPT_ID_PREFIX = "ice-script-";
 class ScriptLoader {
   #logger;
@@ -89,39 +87,41 @@ class ScriptLoader {
     documentEle.head.appendChild(ele);
   });
   /**
-   * Appends script elements in document order like inline HTML module tags:
-   * synchronous insert for each batch, parallel fetch, execution in order.
-   * Scripts through global.js are one batch; public path is synced after
-   * global.js loads, then the remaining tags are inserted as a second batch.
-   * @param scripts
+   * Appends script elements in document order and waits for each to load.
+   * @param entries
    * @param documentEle
    * @param isESMModule
-   * @private
    */
-  #loadOrderedModuleScripts = async (scripts, documentEle, isESMModule) => {
-    if (scripts.length === 0) return;
-    const appendScripts = (entries) => entries.map(
+  #loadAndWaitForScripts = async (entries, documentEle, isESMModule) => {
+    if (entries.length === 0) return;
+    const promises = entries.map(
       ({ id, href }) => this.#loadScript({ id, href, documentEle, isESMModule })
     );
-    const globalIndex = scripts.findIndex(
-      ({ href }) => GLOBAL_SCRIPT_PATTERN.test(href)
-    );
-    if (globalIndex === -1) {
-      await Promise.all(appendScripts(scripts));
+    await Promise.all(promises);
+  };
+  /**
+   * Stages external scripts before local guest-host scripts.
+   * @param root0
+   * @param root0.scripts
+   * @param root0.documentEle
+   * @param root0.isESMModule
+   * @param root0.hostUrl
+   */
+  #loadOrderedModuleScripts = async ({
+    scripts,
+    documentEle,
+    isESMModule,
+    hostUrl
+  }) => {
+    if (scripts.length === 0) return;
+    if (!hostUrl) {
+      await this.#loadAndWaitForScripts(scripts, documentEle, isESMModule);
       return;
     }
-    const throughGlobal = scripts.slice(0, globalIndex + 1);
-    const afterGlobal = scripts.slice(globalIndex + 1);
-    const throughGlobalPromises = appendScripts(throughGlobal);
-    await throughGlobalPromises[throughGlobalPromises.length - 1];
-    syncWebpackPublicPathFromAssetPath(documentEle.defaultView);
-    const pendingPromises = [
-      ...throughGlobalPromises.slice(0, -1),
-      ...appendScripts(afterGlobal)
-    ];
-    if (pendingPromises.length > 0) {
-      await Promise.all(pendingPromises);
-    }
+    const { external, local } = partitionScriptsByOrigin(scripts, hostUrl);
+    await this.#loadAndWaitForScripts(external, documentEle, isESMModule);
+    syncWebpackPublicPath(documentEle.defaultView, hostUrl);
+    await this.#loadAndWaitForScripts(local, documentEle, isESMModule);
   };
   /**
    * Loads multiple script assets in manifest order, like HTML module script tags.
@@ -134,18 +134,18 @@ class ScriptLoader {
    * @returns A promise that resolves with an array of script element IDs when all scripts are loaded
    * @remarks
    * This method:
-   * - Preserves manifest order (CDN and local scripts stay in their original sequence)
+   * - Stages external (CDN) scripts before local guest-host scripts
+   * - Preserves manifest order within each origin group
    * - Creates modulepreload links for all assets for performance optimization
-   * - Inserts script tags synchronously in batches so the browser can fetch in parallel
-   * - Relies on module script execution order (document order) within each batch
-   * - Waits for global.js before inserting dependent bundles, then syncs webpack public path
+   * - Inserts script tags synchronously per stage so the browser can fetch in parallel
+   * - Syncs webpack public path from hostUrl (or guest _ASSET_PATH) before local scripts run
    * @example
    * ```typescript
    * const scriptIds = await scriptLoader.load(
    *   ['https://cdn.example.com/lib.js', 'global.js', 'runtime~app.js'],
    *   {
    *     name: 'myApp',
-   *     hostUrl: 'https://example.com',
+   *     hostUrl: 'https://example.com/my-app/',
    *     documentEle: document,
    *     isESMModule: true
    *   }
@@ -161,12 +161,13 @@ class ScriptLoader {
       this.#preLoadScript({ href, documentEle, isESMModule });
       return { id, href };
     });
-    await this.#loadOrderedModuleScripts(
-      orderedScripts,
+    await this.#loadOrderedModuleScripts({
+      scripts: orderedScripts,
       documentEle,
-      isESMModule
-    );
-    syncWebpackPublicPathFromAssetPath(documentEle.defaultView);
+      isESMModule,
+      hostUrl: options.hostUrl
+    });
+    syncWebpackPublicPath(documentEle.defaultView, options.hostUrl);
     return orderedScripts.map((asset) => asset.id);
   };
   /**