remote-components 0.0.45 → 0.0.47

package/dist/html/host.cjs

@@ -62,13 +62,24 @@ 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
+    })
+  );
+}
 var PREFIX, DEBUG;
 var init_logger = __esm({
   "src/shared/utils/logger.ts"() {
     "use strict";
+    init_error();
     PREFIX = "remote-components";
     DEBUG = typeof window !== "undefined" && localStorage.getItem("RC_DEBUG") === "true";
   }
@@ -259,6 +270,41 @@ var init_shared_modules = __esm({
   }
 });
 
+// src/shared/ssr/fetch-with-protected-rc-fallback.ts
+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;
+  }
+}
+var RC_PROTECTED_REMOTE_FETCH_PATHNAME;
+var init_fetch_with_protected_rc_fallback = __esm({
+  "src/shared/ssr/fetch-with-protected-rc-fallback.ts"() {
+    "use strict";
+    init_logger();
+    RC_PROTECTED_REMOTE_FETCH_PATHNAME = "/rc-fetch-protected-remote";
+  }
+});
+
 // src/shared/utils/index.ts
 function escapeString(str) {
   return str.replace(/[^a-z0-9]/g, "_");
@@ -327,10 +373,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];
@@ -352,7 +407,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(
@@ -371,6 +426,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], {
@@ -383,6 +462,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();
     };
@@ -432,19 +526,35 @@ var init_chunk_loader = __esm({
   "src/shared/client/chunk-loader.ts"() {
     "use strict";
     init_error();
+    init_fetch_with_protected_rc_fallback();
     init_logger();
     init_const();
   }
 });
 
+// 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, NUMERIC_MODULE_ID_RE;
+var init_turbopack_patterns = __esm({
+  "src/shared/client/turbopack-patterns.ts"() {
+    "use strict";
+    REMOTE_SHARED_MARKER_RE = /(?:self|[a-z])\.TURBOPACK_REMOTE_SHARED/;
+    REMOTE_SHARED_ASSIGNMENT_RE = /\.TURBOPACK_REMOTE_SHARED=await (?:__turbopack_context__|e)\.A\((?<sharedModuleId>[0-9]+)\)/;
+    ASYNC_MODULE_LOADER_RE = /(?:__turbopack_context__|e)\.A\((?<asyncSharedModuleId>[0-9]+)\)/;
+    ASYNC_MODULE_RESOLVE_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<inner>parentImport|e)=>Promise\.resolve\(\)\.then\(\(\)=>\k<inner>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
+    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]+)\)\)\)\}/;
+    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__ = {};
   }
@@ -454,6 +564,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}`
@@ -466,7 +582,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,
@@ -486,9 +602,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(
@@ -656,20 +789,9 @@ function createTurbopackContext(bundle, exports, moduleExports, allModules, modu
 var init_turbopack_module = __esm({
   "src/shared/client/turbopack-module.ts"() {
     "use strict";
+    init_logger();
     init_const();
-  }
-});
-
-// 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;
-var init_turbopack_patterns = __esm({
-  "src/shared/client/turbopack-patterns.ts"() {
-    "use strict";
-    REMOTE_SHARED_MARKER_RE = /(?:self|[a-z])\.TURBOPACK_REMOTE_SHARED/;
-    REMOTE_SHARED_ASSIGNMENT_RE = /\.TURBOPACK_REMOTE_SHARED=await (?:__turbopack_context__|e)\.A\((?<sharedModuleId>[0-9]+)\)/;
-    ASYNC_MODULE_LOADER_RE = /(?:__turbopack_context__|e)\.A\((?<asyncSharedModuleId>[0-9]+)\)/;
-    ASYNC_MODULE_RESOLVE_RE = /(?<ctx>__turbopack_context__|e)=>\{\k<ctx>\.v\((?<inner>parentImport|e)=>Promise\.resolve\(\)\.then\(\(\)=>\k<inner>\((?<sharedModuleId>[0-9]+)\)\)\)\}/;
-    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]+)\)\)\)\}/;
+    init_turbopack_patterns();
   }
 });
 
@@ -681,10 +803,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;
@@ -717,6 +843,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}`
+              );
             }
           }
         })
@@ -727,9 +858,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}"`
+          );
         }
       }
     })
@@ -741,7 +876,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
       );
