remote-components 0.3.3 → 0.3.5

package/dist/host/nextjs/app/client-only.js

@@ -47,6 +47,9 @@ var init_app = __esm({
 // src/host/nextjs/app-client-only.tsx
 import { useMemo as useMemo3 } from "react";
 
+// src/host/nextjs/image-shared.ts
+import { createElement, forwardRef } from "react";
+
 // src/utils/index.ts
 function escapeString(str) {
   return str.replace(/[^a-z0-9]/g, "_");
@@ -73,6 +76,62 @@ function getBundleKey(bundle) {
   return escapeString(bundle);
 }
 
+// src/runtime/namespace.ts
+var SHADOW_ROOT_PREFIX = "__remote_components_shadowroot_";
+var LEGACY_ALIASES = [
+  { global: "__remote_component_scopes__", prop: "scopes" },
+  {
+    global: "__remote_components_turbopack_chunk_loader_promise__",
+    prop: "chunkCache"
+  },
+  { global: "__remote_script_entrypoint_mount__", prop: "mountFns" },
+  { global: "__remote_script_entrypoint_unmount__", prop: "unmountFns" },
+  { global: "__remote_bundle_url__", prop: "bundleUrls" },
+  { global: "__rc_module_registry__", prop: "moduleRegistry" },
+  {
+    global: "__remote_component_host_shared_modules__",
+    prop: "hostSharedModules"
+  },
+  { global: "__remote_next_css__", prop: "cssCache" }
+];
+function getNamespace() {
+  const g = globalThis;
+  const existing = g.__remote_components__;
+  if (existing) {
+    return existing;
+  }
+  const ns = {
+    scopes: /* @__PURE__ */ new Map(),
+    chunkCache: {},
+    mountFns: {},
+    unmountFns: {},
+    bundleUrls: {},
+    moduleRegistry: {},
+    dispatcherRuntime: void 0,
+    hostSharedModules: {},
+    cssCache: {},
+    shadowRoots: {}
+  };
+  const nsRecord = ns;
+  for (const { global, prop } of LEGACY_ALIASES) {
+    const legacyValue = g[global];
+    if (legacyValue != null) {
+      nsRecord[prop] = legacyValue;
+    }
+    g[global] = ns[prop];
+  }
+  const gRecord = g;
+  for (const key of Object.keys(gRecord)) {
+    if (key.startsWith(SHADOW_ROOT_PREFIX)) {
+      const suffix = key.slice(SHADOW_ROOT_PREFIX.length);
+      ns.shadowRoots[suffix] = gRecord[key];
+      delete gRecord[key];
+    }
+  }
+  g.__remote_components__ = ns;
+  return ns;
+}
+
 // src/runtime/patterns.ts
 var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
 var NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
@@ -197,7 +256,7 @@ Docs: ${CORS_DOCS_URL}`
 
 // src/utils/logger.ts
 var PREFIX = "remote-components";
-var DEBUG = typeof window !== "undefined" && localStorage.getItem("RC_DEBUG") === "true";
+var DEBUG = typeof window !== "undefined" && localStorage.getItem("RC_DEBUG") === "true" || typeof process !== "undefined" && process.env.RC_DEBUG === "true";
 function logDebug(location2, message) {
   if (DEBUG) {
     console.debug(`[${PREFIX}:${location2}]: ${message}`);
@@ -229,11 +288,7 @@ function warnCrossOriginFetchError(logLocation, url) {
 
 // src/runtime/turbopack/remote-scope.ts
 function getRegistry() {
-  const self = globalThis;
-  if (!self.__remote_component_scopes__) {
-    self.__remote_component_scopes__ = /* @__PURE__ */ new Map();
-  }
-  return self.__remote_component_scopes__;
+  return getNamespace().scopes;
 }
 function createScope(name, url, runtime, resolveClientUrl) {
   const isCrossOrigin = url.origin !== location.origin;
@@ -251,7 +306,8 @@ function createScope(name, url, runtime, resolveClientUrl) {
     resolveClientUrl,
     moduleCache: {},
     sharedModules: {},
-    moduleGlobal: {}
+    moduleGlobal: {},
+    turbopackModules: []
   };
 }
 function registerScope(scope) {
@@ -348,16 +404,41 @@ function createImageLoaderSharedEntries({
   bound,
   unbound
 } = {}) {
-  const entry = (bundle) => {
+  const loaderEntry = (bundle) => {
     const resolveClientUrl = bound ?? resolveForBundle(unbound, bundle);
     return Promise.resolve({
       default: createRemoteImageLoader(bundle, resolveClientUrl),
       __esModule: true
     });
   };
+  const imageEntry = async (bundle) => {
+    const resolveClientUrl = bound ?? resolveForBundle(unbound, bundle);
+    const rawLoader = createRemoteImageLoader(bundle, resolveClientUrl);
+    const remoteLoader = Object.assign(
+      (p) => rawLoader({ ...p, config: { path: "/_next/image" } }),
+      { __next_img_default: true }
+    );
+    const mod = await import("next/image");
+    const OriginalImage = mod.default;
+    const RemoteImage = forwardRef(
+      (props, ref) => createElement(OriginalImage, {
+        ...props,
+        loader: props.loader ?? remoteLoader,
+        ref
+      })
+    );
+    RemoteImage.displayName = "RemoteImage";
+    return { ...mod, default: RemoteImage, __esModule: true };
+  };
   return {
-    "next/dist/shared/lib/image-loader": entry,
-    "next/dist/esm/shared/lib/image-loader": entry
+    "next/dist/shared/lib/image-loader": loaderEntry,
+    "next/dist/esm/shared/lib/image-loader": loaderEntry,
+    // Can be removed once 0.2.x support is dropped.
+    "next/image": imageEntry,
+    // Can be removed once 0.2.x support is dropped.
+    "next/dist/client/image-component": imageEntry,
+    // Can be removed once 0.2.x support is dropped.
+    "next/dist/api/image": imageEntry
   };
 }
 
@@ -442,12 +523,30 @@ function getClientOrServerUrl(src, serverFallback) {
   return typeof src === "string" ? new URL(src, fallback) : src;
 }
 
+// src/host/shared/lifecycle.ts
+function makeReactEmitter(callbacks) {
+  return {
+    beforeLoad(src) {
+      callbacks.onBeforeLoad?.(src);
+    },
+    load(src) {
+      callbacks.onLoad?.(src);
+    },
+    error(error, _src) {
+      callbacks.onError?.(error);
+    },
+    change(info) {
+      callbacks.onChange?.(info);
+    }
+  };
+}
+
 // src/host/shared/polyfill.tsx
 import { jsx } from "react/jsx-runtime";
 function sharedPolyfills(shared2, resolveClientUrl) {
-  const self = globalThis;
+  const hostShared = getNamespace().hostSharedModules;
   const polyfill = {
-    "next/dist/client/components/navigation": self.__remote_component_host_shared_modules__?.["next/navigation"] ?? shared2?.["next/navigation"] ?? (() => Promise.resolve({
+    "next/dist/client/components/navigation": hostShared["next/navigation"] ?? shared2?.["next/navigation"] ?? (() => Promise.resolve({
       useRouter() {
         return {
           push: (routerUrl) => {
@@ -478,7 +577,7 @@ function sharedPolyfills(shared2, resolveClientUrl) {
       },
       __esModule: true
     })),
-    "next/dist/client/app-dir/link": self.__remote_component_host_shared_modules__?.["next/link"] ?? shared2?.["next/link"] ?? (() => Promise.resolve({
+    "next/dist/client/app-dir/link": hostShared["next/link"] ?? shared2?.["next/link"] ?? (() => Promise.resolve({
       default: ({
         scroll: _,
         replace,
@@ -528,7 +627,7 @@ function sharedPolyfills(shared2, resolveClientUrl) {
       },
       __esModule: true
     })),
-    "next/dist/client/app-dir/form": self.__remote_component_host_shared_modules__?.["next/form"] ?? shared2?.["next/form"] ?? (() => Promise.resolve({
+    "next/dist/client/app-dir/form": hostShared["next/form"] ?? shared2?.["next/form"] ?? (() => Promise.resolve({
       default: () => {
         throw new Error("Next.js <Form> component not implemented");
       },
@@ -539,17 +638,17 @@ function sharedPolyfills(shared2, resolveClientUrl) {
     // This gives us full next/image fidelity (fill, priority, srcSet, blur
     // placeholders, error handling) while routing image optimization through the
     // remote app's /_next/image endpoint.
-    "next/dist/shared/lib/image-loader": self.__remote_component_host_shared_modules__?.["next/dist/shared/lib/image-loader"] ?? shared2?.["next/dist/shared/lib/image-loader"] ?? ((bundle) => Promise.resolve({
+    "next/dist/shared/lib/image-loader": hostShared["next/dist/shared/lib/image-loader"] ?? shared2?.["next/dist/shared/lib/image-loader"] ?? ((bundle) => Promise.resolve({
       default: createRemoteImageLoader(bundle, resolveClientUrl),
       __esModule: true
     })),
-    "next/dist/client/script": self.__remote_component_host_shared_modules__?.["next/script"] ?? shared2?.["next/script"] ?? (() => Promise.resolve({
+    "next/dist/client/script": hostShared["next/script"] ?? shared2?.["next/script"] ?? (() => Promise.resolve({
       // TODO: implement <Script> component for non-Next.js host applications
       // do not throw an error for now
       default: () => null,
       __esModule: true
     })),
-    "next/router": self.__remote_component_host_shared_modules__?.["next/router"] ?? shared2?.["next/router"] ?? (() => (
+    "next/router": hostShared["next/router"] ?? shared2?.["next/router"] ?? (() => (
       // TODO: incomplete implementation
       Promise.resolve({
         useRouter() {
@@ -585,34 +684,70 @@ function sharedPolyfills(shared2, resolveClientUrl) {
   return polyfill;
 }
 
-// src/host/shared/state.ts
-function createHostState() {
+// src/host/shared/shared-module-resolver.ts
+var CORE_REACT_PATH_MAP = {
+  react: "/react/index.js",
+  "react/jsx-dev-runtime": "/react/jsx-dev-runtime.js",
+  "react/jsx-runtime": "/react/jsx-runtime.js",
+  "react-dom": "/react-dom/index.js",
+  "react-dom/client": "/react-dom/client.js"
+};
+var VENDOR_SHARED = Object.fromEntries(
+  Object.entries(CORE_REACT_PATH_MAP).filter(([key]) => key !== "react-dom/client").map(([key, path]) => [key, `'${path}'`])
+);
+function buildCoreShared(userShared) {
   return {
-    stage: "idle",
-    prevSrc: void 0,
-    prevUrl: void 0,
-    prevName: void 0,
-    prevIsRemoteComponent: false,
-    abortController: void 0
+    react: async () => (await import("react")).default,
+    "react-dom": async () => (await import("react-dom")).default,
+    "react/jsx-dev-runtime": async () => (await import("react/jsx-dev-runtime")).default,
+    "react/jsx-runtime": async () => (await import("react/jsx-runtime")).default,
+    "react-dom/client": async () => (await import("react-dom/client")).default,
+    ...userShared
   };
 }
-
-// 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;
+function buildHostShared(userShared, resolveClientUrl, options) {
+  const self = globalThis;
+  const result = {
+    ...sharedPolyfills(userShared, resolveClientUrl),
+    ...self.__remote_component_host_shared_modules__,
+    ...userShared
+  };
+  if (options?.includeRemoteComponentShared) {
+    Object.assign(result, self.__remote_component_shared__);
+  }
+  return result;
+}
+async function buildWebpackResolve(hostShared, remoteShared, bundle, reactModules, callerTag = "SharedModuleResolver") {
+  const resolve = {
+    ...reactModules,
+    ...Object.entries(remoteShared).reduce(
+      (acc, [key, value]) => {
+        if (typeof hostShared[value] !== "undefined") {
+          acc[key.replace(/^\(ssr\)\/(?<relative>\.\/)?/, "")] = hostShared[value];
+        } else {
+          logDebug(
+            callerTag,
+            `Remote requests "${value}" but host doesn't provide it`
+          );
+        }
+        return acc;
+      },
+      {}
+    )
+  };
+  await Promise.all(
+    Object.entries(resolve).map(async ([key, value]) => {
+      if (typeof value === "function") {
+        resolve[key] = await value(bundle);
+      }
+      return Promise.resolve(value);
+    })
+  );
+  return resolve;
 }
 
