remote-components 0.0.45 → 0.0.47

package/dist/next/host/client/index.js

@@ -72,6 +72,48 @@ function applyOriginToNodes(doc, url) {
   }
 }
 
+// src/shared/error.ts
+var RemoteComponentsError = class extends Error {
+  code = "REMOTE_COMPONENTS_ERROR";
+  constructor(message, options) {
+    super(message, options);
+    this.name = "RemoteComponentsError";
+  }
+};
+function multipleRemoteComponentsError(url) {
+  return new RemoteComponentsError(
+    `Multiple Remote Components found at "${url}". When a page exposes multiple Remote Components you must specify the "name" prop to select which one to load.`
+  );
+}
+function failedToFetchRemoteComponentError(url, { status, statusText }, help = "Is the URL correct and accessible?") {
+  return new RemoteComponentsError(
+    `Failed to fetch Remote Component from "${url}". ${help}`,
+    { cause: new Error(`${status} ${statusText}`) }
+  );
+}
+
+// src/shared/utils/logger.ts
+var PREFIX = "remote-components";
+var DEBUG = typeof window !== "undefined" && localStorage.getItem("RC_DEBUG") === "true";
+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}`);
+}
+function logError(location2, message, cause) {
+  console.error(
+    new RemoteComponentsError(`[${PREFIX}:${location2}]: ${message}`, {
+      cause
+    })
+  );
+}
+
 // src/shared/client/polyfill.tsx
 import { jsx } from "react/jsx-runtime";
 function applyBundleUrlToSrc(bundle, src) {
@@ -167,7 +209,8 @@ function sharedPolyfills(shared) {
         ...props
       }) => {
         if (prefetch) {
-          console.warn(
+          logWarn(
+            "Polyfill",
             "Next.js Link prefetch is not supported in remote components"
           );
         }
@@ -267,26 +310,6 @@ function sharedPolyfills(shared) {
   return polyfill;
 }
 
-// src/shared/error.ts
-var RemoteComponentsError = class extends Error {
-  code = "REMOTE_COMPONENTS_ERROR";
-  constructor(message, options) {
-    super(message, options);
-    this.name = "RemoteComponentsError";
-  }
-};
-function multipleRemoteComponentsError(url) {
-  return new RemoteComponentsError(
-    `Multiple Remote Components found at "${url}". When a page exposes multiple Remote Components you must specify the "name" prop to select which one to load.`
-  );
-}
-function failedToFetchRemoteComponentError(url, { status, statusText }, help = "Is the URL correct and accessible?") {
-  return new RemoteComponentsError(
-    `Failed to fetch Remote Component from "${url}". ${help}`,
-    { cause: new Error(`${status} ${statusText}`) }
-  );
-}
-
 // src/shared/client/component-loader.ts
 import * as React from "react";
 import * as JSXDevRuntime from "react/jsx-dev-runtime";
@@ -294,18 +317,6 @@ import * as JSXRuntime from "react/jsx-runtime";
 import * as ReactDOM from "react-dom";
 import * as ReactDOMClient from "react-dom/client";
 
-// src/shared/utils/logger.ts
-var PREFIX = "remote-components";
-var DEBUG = typeof window !== "undefined" && localStorage.getItem("RC_DEBUG") === "true";
-function logDebug(location2, message) {
-  if (DEBUG) {
-    console.debug(`[${PREFIX}:${location2}]: ${message}`);
-  }
-}
-function logWarn(location2, message) {
-  console.warn(`[${PREFIX}:${location2}]: ${message}`);
-}
-
 // src/shared/webpack/next-client-pages-loader.ts
 function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
   const self = globalThis;
@@ -574,6 +585,34 @@ async function loadScripts(scripts) {
   );
 }
 
+// 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 (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}`
+      );
+      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, "_");
@@ -639,10 +678,19 @@ 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) => {
-        if (code.includes("globalThis.TURBOPACK")) {
+      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);
         }
+        logDebug(
+          "ChunkLoader",
+          `Chunk does not contain globalThis.TURBOPACK or self.TURBOPACK: "${url}"`
+        );
+        logDebug(
+          "ChunkLoader",
+          `First 500 chars of chunk: ${code.slice(0, 500)}`
+        );
       }).then(resolve).catch(reject);
     });
     return self.__remote_components_turbopack_chunk_loader_promise__[url];
