remote-components 0.3.1 → 0.3.2

package/dist/host/react.js

@@ -211,11 +211,104 @@ function getClientOrServerUrl(src, serverFallback) {
   return typeof src === "string" ? new URL(src, fallback) : src;
 }
 
-// src/host/shared/remote-image-loader.ts
-function getRemoteBundleOrigin(bundle) {
+// src/utils/index.ts
+function escapeString(str) {
+  return str.replace(/[^a-z0-9]/g, "_");
+}
+function computeScopedName(name, options) {
+  return options.isCrossOrigin ? `${name}_${escapeString(options.remoteHost.toLowerCase())}` : name;
+}
+var attrToProp = {
+  fetchpriority: "fetchPriority",
+  crossorigin: "crossOrigin",
+  imagesrcset: "imageSrcSet",
+  imagesizes: "imageSizes",
+  srcset: "srcSet"
+};
+
+// src/runtime/constants.ts
+var DEFAULT_BUNDLE_NAME = "__vercel_remote_bundle";
+var DEFAULT_COMPONENT_NAME = "__vercel_remote_component";
+var DEFAULT_ROUTE = "/";
+var RUNTIME_WEBPACK = "webpack";
+var RUNTIME_TURBOPACK = "turbopack";
+var RUNTIME_SCRIPT = "script";
+function getBundleKey(bundle) {
+  return escapeString(bundle);
+}
+
+// src/runtime/patterns.ts
+var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
+var NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
+var DOUBLE_SLASH_RE = /(?<!:)\/\//g;
+function collapseDoubleSlashes(path) {
+  return path.replace(DOUBLE_SLASH_RE, "/");
+}
+
+// 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: "" };
+}
+
+// src/host/shared/remote-image-loader.ts
 function createRemoteImageLoader(bundle, resolveClientUrl) {
   const loader = Object.assign(
     ({
@@ -225,7 +318,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}`;
@@ -407,29 +500,6 @@ function resolveNameFromSrc(src, defaultName) {
   return name || defaultName;
 }
 
-// src/utils/index.ts
-function escapeString(str) {
-  return str.replace(/[^a-z0-9]/g, "_");
-}
-var attrToProp = {
-  fetchpriority: "fetchPriority",
-  crossorigin: "crossOrigin",
-  imagesrcset: "imageSrcSet",
-  imagesizes: "imageSizes",
-  srcset: "srcSet"
-};
-
-// src/runtime/constants.ts
-var DEFAULT_BUNDLE_NAME = "__vercel_remote_bundle";
-var DEFAULT_COMPONENT_NAME = "__vercel_remote_component";
-var DEFAULT_ROUTE = "/";
-var RUNTIME_WEBPACK = "webpack";
-var RUNTIME_TURBOPACK = "turbopack";
-var RUNTIME_SCRIPT = "script";
-function getBundleKey(bundle) {
-  return escapeString(bundle);
-}
-
 // src/runtime/html/apply-origin.ts
 var tagNames = [
   "img",
@@ -904,14 +974,6 @@ function createRSCStream(rscName, data) {
   });
 }
 
-// src/runtime/patterns.ts
-var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
-var NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
-var DOUBLE_SLASH_RE = /(?<!:)\/\//g;
-function collapseDoubleSlashes(path) {
-  return path.replace(DOUBLE_SLASH_RE, "/");
-}
-
 // src/runtime/turbopack/patterns.ts
 var REMOTE_SHARED_MARKER_RE = /(?:self|[a-z])\.TURBOPACK_REMOTE_SHARED/;
 var REMOTE_SHARED_ASSIGNMENT_RE = /\.TURBOPACK_REMOTE_SHARED=await (?:__turbopack_context__|[a-z])\.A\((?<sharedModuleId>[0-9]+)\)/;
@@ -921,62 +983,39 @@ var ASYNC_MODULE_ALL_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<vCb
 var TURBOPACK_GLOBAL_RE = /(?:globalThis|self)\s*(?:\.TURBOPACK|\[\s*["']TURBOPACK["']\s*\])/;
 
 // 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) {
@@ -986,17 +1025,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}"]`
     );
@@ -1004,58 +1055,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"
@@ -1067,21 +1101,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();
     };
@@ -1096,43 +1115,177 @@ 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`
+  if (loadChunkPromises.length > 0) {
+    await Promise.all(loadChunkPromises);
+  }
+}
+
+// src/runtime/turbopack/shared-modules.ts
+var 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).";
+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)`
     );
-    await Promise.all(loadChunkLists);
   }
+  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;
 }
 
 // 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();
@@ -1141,48 +1294,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;
 }
@@ -1207,7 +1347,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: {
@@ -1223,16 +1364,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 (!self.__remote_components_turbopack_modules__[bundle]) {
-          self.__remote_components_turbopack_modules__[bundle] = {};
+        if (!scope.moduleCache[esmId]) {
+          scope.moduleCache[esmId] = {};
         }
-        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)) {
@@ -1265,7 +1400,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") {
@@ -1276,7 +1411,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;
@@ -1285,7 +1420,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 };
@@ -1297,16 +1432,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;
       }
@@ -1321,17 +1454,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);
@@ -1342,169 +1473,57 @@ 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
   };
 }
 
-// src/runtime/turbopack/shared-modules.ts
-var 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).";
-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;
-}
-
 // 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) {
     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);
       })
@@ -1526,54 +1545,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;
+      const scope = getScope(bundleName);
+      if (scope) {
+        return requireModule(scope, moduleId ?? id, id);
       }
-      if (bundle && moduleId) {
-        return handleTurbopackModule(bundle, moduleId, 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 }
         );
       }