-// src/runtime/html/apply-origin.ts
-var tagNames = [
+// src/runtime/html/html-spec.ts
+var ORIGIN_REWRITE_TAGS = [
   "img",
   "source",
   "video",
@@ -623,10 +758,37 @@ var tagNames = [
   "script",
   "link"
 ];
+var ID_SUFFIX_RSC = "_rsc";
+var ID_SUFFIX_SSR = "_ssr";
+var ID_SUFFIX_SHARED = "_shared";
+var DATA_BUNDLE = "data-bundle";
+var DATA_ROUTE = "data-route";
+var DATA_RUNTIME = "data-runtime";
+var DATA_TYPE = "data-type";
+var DATA_SRC = "data-src";
+var DATA_REMOTE_COMPONENTS_SHARED = "data-remote-components-shared";
+var TAG_REMOTE_COMPONENT = "remote-component";
+var NEXT_DATA_ID = "__NEXT_DATA__";
+var REMOTE_NEXT_DATA_ID = "__REMOTE_NEXT_DATA__";
+var NEXT_CONTAINER_ID = "__next";
+
+// src/runtime/html/rewrite-srcset.ts
+function rewriteSrcset(srcset, base, resolve) {
+  return srcset.split(",").map((entry) => {
+    const [url, descriptor] = entry.trim().split(/\s+/);
+    if (!url)
+      return entry;
+    const absoluteUrl = new URL(url, base).href;
+    const resolvedUrl = resolve ? resolve(absoluteUrl) : absoluteUrl;
+    return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;
+  }).join(", ");
+}
+
+// src/runtime/html/apply-origin.ts
 function applyOriginToNodes(doc, url, resolveClientUrl) {
   if (url.origin !== location.origin) {
     const nodes = doc.querySelectorAll(
-      tagNames.map(
+      ORIGIN_REWRITE_TAGS.map(
         (type) => `${type}[src],${type}[srcset],${type}[href],${type}[imagesrcset]`
       ).join(",")
     );
@@ -644,29 +806,17 @@ function applyOriginToNodes(doc, url, resolveClientUrl) {
         );
       }
       if (node.hasAttribute("srcset")) {
-        const srcSet = node.getAttribute("srcset")?.split(",").map((entry) => {
-          const [urlPart, descriptor] = entry.trim().split(/\s+/);
-          if (!urlPart)
-            return entry;
-          const absoluteUrl = new URL(urlPart, url).href;
-          const resolvedUrl = resolveClientUrl?.(absoluteUrl) ?? absoluteUrl;
-          return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;
-        }).join(", ");
-        if (srcSet) {
-          node.setAttribute("srcset", srcSet);
+        const raw = node.getAttribute("srcset");
+        if (raw) {
+          const resolve = resolveClientUrl ? (abs) => resolveClientUrl(abs) ?? abs : void 0;
+          node.setAttribute("srcset", rewriteSrcset(raw, url, resolve));
         }
       }
       if (node.hasAttribute("imagesrcset")) {
-        const srcSet = node.getAttribute("imagesrcset")?.split(",").map((entry) => {
-          const [urlPart, descriptor] = entry.trim().split(/\s+/);
-          if (!urlPart)
-            return entry;
-          const absoluteUrl = new URL(urlPart, url).href;
-          const resolvedUrl = resolveClientUrl?.(absoluteUrl) ?? absoluteUrl;
-          return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;
-        }).join(", ");
-        if (srcSet) {
-          node.setAttribute("imagesrcset", srcSet);
+        const raw = node.getAttribute("imagesrcset");
+        if (raw) {
+          const resolve = resolveClientUrl ? (abs) => resolveClientUrl(abs) ?? abs : void 0;
+          node.setAttribute("imagesrcset", rewriteSrcset(raw, url, resolve));
         }
       }
     });
@@ -707,26 +857,28 @@ function buildMetadata(attrs, url) {
 
 // src/runtime/html/parse-remote-html.ts
 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}"]`)) {
+  if (doc.querySelectorAll(`div[${DATA_BUNDLE}][${DATA_ROUTE}]`).length > 1 && !doc.querySelector(
+    `div[${DATA_BUNDLE}][${DATA_ROUTE}][id^="${name}"]`
+  ) || doc.querySelectorAll(`${TAG_REMOTE_COMPONENT}:not([src])`).length > 1 && !doc.querySelector(`${TAG_REMOTE_COMPONENT}[name="${name}"]`)) {
     throw multipleRemoteComponentsError(url);
   }
 }
 function findComponentElement(doc, name) {
-  return doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) ?? doc.querySelector("div[data-bundle][data-route]") ?? doc.querySelector("div#__next") ?? doc.querySelector(`remote-component[name="${name}"]:not([src])`) ?? doc.querySelector("remote-component:not([src])");
+  return doc.querySelector(`div[${DATA_BUNDLE}][${DATA_ROUTE}][id^="${name}"]`) ?? doc.querySelector(`div[${DATA_BUNDLE}][${DATA_ROUTE}]`) ?? doc.querySelector(`div#${NEXT_CONTAINER_ID}`) ?? doc.querySelector(`${TAG_REMOTE_COMPONENT}[name="${name}"]:not([src])`) ?? doc.querySelector(`${TAG_REMOTE_COMPONENT}:not([src])`);
 }
 function parseNextData(doc) {
   return JSON.parse(
-    (doc.querySelector("#__NEXT_DATA__") ?? doc.querySelector("#__REMOTE_NEXT_DATA__"))?.textContent ?? "null"
+    (doc.querySelector(`#${NEXT_DATA_ID}`) ?? doc.querySelector(`#${REMOTE_NEXT_DATA_ID}`))?.textContent ?? "null"
   );
 }
 function resolveComponentName(component, nextData, fallbackName) {
-  const isRemoteComponent = component?.tagName.toLowerCase() === "remote-component";
-  const name = component?.getAttribute("id")?.replace(/_ssr$/, "") || isRemoteComponent && component?.getAttribute("name") || (nextData ? "__next" : fallbackName);
+  const isRemoteComponent = component?.tagName.toLowerCase() === TAG_REMOTE_COMPONENT;
+  const name = component?.getAttribute("id")?.replace(new RegExp(`${ID_SUFFIX_SSR}$`), "") || isRemoteComponent && component?.getAttribute("name") || (nextData ? "__next" : fallbackName);
   return { name, isRemoteComponent };
 }
 function extractRemoteShared(doc, name, nextData) {
   const remoteSharedEl = doc.querySelector(
-    `#${name}_shared[data-remote-components-shared]`
+    `#${name}${ID_SUFFIX_SHARED}[${DATA_REMOTE_COMPONENTS_SHARED}]`
   );
   const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
   remoteSharedEl?.remove();
@@ -747,7 +899,7 @@ function extractLinks(doc, component) {
 function extractScripts(doc, component, isRemoteComponent) {
   return Array.from(
     (isRemoteComponent ? component : doc).querySelectorAll(
-      "script[src],script[data-src]"
+      `script[src],script[${DATA_SRC}]`
     )
   );
 }
@@ -760,15 +912,15 @@ function parseRemoteComponentDocument(doc, name, url) {
     nextData,
     name
   );
-  const rsc = doc.querySelector(`#${resolvedName}_rsc`);
+  const rsc = doc.querySelector(`#${resolvedName}${ID_SUFFIX_RSC}`);
   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,
+      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")
+      type: component?.getAttribute(DATA_TYPE)
     },
     url
   );
@@ -796,48 +948,6 @@ function parseRemoteComponentDocument(doc, name, url) {
   };
 }
 
-// src/runtime/html/set-attributes-from-props.ts
-var DOMAttributeNames = {
-  acceptCharset: "accept-charset",
-  className: "class",
-  htmlFor: "for",
-  httpEquiv: "http-equiv",
-  noModule: "noModule"
-};
-var ignoreProps = [
-  "onLoad",
-  "onReady",
-  "dangerouslySetInnerHTML",
-  "children",
-  "onError",
-  "strategy",
-  "stylesheets"
-];
-function isBooleanScriptAttribute(attr) {
-  return ["async", "defer", "noModule"].includes(attr);
-}
-function setAttributesFromProps(el, props) {
-  for (const [p, value] of Object.entries(props)) {
-    if (!Object.hasOwn(props, p))
-      continue;
-    if (ignoreProps.includes(p))
-      continue;
-    if (value === void 0) {
-      continue;
-    }
-    const attr = DOMAttributeNames[p] || p.toLowerCase();
-    if (el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr)) {
-      el[attr] = Boolean(value);
-    } else {
-      el.setAttribute(attr, String(value));
-    }
-    if (value === false || el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr) && (!value || value === "false")) {
-      el.setAttribute(attr, "");
-      el.removeAttribute(attr);
-    }
-  }
-}
-
 // src/runtime/loaders/component-loader.ts
 import * as React from "react";
 import * as JSXDevRuntime from "react/jsx-dev-runtime";
