remote-components 0.0.4 → 0.0.6

package/dist/next/client.js

@@ -0,0 +1,704 @@
+"use client";
+
+// src/next/client/index.tsx
+import { useEffect, useMemo, useRef, useState } 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)) {
+      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] = (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.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]?.(
+    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();
+    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 };
+}
+
+// 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 bundle.replace(/-/g, "_");
+}
+
+// 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;
+  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__ && 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);
+      })
+    );
+  }
+}
+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;
+    }
+    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>.+)(?<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.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;
+    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 {
+      try {
+        return self.__original_webpack_require__?.(id);
+      } catch {
+        throw new Error(
+          `Module ${id} not found in remote component bundle ${bundle}`
+        );
+      }
+    }
+  };
+}
+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, module]) => {
+      if (self.__remote_shared_modules__?.[bundle]) {
+        self.__remote_shared_modules__[bundle][id.replace("[app-ssr]", "[app-client]")] = await (shared[module] ?? (() => Promise.resolve(
+          new Proxy(
+            {},
+            {
+              get(_, prop) {
+                if (prop !== "then") {
+                  console.warn(
+                    `Shared dependency "${module}" not found for "${bundle}" when trying to import "${prop}".`
+                  );
+                }
+              }
+            }
+          )
+        )))();
+      }
+    })
+  );
+}
+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;
+}
+
+// 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
+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(name, data) {
+  return new ReadableStream({
+    type: "bytes",
+    start(controller) {
+      const encoder = new TextEncoder();
+      const self = globalThis;
+      if (!self[name] && 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[name] = self[name] ?? [];
+              self[name].push(JSON.parse(`"${match.groups.rsc}"`));
+            }
+          }
+        });
+      }
+      const allChunks = (self[name] ?? [`0:[null]
+`]).join("");
+      allChunks.split("\n").forEach((chunk) => {
+        if (chunk.length > 0) {
+          const { id, prefix, payload } = /(?<id>[0-9a-zA-Z]+):(?<prefix>[A-Z])?(?<payload>\[.*\])/.exec(
+            chunk
+          )?.groups ?? {};
+          if (payload) {
+            const jsonPayload = JSON.parse(payload);
+            fixPayload(jsonPayload);
+            const reconstruct = `${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,
+  bundle,
+  route = "/",
+  runtime = "webpack",
+  data,
+  nextData,
+  scripts = [],
+  shared = Promise.resolve({}),
+  remoteShared = {},
+  container
+}) {
+  try {
+    if (runtime === "webpack") {
+      const self = globalThis;
+      self.__DISABLE_WEBPACK_EXEC__ = true;
+      await loadScripts(scripts);
+    }
+    await setupWebpackRuntime(
+      runtime,
+      scripts,
+      url,
+      bundle,
+      await shared,
+      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
+      };
+      applySharedModules(bundle, resolve);
+    }
+    if (data.length > 0) {
+      return await loadRSCComponent(name, data);
+    } else if (nextData) {
+      return loadNextPagesComponent(bundle, route, nextData, name, container);
+    }
+    return loadRSCComponent(name, [`0:[null]
+`]);
+  } catch (error) {
+    return {
+      component: null,
+      error: error instanceof Error ? error : new Error(String(error))
+    };
+  }
+}
+async function loadRSCComponent(name, data) {
+  const { createFromReadableStream } = await import("next/dist/compiled/react-server-dom-webpack/client.browser");
+  const stream = createRSCStream(name, 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/next/client/index.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+async function tryImportShared() {
+  try {
+    const { shared } = await import("@remote-component/shared/host");
+    return shared;
+  } catch {
+    return {};
+  }
+}
+function RemoteComponent({
+  src,
+  isolate,
+  credentials = "same-origin",
+  name = "__vercel_remote_component",
+  children
+}) {
+  const [data, setData] = useState(null);
+  const [remoteComponent, setRemoteComponent] = useState(null);
+  const shadowRootContainerRef = useRef(null);
+  const [shadowRoot, setShadowRoot] = useState(null);
+  useEffect(() => {
+    if (shadowRootContainerRef.current) {
+      const shadow = shadowRootContainerRef.current.attachShadow({
+        mode: "open"
+      });
+      setShadowRoot(shadow);
+    }
+  }, [shadowRootContainerRef]);
+  const url = useMemo(
+    () => typeof document !== "undefined" ? new URL(src, location.href) : new URL(src),
+    [src]
+  );
+  useEffect(() => {
+    let mounted = true;
+    (async () => {
+      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
+      };
+      const res = await fetch(url, fetchInit);
+      if (!res.ok) {
+        throw new Error(
+          `Failed to fetch remote component "${name}": ${res.status}`
+        );
+      }
+      const html = await res.text();
+      const doc = document.createElement("div");
+      doc.innerHTML = 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`);
+      const remoteShared = JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {};
+      remoteSharedEl?.parentElement?.removeChild(remoteSharedEl);
+      if (!component || !(rsc || nextData)) {
+        throw new Error(`Failed to find component with id "${remoteName}"`);
+      }
+      const links = Array.from(
+        doc.querySelectorAll("link[href]")
+      ).map((link) => ({
+        rel: link.rel,
+        href: new URL(link.getAttribute("href") ?? link.href, url).href,
+        as: link.getAttribute("as") || void 0
+      }));
+      const scripts = doc.querySelectorAll(
+        "script[src],script[data-src]"
+      );
+      if (mounted) {
+        if (rsc) {
+          document.body.appendChild(rsc);
+        }
+        const newData = {
+          ...metadata,
+          links,
+          remoteShared,
+          url: url.href,
+          data: rsc ? (rsc.textContent ?? "").split("\n").filter(Boolean) : []
+        };
+        setData(newData);
+        loadRemoteComponent({
+          url: new URL(url, location.origin),
+          name,
+          bundle,
+          route: metadata.route,
+          runtime: metadata.runtime,
+          data: newData.data,
+          nextData: void 0,
+          scripts: Array.from(scripts).map((script) => ({
+            src: new URL(
+              script.getAttribute("data-src") || script.getAttribute("src") || script.src,
+              url
+            ).href
+          })),
+          shared: tryImportShared(),
+          remoteShared,
+          container: void 0
+        }).then((result) => {
+          if (mounted) {
+            if (result.error) {
+              setRemoteComponent(result.error);
+            } else {
+              setRemoteComponent(result.component);
+            }
+          }
+        }).catch((error) => {
+          if (mounted) {
+            setRemoteComponent(error);
+          }
+        });
+      }
+    })().catch((error) => {
+      if (mounted) {
+        setRemoteComponent(error);
+      }
+    });
+    return () => {
+      mounted = false;
+    };
+  }, [url, src, isolate, credentials, name]);
+  if (remoteComponent instanceof Error) {
+    throw remoteComponent;
+  }
+  const linksToRender = data?.links?.map((link) => /* @__PURE__ */ jsx(
+    "link",
+    {
+      as: link.as,
+      href: new URL(link.href, url).href,
+      rel: link.rel
+    },
+    `${link.href}_${link.rel}`
+  )) || null;
+  const componentToRender = /* @__PURE__ */ jsxs(Fragment, { children: [
+    linksToRender,
+    remoteComponent ?? children
+  ] });
+  if (isolate !== false) {
+    return /* @__PURE__ */ jsx("div", { id: `shadowroot_${name}`, ref: shadowRootContainerRef, children: shadowRoot ? createPortal(componentToRender, shadowRoot) : null });
+  }
+  return componentToRender;
+}
+export {
+  RemoteComponent
+};
+//# sourceMappingURL=client.js.map