remote-components 0.0.29 → 0.0.31

package/dist/next/host/client/index.js

@@ -1,10 +1,1687 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+
+// src/next/host/client/index.tsx
 import * as Image from "next/image";
+
+// src/react/index.tsx
 import {
-  RemoteComponent as RemoteComponentReact
-} from "#remote-components/react/index";
-import { imageImpl, routerImpl } from "#internal/next/host/app-router-compat";
+  useState,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useMemo,
+  startTransition
+} from "react";
+import { createPortal } from "react-dom";
+
+// src/shared/client/component-loader.ts
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import * as ReactDOMClient from "react-dom/client";
+import * as JSXDevRuntime from "react/jsx-dev-runtime";
+import * as JSXRuntime from "react/jsx-runtime";
+
+// src/shared/webpack/shared-modules.ts
+function applySharedModules(bundle, resolve) {
+  const self = globalThis;
+  if (self.__remote_webpack_require__?.[bundle]) {
+    const modulePaths = Object.keys(
+      self.__remote_webpack_module_map__?.[bundle] ?? self.__remote_webpack_require__[bundle].m ?? {}
+    );
+    for (const [key, value] of Object.entries(resolve)) {
+      let ids = modulePaths.filter((p) => p === key);
+      if (ids.length === 0) {
+        ids = modulePaths.filter((p) => p.includes(key));
+      }
+      for (let id of ids) {
+        const webpackBundle = self.__remote_webpack_require__[bundle];
+        if (webpackBundle.m) {
+          if (self.__remote_webpack_module_map__?.[bundle]?.[id]) {
+            id = `${self.__remote_webpack_module_map__[bundle][id]}`;
+          }
+          webpackBundle.m[id] = (module) => {
+            module.exports = value;
+          };
+        }
+      }
+    }
+  }
+}
+
+// src/shared/webpack/next-client-pages-loader.ts
+function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
+  const self = globalThis;
+  const nextCssOriginal = document.querySelector(
+    `[id="__next_css__DO_NOT_USE__"]:not([data-bundle="${bundle}"][data-route="${route}"])`
+  );
+  if (nextCssOriginal) {
+    nextCssOriginal.parentNode?.removeChild(nextCssOriginal);
+  }
+  const nextCss = document.createElement("noscript");
+  nextCss.id = "__next_css__DO_NOT_USE__";
+  nextCss.setAttribute("data-bundle", bundle);
+  nextCss.setAttribute("data-route", route);
+  const nextCssEnd = document.createElement("noscript");
+  nextCssEnd.id = "__next_css__DO_NOT_USE_END__";
+  nextCssEnd.setAttribute("data-bundle", bundle);
+  nextCssEnd.setAttribute("data-route", route);
+  document.head.appendChild(nextCssEnd);
+  document.head.appendChild(nextCss);
+  const componentLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
+  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}!`)
+  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? ""] ?? -1;
+  const appLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
+  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
+  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? ""] ?? -1;
+  if (!(componentLoaderChunk && appLoaderChunk)) {
+    throw new Error(
+      `Next.js client pages loader not found in bundle "${bundle}"`
+    );
+  }
+  const __NEXT_P_ORIGINAL = self.__NEXT_P;
+  const selfOriginal = self;
+  delete selfOriginal.__NEXT_P;
+  self.__remote_webpack_require__?.[bundle]?.(
+    self.__remote_webpack_require__[bundle].type !== "turbopack" ? componentLoaderChunk : `[${bundle}] ${componentLoaderChunk}`
+  );
+  if (typeof appLoaderChunk === "string" || typeof appLoaderChunk === "number" && appLoaderChunk !== -1) {
+    self.__remote_webpack_require__?.[bundle]?.(
+      self.__remote_webpack_require__[bundle].type !== "turbopack" ? appLoaderChunk : `[${bundle}] ${appLoaderChunk}`
+    );
+  }
+  if (self.__NEXT_P) {
+    const [, componentLoader] = self.__NEXT_P[0] ?? [
+      void 0,
+      () => ({ default: null })
+    ];
+    const [, appLoader] = self.__NEXT_P[2] ?? [
+      void 0,
+      () => ({
+        default: null
+      })
+    ];
+    const { default: Component } = componentLoader();
+    const { default: App } = appLoader();
+    if (!self.__remote_next_css__) {
+      self.__remote_next_css__ = {};
+    }
+    if (!self.__remote_next_css__[bundle]) {
+      const cssRE = /\.s?css$/;
+      Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).filter((id) => cssRE.test(id)).forEach((id) => {
+        self.__remote_webpack_require__?.[bundle]?.(id);
+      });
+      Object.keys(self.__remote_webpack_module_map__?.[bundle] ?? {}).filter((path) => cssRE.test(path)).forEach((path) => {
+        const id = self.__remote_webpack_module_map__?.[bundle]?.[path];
+        if (id) {
+          self.__remote_webpack_require__?.[bundle]?.(id);
+        }
+      });
+      const elements = [];
+      let node = nextCss.previousSibling;
+      while (node && node !== nextCssEnd) {
+        elements.push(node);
+        node.remove();
+        node = nextCss.previousSibling;
+      }
+      self.__remote_next_css__[bundle] = elements;
+    }
+    if (styleContainer) {
+      const elements = self.__remote_next_css__[bundle];
+      elements.forEach((el) => {
+        styleContainer.appendChild(el.cloneNode(true));
+      });
+    } else {
+      const elements = self.__remote_next_css__[bundle];
+      elements.forEach((el) => {
+        document.head.appendChild(el);
+      });
+    }
+    delete self.__NEXT_P;
+    self.__NEXT_P = __NEXT_P_ORIGINAL;
+    if (nextCssOriginal) {
+      nextCssOriginal.parentNode?.appendChild(nextCssOriginal);
+    }
+    nextCss.remove();
+    nextCssEnd.remove();
+    return { Component, App };
+  }
+  return { Component: null, App: null };
+}
+
+// src/shared/utils/index.ts
+function escapeString(str) {
+  return str.replace(/[^a-z0-9]/g, "_");
+}
+var attrToProp = {
+  fetchpriority: "fetchPriority",
+  crossorigin: "crossOrigin",
+  imagesrcset: "imageSrcSet",
+  imagesizes: "imageSizes",
+  srcset: "srcSet"
+};
+
+// src/shared/client/const.ts
+var DEFAULT_ROUTE = "/";
+var RUNTIME_WEBPACK = "webpack";
+var RUNTIME_TURBOPACK = "turbopack";
+var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
+function getBundleKey(bundle) {
+  return escapeString(bundle);
+}
+
+// src/shared/client/webpack-adapter.ts
+async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location.href), bundle, shared = {}, remoteShared = {}) {
+  const self = globalThis;
+  if (!self.__remote_bundle_url__) {
+    self.__remote_bundle_url__ = {};
+  }
+  self.__remote_bundle_url__[bundle ?? "default"] = url;
+  self.__webpack_get_script_filename__ = () => null;
+  if (typeof self.__webpack_require__ !== "function" || self.__webpack_require_type__ !== "turbopack") {
+    if (!self.__original_webpack_require__ && !self.__original_webpack_chunk_load__) {
+      self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;
+      self.__original_webpack_require__ = self.__webpack_require__;
+    }
+    self.__webpack_chunk_load__ = createChunkLoader(runtime);
+    self.__webpack_require__ = createModuleRequire(runtime);
+    self.__webpack_require_type__ = runtime;
+    if (self.__remote_webpack_require__ && runtime === RUNTIME_TURBOPACK) {
+      const remoteBundle = bundle ?? "default";
+      self.__remote_webpack_require__[remoteBundle] = self.__webpack_require__;
+      self.__remote_webpack_require__[remoteBundle].type = "turbopack";
+    }
+  }
+  if (runtime === RUNTIME_TURBOPACK) {
+    await Promise.all(
+      scripts.map((script) => {
+        if (script.src) {
+          return self.__webpack_chunk_load__?.(script.src, bundle);
+        }
+        return Promise.resolve(void 0);
+      })
+    );
+  }
+  await initializeSharedModules(
+    bundle ?? "default",
+    // include all core modules as shared
+    {
+      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
+    },
+    remoteShared
+  );
+}
+function createChunkLoader(runtime) {
+  return function __turbopack_chunk_load__(chunkId, scriptBundle) {
+    const self = globalThis;
+    const {
+      bundle,
+      id: path,
+      prefix
+    } = REMOTE_COMPONENT_REGEX.exec(chunkId)?.groups ?? {
+      bundle: scriptBundle ?? "",
+      id: chunkId
+    };
+    const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
+    if (remoteRuntime === RUNTIME_WEBPACK) {
+      return Promise.resolve(void 0);
+    }
+    const url = new URL(
+      path ? `${prefix ?? ""}${path}`.replace(
+        /(?<char>[^:])(?<double>\/\/)/g,
+        "$1/"
+      ) : "/",
+      self.__remote_bundle_url__?.[bundle ?? "default"] ?? new URL(location.origin)
+    ).href;
+    if (url.endsWith(".css")) {
+      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];
+    }
+    self.__remote_components_turbopack_chunk_loader_promise__[url] = new Promise((resolve, reject) => {
+      fetch(url).then((res) => res.text()).then((code) => {
+        if (code.includes("globalThis.TURBOPACK")) {
+          return handleTurbopackChunk(code, bundle ?? "", url);
+        }
+      }).then(resolve).catch(reject);
+    });
+    return self.__remote_components_turbopack_chunk_loader_promise__[url];
+  };
+}
+async function handleTurbopackChunk(code, bundle, url) {
+  if (/importScripts\(\.\.\.self.TURBOPACK_NEXT_CHUNK_URLS/.test(code)) {
+    const preloadLinks = document.querySelectorAll(
+      `link[rel="preload"][href="${new URL(url).pathname}"]`
+    );
+    preloadLinks.forEach((preloadLink) => preloadLink.remove());
+    return;
+  }
+  const self = globalThis;
+  const bundleKey = getBundleKey(bundle);
+  const transformedCode = code.replace(/globalThis\.TURBOPACK/g, `globalThis.TURBOPACK_${bundleKey}`).replace(
+    /TURBOPACK_WORKER_LOCATION/g,
+    `TURBOPACK_WORKER_LOCATION_${bundleKey}`
+  ).replace(
+    /TURBOPACK_NEXT_CHUNK_URLS/g,
+    `TURBOPACK_NEXT_CHUNK_URLS_${bundleKey}`
+  ).replace(
+    /TURBOPACK_CHUNK_UPDATE_LISTENERS/g,
+    `TURBOPACK_CHUNK_UPDATE_LISTENERS_${bundleKey}`
+  ).replace(/__next_require__/g, `__${bundleKey}_next_require__`).replace(
+    /\/\/# sourceMappingURL=(?<name>.+)(?<optional>\._)?\.js\.map/g,
+    `//# sourceMappingURL=${new URL(
+      ".",
+      new URL(
+        url,
+        self.__remote_bundle_url__?.[bundle] ?? new URL(location.origin)
+      )
+    ).href}$1$2.js.map`
+  );
+  await new Promise((scriptResolve, scriptReject) => {
+    const blob = new Blob([transformedCode], {
+      type: "application/javascript; charset=UTF-8"
+    });
+    const scriptUrl = URL.createObjectURL(blob);
+    const script = document.createElement("script");
+    script.setAttribute("data-turbopack-src", url);
+    script.src = scriptUrl;
+    script.async = true;
+    script.onload = () => {
+      URL.revokeObjectURL(scriptUrl);
+      scriptResolve(void 0);
+      script.remove();
+    };
+    script.onerror = (error) => {
+      URL.revokeObjectURL(scriptUrl);
+      scriptReject(
+        new Error(
+          `Failed to load script: ${error instanceof Error ? error.message : String(error)}`
+        )
+      );
+      script.remove();
+    };
+    document.head.appendChild(script);
+  });
+  const chunkLists = self[`TURBOPACK_${bundleKey}_CHUNK_LISTS`];
+  const loadChunkLists = [];
+  while (chunkLists?.length) {
+    const { chunks } = chunkLists.shift() ?? { chunks: [] };
+    if (chunks.length > 0) {
+      chunks.forEach((id) => {
+        const chunkLoadResult = self.__webpack_chunk_load__?.(
+          `[${bundle}] ${url.slice(0, url.indexOf("/_next"))}/_next/${id}`
+        );
+        if (chunkLoadResult) {
+          loadChunkLists.push(chunkLoadResult);
+        }
+      });
+    }
+  }
+  if (loadChunkLists.length > 0) {
+    await Promise.all(loadChunkLists);
+  }
+}
+function createModuleRequire(runtime) {
+  return (id) => {
+    const self = globalThis;
+    const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)?.groups ?? { bundle: "default", id };
+    const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
+    try {
+      if (remoteRuntime === RUNTIME_WEBPACK && bundle && moduleId) {
+        return self.__remote_webpack_require__?.[bundle]?.(moduleId);
+      }
+      const sharedModule = getSharedModule(bundle ?? "default", moduleId ?? id);
+      if (sharedModule) {
+        return sharedModule;
+      }
+      if (bundle && moduleId) {
+        return handleTurbopackModule(bundle, moduleId, id);
+      }
+      throw new Error(`Module ${id} not found`);
+    } catch (requireError) {
+      if (typeof self.__original_webpack_require__ !== "function") {
+        throw new Error(
+          `Module ${id} not found in remote component bundle ${bundle}`,
+          {
+            cause: requireError instanceof Error ? requireError : void 0
+          }
+        );
+      }
+      try {
+        return self.__original_webpack_require__(id);
+      } catch (originalError) {
+        throw new Error(
+          `Module ${id} not found in remote component bundle ${bundle}`,
+          { cause: originalError instanceof Error ? originalError : void 0 }
+        );
+      }
+    }
+  };
+}
+async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {}) {
+  const self = globalThis;
+  self.__remote_shared_modules__ = self.__remote_shared_modules__ ?? {};
+  if (!self.__remote_shared_modules__[bundle]) {
+    self.__remote_shared_modules__[bundle] = {};
+  }
+  const bundleKey = getBundleKey(bundle);
+  const modules = self[`TURBOPACK_${bundleKey}`];
+  let sharedModuleInitializer = null;
+  if (modules && Array.isArray(modules)) {
+    const allModules = modules.flat();
+    const sharedModuleInitializerIndex = allModules.findIndex((idOrFunc) => {
+      if (typeof idOrFunc !== "function") {
+        return false;
+      }
+      const funcCode = idOrFunc.toString();
+      return /[a-z]\.TURBOPACK_REMOTE_SHARED/.test(funcCode);
+    });
+    if (sharedModuleInitializerIndex > 0) {
+      const sharedModuleInitializerCode = allModules[sharedModuleInitializerIndex].toString();
+      const sharedModuleInitializerId = allModules[sharedModuleInitializerIndex - 1];
+      const { sharedModuleId } = /\.TURBOPACK_REMOTE_SHARED=await e\.A\((?<sharedModuleId>[0-9]+)\)/.exec(
+        sharedModuleInitializerCode
+      )?.groups ?? {};
+      if (sharedModuleId) {
+        const { default: sharedModuleInitializerInstance } = handleTurbopackModule(
+          bundle,
+          sharedModuleId,
+          `[${bundle}] ${sharedModuleInitializerId}`
+        );
+        sharedModuleInitializer = sharedModuleInitializerInstance;
+      }
+    }
+    if (sharedModuleInitializer) {
+      const { shared } = await sharedModuleInitializer;
+      const sharedModuleIds = Object.entries(shared).filter(([, value]) => typeof value === "function").reduce((acc, [key, value]) => {
+        const { asyncSharedModuleId } = /e\.A\((?<asyncSharedModuleId>[0-9]+)\)/.exec(value.toString())?.groups ?? {};
+        if (asyncSharedModuleId) {
+          const asyncSharedModuleIdNumber = Number(asyncSharedModuleId);
+          let asyncSharedModule;
+          const newAllModules = self[`TURBOPACK_${bundleKey}`]?.flat() ?? [];
+          const asyncSharedModuleIdIndex = newAllModules.indexOf(
+            asyncSharedModuleIdNumber
+          );
+          if (asyncSharedModuleIdIndex !== -1 && typeof newAllModules[asyncSharedModuleIdIndex + 1] === "function") {
+            asyncSharedModule = newAllModules[asyncSharedModuleIdIndex + 1];
+          }
+          if (asyncSharedModule) {
+            const asyncSharedModuleCode = asyncSharedModule.toString();
+            const { sharedModuleId } = /e=>{e\.v\(e=>Promise\.resolve\(\)\.then\(\(\)=>e\((?<sharedModuleId>[0-9]+)\)\)\)}/.exec(
+              asyncSharedModuleCode
+            )?.groups ?? /e=>{e\.v\(t=>Promise\.all\(\["[^"]+"\].map\(t=>e\.l\(t\)\)\)\.then\(\(\)=>t\((?<sharedModuleId>[0-9]+)\)\)\)}/.exec(
+              asyncSharedModuleCode
+            )?.groups ?? {};
+            acc[sharedModuleId ?? asyncSharedModuleId] = key.replace(
+              "__remote_shared_module_",
+              ""
+            );
+          }
+        }
+        return acc;
+      }, {});
+      return Promise.all(
+        Object.entries(sharedModuleIds).map(async ([id, module]) => {
+          if (self.__remote_shared_modules__?.[bundle]) {
+            if (hostShared[module]) {
+              self.__remote_shared_modules__[bundle][id] = await hostShared[module](bundle);
+            }
+          }
+        })
+      );
+    }
+  }
+  return Promise.all(
+    Object.entries(remoteShared).map(async ([id, module]) => {
+      if (self.__remote_shared_modules__?.[bundle]) {
+        if (hostShared[module]) {
+          self.__remote_shared_modules__[bundle][id.replace("[app-ssr]", "[app-client]")] = await hostShared[module](bundle);
+        } else {
+          console.error(`Shared module "${module}" not found for "${bundle}".`);
+        }
+      }
+    })
+  );
+}
+function getSharedModule(bundle, id) {
+  const self = globalThis;
+  for (const [key, value] of Object.entries(
+    self.__remote_shared_modules__?.[bundle] ?? {}
+  )) {
+    if (typeof value !== "undefined" && (typeof id === "string" && id.includes(key) || id === key)) {
+      return value;
+    }
+  }
+  return null;
+}
+function handleTurbopackModule(bundle, moduleId, id) {
+  const self = globalThis;
+  const bundleKey = getBundleKey(bundle);
+  const modules = self[`TURBOPACK_${bundleKey}`];
+  let moduleInit;
+  const allModules = modules?.flat() ?? [];
+  if (typeof allModules[1] === "string" || typeof allModules[1] === "number") {
+    const normalizedId = /^[0-9]+$/.test(moduleId) ? Number(moduleId) : moduleId;
+    let moduleIdIndex = allModules.indexOf(normalizedId);
+    if (moduleIdIndex === -1) {
+      moduleIdIndex = allModules.findIndex(
+        (bundleEntry) => typeof bundleEntry === "string" && bundleEntry.startsWith(moduleId) || bundleEntry === normalizedId
+      );
+    }
+    if (moduleIdIndex !== -1) {
+      while (typeof allModules[moduleIdIndex] !== "function" && moduleIdIndex < allModules.length) {
+        moduleIdIndex++;
+      }
+      moduleInit = allModules[moduleIdIndex];
+    }
+  } else {
+    moduleInit = allModules.find(
+      (bundleEntry) => typeof bundleEntry === "object" && bundleEntry !== null && moduleId in bundleEntry
+    )?.[moduleId];
+  }
+  const exports = {};
+  const moduleExports = { exports };
+  const exportNames = /* @__PURE__ */ new Set();
+  if (!self.__remote_components_turbopack_modules__) {
+    self.__remote_components_turbopack_modules__ = {};
+  }
+  if (!self.__remote_components_turbopack_modules__[bundle]) {
+    self.__remote_components_turbopack_modules__[bundle] = {};
+  }
+  if (self.__remote_components_turbopack_modules__[bundle][moduleId]) {
+    return self.__remote_components_turbopack_modules__[bundle][moduleId];
+  }
+  if (typeof moduleInit !== "function") {
+    throw new Error(
+      `Module ${id} not found in bundle ${bundle} with id ${moduleId}`
+    );
+  }
+  self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
+  if (!self.__remote_components_turbopack_global__) {
+    self.__remote_components_turbopack_global__ = {};
+  }
+  if (!self.__remote_components_turbopack_global__[bundle]) {
+    self.__remote_components_turbopack_global__[bundle] = {};
+  }
+  moduleInit(
+    {
+      // HMR not implemented for Remote Components
+      k: {
+        register() {
+        },
+        registerExports() {
+        },
+        signature() {
+          return (fn) => {
+            return fn;
+          };
+        }
+      },
+      // define exports
+      s(m) {
+        let mod = m;
+        if (Array.isArray(m)) {
+          mod = {};
+          const keys = [];
+          for (const current of m) {
+            if (typeof current === "string") {
+              keys.push(current);
+            } else if (typeof current === "function") {
+              while (keys.length > 0) {
+                const key = keys.shift();
+                if (key) {
+                  mod[key] = current;
+                }
+              }
+            }
+          }
+        }
+        for (const [key, value] of Object.entries(mod)) {
+          exports[key] = value;
+          exportNames.add(key);
+        }
+      },
+      // import ESM
+      i(importId) {
+        let mod;
+        if (typeof importId === "string") {
+          const { exportSource, exportName } = /\s+<export (?<exportSource>.*?) as (?<exportName>.*?)>$/.exec(
+            importId
+          )?.groups ?? {};
+          const normalizedId = importId.replace(
+            /\s+<export(?<specifier>.*)>$/,
+            ""
+          );
+          mod = self.__webpack_require__?.(
+            `[${bundle}] ${normalizedId}`
+          );
+          if (exportSource && exportName && (exportSource === "*" || typeof mod[exportSource] !== "undefined") && typeof mod[exportName] === "undefined") {
+            if (exportSource === "*") {
+              mod[exportName] = mod;
+            } else {
+              mod[exportName] = mod[exportSource];
+            }
+          }
+        } else {
+          mod = self.__webpack_require__?.(`[${bundle}] ${importId}`);
+        }
+        if (!("default" in mod) && mod.toString() !== "[object Module]") {
+          try {
+            mod.default = mod;
+          } catch {
+          }
+        }
+        return mod;
+      },
+      // require
+      r(requireId) {
+        return self.__webpack_require__?.(`[${bundle}] ${requireId}`);
+      },
+      // value exports
+      v(value) {
+        if (typeof value === "function") {
+          exports.default = value((vid) => {
+            return self.__webpack_require__?.(`[${bundle}] ${vid}`);
+          });
+        } else {
+          exports.default = value;
+        }
+      },
+      // async module initializer
+      async a(mod) {
+        let result;
+        await mod(
+          () => {
+          },
+          (value) => result = value
+        );
+        exports.default = result;
+      },
+      // async module loader
+      async A(Aid) {
+        const mod = self.__webpack_require__?.(`[${bundle}] ${Aid}`);
+        return mod.default(
+          (parentId) => self.__webpack_require__?.(`[${bundle}] ${parentId}`)
+        );
+      },
+      // chunk loader
+      l(url) {
+        const moduleInitIndex = allModules.indexOf(moduleInit);
+        if (moduleInitIndex !== -1) {
+          const scriptIndex = allModules.slice(0, moduleInitIndex).findLastIndex((bundleEntry) => bundleEntry instanceof Element);
+          if (scriptIndex !== -1) {
+            const script = allModules[scriptIndex];
+            const scriptSrc = script.getAttribute("data-turbopack-src") || "";
+            const nextIndex = scriptSrc.indexOf("/_next");
+            const baseUrl = nextIndex !== -1 ? scriptSrc.slice(0, nextIndex) : "";
+            const bundleUrl = `[${bundle}] ${baseUrl}/_next/${url}`;
+            return self.__webpack_chunk_load__?.(bundleUrl, bundle);
+          }
+        }
+        throw new Error(`Failed to load chunk ${url} for module ${id}`);
+      },
+      // global
+      g: self.__remote_components_turbopack_global__[bundle],
+      m: moduleExports,
+      e: exports
+    },
+    moduleExports,
+    exports
+  );
+  for (const name of exportNames) {
+    if (typeof exports[name] === "function") {
+      exports[name] = exports[name]();
+    }
+  }
+  if (self.__remote_components_turbopack_modules__[bundle][moduleId] !== moduleExports.exports) {
+    self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
+  }
+  return moduleExports.exports;
+}
+
+// src/shared/client/script-loader.ts
+async function loadScripts(scripts) {
+  await Promise.all(
+    scripts.map((script) => {
+      return new Promise((resolve, reject) => {
+        const newSrc = new URL(
+          // remove the remote component bundle name identifier from the script src
+          script.src.replace(/\/_next\/\[.+\](?<whitespace>%20| )/, "/_next/"),
+          location.origin
+        ).href;
+        const newScript = document.createElement("script");
+        newScript.onload = () => {
+          resolve();
+        };
+        newScript.onerror = () => {
+          reject(
+            new Error(
+              `Failed to load script ${script.src} for remote component`
+            )
+          );
+        };
+        newScript.src = newSrc;
+        newScript.async = true;
+        document.head.appendChild(newScript);
+      });
+    })
+  );
+}
+
+// src/shared/client/rsc.ts
+import { ReadableStream } from "web-streams-polyfill";
+function fixPayload(payload) {
+  if (Array.isArray(payload)) {
+    if (payload[0] === "$") {
+      fixPayload(payload[3]);
+      if (payload.length === 4) {
+        payload.push(null, null, 1);
+      }
+    } else {
+      for (const item of payload) {
+        fixPayload(item);
+      }
+    }
+  } else if (typeof payload === "object" && payload !== null) {
+    for (const key in payload) {
+      fixPayload(payload[key]);
+    }
+  }
+}
+function createRSCStream(rscName, data) {
+  return new ReadableStream({
+    type: "bytes",
+    start(controller) {
+      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 allChunks = (self[rscName] ?? [`0:[null]
+`]).join("");
+      self[rscName] = null;
+      allChunks.split("\n").forEach((chunk) => {
+        if (chunk.length > 0) {
+          const { before, id, prefix, payload } = /^(?<before>[^:]*?)?(?<id>[0-9a-zA-Z]+):(?<prefix>[A-Z])?(?<payload>\[.*\])/.exec(
+            chunk
+          )?.groups ?? {};
+          if (payload) {
+            const jsonPayload = JSON.parse(payload);
+            fixPayload(jsonPayload);
+            const reconstruct = `${before ?? ""}${id}:${prefix ?? ""}${JSON.stringify(jsonPayload)}`;
+            controller.enqueue(encoder.encode(`${reconstruct}
+`));
+          } else {
+            controller.enqueue(encoder.encode(`${chunk}
+`));
+          }
+        } else {
+          controller.enqueue(encoder.encode(`${chunk}
+`));
+        }
+      });
+      controller.close();
+    }
+  });
+}
+
+// src/shared/client/component-loader.ts
+async function loadRemoteComponent({
+  url,
+  name,
+  rscName,
+  bundle,
+  route = "/",
+  runtime = "webpack",
+  data,
+  nextData,
+  scripts = [],
+  shared = Promise.resolve({}),
+  remoteShared = {},
+  container
+}) {
+  try {
+    if (runtime === "webpack") {
+      const self = globalThis;
+      if (!self.__DISABLE_WEBPACK_EXEC__) {
+        self.__DISABLE_WEBPACK_EXEC__ = {};
+      }
+      self.__DISABLE_WEBPACK_EXEC__[bundle] = true;
+      await loadScripts(scripts);
+    }
+    const hostShared = await shared;
+    await setupWebpackRuntime(
+      runtime,
+      scripts,
+      url,
+      bundle,
+      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];
+            }
+            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);
+        })
+      );
+      applySharedModules(bundle, resolve);
+    }
+    if (data.length > 0) {
+      return await loadRSCComponent(rscName ?? name, data);
+    } else if (nextData) {
+      return loadNextPagesComponent(bundle, route, nextData, name, container);
+    }
+    return loadRSCComponent(rscName ?? name, [`0:[null]
+`]);
+  } catch (error) {
+    return {
+      component: null,
+      error: error instanceof Error ? error : new Error(String(error))
+    };
+  }
+}
+async function loadRSCComponent(rscName, data) {
+  let createFromReadableStream;
+  try {
+    const { createFromReadableStream: _createFromReadableStream } = await import("next/dist/compiled/react-server-dom-webpack/client.browser");
+    createFromReadableStream = _createFromReadableStream;
+  } catch {
+    const {
+      default: { createFromReadableStream: _createFromReadableStream }
+    } = await import("react-server-dom-webpack/client.browser");
+    createFromReadableStream = _createFromReadableStream;
+  }
+  if (typeof createFromReadableStream !== "function") {
+    throw new Error("Failed to import react-server-dom-webpack");
+  }
+  const stream = createRSCStream(rscName, data);
+  const component = createFromReadableStream(stream);
+  return { component };
+}
+function loadNextPagesComponent(bundle, route, nextData, name, container) {
+  const { Component, App } = nextClientPagesLoader(bundle, route, container);
+  if (!Component) {
+    throw new Error(
+      `Remote component ${name} is trying to load the component for route ${route} but it is not available.`
+    );
+  }
+  const component = App ? React.createElement(App, { Component, ...nextData.props }) : React.createElement(Component, nextData.props);
+  return { component };
+}
+
+// src/shared/client/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.prototype.hasOwnProperty.call(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/shared/client/polyfill.tsx
+import { jsx } from "react/jsx-runtime";
+function applyBundleUrlToSrc(bundle, src) {
+  const self = globalThis;
+  if (self.__remote_bundle_url__?.[bundle]?.origin === location.origin) {
+    return src;
+  }
+  const { assetPrefix, path } = /^(?<assetPrefix>.*?)\/_next\/(?<path>.*)/.exec(src)?.groups ?? {};
+  if (!path) {
+    return new URL(src, self.__remote_bundle_url__?.[bundle]?.origin).href;
+  }
+  return `${self.__remote_bundle_url__?.[bundle]?.origin ?? ""}${assetPrefix}/_next/${path}`;
+}
+function applyBundleUrlToImagePropsSrc(bundle, src) {
+  if (typeof src === "string") {
+    return applyBundleUrlToSrc(bundle, src);
+  }
+  const propSrc = src;
+  return applyBundleUrlToSrc(bundle, propSrc.src);
+}
+var imageImpl = (bundle) => function RemoteImage({
+  fill: _fill,
+  loader: _loader,
+  quality: _quality,
+  priority: _priority,
+  loading: _loading,
+  placeholder: _placeholder,
+  blurDataURL: _blurDataURL,
+  unoptimized: _unoptimized,
+  overrideSrc: _overrideSrc,
+  src,
+  ...props
+}) {
+  const newSrc = applyBundleUrlToImagePropsSrc(
+    bundle,
+    typeof src === "string" ? src : src.src
+  );
+  return (
+    // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        decoding: "async",
+        style: { color: "transparent" },
+        ...props,
+        src: newSrc,
+        suppressHydrationWarning: true
+      }
+    )
+  );
+};
+function sharedPolyfills(shared) {
+  const self = globalThis;
+  const polyfill = {
+    "next/dist/client/components/navigation": self.__remote_component_host_shared_modules__?.["next/navigation"] ?? shared?.["next/navigation"] ?? (() => Promise.resolve({
+      useRouter() {
+        return {
+          push: (routerUrl) => {
+            history.pushState({}, "", routerUrl);
+          },
+          replace: (routerUrl) => {
+            history.replaceState({}, "", routerUrl);
+          },
+          back: () => {
+            history.back();
+          }
+        };
+      },
+      usePathname() {
+        return location.pathname;
+      },
+      useParams() {
+        return {};
+      },
+      useSearchParams() {
+        return new URLSearchParams(location.search);
+      },
+      useSelectedLayoutSegment() {
+        return null;
+      },
+      useSelectedLayoutSegments() {
+        return [];
+      },
+      __esModule: true
+    })),
+    "next/dist/client/app-dir/link": self.__remote_component_host_shared_modules__?.["next/link"] ?? shared?.["next/link"] ?? (() => Promise.resolve({
+      default: ({
+        scroll: _,
+        replace,
+        prefetch,
+        onNavigate,
+        children,
+        ...props
+      }) => {
+        if (prefetch) {
+          console.warn(
+            "Next.js Link prefetch is not supported in remote components"
+          );
+        }
+        return /* @__PURE__ */ jsx(
+          "a",
+          {
+            ...props,
+            href: props.href,
+            onClick: (e) => {
+              e.preventDefault();
+              let preventDefaulted = false;
+              e.preventDefault = () => {
+                preventDefaulted = true;
+                e.defaultPrevented = true;
+              };
+              if (typeof props.onClick === "function") {
+                props.onClick(e);
+              }
+              onNavigate?.(e);
+              if (preventDefaulted) {
+                return;
+              }
+              if (replace) {
+                history.replaceState({}, "", props.href);
+              } else {
+                history.pushState({}, "", props.href);
+              }
+            },
+            suppressHydrationWarning: true,
+            children: children ?? null
+          }
+        );
+      },
+      useLinkStatus() {
+        return { pending: false };
+      },
+      __esModule: true
+    })),
+    "next/dist/client/app-dir/form": self.__remote_component_host_shared_modules__?.["next/form"] ?? shared?.["next/form"] ?? (() => Promise.resolve({
+      default: () => {
+        throw new Error("Next.js <Form> component not implemented");
+      },
+      __esModule: true
+    })),
+    "next/dist/client/image-component": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
+      Image: imageImpl(bundle),
+      __esModule: true
+    })),
+    "next/image": self.__remote_component_host_shared_modules__?.["next/image"] ?? shared?.["next/image"] ?? ((bundle) => Promise.resolve({
+      default: imageImpl(bundle),
+      getImageProps: (_imgProps) => {
+        throw new Error(
+          "Next.js getImageProps() is not implemented in remote components"
+        );
+      },
+      __esModule: true
+    })),
+    "next/dist/client/script": self.__remote_component_host_shared_modules__?.["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"] ?? (() => (
+      // TODO: incomplete implementation
+      Promise.resolve({
+        useRouter() {
+          return {
+            push: (routerUrl) => {
+              history.pushState({}, "", routerUrl);
+            },
+            replace: (routerUrl) => {
+              history.replaceState({}, "", routerUrl);
+            },
+            back: () => {
+              history.back();
+            }
+          };
+        },
+        __esModule: true
+      })
+    )),
+    "next/dist/build/polyfills/process": () => Promise.resolve({
+      default: {
+        env: {
+          NODE_ENV: "production"
+        }
+      },
+      __esModule: true
+    })
+  };
+  polyfill["next/navigation"] = polyfill["next/dist/client/components/navigation"];
+  polyfill["next/link"] = polyfill["next/dist/client/app-dir/link"];
+  polyfill["next/form"] = polyfill["next/dist/client/app-dir/form"];
+  polyfill["next/dist/api/image"] = polyfill["next/dist/client/image-component"];
+  polyfill["next/script"] = polyfill["next/dist/client/script"];
+  return polyfill;
+}
+
+// src/shared/client/apply-origin.ts
+var tagNames = [
+  "img",
+  "source",
+  "video",
+  "audio",
+  "track",
+  "iframe",
+  "embed",
+  "script",
+  "link"
+];
+function applyOriginToNodes(doc, url) {
+  if (url.origin !== location.origin) {
+    const nodes = doc.querySelectorAll(
+      tagNames.map(
+        (type) => `${type}[src],${type}[srcset],${type}[href],${type}[imagesrcset]`
+      ).join(",")
+    );
+    nodes.forEach((node) => {
+      if (node.hasAttribute("src") && /^[./]+\/?/.test(node.getAttribute("src") ?? "")) {
+        node.src = new URL(node.getAttribute("src") ?? "/", url).href;
+      }
+      if (node.hasAttribute("href") && /^[./]+\/?/.test(node.getAttribute("href") ?? "")) {
+        node.setAttribute(
+          "href",
+          new URL(node.getAttribute("href") ?? "/", url).href
+        );
+      }
+      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;
+          return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;
+        }).join(", ");
+        if (srcSet) {
+          node.setAttribute("srcset", srcSet);
+        }
+      }
+      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;
+          return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;
+        }).join(", ");
+        if (srcSet) {
+          node.setAttribute("imagesrcset", srcSet);
+        }
+      }
+    });
+  }
+}
+
+// src/shared/ssr/fetch-headers.ts
+function remoteFetchHeaders(additionalHeaders) {
+  return {
+    /**
+     * Authenticates deployment protection for the remote. Needed for SSR and SSG clients.
+     * Ensure the automation bypass secret is the same on the client and host.
+     * Otherwise, manually specify x-vercel-protection-bypass for the remote in the `additionalHeaders` parameter.
+     */
+    ...typeof process === "object" && typeof process.env === "object" && typeof process.env.VERCEL_AUTOMATION_BYPASS_SECRET === "string" ? {
+      "x-vercel-protection-bypass": process.env.VERCEL_AUTOMATION_BYPASS_SECRET
+    } : {},
+    ...Object.fromEntries(
+      additionalHeaders instanceof Headers ? additionalHeaders.entries() : Object.entries(additionalHeaders ?? {})
+    ),
+    Accept: "text/html"
+  };
+}
+
+// src/react/index.tsx
+import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { createElement as createElement2 } from "react";
+function getRemoteComponentHtml(html) {
+  if (typeof document === "undefined")
+    return html;
+  const parser = new DOMParser();
+  const temp = parser.parseFromString(html, "text/html");
+  const ssrRemoteComponentContainer = temp.querySelector(
+    'div[id^="__REMOTE_COMPONENT"]'
+  );
+  if (ssrRemoteComponentContainer) {
+    return ssrRemoteComponentContainer.innerHTML;
+  }
+  const remoteComponentContainer = temp.querySelectorAll(
+    `div[data-bundle][data-route][data-runtime][id^="__vercel_remote_component"],div[data-bundle][data-route],div#__next`
+  );
+  if (remoteComponentContainer.length > 0) {
+    return `${Array.from(temp.querySelectorAll("link,script")).map((link) => link.outerHTML).join("")}${Array.from(remoteComponentContainer).map((container) => container.outerHTML).join("")}`;
+  }
+  return "";
+}
+function RemoteComponent({
+  src,
+  isolate,
+  mode = "open",
+  reset,
+  credentials = "same-origin",
+  name: nameProp = "__vercel_remote_component",
+  shared = {},
+  additionalHeaders,
+  children
+}) {
+  const name = useMemo(() => {
+    if (typeof src === "string") {
+      const url2 = new URL(
+        src,
+        typeof document !== "undefined" ? location.href : "http://localhost"
+      );
+      if (url2.hash) {
+        return url2.hash.slice(1);
+      }
+    } else if (typeof src === "object" && "hash" in src && src.hash) {
+      return src.hash.slice(1) || nameProp;
+    }
+    return nameProp;
+  }, [src, nameProp]);
+  const [data, setData] = useState(null);
+  const [remoteComponent, setRemoteComponent] = useState(null);
+  const shadowRootContainerRef = useRef(null);
+  const [shadowRoot, setShadowRoot] = useState(() => {
+    const self = globalThis;
+    const shadowRootKey = `__remote_components_shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)}`;
+    const ssrShadowRoot = typeof document !== "undefined" ? document.querySelector(
+      `[data-remote-component-id="shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)}"]`
+    )?.shadowRoot ?? self[shadowRootKey] ?? null : null;
+    self[shadowRootKey] = null;
+    return ssrShadowRoot;
+  });
+  const htmlRef = useRef(
+    typeof document !== "undefined" ? document.querySelector(
+      `[data-remote-component-id="shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)}"]`
+    )?.shadowRoot?.innerHTML ?? document.getElementById(`__REMOTE_COMPONENT${name}`)?.innerHTML ?? document.querySelector(`div[data-bundle][data-route][id^="${name}"]`)?.innerHTML ?? document.querySelector("div[data-bundle][data-route]")?.innerHTML : null
+  );
+  const endTemplateRef = useRef(null);
+  const childrenRef = useRef(
+    typeof document !== "undefined" ? (() => {
+      let el = document.querySelector(`template[id="${name}_start"]`);
+      const elements = [];
+      while (el && el.id !== `${name}_end`) {
+        if (el.id !== `${name}_start` && !el.getAttribute("data-remote-component")) {
+          elements.push(el);
+        }
+        el = el.nextElementSibling;
+      }
+      return elements;
+    })() : []
+  );
+  const prevSrcRef = useRef(null);
+  const componentHydrationHtml = useRef(null);
+  useLayoutEffect(() => {
+    if (childrenRef.current.length > 0 && remoteComponent) {
+      childrenRef.current.forEach((el) => {
+        el.remove();
+      });
+      childrenRef.current = [];
+    }
+    if (isolate !== false && typeof document !== "undefined" && !shadowRoot) {
+      const self = globalThis;
+      const shadowRootKey = `__remote_components_shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)}`;
+      let shadowRootElement = null;
+      const element = document.querySelector(
+        `[data-remote-component-id="shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)}"]`
+      );
+      shadowRootElement = self[shadowRootKey] ?? element?.shadowRoot ?? null;
+      if (!shadowRootElement && element) {
+        try {
+          shadowRootElement = element.attachShadow({ mode });
+          self[shadowRootKey] = shadowRootElement;
+        } catch {
+        }
+      }
+      if (shadowRootElement) {
+        shadowRootElement.querySelectorAll("*:not(link)").forEach((node) => {
+          node.remove();
+        });
+        setShadowRoot(shadowRootElement);
+      }
+    }
+  }, [name, isolate, shadowRoot, remoteComponent, mode, src, data]);
+  useLayoutEffect(() => {
+    if (shadowRoot && remoteComponent) {
+      const resetStyles = shadowRoot.querySelectorAll(
+        "style[data-remote-components-reset]"
+      );
+      if (resetStyles.length > 1) {
+        resetStyles.forEach((style, index) => {
+          if (index > 0) {
+            style.remove();
+          }
+        });
+      }
+      htmlRef.current = null;
+      let el = shadowRoot.childNodes[0] ?? null;
+      while (el && (!("id" in el) || el.id !== `${name}_start`)) {
+        const nextEl = el.nextSibling;
+        if (el.nodeName !== "LINK" && el.nodeName !== "STYLE") {
+          el.parentNode?.removeChild(el);
+        }
+        el = nextEl;
+      }
+    }
+  }, [shadowRoot, remoteComponent, name]);
+  const url = useMemo(() => {
+    if (typeof src !== "string")
+      return new URL(
+        typeof document !== "undefined" ? location.href : "http://localhost"
+      );
+    try {
+      return typeof document !== "undefined" ? new URL(src, location.href) : new URL(src);
+    } catch {
+      return new URL(src, "http://localhost");
+    }
+  }, [src]);
+  useEffect(() => {
+    let mounted = true;
+    if (src && src !== prevSrcRef.current) {
+      prevSrcRef.current = src;
+      startTransition(async () => {
+        try {
+          let html = getRemoteComponentHtml(
+            htmlRef.current ?? (endTemplateRef.current?.previousElementSibling?.tagName === "div" ? endTemplateRef.current.previousElementSibling.innerHTML : "")
+          );
+          if (!html && src) {
+            const fetchInit = {
+              method: "GET",
+              headers: remoteFetchHeaders(additionalHeaders),
+              credentials
+            };
+            const res = await fetch(url, fetchInit);
+            if (!res.ok) {
+              throw new Error(
+                `Failed to fetch remote component "${name}": ${res.status}`
+              );
+            }
+            const remoteHtml = await res.text();
+            htmlRef.current = remoteHtml;
+            html = getRemoteComponentHtml(remoteHtml);
+          }
+          const parser = new DOMParser();
+          const doc = parser.parseFromString(html, "text/html");
+          const component = doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) ?? // fallback to the first element with the data-bundle and data-route attributes when not using a named remote component
+          doc.querySelector("div[data-bundle][data-route]") ?? // fallback to Next.js Pages Router
+          doc.querySelector("div#__next");
+          const nextData = JSON.parse(
+            (doc.querySelector("#__NEXT_DATA__") ?? doc.querySelector("#__REMOTE_NEXT_DATA__"))?.textContent ?? "null"
+          );
+          const remoteName = component?.getAttribute("id")?.replace(/_ssr$/, "") || (nextData ? "__next" : name);
+          const rsc = doc.querySelector(`#${remoteName}_rsc`);
+          const bundle = component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || "default";
+          const metadata = {
+            name: remoteName,
+            bundle,
+            route: component?.getAttribute("data-route") ?? nextData?.page ?? DEFAULT_ROUTE,
+            runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || RUNTIME_WEBPACK)
+          };
+          const remoteSharedEl = doc.querySelector(
+            `#${remoteName}_shared[data-remote-components-shared]`
+          );
+          const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
+          remoteSharedEl?.remove();
+          if (!component || !(rsc || nextData)) {
+            throw new Error(`Failed to find component with id "${remoteName}"`);
+          }
+          applyOriginToNodes(doc, url);
+          const links = Array.from(
+            doc.querySelectorAll("link[href]")
+          ).filter((link) => {
+            return !component.contains(link);
+          }).map((link) => ({
+            href: new URL(link.getAttribute("href") ?? link.href, url).href,
+            ...link.getAttributeNames().reduce((acc, key) => {
+              if (key !== "href") {
+                acc[attrToProp[key] ?? key] = link.getAttribute(key) ?? "";
+              }
+              return acc;
+            }, {})
+          }));
+          const scripts = doc.querySelectorAll(
+            "script[src],script[data-src]"
+          );
+          const inlineScripts = doc.querySelectorAll(
+            "script:not([src]):not([data-src]):not([id*='_rsc']):not([id='__NEXT_DATA__']):not([id='__REMOTE_NEXT_DATA__'])"
+          );
+          const self = globalThis;
+          const prevNextScripts = self.__next_s;
+          const nextScripts = [];
+          self.__next_s = nextScripts;
+          await Promise.all(
+            Array.from(inlineScripts).filter(
+              (script) => !(script.id.endsWith("_shared") && script.getAttribute("type") === "application/json" && typeof script.getAttribute(
+                "data-remote-components-shared"
+              ) === "string")
+            ).map((script) => {
+              return new Promise((resolve) => {
+                if (script.textContent && !script.textContent.includes("self.__next_f=") && !script.textContent.includes("self.__next_f.push")) {
+                  if (!script.getAttribute("type") || script.getAttribute("type") === "text/javascript" || script.getAttribute("type") === "application/javascript") {
+                    const newScript = document.createElement("script");
+                    const blob = new Blob([script.textContent], {
+                      type: "application/javascript"
+                    });
+                    const blobUrl = URL.createObjectURL(blob);
+                    newScript.onload = () => {
+                      resolve(void 0);
+                      URL.revokeObjectURL(blobUrl);
+                      newScript.remove();
+                    };
+                    newScript.onerror = () => {
+                      URL.revokeObjectURL(blobUrl);
+                      newScript.remove();
+                      resolve(void 0);
+                    };
+                    newScript.src = blobUrl;
+                    document.body.appendChild(newScript);
+                  } else {
+                    resolve(void 0);
+                    document.body.appendChild(script);
+                  }
+                } else {
+                  resolve(void 0);
+                }
+              });
+            })
+          );
+          nextScripts.forEach(([scriptSrc, props]) => {
+            const script = document.createElement("script");
+            if (scriptSrc) {
+              script.src = scriptSrc;
+            }
+            if (typeof props.children === "string") {
+              script.textContent = props.children;
+            }
+            setAttributesFromProps(script, props);
+            document.head.appendChild(script);
+          });
+          self.__next_s = prevNextScripts;
+          let rscName;
+          if (rsc) {
+            rscName = `__remote_component_rsc_${escapeString(url.href)}_${escapeString(remoteName)}`;
+            rsc.textContent = rsc.textContent?.replace(
+              new RegExp(`self\\["${remoteName}"\\]`, "g"),
+              `self["${rscName}"]`
+            ) ?? "";
+            document.body.appendChild(rsc);
+          }
+          const newData = {
+            ...metadata,
+            links,
+            remoteShared,
+            url: url.href,
+            data: rsc ? (rsc.textContent || "").split("\n").filter(Boolean) : []
+          };
+          componentHydrationHtml.current = Array.from(doc.querySelectorAll("link,style")).map((link) => link.outerHTML).join("") + component.innerHTML;
+          const userShared = await shared;
+          const result = await loadRemoteComponent({
+            url: new URL(url, location.origin),
+            name: remoteName,
+            rscName,
+            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(
+                  `${prefix ?? ""}${path}`.replace(
+                    /(?<char>[^:])(?<double>\/\/)/g,
+                    "$1/"
+                  ),
+                  url
+                ).href
+              };
+            }),
+            shared: {
+              ...sharedPolyfills(userShared),
+              ...userShared
+            },
+            remoteShared,
+            container: shadowRoot
+          });
+          if (rsc) {
+            rsc.remove();
+          }
+          setData(newData);
+          if (result.error) {
+            setRemoteComponent(result.error);
+          } else {
+            setRemoteComponent(result.component);
+          }
+        } catch (error) {
+          if (mounted) {
+            setRemoteComponent(error);
+          }
+        }
+      });
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [
+    url,
+    src,
+    isolate,
+    credentials,
+    name,
+    shared,
+    shadowRoot,
+    additionalHeaders
+  ]);
+  if (remoteComponent instanceof Error) {
+    throw remoteComponent;
+  }
+  const metadataJson = /* @__PURE__ */ jsx2("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
+    name: data?.name || name,
+    bundle: data?.bundle || "default",
+    route: data?.route || DEFAULT_ROUTE,
+    runtime: data?.runtime || RUNTIME_WEBPACK
+  }) });
+  const resetStyle = reset ? /* @__PURE__ */ jsx2("style", { "data-remote-components-reset": "", children: `:host { all: initial; }` }) : null;
+  const linksToRender = data?.links?.map((link) => /* @__PURE__ */ createElement2(
+    "link",
+    {
+      ...link,
+      href: new URL(link.href, url).href,
+      key: JSON.stringify(link)
+    }
+  )) || null;
+  const componentToRender = /* @__PURE__ */ jsxs(Fragment, { children: [
+    resetStyle,
+    linksToRender,
+    remoteComponent ?? children
+  ] });
+  if (componentHydrationHtml.current && shadowRoot && !shadowRoot.innerHTML) {
+    shadowRoot.innerHTML = componentHydrationHtml.current;
+    componentHydrationHtml.current = null;
+  }
+  if (isolate !== false) {
+    const shadowRemoteComponentHtml = shadowRoot?.querySelector(`#__REMOTE_COMPONENT${name}`) ?? shadowRoot?.querySelector("div[data-bundle][data-route]");
+    if (shadowRemoteComponentHtml) {
+      shadowRemoteComponentHtml.remove();
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      metadataJson,
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "data-remote-component-id": `shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)}`,
+          id: `shadowroot_${data?.name ?? name}`,
+          ref: shadowRootContainerRef,
+          children: [
+            typeof document === "undefined" ? (
+              // eslint-disable-next-line react/no-unknown-property
+              /* @__PURE__ */ jsxs("template", { shadowrootmode: mode, children: [
+                typeof document === "undefined" ? /* @__PURE__ */ jsx2(
+                  "div",
+                  {
+                    dangerouslySetInnerHTML: {
+                      __html: `<img
+      alt="" decoding="async" style="display:none"
+      src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="
+      onload="(function(el){
+        const root = el.getRootNode();
+        globalThis.__remote_components_shadowroot_${src ? escapeString(new URL(src, typeof location !== "undefined" ? location.origin : "http://localhost").href) : ""}_${escapeString(data?.name ?? name)} = root;
+        el.parentElement.remove();
+      })(this)"
+    />`
+                    }
+                  }
+                ) : null,
+                resetStyle,
+                linksToRender,
+                children
+              ] })
+            ) : null,
+            shadowRoot && remoteComponent ? createPortal(
+              /* @__PURE__ */ jsxs(Fragment, { children: [
+                /* @__PURE__ */ jsx2("template", { id: `${name}_start` }),
+                resetStyle,
+                linksToRender,
+                remoteComponent,
+                /* @__PURE__ */ jsx2("template", { id: `${name}_end`, ref: endTemplateRef })
+              ] }),
+              shadowRoot
+            ) : null
+          ]
+        }
+      )
+    ] });
+  }
+  htmlRef.current = null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx2("template", { id: `${name}_start` }),
+    metadataJson,
+    componentToRender,
+    /* @__PURE__ */ jsx2("template", { id: `${name}_end`, ref: endTemplateRef })
+  ] });
+}
+
+// src/next/host/app-router-compat.tsx
+import { usePathname, useSearchParams } from "next/navigation";
+import { jsx as jsx3 } from "react/jsx-runtime";
+function imageImpl2(ImageComponent, bundle) {
+  const component = function RemoteImage(props) {
+    return /* @__PURE__ */ jsx3(
+      ImageComponent,
+      {
+        ...props,
+        src: applyBundleUrlToImagePropsSrc(bundle, props.src)
+      }
+    );
+  };
+  component.default = component;
+  return component;
+}
+var routerImpl = async () => {
+  const { useRouter } = await import("next/navigation");
+  return Promise.resolve({
+    useRouter: () => {
+      const router = useRouter();
+      const pathname = usePathname();
+      const searchParams = useSearchParams();
+      const query = Object.fromEntries(searchParams.entries());
+      return {
+        pathname,
+        query,
+        asPath: searchParams.toString() ? `${pathname}?${searchParams.toString()}` : pathname,
+        push: (href, _, options) => {
+          router.push(href, options);
+          return Promise.resolve(true);
+        },
+        replace: (href, _, options) => {
+          router.replace(href, options);
+          return Promise.resolve(true);
+        },
+        refresh: () => Promise.resolve(router.refresh()),
+        prefetch: async () => {
+          console.warn(
+            "You are using router.prefetch() in a remote component loaded in the Next.js App Router. prefetch() is a no-op in the App Router."
+          );
+          return Promise.resolve();
+        },
+        back: () => {
+          if (typeof window !== "undefined") {
+            window.history.back();
+          }
+        },
+        reload: () => {
+          router.refresh();
+        },
+        beforePopState: () => {
+        },
+        events: {
+          on: () => {
+            console.warn(
+              "You are using router.events.on() in a remote component loaded in the Next.js App Router. events.on() is a no-op in the App Router."
+            );
+          },
+          off: () => {
+            console.warn(
+              "You are using router.events.off() in a remote component loaded in the Next.js App Router. events.off() is a no-op in the App Router."
+            );
+          },
+          emit: () => {
+            console.warn(
+              "You are using router.events.emit() in a remote component loaded in the Next.js App Router. events.emit() is a no-op in the App Router."
+            );
+          }
+        }
+      };
+    }
+  });
+};
+
+// src/next/host/client/index.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
 async function tryImportShared() {
   try {
     const { shared } = await import("@remote-components/shared/host/app");
@@ -13,7 +1690,7 @@ async function tryImportShared() {
     return {};
   }
 }
-const sharedModules = async (userShared) => {
+var sharedModules = async (userShared) => {
   const [resolvedShared, resolvedUserShared] = await Promise.all([
     tryImportShared(),
     userShared ?? Promise.resolve({})
@@ -21,15 +1698,18 @@ const sharedModules = async (userShared) => {
   return {
     ...resolvedShared,
     "next/router": routerImpl,
-    "next/image": (bundle) => Promise.resolve(imageImpl(Image.default, bundle ?? "default")),
-    "next/dist/client/image-component": (bundle) => Promise.resolve({ Image: imageImpl(Image.default, bundle ?? "default") }),
+    "next/image": (bundle) => Promise.resolve(imageImpl2(Image.default, bundle ?? "default")),
+    "next/dist/client/image-component": (bundle) => Promise.resolve({ Image: imageImpl2(Image.default, bundle ?? "default") }),
     ...resolvedUserShared
   };
 };
-function RemoteComponent(props) {
-  return /* @__PURE__ */ jsx(RemoteComponentReact, { ...props, shared: sharedModules(props.shared) });
+function RemoteComponent2(props) {
+  if (typeof props.src !== "string" && !(props.src instanceof URL)) {
+    return props.children ?? null;
+  }
+  return /* @__PURE__ */ jsx4(RemoteComponent, { ...props, shared: sharedModules(props.shared) });
 }
 export {
-  RemoteComponent
+  RemoteComponent2 as RemoteComponent
 };
 //# sourceMappingURL=index.js.map