@@ -857,13 +967,15 @@ function applySharedModules(bundle, resolve) {
     `Shared modules to resolve: ${Object.keys(resolve)}`
   );
   const self = globalThis;
-  if (self.__remote_webpack_require__?.[bundle]) {
+  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] ?? self.__remote_webpack_require__[bundle].m ?? {}
+      self.__remote_webpack_module_map__?.[bundle] ?? webpackBundle.m ?? {}
     );
     logDebug(
       "SharedModules",
-      `Available module paths in __remote_webpack_require__[${bundle}]: ${modulePaths}`
+      `Available module paths for bundle "${bundle}": ${modulePaths}`
     );
     for (const [key, value] of Object.entries(resolve)) {
       const exactIds = modulePaths.filter((p) => p === key);
@@ -875,7 +987,6 @@ function applySharedModules(bundle, resolve) {
         );
       }
       for (const id of ids) {
-        const webpackBundle = self.__remote_webpack_require__[bundle];
         if (webpackBundle.m) {
           const resolvedId = self.__remote_webpack_module_map__?.[bundle]?.[id] ? `${self.__remote_webpack_module_map__[bundle][id]}` : id;
           if (resolvedId !== id) {
@@ -973,10 +1084,8 @@ function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
     ];
     const { default: Component } = componentLoader();
     const { default: App } = appLoader();
-    if (!self.__remote_next_css__) {
-      self.__remote_next_css__ = {};
-    }
-    if (!self.__remote_next_css__[bundle]) {
+    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);
@@ -994,15 +1103,15 @@ function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
         node.remove();
         node = nextCss.previousSibling;
       }
-      self.__remote_next_css__[bundle] = elements;
+      cssCache[bundle] = elements;
     }
     if (styleContainer) {
-      const elements = self.__remote_next_css__[bundle];
+      const elements = cssCache[bundle];
       elements.forEach((el) => {
         styleContainer.appendChild(el.cloneNode(true));
       });
     } else {
-      const elements = self.__remote_next_css__[bundle];
+      const elements = cssCache[bundle];
       elements.forEach((el) => {
         document.head.appendChild(el);
       });
@@ -1039,6 +1148,18 @@ function fixPayload(payload) {
     }
   }
 }
