remote-components 0.3.0 → 0.3.2

package/dist/host/html.js

@@ -191,6 +191,9 @@ var init_logger = __esm({
 function escapeString(str) {
   return str.replace(/[^a-z0-9]/g, "_");
 }
+function computeScopedName(name, options) {
+  return options.isCrossOrigin ? `${name}_${escapeString(options.remoteHost.toLowerCase())}` : name;
+}
 var init_utils = __esm({
   "src/utils/index.ts"() {
     "use strict";
@@ -201,17 +204,17 @@ var init_utils = __esm({
 function getBundleKey(bundle) {
   return escapeString(bundle);
 }
-var DEFAULT_ROUTE, RUNTIME_WEBPACK, RUNTIME_TURBOPACK, RUNTIME_SCRIPT, REMOTE_COMPONENT_REGEX, NEXT_BUNDLE_PATH_RE;
+var DEFAULT_BUNDLE_NAME, DEFAULT_COMPONENT_NAME, DEFAULT_ROUTE, RUNTIME_WEBPACK, RUNTIME_TURBOPACK, RUNTIME_SCRIPT;
 var init_constants2 = __esm({
   "src/runtime/constants.ts"() {
     "use strict";
     init_utils();
+    DEFAULT_BUNDLE_NAME = "__vercel_remote_bundle";
+    DEFAULT_COMPONENT_NAME = "__vercel_remote_component";
     DEFAULT_ROUTE = "/";
     RUNTIME_WEBPACK = "webpack";
     RUNTIME_TURBOPACK = "turbopack";
     RUNTIME_SCRIPT = "script";
-    REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
-    NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
   }
 });
 
@@ -402,11 +405,93 @@ var init_next_client_pages_loader = __esm({
   }
 });
 
-// src/host/shared/remote-image-loader.ts
-function getRemoteBundleOrigin(bundle) {
+// src/runtime/patterns.ts
+function collapseDoubleSlashes(path) {
+  return path.replace(DOUBLE_SLASH_RE, "/");
+}
+var REMOTE_COMPONENT_REGEX, NEXT_BUNDLE_PATH_RE, DOUBLE_SLASH_RE;
+var init_patterns = __esm({
+  "src/runtime/patterns.ts"() {
+    "use strict";
+    REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
+    NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
+    DOUBLE_SLASH_RE = /(?<!:)\/\//g;
+  }
+});
+
+// src/runtime/turbopack/remote-scope.ts
+function getRegistry() {
   const self = globalThis;
-  return self.__remote_bundle_url__?.[bundle]?.origin ?? "";
+  if (!self.__remote_component_scopes__) {
+    self.__remote_component_scopes__ = /* @__PURE__ */ new Map();
+  }
+  return self.__remote_component_scopes__;
+}
+function createScope(name, url, runtime, resolveClientUrl) {
+  const isCrossOrigin = url.origin !== location.origin;
+  const scopedName = computeScopedName(name, {
+    remoteHost: url.host,
+    isCrossOrigin
+  });
+  const globalKey = getBundleKey(scopedName);
+  return {
+    name,
+    scopedName,
+    globalKey,
+    url,
+    runtime,
+    resolveClientUrl,
+    moduleCache: {},
+    sharedModules: {},
+    moduleGlobal: {}
+  };
+}
+function registerScope(scope) {
+  const registry = getRegistry();
+  registry.set(scope.scopedName, scope);
+  if (scope.scopedName !== scope.name) {
+    const existing = registry.get(scope.name);
+    if (existing && existing.scopedName !== scope.scopedName) {
+      logWarn(
+        "RemoteScope",
+        `Plain name "${scope.name}" already registered by scope "${existing.scopedName}" \u2014 overwriting with "${scope.scopedName}". Static hosts will only resolve the latest one.`
+      );
+    }
+    registry.set(scope.name, scope);
+  }
+  logDebug(
+    "RemoteScope",
+    `Registered scope "${scope.scopedName}" (${registry.size} total)`
+  );
+}
+function getScope(name) {
+  return getRegistry().get(name);
+}
+function formatRemoteId(scope, path) {
+  return `[${scope.scopedName}] ${path}`;
 }
+function parseRemoteId(id) {
+  const groups = REMOTE_COMPONENT_REGEX.exec(id)?.groups;
+  if (groups?.bundle && groups.id) {
+    return {
+      bundle: groups.bundle,
+      path: groups.id,
+      prefix: groups.prefix ?? ""
+    };
+  }
+  return { bundle: "default", path: id, prefix: "" };
+}
+var init_remote_scope = __esm({
+  "src/runtime/turbopack/remote-scope.ts"() {
+    "use strict";
+    init_constants2();
+    init_patterns();
+    init_utils();
+    init_logger();
+  }
+});
+
+// src/host/shared/remote-image-loader.ts
 function createRemoteImageLoader(bundle, resolveClientUrl) {
   const loader = Object.assign(
     ({
@@ -416,7 +501,7 @@ function createRemoteImageLoader(bundle, resolveClientUrl) {
       quality
     }) => {
       const q = quality ?? 75;
-      const remoteOrigin = getRemoteBundleOrigin(bundle);
+      const remoteOrigin = getScope(bundle)?.url.origin ?? "";
       const isCrossOrigin = remoteOrigin && remoteOrigin !== location.origin;
       const basePath = isCrossOrigin ? `${remoteOrigin}${config.path ?? "/_next/image"}` : config.path ?? `${remoteOrigin}/_next/image`;
       const url = `${basePath}?url=${encodeURIComponent(src)}&w=${width}&q=${q}`;
@@ -431,6 +516,7 @@ function createRemoteImageLoader(bundle, resolveClientUrl) {
 var init_remote_image_loader = __esm({
   "src/host/shared/remote-image-loader.ts"() {
     "use strict";
+    init_remote_scope();
   }
 });
 
@@ -620,7 +706,7 @@ async function loadScripts(scripts, resolveClientUrl) {
 var init_script_loader = __esm({
   "src/runtime/loaders/script-loader.ts"() {
     "use strict";
-    init_constants2();
+    init_patterns();
     init_protected_rc_fallback();
     init_error();
     init_logger();
@@ -721,15 +807,15 @@ var init_webpack = __esm({
     init_apply_shared_modules();
     init_next_client_pages_loader();
     init_polyfill();
-    init_constants2();
     init_script_loader();
+    init_patterns();
     init_error();
   }
 });
 
 // src/runtime/turbopack/patterns.ts
 var REMOTE_SHARED_MARKER_RE, REMOTE_SHARED_ASSIGNMENT_RE, ASYNC_MODULE_LOADER_RE, ASYNC_MODULE_RESOLVE_RE, ASYNC_MODULE_ALL_RE, TURBOPACK_GLOBAL_RE;
-var init_patterns = __esm({
+var init_patterns2 = __esm({
   "src/runtime/turbopack/patterns.ts"() {
     "use strict";
     REMOTE_SHARED_MARKER_RE = /(?:self|[a-z])\.TURBOPACK_REMOTE_SHARED/;
@@ -742,62 +828,39 @@ var init_patterns = __esm({
 });
 
 // src/runtime/turbopack/chunk-loader.ts
-function createChunkLoader(runtime, resolveClientUrl) {
-  return function __turbopack_chunk_load__(chunkId, scriptBundle) {
-    logDebug("ChunkLoader", `Loading chunk: "${chunkId}"`);
-    const self = globalThis;
-    const {
-      bundle,
-      id: path,
-      prefix
-    } = REMOTE_COMPONENT_REGEX.exec(chunkId)?.groups ?? {
-      bundle: scriptBundle ?? "",
-      id: chunkId
-    };
-    logDebug(
-      "ChunkLoader",
-      `Parsed chunk - bundle: "${bundle}", path: "${path}", prefix: "${prefix}"`
-    );
-    const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
-    logDebug("ChunkLoader", `Remote runtime: "${remoteRuntime}"`);
-    if (remoteRuntime === RUNTIME_WEBPACK) {
-      logDebug("ChunkLoader", "Skipping chunk load - webpack runtime detected");
-      return Promise.resolve(void 0);
-    }
-    const url = new URL(
-      path ? `${prefix ?? ""}${path}`.replace(
-        /(?<char>[^:])(?<double>\/\/)/g,
-        "$1/"
-      ) : "/",
-      self.__remote_bundle_url__?.[bundle ?? "default"] ?? new URL(location.origin)
-    ).href;
-    if (url.endsWith(".css")) {
-      logDebug("ChunkLoader", `Skipping CSS file: "${url}"`);
-      return;
-    }
-    if (!self.__remote_components_turbopack_chunk_loader_promise__) {
-      self.__remote_components_turbopack_chunk_loader_promise__ = {};
-    }
-    if (self.__remote_components_turbopack_chunk_loader_promise__[url]) {
-      logDebug("ChunkLoader", `Returning cached promise for: "${url}"`);
-      return self.__remote_components_turbopack_chunk_loader_promise__[url];
-    }
-    const resolvedUrl = resolveClientUrl?.(url) ?? url;
-    logDebug("ChunkLoader", `Fetching chunk from: "${resolvedUrl}"`);
-    self.__remote_components_turbopack_chunk_loader_promise__[url] = new Promise((resolve, reject) => {
+function loadChunkWithScope(scope, chunkId) {
+  logDebug(
+    "ChunkLoader",
+    `loadChunkWithScope: "${chunkId}" (scope: "${scope.scopedName}")`
+  );
+  const self = globalThis;
+  const { bundle, path, prefix } = parseRemoteId(chunkId);
+  const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : scope.runtime;
+  if (remoteRuntime === RUNTIME_WEBPACK) {
+    return Promise.resolve(void 0);
+  }
+  const rawPath = path ? collapseDoubleSlashes(`${prefix}${path}`) : "/";
+  const url = new URL(rawPath, scope.url).href;
+  if (url.endsWith(".css")) {
+    return;
+  }
+  if (!self.__remote_components_turbopack_chunk_loader_promise__) {
+    self.__remote_components_turbopack_chunk_loader_promise__ = {};
+  }
+  if (self.__remote_components_turbopack_chunk_loader_promise__[url]) {
+    return self.__remote_components_turbopack_chunk_loader_promise__[url];
+  }
+  const resolvedUrl = scope.resolveClientUrl?.(url) ?? url;
+  if (resolvedUrl !== url) {
+    logDebug("ChunkLoader", `Proxied chunk URL: "${url}" \u2192 "${resolvedUrl}"`);
+  }
+  self.__remote_components_turbopack_chunk_loader_promise__[url] = new Promise(
+    (resolve, reject) => {
       fetch(resolvedUrl).then((res) => res.text()).then((code) => {
         const hasTurbopack = TURBOPACK_GLOBAL_RE.test(code);
         if (hasTurbopack) {
-          return handleTurbopackChunk(code, bundle ?? "", url);
+          return handleTurbopackChunk(code, scope, url);
         }
-        logDebug(
-          "ChunkLoader",
-          `Chunk does not contain globalThis.TURBOPACK or self.TURBOPACK: "${url}"`
-        );
-        logDebug(
-          "ChunkLoader",
-          `First 500 chars of chunk: ${code.slice(0, 500)}`
-        );
       }).then(resolve).catch((error) => {
         const isProxied = isProxiedUrl(resolvedUrl);
         if (isProxied) {
@@ -807,17 +870,29 @@ function createChunkLoader(runtime, resolveClientUrl) {
           reject(error);
         }
       });
-    });
-    return self.__remote_components_turbopack_chunk_loader_promise__[url];
+    }
+  );
+  return self.__remote_components_turbopack_chunk_loader_promise__[url];
+}
+function createChunkDispatcher() {
+  return function __chunk_dispatcher__(chunkId, scriptBundle) {
+    logDebug("ChunkDispatcher", `Dispatching chunk: "${chunkId}"`);
+    const { bundle } = parseRemoteId(chunkId);
+    const bundleName = bundle || scriptBundle || "default";
+    const scope = getScope(bundleName);
+    logDebug(
+      "ChunkDispatcher",
+      `Scope resolution: bundle="${bundleName}", scope=${scope?.scopedName ?? "null"}`
+    );
+    if (!scope) {
+      logWarn("ChunkDispatcher", `No scope found for bundle "${bundleName}"`);
+      return Promise.resolve(void 0);
+    }
+    return loadChunkWithScope(scope, chunkId);
   };
 }
-async function handleTurbopackChunk(code, bundle, url) {
-  logDebug(
-    "ChunkLoader",
-    `Handling Turbopack chunk - bundle: "${bundle}", url: "${url}"`
-  );
+async function handleTurbopackChunk(code, scope, url) {
   if (/importScripts\(\.\.\.self.TURBOPACK_NEXT_CHUNK_URLS/.test(code)) {
-    logDebug("ChunkLoader", `Skipping worker chunk: "${url}"`);
     const preloadLinks = document.querySelectorAll(
       `link[rel="preload"][href="${new URL(url).pathname}"]`
     );
@@ -825,58 +900,41 @@ async function handleTurbopackChunk(code, bundle, url) {
     return;
   }
   const self = globalThis;
-  const bundleKey = getBundleKey(bundle);
-  logDebug("ChunkLoader", `Bundle key: "${bundleKey}"`);
+  const { globalKey } = scope;
   const transformedCode = code.replace(
     /globalThis\[\s*["']TURBOPACK["']\s*\]/g,
-    `globalThis["TURBOPACK_${bundleKey}"]`
+    `globalThis["TURBOPACK_${globalKey}"]`
   ).replace(
     /self\[\s*["']TURBOPACK["']\s*\]/g,
-    `self["TURBOPACK_${bundleKey}"]`
-  ).replace(/globalThis\.TURBOPACK/g, `globalThis.TURBOPACK_${bundleKey}`).replace(/self\.TURBOPACK(?!_)/g, `self.TURBOPACK_${bundleKey}`).replace(
+    `self["TURBOPACK_${globalKey}"]`
+  ).replace(/globalThis\.TURBOPACK/g, `globalThis.TURBOPACK_${globalKey}`).replace(/self\.TURBOPACK(?!_)/g, `self.TURBOPACK_${globalKey}`).replace(
     /TURBOPACK_WORKER_LOCATION/g,
-    `TURBOPACK_WORKER_LOCATION_${bundleKey}`
+    `TURBOPACK_WORKER_LOCATION_${globalKey}`
   ).replace(
     /TURBOPACK_NEXT_CHUNK_URLS/g,
-    `TURBOPACK_NEXT_CHUNK_URLS_${bundleKey}`
+    `TURBOPACK_NEXT_CHUNK_URLS_${globalKey}`
   ).replace(
     /TURBOPACK_CHUNK_UPDATE_LISTENERS/g,
-    `TURBOPACK_CHUNK_UPDATE_LISTENERS_${bundleKey}`
-  ).replace(/__next_require__/g, `__${bundleKey}_next_require__`).replace(
+    `TURBOPACK_CHUNK_UPDATE_LISTENERS_${globalKey}`
+  ).replace(/__next_require__/g, `__${globalKey}_next_require__`).replace(
     /\/\/# sourceMappingURL=(?<name>.+)(?<optional>\._)?\.js\.map/g,
-    `//# sourceMappingURL=${new URL(
-      ".",
-      new URL(
-        url,
-        self.__remote_bundle_url__?.[bundle] ?? new URL(location.origin)
-      )
-    ).href}$1$2.js.map`
+    `//# sourceMappingURL=${new URL(".", new URL(url, scope.url)).href}$1$2.js.map`
   );
-  if (!self[`TURBOPACK_${bundleKey}`]) {
+  if (!self[`TURBOPACK_${globalKey}`]) {
     const chunkData = [];
     const turbopackObject = {
       push: (item) => {
-        logDebug(
-          "ChunkLoader",
-          `TURBOPACK_${bundleKey}.push() called with item type: ${Array.isArray(item) ? "array" : typeof item}`
-        );
         if (Array.isArray(item)) {
           chunkData.push(item);
-          logDebug(
-            "ChunkLoader",
-            `TURBOPACK_${bundleKey} now has ${chunkData.length} chunks`
-          );
         } else {
           chunkData.push([item]);
         }
         return chunkData.length;
       },
-      // Store chunks for later access
       __chunks__: chunkData
     };
-    self[`TURBOPACK_${bundleKey}`] = turbopackObject;
+    self[`TURBOPACK_${globalKey}`] = turbopackObject;
   }
-  logDebug("ChunkLoader", `Creating blob script for: "${url}"`);
   await new Promise((scriptResolve, scriptReject) => {
     const blob = new Blob([transformedCode], {
       type: "application/javascript; charset=UTF-8"
@@ -888,21 +946,6 @@ async function handleTurbopackChunk(code, bundle, url) {
     script.async = true;
     script.onload = () => {
       URL.revokeObjectURL(scriptUrl);
-      logDebug(
-        "ChunkLoader",
-        `Script loaded successfully for bundle "${bundle}"`
-      );
-      const turbopackBundle = self[`TURBOPACK_${bundleKey}`];
-      logDebug(
-        "ChunkLoader",
-        `TURBOPACK_${bundleKey} type: ${typeof turbopackBundle}, isArray: ${Array.isArray(turbopackBundle)}, keys: ${turbopackBundle ? Object.keys(turbopackBundle).slice(0, 10).join(", ") : "none"}`
-      );
-      if (turbopackBundle && typeof turbopackBundle === "object") {
-        logDebug(
-          "ChunkLoader",
-          `TURBOPACK_${bundleKey} length/size: ${Array.isArray(turbopackBundle) ? turbopackBundle.length : Object.keys(turbopackBundle).length}`
-        );
-      }
       scriptResolve(void 0);
       script.remove();
     };
@@ -917,53 +960,199 @@ async function handleTurbopackChunk(code, bundle, url) {
     };
     document.head.appendChild(script);
   });
-  const chunkLists = self[`TURBOPACK_${bundleKey}_CHUNK_LISTS`];
-  logDebug(
-    "ChunkLoader",
-    `Processing chunk lists for bundle "${bundle}": ${chunkLists?.length ?? 0} lists`
-  );
-  const loadChunkLists = [];
+  const chunkLists = self[`TURBOPACK_${globalKey}_CHUNK_LISTS`];
+  const loadChunkPromises = [];
   while (chunkLists?.length) {
     const { chunks } = chunkLists.shift() ?? { chunks: [] };
     if (chunks.length > 0) {
-      logDebug(
-        "ChunkLoader",
-        `Loading ${chunks.length} additional chunks for bundle "${bundle}": [${chunks.join(", ")}]`
-      );
-      chunks.forEach((id) => {
-        const chunkLoadResult = self.__webpack_chunk_load__?.(
-          `[${bundle}] ${url.slice(0, url.indexOf("/_next"))}/_next/${id}`
+      for (const id of chunks) {
+        const baseUrl = url.slice(0, url.indexOf("/_next"));
+        const chunkLoadResult = loadChunkWithScope(
+          scope,
+          formatRemoteId(scope, `${baseUrl}/_next/${id}`)
         );
         if (chunkLoadResult) {
-          loadChunkLists.push(chunkLoadResult);
+          loadChunkPromises.push(chunkLoadResult);
         }
-      });
+      }
     }
   }
-  if (loadChunkLists.length > 0) {
-    logDebug(
-      "ChunkLoader",
-      `Waiting for ${loadChunkLists.length} additional chunks to load`
-    );
-    await Promise.all(loadChunkLists);
+  if (loadChunkPromises.length > 0) {
+    await Promise.all(loadChunkPromises);
   }
 }
 var init_chunk_loader = __esm({
   "src/runtime/turbopack/chunk-loader.ts"() {
     "use strict";
     init_constants2();
+    init_patterns();
     init_protected_rc_fallback();
     init_error();
     init_logger();
-    init_patterns();
+    init_patterns2();
+    init_remote_scope();
+  }
+});
+
+// src/runtime/turbopack/shared-modules.ts
+function getTurbopackModules(scope) {
+  const self = globalThis;
+  const raw = self[`TURBOPACK_${scope.globalKey}`];
+  if (!raw)
+    return void 0;
+  if (typeof raw === "object" && "__chunks__" in raw) {
+    return raw.__chunks__.flat();
+  }
+  if (Array.isArray(raw)) {
+    return raw.flat();
+  }
+  return Object.entries(raw).flat();
+}
+async function initializeSharedModules(scope, hostShared = {}, remoteShared = {}) {
+  const allModules = getTurbopackModules(scope);
+  logDebug(
+    "SharedModules",
+    `initializeSharedModules: scope="${scope.scopedName}", allModules=${allModules ? allModules.length : "null"}, hostShared=[${Object.keys(hostShared).join(", ")}], remoteShared=${JSON.stringify(remoteShared)}`
+  );
+  let sharedModuleInitializer = null;
+  if (allModules) {
+    const sharedModuleInitializerIndex = allModules.findIndex((idOrFunc) => {
+      if (typeof idOrFunc !== "function") {
+        return false;
+      }
+      const funcCode = idOrFunc.toString();
+      return REMOTE_SHARED_MARKER_RE.test(funcCode);
+    });
+    if (sharedModuleInitializerIndex > 0) {
+      const sharedModuleInitializerCode = allModules[sharedModuleInitializerIndex].toString();
+      const sharedModuleInitializerId = allModules[sharedModuleInitializerIndex - 1];
+      const { sharedModuleId } = REMOTE_SHARED_ASSIGNMENT_RE.exec(sharedModuleInitializerCode)?.groups ?? {};
+      if (sharedModuleId) {
+        const { default: sharedModuleInitializerInstance } = handleTurbopackModule(
+          scope,
+          sharedModuleId,
+          formatRemoteId(scope, String(sharedModuleInitializerId))
+        );
+        sharedModuleInitializer = sharedModuleInitializerInstance;
+      }
+    }
+    if (sharedModuleInitializer) {
+      const { shared } = await sharedModuleInitializer;
+      const sharedModuleIds = extractSharedModuleIds(shared, scope);
+      logDebug(
+        "SharedModules",
+        `Resolved shared modules for scope="${scope.scopedName}": ${JSON.stringify(sharedModuleIds)}`
+      );
+      return Promise.all(
+        Object.entries(sharedModuleIds).map(async ([id, module]) => {
+          if (hostShared[module]) {
+            scope.sharedModules[id] = await hostShared[module](scope.name);
+          } else {
+            logError(
+              "SharedModules",
+              `Host shared module "${module}" not found for ID ${id}. ${DEDUPLICATION_WARNING}`
+            );
+          }
+        })
+      );
+    }
+    logWarn(
+      "SharedModules",
+      `No shared module initializer found in bundle for scope="${scope.scopedName}" \u2014 falling back to remoteShared mapping`
+    );
+  } else {
+    logWarn(
+      "SharedModules",
+      `No TURBOPACK modules found for scope="${scope.scopedName}" (TURBOPACK_${scope.globalKey} is empty)`
+    );
+  }
+  return Promise.all(
+    Object.entries(remoteShared).map(async ([id, module]) => {
+      if (hostShared[module]) {
+        const normalizedId = id.replace("[app-ssr]", "[app-client]");
+        scope.sharedModules[normalizedId] = await hostShared[module](
+          scope.name
+        );
+      } else {
+        logError(
+          "SharedModules",
+          `Shared module "${module}" not found for "${scope.name}". ${DEDUPLICATION_WARNING}`
+        );
+      }
+    })
+  );
+}
+function extractSharedModuleIds(shared, scope) {
+  return Object.entries(shared).filter(([, value]) => typeof value === "function").reduce((acc, [key, value]) => {
+    const { asyncSharedModuleId } = ASYNC_MODULE_LOADER_RE.exec(value.toString())?.groups ?? {};
+    if (asyncSharedModuleId) {
+      const asyncSharedModuleIdNumber = Number(asyncSharedModuleId);
+      let asyncSharedModule;
+      const turbopackModules = getTurbopackModules(scope) ?? [];
+      const asyncSharedModuleIdIndex = turbopackModules.indexOf(
+        asyncSharedModuleIdNumber
+      );
+      if (asyncSharedModuleIdIndex !== -1 && typeof turbopackModules[asyncSharedModuleIdIndex + 1] === "function") {
+        asyncSharedModule = turbopackModules[asyncSharedModuleIdIndex + 1];
+      }
+      if (asyncSharedModule) {
+        const asyncSharedModuleCode = asyncSharedModule.toString();
+        const { sharedModuleId } = ASYNC_MODULE_RESOLVE_RE.exec(asyncSharedModuleCode)?.groups ?? ASYNC_MODULE_ALL_RE.exec(asyncSharedModuleCode)?.groups ?? {};
+        acc[sharedModuleId ?? asyncSharedModuleId] = key.replace(
+          "__remote_shared_module_",
+          ""
+        );
+      }
+    }
+    return acc;
+  }, {});
+}
+function getSharedModule(scope, id) {
+  const idStr = String(id);
+  if (scope.sharedModules[idStr] !== void 0) {
+    return scope.sharedModules[idStr];
+  }
+  for (const [key, value] of Object.entries(scope.sharedModules)) {
+    if (typeof value !== "undefined" && idStr !== key && idStr.endsWith(key)) {
+      return value;
+    }
+  }
+  return null;
+}
+var DEDUPLICATION_WARNING;
+var init_shared_modules = __esm({
+  "src/runtime/turbopack/shared-modules.ts"() {
+    "use strict";
+    init_logger();
+    init_module();
+    init_patterns2();
+    init_remote_scope();
+    DEDUPLICATION_WARNING = "This module will not be deduplicated \u2014 the remote may load its own copy, which can cause duplicate instance errors (e.g. invalid hook calls if React is loaded twice).";
   }
 });
 
 // src/runtime/turbopack/module.ts
-function handleTurbopackModule(bundle, moduleId, id) {
+function requireModule(scope, moduleId, fullId) {
+  const idStr = String(moduleId);
+  if (scope.moduleCache[idStr])
+    return scope.moduleCache[idStr];
+  const sharedModule = getSharedModule(scope, moduleId);
+  if (sharedModule) {
+    scope.moduleCache[idStr] = sharedModule;
+    return sharedModule;
+  }
+  return handleTurbopackModule(
+    scope,
+    idStr,
+    fullId ?? formatRemoteId(scope, idStr)
+  );
+}
+function handleTurbopackModule(scope, moduleId, id) {
   const self = globalThis;
-  const bundleKey = getBundleKey(bundle);
-  const raw = self[`TURBOPACK_${bundleKey}`];
+  if (scope.moduleCache[moduleId]) {
+    return scope.moduleCache[moduleId];
+  }
+  const raw = self[`TURBOPACK_${scope.globalKey}`];
   let modules;
   if (raw && typeof raw === "object" && "__chunks__" in raw) {
     modules = raw.__chunks__.flat();
@@ -972,48 +1161,35 @@ function handleTurbopackModule(bundle, moduleId, id) {
   } else {
     modules = raw;
   }
-  if (!self.__remote_components_turbopack_modules__) {
-    self.__remote_components_turbopack_modules__ = {};
-  }
-  if (!self.__remote_components_turbopack_modules__[bundle]) {
-    self.__remote_components_turbopack_modules__[bundle] = {};
-  }
-  if (self.__remote_components_turbopack_modules__[bundle][moduleId]) {
-    return self.__remote_components_turbopack_modules__[bundle][moduleId];
-  }
   if (!modules) {
-    logError("TurbopackModule", `TURBOPACK_${bundleKey} is undefined`);
+    logError(
+      "TurbopackModule",
+      `TURBOPACK_${scope.globalKey} is undefined (scope: "${scope.scopedName}")`
+    );
   }
   const moduleInit = findModuleInit(modules, moduleId);
   const exports = {};
   const moduleExports = { exports };
   if (typeof moduleInit !== "function") {
     throw new Error(
-      `Module ${id} not found in bundle ${bundle} with id ${moduleId}`
+      `Module ${id} not found in bundle ${scope.name} with id ${moduleId}`
     );
   }
-  self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
-  if (!self.__remote_components_turbopack_global__) {
-    self.__remote_components_turbopack_global__ = {};
-  }
-  if (!self.__remote_components_turbopack_global__[bundle]) {
-    self.__remote_components_turbopack_global__[bundle] = {};
-  }
+  scope.moduleCache[moduleId] = moduleExports.exports;
   moduleInit(
     createTurbopackContext(
-      bundle,
+      scope,
       exports,
       moduleExports,
       modules,
       moduleInit,
-      id,
-      self
+      id
     ),
     moduleExports,
     exports
   );
-  if (self.__remote_components_turbopack_modules__[bundle][moduleId] !== moduleExports.exports) {
-    self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
+  if (scope.moduleCache[moduleId] !== moduleExports.exports) {
+    scope.moduleCache[moduleId] = moduleExports.exports;
   }
   return moduleExports.exports;
 }
@@ -1038,7 +1214,8 @@ function findModuleInit(modules, moduleId) {
     (e) => Boolean(e && typeof e === "object" && moduleId in e)
   )?.[moduleId];
 }
-function createTurbopackContext(bundle, exports, moduleExports, modules, moduleInit, id, self) {
+function createTurbopackContext(scope, exports, moduleExports, modules, moduleInit, id) {
+  const scopedRequire = (moduleId) => requireModule(scope, moduleId, formatRemoteId(scope, String(moduleId)));
   return {
     // HMR not implemented for Remote Components
     k: {
@@ -1054,16 +1231,10 @@ function createTurbopackContext(bundle, exports, moduleExports, modules, moduleI
     s(bindings, esmId) {
       let mod = exports;
       if (typeof esmId === "string" || typeof esmId === "number") {
-        if (!self.__remote_components_turbopack_modules__) {
-          self.__remote_components_turbopack_modules__ = {};
+        if (!scope.moduleCache[esmId]) {
+          scope.moduleCache[esmId] = {};
         }
-        if (!self.__remote_components_turbopack_modules__[bundle]) {
-          self.__remote_components_turbopack_modules__[bundle] = {};
-        }
-        if (!self.__remote_components_turbopack_modules__[bundle][esmId]) {
-          self.__remote_components_turbopack_modules__[bundle][esmId] = {};
-        }
-        mod = self.__remote_components_turbopack_modules__[bundle][esmId];
+        mod = scope.moduleCache[esmId];
       }
       Object.defineProperty(mod, "__esModule", { value: true });
       if (Array.isArray(bindings)) {
@@ -1096,7 +1267,7 @@ function createTurbopackContext(bundle, exports, moduleExports, modules, moduleI
         }
       }
     },
-    // import
+    // import — resolves directly via scope, no global dispatch
     i(importId) {
       let mod;
       if (typeof importId === "string") {
@@ -1107,7 +1278,7 @@ function createTurbopackContext(bundle, exports, moduleExports, modules, moduleI
           /\s+<export(?<specifier>.*)>$/,
           ""
         );
-        mod = self.__webpack_require__?.(`[${bundle}] ${normalizedId}`);
+        mod = scopedRequire(normalizedId);
         if (mod && exportSource && exportName && (exportSource === "*" || typeof mod[exportSource] !== "undefined") && typeof mod[exportName] === "undefined") {
           if (exportSource === "*") {
             mod[exportName] = mod;
@@ -1116,7 +1287,7 @@ function createTurbopackContext(bundle, exports, moduleExports, modules, moduleI
           }
         }
       } else {
-        mod = self.__webpack_require__?.(`[${bundle}] ${importId}`);
+        mod = scopedRequire(importId);
       }
       if (typeof mod !== "object" || mod === null) {
         mod = { default: mod };
@@ -1128,16 +1299,14 @@ function createTurbopackContext(bundle, exports, moduleExports, modules, moduleI
       }
       return mod;
     },
-    // require
+    // require — resolves directly via scope
     r(requireId) {
-      return self.__webpack_require__?.(`[${bundle}] ${requireId}`);
+      return scopedRequire(requireId);
     },
     // value exports
     v(value) {
       if (typeof value === "function") {
-        exports.default = value((vid) => {
-          return self.__webpack_require__?.(`[${bundle}] ${vid}`);
-        });
+        exports.default = value((vid) => scopedRequire(vid));
       } else {
         moduleExports.exports = value;
       }
@@ -1152,17 +1321,15 @@ function createTurbopackContext(bundle, exports, moduleExports, modules, moduleI
       );
       exports.default = result;
     },
-    // async module loader
+    // async module loader — resolves directly via scope
     async A(Aid) {
-      const mod = self.__webpack_require__?.(`[${bundle}] ${Aid}`);
-      return mod.default(
-        (parentId) => self.__webpack_require__?.(`[${bundle}] ${parentId}`)
-      );
+      const mod = scopedRequire(Aid);
+      return mod.default((parentId) => scopedRequire(parentId));
     },
     // dynamic import tracking — no-op for remote components
     j() {
     },
-    // chunk loader
+    // chunk loader — loads directly via scope, no global dispatch
     l(url) {
       const flatModules = Array.isArray(modules) ? modules : [];
       const moduleInitIndex = flatModules.indexOf(moduleInit);
@@ -1173,16 +1340,16 @@ function createTurbopackContext(bundle, exports, moduleExports, modules, moduleI
           const scriptSrc = script.getAttribute("data-turbopack-src") || "";
           const nextIndex = scriptSrc.indexOf("/_next");
           const baseUrl = nextIndex !== -1 ? scriptSrc.slice(0, nextIndex) : "";
-          const bundleUrl = `[${bundle}] ${baseUrl}/_next/${url}`;
-          return self.__webpack_chunk_load__?.(bundleUrl, bundle);
+          const chunkUrl = `${baseUrl}/_next/${url}`;
+          return loadChunkWithScope(scope, formatRemoteId(scope, chunkUrl));
         }
       }
       throw new Error(
         `Failed to load Turbopack chunk "${url}" for module "${id}". Check the URL is correct.`
       );
     },
-    // global object for this bundle
-    g: self.__remote_components_turbopack_global__?.[bundle],
+    // globalThis substitute shared across all modules in this scope
+    g: scope.moduleGlobal,
     m: moduleExports,
     e: exports
   };
@@ -1190,173 +1357,61 @@ function createTurbopackContext(bundle, exports, moduleExports, modules, moduleI
 var init_module = __esm({
   "src/runtime/turbopack/module.ts"() {
     "use strict";
-    init_constants2();
-    init_logger();
-  }
-});
-
-// src/runtime/turbopack/shared-modules.ts
-async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {}) {
-  const self = globalThis;
-  self.__remote_shared_modules__ = self.__remote_shared_modules__ ?? {};
-  if (!self.__remote_shared_modules__[bundle]) {
-    self.__remote_shared_modules__[bundle] = {};
-  }
-  const bundleKey = getBundleKey(bundle);
-  let modules = self[`TURBOPACK_${bundleKey}`];
-  if (modules && typeof modules === "object" && "__chunks__" in modules) {
-    const chunks = modules.__chunks__;
-    modules = chunks.flat();
-  }
-  let sharedModuleInitializer = null;
-  if (modules) {
-    const allModules = Array.isArray(modules) ? modules.flat() : Object.entries(modules).flat();
-    const sharedModuleInitializerIndex = allModules.findIndex((idOrFunc) => {
-      if (typeof idOrFunc !== "function") {
-        return false;
-      }
-      const funcCode = idOrFunc.toString();
-      return REMOTE_SHARED_MARKER_RE.test(funcCode);
-    });
-    if (sharedModuleInitializerIndex > 0) {
-      const sharedModuleInitializerCode = allModules[sharedModuleInitializerIndex].toString();
-      const sharedModuleInitializerId = allModules[sharedModuleInitializerIndex - 1];
-      const { sharedModuleId } = REMOTE_SHARED_ASSIGNMENT_RE.exec(sharedModuleInitializerCode)?.groups ?? {};
-      if (sharedModuleId) {
-        const { default: sharedModuleInitializerInstance } = handleTurbopackModule(
-          bundle,
-          sharedModuleId,
-          `[${bundle}] ${sharedModuleInitializerId}`
-        );
-        sharedModuleInitializer = sharedModuleInitializerInstance;
-      }
-    }
-    if (sharedModuleInitializer) {
-      const { shared } = await sharedModuleInitializer;
-      const sharedModuleIds = extractSharedModuleIds(
-        shared,
-        bundleKey,
-        self
-      );
-      return Promise.all(
-        Object.entries(sharedModuleIds).map(async ([id, module]) => {
-          if (self.__remote_shared_modules__?.[bundle]) {
-            if (hostShared[module]) {
-              self.__remote_shared_modules__[bundle][id] = await hostShared[module](bundle);
-            } else {
-              logError(
-                "SharedModules",
-                `Host shared module "${module}" not found for ID ${id}. ${DEDUPLICATION_WARNING}`
-              );
-            }
-          }
-        })
-      );
-    }
-  }
-  return Promise.all(
-    Object.entries(remoteShared).map(async ([id, module]) => {
-      if (self.__remote_shared_modules__?.[bundle]) {
-        if (hostShared[module]) {
-          const normalizedId = id.replace("[app-ssr]", "[app-client]");
-          self.__remote_shared_modules__[bundle][normalizedId] = await hostShared[module](bundle);
-        } else {
-          logError(
-            "SharedModules",
-            `Shared module "${module}" not found for "${bundle}". ${DEDUPLICATION_WARNING}`
-          );
-        }
-      }
-    })
-  );
-}
-function extractSharedModuleIds(shared, bundleKey, self) {
-  return Object.entries(shared).filter(([, value]) => typeof value === "function").reduce((acc, [key, value]) => {
-    const { asyncSharedModuleId } = ASYNC_MODULE_LOADER_RE.exec(value.toString())?.groups ?? {};
-    if (asyncSharedModuleId) {
-      const asyncSharedModuleIdNumber = Number(asyncSharedModuleId);
-      let asyncSharedModule;
-      let turbopackModules = self[`TURBOPACK_${bundleKey}`];
-      if (turbopackModules && typeof turbopackModules === "object" && "__chunks__" in turbopackModules) {
-        const chunks = turbopackModules.__chunks__;
-        turbopackModules = chunks.flat();
-      }
-      const newAllModules = Array.isArray(turbopackModules) ? turbopackModules.flat() : turbopackModules ? Object.entries(turbopackModules).flatMap(([key2, value2]) => [
-        key2,
-        value2
-      ]) : [];
-      const asyncSharedModuleIdIndex = newAllModules.indexOf(
-        asyncSharedModuleIdNumber
-      );
-      if (asyncSharedModuleIdIndex !== -1 && typeof newAllModules[asyncSharedModuleIdIndex + 1] === "function") {
-        asyncSharedModule = newAllModules[asyncSharedModuleIdIndex + 1];
-      }
-      if (asyncSharedModule) {
-        const asyncSharedModuleCode = asyncSharedModule.toString();
-        const { sharedModuleId } = ASYNC_MODULE_RESOLVE_RE.exec(asyncSharedModuleCode)?.groups ?? ASYNC_MODULE_ALL_RE.exec(asyncSharedModuleCode)?.groups ?? {};
-        acc[sharedModuleId ?? asyncSharedModuleId] = key.replace(
-          "__remote_shared_module_",
-          ""
-        );
-      }
-    }
-    return acc;
-  }, {});
-}
-function getSharedModule(bundle, id) {
-  const self = globalThis;
-  for (const [key, value] of Object.entries(
-    self.__remote_shared_modules__?.[bundle] ?? {}
-  )) {
-    if (typeof value !== "undefined" && (typeof id === "string" && id.includes(key) || id === key)) {
-      return value;
-    }
-  }
-  return null;
-}
-var DEDUPLICATION_WARNING;
-var init_shared_modules = __esm({
-  "src/runtime/turbopack/shared-modules.ts"() {
-    "use strict";
-    init_constants2();
     init_logger();
-    init_module();
-    init_patterns();
-    DEDUPLICATION_WARNING = "This module will not be deduplicated \u2014 the remote may load its own copy, which can cause duplicate instance errors (e.g. invalid hook calls if React is loaded twice).";
+    init_chunk_loader();
+    init_remote_scope();
+    init_shared_modules();
   }
 });
 
 // src/runtime/turbopack/webpack-runtime.ts
 async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location.href), bundle, shared = {}, remoteShared = {}, resolveClientUrl) {
   const self = globalThis;
+  const bundleName = bundle ?? "default";
+  const scope = createScope(bundleName, url, runtime, resolveClientUrl);
+  registerScope(scope);
   if (!self.__remote_bundle_url__) {
     self.__remote_bundle_url__ = {};
   }
-  self.__remote_bundle_url__[bundle ?? "default"] = url;
+  self.__remote_bundle_url__[bundleName] = url;
+  if (scope.scopedName !== bundleName) {
+    self.__remote_bundle_url__[scope.scopedName] = url;
+  }
   self.__webpack_get_script_filename__ = () => null;
-  if (typeof self.__webpack_require__ !== "function" || self.__webpack_require_type__ !== "turbopack") {
+  const willCreateDispatchers = typeof self.__webpack_require__ !== "function" || self.__webpack_require_type__ !== "turbopack";
+  if (willCreateDispatchers) {
     if (!self.__original_webpack_require__ && !self.__original_webpack_chunk_load__) {
       self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;
       self.__original_webpack_require__ = self.__webpack_require__;
     }
-    self.__webpack_chunk_load__ = createChunkLoader(runtime, resolveClientUrl);
-    self.__webpack_require__ = createModuleRequire(runtime);
+    self.__webpack_chunk_load__ = createChunkDispatcher();
+    self.__webpack_require__ = createModuleDispatcher(runtime);
     self.__webpack_require_type__ = runtime;
     if (self.__remote_webpack_require__ && runtime === RUNTIME_TURBOPACK) {
-      const remoteBundle = bundle ?? "default";
-      self.__remote_webpack_require__[remoteBundle] = self.__webpack_require__;
-      self.__remote_webpack_require__[remoteBundle].type = "turbopack";
+      self.__remote_webpack_require__[bundleName] = self.__webpack_require__;
+      self.__remote_webpack_require__[bundleName].type = "turbopack";
     }
   }
+  if (self.__remote_webpack_require__?.[bundleName] && scope.scopedName !== bundleName) {
+    self.__remote_webpack_require__[scope.scopedName] = self.__remote_webpack_require__[bundleName];
+  }
   if (runtime === RUNTIME_TURBOPACK) {
-    await Promise.all(
+    const results = await Promise.allSettled(
       scripts.map((script) => {
         if (script.src) {
-          return self.__webpack_chunk_load__?.(script.src, bundle);
+          return loadChunkWithScope(scope, script.src);
         }
         return Promise.resolve(void 0);
       })
     );
+    for (const result of results) {
+      if (result.status === "rejected") {
+        logWarn(
+          "WebpackRuntime",
+          `Initial chunk load failed: ${String(result.reason)}`
+        );
+      }
+    }
   }
   const coreShared = {
     react: async () => (await import("react")).default,
@@ -1366,54 +1421,54 @@ async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location
     "react-dom/client": async () => (await import("react-dom/client")).default,
     ...shared
   };
-  await initializeSharedModules(
-    bundle ?? "default",
-    // include all core modules as shared
-    coreShared,
-    remoteShared
-  );
+  await initializeSharedModules(scope, coreShared, remoteShared);
 }
-function createModuleRequire(runtime) {
+function createModuleDispatcher(runtime) {
   return (id) => {
     const self = globalThis;
     const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)?.groups ?? {
       bundle: "default",
       id
     };
-    const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
-    logDebug("WebpackRuntime", `remoteRuntime: "${remoteRuntime}"`);
+    const bundleName = bundle ?? "default";
+    const remoteRuntime = self.__remote_webpack_require__?.[bundleName] ? self.__remote_webpack_require__[bundleName]?.type || "webpack" : runtime;
+    logDebug(
+      "ModuleDispatcher",
+      `Resolving "${id}" (bundle: "${bundleName}", runtime: "${remoteRuntime}")`
+    );
     try {
       if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {
         return self.__remote_webpack_require__?.[bundle]?.(moduleId);
       }
-      const sharedModuleId = moduleId ?? id;
-      const sharedModule = getSharedModule(bundle ?? "default", sharedModuleId);
-      if (sharedModule) {
-        return sharedModule;
-      }
-      if (bundle && moduleId) {
-        return handleTurbopackModule(bundle, moduleId, id);
+      const scope = getScope(bundleName);
+      if (scope) {
+        return requireModule(scope, moduleId ?? id, id);
       }
-      throw new Error(`Module "${id}" not found.`);
+      throw new Error(
+        `Module "${id}" not found \u2014 no scope for bundle "${bundleName}".`
+      );
     } catch (requireError) {
       logWarn(
-        "WebpackRuntime",
+        "ModuleDispatcher",
         `Module require failed: ${String(requireError)}`
       );
       if (typeof self.__original_webpack_require__ !== "function") {
         throw new RemoteComponentsError(
-          `Module "${id}" not found in remote component bundle "${bundle}".`,
+          `Module "${id}" not found in remote component bundle "${bundleName}".`,
           {
             cause: requireError instanceof Error ? requireError : void 0
           }
         );
       }
       try {
-        logDebug("WebpackRuntime", "Falling back to original webpack require");
+        logDebug(
+          "ModuleDispatcher",
+          "Falling back to original webpack require"
+        );
         return self.__original_webpack_require__(id);
       } catch (originalError) {
         throw new RemoteComponentsError(
-          `Module "${id}" not found in remote component bundle "${bundle}".`,
+          `Module "${id}" not found in remote component bundle "${bundleName}".`,
           { cause: originalError instanceof Error ? originalError : void 0 }
         );
       }
@@ -1424,10 +1479,12 @@ var init_webpack_runtime = __esm({
   "src/runtime/turbopack/webpack-runtime.ts"() {
     "use strict";
     init_constants2();
+    init_patterns();
     init_error();
     init_logger();
     init_chunk_loader();
     init_module();
+    init_remote_scope();
     init_shared_modules();
   }
 });
@@ -1757,6 +1814,9 @@ function resolveNameFromSrc(src, defaultName) {
   return name || defaultName;
 }
 
+// src/host/html/index.tsx
+init_constants2();
+
 // src/runtime/html/apply-origin.ts
 var tagNames = [
   "img",
@@ -1821,6 +1881,41 @@ function applyOriginToNodes(doc, url, resolveClientUrl) {
 
 // src/runtime/html/parse-remote-html.ts
 init_constants2();
+
+// src/runtime/metadata.ts
+init_constants2();
+var VALID_RUNTIMES = /* @__PURE__ */ new Set(["webpack", "turbopack", "script"]);
+var VALID_TYPES = /* @__PURE__ */ new Set([
+  "nextjs",
+  "remote-component",
+  "unknown"
+]);
+function isRuntime(value) {
+  return VALID_RUNTIMES.has(value);
+}
+function isComponentType(value) {
+  return VALID_TYPES.has(value);
+}
+function toRuntime(value) {
+  return value && isRuntime(value) ? value : "webpack";
+}
+function toComponentType(value) {
+  return value && isComponentType(value) ? value : "unknown";
+}
+function buildMetadata(attrs, url) {
+  const id = attrs.id || DEFAULT_COMPONENT_NAME;
+  const bundle = attrs.bundle || process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION || DEFAULT_BUNDLE_NAME;
+  return {
+    name: attrs.name || id.replace(/_ssr$/, ""),
+    bundle,
+    route: attrs.route || url.pathname || DEFAULT_ROUTE,
+    runtime: toRuntime(attrs.runtime),
+    id,
+    type: toComponentType(attrs.type)
+  };
+}
+
+// src/runtime/html/parse-remote-html.ts
 init_error();
 function validateSingleComponent(doc, name, url) {
   if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) || doc.querySelectorAll("remote-component:not([src])").length > 1 && !doc.querySelector(`remote-component[name="${name}"]`)) {
@@ -1840,14 +1935,6 @@ function resolveComponentName(component, nextData, fallbackName) {
   const name = component?.getAttribute("id")?.replace(/_ssr$/, "") || isRemoteComponent && component?.getAttribute("name") || (nextData ? "__next" : fallbackName);
   return { name, isRemoteComponent };
 }
-function extractComponentMetadata(component, nextData, name, url) {
-  return {
-    name,
-    bundle: component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || "default",
-    route: component?.getAttribute("data-route") ?? nextData?.page ?? (url.pathname || DEFAULT_ROUTE),
-    runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || RUNTIME_SCRIPT)
-  };
-}
 function extractRemoteShared(doc, name, nextData) {
   const remoteSharedEl = doc.querySelector(
     `#${name}_shared[data-remote-components-shared]`
@@ -1859,7 +1946,7 @@ function extractRemoteShared(doc, name, nextData) {
 function validateComponentFound(component, rsc, nextData, isRemoteComponent, url, name) {
   if (!component || !(rsc || nextData || isRemoteComponent)) {
     throw new RemoteComponentsError(
-      `Remote Component not found on ${url}.${name !== "__vercel_remote_component" ? ` The name for the <RemoteComponent> is "${name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
+      `Remote Component not found on ${url}.${name !== DEFAULT_COMPONENT_NAME ? ` The name for the <RemoteComponent> is "${name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
     );
   }
 }
@@ -1885,10 +1972,15 @@ function parseRemoteComponentDocument(doc, name, url) {
     name
   );
   const rsc = doc.querySelector(`#${resolvedName}_rsc`);
-  const metadata = extractComponentMetadata(
-    component,
-    nextData,
-    resolvedName,
+  const metadata = buildMetadata(
+    {
+      name: resolvedName,
+      bundle: component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle,
+      route: component?.getAttribute("data-route") ?? nextData?.page,
+      runtime: component?.getAttribute("data-runtime") ?? nextData?.props.__REMOTE_COMPONENT__?.runtime ?? RUNTIME_SCRIPT,
+      id: component?.getAttribute("id"),
+      type: component?.getAttribute("data-type")
+    },
     url
   );
   const remoteShared = extractRemoteShared(doc, resolvedName, nextData);
@@ -2104,12 +2196,7 @@ async function getRuntime(type, url, bundle, shared, remoteShared, resolveClient
   }
   if (type === "webpack") {
     const { webpackRuntime: webpackRuntime2 } = await Promise.resolve().then(() => (init_webpack(), webpack_exports));
-    return webpackRuntime2(
-      bundle ?? "default",
-      shared,
-      remoteShared,
-      resolveClientUrl
-    );
+    return webpackRuntime2(bundle, shared, remoteShared, resolveClientUrl);
   } else if (type === "turbopack") {
     const { turbopackRuntime: turbopackRuntime2 } = await Promise.resolve().then(() => (init_turbopack(), turbopack_exports));
     return turbopackRuntime2(
@@ -2132,8 +2219,8 @@ async function getRuntime(type, url, bundle, shared, remoteShared, resolveClient
 import { jsx as jsx2 } from "react/jsx-runtime";
 if (typeof HTMLElement !== "undefined") {
   class RemoteComponent extends HTMLElement {
-    name;
-    bundle;
+    name = DEFAULT_COMPONENT_NAME;
+    bundle = DEFAULT_BUNDLE_NAME;
     fallbackSlot;
     __next = null;
     fouc = null;
@@ -2249,8 +2336,7 @@ if (typeof HTMLElement !== "undefined") {
         this.fallbackSlot = document.createElement("slot");
         this.root.appendChild(this.fallbackSlot);
       }
-      this.name = this.getAttribute("name") || "__vercel_remote_component";
-      this.bundle = "default";
+      this.name = this.getAttribute("name") || this.name;
       this.hostState.stage = "loading";
       const src = this.src;
       this.hostState.abortController = new AbortController();
@@ -2270,10 +2356,7 @@ if (typeof HTMLElement !== "undefined") {
       let html = this.innerHTML;
       if (src) {
         url = getClientOrServerUrl(src, window.location.href);
-        this.name = resolveNameFromSrc(
-          src,
-          this.name ?? "__vercel_remote_component"
-        );
+        this.name = resolveNameFromSrc(src, this.name);
       }
       const resolveClientUrl = url ? bindResolveClientUrl(this.resolveClientUrl, url.href) : void 0;
       if (!remoteComponentChild && url) {
@@ -2316,7 +2399,7 @@ if (typeof HTMLElement !== "undefined") {
       const doc = parser.parseFromString(html, "text/html");
       const parsed = parseRemoteComponentDocument(
         doc,
-        this.name ?? "__vercel_remote_component",
+        this.name,
         url ?? new URL(window.location.href)
       );
       const {
@@ -2340,7 +2423,7 @@ if (typeof HTMLElement !== "undefined") {
         if (!self2.__remote_bundle_url__) {
           self2.__remote_bundle_url__ = {};
         }
-        self2.__remote_bundle_url__[this.bundle ?? "default"] = url;
+        self2.__remote_bundle_url__[this.bundle] = url;
       }
       const metadataEl = document.createElement("script");
       metadataEl.type = "application/json";
@@ -2532,12 +2615,7 @@ if (typeof HTMLElement !== "undefined") {
           window.location.href
         );
       }
-      await preloadScripts(
-        Array.from(scripts),
-        url,
-        this.bundle ?? "default",
-        this.name ?? "__vercel_remote_component"
-      );
+      await preloadScripts(Array.from(scripts), url, this.bundle, this.name);
       if (!isCurrentLoad()) {
         return abandonLoad();
       }
@@ -2616,7 +2694,7 @@ if (typeof HTMLElement !== "undefined") {
                 RemoteComponentFromReadableStream,
                 {
                   initial: false,
-                  name: this.name ?? "__vercel_remote_component"
+                  name: this.name
                 }
               )
             );
@@ -2627,17 +2705,11 @@ if (typeof HTMLElement !== "undefined") {
           // hydrateRoot expects a document or element, but it works for the shadow DOM too
           // @ts-expect-error support for shadow DOM
           this.root,
-          /* @__PURE__ */ jsx2(
-            RemoteComponentFromReadableStream,
-            {
-              initial: true,
-              name: this.name ?? "__vercel_remote_component"
-            }
-          )
+          /* @__PURE__ */ jsx2(RemoteComponentFromReadableStream, { initial: true, name: this.name })
         );
       } else if (nextData) {
         const { Component, App } = nextClientPagesLoader2(
-          this.bundle ?? "default",
+          this.bundle,
           nextData.page ?? "/",
           this.root
         );