remote-components 0.0.51 → 0.1.2

package/dist/react/index.js

@@ -4,7 +4,7 @@ import {
   useEffect,
   useId,
   useLayoutEffect as useLayoutEffect2,
-  useMemo,
+  useMemo as useMemo2,
   useRef as useRef2,
   useState as useState2
 } from "react";
@@ -22,7 +22,7 @@ var tagNames = [
   "script",
   "link"
 ];
-function applyOriginToNodes(doc, url) {
+function applyOriginToNodes(doc, url, resolveClientUrl) {
   if (url.origin !== location.origin) {
     const nodes = doc.querySelectorAll(
       tagNames.map(
@@ -31,12 +31,15 @@ function applyOriginToNodes(doc, url) {
     );
     nodes.forEach((node) => {
       if (node.hasAttribute("src") && /^[./]+\/?/.test(node.getAttribute("src") ?? "")) {
-        node.src = new URL(node.getAttribute("src") ?? "/", url).href;
+        const absoluteSrc = new URL(node.getAttribute("src") ?? "/", url).href;
+        const isScript = node.tagName.toLowerCase() === "script";
+        node.src = isScript ? absoluteSrc : resolveClientUrl?.(absoluteSrc) ?? absoluteSrc;
       }
       if (node.hasAttribute("href") && /^[./]+\/?/.test(node.getAttribute("href") ?? "")) {
+        const absoluteHref = new URL(node.getAttribute("href") ?? "/", url).href;
         node.setAttribute(
           "href",
-          new URL(node.getAttribute("href") ?? "/", url).href
+          resolveClientUrl?.(absoluteHref) ?? absoluteHref
         );
       }
       if (node.hasAttribute("srcset")) {
@@ -45,7 +48,8 @@ function applyOriginToNodes(doc, url) {
           if (!urlPart)
             return entry;
           const absoluteUrl = new URL(urlPart, url).href;
-          return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;
+          const resolvedUrl = resolveClientUrl?.(absoluteUrl) ?? absoluteUrl;
+          return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;
         }).join(", ");
         if (srcSet) {
           node.setAttribute("srcset", srcSet);
@@ -57,7 +61,8 @@ function applyOriginToNodes(doc, url) {
           if (!urlPart)
             return entry;
           const absoluteUrl = new URL(urlPart, url).href;
-          return descriptor ? `${absoluteUrl} ${descriptor}` : absoluteUrl;
+          const resolvedUrl = resolveClientUrl?.(absoluteUrl) ?? absoluteUrl;
+          return descriptor ? `${resolvedUrl} ${descriptor}` : resolvedUrl;
         }).join(", ");
         if (srcSet) {
           node.setAttribute("imagesrcset", srcSet);
@@ -67,6 +72,34 @@ function applyOriginToNodes(doc, url) {
   }
 }
 
+// src/shared/constants.ts
+var RC_PROTECTED_REMOTE_FETCH_PATHNAME = "/rc-fetch-protected-remote";
+var CORS_DOCS_URL = "https://vercel.com/docs/remote-components/concepts/cors-external-urls#accessing-cross-site-protected-remote-components";
+
+// src/shared/client/protected-rc-fallback.ts
+function generateProtectedRcFallbackSrc(url) {
+  return `${RC_PROTECTED_REMOTE_FETCH_PATHNAME}?url=${encodeURIComponent(url)}`;
+}
+function isProxiedUrl(url) {
+  try {
+    return new URL(url, location.href).pathname === RC_PROTECTED_REMOTE_FETCH_PATHNAME;
+  } catch {
+    return false;
+  }
+}
+
+// src/shared/utils/abort.ts
+function isAbortError(error) {
+  if (error instanceof DOMException && error.name === "AbortError") {
+    return true;
+  }
+  if (error !== null && typeof error === "object" && "name" in error && error.name === "AbortError" && "message" in error && typeof error.message === "string") {
+    const e = error;
+    return typeof e.code === "number" || e.constructor?.name === "DOMException";
+  }
+  return false;
+}
+
 // src/shared/error.ts
 var RemoteComponentsError = class extends Error {
   code = "REMOTE_COMPONENTS_ERROR";
@@ -86,6 +119,185 @@ function failedToFetchRemoteComponentError(url, { status, statusText }, help = "
     { cause: new Error(`${status} ${statusText}`) }
   );
 }
+async function errorFromFailedFetch(originalUrl, resolvedUrl, res) {
+  const isProxied = isProxiedUrl(resolvedUrl.href);
+  if (isProxied && res) {
+    const body = await res.text().catch(() => "");
+    return failedProxyFetchError(
+      originalUrl,
+      resolvedUrl.href,
+      res.status,
+      body
+    );
+  }
+  const fallback = failedToFetchRemoteComponentError(
+    originalUrl,
+    res ?? { status: 0, statusText: "No Response" }
+  );
+  if (!res)
+    return fallback;
+  try {
+    const body = await res.text();
+    const parser = new DOMParser();
+    const doc = parser.parseFromString(body, "text/html");
+    const errorTemplate = doc.querySelector(
+      "template[data-next-error-message]"
+    );
+    const errorMessage = errorTemplate?.getAttribute("data-next-error-message");
+    if (errorMessage) {
+      const error = new RemoteComponentsError(errorMessage);
+      const errorStack = errorTemplate?.getAttribute("data-next-error-stack");
+      if (errorStack) {
+        error.stack = errorStack;
+      }
+      return error;
+    }
+  } catch (parseError) {
+    if (isAbortError(parseError))
+      throw parseError;
+  }
+  return fallback;
+}
+function failedProxyFetchError(originalUrl, proxyUrl, status, responseBody) {
+  if (status === 404) {
+    return new RemoteComponentsError(
+      `Could not proxy the request to "${originalUrl}" \u2014 the proxy endpoint "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" returned 404.
+
+The host server needs middleware or a route that handles "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}".
+
+Proxying requires two pieces:
+  1. resolveClientUrl={proxyClientRequestsThroughHost} on <RemoteComponent>
+  2. Middleware or a route for "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" on the host server
+
+Docs: ${CORS_DOCS_URL}`
+    );
+  }
+  if (status === 403) {
+    const detail = responseBody ? ` ${responseBody}` : "";
+    return new RemoteComponentsError(
+      `Proxied request to "${proxyUrl}" was forbidden.${detail} See: ${CORS_DOCS_URL}`
+    );
+  }
+  return new RemoteComponentsError(
+    `Proxied request for "${originalUrl}" via "${proxyUrl}" failed with status ${status}. See: ${CORS_DOCS_URL}`
+  );
+}
+
+// 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 RUNTIME_SCRIPT = "script";
+var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
+function getBundleKey(bundle) {
+  return escapeString(bundle);
+}
+
+// src/shared/client/parse-remote-html.ts
+function validateSingleComponent(doc, name, url) {
+  if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) || doc.querySelectorAll("remote-component:not([src])").length > 1 && !doc.querySelector(`remote-component[name="${name}"]`)) {
+    throw multipleRemoteComponentsError(url);
+  }
+}
+function findComponentElement(doc, name) {
+  return doc.querySelector(`div[data-bundle][data-route][id^="${name}"]`) ?? doc.querySelector("div[data-bundle][data-route]") ?? doc.querySelector("div#__next") ?? doc.querySelector(`remote-component[name="${name}"]:not([src])`) ?? doc.querySelector("remote-component:not([src])");
+}
+function parseNextData(doc) {
+  return JSON.parse(
+    (doc.querySelector("#__NEXT_DATA__") ?? doc.querySelector("#__REMOTE_NEXT_DATA__"))?.textContent ?? "null"
+  );
+}
+function resolveComponentName(component, nextData, fallbackName) {
+  const isRemoteComponent = component?.tagName.toLowerCase() === "remote-component";
+  const name = component?.getAttribute("id")?.replace(/_ssr$/, "") || isRemoteComponent && component?.getAttribute("name") || (nextData ? "__next" : fallbackName);
+  return { name, isRemoteComponent };
+}
+function extractComponentMetadata(component, nextData, name, url) {
+  return {
+    name,
+    bundle: component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || "default",
+    route: component?.getAttribute("data-route") ?? nextData?.page ?? (url.pathname || DEFAULT_ROUTE),
+    runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || RUNTIME_SCRIPT)
+  };
+}
+function extractRemoteShared(doc, name, nextData) {
+  const remoteSharedEl = doc.querySelector(
+    `#${name}_shared[data-remote-components-shared]`
+  );
+  const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
+  remoteSharedEl?.remove();
+  return remoteShared;
+}
+function validateComponentFound(component, rsc, nextData, isRemoteComponent, url, name) {
+  if (!component || !(rsc || nextData || isRemoteComponent)) {
+    throw new RemoteComponentsError(
+      `Remote Component not found on ${url}.${name !== "__vercel_remote_component" ? ` The name for the <RemoteComponent> is "${name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
+    );
+  }
+}
+function extractLinks(doc, component) {
+  return Array.from(doc.querySelectorAll("link[href]")).filter(
+    (link) => !component.contains(link)
+  );
+}
+function extractScripts(doc, component, isRemoteComponent) {
+  return Array.from(
+    (isRemoteComponent ? component : doc).querySelectorAll(
+      "script[src],script[data-src]"
+    )
+  );
+}
+function parseRemoteComponentDocument(doc, name, url) {
+  validateSingleComponent(doc, name, url.href);
+  const component = findComponentElement(doc, name);
+  const nextData = parseNextData(doc);
+  const { name: resolvedName, isRemoteComponent } = resolveComponentName(
+    component,
+    nextData,
+    name
+  );
+  const rsc = doc.querySelector(`#${resolvedName}_rsc`);
+  const metadata = extractComponentMetadata(
+    component,
+    nextData,
+    resolvedName,
+    url
+  );
+  const remoteShared = extractRemoteShared(doc, resolvedName, nextData);
+  validateComponentFound(
+    component,
+    rsc,
+    nextData,
+    isRemoteComponent,
+    url.href,
+    resolvedName
+  );
+  const links = extractLinks(doc, component);
+  const scripts = extractScripts(doc, component, isRemoteComponent);
+  return {
+    component,
+    name: resolvedName,
+    isRemoteComponent,
+    metadata,
+    nextData,
+    rsc,
+    remoteShared,
+    links,
+    scripts
+  };
+}
 
 // src/shared/utils/logger.ts
 var PREFIX = "remote-components";
@@ -95,9 +307,6 @@ function logDebug(location2, message) {
     console.debug(`[${PREFIX}:${location2}]: ${message}`);
   }
 }
-function logInfo(location2, message) {
-  console.info(`[${PREFIX}:${location2}]: ${message}`);
-}
 function logWarn(location2, message) {
   console.warn(`[${PREFIX}:${location2}]: ${message}`);
 }
@@ -108,6 +317,19 @@ function logError(location2, message, cause) {
     })
   );
 }
