remote-components 0.0.45 → 0.0.47

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

@@ -71,9 +71,19 @@ 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}`);
 }
+function logError(location2, message, cause) {
+  console.error(
+    new RemoteComponentsError(`[${PREFIX}:${location2}]: ${message}`, {
+      cause
+    })
+  );
+}
 
 // src/shared/webpack/next-client-pages-loader.ts
 function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
@@ -343,6 +353,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, "_");
@@ -401,10 +439,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];
@@ -426,7 +473,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(
@@ -445,6 +492,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], {
@@ -457,6 +528,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();
     };
@@ -503,14 +589,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__ = {};
   }
@@ -520,6 +615,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}`
@@ -532,7 +633,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,
@@ -552,9 +653,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(
@@ -720,13 +838,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;
@@ -735,10 +846,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;
@@ -771,6 +886,11 @@ async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {
           if (self.__remote_shared_modules__?.[bundle]) {
             if (hostShared[module2]) {
               self.__remote_shared_modules__[bundle][id] = await hostShared[module2](bundle);
+            } else {
+              logError(
+                "SharedModules",
+                `Host shared module "${module2}" not found for ID ${id}`
+              );
             }
           }
         })
@@ -781,9 +901,13 @@ async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {
     Object.entries(remoteShared).map(async ([id, module2]) => {
       if (self.__remote_shared_modules__?.[bundle]) {
         if (hostShared[module2]) {
-          self.__remote_shared_modules__[bundle][id.replace("[app-ssr]", "[app-client]")] = await hostShared[module2](bundle);
+          const normalizedId = id.replace("[app-ssr]", "[app-client]");
+          self.__remote_shared_modules__[bundle][normalizedId] = await hostShared[module2](bundle);
         } else {
-          console.error(`Shared module "${module2}" not found for "${bundle}".`);
+          logError(
+            "SharedModules",
+            `Shared module "${module2}" not found for "${bundle}"`
+          );
         }
       }
     })
@@ -795,7 +919,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
       );
@@ -1159,11 +1291,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,