@@ -774,6 +917,7 @@ function getSharedModule(bundle, id) {
 var init_shared_modules2 = __esm({
   "src/shared/client/shared-modules.ts"() {
     "use strict";
+    init_logger();
     init_const();
     init_turbopack_module();
     init_turbopack_patterns();
@@ -950,11 +1094,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,
@@ -982,7 +1125,7 @@ async function loadStaticRemoteComponent(scripts, url) {
 var init_static_loader = __esm({
   "src/shared/client/static-loader.ts"() {
     "use strict";
-    init_error();
+    init_logger();
   }
 });
 
@@ -1049,7 +1192,8 @@ function sharedPolyfills(shared) {
         ...props
       }) => {
         if (prefetch) {
-          console.warn(
+          logWarn(
+            "Polyfill",
             "Next.js Link prefetch is not supported in remote components"
           );
         }
@@ -1152,6 +1296,7 @@ var import_jsx_runtime, imageImpl;
 var init_polyfill = __esm({
   "src/shared/client/polyfill.tsx"() {
     "use strict";
+    init_logger();
     // eslint-disable-next-line @next/next/no-img-element, jsx-a11y/alt-text
     import_jsx_runtime = require("react/jsx-runtime");
     imageImpl = (bundle) => function RemoteImage({
@@ -1556,11 +1701,17 @@ function remoteFetchHeaders() {
 }
 
 // src/shared/ssr/fetch-with-hooks.ts
-async function fetchWithHooks(url, init, options = {}) {
+init_fetch_with_protected_rc_fallback();
+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) {
@@ -1571,6 +1722,7 @@ async function fetchWithHooks(url, init, options = {}) {
 
 // src/html/host/index.tsx
 init_utils();
+init_logger();
 
 // src/html/host/runtime/index.ts
 init_error();
@@ -1623,7 +1775,7 @@ if (typeof HTMLElement !== "undefined") {
       if ((name === "src" || name === "name") && oldValue !== newValue) {
         if (this.getAttribute("src")) {
           this.load().catch((e) => {
-            console.error(e);
+            logError("HtmlHost", "Error loading remote component.", e);
             const errorEvent = new Event("error", {
               bubbles: true,
               composed: true
@@ -1645,7 +1797,7 @@ if (typeof HTMLElement !== "undefined") {
         });
         this.root = newRoot;
         this.load().catch((e) => {
-          console.error(e);
+          logError("HtmlHost", "Error reloading remote component.", e);
           const errorEvent = new Event("error", {
             bubbles: true,
             composed: true
@@ -1678,7 +1830,7 @@ if (typeof HTMLElement !== "undefined") {
       this.bundle = "default";
       if (this.hasAttribute("src") || this.querySelector("div#__REMOTE_COMPONENT__") || this.hasAttribute("data-ssr")) {
         this.load().catch((e) => {
-          console.error(e);
+          logError("HtmlHost", "Error loading remote component.", e);
           const errorEvent = new Event("error", {
             bubbles: true,
             composed: true
@@ -1712,8 +1864,6 @@ if (typeof HTMLElement !== "undefined") {
       }
       if (!remoteComponentChild && url) {
         const fetchInit = {
-          method: "GET",
-          headers: remoteFetchHeaders(),
           credentials: this.getAttribute("credentials") || "same-origin"
         };
         const res = await fetchWithHooks(url, fetchInit, {
@@ -1820,11 +1970,10 @@ if (typeof HTMLElement !== "undefined") {
                 try {
                   await unmount(this.root);
                 } catch (e) {
-                  console.error(
-                    new RemoteComponentsError(
-                      `Error while calling unmount() for Remote Component from ${prevUrl.href}.`,
-                      { cause: e }
-                    )
+                  logError(
+                    "HtmlHost",
+                    `Error while calling unmount() for Remote Component from ${prevUrl.href}.`,
+                    e
                   );
                 }
               })
@@ -2066,7 +2215,7 @@ if (typeof HTMLElement !== "undefined") {
             applyReset();
             if (!initial) {
               attachLinks().catch((e) => {
-                console.error(e);
+                logError("HtmlHost", "Error attaching links.", e);
               });
             }
             this.isLoading = false;
@@ -2119,7 +2268,7 @@ if (typeof HTMLElement !== "undefined") {
               if (!initial) {
                 applyReset();
                 attachLinks().catch((e) => {
-                  console.error(e);
+                  logError("HtmlHost", "Error attaching links.", e);
                 });
               }
               remoteComponent.isLoading = false;
@@ -2161,11 +2310,10 @@ if (typeof HTMLElement !== "undefined") {
             try {
               await mount(this.root);
             } catch (e) {
-              console.error(
-                new RemoteComponentsError(
-                  `Error while calling mount() for Remote Component from ${url.href}.`,
-                  { cause: e }
-                )
+              logError(
+                "HtmlHost",
+                `Error while calling mount() for Remote Component from ${url.href}.`,
+                e
               );
             }
           })