+function warnCrossOriginFetchError(logLocation, url) {
+  try {
+    const parsed = typeof url === "string" ? new URL(url) : url;
+    if (typeof location === "undefined" || parsed.origin === location.origin) {
+      return;
+    }
+    logWarn(
+      logLocation,
+      `Failed to fetch cross-origin resource "${parsed.href}". If this is a protected deployment, ensure withRemoteComponentsHost middleware is configured in your host and that the remote URL is included in allowedProxyUrls. See: ${CORS_DOCS_URL}`
+    );
+  } catch {
+  }
+}
 
 // src/shared/client/polyfill.tsx
 import { jsx } from "react/jsx-runtime";
@@ -551,19 +773,11 @@ function createRSCStream(rscName, data) {
   });
 }
 
-// src/shared/constants.ts
-var RC_PROTECTED_REMOTE_FETCH_PATHNAME = "/rc-fetch-protected-remote";
-
-// src/shared/client/protected-rc-fallback.ts
-function generateProtectedRcFallbackSrc(url) {
-  return `${RC_PROTECTED_REMOTE_FETCH_PATHNAME}?url=${encodeURIComponent(url)}`;
-}
-
 // src/shared/client/webpack-patterns.ts
 var NEXT_BUNDLE_PATH_RE = /\/_next\/\[.+\](?:%20| )/;
 
 // src/shared/client/script-loader.ts
