remote-components 0.0.51 → 0.1.2

package/dist/internal/shared/client/remote-component.d.ts

@@ -1,5 +1,7 @@
-import { M as MountOrUnmountFunction } from '../../../component-loader-1838f572.js';
-export { G as GlobalScope, L as LoadRemoteComponentProps, b as LoaderResult, R as RemoteComponentProps, l as loadRemoteComponent } from '../../../component-loader-1838f572.js';
+import { M as MountOrUnmountFunction } from '../../../component-loader-21865da3.js';
+export { G as GlobalScope, L as LoadRemoteComponentProps, d as LoaderResult, R as RemoteComponentPayload, e as ResolvedRemoteComponentData, l as loadRemoteComponent } from '../../../component-loader-21865da3.js';
+import { I as InternalResolveClientUrl } from '../../../proxy-through-host-a676a522.js';
+export { p as proxyClientRequestsThroughHost } from '../../../proxy-through-host-a676a522.js';
 import { ReadableStream } from 'web-streams-polyfill';
 import 'react';
 
@@ -32,11 +34,11 @@ declare function createRSCStream(rscName: string, data: string[]): ReadableStrea
  */
 declare function loadScripts(scripts: {
     src: string;
-}[]): Promise<void>;
+}[], resolveClientUrl?: InternalResolveClientUrl): Promise<void>;
 
 declare function setAttributesFromProps(el: HTMLElement, props: object): void;
 
-declare function loadStaticRemoteComponent(scripts: HTMLScriptElement[], url: URL): Promise<{
+declare function loadStaticRemoteComponent(scripts: HTMLScriptElement[], url: URL, resolveClientUrl?: InternalResolveClientUrl): Promise<{
     mount: Set<MountOrUnmountFunction>;
     unmount: Set<MountOrUnmountFunction>;
 }>;
@@ -55,6 +57,6 @@ declare function loadStaticRemoteComponent(scripts: HTMLScriptElement[], url: UR
  */
 declare function setupWebpackRuntime(runtime: Runtime, scripts?: {
     src: string | null;
-}[], url?: URL, bundle?: string, shared?: Record<string, () => Promise<unknown>>, remoteShared?: Record<string, string>): Promise<void>;
+}[], url?: URL, bundle?: string, shared?: Record<string, () => Promise<unknown>>, remoteShared?: Record<string, string>, resolveClientUrl?: InternalResolveClientUrl): Promise<void>;
 
 export { DEFAULT_ROUTE, REMOTE_COMPONENT_REGEX, RUNTIME_SCRIPT, RUNTIME_TURBOPACK, RUNTIME_WEBPACK, RemoteComponentsError, Runtime, createRSCStream, fixPayload, getBundleKey, loadScripts, loadStaticRemoteComponent, setAttributesFromProps, setupWebpackRuntime };

package/dist/internal/shared/client/remote-component.js

@@ -1,3 +1,19 @@
+// 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/error.ts
 var RemoteComponentsError = class extends Error {
   code = "REMOTE_COMPONENTS_ERROR";
@@ -22,9 +38,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}`);
 }
@@ -35,6 +48,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/webpack/next-client-pages-loader.ts
 function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
@@ -275,19 +301,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) => {
@@ -296,42 +314,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);
       });
     })
   );
@@ -352,54 +357,6 @@ 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]+)\)/;
@@ -409,7 +366,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;
@@ -449,9 +406,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);
@@ -464,7 +422,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];
   };
@@ -957,7 +927,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__ = {};
@@ -969,7 +939,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) {
@@ -1064,7 +1034,8 @@ async function loadRemoteComponent({
   scripts = [],
   shared = Promise.resolve({}),
   remoteShared = {},
-  container
+  container,
+  resolveClientUrl
 }) {
   try {
     if (runtime === "webpack") {
@@ -1073,7 +1044,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(
@@ -1094,7 +1065,8 @@ async function loadRemoteComponent({
       url,
       bundle,
       hostShared,
-      remoteShared
+      remoteShared,
+      resolveClientUrl
     );
     if (bundle) {
       const resolve = {
@@ -1183,6 +1155,25 @@ function loadNextPagesComponent(bundle, route, nextData, name, container) {
   return { component };
 }
 
+// src/shared/client/proxy-through-host.ts
+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",
@@ -1226,27 +1217,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(
@@ -1280,6 +1265,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) {
@@ -1292,24 +1291,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();
@@ -1322,7 +1304,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);
         }
@@ -1396,6 +1378,7 @@ export {
   loadRemoteComponent,
   loadScripts,
   loadStaticRemoteComponent,
+  proxyClientRequestsThroughHost,
   setAttributesFromProps,
   setupWebpackRuntime
 };