remote-components 0.0.1

package/dist/html/host.cjs

@@ -0,0 +1,758 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// 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)) {
+      const 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] = (module2) => {
+            module2.exports = value;
+          };
+        }
+      }
+    }
+  }
+}
+var init_shared_modules = __esm({
+  "src/shared/webpack/shared-modules.ts"() {
+    "use strict";
+  }
+});
+
+// src/shared/webpack/next-client-pages-loader.ts
+function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
+  const self = globalThis;
+  const nextCssOriginal = document.getElementById("__next_css__DO_NOT_USE__");
+  if (nextCssOriginal) {
+    nextCssOriginal.parentNode?.removeChild(nextCssOriginal);
+  }
+  const nextCss = document.createElement("noscript");
+  nextCss.id = "__next_css__DO_NOT_USE__";
+  const lastNode = document.head.childNodes[document.head.childNodes.length - 1];
+  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]?.(componentLoaderChunk);
+  if (typeof appLoaderChunk === "string" || typeof appLoaderChunk === "number" && appLoaderChunk !== -1) {
+    self.__remote_webpack_require__?.[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();
+    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);
+      }
+    });
+    if (styleContainer) {
+      let node = nextCss.previousSibling;
+      while (node && node !== lastNode) {
+        styleContainer.appendChild(node);
+        node = nextCss.previousSibling;
+      }
+    }
+    delete self.__NEXT_P;
+    self.__NEXT_P = __NEXT_P_ORIGINAL;
+    if (nextCssOriginal) {
+      nextCssOriginal.parentNode?.appendChild(nextCssOriginal);
+    }
+    return { Component, App };
+  }
+  return { Component: null, App: null };
+}
+var init_next_client_pages_loader = __esm({
+  "src/shared/webpack/next-client-pages-loader.ts"() {
+    "use strict";
+  }
+});
+
+// src/html/runtime/webpack.ts
+var webpack_exports = {};
+__export(webpack_exports, {
+  webpackRuntime: () => webpackRuntime
+});
+async function webpackRuntime() {
+  const self = globalThis;
+  self.__DISABLE_WEBPACK_EXEC__ = true;
+  if (typeof self.__webpack_require__ !== "function" && self.__webpack_require_type__ !== "turbopack") {
+    self.__webpack_require__ = (remoteId) => {
+      const re = /\[(?<bundle>[a-zA-Z0-9-_]+)\] (?<id>.*)/;
+      const match = re.exec(remoteId);
+      const bundle = match?.groups?.bundle;
+      const id = match?.groups?.id;
+      if (!(id && bundle)) {
+        throw new Error(`Module not found: "${remoteId}"`);
+      }
+      if (typeof self.__remote_webpack_require__?.[bundle] !== "function") {
+        throw new Error(`Remote component loading error "${bundle}"`);
+      }
+      return self.__remote_webpack_require__[bundle](id);
+    };
+    self.__webpack_chunk_load__ = () => {
+      return Promise.resolve([]);
+    };
+  }
+  const { createFromReadableStream } = await import("react-server-dom-webpack/client.browser");
+  async function preloadScripts(scripts, url, bundle, _) {
+    await Promise.all(
+      scripts.map((script) => {
+        return new Promise((resolve2, reject) => {
+          const newScript = document.createElement("script");
+          newScript.onload = () => {
+            resolve2();
+          };
+          newScript.onerror = () => {
+            reject(
+              new Error(
+                `Failed to load script ${script.src} for remote component`
+              )
+            );
+          };
+          const scriptSrc = script.src || script.getAttribute("data-src");
+          if (scriptSrc) {
+            newScript.src = new URL(
+              scriptSrc.replace(
+                /\/_next\/\[remote-component-(?:.+)\](?:%20| )/,
+                "/_next/"
+              ),
+              url
+            ).href;
+          }
+          newScript.async = true;
+          document.body.appendChild(newScript);
+          script.parentElement?.removeChild(script);
+        });
+      })
+    );
+    const resolve = {
+      "/react/index.js": await import("react"),
+      "/react/jsx-dev-runtime.js": await import("react/jsx-dev-runtime"),
+      "/react/jsx-runtime.js": await import("react/jsx-runtime"),
+      "/react-dom/index.js": await import("react-dom")
+    };
+    applySharedModules(bundle, resolve);
+  }
+  return {
+    self,
+    createFromReadableStream,
+    applySharedModules,
+    nextClientPagesLoader,
+    preloadScripts
+  };
+}
+var init_webpack = __esm({
+  "src/html/runtime/webpack.ts"() {
+    "use strict";
+    init_shared_modules();
+    init_next_client_pages_loader();
+  }
+});
+
+// src/shared/client/script-loader.ts
+function loadCSS(url) {
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = url;
+  document.head.appendChild(link);
+}
+var init_script_loader = __esm({
+  "src/shared/client/script-loader.ts"() {
+    "use strict";
+  }
+});
+
+// src/shared/client/const.ts
+function getBundleKey(bundle) {
+  return bundle.replace(/-/g, "_");
+}
+var RUNTIME_WEBPACK, REMOTE_COMPONENT_REGEX;
+var init_const = __esm({
+  "src/shared/client/const.ts"() {
+    "use strict";
+    RUNTIME_WEBPACK = "webpack";
+    REMOTE_COMPONENT_REGEX = /(?<prefix>.*)?\[(?<bundle>remote-component-(?:[^\]]+))\](?:%20| )(?<id>.+)/;
+  }
+});
+
+// src/shared/client/webpack-adapter.ts
+async function setupWebpackRuntime(runtime, scripts = [], bundle, shared = {}, remoteShared = {}) {
+  const self = globalThis;
+  self.__DISABLE_WEBPACK_EXEC__ = true;
+  await initializeSharedModules(bundle ?? "default", shared, remoteShared);
+  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__) {
+      const remoteBundle = bundle ?? "default";
+      self.__remote_webpack_require__[remoteBundle] = self.__webpack_require__;
+      self.__remote_webpack_require__[remoteBundle].type = "turbopack";
+    }
+  }
+  await Promise.all(
+    scripts.map((script) => {
+      if (script.src) {
+        return self.__webpack_chunk_load__?.(script.src, bundle);
+      }
+      return Promise.resolve(void 0);
+    })
+  );
+}
+function createChunkLoader(runtime) {
+  return function __turbopack_chunk_load__(chunkId, scriptBundle) {
+    if (runtime === RUNTIME_WEBPACK) {
+      return Promise.resolve(void 0);
+    }
+    const {
+      bundle,
+      id: path,
+      prefix
+    } = REMOTE_COMPONENT_REGEX.exec(chunkId)?.groups ?? {
+      bundle: scriptBundle ?? "",
+      id: chunkId
+    };
+    const url = new URL(
+      path ? `${prefix ?? ""}${path}`.replace(
+        /(?<char>[^:])(?<double>\/\/)/g,
+        "$1/"
+      ) : "/",
+      location.origin
+    ).href;
+    if (url.endsWith(".css")) {
+      loadCSS(url);
+      return;
+    }
+    return 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);
+    });
+  };
+}
+async function handleTurbopackChunk(code, bundle, url) {
+  if (code.includes("/next/dist/client/app-next-turbopack.js") && code.includes("importScripts(...self.TURBOPACK_NEXT_CHUNK_URLS")) {
+    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>.+)\._\.js\.map/g,
+    `//# sourceMappingURL=${new URL(".", new URL(url)).pathname}$1._.js.map`
+  );
+  await new Promise((scriptResolve, scriptReject) => {
+    const blob = new Blob([transformedCode], {
+      type: "application/javascript"
+    });
+    const scriptUrl = URL.createObjectURL(blob);
+    const script = document.createElement("script");
+    script.src = scriptUrl;
+    script.async = true;
+    script.onload = () => {
+      URL.revokeObjectURL(scriptUrl);
+      scriptResolve(void 0);
+    };
+    script.onerror = (error) => {
+      URL.revokeObjectURL(scriptUrl);
+      scriptReject(
+        new Error(
+          `Failed to load script: ${error instanceof Error ? error.message : String(error)}`
+        )
+      );
+    };
+    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;
+    try {
+      const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)?.groups ?? { bundle: "", id };
+      if (runtime === 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 {
+      return self.__original_webpack_require__?.(id);
+    }
+  };
+}
+function initializeSharedModules(bundle, shared = {}, remoteShared = {}) {
+  const self = globalThis;
+  self.__remote_shared_modules__ = self.__remote_shared_modules__ ?? {};
+  if (!self.__remote_shared_modules__[bundle]) {
+    self.__remote_shared_modules__[bundle] = {};
+  }
+  return Promise.all(
+    Object.entries(remoteShared).map(async ([id, module2]) => {
+      if (self.__remote_shared_modules__?.[bundle]) {
+        self.__remote_shared_modules__[bundle][id.replace("[app-ssr]", "[app-client]")] = await (shared[module2] ?? (() => {
+          console.warn(
+            `Shared dependency not found for "${bundle}": ${module2}`
+          );
+          return Promise.resolve({});
+        }))();
+      }
+    })
+  );
+}
+function getSharedModule(bundle, id) {
+  const self = globalThis;
+  for (const [key, value] of Object.entries(
+    self.__remote_shared_modules__?.[bundle] ?? {}
+  )) {
+    if (id.includes(key)) {
+      return value;
+    }
+  }
+  return null;
+}
+function handleTurbopackModule(bundle, moduleId, id) {
+  const self = globalThis;
+  const bundleKey = getBundleKey(bundle);
+  const modules = self[`TURBOPACK_${bundleKey}`]?.find((mod) => moduleId in mod[1])?.[1];
+  const moduleInit = modules?.[moduleId];
+  if (typeof moduleInit !== "function") {
+    throw new Error(
+      `Module ${id} not found in bundle ${bundle} with id ${moduleId}`
+    );
+  }
+  const exports = {};
+  moduleInit({
+    // HMR not implemented for Remote Components
+    k: {
+      register() {
+      },
+      registerExports() {
+      },
+      signature() {
+        return () => {
+        };
+      }
+    },
+    s(m) {
+      for (const [key, value] of Object.entries(m)) {
+        exports[key] = value;
+      }
+    },
+    i(iid) {
+      return self.__webpack_require__?.(`[${bundle}] ${iid}`);
+    },
+    r(rid) {
+      return self.__webpack_require__?.(`[${bundle}] ${rid}`);
+    },
+    m: {
+      exports
+    }
+  });
+  for (const [key, value] of Object.entries(exports)) {
+    if (typeof value === "function") {
+      exports[key] = value();
+    }
+  }
+  return exports;
+}
+var init_webpack_adapter = __esm({
+  "src/shared/client/webpack-adapter.ts"() {
+    "use strict";
+    init_script_loader();
+    init_const();
+  }
+});
+
+// src/html/runtime/turbopack.ts
+var turbopack_exports = {};
+__export(turbopack_exports, {
+  turbopackRuntime: () => turbopackRuntime
+});
+async function turbopackRuntime(bundle, shared, remoteShared) {
+  const self = globalThis;
+  await setupWebpackRuntime(
+    "turbopack",
+    [],
+    bundle,
+    self.__remote_component_shared__ ?? shared,
+    remoteShared
+  );
+  const { createFromReadableStream } = await import("react-server-dom-webpack/client.browser");
+  function preloadScripts(scripts, __) {
+    return setupWebpackRuntime(
+      "turbopack",
+      scripts.map((script) => ({
+        src: script.src || script.getAttribute("data-src")
+      })),
+      bundle,
+      self.__remote_component_shared__ ?? shared,
+      remoteShared
+    );
+  }
+  return {
+    self,
+    createFromReadableStream,
+    applySharedModules,
+    nextClientPagesLoader,
+    preloadScripts
+  };
+}
+var init_turbopack = __esm({
+  "src/html/runtime/turbopack.ts"() {
+    "use strict";
+    init_shared_modules();
+    init_next_client_pages_loader();
+    init_webpack_adapter();
+  }
+});
+
+// src/html/host.tsx
+var import_client = require("react-dom/client");
+
+// src/html/runtime/index.ts
+async function getRuntime(type, bundle, shared, remoteShared) {
+  if (typeof globalThis.process === "undefined") {
+    globalThis.process = {
+      env: {}
+    };
+  }
+  if (type === "webpack") {
+    const { webpackRuntime: webpackRuntime2 } = await Promise.resolve().then(() => (init_webpack(), webpack_exports));
+    return webpackRuntime2();
+  } else if (type === "turbopack") {
+    const { turbopackRuntime: turbopackRuntime2 } = await Promise.resolve().then(() => (init_turbopack(), turbopack_exports));
+    return turbopackRuntime2(bundle, shared, remoteShared);
+  }
+  throw new Error(`Runtime ${type} is not supported`);
+}
+
+// src/html/host.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+if (typeof HTMLElement !== "undefined") {
+  class RemoteComponent extends HTMLElement {
+    constructor() {
+      super();
+      this.__next = null;
+      this.fouc = null;
+      this.isLoading = false;
+      this.attachShadow({ mode: "open" });
+      this.fallbackSlot = document.createElement("slot");
+      this.shadowRoot?.appendChild(this.fallbackSlot);
+      this.name = this.getAttribute("name") || "__vercel_remote_component";
+      this.bundle = "default";
+      if (this.hasAttribute("src") || this.querySelector("div#__REMOTE_COMPONENT__") || this.hasAttribute("data-ssr")) {
+        this.load().catch((e) => {
+          throw new Error(`Failed to load remote component: ${e}`);
+        });
+      }
+    }
+    static get observedAttributes() {
+      return ["src"];
+    }
+    // watch for src attribute changes
+    // this is required to reload the remote component when the src attribute is added later
+    // this is for rendering the custom element using React
+    attributeChangedCallback(name, oldValue, newValue) {
+      if (name === "src" && oldValue !== newValue) {
+        this.load().catch((e) => {
+          throw new Error(`Failed to load remote component: ${e}`);
+        });
+      }
+    }
+    async load() {
+      if (this.isLoading) {
+        return;
+      }
+      this.isLoading = true;
+      const src = this.getAttribute("src");
+      const remoteComponentChild = this.querySelector(
+        "div#__REMOTE_COMPONENT__"
+      );
+      if (!src && !remoteComponentChild) {
+        throw new Error("src attribute is required");
+      }
+      let url = null;
+      let html = this.innerHTML;
+      if (!remoteComponentChild && src) {
+        url = new URL(src, window.location.href);
+        const fetchInit = {
+          method: "GET",
+          headers: {
+            Accept: "text/html",
+            // pass the public address of the remote component to the server used for module map mutation
+            "Vercel-Remote-Component-Url": url.href
+          },
+          credentials: "include"
+        };
+        const res = await fetch(url, fetchInit);
+        if (!res.ok) {
+          throw new Error(
+            `Failed to fetch remote component "${this.name}": ${res.status}`
+          );
+        }
+        html = await res.text();
+      }
+      const doc = document.createElement("div");
+      doc.innerHTML = html;
+      const component = doc.querySelector(`div[data-bundle][data-route][id^="${this.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"
+      );
+      if (nextData && nextData.buildId === "development") {
+        this.fouc = document.createElement("style");
+        this.fouc.textContent = `:host { display: none; }`;
+        this.shadowRoot?.appendChild(this.fouc);
+      }
+      this.name = component?.getAttribute("id")?.replace(/_ssr$/, "") || (nextData ? "__next" : this.name);
+      const rsc = doc.querySelector(`#${this.name}_rsc`);
+      this.bundle = component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || this.bundle;
+      const metadata = document.createElement("script");
+      metadata.type = "application/json";
+      metadata.setAttribute("data-remote-component", "");
+      metadata.textContent = JSON.stringify({
+        name: this.name,
+        bundle: this.bundle,
+        route: component?.getAttribute("data-route") ?? nextData?.page ?? "/",
+        runtime: component?.getAttribute("data-runtime") ?? nextData?.props.__REMOTE_COMPONENT__?.runtime
+      });
+      this.parentNode?.insertBefore(metadata, this);
+      const remoteSharedEl = doc.querySelector(`#${this.name}_shared`);
+      const remoteShared = JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {};
+      remoteSharedEl?.parentElement?.removeChild(remoteSharedEl);
+      if (!component || !(rsc || nextData)) {
+        throw new Error(`Failed to find component with id "${this.name}"`);
+      }
+      const removeable = Array.from(this.childNodes);
+      const links = doc.querySelectorAll("link[href]");
+      await Promise.all(
+        Array.from(links).map((link) => {
+          return new Promise((resolve, reject) => {
+            const newLink = document.createElement("link");
+            newLink.onload = () => {
+              resolve();
+            };
+            newLink.onerror = () => {
+              reject(
+                new Error(
+                  `Failed to load link ${link.href} for remote component`
+                )
+              );
+            };
+            for (const attr of link.attributes) {
+              newLink.setAttribute(attr.name, attr.value);
+            }
+            this.shadowRoot?.appendChild(newLink);
+          });
+        })
+      );
+      Array.from(component.children).forEach((el) => {
+        this.shadowRoot?.appendChild(el);
+      });
+      for (const el of removeable) {
+        el.parentElement?.removeChild(el);
+      }
+      this.shadowRoot?.removeChild(this.fallbackSlot);
+      const {
+        self,
+        createFromReadableStream,
+        nextClientPagesLoader: nextClientPagesLoader2,
+        preloadScripts
+      } = await getRuntime(
+        component.getAttribute("data-runtime") ?? "webpack",
+        this.bundle,
+        {
+          react: () => import("react"),
+          "react/jsx-dev-runtime": () => import("react/jsx-dev-runtime"),
+          "react/jsx-runtime": () => import("react/jsx-runtime"),
+          "react-dom": () => import("react-dom"),
+          "react-dom/client": () => import("react-dom/client")
+        },
+        remoteShared
+      );
+      const scripts = doc.querySelectorAll(
+        "script[src],script[data-src]"
+      );
+      if (!url) {
+        url = new URL(
+          component.getAttribute("data-route") ?? "/",
+          window.location.href
+        );
+      }
+      await preloadScripts(Array.from(scripts), url, this.bundle, this.name);
+      if (rsc) {
+        rsc.parentElement?.removeChild(rsc);
+        const rscClone = document.createElement("script");
+        rscClone.id = `${this.name}_rsc`;
+        rscClone.textContent = rsc.textContent;
+        document.body.appendChild(rscClone);
+        let cache;
+        const RemoteComponentFromReadableStream = ({
+          name
+        }) => {
+          const Component = cache ?? // cache the component to avoid reloading the RSC flight data
+          (cache = createFromReadableStream(
+            // convert the RSC flight data array into a ReadableStream
+            new ReadableStream({
+              type: "bytes",
+              start(controller) {
+                const encoder = new TextEncoder();
+                (self[name] ?? [`0:[null]
+`]).forEach((chunk) => {
+                  controller.enqueue(encoder.encode(chunk));
+                });
+                controller.close();
+              }
+            })
+          ));
+          return Component;
+        };
+        (0, import_client.hydrateRoot)(
+          // hydrateRoot expects a document or element, but it works for the shadow DOM too
+          // @ts-expect-error support for shadow DOM
+          this.shadowRoot,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(RemoteComponentFromReadableStream, { name: this.name })
+        );
+      } else if (nextData) {
+        const { Component, App } = nextClientPagesLoader2(
+          this.bundle,
+          nextData.page,
+          this.shadowRoot
+        );
+        if (Component) {
+          (0, import_client.hydrateRoot)(
+            // hydrateRoot expects a document or element, but it works for the shadow DOM too
+            // @ts-expect-error support for shadow DOM
+            this.shadowRoot,
+            App ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, { Component, ...nextData.props }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...nextData.props })
+          );
+        }
+        if (this.fouc) {
+          this.shadowRoot?.removeChild(this.fouc);
+        }
+      }
+      this.isLoading = false;
+    }
+  }
+  customElements.define("remote-component", RemoteComponent);
+}
+//# sourceMappingURL=host.cjs.map