-async function loadScripts(scripts) {
+async function loadScripts(scripts, resolveClientUrl) {
   await Promise.all(
     scripts.map((script) => {
       return new Promise((resolve, reject) => {
@@ -572,117 +786,34 @@ async function loadScripts(scripts) {
           script.src.replace(NEXT_BUNDLE_PATH_RE, "/_next/"),
           location.origin
         ).href;
-        const loadScriptWithProtectedRcFallback = (src, isFallback = false) => {
-          const newScript = document.createElement("script");
-          newScript.onload = () => {
-            if (isFallback) {
-              logInfo(
-                "ScriptLoader",
-                `Successfully loaded <script src="${newSrc}"> using fallback.`
-              );
-            }
-            resolve();
-          };
-          newScript.onerror = () => {
-            if (!isFallback) {
-              const fallbackSrc = generateProtectedRcFallbackSrc(newSrc);
-              logWarn(
-                "ScriptLoader",
-                `Failed to load <script src="${newSrc}"> for Remote Component. Trying fallback with ${RC_PROTECTED_REMOTE_FETCH_PATHNAME} (withRemoteComponentsHost)...`
-              );
-              loadScriptWithProtectedRcFallback(fallbackSrc, true);
-            } else {
-              logError(
-                "ScriptLoader",
-                `Failed to load fallback for <script src="${newSrc}"> for Remote Component.`
-              );
-              reject(
-                new RemoteComponentsError(
-                  `Failed to load <script src="${newSrc}"> for Remote Component. Check the URL is correct.`
-                )
-              );
-            }
-          };
-          newScript.src = src;
-          newScript.async = true;
-          document.head.appendChild(newScript);
+        const resolvedSrc = resolveClientUrl?.(newSrc) ?? newSrc;
+        const newScript = document.createElement("script");
+        newScript.onload = () => resolve();
+        newScript.onerror = () => {
+          const isProxied = isProxiedUrl(resolvedSrc);
+          if (isProxied) {
+            reject(
+              new RemoteComponentsError(
+                `Failed to load script "${newSrc}" via proxy "${resolvedSrc}". Ensure withRemoteComponentsHost middleware is configured and "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher. See: ${CORS_DOCS_URL}`
+              )
+            );
+          } else {
+            warnCrossOriginFetchError("ScriptLoader", newSrc);
+            reject(
+              new RemoteComponentsError(
+                `Failed to load <script src="${newSrc}"> for Remote Component. Check the URL is correct.`
+              )
+            );
+          }
         };
-        loadScriptWithProtectedRcFallback(newSrc);
+        newScript.src = resolvedSrc;
+        newScript.async = true;
+        document.head.appendChild(newScript);
       });
     })
   );
 }
 
-// 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 RUNTIME_SCRIPT = "script";
-var REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
-function getBundleKey(bundle) {
-  return escapeString(bundle);
-}
-
-// src/shared/utils/abort.ts
-function isAbortError(error) {
-  if (error instanceof DOMException && error.name === "AbortError") {
-    return true;
-  }
-  if (error !== null && typeof error === "object" && "name" in error && error.name === "AbortError" && "message" in error && typeof error.message === "string") {
-    const e = error;
-    return typeof e.code === "number" || e.constructor?.name === "DOMException";
-  }
-  return false;
-}
-
-// src/shared/client/fetch-with-protected-rc-fallback.ts
-async function fetchWithProtectedRcFallback(url, init) {
-  try {
-    const res = await fetch(url, init);
-    return res;
-  } catch (error) {
-    if (isAbortError(error)) {
-      throw error;
-    }
-    const parsedUrl = new URL(url);
-    if (typeof document === "object" && typeof document.location === "object" && document.location.origin !== parsedUrl.origin) {
-      logWarn(
-        "FetchRemoteComponent",
-        "Request failed due to CORS, attempting to fetch it via the withRemoteComponentsHost proxy."
-      );
-      const proxiedRes = await fetch(
-        generateProtectedRcFallbackSrc(parsedUrl.href),
-        init?.signal ? { signal: init.signal } : void 0
-      );
-      if (proxiedRes.status === 200) {
-        logInfo(
-          "FetchRemoteComponent",
-          `Successfully fetched ${parsedUrl.href} with fallback withRemoteComponentsHost proxy`
-        );
-        return proxiedRes;
-      } else {
-        logError(
-          "FetchRemoteComponent",
-          `Could not proxy remote: [response status ${proxiedRes.status}] ${await proxiedRes.text()}`
-        );
-      }
-    }
-    throw error;
-  }
-}
-
 // src/shared/client/turbopack-patterns.ts
 var REMOTE_SHARED_MARKER_RE = /(?:self|[a-z])\.TURBOPACK_REMOTE_SHARED/;
 var REMOTE_SHARED_ASSIGNMENT_RE = /\.TURBOPACK_REMOTE_SHARED=await (?:__turbopack_context__|e)\.A\((?<sharedModuleId>[0-9]+)\)/;
@@ -692,7 +823,7 @@ var ASYNC_MODULE_ALL_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<vCb
 var TURBOPACK_GLOBAL_RE = /(?:globalThis|self)\s*(?:\.TURBOPACK|\[\s*["']TURBOPACK["']\s*\])/;
 
 // src/shared/client/chunk-loader.ts
-function createChunkLoader(runtime) {
+function createChunkLoader(runtime, resolveClientUrl) {
   return function __turbopack_chunk_load__(chunkId, scriptBundle) {
     logDebug("ChunkLoader", `Loading chunk: "${chunkId}"`);
     const self = globalThis;
@@ -732,9 +863,10 @@ function createChunkLoader(runtime) {
       logDebug("ChunkLoader", `Returning cached promise for: "${url}"`);
       return self.__remote_components_turbopack_chunk_loader_promise__[url];
     }
-    logDebug("ChunkLoader", `Fetching chunk from: "${url}"`);
+    const resolvedUrl = resolveClientUrl?.(url) ?? url;
+    logDebug("ChunkLoader", `Fetching chunk from: "${resolvedUrl}"`);
     self.__remote_components_turbopack_chunk_loader_promise__[url] = new Promise((resolve, reject) => {
-      fetchWithProtectedRcFallback(url).then((res) => res.text()).then((code) => {
+      fetch(resolvedUrl).then((res) => res.text()).then((code) => {
         const hasTurbopack = TURBOPACK_GLOBAL_RE.test(code);
         if (hasTurbopack) {
           return handleTurbopackChunk(code, bundle ?? "", url);
@@ -747,7 +879,19 @@ function createChunkLoader(runtime) {
           "ChunkLoader",
           `First 500 chars of chunk: ${code.slice(0, 500)}`
         );
-      }).then(resolve).catch(reject);
+      }).then(resolve).catch((error) => {
+        const isProxied = isProxiedUrl(resolvedUrl);
+        if (isProxied) {
+          reject(
+            new RemoteComponentsError(
+              `Failed to load chunk "${url}" via proxy "${resolvedUrl}". Ensure withRemoteComponentsHost middleware is configured and "${RC_PROTECTED_REMOTE_FETCH_PATHNAME}" is in the matcher. See: ${CORS_DOCS_URL}`
+            )
+          );
+        } else {
+          warnCrossOriginFetchError("ChunkLoader", url);
+          reject(error);
+        }
+      });
     });
     return self.__remote_components_turbopack_chunk_loader_promise__[url];
   };
@@ -1240,7 +1384,7 @@ function getSharedModule(bundle, id) {
 }
 
 // src/shared/client/webpack-adapter.ts
-async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location.href), bundle, shared = {}, remoteShared = {}) {
+async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location.href), bundle, shared = {}, remoteShared = {}, resolveClientUrl) {
   const self = globalThis;
   if (!self.__remote_bundle_url__) {
     self.__remote_bundle_url__ = {};
@@ -1252,7 +1396,7 @@ async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location
       self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;
       self.__original_webpack_require__ = self.__webpack_require__;
     }
-    self.__webpack_chunk_load__ = createChunkLoader(runtime);
+    self.__webpack_chunk_load__ = createChunkLoader(runtime, resolveClientUrl);
     self.__webpack_require__ = createModuleRequire(runtime);
     self.__webpack_require_type__ = runtime;
     if (self.__remote_webpack_require__ && runtime === RUNTIME_TURBOPACK) {
@@ -1347,7 +1491,8 @@ async function loadRemoteComponent({
   scripts = [],
   shared = Promise.resolve({}),
   remoteShared = {},
-  container
+  container,
+  resolveClientUrl
 }) {
   try {
     if (runtime === "webpack") {
@@ -1356,7 +1501,7 @@ async function loadRemoteComponent({
         self.__DISABLE_WEBPACK_EXEC__ = {};
       }
       self.__DISABLE_WEBPACK_EXEC__[bundle] = true;
-      await loadScripts(scripts);
+      await loadScripts(scripts, resolveClientUrl);
     }
     const hostShared = await shared;
     logDebug(
@@ -1377,7 +1522,8 @@ async function loadRemoteComponent({
       url,
       bundle,
       hostShared,
-      remoteShared
+      remoteShared,
+      resolveClientUrl
     );
     if (bundle) {
       const resolve = {
@@ -1466,6 +1612,42 @@ function loadNextPagesComponent(bundle, route, nextData, name, container) {
   return { component };
 }
 
+// src/shared/client/proxy-through-host.ts
+function withRemoteSrc(resolveClientUrl, remoteSrc) {
+  const remoteOrigin = parseOrigin(remoteSrc);
+  return (url) => {
+    const urlOrigin = parseOrigin(url);
+    if (remoteOrigin && urlOrigin && urlOrigin !== remoteOrigin) {
+      return void 0;
+    }
+    return resolveClientUrl(remoteSrc, url);
+  };
+}
+function parseOrigin(url) {
+  try {
+    return new URL(url).origin;
+  } catch {
+    return void 0;
+  }
+}
+var proxyClientRequestsThroughHost = (remoteSrc, url) => {
+  if (typeof location === "undefined") {
+    return void 0;
+  }
+  const remoteOrigin = new URL(remoteSrc, location.href).origin;
+  if (remoteOrigin === location.origin) {
+    return void 0;
+  }
+  try {
+    const parsed = new URL(url, location.href);
+    if (parsed.origin === remoteOrigin) {
+      return generateProtectedRcFallbackSrc(url);
+    }
+  } catch {
+  }
+  return void 0;
+};
+
 // src/shared/client/set-attributes-from-props.ts
 var DOMAttributeNames = {
   acceptCharset: "accept-charset",
@@ -1509,27 +1691,21 @@ function setAttributesFromProps(el, props) {
 }
 
 // src/shared/client/static-loader.ts
-async function importViaProxy(absoluteSrc) {
-  const proxyUrl = new URL(
-    generateProtectedRcFallbackSrc(absoluteSrc),
-    location.href
-  ).href;
-  const response = await fetch(proxyUrl);
+async function importViaCallback(absoluteSrc, resolveClientUrl) {
+  const resolvedUrl = resolveClientUrl(absoluteSrc) ?? absoluteSrc;
+  const fetchUrl = new URL(resolvedUrl, location.href).href;
+  const response = await fetch(fetchUrl);
   if (!response.ok)
-    throw new Error(`Proxy fetch failed: ${response.status}`);
-  logInfo(
-    "StaticLoader",
-    `Successfully loaded ${absoluteSrc} via protected RC proxy fallback.`
-  );
+    throw new Error(`Proxied fetch failed: ${response.status}`);
   const content = (await response.text()).replace(/import\.meta\.url/g, JSON.stringify(absoluteSrc)).replace(
     /\b(from|import)\s*(["'])(\.\.?\/[^"']+)\2/g,
     (_, keyword, quote, relativePath) => {
       const absoluteImportUrl = new URL(relativePath, absoluteSrc).href;
-      const absoluteProxyUrl = new URL(
-        generateProtectedRcFallbackSrc(absoluteImportUrl),
+      const resolvedImportUrl = new URL(
+        resolveClientUrl(absoluteImportUrl) ?? absoluteImportUrl,
         location.href
       ).href;
-      return `${keyword} ${quote}${absoluteProxyUrl}${quote}`;
+      return `${keyword} ${quote}${resolvedImportUrl}${quote}`;
     }
   );
   const moduleBlobUrl = URL.createObjectURL(
@@ -1563,6 +1739,20 @@ async function importViaProxy(absoluteSrc) {
     delete registry[absoluteSrc];
   return mod;
 }
+async function importDirectly(absoluteSrc) {
+  try {
+    return await import(
+      /* @vite-ignore */
+      /* webpackIgnore: true */
+      absoluteSrc
+    );
+  } catch (importError) {
+    if (!absoluteSrc.startsWith("blob:")) {
+      warnCrossOriginFetchError("StaticLoader", absoluteSrc);
+    }
+    throw importError;
+  }
+}
 function resolveScriptSrc(script, url) {
   const rawSrc = typeof script.getAttribute === "function" ? script.getAttribute("src") ?? script.src : script.src;
   if (!rawSrc && script.textContent) {
@@ -1575,24 +1765,7 @@ function resolveScriptSrc(script, url) {
   }
   return rawSrc;
 }
-async function importScriptMod(absoluteSrc) {
-  try {
-    return await import(
-      /* @vite-ignore */
-      /* webpackIgnore: true */
-      absoluteSrc
-    );
-  } catch (importError) {
-    if (absoluteSrc.startsWith("blob:"))
-      throw importError;
-    logWarn(
-      "StaticLoader",
-      `Direct import of ${absoluteSrc} failed, attempting via protected RC proxy fallback.`
-    );
-    return importViaProxy(absoluteSrc);
-  }
-}
-async function loadStaticRemoteComponent(scripts, url) {
+async function loadStaticRemoteComponent(scripts, url, resolveClientUrl) {
   const self = globalThis;
   if (self.__remote_script_entrypoint_mount__?.[url.href]) {
     self.__remote_script_entrypoint_mount__[url.href] = /* @__PURE__ */ new Set();
@@ -1605,7 +1778,7 @@ async function loadStaticRemoteComponent(scripts, url) {
       try {
         const src = resolveScriptSrc(script, url);
         const absoluteSrc = new URL(src, url).href;
-        const mod = await importScriptMod(absoluteSrc);
+        const mod = resolveClientUrl ? await importViaCallback(absoluteSrc, resolveClientUrl) : await importDirectly(absoluteSrc);
         if (src.startsWith("blob:")) {
           URL.revokeObjectURL(src);
         }
@@ -1667,6 +1840,32 @@ async function loadStaticRemoteComponent(scripts, url) {
   );
 }
 
+// src/shared/contract/host-state.ts
+function createHostState() {
+  return {
+    stage: "idle",
+    prevSrc: void 0,
+    prevUrl: void 0,
+    prevName: void 0,
+    prevIsRemoteComponent: false,
+    abortController: void 0
+  };
+}
+
+// src/shared/contract/resolve-name-from-src.ts
+function resolveNameFromSrc(src, defaultName) {
+  if (!src) {
+    return defaultName;
+  }
+  const hash = typeof src === "string" ? src : src.hash;
+  const hashIndex = hash.indexOf("#");
+  if (hashIndex < 0) {
+    return defaultName;
+  }
+  const name = hash.slice(hashIndex + 1);
+  return name || defaultName;
+}
+
 // src/shared/ssr/fetch-headers.ts
 function remoteFetchHeaders() {
   return {
@@ -1703,7 +1902,12 @@ async function fetchWithHooks(url, additionalInit, options = {}) {
   };
   let res = await onRequest?.(url, init, hookOptions);
   if (!res) {
-    res = await fetchWithProtectedRcFallback(url, init);
+    try {
+      res = await fetch(url, init);
+    } catch (error) {
+      warnCrossOriginFetchError("FetchRemoteComponent", url);
+      throw error;
+    }
   }
   const transformedRes = await onResponse?.(url, res, hookOptions);
   if (transformedRes) {
@@ -1721,6 +1925,25 @@ function getClientOrServerUrl(src, serverFallback) {
   return typeof src === "string" ? new URL(src, fallback) : src;
 }
 
+// src/react/hooks/use-resolve-client-url.ts
+import { useMemo } from "react";
+import { useRemoteComponentsContext } from "#internal/react/context";
+
+// src/shared/client/default-resolve-client-url.ts
+function bindResolveClientUrl(prop, remoteSrc) {
+  return prop ? withRemoteSrc(prop, remoteSrc) : void 0;
+}
+
+// src/react/hooks/use-resolve-client-url.ts
+function useResolveClientUrl(prop, urlHref) {
+  const { resolveClientUrl: contextValue } = useRemoteComponentsContext();
+  const resolveClientUrl = prop ?? contextValue;
+  return useMemo(
+    () => bindResolveClientUrl(resolveClientUrl, urlHref),
+    [resolveClientUrl, urlHref]
+  );
+}
+
 // src/react/hooks/use-shadow-root.ts
 import { useLayoutEffect, useRef, useState } from "react";
 function useShadowRoot({
@@ -1770,7 +1993,7 @@ function useShadowRoot({
   return { shadowRoot, shadowRootContainerRef };
 }
 
-// src/react/utils/parse-remote-html.ts
+// src/react/utils/extract-remote-html.ts
 var DUMMY_FALLBACK = "http://remote-components-dummy-fallback";
 function getRemoteComponentHtml(html) {
   if (typeof document === "undefined")
@@ -1793,6 +2016,7 @@ function getRemoteComponentHtml(html) {
 }
 
 // src/react/index.tsx
+import { RemoteComponentsProvider } from "#internal/react/context";
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
 function RemoteComponent({
@@ -1809,27 +2033,21 @@ function RemoteComponent({
   onError,
   onChange,
   onRequest,
-  onResponse
+  onResponse,
+  resolveClientUrl: _resolveClientUrl
 }) {
   const instanceId = useId();
-  const name = useMemo(() => {
-    if (typeof src === "string") {
-      const url2 = new URL(
-        src,
-        typeof document !== "undefined" ? location.href : DUMMY_FALLBACK
-      );
-      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 name = useMemo2(
+    () => resolveNameFromSrc(src, nameProp),
+    [src, nameProp]
+  );
   const [data, setData] = useState2(null);
-  const url = useMemo(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);
+  const url = useMemo2(() => getClientOrServerUrl(src, DUMMY_FALLBACK), [src]);
+  const resolveClientUrl = useResolveClientUrl(_resolveClientUrl, url.href);
   const id = url.origin === (typeof location !== "undefined" ? location.origin : DUMMY_FALLBACK) ? url.pathname : url.href;
-  const keySuffix = `${escapeString(id)}_${escapeString(data?.name ?? name)}_${escapeString(instanceId)}`;
+  const keySuffix = `${escapeString(id)}_${escapeString(
+    data?.name ?? name
+  )}_${escapeString(instanceId)}`;
   const [remoteComponent, setRemoteComponent] = useState2(null);
   const { shadowRoot, shadowRootContainerRef } = useShadowRoot({
     isolate,
@@ -1855,13 +2073,10 @@ function RemoteComponent({
       return elements;
     })() : []
   );
-  const prevSrcRef = useRef2(null);
+  const hostStateRef = useRef2(createHostState());
   const componentHydrationHtml = useRef2(null);
-  const prevIsRemoteComponentRef = useRef2(false);
-  const prevUrlRef = useRef2(null);
   const prevRemoteComponentContainerRef = useRef2(null);
   const unmountRef = useRef2(null);
-  const prevNameRef = useRef2(void 0);
   useLayoutEffect2(() => {
     const shadowRootKey = `__remote_components_shadowroot_${keySuffix}`;
     return () => {
@@ -1900,14 +2115,18 @@ function RemoteComponent({
     }
   }, [shadowRoot, remoteComponent, name]);
   useEffect(() => {
-    if (src && src !== prevSrcRef.current) {
-      const previousSrc = prevSrcRef.current;
-      const previousName = prevNameRef.current;
-      prevSrcRef.current = src;
+    if (src && src !== hostStateRef.current.prevSrc) {
+      const previousSrc = hostStateRef.current.prevSrc;
+      const previousName = hostStateRef.current.prevName;
+      hostStateRef.current.prevSrc = src;
       if (previousSrc !== null) {
         htmlRef.current = null;
       }
+      hostStateRef.current.abortController?.abort();
+      hostStateRef.current.abortController = new AbortController();
+      const { signal } = hostStateRef.current.abortController;
       onBeforeLoad?.(src);
+      hostStateRef.current.stage = "loading";
       startTransition(async () => {
         try {
           let html = getRemoteComponentHtml(
@@ -1917,86 +2136,45 @@ function RemoteComponent({
             const fetchInit = {
               credentials
             };
-            const abortController = new AbortController();
-            const res = await fetchWithHooks(url, fetchInit, {
+            const resolvedUrl = new URL(
+              resolveClientUrl?.(url.href) ?? url.href,
+              location.href
+            );
+            const res = await fetchWithHooks(resolvedUrl, fetchInit, {
               onRequest,
               onResponse,
-              abortController
+              abortController: hostStateRef.current.abortController
             });
             if (!res || !res.ok) {
-              let error = failedToFetchRemoteComponentError(
-                url.href,
-                res ?? new Response(null, { status: 0 })
-              );
-              try {
-                const body = await res.text();
-                const parser2 = new DOMParser();
-                const doc2 = parser2.parseFromString(body, "text/html");
-                const errorTemplate = doc2.querySelector(
-                  "template[data-next-error-message]"
-                );
-                const errorMessage = errorTemplate?.getAttribute(
-                  "data-next-error-message"
-                );
-                const errorStack = errorTemplate?.getAttribute(
-                  "data-next-error-stack"
-                );
-                if (errorMessage) {
-                  error = new RemoteComponentsError(errorMessage);
-                  if (errorStack) {
-                    error.stack = errorStack;
-                  }
-                }
-              } catch (parseError) {
-                if (isAbortError(parseError))
-                  throw parseError;
-              }
-              throw error;
+              throw await errorFromFailedFetch(url.href, resolvedUrl, res);
             }
             const remoteHtml = await res.text();
+            if (signal.aborted)
+              return;
             htmlRef.current = remoteHtml;
             html = getRemoteComponentHtml(remoteHtml);
           }
+          if (signal.aborted)
+            return;
           const parser = new DOMParser();
           const doc = parser.parseFromString(html, "text/html");
-          if (doc.querySelectorAll("div[data-bundle][data-route]").length > 1 && !doc.querySelector(
-            `div[data-bundle][data-route][id^="${name}"]`
-          ) || doc.querySelectorAll("remote-component:not([src])").length > 1 && !doc.querySelector(`remote-component[name="${name}"]`)) {
-            throw multipleRemoteComponentsError(url.href);
-          }
-          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") ?? // fallback to the remote-component web component
-          doc.querySelector(`remote-component[name="${name}"]:not([src])`) ?? doc.querySelector("remote-component:not([src])");
-          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 isRemoteComponent = component?.tagName.toLowerCase() === "remote-component";
-          const metadata = {
+          const {
+            component,
             name: remoteName,
-            bundle,
-            route: component?.getAttribute("data-route") ?? nextData?.page ?? (url.pathname || DEFAULT_ROUTE),
-            runtime: component?.getAttribute("data-runtime") ?? (nextData?.props.__REMOTE_COMPONENT__?.runtime || RUNTIME_SCRIPT)
-          };
-          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 || isRemoteComponent)) {
-            throw new RemoteComponentsError(
-              `Remote Component not found on ${url.href}.${remoteName !== "__vercel_remote_component" ? `The name for the <RemoteComponent> is "${remoteName}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
-            );
-          }
-          if (prevIsRemoteComponentRef.current) {
+            isRemoteComponent,
+            metadata,
+            nextData,
+            rsc,
+            remoteShared,
+            links: linkElements,
+            scripts: scriptElements
+          } = parseRemoteComponentDocument(doc, name, url);
+          if (hostStateRef.current.prevIsRemoteComponent) {
             if (shadowRoot) {
               shadowRoot.innerHTML = "";
             }
             const self = globalThis;
-            const prevUrl = prevUrlRef.current;
+            const prevUrl = hostStateRef.current.prevUrl;
             if (prevUrl && self.__remote_script_entrypoint_unmount__?.[prevUrl.href]) {
               const unmountPromises = Promise.all(
                 Array.from(unmountRef.current ?? []).map(
@@ -2009,15 +2187,11 @@ function RemoteComponent({
               await unmountPromises;
             }
           }
-          prevIsRemoteComponentRef.current = isRemoteComponent;
-          prevUrlRef.current = url;
-          prevNameRef.current = remoteName;
-          applyOriginToNodes(doc, url);
-          const links = Array.from(
-            doc.querySelectorAll("link[href]")
-          ).filter((link) => {
-            return !component.contains(link);
-          }).map((link) => ({
+          hostStateRef.current.prevIsRemoteComponent = isRemoteComponent;
+          hostStateRef.current.prevUrl = url;
+          hostStateRef.current.prevName = remoteName;
+          applyOriginToNodes(doc, url, resolveClientUrl);
+          const links = linkElements.map((link) => ({
             href: new URL(link.getAttribute("href") ?? link.href, url).href,
             ...link.getAttributeNames().reduce((acc, key) => {
               if (key !== "href") {
@@ -2026,7 +2200,7 @@ function RemoteComponent({
               return acc;
             }, {})
           }));
-          const scripts = (isRemoteComponent ? component : doc).querySelectorAll("script[src],script[data-src]");
+          const scripts = scriptElements;
           const inlineScripts = (isRemoteComponent ? component : doc).querySelectorAll(
             "script:not([src]):not([data-src]):not([id*='_rsc']):not([id='__NEXT_DATA__']):not([id='__REMOTE_NEXT_DATA__'])"
           );
@@ -2117,7 +2291,7 @@ function RemoteComponent({
             );
           }
           if (isRemoteComponent) {
-            if (previousSrc !== null) {
+            if (previousSrc !== void 0) {
               onChange?.({
                 previousSrc,
                 nextSrc: src,
@@ -2136,7 +2310,8 @@ function RemoteComponent({
               setRemoteComponent(null);
               const { mount, unmount } = await loadStaticRemoteComponent(
                 Array.from(shadowRoot.querySelectorAll("script")),
-                url
+                url,
+                resolveClientUrl
               );
               unmountRef.current = unmount;
               await Promise.all(
@@ -2157,7 +2332,8 @@ function RemoteComponent({
               htmlRef.current = null;
               const { mount, unmount } = await loadStaticRemoteComponent(
                 Array.from(component.querySelectorAll("script")),
-                url
+                url,
+                resolveClientUrl
               );
               unmountRef.current = unmount;
               await Promise.all(
@@ -2167,12 +2343,13 @@ function RemoteComponent({
               );
               onLoad?.(src);
             }
+            hostStateRef.current.stage = "loaded";
           } else {
             const result = await loadRemoteComponent({
               url,
               name: remoteName,
               rscName,
-              bundle,
+              bundle: metadata.bundle,
               route: metadata.route,
               runtime: metadata.runtime,
               data: newData.data,
@@ -2200,13 +2377,14 @@ function RemoteComponent({
                 ...userShared
               },
               remoteShared,
-              container: shadowRoot
+              container: shadowRoot,
+              resolveClientUrl
             });
             if (rsc) {
               rsc.remove();
             }
             setData(newData);
-            if (previousSrc !== null) {
+            if (previousSrc !== void 0) {
               onChange?.({
                 previousSrc,
                 nextSrc: src,
@@ -2215,17 +2393,21 @@ function RemoteComponent({
               });
             }
             if (result.error) {
+              hostStateRef.current.stage = "error";
               setRemoteComponent(result.error);
               onError?.(result.error);
             } else {
+              hostStateRef.current.stage = "loaded";
               setRemoteComponent(result.component);
               onLoad?.(src);
             }
           }
         } catch (error) {
           if (isAbortError(error)) {
+            hostStateRef.current.stage = "idle";
             return;
           }
+          hostStateRef.current.stage = "error";
           setRemoteComponent(error);
           onError?.(error);
         }
@@ -2246,7 +2428,8 @@ function RemoteComponent({
     onError,
     onChange,
     onRequest,
-    onResponse
+    onResponse,
+    resolveClientUrl
   ]);
   if (remoteComponent instanceof Error) {
     throw remoteComponent;
@@ -2255,7 +2438,7 @@ function RemoteComponent({
     name: data?.name || name,
     bundle: data?.bundle || "default",
     route: data?.route || DEFAULT_ROUTE,
-    runtime: prevIsRemoteComponentRef.current ? RUNTIME_SCRIPT : data?.runtime || RUNTIME_WEBPACK
+    runtime: hostStateRef.current.prevIsRemoteComponent ? RUNTIME_SCRIPT : data?.runtime || RUNTIME_WEBPACK
   }) });
   const resetStyle = reset ? /* @__PURE__ */ jsx2("style", { "data-remote-components-reset": "react", children: `:host { all: initial; }` }) : null;
   const linksToRender = data?.links?.map((link) => /* @__PURE__ */ createElement2(
@@ -2274,10 +2457,11 @@ function RemoteComponent({
   if (componentHydrationHtml.current && shadowRoot && !shadowRoot.innerHTML) {
     shadowRoot.innerHTML = componentHydrationHtml.current;
     componentHydrationHtml.current = null;
-    if (prevIsRemoteComponentRef.current) {
+    if (hostStateRef.current.prevIsRemoteComponent) {
       loadStaticRemoteComponent(
         Array.from(shadowRoot.querySelectorAll("script")),
-        url
+        url,
+        resolveClientUrl
       ).then(({ mount }) => {
         return Promise.all(
           Array.from(mount).map((mountFn) => mountFn(shadowRoot))
@@ -2360,6 +2544,8 @@ function RemoteComponent({
   ] });
 }
 export {
-  RemoteComponent
+  RemoteComponent,
+  RemoteComponentsProvider,
+  proxyClientRequestsThroughHost
 };
 //# sourceMappingURL=index.js.map