remote-components 0.0.51 → 0.1.2

package/dist/html/host.cjs

@@ -30,6 +30,51 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/shared/constants.ts
+var RC_PROTECTED_REMOTE_FETCH_PATHNAME, CORS_DOCS_URL;
+var init_constants = __esm({
+  "src/shared/constants.ts"() {
+    "use strict";
+    RC_PROTECTED_REMOTE_FETCH_PATHNAME = "/rc-fetch-protected-remote";
+    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;
+  }
+}
+var init_protected_rc_fallback = __esm({
+  "src/shared/client/protected-rc-fallback.ts"() {
+    "use strict";
+    init_constants();
+  }
+});
+
+// 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;
+}
+var init_abort = __esm({
+  "src/shared/utils/abort.ts"() {
+    "use strict";
+  }
+});
+
 // src/shared/error.ts
 function multipleRemoteComponentsError(url) {
   return new RemoteComponentsError(
@@ -42,10 +87,76 @@ 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}`
+  );
+}
 var RemoteComponentsError;
 var init_error = __esm({
   "src/shared/error.ts"() {
     "use strict";
+    init_protected_rc_fallback();
+    init_constants();
+    init_abort();
     RemoteComponentsError = class extends Error {
       code = "REMOTE_COMPONENTS_ERROR";
       constructor(message, options) {
@@ -56,15 +167,39 @@ var init_error = __esm({
   }
 });
 
+// src/shared/utils/index.ts
+function escapeString(str) {
+  return str.replace(/[^a-z0-9]/g, "_");
+}
+var init_utils = __esm({
+  "src/shared/utils/index.ts"() {
+    "use strict";
+  }
+});
+
+// src/shared/client/const.ts
+function getBundleKey(bundle) {
+  return escapeString(bundle);
+}
+var DEFAULT_ROUTE, RUNTIME_WEBPACK, RUNTIME_TURBOPACK, RUNTIME_SCRIPT, REMOTE_COMPONENT_REGEX;
+var init_const = __esm({
+  "src/shared/client/const.ts"() {
+    "use strict";
+    init_utils();
+    DEFAULT_ROUTE = "/";
+    RUNTIME_WEBPACK = "webpack";
+    RUNTIME_TURBOPACK = "turbopack";
+    RUNTIME_SCRIPT = "script";
+    REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
+  }
+});
+
 // src/shared/utils/logger.ts
 function logDebug(location2, message) {
   if (DEBUG) {
     console.debug(`[${PREFIX}:${location2}]: ${message}`);
   }
 }
-function logInfo(location2, message) {
-  console.info(`[${PREFIX}:${location2}]: ${message}`);
-}
 function logWarn(location2, message) {
   console.warn(`[${PREFIX}:${location2}]: ${message}`);
 }
@@ -75,10 +210,24 @@ 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 {
+  }
+}
 var PREFIX, DEBUG;
 var init_logger = __esm({
   "src/shared/utils/logger.ts"() {
     "use strict";
+    init_constants();
     init_error();
     PREFIX = "remote-components";
     DEBUG = typeof window !== "undefined" && localStorage.getItem("RC_DEBUG") === "true";
@@ -270,26 +419,6 @@ var init_shared_modules = __esm({
   }
 });
 
-// src/shared/constants.ts
-var RC_PROTECTED_REMOTE_FETCH_PATHNAME;
-var init_constants = __esm({
-  "src/shared/constants.ts"() {
-    "use strict";
-    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)}`;
-}
-var init_protected_rc_fallback = __esm({
-  "src/shared/client/protected-rc-fallback.ts"() {
-    "use strict";
-    init_constants();
-  }
-});
-
 // src/shared/client/webpack-patterns.ts
 var NEXT_BUNDLE_PATH_RE;
 var init_webpack_patterns = __esm({
@@ -300,7 +429,7 @@ var init_webpack_patterns = __esm({
 });
 
 // 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) => {
@@ -309,42 +438,29 @@ 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);
       });
     })
   );
@@ -360,92 +476,6 @@ var init_script_loader = __esm({
   }
 });
 
