remote-components 0.0.46 → 0.0.48

package/dist/react/index.cjs

@@ -121,6 +121,9 @@ 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}`);
 }
@@ -132,18 +135,6 @@ function logError(location2, message, cause) {
   );
 }
 
-// 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/polyfill.tsx
 var import_jsx_runtime = (
   // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
@@ -615,6 +606,62 @@ async function loadScripts(scripts) {
   );
 }
 
+// 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/ssr/fetch-with-protected-rc-fallback.ts
+var RC_PROTECTED_REMOTE_FETCH_PATHNAME = "/rc-fetch-protected-remote";
+async function fetchWithProtectedRcFallback(url, init) {
+  try {
+    const res = await fetch(url, init);
+    return res;
+  } catch (error) {
+    if (isAbortError(error)) {
+      throw error;
+    }
+    if (typeof document === "object" && typeof document.location === "object" && document.location.origin !== new URL(url).origin) {
+      logInfo(
+        "FetchRemoteComponent",
+        "Request failed due to CORS, attempting to fetch it via the withRemoteComponentsHost proxy."
+      );
+      const proxiedRes = await fetch(
+        `${RC_PROTECTED_REMOTE_FETCH_PATHNAME}?url=${url}`,
+        init?.signal ? { signal: init.signal } : void 0
+      );
+      if (proxiedRes.status === 200) {
+        return proxiedRes;
+      } else {
+        logError(
+          "FetchRemoteComponent",
+          `Could not proxy remote: [response status ${proxiedRes.status}] ${await proxiedRes.text()}`
+        );
+      }
+    }
+    throw error;
+  }
+}
+
+// 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";
@@ -668,7 +715,7 @@ function createChunkLoader(runtime) {
     }
     logDebug("ChunkLoader", `Fetching chunk from: "${url}"`);
     self.__remote_components_turbopack_chunk_loader_promise__[url] = new Promise((resolve, reject) => {
-      fetch(url).then((res) => res.text()).then((code) => {
+      fetchWithProtectedRcFallback(url).then((res) => res.text()).then((code) => {
         const hasTurbopack = code.includes("globalThis.TURBOPACK") || code.includes("self.TURBOPACK");
         if (hasTurbopack) {
           return handleTurbopackChunk(code, bundle ?? "", url);
@@ -1566,13 +1613,28 @@ function remoteFetchHeaders() {
 }
 
 // src/shared/ssr/fetch-with-hooks.ts
-async function fetchWithHooks(url, init, options = {}) {
-  const { onRequest, onResponse } = options;
-  let res = await onRequest?.(url, init);
+async function fetchWithHooks(url, additionalInit, options = {}) {
+  const {
+    onRequest,
+    onResponse,
+    abortController = new AbortController()
+  } = options;
+  const signal = abortController.signal;
+  const hookOptions = {
+    signal,
+    abort: (reason) => abortController.abort(reason)
+  };
+  const init = {
+    method: "GET",
+    headers: remoteFetchHeaders(),
+    signal,
+    ...additionalInit
+  };
+  let res = await onRequest?.(url, init, hookOptions);
   if (!res) {
-    res = await fetch(url, init);
+    res = await fetchWithProtectedRcFallback(url, init);
   }
-  const transformedRes = await onResponse?.(url, res);
+  const transformedRes = await onResponse?.(url, res, hookOptions);
   if (transformedRes) {
     res = transformedRes;
   }
@@ -1782,18 +1844,18 @@ function RemoteComponent({
           );
           if (!html && src) {
             const fetchInit = {
-              method: "GET",
-              headers: remoteFetchHeaders(),
               credentials
             };
+            const abortController = new AbortController();
             const res = await fetchWithHooks(url, fetchInit, {
               onRequest,
-              onResponse
+              onResponse,
+              abortController
             });
-            if (!res.ok) {
+            if (!res || !res.ok) {
               let error = failedToFetchRemoteComponentError(
                 url.href,
-                res
+                res ?? new Response(null, { status: 0 })
               );
               try {
                 const body = await res.text();
@@ -1814,7 +1876,9 @@ function RemoteComponent({
                     error.stack = errorStack;
                   }
                 }
-              } catch {
+              } catch (parseError) {
+                if (isAbortError(parseError))
+                  throw parseError;
               }
               throw error;
             }
@@ -2085,6 +2149,9 @@ function RemoteComponent({
             }
           }
         } catch (error) {
+          if (isAbortError(error)) {
+            return;
+          }
           setRemoteComponent(error);
           onError?.(error);
         }