@@ -664,7 +712,7 @@ async function handleTurbopackChunk(code, bundle, url) {
   const self = globalThis;
   const bundleKey = getBundleKey(bundle);
   logDebug("ChunkLoader", `Bundle key: "${bundleKey}"`);
-  const transformedCode = code.replace(/globalThis\.TURBOPACK/g, `globalThis.TURBOPACK_${bundleKey}`).replace(
+  const transformedCode = code.replace(/globalThis\.TURBOPACK/g, `globalThis.TURBOPACK_${bundleKey}`).replace(/self\.TURBOPACK(?!_)/g, `self.TURBOPACK_${bundleKey}`).replace(
     /TURBOPACK_WORKER_LOCATION/g,
     `TURBOPACK_WORKER_LOCATION_${bundleKey}`
   ).replace(
@@ -683,6 +731,30 @@ async function handleTurbopackChunk(code, bundle, url) {
       )
     ).href}$1$2.js.map`
   );
+  if (!self[`TURBOPACK_${bundleKey}`]) {
+    const chunkData = [];
+    const turbopackObject = {
+      push: (item) => {
+        logDebug(
+          "ChunkLoader",
+          `TURBOPACK_${bundleKey}.push() called with item type: ${Array.isArray(item) ? "array" : typeof item}`
+        );
+        if (Array.isArray(item)) {
+          chunkData.push(item);
+          logDebug(
+            "ChunkLoader",
+            `TURBOPACK_${bundleKey} now has ${chunkData.length} chunks`
+          );
+        } else {
+          chunkData.push([item]);
+        }
+        return chunkData.length;
+      },
+      // Store chunks for later access
+      __chunks__: chunkData
+    };
+    self[`TURBOPACK_${bundleKey}`] = turbopackObject;
+  }
   logDebug("ChunkLoader", `Creating blob script for: "${url}"`);
   await new Promise((scriptResolve, scriptReject) => {
     const blob = new Blob([transformedCode], {
@@ -695,6 +767,21 @@ async function handleTurbopackChunk(code, bundle, url) {
     script.async = true;
     script.onload = () => {
       URL.revokeObjectURL(scriptUrl);
+      logDebug(
+        "ChunkLoader",
+        `Script loaded successfully for bundle "${bundle}"`
+      );
+      const turbopackBundle = self[`TURBOPACK_${bundleKey}`];
+      logDebug(
+        "ChunkLoader",
+        `TURBOPACK_${bundleKey} type: ${typeof turbopackBundle}, isArray: ${Array.isArray(turbopackBundle)}, keys: ${turbopackBundle ? Object.keys(turbopackBundle).slice(0, 10).join(", ") : "none"}`
+      );
+      if (turbopackBundle && typeof turbopackBundle === "object") {
+        logDebug(
+          "ChunkLoader",
+          `TURBOPACK_${bundleKey} length/size: ${Array.isArray(turbopackBundle) ? turbopackBundle.length : Object.keys(turbopackBundle).length}`
+        );
+      }
       scriptResolve(void 0);
       script.remove();
     };
@@ -741,14 +828,23 @@ async function handleTurbopackChunk(code, bundle, url) {
   }
 }
 
+// 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]+)\)/;
+var ASYNC_MODULE_LOADER_RE = /(?:__turbopack_context__|e)\.A\((?<asyncSharedModuleId>[0-9]+)\)/;
+var ASYNC_MODULE_RESOLVE_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<inner>parentImport|e)=>Promise\.resolve\(\)\.then\(\(\)=>\k<inner>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
+var ASYNC_MODULE_ALL_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<vCb>parentImport|t)=>Promise\.all\(\["[^"]+"\]\.map\((?<mapCb>chunk|t)=>\k<ctx>\.l\(\k<mapCb>\)\)\)\.then\(\(\)=>\k<vCb>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
+var NUMERIC_MODULE_ID_RE = /^[0-9]+$/;
+
 // src/shared/client/turbopack-module.ts
 function handleTurbopackModule(bundle, moduleId, id) {
   const self = globalThis;
   const bundleKey = getBundleKey(bundle);
-  const modules = self[`TURBOPACK_${bundleKey}`];
-  const moduleInit = findModuleInit(modules, moduleId);
-  const exports = {};
-  const moduleExports = { exports };
+  let modules = self[`TURBOPACK_${bundleKey}`];
+  if (modules && typeof modules === "object" && "__chunks__" in modules) {
+    const chunks = modules.__chunks__;
+    modules = chunks.flat();
+  }
   if (!self.__remote_components_turbopack_modules__) {
     self.__remote_components_turbopack_modules__ = {};
   }
@@ -758,6 +854,12 @@ function handleTurbopackModule(bundle, moduleId, id) {
   if (self.__remote_components_turbopack_modules__[bundle][moduleId]) {
     return self.__remote_components_turbopack_modules__[bundle][moduleId];
   }
+  if (!modules) {
+    logError("TurbopackModule", `TURBOPACK_${bundleKey} is undefined`);
+  }
+  const moduleInit = findModuleInit(modules, moduleId);
+  const exports = {};
+  const moduleExports = { exports };
   if (typeof moduleInit !== "function") {
     throw new Error(
       `Module ${id} not found in bundle ${bundle} with id ${moduleId}`
@@ -770,7 +872,7 @@ function handleTurbopackModule(bundle, moduleId, id) {
   if (!self.__remote_components_turbopack_global__[bundle]) {
     self.__remote_components_turbopack_global__[bundle] = {};
   }
-  const allModules = modules?.flat() ?? [];
+  const allModules = Array.isArray(modules) ? modules.flat() : modules ? Object.values(modules) : [];
   moduleInit(
     createTurbopackContext(
       bundle,
@@ -790,9 +892,26 @@ function handleTurbopackModule(bundle, moduleId, id) {
   return moduleExports.exports;
 }
 function findModuleInit(modules, moduleId) {
+  if (modules && !Array.isArray(modules) && typeof modules === "object") {
+    const normalizedId = NUMERIC_MODULE_ID_RE.test(moduleId) ? Number(moduleId) : moduleId;
+    if (normalizedId in modules) {
+      return modules[normalizedId];
+    }
+    if (typeof normalizedId === "number" && String(normalizedId) in modules) {
+      return modules[String(normalizedId)];
+    }
+    const matchingKey = Object.keys(modules).find(
+      (key) => typeof key === "string" && key.includes(String(moduleId))
+    );
+    if (matchingKey) {
+      return modules[matchingKey];
+    }
+    logError("TurbopackModule", `No match found for module ID: ${moduleId}`);
+    return void 0;
+  }
   const allModules = modules?.flat() ?? [];
   if (typeof allModules[1] === "string" || typeof allModules[1] === "number") {
-    const normalizedId = /^[0-9]+$/.test(moduleId) ? Number(moduleId) : moduleId;
+    const normalizedId = NUMERIC_MODULE_ID_RE.test(moduleId) ? Number(moduleId) : moduleId;
     let moduleIdIndex = allModules.indexOf(normalizedId);
     if (moduleIdIndex === -1) {
       moduleIdIndex = allModules.findIndex(
@@ -958,13 +1077,6 @@ function createTurbopackContext(bundle, exports, moduleExports, allModules, modu
   };
 }
 
-// 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]+)\)/;
-var ASYNC_MODULE_LOADER_RE = /(?:__turbopack_context__|e)\.A\((?<asyncSharedModuleId>[0-9]+)\)/;
-var ASYNC_MODULE_RESOLVE_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<inner>parentImport|e)=>Promise\.resolve\(\)\.then\(\(\)=>\k<inner>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
-var ASYNC_MODULE_ALL_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<vCb>parentImport|t)=>Promise\.all\(\["[^"]+"\]\.map\((?<mapCb>chunk|t)=>\k<ctx>\.l\(\k<mapCb>\)\)\)\.then\(\(\)=>\k<vCb>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
-
 // src/shared/client/shared-modules.ts
 async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {}) {
   const self = globalThis;
@@ -973,10 +1085,14 @@ async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {
     self.__remote_shared_modules__[bundle] = {};
   }
   const bundleKey = getBundleKey(bundle);
-  const modules = self[`TURBOPACK_${bundleKey}`];
+  let modules = self[`TURBOPACK_${bundleKey}`];
+  if (modules && typeof modules === "object" && "__chunks__" in modules) {
+    const chunks = modules.__chunks__;
+    modules = chunks.flat();
+  }
   let sharedModuleInitializer = null;
-  if (modules && Array.isArray(modules)) {
-    const allModules = modules.flat();
+  if (modules) {
+    const allModules = Array.isArray(modules) ? modules.flat() : Object.entries(modules).flat();
     const sharedModuleInitializerIndex = allModules.findIndex((idOrFunc) => {
       if (typeof idOrFunc !== "function") {
         return false;
@@ -1009,6 +1125,11 @@ async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {
           if (self.__remote_shared_modules__?.[bundle]) {
             if (hostShared[module]) {
               self.__remote_shared_modules__[bundle][id] = await hostShared[module](bundle);
+            } else {
+              logError(
+                "SharedModules",
+                `Host shared module "${module}" not found for ID ${id}`
+              );
             }
           }
         })
@@ -1019,9 +1140,13 @@ async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {
     Object.entries(remoteShared).map(async ([id, module]) => {
       if (self.__remote_shared_modules__?.[bundle]) {
         if (hostShared[module]) {
-          self.__remote_shared_modules__[bundle][id.replace("[app-ssr]", "[app-client]")] = await hostShared[module](bundle);
+          const normalizedId = id.replace("[app-ssr]", "[app-client]");
+          self.__remote_shared_modules__[bundle][normalizedId] = await hostShared[module](bundle);
         } else {
-          console.error(`Shared module "${module}" not found for "${bundle}".`);
+          logError(
+            "SharedModules",
+            `Shared module "${module}" not found for "${bundle}"`
+          );
         }
       }
     })
@@ -1033,7 +1158,15 @@ function extractSharedModuleIds(shared, bundleKey, self) {
     if (asyncSharedModuleId) {
       const asyncSharedModuleIdNumber = Number(asyncSharedModuleId);
       let asyncSharedModule;
-      const newAllModules = self[`TURBOPACK_${bundleKey}`]?.flat() ?? [];
+      let turbopackModules = self[`TURBOPACK_${bundleKey}`];
+      if (turbopackModules && typeof turbopackModules === "object" && "__chunks__" in turbopackModules) {
+        const chunks = turbopackModules.__chunks__;
+        turbopackModules = chunks.flat();
+      }
+      const newAllModules = Array.isArray(turbopackModules) ? turbopackModules.flat() : turbopackModules ? Object.entries(turbopackModules).flatMap(([key2, value2]) => [
+        key2,
+        value2
+      ]) : [];
       const asyncSharedModuleIdIndex = newAllModules.indexOf(
         asyncSharedModuleIdNumber
       );
@@ -1397,11 +1530,10 @@ async function loadStaticRemoteComponent(scripts, url) {
           unmount: mod.unmount || mod.default?.unmount
         };
       } catch (e) {
-        console.error(
-          new RemoteComponentsError(
-            `Error loading remote component script from "${script.src || url.href}".`,
-            { cause: e }
-          )
+        logError(
+          "StaticLoader",
+          `Error loading remote component script from "${script.src || url.href}".`,
+          e
         );
         return {
           mount: void 0,
@@ -1444,11 +1576,16 @@ function remoteFetchHeaders() {
 }
 
 // src/shared/ssr/fetch-with-hooks.ts
-async function fetchWithHooks(url, init, options = {}) {
+async function fetchWithHooks(url, additionalInit, options = {}) {
   const { onRequest, onResponse } = options;
+  const init = {
+    method: "GET",
+    headers: remoteFetchHeaders(),
+    ...additionalInit
+  };
   let res = await onRequest?.(url, init);
   if (!res) {
-    res = await fetch(url, init);
+    res = await fetchWithProtectedRcFallback(url, init);
   }
   const transformedRes = await onResponse?.(url, res);
   if (transformedRes) {
@@ -1657,8 +1794,6 @@ function RemoteComponent({
           );
           if (!html && src) {
             const fetchInit = {
-              method: "GET",
-              headers: remoteFetchHeaders(),
               credentials
             };
             const res = await fetchWithHooks(url, fetchInit, {
@@ -2133,7 +2268,8 @@ var routerImpl = async () => {
         },
         refresh: () => Promise.resolve(router.refresh()),
         prefetch: async () => {
-          console.warn(
+          logWarn(
+            "NextAppRouterCompat",
             "You are using router.prefetch() in a remote component loaded in the Next.js App Router. prefetch() is a no-op in the App Router."
           );
           return Promise.resolve();
@@ -2150,17 +2286,20 @@ var routerImpl = async () => {
         },
         events: {
           on: () => {
-            console.warn(
+            logWarn(
+              "NextAppRouterCompat",
               "You are using router.events.on() in a remote component loaded in the Next.js App Router. events.on() is a no-op in the App Router."
             );
           },
           off: () => {
-            console.warn(
+            logWarn(
+              "NextAppRouterCompat",
               "You are using router.events.off() in a remote component loaded in the Next.js App Router. events.off() is a no-op in the App Router."
             );
           },
           emit: () => {
-            console.warn(
+            logWarn(
+              "NextAppRouterCompat",
               "You are using router.events.emit() in a remote component loaded in the Next.js App Router. events.emit() is a no-op in the App Router."
             );
           }