-// src/shared/utils/index.ts
-function escapeString(str) {
-  return str.replace(/[^a-z0-9]/g, "_");
-}
-var init_utils = __esm({
-  "src/shared/utils/index.ts"() {
-    "use strict";
-  }
-});
-
-// src/shared/client/const.ts
-function getBundleKey(bundle) {
-  return escapeString(bundle);
-}
-var RUNTIME_WEBPACK, RUNTIME_TURBOPACK, REMOTE_COMPONENT_REGEX;
-var init_const = __esm({
-  "src/shared/client/const.ts"() {
-    "use strict";
-    init_utils();
-    RUNTIME_WEBPACK = "webpack";
-    RUNTIME_TURBOPACK = "turbopack";
-    REMOTE_COMPONENT_REGEX = /(?<prefix>.*?)\[(?<bundle>[^\]]+)\](?:%20| )(?<id>.+)/;
-  }
-});
-
-// 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;
-}
-var init_abort = __esm({
-  "src/shared/utils/abort.ts"() {
-    "use strict";
-  }
-});
-
-// 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;
-  }
-}
-var init_fetch_with_protected_rc_fallback = __esm({
-  "src/shared/client/fetch-with-protected-rc-fallback.ts"() {
-    "use strict";
-    init_protected_rc_fallback();
-    init_abort();
-    init_logger();
-  }
-});
-
 // src/shared/client/turbopack-patterns.ts
 var REMOTE_SHARED_MARKER_RE, REMOTE_SHARED_ASSIGNMENT_RE, ASYNC_MODULE_LOADER_RE, ASYNC_MODULE_RESOLVE_RE, ASYNC_MODULE_ALL_RE, TURBOPACK_GLOBAL_RE;
 var init_turbopack_patterns = __esm({
@@ -461,7 +491,7 @@ var init_turbopack_patterns = __esm({
 });
 
 // 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;
@@ -501,9 +531,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);
@@ -516,7 +547,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];
   };
@@ -661,10 +704,11 @@ async function handleTurbopackChunk(code, bundle, url) {
 var init_chunk_loader = __esm({
   "src/shared/client/chunk-loader.ts"() {
     "use strict";
+    init_constants();
     init_error();
     init_logger();
     init_const();
-    init_fetch_with_protected_rc_fallback();
+    init_protected_rc_fallback();
     init_turbopack_patterns();
   }
 });
@@ -1035,7 +1079,7 @@ var init_shared_modules2 = __esm({
 });
 
 // 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__ = {};
@@ -1047,7 +1091,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) {
@@ -1141,27 +1185,21 @@ var init_webpack_adapter = __esm({
 });
 
 // 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(
@@ -1195,6 +1233,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) {
@@ -1207,24 +1259,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();
@@ -1237,7 +1272,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);
         }
@@ -1302,7 +1337,6 @@ var init_static_loader = __esm({
   "src/shared/client/static-loader.ts"() {
     "use strict";
     init_logger();
-    init_protected_rc_fallback();
   }
 });
 
@@ -1512,7 +1546,7 @@ var webpack_exports = {};
 __export(webpack_exports, {
   webpackRuntime: () => webpackRuntime
 });
-async function webpackRuntime(bundle, shared, remoteShared) {
+async function webpackRuntime(bundle, shared, remoteShared, resolveClientUrl) {
   const self = globalThis;
   if (!self.__DISABLE_WEBPACK_EXEC__) {
     self.__DISABLE_WEBPACK_EXEC__ = {};
@@ -1555,7 +1589,7 @@ async function webpackRuntime(bundle, shared, remoteShared) {
         }
       ];
     });