+function buildRSCChunks(rscName, data) {
+  const chunks = [];
+  for (const chunk of data) {
+    for (const line of chunk.split("\n")) {
+      const match = /\.push\("(?<rsc>.*)"\);$/.exec(line);
+      if (match?.groups?.rsc) {
+        chunks.push(JSON.parse(`"${match.groups.rsc}"`));
+      }
+    }
+  }
+  return chunks;
+}
 function createRSCStream(rscName, data) {
   return new ReadableStream({
     type: "bytes",
@@ -1046,16 +1167,11 @@ function createRSCStream(rscName, data) {
       const encoder = new TextEncoder();
       const self = globalThis;
       if (data.length > 0) {
-        data.forEach((chunk) => {
-          const lines = chunk.split("\n");
-          for (const line of lines) {
-            const match = /\.push\("(?<rsc>.*)"\);$/.exec(line);
-            if (match?.groups?.rsc) {
-              self[rscName] = self[rscName] ?? [];
-              self[rscName].push(JSON.parse(`"${match.groups.rsc}"`));
-            }
-          }
-        });
+        const parsed = buildRSCChunks(rscName, data);
+        if (parsed.length > 0) {
+          self[rscName] = self[rscName] ?? [];
+          self[rscName].push(...parsed);
+        }
       }
       const allChunks = (self[rscName] ?? [`0:[null]
 `]).join("");
@@ -1085,12 +1201,38 @@ function createRSCStream(rscName, data) {
   });
 }
 
+// src/runtime/rsc-imports.ts
+async function importRSCClientBrowser() {
+  try {
+    return await import("next/dist/compiled/react-server-dom-webpack/client.browser");
+  } catch {
+    const mod = await import("react-server-dom-webpack/client.browser");
+    return mod.default ?? mod;
+  }
+}
+
 // src/runtime/turbopack/patterns.ts
+var MODULE_ID_PATTERN = '"[^"]+"|[0-9]+';
+function stripQuotes(value) {
+  if (value.startsWith('"') && value.endsWith('"')) {
+    return value.slice(1, -1);
+  }
+  return value;
+}
+function extractGroup(re, input, group) {
+  const raw = re.exec(input)?.groups?.[group];
+  return raw ? stripQuotes(raw) : void 0;
+}
 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]+)\)/;
