remote-components 0.3.4 → 0.3.5

package/dist/host/html.cjs

@@ -386,194 +386,6 @@ var init_remote_scope = __esm({
   }
 });
 
-// src/config/webpack/apply-shared-modules.ts
-function applySharedModules(bundle, resolve) {
-  logDebug(
-    "SharedModules",
-    `applySharedModules called for bundle: "${bundle}"`
-  );
-  logDebug(
-    "SharedModules",
-    `Shared modules to resolve: ${Object.keys(resolve)}`
-  );
-  const self = globalThis;
-  const scope = getScope(bundle);
-  const webpackBundle = scope?.webpackRequire ?? self.__remote_webpack_require__?.[bundle];
-  if (webpackBundle) {
-    const modulePaths = Object.keys(
-      self.__remote_webpack_module_map__?.[bundle] ?? webpackBundle.m ?? {}
-    );
-    logDebug(
-      "SharedModules",
-      `Available module paths for bundle "${bundle}": ${modulePaths}`
-    );
-    for (const [key, value] of Object.entries(resolve)) {
-      const exactIds = modulePaths.filter((p) => p === key);
-      const ids = exactIds.length > 0 ? exactIds : modulePaths.filter((p) => p.includes(key));
-      if (ids.length === 0) {
-        logDebug(
-          "SharedModules",
-          `No matching module path found for shared module "${key}"`
-        );
-      }
-      for (const id of ids) {
-        if (webpackBundle.m) {
-          const resolvedId = self.__remote_webpack_module_map__?.[bundle]?.[id] ? `${self.__remote_webpack_module_map__[bundle][id]}` : id;
-          if (resolvedId !== id) {
-            logDebug(
-              "SharedModules",
-              `Mapped module id: "${id}" -> "${resolvedId}"`
-            );
-          }
-          webpackBundle.m[resolvedId] = (module2) => {
-            module2.exports = value;
-          };
-        } else {
-          logWarn(
-            "SharedModules",
-            `webpackBundle.m is not available for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
-          );
-        }
-      }
-    }
-  } else {
-    logWarn(
-      "SharedModules",
-      `No webpack require found for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
-    );
-    logDebug(
-      "SharedModules",
-      `Available bundles: ${Object.keys(self.__remote_webpack_require__ ?? {})}`
-    );
-  }
-}
-var DEDUPLICATION_SKIPPED;
-var init_apply_shared_modules = __esm({
-  "src/config/webpack/apply-shared-modules.ts"() {
-    "use strict";
-    init_remote_scope();
-    init_logger();
-    DEDUPLICATION_SKIPPED = "shared module deduplication skipped. The remote may load its own copy of shared dependencies.";
-  }
-});
-
-// src/config/webpack/next-client-pages-loader.ts
-function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
-  const self = globalThis;
-  const nextCssOriginal = document.querySelector(
-    `[id="__next_css__DO_NOT_USE__"]:not([data-bundle="${bundle}"][data-route="${route}"])`
-  );
-  if (nextCssOriginal) {
-    nextCssOriginal.parentNode?.removeChild(nextCssOriginal);
-  }
-  const nextCss = document.createElement("noscript");
-  nextCss.id = "__next_css__DO_NOT_USE__";
-  nextCss.setAttribute("data-bundle", bundle);
-  nextCss.setAttribute("data-route", route);
-  const nextCssEnd = document.createElement("noscript");
-  nextCssEnd.id = "__next_css__DO_NOT_USE_END__";
-  nextCssEnd.setAttribute("data-bundle", bundle);
-  nextCssEnd.setAttribute("data-route", route);
-  document.head.appendChild(nextCssEnd);
-  document.head.appendChild(nextCss);
-  const componentLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
-    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
-  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
-    (key) => key.includes("/next/dist/client/page-loader.js")
-  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
-    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
-  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
-    (key) => key.includes("/next/dist/client/page-loader.js")
-  ) ?? ""] ?? -1;
-  const appLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
-    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
-  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
-    (key) => key.includes("/next/dist/client/page-loader.js")
-  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
-    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
-  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
-    (key) => key.includes("/next/dist/client/page-loader.js")
-  ) ?? ""] ?? -1;
-  if (!(componentLoaderChunk && appLoaderChunk)) {
-    throw new RemoteComponentsError(
-      `Next.js client pages loader not found in bundle "${bundle}".`
-    );
-  }
-  const __NEXT_P_ORIGINAL = self.__NEXT_P;
-  const selfOriginal = self;
-  delete selfOriginal.__NEXT_P;
-  self.__remote_webpack_require__?.[bundle]?.(
-    self.__remote_webpack_require__[bundle].type !== "turbopack" ? componentLoaderChunk : `[${bundle}] ${componentLoaderChunk}`
-  );
-  if (typeof appLoaderChunk === "string" || typeof appLoaderChunk === "number" && appLoaderChunk !== -1) {
-    self.__remote_webpack_require__?.[bundle]?.(
-      self.__remote_webpack_require__[bundle].type !== "turbopack" ? appLoaderChunk : `[${bundle}] ${appLoaderChunk}`
-    );
-  }
-  if (self.__NEXT_P) {
-    const [, componentLoader] = self.__NEXT_P[0] ?? [
-      void 0,
-      () => ({ default: null })
-    ];
-    const [, appLoader] = self.__NEXT_P[2] ?? [
-      void 0,
-      () => ({
-        default: null
-      })
-    ];
-    const { default: Component } = componentLoader();
-    const { default: App } = appLoader();
-    const cssCache = getNamespace().cssCache;
-    if (!cssCache[bundle]) {
-      const cssRE = /\.s?css$/;
-      Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).filter((id) => cssRE.test(id)).forEach((id) => {
-        self.__remote_webpack_require__?.[bundle]?.(id);
-      });
-      Object.keys(self.__remote_webpack_module_map__?.[bundle] ?? {}).filter((path) => cssRE.test(path)).forEach((path) => {
-        const id = self.__remote_webpack_module_map__?.[bundle]?.[path];
-        if (id) {
-          self.__remote_webpack_require__?.[bundle]?.(id);
-        }
-      });
-      const elements = [];
-      let node = nextCss.previousSibling;
-      while (node && node !== nextCssEnd) {
-        elements.push(node);
-        node.remove();
-        node = nextCss.previousSibling;
-      }
-      cssCache[bundle] = elements;
-    }
-    if (styleContainer) {
-      const elements = cssCache[bundle];
-      elements.forEach((el) => {
-        styleContainer.appendChild(el.cloneNode(true));
-      });
-    } else {
-      const elements = cssCache[bundle];
-      elements.forEach((el) => {
-        document.head.appendChild(el);
-      });
-    }
-    delete self.__NEXT_P;
-    self.__NEXT_P = __NEXT_P_ORIGINAL;
-    if (nextCssOriginal) {
-      nextCssOriginal.parentNode?.appendChild(nextCssOriginal);
-    }
-    nextCss.remove();
-    nextCssEnd.remove();
-    return { Component, App };
-  }
-  return { Component: null, App: null };
-}
-var init_next_client_pages_loader = __esm({
-  "src/config/webpack/next-client-pages-loader.ts"() {
-    "use strict";
-    init_namespace();
-    init_error();
-  }
-});
-
 // src/host/shared/remote-image-loader.ts
 function createRemoteImageLoader(bundle, resolveClientUrl) {
   const loader = Object.assign(
@@ -825,137 +637,190 @@ var init_shared_module_resolver = __esm({
   }
 });
 
-// src/runtime/loaders/script-loader.ts
-async function loadScripts(scripts, resolveClientUrl) {
-  await Promise.all(
-    scripts.map((script) => {
-      return new Promise((resolve, reject) => {
-        const newSrc = new URL(
-          // remove the remote component bundle name identifier from the script src
-          script.src.replace(NEXT_BUNDLE_PATH_RE, "/_next/"),
-          location.origin
-        ).href;
-        const resolvedSrc = resolveClientUrl?.(newSrc) ?? newSrc;
-        const alreadyLoaded = Array.from(
-          document.querySelectorAll("script[src]")
-        ).some((s) => s.src === resolvedSrc);
-        if (alreadyLoaded) {
-          resolve();
-          return;
-        }
-        const newScript = document.createElement("script");
-        newScript.onload = () => resolve();
-        newScript.onerror = () => {
-          const isProxied = isProxiedUrl(resolvedSrc);
-          if (isProxied) {
-            reject(failedProxiedAssetError("script", newSrc, resolvedSrc));
-          } else {
-            warnCrossOriginFetchError("ScriptLoader", newSrc);
-            reject(
-              new RemoteComponentsError(
-                `Failed to load <script src="${newSrc}"> for Remote Component. Check the URL is correct.`
-              )
+// src/config/webpack/apply-shared-modules.ts
+function applySharedModules(bundle, resolve) {
+  logDebug(
+    "SharedModules",
+    `applySharedModules called for bundle: "${bundle}"`
+  );
+  logDebug(
+    "SharedModules",
+    `Shared modules to resolve: ${Object.keys(resolve)}`
+  );
+  const self = globalThis;
+  const scope = getScope(bundle);
+  const webpackBundle = scope?.webpackRequire ?? self.__remote_webpack_require__?.[bundle];
+  if (webpackBundle) {
+    const modulePaths = Object.keys(
+      self.__remote_webpack_module_map__?.[bundle] ?? webpackBundle.m ?? {}
+    );
+    logDebug(
+      "SharedModules",
+      `Available module paths for bundle "${bundle}": ${modulePaths}`
+    );
+    for (const [key, value] of Object.entries(resolve)) {
+      const exactIds = modulePaths.filter((p) => p === key);
+      const ids = exactIds.length > 0 ? exactIds : modulePaths.filter((p) => p.includes(key));
+      if (ids.length === 0) {
+        logDebug(
+          "SharedModules",
+          `No matching module path found for shared module "${key}"`
+        );
+      }
+      for (const id of ids) {
+        if (webpackBundle.m) {
+          const resolvedId = self.__remote_webpack_module_map__?.[bundle]?.[id] ? `${self.__remote_webpack_module_map__[bundle][id]}` : id;
+          if (resolvedId !== id) {
+            logDebug(
+              "SharedModules",
+              `Mapped module id: "${id}" -> "${resolvedId}"`
             );
           }
-        };
-        newScript.src = resolvedSrc;
-        newScript.async = true;
-        document.head.appendChild(newScript);
-      });
-    })
-  );
+          webpackBundle.m[resolvedId] = (module2) => {
+            module2.exports = value;
+          };
+        } else {
+          logWarn(
+            "SharedModules",
+            `webpackBundle.m is not available for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
+          );
+        }
+      }
+    }
+  } else {
+    logWarn(
+      "SharedModules",
+      `No webpack require found for bundle "${bundle}" \u2014 ${DEDUPLICATION_SKIPPED}`
+    );
+    logDebug(
+      "SharedModules",
+      `Available bundles: ${Object.keys(self.__remote_webpack_require__ ?? {})}`
+    );
+  }
 }
-var init_script_loader = __esm({
-  "src/runtime/loaders/script-loader.ts"() {
+var DEDUPLICATION_SKIPPED;
+var init_apply_shared_modules = __esm({
+  "src/config/webpack/apply-shared-modules.ts"() {
     "use strict";
-    init_patterns();
-    init_protected_rc_fallback();
-    init_error();
+    init_remote_scope();
     init_logger();
+    DEDUPLICATION_SKIPPED = "shared module deduplication skipped. The remote may load its own copy of shared dependencies.";
   }
 });
 
-// src/host/html/runtime/webpack.ts
-var webpack_exports = {};
-__export(webpack_exports, {
-  webpackRuntime: () => webpackRuntime
-});
-async function webpackRuntime(bundle, shared, remoteShared, resolveClientUrl) {
+// src/config/webpack/next-client-pages-loader.ts
+function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
   const self = globalThis;
-  if (!self.__DISABLE_WEBPACK_EXEC__) {
-    self.__DISABLE_WEBPACK_EXEC__ = {};
+  const nextCssOriginal = document.querySelector(
+    `[id="__next_css__DO_NOT_USE__"]:not([data-bundle="${bundle}"][data-route="${route}"])`
+  );
+  if (nextCssOriginal) {
+    nextCssOriginal.parentNode?.removeChild(nextCssOriginal);
   }
-  self.__DISABLE_WEBPACK_EXEC__[bundle] = true;
-  if (typeof self.__webpack_require__ !== "function" && self.__webpack_require_type__ !== "turbopack") {
-    self.__webpack_require__ = (remoteId) => {
-      const re = /\[(?<bundle>[^\]]+)\] (?<id>.*)/;
-      const match = re.exec(remoteId);
-      const remoteBundle = match?.groups?.bundle;
-      const id = match?.groups?.id;
-      if (!(id && remoteBundle)) {
-        throw new RemoteComponentsError(
-          `Remote Component module "${remoteId}" not found. Did you forget to wrap the Next.js config with \`withRemoteComponentsConfig\` on both host and remote?`
-        );
-      }
-      if (typeof self.__remote_webpack_require__?.[remoteBundle] !== "function") {
-        throw new RemoteComponentsError(
-          `Remote Components are not available in "${remoteBundle}". Did you forget to wrap the Next.js config with \`withRemoteComponentsConfig\` on both host and remote?`
-        );
-      }
-      return self.__remote_webpack_require__[remoteBundle](id);
-    };
-    self.__webpack_chunk_load__ = () => {
-      return Promise.resolve([]);
-    };
+  const nextCss = document.createElement("noscript");
+  nextCss.id = "__next_css__DO_NOT_USE__";
+  nextCss.setAttribute("data-bundle", bundle);
+  nextCss.setAttribute("data-route", route);
+  const nextCssEnd = document.createElement("noscript");
+  nextCssEnd.id = "__next_css__DO_NOT_USE_END__";
+  nextCssEnd.setAttribute("data-bundle", bundle);
+  nextCssEnd.setAttribute("data-route", route);
+  document.head.appendChild(nextCssEnd);
+  document.head.appendChild(nextCss);
+  const componentLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
+  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
+  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? ""] ?? -1;
+  const appLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
+  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
+  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? ""] ?? -1;
+  if (!(componentLoaderChunk && appLoaderChunk)) {
+    throw new RemoteComponentsError(
+      `Next.js client pages loader not found in bundle "${bundle}".`
+    );
   }
-  const {
-    default: { createFromReadableStream }
-  } = await import("react-server-dom-webpack/client.browser");
-  async function preloadScripts(scripts, url, remoteBundle, _) {
-    const scriptSrcs = scripts.flatMap((script) => {
-      const scriptSrc = script.getAttribute("src") || script.getAttribute("data-src");
-      script.parentElement?.removeChild(script);
-      if (!scriptSrc)
-        return [];
-      return [
-        {
-          src: new URL(scriptSrc.replace(NEXT_BUNDLE_PATH_RE, "/_next/"), url).href
-        }
-      ];
-    });
-    await loadScripts(scriptSrcs, resolveClientUrl);
-    const hostShared = buildHostShared(shared, resolveClientUrl);
-    const resolve = await buildWebpackResolve(
-      hostShared,
-      remoteShared ?? {},
-      remoteBundle,
-      {
-        "/react/index.js": (await import("react")).default,
-        "/react/jsx-dev-runtime.js": (await import("react/jsx-dev-runtime")).default,
-        "/react/jsx-runtime.js": (await import("react/jsx-runtime")).default,
-        "/react-dom/index.js": (await import("react-dom")).default,
-        "/react-dom/client.js": (await import("react-dom/client")).default
-      },
-      "WebpackRuntime"
+  const __NEXT_P_ORIGINAL = self.__NEXT_P;
+  const selfOriginal = self;
+  delete selfOriginal.__NEXT_P;
+  self.__remote_webpack_require__?.[bundle]?.(
+    self.__remote_webpack_require__[bundle].type !== "turbopack" ? componentLoaderChunk : `[${bundle}] ${componentLoaderChunk}`
+  );
+  if (typeof appLoaderChunk === "string" || typeof appLoaderChunk === "number" && appLoaderChunk !== -1) {
+    self.__remote_webpack_require__?.[bundle]?.(
+      self.__remote_webpack_require__[bundle].type !== "turbopack" ? appLoaderChunk : `[${bundle}] ${appLoaderChunk}`
     );
-    applySharedModules(remoteBundle, resolve);
   }
-  return {
-    self,
-    createFromReadableStream,
-    applySharedModules,
-    nextClientPagesLoader,
-    preloadScripts
-  };
+  if (self.__NEXT_P) {
+    const [, componentLoader] = self.__NEXT_P[0] ?? [
+      void 0,
+      () => ({ default: null })
+    ];
+    const [, appLoader] = self.__NEXT_P[2] ?? [
+      void 0,
+      () => ({
+        default: null
+      })
+    ];
+    const { default: Component } = componentLoader();
+    const { default: App } = appLoader();
+    const cssCache = getNamespace().cssCache;
+    if (!cssCache[bundle]) {
+      const cssRE = /\.s?css$/;
+      Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).filter((id) => cssRE.test(id)).forEach((id) => {
+        self.__remote_webpack_require__?.[bundle]?.(id);
+      });
+      Object.keys(self.__remote_webpack_module_map__?.[bundle] ?? {}).filter((path) => cssRE.test(path)).forEach((path) => {
+        const id = self.__remote_webpack_module_map__?.[bundle]?.[path];
+        if (id) {
+          self.__remote_webpack_require__?.[bundle]?.(id);
+        }
+      });
+      const elements = [];
+      let node = nextCss.previousSibling;
+      while (node && node !== nextCssEnd) {
+        elements.push(node);
+        node.remove();
+        node = nextCss.previousSibling;
+      }
+      cssCache[bundle] = elements;
+    }
+    if (styleContainer) {
+      const elements = cssCache[bundle];
+      elements.forEach((el) => {
+        styleContainer.appendChild(el.cloneNode(true));
+      });
+    } else {
+      const elements = cssCache[bundle];
+      elements.forEach((el) => {
+        document.head.appendChild(el);
+      });
+    }
+    delete self.__NEXT_P;
+    self.__NEXT_P = __NEXT_P_ORIGINAL;
+    if (nextCssOriginal) {
+      nextCssOriginal.parentNode?.appendChild(nextCssOriginal);
+    }
+    nextCss.remove();
+    nextCssEnd.remove();
+    return { Component, App };
+  }
+  return { Component: null, App: null };
 }
-var init_webpack = __esm({
-  "src/host/html/runtime/webpack.ts"() {
+var init_next_client_pages_loader = __esm({
+  "src/config/webpack/next-client-pages-loader.ts"() {
     "use strict";
-    init_apply_shared_modules();
-    init_next_client_pages_loader();
-    init_shared_module_resolver();
-    init_script_loader();
-    init_patterns();
+    init_namespace();
     init_error();
   }
 });
@@ -981,7 +846,7 @@ var init_patterns2 = __esm({
       `\\.TURBOPACK_REMOTE_SHARED\\s*=\\s*await (?:__turbopack_context__|[a-z])\\.A\\((?<sharedModuleId>${MODULE_ID_PATTERN})\\)`
     );
     ASYNC_MODULE_LOADER_RE = new RegExp(
-      `(?:__turbopack_context__|e)\\.A\\((?<asyncSharedModuleId>${MODULE_ID_PATTERN})\\)`
+      `(?:__turbopack_context__|[a-z])\\.A\\((?<asyncSharedModuleId>${MODULE_ID_PATTERN})\\)`
     );
     ASYNC_MODULE_CALLBACK_RE = new RegExp(
       `(?:parentImport|[a-z])\\((?<sharedModuleId>${MODULE_ID_PATTERN})\\)`
@@ -1689,52 +1554,53 @@ var init_remote_scope_setup = __esm({
   }
 });
 
-// src/host/html/runtime/turbopack.ts
-var turbopack_exports = {};
-__export(turbopack_exports, {
-  turbopackRuntime: () => turbopackRuntime
-});
-async function turbopackRuntime(url, bundle, shared, remoteShared, resolveClientUrl) {
-  const self = globalThis;
-  const hostShared = buildHostShared(shared, resolveClientUrl, {
-    includeRemoteComponentShared: true
-  });
-  await setupRemoteScope("turbopack", [], url, bundle, resolveClientUrl);
-  const {
-    default: { createFromReadableStream }
-  } = await import("react-server-dom-webpack/client.browser");
-  async function preloadScripts(scripts, __) {
-    const scope = await setupRemoteScope(
-      "turbopack",
-      scripts.map((script) => ({
-        src: script.getAttribute("src") || script.getAttribute("data-src") || script.src
-      })),
-      url,
-      bundle,
-      resolveClientUrl
-    );
-    await initializeSharedModules(
-      scope,
-      buildCoreShared(hostShared),
-      remoteShared ?? {}
-    );
-  }
-  return {
-    self,
-    createFromReadableStream,
-    applySharedModules,
-    nextClientPagesLoader,
-    preloadScripts
-  };
+// src/runtime/loaders/script-loader.ts
+async function loadScripts(scripts, resolveClientUrl) {
+  await Promise.all(
+    scripts.map((script) => {
+      return new Promise((resolve, reject) => {
+        const newSrc = new URL(
+          // remove the remote component bundle name identifier from the script src
+          script.src.replace(NEXT_BUNDLE_PATH_RE, "/_next/"),
+          location.origin
+        ).href;
+        const resolvedSrc = resolveClientUrl?.(newSrc) ?? newSrc;
+        const alreadyLoaded = Array.from(
+          document.querySelectorAll("script[src]")
+        ).some((s) => s.src === resolvedSrc);
+        if (alreadyLoaded) {
+          resolve();
+          return;
+        }
+        const newScript = document.createElement("script");
+        newScript.onload = () => resolve();
+        newScript.onerror = () => {
+          const isProxied = isProxiedUrl(resolvedSrc);
+          if (isProxied) {
+            reject(failedProxiedAssetError("script", newSrc, resolvedSrc));
+          } else {
+            warnCrossOriginFetchError("ScriptLoader", newSrc);
+            reject(
+              new RemoteComponentsError(
+                `Failed to load <script src="${newSrc}"> for Remote Component. Check the URL is correct.`
+              )
+            );
+          }
+        };
+        newScript.src = resolvedSrc;
+        newScript.async = true;
+        document.head.appendChild(newScript);
+      });
+    })
+  );
 }
-var init_turbopack = __esm({
-  "src/host/html/runtime/turbopack.ts"() {
+var init_script_loader = __esm({
+  "src/runtime/loaders/script-loader.ts"() {
     "use strict";
-    init_apply_shared_modules();
-    init_next_client_pages_loader();
-    init_shared_module_resolver();
-    init_remote_scope_setup();
-    init_shared_modules();
+    init_patterns();
+    init_protected_rc_fallback();
+    init_error();
+    init_logger();
   }
 });
 
@@ -1888,6 +1754,140 @@ var init_static_loader = __esm({
   }
 });
 
+// src/host/html/runtime/webpack.ts
+var webpack_exports = {};
+__export(webpack_exports, {
+  webpackRuntime: () => webpackRuntime
+});
+async function webpackRuntime(bundle, shared, remoteShared, resolveClientUrl) {
+  const self = globalThis;
+  if (!self.__DISABLE_WEBPACK_EXEC__) {
+    self.__DISABLE_WEBPACK_EXEC__ = {};
+  }
+  self.__DISABLE_WEBPACK_EXEC__[bundle] = true;
+  if (typeof self.__webpack_require__ !== "function" && self.__webpack_require_type__ !== "turbopack") {
+    self.__webpack_require__ = (remoteId) => {
+      const re = /\[(?<bundle>[^\]]+)\] (?<id>.*)/;
+      const match = re.exec(remoteId);
+      const remoteBundle = match?.groups?.bundle;
+      const id = match?.groups?.id;
+      if (!(id && remoteBundle)) {
+        throw new RemoteComponentsError(
+          `Remote Component module "${remoteId}" not found. Did you forget to wrap the Next.js config with \`withRemoteComponentsConfig\` on both host and remote?`
+        );
+      }
+      if (typeof self.__remote_webpack_require__?.[remoteBundle] !== "function") {
+        throw new RemoteComponentsError(
+          `Remote Components are not available in "${remoteBundle}". Did you forget to wrap the Next.js config with \`withRemoteComponentsConfig\` on both host and remote?`
+        );
+      }
+      return self.__remote_webpack_require__[remoteBundle](id);
+    };
+    self.__webpack_chunk_load__ = () => {
+      return Promise.resolve([]);
+    };
+  }
+  const {
+    default: { createFromReadableStream }
+  } = await import("react-server-dom-webpack/client.browser");
+  async function preloadScripts(scripts, url, remoteBundle, _) {
+    const scriptSrcs = scripts.flatMap((script) => {
+      const scriptSrc = script.getAttribute("src") || script.getAttribute("data-src");
+      script.parentElement?.removeChild(script);
+      if (!scriptSrc)
+        return [];
+      return [
+        {
+          src: new URL(scriptSrc.replace(NEXT_BUNDLE_PATH_RE, "/_next/"), url).href
+        }
+      ];
+    });
+    await loadScripts(scriptSrcs, resolveClientUrl);
+    const hostShared = buildHostShared(shared, resolveClientUrl);
+    const resolve = await buildWebpackResolve(
+      hostShared,
+      remoteShared ?? {},
+      remoteBundle,
+      {
+        "/react/index.js": (await import("react")).default,
+        "/react/jsx-dev-runtime.js": (await import("react/jsx-dev-runtime")).default,
+        "/react/jsx-runtime.js": (await import("react/jsx-runtime")).default,
+        "/react-dom/index.js": (await import("react-dom")).default,
+        "/react-dom/client.js": (await import("react-dom/client")).default
+      },
+      "WebpackRuntime"
+    );
+    applySharedModules(remoteBundle, resolve);
+  }
+  return {
+    self,
+    createFromReadableStream,
+    applySharedModules,
+    nextClientPagesLoader,
+    preloadScripts
+  };
+}
+var init_webpack = __esm({
+  "src/host/html/runtime/webpack.ts"() {
+    "use strict";
+    init_apply_shared_modules();
+    init_next_client_pages_loader();
+    init_shared_module_resolver();
+    init_script_loader();
+    init_patterns();
+    init_error();
+  }
+});
+
+// src/host/html/runtime/turbopack.ts
+var turbopack_exports = {};
+__export(turbopack_exports, {
+  turbopackRuntime: () => turbopackRuntime
+});
+async function turbopackRuntime(url, bundle, shared, remoteShared, resolveClientUrl) {
+  const self = globalThis;
+  const hostShared = buildHostShared(shared, resolveClientUrl, {
+    includeRemoteComponentShared: true
+  });
+  await setupRemoteScope("turbopack", [], url, bundle, resolveClientUrl);
+  const {
+    default: { createFromReadableStream }
+  } = await import("react-server-dom-webpack/client.browser");
+  async function preloadScripts(scripts, __) {
+    const scope = await setupRemoteScope(
+      "turbopack",
+      scripts.map((script) => ({
+        src: script.getAttribute("src") || script.getAttribute("data-src") || script.src
+      })),
+      url,
+      bundle,
+      resolveClientUrl
+    );
+    await initializeSharedModules(
+      scope,
+      buildCoreShared(hostShared),
+      remoteShared ?? {}
+    );
+  }
+  return {
+    self,
+    createFromReadableStream,
+    applySharedModules,
+    nextClientPagesLoader,
+    preloadScripts
+  };
+}
+var init_turbopack = __esm({
+  "src/host/html/runtime/turbopack.ts"() {
+    "use strict";
+    init_apply_shared_modules();
+    init_next_client_pages_loader();
+    init_shared_module_resolver();
+    init_remote_scope_setup();
+    init_shared_modules();
+  }
+});
+
 // src/host/html/runtime/script.ts
 var script_exports = {};
 __export(script_exports, {
@@ -1980,34 +1980,33 @@ function getClientOrServerUrl(src, serverFallback) {
   return typeof src === "string" ? new URL(src, fallback) : src;
 }
 
-// src/host/shared/state.ts
-function createHostState() {
+// src/host/shared/lifecycle.ts
+function makeEventEmitter(element) {
+  function dispatch(type, detail) {
+    const event = new Event(type, { bubbles: true, composed: true });
+    if (detail) {
+      Object.assign(event, detail);
+    }
+    element.dispatchEvent(event);
+  }
   return {
-    stage: "idle",
-    prevSrc: void 0,
-    prevUrl: void 0,
-    prevName: void 0,
-    prevIsRemoteComponent: false,
-    abortController: void 0
+    beforeLoad(src) {
+      dispatch("beforeload", { src });
+    },
+    load(src) {
+      dispatch("load", { src });
+    },
+    error(error, src) {
+      dispatch("error", src != null ? { error, src } : { error });
+    },
+    change(info) {
+      dispatch("change", info);
+    }
   };
 }
 
-// src/host/utils/resolve-name-from-src.ts
-function resolveNameFromSrc(src, defaultName) {
-  if (!src) {
-    return defaultName;
-  }
-  const hash = typeof src === "string" ? src : src.hash;
-  const hashIndex = hash.indexOf("#");
-  if (hashIndex < 0) {
-    return defaultName;
-  }
-  const name = hash.slice(hashIndex + 1);
-  return name || defaultName;
-}
-
-// src/host/html/index.tsx
-init_constants2();
+// src/host/shared/pipeline.ts
+init_shared_module_resolver();
 
 // src/runtime/html/html-spec.ts
 var ORIGIN_REWRITE_TAGS = [
@@ -2216,8 +2215,15 @@ function parseRemoteComponentDocument(doc, name, url) {
   };
 }
 
-// src/host/html/index.tsx
-init_namespace();
+// src/runtime/loaders/component-loader.ts
+var React = __toESM(require("react"), 1);
+var JSXDevRuntime = __toESM(require("react/jsx-dev-runtime"), 1);
+var JSXRuntime = __toESM(require("react/jsx-runtime"), 1);
+var ReactDOM = __toESM(require("react-dom"), 1);
+var ReactDOMClient = __toESM(require("react-dom/client"), 1);
+init_apply_shared_modules();
+init_next_client_pages_loader();
+init_shared_module_resolver();
 
 // src/runtime/rsc.ts
 var import_web_streams_polyfill = require("web-streams-polyfill");
@@ -2292,6 +2298,75 @@ function createRSCStream(rscName, data) {
   });
 }
 
+// src/runtime/loaders/component-loader.ts
+init_remote_scope_setup();
+init_shared_modules();
+init_error();
+init_logger();
+init_script_loader();
+
+// src/host/shared/pipeline.ts
+init_static_loader();
+init_patterns();
+init_utils();
+init_error();
+function preparePipeline(input) {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(input.html, "text/html");
+  const parsed = parseRemoteComponentDocument(doc, input.name, input.url);
+  const remoteShared = input.remoteShared ?? parsed.remoteShared;
+  if ("__remote_components_missing_shared__" in remoteShared) {
+    throw new RemoteComponentsError(
+      remoteShared.__remote_components_missing_shared__
+    );
+  }
+  applyOriginToNodes(doc, input.url, input.resolveClientUrl);
+  const scriptDescriptors = buildScriptDescriptors(parsed.scripts, input.url);
+  return { doc, parsed, scriptDescriptors };
+}
+function buildScriptDescriptors(scripts, url) {
+  return scripts.map((script) => {
+    const scriptSrc = script.getAttribute("data-src") || script.getAttribute("src") || script.src;
+    const { prefix, id: path } = REMOTE_COMPONENT_REGEX.exec(scriptSrc)?.groups ?? {
+      prefix: void 0,
+      id: scriptSrc
+    };
+    return {
+      src: new URL(collapseDoubleSlashes(`${prefix ?? ""}${path}`), url).href
+    };
+  });
+}
+
+// src/host/shared/state.ts
+function createHostState() {
+  return {
+    stage: "idle",
+    prevSrc: void 0,
+    prevUrl: void 0,
+    prevName: void 0,
+    prevIsRemoteComponent: false,
+    abortController: void 0
+  };
+}
+
+// src/host/utils/resolve-name-from-src.ts
+function resolveNameFromSrc(src, defaultName) {
+  if (!src) {
+    return defaultName;
+  }
+  const hash = typeof src === "string" ? src : src.hash;
+  const hashIndex = hash.indexOf("#");
+  if (hashIndex < 0) {
+    return defaultName;
+  }
+  const name = hash.slice(hashIndex + 1);
+  return name || defaultName;
+}
+
+// src/host/html/index.tsx
+init_constants2();
+init_namespace();
+
 // src/runtime/url/resolve-client-url.ts
 function withRemoteSrc(resolveClientUrl, remoteSrc) {
   const remoteOrigin = parseOrigin(remoteSrc);
@@ -2446,6 +2521,7 @@ if (typeof HTMLElement !== "undefined") {
     hostState = createHostState();
     root = null;
     reactRoot;
+    emitter = makeEventEmitter(this);
     onRequest;
     onResponse;
     resolveClientUrl;
@@ -2496,13 +2572,6 @@ if (typeof HTMLElement !== "undefined") {
     static get observedAttributes() {
       return ["src", "name", "mode"];
     }
-    dispatchLifecycleEvent(type, detail) {
-      const event = new Event(type, { bubbles: true, composed: true });
-      if (detail) {
-        Object.assign(event, detail);
-      }
-      this.dispatchEvent(event);
-    }
     attributeChangedCallback(name, oldValue, newValue) {
       if ((name === "src" || name === "name") && oldValue !== newValue) {
         if (this.src) {
@@ -2511,7 +2580,7 @@ if (typeof HTMLElement !== "undefined") {
               return;
             }
             logError("HtmlHost", "Error loading remote component.", e);
-            this.dispatchLifecycleEvent("error", { error: e, src: this.src });
+            this.emitter.error(e, this.src);
             this.hostState.stage = "error";
           });
         }
@@ -2528,7 +2597,7 @@ if (typeof HTMLElement !== "undefined") {
             return;
           }
           logError("HtmlHost", "Error reloading remote component.", e);
-          this.dispatchLifecycleEvent("error", { error: e, src: this.src });
+          this.emitter.error(e, this.src);
         });
       }
     }
@@ -2566,7 +2635,7 @@ if (typeof HTMLElement !== "undefined") {
           this.hostState.stage = "idle";
         }
       };
-      this.dispatchLifecycleEvent("beforeload", { src });
+      this.emitter.beforeLoad(src ?? "");
       const remoteComponentChild = this.querySelector("div#__REMOTE_COMPONENT__") || this.querySelector("div[data-bundle][data-route]");
       if (!src && !remoteComponentChild) {
         throw new RemoteComponentsError('"src" attribute is required');
@@ -2614,13 +2683,14 @@ if (typeof HTMLElement !== "undefined") {
           return abandonLoad();
         }
       }
-      const parser = new DOMParser();
-      const doc = parser.parseFromString(html, "text/html");
-      const parsed = parseRemoteComponentDocument(
-        doc,
-        this.name,
-        url ?? new URL(window.location.href)
-      );
+      const effectiveUrl = url ?? new URL(window.location.href);
+      const { doc, parsed } = preparePipeline({
+        html,
+        name: this.name,
+        url: effectiveUrl,
+        shared: {},
+        resolveClientUrl
+      });
       const {
         component,
         name: resolvedName,
@@ -2654,11 +2724,6 @@ if (typeof HTMLElement !== "undefined") {
         this.previousElementSibling?.remove();
       }
       this.parentElement?.insertBefore(metadataEl, this);
-      if ("__remote_components_missing_shared__" in remoteShared) {
-        throw new RemoteComponentsError(
-          remoteShared.__remote_components_missing_shared__
-        );
-      }
       if (this.hostState.prevIsRemoteComponent) {
         if (this.hostState.prevUrl) {
           const prevUrl = this.hostState.prevUrl;
@@ -2687,14 +2752,14 @@ if (typeof HTMLElement !== "undefined") {
         this.root.innerHTML = "";
       }
       if (this.hostState.prevSrc !== void 0) {
-        this.dispatchLifecycleEvent("change", {
-          previousSrc: this.hostState.prevSrc,
-          nextSrc: src,
+        this.emitter.change({
+          previousSrc: this.hostState.prevSrc ?? null,
+          nextSrc: src ?? null,
           previousName: this.hostState.prevName,
           nextName: this.name
         });
       }
-      this.hostState.prevUrl = url ?? new URL(window.location.href);
+      this.hostState.prevUrl = effectiveUrl;
       this.hostState.prevIsRemoteComponent = isRemoteComponent;
       this.hostState.prevSrc = src;
       this.hostState.prevName = this.name;
@@ -2727,11 +2792,6 @@ if (typeof HTMLElement !== "undefined") {
           return abandonLoad();
         }
       }
-      applyOriginToNodes(
-        doc,
-        url ?? new URL(window.location.href),
-        resolveClientUrl
-      );
       if (!this.reactRoot) {
         Array.from(component.children).forEach((el) => {
           if (!isRemoteComponent && el.tagName.toLowerCase() === "script") {
@@ -2806,7 +2866,7 @@ if (typeof HTMLElement !== "undefined") {
         preloadScripts
       } = await getRuntime(
         metadataObj.runtime,
-        url ?? new URL(window.location.href),
+        effectiveUrl,
         this.bundle,
         {
           react: async () => (await import("react")).default,
@@ -2897,7 +2957,7 @@ if (typeof HTMLElement !== "undefined") {
             if (isCurrentLoad()) {
               this.hostState.stage = "loaded";
             }
-            this.dispatchLifecycleEvent("load", { src: this.src });
+            this.emitter.load(this.src ?? "");
           }, [initial, name]);
           return Component;
         };
@@ -2941,9 +3001,7 @@ if (typeof HTMLElement !== "undefined") {
               if (isCurrentLoad()) {
                 remoteComponent.hostState.stage = "loaded";
               }
-              remoteComponent.dispatchLifecycleEvent("load", {
-                src: remoteComponent.src
-              });
+              remoteComponent.emitter.load(remoteComponent.src ?? "");
             }, [initial, remoteComponent]);
             return NextApp ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NextApp, { Component: NextComponent, ...nextData.props }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NextComponent, { ...nextData.props });
           })(App, Component, this);
@@ -2984,9 +3042,9 @@ if (typeof HTMLElement !== "undefined") {
             }
           )
         );
-        this.dispatchLifecycleEvent("load", { src: this.src });
+        this.emitter.load(this.src ?? "");
       } else {
-        this.dispatchLifecycleEvent("load", { src: this.src });
+        this.emitter.load(this.src ?? "");
       }
       if (isCurrentLoad()) {
         this.hostState.stage = "loaded";