-    await loadScripts(scriptSrcs);
+    await loadScripts(scriptSrcs, resolveClientUrl);
     const hostShared = {
       ...sharedPolyfills(shared),
       ...self.__remote_component_host_shared_modules__,
@@ -1612,7 +1646,7 @@ var turbopack_exports = {};
 __export(turbopack_exports, {
   turbopackRuntime: () => turbopackRuntime
 });
-async function turbopackRuntime(url, bundle, shared, remoteShared) {
+async function turbopackRuntime(url, bundle, shared, remoteShared, resolveClientUrl) {
   const self = globalThis;
   const hostShared = {
     ...sharedPolyfills(shared),
@@ -1626,7 +1660,8 @@ async function turbopackRuntime(url, bundle, shared, remoteShared) {
     url,
     bundle,
     hostShared,
-    remoteShared
+    remoteShared,
+    resolveClientUrl
   );
   const {
     default: { createFromReadableStream }
@@ -1640,7 +1675,8 @@ async function turbopackRuntime(url, bundle, shared, remoteShared) {
       url,
       bundle,
       hostShared,
-      remoteShared
+      remoteShared,
+      resolveClientUrl
     );
   }
   return {
@@ -1666,7 +1702,7 @@ var script_exports = {};
 __export(script_exports, {
   scriptRuntime: () => scriptRuntime
 });
-function scriptRuntime() {
+function scriptRuntime(resolveClientUrl) {
   const self = globalThis;
   return {
     self,
@@ -1676,7 +1712,7 @@ function scriptRuntime() {
       Component: null,
       App: null
     }),
-    preloadScripts: loadStaticRemoteComponent
+    preloadScripts: (scripts, url) => loadStaticRemoteComponent(scripts, url, resolveClientUrl)
   };
 }
 var init_script = __esm({
@@ -1689,6 +1725,7 @@ var init_script = __esm({
 // src/html/host/index.tsx
 var host_exports = {};
 __export(host_exports, {
+  proxyClientRequestsThroughHost: () => proxyClientRequestsThroughHost,
   registerSharedModules: () => registerSharedModules
 });
 module.exports = __toCommonJS(host_exports);
@@ -1707,7 +1744,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(
@@ -1716,12 +1753,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")) {
@@ -1730,7 +1770,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);
@@ -1742,7 +1783,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);
@@ -1752,6 +1794,144 @@ function applyOriginToNodes(doc, url) {
   }
 }
 
+// src/shared/client/proxy-through-host.ts
+init_protected_rc_fallback();
+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/default-resolve-client-url.ts
+function bindResolveClientUrl(prop, remoteSrc) {
+  return prop ? withRemoteSrc(prop, remoteSrc) : void 0;
+}
+
+// src/shared/client/parse-remote-html.ts
+init_error();
+init_const();
+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/client/remote-component.ts
 init_error();
 
@@ -1842,11 +2022,37 @@ init_script_loader();
 init_static_loader();
 init_webpack_adapter();
 
+// 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/html/host/index.tsx
 init_error();
 
 // src/shared/ssr/fetch-with-hooks.ts
-init_fetch_with_protected_rc_fallback();
+init_logger();
 
 // src/shared/ssr/fetch-headers.ts
 function remoteFetchHeaders() {
@@ -1884,7 +2090,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) {
@@ -1893,6 +2104,15 @@ async function fetchWithHooks(url, additionalInit, options = {}) {
   return res;
 }
 
+// src/shared/ssr/get-client-or-server-url.ts
+function getClientOrServerUrl(src, serverFallback) {
+  const fallback = typeof location !== "undefined" ? location.href : serverFallback;
+  if (!src) {
+    return new URL(fallback);
+  }
+  return typeof src === "string" ? new URL(src, fallback) : src;
+}
+
 // src/html/host/index.tsx
 init_utils();
 init_abort();
@@ -1907,7 +2127,8 @@ async function attachStyles({
   signal,
   baseUrl,
   remoteComponentSrc,
-  root
+  root,
+  resolveClientUrl
 }) {
   const appendedLinks = [];
   let abortReject = null;
@@ -1942,9 +2163,13 @@ async function attachStyles({
         });
         for (const attr of link.attributes) {
           if (attr.name === "href") {
+            const absoluteHref = new URL(
+              attr.value,
+              baseUrl ?? location.origin
+            ).href;
             newLink.setAttribute(
               attr.name,
-              new URL(attr.value, baseUrl ?? location.origin).href
+              resolveClientUrl?.(absoluteHref) ?? absoluteHref
             );
           } else {
             newLink.setAttribute(attr.name, attr.value);
@@ -1978,7 +2203,7 @@ async function attachStyles({
 
 // src/html/host/runtime/index.ts
 init_error();
-async function getRuntime(type, url, bundle, shared, remoteShared) {
+async function getRuntime(type, url, bundle, shared, remoteShared, resolveClientUrl) {
   if (typeof globalThis.process === "undefined") {
     globalThis.process = {
       env: {}
@@ -1986,13 +2211,24 @@ async function getRuntime(type, url, bundle, shared, remoteShared) {
   }
   if (type === "webpack") {
     const { webpackRuntime: webpackRuntime2 } = await Promise.resolve().then(() => (init_webpack(), webpack_exports));
-    return webpackRuntime2(bundle ?? "default", shared, remoteShared);
+    return webpackRuntime2(
+      bundle ?? "default",
+      shared,
+      remoteShared,
+      resolveClientUrl
+    );
   } else if (type === "turbopack") {
     const { turbopackRuntime: turbopackRuntime2 } = await Promise.resolve().then(() => (init_turbopack(), turbopack_exports));
-    return turbopackRuntime2(url, bundle, shared, remoteShared);
+    return turbopackRuntime2(
+      url,
+      bundle,
+      shared,
+      remoteShared,
+      resolveClientUrl
+    );
   } else if (type === "script") {
     const { scriptRuntime: scriptRuntime2 } = await Promise.resolve().then(() => (init_script(), script_exports));
-    return scriptRuntime2();
+    return scriptRuntime2(resolveClientUrl);
   }
   throw new RemoteComponentsError(
     `Remote Components runtime "${type}" is not supported. Supported runtimes are "webpack", "turbopack", and "script".`
@@ -2008,41 +2244,76 @@ if (typeof HTMLElement !== "undefined") {
     fallbackSlot;
     __next = null;
     fouc = null;
-    isLoading = false;
-    prevIsRemoteComponent = false;
-    prevUrl;
-    prevSrc = null;
-    prevName;
+    hostState = createHostState();
     root = null;
     reactRoot;
     onRequest;
     onResponse;
-    /** Current AbortController for the loading operation - can be used to cancel loading via controller.abort() */
-    abortController;
+    resolveClientUrl;
+    // -- HostConfig property accessors (attribute-reflected) --
+    get src() {
+      return this.getAttribute("src") ?? void 0;
+    }
+    set src(value) {
+      if (value == null) {
+        this.removeAttribute("src");
+      } else {
+        this.setAttribute("src", String(value));
+      }
+    }
+    /** Always `true` — the HTML host always isolates via Shadow DOM. */
+    get isolate() {
+      return true;
+    }
+    get mode() {
+      const attr = this.getAttribute("mode");
+      return attr === "closed" ? "closed" : "open";
+    }
+    set mode(value) {
+      if (value) {
+        this.setAttribute("mode", value);
+      }
+    }
+    get reset() {
+      return this.getAttribute("reset") !== null;
+    }
+    set reset(value) {
+      if (value) {
+        this.setAttribute("reset", "");
+      } else {
+        this.removeAttribute("reset");
+      }
+    }
+    get credentials() {
+      return this.getAttribute("credentials") || "same-origin";
+    }
+    set credentials(value) {
+      if (value) {
+        this.setAttribute("credentials", value);
+      } else {
+        this.removeAttribute("credentials");
+      }
+    }
     static get observedAttributes() {
       return ["src", "name", "mode"];
     }
-    // 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
+    dispatchLifecycleEvent(type, detail) {
+      const event = new Event(type, { bubbles: true, composed: true });
+      if (detail) {
+        Object.assign(event, detail);
+      }
+      this.dispatchEvent(event);
+    }
     attributeChangedCallback(name, oldValue, newValue) {
       if ((name === "src" || name === "name") && oldValue !== newValue) {
-        if (this.getAttribute("src")) {
+        if (this.src) {
           this.load().catch((e) => {
             if (isAbortError(e)) {
               return;
             }
             logError("HtmlHost", "Error loading remote component.", e);
-            const errorEvent = new Event("error", {
-              bubbles: true,
-              composed: true
-            });
-            Object.assign(errorEvent, {
-              error: e,
-              src: this.getAttribute("src")
-            });
-            this.dispatchEvent(errorEvent);
-            this.isLoading = false;
+            this.dispatchLifecycleEvent("error", { error: e, src: this.src });
+            this.hostState.stage = "error";
           });
         }
       } else if (name === "mode" && oldValue !== newValue && this.root) {
@@ -2058,15 +2329,7 @@ if (typeof HTMLElement !== "undefined") {
             return;
           }
           logError("HtmlHost", "Error reloading remote component.", e);
-          const errorEvent = new Event("error", {
-            bubbles: true,
-            composed: true
-          });
-          Object.assign(errorEvent, {
-            error: e,
-            src: this.getAttribute("src")
-          });
-          this.dispatchEvent(errorEvent);
+          this.dispatchLifecycleEvent("error", { error: e, src: this.src });
         });
       }
     }
@@ -2076,9 +2339,9 @@ if (typeof HTMLElement !== "undefined") {
           resolve(void 0);
         });
       });
-      if (this.isLoading) {
-        this.abortController?.abort();
-        this.isLoading = false;
+      if (this.hostState.stage === "loading") {
+        this.hostState.abortController?.abort();
+        this.hostState.stage = "idle";
         if (this.root && !this.reactRoot) {
           this.root.innerHTML = "";
           this.fouc = null;
@@ -2088,29 +2351,24 @@ if (typeof HTMLElement !== "undefined") {
       }
       if (!this.root) {
         this.root = this.attachShadow({
-          mode: this.getAttribute("mode") === "closed" ? "closed" : "open"
+          mode: this.mode === "closed" ? "closed" : "open"
         });
         this.fallbackSlot = document.createElement("slot");
         this.root.appendChild(this.fallbackSlot);
       }
       this.name = this.getAttribute("name") || "__vercel_remote_component";
       this.bundle = "default";
-      this.isLoading = true;
-      const src = this.getAttribute("src");
-      this.abortController = new AbortController();
-      const signal = this.abortController.signal;
-      const isCurrentLoad = () => !signal.aborted && this.getAttribute("src") === src;
+      this.hostState.stage = "loading";
+      const src = this.src;
+      this.hostState.abortController = new AbortController();
+      const signal = this.hostState.abortController.signal;
+      const isCurrentLoad = () => !signal.aborted && this.src === src;
       const abandonLoad = () => {
-        if (this.abortController?.signal === signal && this.isLoading) {
-          this.isLoading = false;
+        if (this.hostState.abortController?.signal === signal && this.hostState.stage === "loading") {
+          this.hostState.stage = "idle";
         }
       };
-      const beforeLoadEvent = new Event("beforeload", {
-        bubbles: true,
-        composed: true
-      });
-      Object.assign(beforeLoadEvent, { src });
-      this.dispatchEvent(beforeLoadEvent);
+      this.dispatchLifecycleEvent("beforeload", { src });
       const remoteComponentChild = this.querySelector("div#__REMOTE_COMPONENT__") || this.querySelector("div[data-bundle][data-route]");
       if (!src && !remoteComponentChild) {
         throw new RemoteComponentsError('"src" attribute is required');
@@ -2118,21 +2376,27 @@ if (typeof HTMLElement !== "undefined") {
       let url = null;
       let html = this.innerHTML;
       if (src) {
-        url = new URL(src, window.location.href);
-        if (url.hash) {
-          this.name = url.hash.slice(1);
-        }
+        url = getClientOrServerUrl(src, window.location.href);
+        this.name = resolveNameFromSrc(
+          src,
+          this.name ?? "__vercel_remote_component"
+        );
       }
+      const resolveClientUrl = url ? bindResolveClientUrl(this.resolveClientUrl, url.href) : void 0;
       if (!remoteComponentChild && url) {
         const fetchInit = {
-          credentials: this.getAttribute("credentials") || "same-origin"
+          credentials: this.credentials || "same-origin"
         };
+        const resolvedUrl = new URL(
+          resolveClientUrl?.(url.href) ?? url.href,
+          window.location.href
+        );
         let res;
         try {
-          res = await fetchWithHooks(url, fetchInit, {
+          res = await fetchWithHooks(resolvedUrl, fetchInit, {
             onRequest: this.onRequest,
             onResponse: this.onResponse,
-            abortController: this.abortController
+            abortController: this.hostState.abortController
           });
         } catch (e) {
           if (isAbortError(e)) {
@@ -2141,34 +2405,7 @@ if (typeof HTMLElement !== "undefined") {
           throw e;
         }
         if (!res || !res.ok) {
-          let error = failedToFetchRemoteComponentError(
-            url.href,
-            res ?? new Response(null, { status: 0 })
-          );
-          try {
-            const body = res ? 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);
         }
         try {
           html = await res.text();
@@ -2184,29 +2421,27 @@ if (typeof HTMLElement !== "undefined") {
       }
       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^="${this.name}"]`
-      ) || doc.querySelectorAll("remote-component").length > 1 && !doc.querySelector(`remote-component[name="${this.name}"]`)) {
-        throw multipleRemoteComponentsError(
-          url?.href ?? (this.getAttribute("src") || "unknown")
-        );
-      }
-      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") ?? // fallback to a <remote-component> element
-      doc.querySelector(`remote-component[name="${this.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 parsed = parseRemoteComponentDocument(
+        doc,
+        this.name ?? "__vercel_remote_component",
+        url ?? new URL(window.location.href)
       );
-      const isRemoteComponent = component?.tagName.toLowerCase() === "remote-component";
+      const {
+        component,
+        name: resolvedName,
+        isRemoteComponent,
+        metadata: parsedMetadata,
+        nextData,
+        rsc,
+        remoteShared
+      } = parsed;
       if (nextData && nextData.buildId === "development" && !this.reactRoot) {
         this.fouc = document.createElement("style");
         this.fouc.textContent = `:host { display: none; }`;
         this.root.appendChild(this.fouc);
       }
-      this.name = component?.getAttribute("id")?.replace(/_ssr$/, "") || isRemoteComponent && component.getAttribute("name") || (nextData ? "__next" : this.name);
-      const rsc = doc.querySelector(`#${this.name}_rsc`);
-      this.bundle = component?.getAttribute("data-bundle") || nextData?.props.__REMOTE_COMPONENT__?.bundle || this.bundle;
+      this.name = resolvedName;
+      this.bundle = parsedMetadata.bundle;
       if (url) {
         const self2 = globalThis;
         if (!self2.__remote_bundle_url__) {
@@ -2214,38 +2449,28 @@ if (typeof HTMLElement !== "undefined") {
         }
         self2.__remote_bundle_url__[this.bundle ?? "default"] = url;
       }
-      const metadata = document.createElement("script");
-      metadata.type = "application/json";
-      metadata.setAttribute("data-remote-component", "");
+      const metadataEl = document.createElement("script");
+      metadataEl.type = "application/json";
+      metadataEl.setAttribute("data-remote-component", "");
       const metadataObj = {
         name: this.name,
         bundle: this.bundle,
-        route: component?.getAttribute("data-route") ?? nextData?.page ?? url?.pathname ?? "/",
-        runtime: component?.getAttribute("data-runtime") ?? nextData?.props.__REMOTE_COMPONENT__?.runtime ?? "script"
+        route: parsedMetadata.route,
+        runtime: parsedMetadata.runtime
       };
-      metadata.textContent = JSON.stringify(metadataObj);
+      metadataEl.textContent = JSON.stringify(metadataObj);
       if (this.previousElementSibling?.getAttribute("data-remote-component") !== null) {
         this.previousElementSibling?.remove();
       }
-      this.parentElement?.insertBefore(metadata, this);
-      const remoteSharedEl = doc.querySelector(
-        `#${this.name}_shared[data-remote-components-shared]`
-      );
-      const remoteShared = nextData?.props.__REMOTE_COMPONENT__?.shared ?? (JSON.parse(remoteSharedEl?.textContent ?? "{}") ?? {});
-      remoteSharedEl?.parentElement?.removeChild(remoteSharedEl);
+      this.parentElement?.insertBefore(metadataEl, this);
       if ("__remote_components_missing_shared__" in remoteShared) {
         throw new RemoteComponentsError(
           remoteShared.__remote_components_missing_shared__
         );
       }
-      if (!component || !(rsc || nextData || isRemoteComponent)) {
-        throw new RemoteComponentsError(
-          `Remote Component not found on ${src}.${this.name !== "__vercel_remote_component" ? ` The name for the <RemoteComponent> is "${this.name}". Check <RemoteComponent> usage.` : ""} Did you forget to wrap the content in <RemoteComponent>?`
-        );
-      }
-      if (this.prevIsRemoteComponent) {
-        if (this.prevUrl) {
-          const prevUrl = this.prevUrl;
+      if (this.hostState.prevIsRemoteComponent) {
+        if (this.hostState.prevUrl) {
+          const prevUrl = this.hostState.prevUrl;
           const self2 = globalThis;
           if (self2.__remote_script_entrypoint_unmount__?.[prevUrl.href]) {
             await Promise.all(
@@ -2270,26 +2495,21 @@ if (typeof HTMLElement !== "undefined") {
         }
         this.root.innerHTML = "";
       }
-      if (this.prevSrc !== null) {
-        const changeEvent = new Event("change", {
-          bubbles: true,
-          composed: true
-        });
-        Object.assign(changeEvent, {
-          previousSrc: this.prevSrc,
+      if (this.hostState.prevSrc !== void 0) {
+        this.dispatchLifecycleEvent("change", {
+          previousSrc: this.hostState.prevSrc,
           nextSrc: src,
-          previousName: this.prevName,
+          previousName: this.hostState.prevName,
           nextName: this.name
         });
-        this.dispatchEvent(changeEvent);
       }
-      this.prevUrl = url ?? new URL(location.href);
-      this.prevIsRemoteComponent = isRemoteComponent;
-      this.prevSrc = src;
-      this.prevName = this.name;
+      this.hostState.prevUrl = url ?? new URL(window.location.href);
+      this.hostState.prevIsRemoteComponent = isRemoteComponent;
+      this.hostState.prevSrc = src;
+      this.hostState.prevName = this.name;
       const removable = Array.from(this.childNodes);
       const links = doc.querySelectorAll("link[href]");
-      const remoteComponentSrc = this.getAttribute("src");
+      const remoteComponentSrc = this.src ? String(this.src) : null;
       const doAttachStyles = () => attachStyles({
         doc,
         component,
@@ -2298,7 +2518,8 @@ if (typeof HTMLElement !== "undefined") {
         // Effects run after load, no abort needed
         baseUrl: url?.href,
         remoteComponentSrc,
-        root: this.root ?? null
+        root: this.root ?? null,
+        resolveClientUrl
       });
       if (!this.reactRoot) {
         await attachStyles({
@@ -2308,22 +2529,31 @@ if (typeof HTMLElement !== "undefined") {
           signal,
           baseUrl: url?.href,
           remoteComponentSrc,
-          root: this.root
+          root: this.root,
+          resolveClientUrl
         });
         if (!isCurrentLoad()) {
           return abandonLoad();
         }
       }
-      applyOriginToNodes(doc, url ?? new URL(location.href));
+      applyOriginToNodes(
+        doc,
+        url ?? new URL(window.location.href),
+        resolveClientUrl
+      );
       if (!this.reactRoot) {
         Array.from(component.children).forEach((el) => {
           if (!isRemoteComponent && el.tagName.toLowerCase() === "script") {
             const newScript = document.createElement("script");
             for (const attr of el.attributes) {
               if (attr.name === "src") {
+                const absoluteSrc = new URL(
+                  attr.value,
+                  url ?? window.location.origin
+                ).href;
                 newScript.setAttribute(
                   attr.name,
-                  new URL(attr.value, url ?? location.origin).href
+                  resolveClientUrl?.(absoluteSrc) ?? absoluteSrc
                 );
               } else {
                 newScript.setAttribute(attr.name, attr.value);
@@ -2353,7 +2583,7 @@ if (typeof HTMLElement !== "undefined") {
       }
       this.fallbackSlot?.remove();
       const applyReset = () => {
-        if (this.getAttribute("reset") !== null && !this.root?.querySelector("link[data-remote-components-reset]")) {
+        if (this.reset && !this.root?.querySelector("link[data-remote-components-reset]")) {
           const allInitial = document.createElement("link");
           allInitial.setAttribute("data-remote-components-reset", "");
           const css = `:host { all: initial; }`;
@@ -2371,7 +2601,7 @@ if (typeof HTMLElement !== "undefined") {
             allInitial.removeAttribute("onload");
           };
           this.root?.prepend(allInitial);
-        } else if (this.getAttribute("reset") === null && this.root?.querySelector("link[data-remote-components-reset]")) {
+        } else if (!this.reset && this.root?.querySelector("link[data-remote-components-reset]")) {
           this.root.querySelector("link[data-remote-components-reset]")?.remove();
         }
       };
@@ -2385,7 +2615,7 @@ if (typeof HTMLElement !== "undefined") {
         preloadScripts
       } = await getRuntime(
         metadataObj.runtime,
-        url ?? new URL(location.href),
+        url ?? new URL(window.location.href),
         this.bundle,
         {
           react: async () => (await import("react")).default,
@@ -2394,7 +2624,8 @@ if (typeof HTMLElement !== "undefined") {
           "react-dom": async () => (await import("react-dom")).default,
           "react-dom/client": async () => (await import("react-dom/client")).default
         },
-        remoteShared
+        remoteShared,
+        resolveClientUrl
       );
       if (!isCurrentLoad()) {
         return abandonLoad();
@@ -2478,14 +2709,9 @@ if (typeof HTMLElement !== "undefined") {
               });
             }
             if (isCurrentLoad()) {
-              this.isLoading = false;
+              this.hostState.stage = "loaded";
             }
-            const loadEvent = new Event("load", {
-              bubbles: true,
-              composed: true
-            });
-            Object.assign(loadEvent, { src: this.getAttribute("src") });
-            this.dispatchEvent(loadEvent);
+            this.dispatchLifecycleEvent("load", { src: this.src });
           }, [initial, name]);
           return Component;
         };
@@ -2519,7 +2745,7 @@ if (typeof HTMLElement !== "undefined") {
       } else if (nextData) {
         const { Component, App } = nextClientPagesLoader2(
           this.bundle ?? "default",
-          nextData.page,
+          nextData.page ?? "/",
           this.root
         );
         if (Component) {
@@ -2533,16 +2759,11 @@ if (typeof HTMLElement !== "undefined") {
                 });
               }
               if (isCurrentLoad()) {
-                remoteComponent.isLoading = false;
+                remoteComponent.hostState.stage = "loaded";
               }
-              const loadEvent = new Event("load", {
-                bubbles: true,
-                composed: true
-              });
-              Object.assign(loadEvent, {
-                src: remoteComponent.getAttribute("src")
+              remoteComponent.dispatchLifecycleEvent("load", {
+                src: remoteComponent.src
               });
-              remoteComponent.dispatchEvent(loadEvent);
             }, [initial, remoteComponent]);
             return NextApp ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NextApp, { Component: NextComponent, ...nextData.props }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(NextComponent, { ...nextData.props });
           })(App, Component, this);
@@ -2552,7 +2773,7 @@ if (typeof HTMLElement !== "undefined") {
               root.render(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RemoteComponentFromNext, { initial: false }));
               doCleanup();
               if (isCurrentLoad()) {
-                this.isLoading = false;
+                this.hostState.stage = "loaded";
               }
             });
             return;
@@ -2583,22 +2804,12 @@ if (typeof HTMLElement !== "undefined") {
             }
           })
         );
-        const loadEvent = new Event("load", {
-          bubbles: true,
-          composed: true
-        });
-        Object.assign(loadEvent, { src: this.getAttribute("src") });
-        this.dispatchEvent(loadEvent);
+        this.dispatchLifecycleEvent("load", { src: this.src });
       } else {
-        const loadEvent = new Event("load", {
-          bubbles: true,
-          composed: true
-        });
-        Object.assign(loadEvent, { src: this.getAttribute("src") });
-        this.dispatchEvent(loadEvent);
+        this.dispatchLifecycleEvent("load", { src: this.src });
       }
       if (isCurrentLoad()) {
-        this.isLoading = false;
+        this.hostState.stage = "loaded";
       }
     }
   }
@@ -2617,6 +2828,7 @@ function registerSharedModules(modules = {}) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  proxyClientRequestsThroughHost,
   registerSharedModules
 });
 //# sourceMappingURL=host.cjs.map