-var ASYNC_MODULE_LOADER_RE = /(?:__turbopack_context__|e)\.A\((?<asyncSharedModuleId>[0-9]+)\)/;
-var ASYNC_MODULE_RESOLVE_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<inner>parentImport|e)=>Promise\.resolve\(\)\.then\(\(\)=>\k<inner>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
-var ASYNC_MODULE_ALL_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<vCb>parentImport|t)=>Promise\.all\(\["[^"]+"\]\.map\((?<mapCb>chunk|t)=>\k<ctx>\.l\(\k<mapCb>\)\)\)\.then\(\(\)=>\k<vCb>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
+var REMOTE_SHARED_ASSIGNMENT_RE = new RegExp(
+  `\\.TURBOPACK_REMOTE_SHARED\\s*=\\s*await (?:__turbopack_context__|[a-z])\\.A\\((?<sharedModuleId>${MODULE_ID_PATTERN})\\)`
+);
+var ASYNC_MODULE_LOADER_RE = new RegExp(
+  `(?:__turbopack_context__|[a-z])\\.A\\((?<asyncSharedModuleId>${MODULE_ID_PATTERN})\\)`
+);
+var ASYNC_MODULE_CALLBACK_RE = new RegExp(
+  `(?:parentImport|[a-z])\\((?<sharedModuleId>${MODULE_ID_PATTERN})\\)`
+);
 var TURBOPACK_GLOBAL_RE = /(?:globalThis|self)\s*(?:\.TURBOPACK|\[\s*["']TURBOPACK["']\s*\])/;
 
 // src/runtime/turbopack/chunk-loader.ts
@@ -1100,6 +1242,7 @@ function loadChunkWithScope(scope, chunkId) {
     `loadChunkWithScope: "${chunkId}" (scope: "${scope.scopedName}")`
   );
   const self = globalThis;
+  const ns = getNamespace();
   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) {
@@ -1110,35 +1253,31 @@ function loadChunkWithScope(scope, chunkId) {
   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];
+  if (ns.chunkCache[url]) {
+    logDebug("ChunkLoader", `Cache hit for "${chunkId}" (url="${url}")`);
+    return ns.chunkCache[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, scope, url);
-        }
-      }).then(resolve).catch((error) => {
-        const isProxied = isProxiedUrl(resolvedUrl);
-        if (isProxied) {
-          reject(failedProxiedAssetError("chunk", url, resolvedUrl));
-        } else {
-          warnCrossOriginFetchError("ChunkLoader", url);
-          reject(error);
-        }
-      });
-    }
-  );
-  return self.__remote_components_turbopack_chunk_loader_promise__[url];
+  ns.chunkCache[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, scope, url);
+      }
+    }).then(resolve).catch((error) => {
+      const isProxied = isProxiedUrl(resolvedUrl);
+      if (isProxied) {
+        reject(failedProxiedAssetError("chunk", url, resolvedUrl));
+      } else {
+        warnCrossOriginFetchError("ChunkLoader", url);
+        reject(error);
+      }
+    });
+  });
+  return ns.chunkCache[url];
 }
 function createChunkDispatcher() {
   return function __chunk_dispatcher__(chunkId, scriptBundle) {
@@ -1187,19 +1326,39 @@ async function handleTurbopackChunk(code, scope, url) {
     `//# sourceMappingURL=${new URL(".", new URL(url, scope.url)).href}$1$2.js.map`
   );
   if (!self[`TURBOPACK_${globalKey}`]) {
-    const chunkData = [];
-    const turbopackObject = {
-      push: (item) => {
-        if (Array.isArray(item)) {
-          chunkData.push(item);
-        } else {
-          chunkData.push([item]);
+    const wrapPush = (target) => {
+      const originalPush = target.push;
+      if (typeof originalPush !== "function")
+        return target;
+      target.push = (...items) => {
+        for (const item of items) {
+          if (Array.isArray(item)) {
+            for (const entry of item) {
+              scope.turbopackModules.push(entry);
+            }
+          } else {
+            scope.turbopackModules.push(item);
+          }
         }
-        return chunkData.length;
-      },
-      __chunks__: chunkData
+        return originalPush.apply(target, items);
+      };
+      return target;
     };
-    self[`TURBOPACK_${globalKey}`] = turbopackObject;
+    const globalProp = `TURBOPACK_${globalKey}`;
+    let currentValue = wrapPush([]);
+    Object.defineProperty(self, globalProp, {
+      get() {
+        return currentValue;
+      },
+      set(newValue) {
+        if (newValue && typeof newValue === "object") {
+          wrapPush(newValue);
+        }
+        currentValue = newValue;
+      },
+      configurable: true,
+      enumerable: true
+    });
   }
   await new Promise((scriptResolve, scriptReject) => {
     const blob = new Blob([transformedCode], {
@@ -1251,13 +1410,13 @@ async function handleTurbopackChunk(code, scope, url) {
 // 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) {
+  if (scope.turbopackModules.length > 0) {
+    return scope.turbopackModules;
+  }
   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();
   }
@@ -1281,7 +1440,11 @@ async function initializeSharedModules(scope, hostShared = {}, remoteShared = {}
     if (sharedModuleInitializerIndex > 0) {
       const sharedModuleInitializerCode = allModules[sharedModuleInitializerIndex].toString();
       const sharedModuleInitializerId = allModules[sharedModuleInitializerIndex - 1];
-      const { sharedModuleId } = REMOTE_SHARED_ASSIGNMENT_RE.exec(sharedModuleInitializerCode)?.groups ?? {};
+      const sharedModuleId = extractGroup(
+        REMOTE_SHARED_ASSIGNMENT_RE,
+        sharedModuleInitializerCode,
+        "sharedModuleId"
+      );
       if (sharedModuleId) {
         const { default: sharedModuleInitializerInstance } = handleTurbopackModule(
           scope,
@@ -1339,20 +1502,22 @@ async function initializeSharedModules(scope, hostShared = {}, remoteShared = {}
 }
 function extractSharedModuleIds(shared2, scope) {
   return Object.entries(shared2).filter(([, value]) => typeof value === "function").reduce((acc, [key, value]) => {
-    const { asyncSharedModuleId } = ASYNC_MODULE_LOADER_RE.exec(value.toString())?.groups ?? {};
+    const asyncSharedModuleId = extractGroup(
+      ASYNC_MODULE_LOADER_RE,
+      value.toString(),
+      "asyncSharedModuleId"
+    );
     if (asyncSharedModuleId) {
-      const asyncSharedModuleIdNumber = Number(asyncSharedModuleId);
-      let asyncSharedModule;
-      const turbopackModules = getTurbopackModules(scope) ?? [];
-      const asyncSharedModuleIdIndex = turbopackModules.indexOf(
-        asyncSharedModuleIdNumber
+      const asyncSharedModule = findModuleInit(
+        getTurbopackModules(scope),
+        asyncSharedModuleId
       );
-      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 ?? {};
+        const sharedModuleId = extractGroup(
+          ASYNC_MODULE_CALLBACK_RE,
+          asyncSharedModule.toString(),
+          "sharedModuleId"
+        );
         acc[sharedModuleId ?? asyncSharedModuleId] = key.replace(
           "__remote_shared_module_",
           ""
@@ -1443,9 +1608,17 @@ function findModuleInit(modules, moduleId) {
   if (idx >= 0) {
     return flat.slice(idx + 1).find((e) => typeof e === "function");
   }
-  return flat.find(
-    (e) => Boolean(e && typeof e === "object" && moduleId in e)
-  )?.[moduleId];
+  for (const entry of flat) {
+    if (!entry || typeof entry !== "object")
+      continue;
+    const obj = entry;
+    if (moduleId in obj)
+      return obj[moduleId];
+    const prefixKey = Object.keys(obj).find((k) => k.startsWith(moduleId));
+    if (prefixKey)
+      return obj[prefixKey];
+  }
+  return void 0;
 }
 function createTurbopackContext(scope, exports, moduleExports, modules, moduleInit, id) {
   const scopedRequire = (moduleId) => requireModule(scope, moduleId, formatRemoteId(scope, String(moduleId)));
@@ -1524,7 +1697,10 @@ function createTurbopackContext(scope, exports, moduleExports, modules, moduleIn
       }
       if (typeof mod !== "object" || mod === null) {
         mod = { default: mod };
-      } else if (!("default" in mod) && mod.toString() !== "[object Module]") {
+      } else if (!("default" in mod) && // ES module namespace objects have a null prototype, so calling
+      // mod.toString() directly throws. Use Object.prototype.toString
+      // to safely detect them.
+      Object.prototype.toString.call(mod) !== "[object Module]") {
         try {
           mod.default = mod;
         } catch {
@@ -1588,21 +1764,38 @@ function createTurbopackContext(scope, exports, moduleExports, modules, moduleIn
   };
 }
 
-// src/runtime/turbopack/webpack-runtime.ts
-async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location.href), bundle, shared2 = {}, remoteShared = {}, resolveClientUrl) {
+// src/runtime/turbopack/remote-scope-setup.ts
+async function setupRemoteScope(runtime, scripts = [], url = new URL(location.href), bundle, resolveClientUrl) {
   const self = globalThis;
+  const ns = getNamespace();
   const bundleName = bundle ?? "default";
+  const existingScope = getScope(bundleName);
+  if (existingScope && existingScope.url.origin === url.origin) {
+    logDebug(
+      "WebpackRuntime",
+      `Reusing scope "${existingScope.scopedName}" (turbopackModules=${existingScope.turbopackModules.length})`
+    );
+    existingScope.resolveClientUrl = resolveClientUrl;
+    if (runtime === RUNTIME_TURBOPACK) {
+      await Promise.allSettled(
+        scripts.map(
+          (script) => script.src ? loadChunkWithScope(existingScope, script.src) : Promise.resolve(void 0)
+        )
+      );
+    }
+    return existingScope;
+  }
   const scope = createScope(bundleName, url, runtime, resolveClientUrl);
   registerScope(scope);
-  if (!self.__remote_bundle_url__) {
-    self.__remote_bundle_url__ = {};
+  if (runtime === RUNTIME_WEBPACK && self.__remote_webpack_require__?.[bundleName]) {
+    scope.webpackRequire = self.__remote_webpack_require__[bundleName];
   }
-  self.__remote_bundle_url__[bundleName] = url;
+  ns.bundleUrls[bundleName] = url;
   if (scope.scopedName !== bundleName) {
-    self.__remote_bundle_url__[scope.scopedName] = url;
+    ns.bundleUrls[scope.scopedName] = url;
   }
   self.__webpack_get_script_filename__ = () => null;
-  const willCreateDispatchers = typeof self.__webpack_require__ !== "function" || self.__webpack_require_type__ !== "turbopack";
+  const willCreateDispatchers = typeof self.__webpack_require__ !== "function" || ns.dispatcherRuntime !== "turbopack";
   if (willCreateDispatchers) {
     if (!self.__original_webpack_require__ && !self.__original_webpack_chunk_load__) {
       self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;
@@ -1610,6 +1803,7 @@ async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location
     }
     self.__webpack_chunk_load__ = createChunkDispatcher();
     self.__webpack_require__ = createModuleDispatcher(runtime);
+    ns.dispatcherRuntime = runtime;
     self.__webpack_require_type__ = runtime;
     if (self.__remote_webpack_require__ && runtime === RUNTIME_TURBOPACK) {
       self.__remote_webpack_require__[bundleName] = self.__webpack_require__;
@@ -1637,15 +1831,7 @@ async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location
       }
     }
   }
-  const coreShared = {
-    react: async () => (await import("react")).default,
-    "react-dom": async () => (await import("react-dom")).default,
-    "react/jsx-dev-runtime": async () => (await import("react/jsx-dev-runtime")).default,
-    "react/jsx-runtime": async () => (await import("react/jsx-runtime")).default,
-    "react-dom/client": async () => (await import("react-dom/client")).default,
-    ...shared2
-  };
-  await initializeSharedModules(scope, coreShared, remoteShared);
+  return scope;
 }
 function createModuleDispatcher(runtime) {
   return (id) => {
@@ -1662,6 +1848,9 @@ function createModuleDispatcher(runtime) {
     );
     try {
       if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {
+        const scope2 = getScope(bundle);
+        if (scope2?.webpackRequire)
+          return scope2.webpackRequire(moduleId);
         return self.__remote_webpack_require__?.[bundle]?.(moduleId);
       }
       const scope = getScope(bundleName);
@@ -1779,44 +1968,33 @@ async function loadRemoteComponent({
       "ComponentLoader",
       `Remote shared modules requested: ${JSON.stringify(remoteShared)}`
     );
-    await setupWebpackRuntime(
+    const scope = await setupRemoteScope(
       runtime,
       scripts,
       url,
       bundle,
-      hostShared,
-      remoteShared,
       resolveClientUrl
     );
+    if (runtime === "turbopack") {
+      await initializeSharedModules(
+        scope,
+        buildCoreShared(hostShared),
+        remoteShared
+      );
+    }
     if (bundle) {
-      const resolve = {
-        "/react/index.js": React,
-        "/react/jsx-dev-runtime.js": JSXDevRuntime,
-        "/react/jsx-runtime.js": JSXRuntime,
-        "/react-dom/index.js": ReactDOM,
-        "/react-dom/client.js": ReactDOMClient,
-        ...Object.entries(remoteShared).reduce(
-          (acc, [key, value]) => {
-            if (typeof hostShared[value] !== "undefined") {
-              acc[key.replace(/^\(ssr\)\/(?<relative>\.\/)?/, "")] = hostShared[value];
-            } else {
-              logDebug(
-                "ComponentLoader",
-                `Remote requests "${value}" but host doesn't provide it`
-              );
-            }
-            return acc;
-          },
-          {}
-        )
-      };
-      await Promise.all(
-        Object.entries(resolve).map(async ([key, value]) => {
-          if (typeof value === "function") {
-            resolve[key] = await value(bundle);
-          }
-          return Promise.resolve(value);
-        })
+      const resolve = await buildWebpackResolve(
+        hostShared,
+        remoteShared,
+        bundle,
+        {
+          "/react/index.js": React,
+          "/react/jsx-dev-runtime.js": JSXDevRuntime,
+          "/react/jsx-runtime.js": JSXRuntime,
+          "/react-dom/index.js": ReactDOM,
+          "/react-dom/client.js": ReactDOMClient
+        },
+        "ComponentLoader"
       );
       applySharedModules(bundle, resolve);
     } else {
@@ -1844,19 +2022,8 @@ async function loadRemoteComponent({
     };
   }
 }
-async function importCreateFromReadableStream() {
-  try {
-    const { createFromReadableStream } = await import("next/dist/compiled/react-server-dom-webpack/client.browser");
-    return createFromReadableStream;
-  } catch {
-    const {
-      default: { createFromReadableStream }
-    } = await import("react-server-dom-webpack/client.browser");
-    return createFromReadableStream;
-  }
-}
 async function loadRSCComponent(rscName, data) {
-  const createFromReadableStream = await importCreateFromReadableStream();
+  const { createFromReadableStream } = await importRSCClientBrowser();
   if (typeof createFromReadableStream !== "function") {
     throw new RemoteComponentsError(
       'Failed to import "react-server-dom-webpack". Is Next.js installed correctly?'
@@ -1920,10 +2087,9 @@ async function importViaCallback(absoluteSrc, resolveClientUrl) {
     URL.revokeObjectURL(moduleBlobUrl);
     URL.revokeObjectURL(wrapperBlobUrl);
   }
-  const registry = globalThis.__rc_module_registry__;
-  const mod = registry?.[absoluteSrc] ?? {};
-  if (registry)
-    delete registry[absoluteSrc];
+  const registry = getNamespace().moduleRegistry;
+  const mod = registry[absoluteSrc] ?? {};
+  delete registry[absoluteSrc];
   return mod;
 }
 async function importDirectly(absoluteSrc) {
@@ -1953,12 +2119,12 @@ function resolveScriptSrc(script, url) {
   return rawSrc;
 }
 async function loadStaticRemoteComponent(scripts, url, resolveClientUrl) {
-  const self = globalThis;
-  if (self.__remote_script_entrypoint_mount__?.[url.href]) {
-    self.__remote_script_entrypoint_mount__[url.href] = /* @__PURE__ */ new Set();
+  const ns = getNamespace();
+  if (ns.mountFns[url.href]) {
+    ns.mountFns[url.href] = /* @__PURE__ */ new Set();
   }
-  if (self.__remote_script_entrypoint_unmount__?.[url.href]) {
-    self.__remote_script_entrypoint_unmount__[url.href] = /* @__PURE__ */ new Set();
+  if (ns.unmountFns[url.href]) {
+    ns.unmountFns[url.href] = /* @__PURE__ */ new Set();
   }
   const mountUnmountSets = await Promise.all(
     scripts.map(async (script) => {
@@ -1970,25 +2136,19 @@ async function loadStaticRemoteComponent(scripts, url, resolveClientUrl) {
           URL.revokeObjectURL(src);
         }
         if (typeof mod.mount === "function" || typeof mod.default?.mount === "function") {
-          if (!self.__remote_script_entrypoint_mount__) {
-            self.__remote_script_entrypoint_mount__ = {};
-          }
-          if (!self.__remote_script_entrypoint_mount__[url.href]) {
-            self.__remote_script_entrypoint_mount__[url.href] = /* @__PURE__ */ new Set();
+          if (!ns.mountFns[url.href]) {
+            ns.mountFns[url.href] = /* @__PURE__ */ new Set();
           }
-          self.__remote_script_entrypoint_mount__[url.href]?.add(
+          ns.mountFns[url.href]?.add(
             mod.mount || mod.default?.mount || (() => {
             })
           );
         }
         if (typeof mod.unmount === "function" || typeof mod.default?.unmount === "function") {
-          if (!self.__remote_script_entrypoint_unmount__) {
-            self.__remote_script_entrypoint_unmount__ = {};
+          if (!ns.unmountFns[url.href]) {
+            ns.unmountFns[url.href] = /* @__PURE__ */ new Set();
           }
-          if (!self.__remote_script_entrypoint_unmount__[url.href]) {
-            self.__remote_script_entrypoint_unmount__[url.href] = /* @__PURE__ */ new Set();
-          }
-          self.__remote_script_entrypoint_unmount__[url.href]?.add(
+          ns.unmountFns[url.href]?.add(
             mod.unmount || mod.default?.unmount || (() => {
             })
           );
@@ -2027,6 +2187,188 @@ async function loadStaticRemoteComponent(scripts, url, resolveClientUrl) {
   );
 }
 
+// src/host/shared/pipeline.ts
+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 };
+}
+async function loadPrepared(input) {
+  const { prepared, url, signal, resolveClientUrl, container, rscName } = input;
+  const { doc, parsed, scriptDescriptors } = prepared;
+  if (signal.aborted) {
+    return { status: "aborted" };
+  }
+  const userShared = await input.shared;
+  if (signal.aborted) {
+    return { status: "aborted" };
+  }
+  if (parsed.isRemoteComponent) {
+    return loadStaticPath({
+      parsed,
+      doc,
+      url,
+      resolveClientUrl
+    });
+  }
+  return loadDynamicPath({
+    parsed,
+    doc,
+    url,
+    scriptDescriptors,
+    shared: userShared,
+    resolveClientUrl,
+    container,
+    rscName
+  });
+}
+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
+    };
+  });
+}
+async function loadStaticPath(input) {
+  const { parsed, doc, url, resolveClientUrl } = input;
+  const scripts = Array.from(
+    parsed.component.querySelectorAll("script")
+  );
+  const { mount, unmount } = await loadStaticRemoteComponent(
+    scripts,
+    url,
+    resolveClientUrl
+  );
+  return {
+    status: "static",
+    mount,
+    unmount,
+    metadata: parsed.metadata,
+    parsed,
+    doc
+  };
+}
+async function loadDynamicPath(input) {
+  const {
+    parsed,
+    doc,
+    url,
+    scriptDescriptors,
+    shared: shared2,
+    resolveClientUrl,
+    container
+  } = input;
+  const rscName = input.rscName ?? (parsed.rsc ? `__remote_component_rsc_${escapeString(url.href)}_${escapeString(parsed.name)}` : void 0);
+  const rscData = parsed.rsc ? (parsed.rsc.textContent || "").split("\n").filter(Boolean) : [];
+  const result = await loadRemoteComponent({
+    url,
+    name: parsed.name,
+    rscName,
+    bundle: parsed.metadata.bundle,
+    route: parsed.metadata.route,
+    runtime: parsed.metadata.runtime,
+    data: rscData,
+    nextData: parsed.nextData,
+    scripts: scriptDescriptors,
+    shared: buildHostShared(shared2, resolveClientUrl),
+    remoteShared: parsed.remoteShared,
+    container,
+    resolveClientUrl
+  });
+  if (result.error) {
+    return { status: "error", error: result.error };
+  }
+  return {
+    status: "loaded",
+    component: result.component,
+    metadata: parsed.metadata,
+    parsed,
+    doc
+  };
+}
+
+// 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/runtime/html/set-attributes-from-props.ts
+var DOMAttributeNames = {
+  acceptCharset: "accept-charset",
+  className: "class",
+  htmlFor: "for",
+  httpEquiv: "http-equiv",
+  noModule: "noModule"
+};
+var ignoreProps = [
+  "onLoad",
+  "onReady",
+  "dangerouslySetInnerHTML",
+  "children",
+  "onError",
+  "strategy",
+  "stylesheets"
+];
+function isBooleanScriptAttribute(attr) {
+  return ["async", "defer", "noModule"].includes(attr);
+}
+function setAttributesFromProps(el, props) {
+  for (const [p, value] of Object.entries(props)) {
+    if (!Object.hasOwn(props, p))
+      continue;
+    if (ignoreProps.includes(p))
+      continue;
+    if (value === void 0) {
+      continue;
+    }
+    const attr = DOMAttributeNames[p] || p.toLowerCase();
+    if (el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr)) {
+      el[attr] = Boolean(value);
+    } else {
+      el.setAttribute(attr, String(value));
+    }
+    if (value === false || el.tagName === "SCRIPT" && isBooleanScriptAttribute(attr) && (!value || value === "false")) {
+      el.setAttribute(attr, "");
+      el.removeAttribute(attr);
+    }
+  }
+}
+
 // src/host/react/hooks/use-resolve-client-url.ts
 import { useMemo } from "react";
 import { useRemoteComponentsContext } from "#internal/host/react/context";
@@ -2045,27 +2387,25 @@ function useShadowRoot({
 }) {
   const shadowRootContainerRef = useRef(null);
   const [shadowRoot, setShadowRoot] = useState(() => {
-    const self = globalThis;
-    const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
+    const shadowRoots = getNamespace().shadowRoots;
     const ssrShadowRoot = typeof document !== "undefined" ? document.querySelector(
       `[data-remote-component-id="shadowroot_${keySuffix}"]`
-    )?.shadowRoot ?? self[shadowRootKey] ?? null : null;
-    self[shadowRootKey] = null;
+    )?.shadowRoot ?? shadowRoots[keySuffix] ?? null : null;
+    shadowRoots[keySuffix] = null;
     return ssrShadowRoot;
   });
   useLayoutEffect(() => {
+    const shadowRoots = getNamespace().shadowRoots;
     if (isolate !== false && typeof document !== "undefined" && (!shadowRoot || !shadowRoot.isConnected)) {
-      const self = globalThis;
-      const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
       let shadowRootElement = null;
       const element = document.querySelector(
         `[data-remote-component-id="shadowroot_${keySuffix}"]`
       );
-      shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;
+      shadowRootElement = shadowRoots[keySuffix] ?? element?.shadowRoot ?? null;
       if (!shadowRootElement && element) {
         try {
           shadowRootElement = element.attachShadow({ mode });
-          self[shadowRootKey] = shadowRootElement;
+          shadowRoots[keySuffix] = shadowRootElement;
         } catch {
         }
       }
@@ -2076,9 +2416,7 @@ function useShadowRoot({
         setShadowRoot(shadowRootElement);
       }
     } else if (isolate === false && shadowRoot) {
-      const self = globalThis;
-      const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
-      self[shadowRootKey] = null;
+      shadowRoots[keySuffix] = null;
       setShadowRoot(null);
     }
   }, [isolate, shadowRoot, mode, keySuffix]);
@@ -2109,7 +2447,7 @@ function getRemoteComponentHtml(html) {
 
 // src/host/react/index.tsx
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
-import { createElement as createElement2 } from "react";
+import { createElement as createElement3 } from "react";
 function ConsumeRemoteComponent({
   src,
   isolate,
@@ -2131,6 +2469,10 @@ function ConsumeRemoteComponent({
   const { credentials: contextCredentials, shared: contextShared } = useRemoteComponentsContext2();
   const credentials = credentialsProp ?? contextCredentials ?? "same-origin";
   const shared2 = sharedProp ?? contextShared ?? {};
+  const emitter = useMemo2(
+    () => makeReactEmitter({ onBeforeLoad, onLoad, onError, onChange }),
+    [onBeforeLoad, onLoad, onError, onChange]
+  );
   const name = useMemo2(
     () => resolveNameFromSrc(src, nameProp),
     [src, nameProp]
@@ -2174,9 +2516,8 @@ function ConsumeRemoteComponent({
   const prevRemoteComponentContainerRef = useRef2(null);
   const unmountRef = useRef2(null);
   useLayoutEffect2(() => {
-    const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
     return () => {
-      delete globalThis[shadowRootKey];
+      delete getNamespace().shadowRoots[keySuffix];
     };
   }, [keySuffix]);
   useLayoutEffect2(() => {
@@ -2221,7 +2562,7 @@ function ConsumeRemoteComponent({
       hostStateRef.current.abortController?.abort();
       hostStateRef.current.abortController = new AbortController();
       const { signal } = hostStateRef.current.abortController;
-      onBeforeLoad?.(src);
+      emitter.beforeLoad(src);
       hostStateRef.current.stage = "loading";
       startTransition(async () => {
         try {
@@ -2252,26 +2593,32 @@ function ConsumeRemoteComponent({
           }
           if (signal.aborted)
             return;
-          const parser = new DOMParser();
-          const doc = parser.parseFromString(html, "text/html");
+          const userShared = await shared2;
+          if (signal.aborted)
+            return;
+          const prepared = preparePipeline({
+            html,
+            name,
+            url,
+            shared: userShared,
+            resolveClientUrl
+          });
+          const { doc, parsed } = prepared;
           const {
             component,
             name: remoteName,
             isRemoteComponent,
             metadata,
-            nextData,
             rsc,
             remoteShared,
-            links: linkElements,
-            scripts: scriptElements
-          } = parseRemoteComponentDocument(doc, name, url);
+            links: linkElements
+          } = parsed;
           if (hostStateRef.current.prevIsRemoteComponent) {
             if (shadowRoot) {
               shadowRoot.innerHTML = "";
             }
-            const self = globalThis;
             const prevUrl = hostStateRef.current.prevUrl;
-            if (prevUrl && self.__remote_script_entrypoint_unmount__?.[prevUrl.href]) {
+            if (prevUrl && getNamespace().unmountFns[prevUrl.href]) {
               const unmountPromises = Promise.all(
                 Array.from(unmountRef.current ?? []).map(
                   async (unmount) => unmount(
@@ -2286,7 +2633,6 @@ function ConsumeRemoteComponent({
           hostStateRef.current.prevIsRemoteComponent = isRemoteComponent;
           hostStateRef.current.prevUrl = url;
           hostStateRef.current.prevName = remoteName;
-          applyOriginToNodes(doc, url, resolveClientUrl);
           const links = linkElements.map((link) => ({
             href: new URL(link.getAttribute("href") ?? link.href, url).href,
             ...link.getAttributeNames().reduce((acc, key) => {
@@ -2296,7 +2642,6 @@ function ConsumeRemoteComponent({
               return acc;
             }, {})
           }));
-          const scripts = scriptElements;
           const inlineScripts = (isRemoteComponent ? component : doc).querySelectorAll(
             "script:not([src]):not([data-src]):not([id*='_rsc']):not([id='__NEXT_DATA__']):not([id='__REMOTE_NEXT_DATA__'])"
           );
@@ -2375,20 +2720,10 @@ function ConsumeRemoteComponent({
           componentHydrationHtml.current = `${Array.from(
             doc.querySelectorAll("link,style")
           ).map((link) => link.outerHTML).join("")}${reset ? `<style data-remote-components-reset="">:host { all: initial; }</style>` : ""}${component.innerHTML}`;
-          const userShared = await shared2;
-          if ("__remote_components_missing_shared__" in userShared) {
-            userShared.__remote_components_missing_shared__().catch((e) => {
-              throw e;
-            });
-          } else if ("__remote_components_missing_shared__" in remoteShared) {
-            throw new RemoteComponentsError(
-              remoteShared.__remote_components_missing_shared__
-            );
-          }
           if (isRemoteComponent) {
             if (previousSrc !== void 0) {
-              onChange?.({
-                previousSrc,
+              emitter.change({
+                previousSrc: previousSrc ?? null,
                 nextSrc: src,
                 previousName,
                 nextName: remoteName
@@ -2409,7 +2744,7 @@ function ConsumeRemoteComponent({
               await Promise.all(
                 Array.from(mount).map((mountFn) => mountFn(shadowRoot))
               );
-              onLoad?.(src);
+              emitter.load(src);
             } else if (isolate === false) {
               setRemoteComponent(
                 // TODO: remove wrapper div by converting HTML to RSC or React tree
@@ -2433,62 +2768,42 @@ function ConsumeRemoteComponent({
                   (mountFn) => mountFn(prevRemoteComponentContainerRef.current)
                 )
               );
-              onLoad?.(src);
+              emitter.load(src);
             }
             hostStateRef.current.stage = "loaded";
           } else {
-            const result = await loadRemoteComponent({
+            const result = await loadPrepared({
+              prepared,
               url,
-              name: remoteName,
-              rscName,
-              bundle: metadata.bundle,
-              route: metadata.route,
-              runtime: metadata.runtime,
-              data: newData.data,
-              nextData,
-              scripts: Array.from(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
-                };
-              }),
-              shared: {
-                ...sharedPolyfills(userShared, resolveClientUrl),
-                ...userShared
-              },
-              remoteShared,
+              signal,
+              shared: userShared,
+              resolveClientUrl,
               container: shadowRoot,
-              resolveClientUrl
+              rscName
             });
             if (rsc) {
               rsc.remove();
             }
             setData(newData);
             if (previousSrc !== void 0) {
-              onChange?.({
-                previousSrc,
+              emitter.change({
+                previousSrc: previousSrc ?? null,
                 nextSrc: src,
                 previousName,
                 nextName: remoteName
               });
             }
-            if (result.error) {
+            if (result.status === "aborted") {
+              return;
+            }
+            if (result.status === "error") {
               hostStateRef.current.stage = "error";
               setRemoteComponent(result.error);
-              onError?.(result.error);
-            } else {
+              emitter.error(result.error);
+            } else if (result.status === "loaded") {
               hostStateRef.current.stage = "loaded";
               setRemoteComponent(result.component);
-              onLoad?.(src);
+              emitter.load(src);
             }
           }
         } catch (error) {
@@ -2498,7 +2813,7 @@ function ConsumeRemoteComponent({
           }
           hostStateRef.current.stage = "error";
           setRemoteComponent(error);
-          onError?.(error);
+          emitter.error(error);
         }
       });
     }
@@ -2512,10 +2827,10 @@ function ConsumeRemoteComponent({
     shadowRoot,
     reset,
     id,
-    onBeforeLoad,
-    onLoad,
-    onError,
-    onChange,
+    emitter.beforeLoad,
+    emitter.load,
+    emitter.error,
+    emitter.change,
     onRequest,
     onResponse,
     resolveClientUrl
@@ -2530,7 +2845,7 @@ function ConsumeRemoteComponent({
     runtime: hostStateRef.current.prevIsRemoteComponent ? RUNTIME_SCRIPT : data?.runtime || RUNTIME_WEBPACK
   }) });
   const resetStyle = reset ? /* @__PURE__ */ jsx2("style", { "data-remote-components-reset": "react", children: `:host { all: initial; }` }) : null;
-  const linksToRender = data?.links?.map((link) => /* @__PURE__ */ createElement2(
+  const linksToRender = data?.links?.map((link) => /* @__PURE__ */ createElement3(
     "link",
     {
       ...link,
@@ -2557,7 +2872,7 @@ function ConsumeRemoteComponent({
         );
       }).then(() => {
         if (src) {
-          onLoad?.(src);
+          emitter.load(src);
         }
       }).catch((e) => {
         const error = new RemoteComponentsError(
@@ -2567,7 +2882,7 @@ function ConsumeRemoteComponent({
           }
         );
         setRemoteComponent(error);
-        onError?.(error);
+        emitter.error(error);
       });
     }
   }
@@ -2596,8 +2911,10 @@ function ConsumeRemoteComponent({
       alt="" decoding="async" style="display:none"
       src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
       onload="(function(el){
+        // Capture the shadow root during SSR hydration so the client-side
+        // useShadowRoot hook can find it.
         const root = el.getRootNode();
-        globalThis.__remote_components_shadowroot_${keySuffix} = root;
+        globalThis.__remote_components_shadowroot_${keySuffix}=root;
         el.parentElement.remove();
       })(this)"
     />`