remote-components 0.3.3 → 0.3.4

package/dist/host/react.js

@@ -126,7 +126,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}`);
@@ -237,6 +237,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| )/;
@@ -247,11 +303,7 @@ function collapseDoubleSlashes(path) {
 
 // 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;
@@ -269,7 +321,8 @@ function createScope(name, url, runtime, resolveClientUrl) {
     resolveClientUrl,
     moduleCache: {},
     sharedModules: {},
-    moduleGlobal: {}
+    moduleGlobal: {},
+    turbopackModules: []
   };
 }
 function registerScope(scope) {
@@ -334,9 +387,9 @@ function createRemoteImageLoader(bundle, resolveClientUrl) {
 // src/host/shared/polyfill.tsx
 import { jsx } from "react/jsx-runtime";
 function sharedPolyfills(shared, resolveClientUrl) {
-  const self = globalThis;
+  const hostShared = getNamespace().hostSharedModules;
   const polyfill = {
-    "next/dist/client/components/navigation": self.__remote_component_host_shared_modules__?.["next/navigation"] ?? shared?.["next/navigation"] ?? (() => Promise.resolve({
+    "next/dist/client/components/navigation": hostShared["next/navigation"] ?? shared?.["next/navigation"] ?? (() => Promise.resolve({
       useRouter() {
         return {
           push: (routerUrl) => {
@@ -367,7 +420,7 @@ function sharedPolyfills(shared, resolveClientUrl) {
       },
       __esModule: true
     })),
-    "next/dist/client/app-dir/link": self.__remote_component_host_shared_modules__?.["next/link"] ?? shared?.["next/link"] ?? (() => Promise.resolve({
+    "next/dist/client/app-dir/link": hostShared["next/link"] ?? shared?.["next/link"] ?? (() => Promise.resolve({
       default: ({
         scroll: _,
         replace,
@@ -417,7 +470,7 @@ function sharedPolyfills(shared, resolveClientUrl) {
       },
       __esModule: true
     })),
-    "next/dist/client/app-dir/form": self.__remote_component_host_shared_modules__?.["next/form"] ?? shared?.["next/form"] ?? (() => Promise.resolve({
+    "next/dist/client/app-dir/form": hostShared["next/form"] ?? shared?.["next/form"] ?? (() => Promise.resolve({
       default: () => {
         throw new Error("Next.js <Form> component not implemented");
       },
@@ -428,17 +481,17 @@ function sharedPolyfills(shared, 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"] ?? shared?.["next/dist/shared/lib/image-loader"] ?? ((bundle) => Promise.resolve({
+    "next/dist/shared/lib/image-loader": hostShared["next/dist/shared/lib/image-loader"] ?? shared?.["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"] ?? shared?.["next/script"] ?? (() => Promise.resolve({
+    "next/dist/client/script": hostShared["next/script"] ?? shared?.["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"] ?? shared?.["next/router"] ?? (() => (
+    "next/router": hostShared["next/router"] ?? shared?.["next/router"] ?? (() => (
       // TODO: incomplete implementation
       Promise.resolve({
         useRouter() {
@@ -474,6 +527,68 @@ function sharedPolyfills(shared, resolveClientUrl) {
   return polyfill;
 }
 
+// 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 {
+    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
+  };
+}
+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/host/shared/state.ts
 function createHostState() {
   return {
@@ -500,8 +615,8 @@ function resolveNameFromSrc(src, defaultName) {
   return name || defaultName;
 }
 
-// src/runtime/html/apply-origin.ts
-var tagNames = [
+// src/runtime/html/html-spec.ts
+var ORIGIN_REWRITE_TAGS = [
   "img",
   "source",
   "video",
@@ -512,10 +627,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(",")
     );
@@ -533,29 +675,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));
         }
       }
     });
@@ -596,26 +726,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();
@@ -636,7 +768,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}]`
     )
   );
 }
@@ -649,15 +781,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
   );
@@ -746,13 +878,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);
@@ -764,7 +898,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) {
@@ -862,10 +995,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);
@@ -883,15 +1014,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);
       });
@@ -928,6 +1059,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",
@@ -935,16 +1078,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("");
@@ -974,12 +1112,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__|e)\\.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
@@ -989,6 +1153,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) {
@@ -999,35 +1164,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) {
@@ -1076,19 +1237,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], {
@@ -1140,13 +1321,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();
   }
@@ -1170,7 +1351,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,
@@ -1228,20 +1413,22 @@ async function initializeSharedModules(scope, hostShared = {}, remoteShared = {}
 }
 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 ?? {};
+    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_",
           ""
@@ -1332,9 +1519,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)));
@@ -1413,7 +1608,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 {
@@ -1477,21 +1675,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, shared = {}, 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__;
@@ -1499,6 +1714,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__;
@@ -1526,15 +1742,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,
-    ...shared
-  };
-  await initializeSharedModules(scope, coreShared, remoteShared);
+  return scope;
 }
 function createModuleDispatcher(runtime) {
   return (id) => {
@@ -1551,6 +1759,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);
@@ -1668,44 +1879,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 {
@@ -1733,19 +1933,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?'
@@ -1809,10 +1998,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) {
@@ -1842,12 +2030,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) => {
@@ -1859,25 +2047,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 || (() => {
             })
           );
@@ -1960,27 +2142,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 {
         }
       }
@@ -1991,9 +2171,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]);
@@ -2089,9 +2267,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(() => {
@@ -2184,9 +2361,8 @@ function ConsumeRemoteComponent({
             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(
@@ -2376,10 +2552,7 @@ function ConsumeRemoteComponent({
                   ).href
                 };
               }),
-              shared: {
-                ...sharedPolyfills(userShared, resolveClientUrl),
-                ...userShared
-              },
+              shared: buildHostShared(userShared, resolveClientUrl),
               remoteShared,
               container: shadowRoot,
               resolveClientUrl
@@ -2511,8 +2684,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)"
     />`