remote-components 0.0.42 → 0.0.44

package/dist/internal/next/host/app-router-client.d.ts

@@ -1,7 +1,34 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { R as RemoteComponentProps } from '../../../types-235b68a5.js';
-import 'react';
-import '../../../types-cbf6c34f.js';
+import * as react from 'react';
+import { R as RemoteComponentMetadata } from '../../../types-2ab78f67.js';
+
+interface RemoteComponentProps {
+    /** The src provided to the `<RemoteComponent>` component. May be relative or absolute URL. */
+    src: string;
+    /** The src converted to a URL object. For relative URLs, the VERCEL_URL is used as the origin. */
+    serverUrl: string;
+    name: string;
+    bundle: string;
+    route?: string;
+    runtime?: RemoteComponentMetadata['runtime'];
+    data: string[];
+    nextData?: {
+        props: {
+            pageProps: Record<string, unknown>;
+        };
+        buildId?: string;
+    } | null;
+    scripts?: {
+        src: string;
+    }[];
+    links?: Record<string, string | boolean | undefined>[];
+    remoteShared?: Record<string, string>;
+    isolate?: boolean;
+    mode?: 'open' | 'closed';
+    reset?: boolean;
+    type?: RemoteComponentMetadata['type'];
+    children: react.ReactNode;
+}
 
 declare module 'react/jsx-runtime' {
     namespace JSX {

package/dist/internal/next/remote/render-client.cjs

@@ -48,7 +48,7 @@ async function tryImportShared() {
   } catch {
     return {
       // eslint-disable-next-line camelcase
-      __remote_components_missing_shared__: "Remote Components shared module not found. Did you forget to wrap your config with `withRemoteComponents` on both host and remote?"
+      __remote_components_missing_shared__: "Remote Components shared modules not found. Did you forget to wrap your config with `withRemoteComponents` on both host and remote?"
     };
   }
 }

package/dist/internal/next/remote/render-client.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/next/remote/render-client.tsx"],"sourcesContent":["'use client';\n\nimport { use } from 'react';\nimport { RemoteComponentsError } from '#internal/shared/client/remote-component';\n\n// try to import the shared module from the remote application\n// use an empty object as a fallback if the import fails to avoid breaking the application\nasync function tryImportShared() {\n  try {\n    const self = globalThis as unknown as {\n      TURBOPACK_REMOTE_SHARED: { shared: Record<string, string> };\n    };\n    // this is a marker to find the shared module initializer in the Turbopack bundle\n    // DO NOT REMOVE\n    self.TURBOPACK_REMOTE_SHARED = await import(\n      'remote-components/shared/remote/app'\n    );\n    const { shared } = self.TURBOPACK_REMOTE_SHARED;\n    return shared;\n  } catch {\n    return {\n      // eslint-disable-next-line camelcase\n      __remote_components_missing_shared__:\n        'Remote Components shared module not found. Did you forget to wrap your config with `withRemoteComponents` on both host and remote?',\n    };\n  }\n}\n\n// create a promise singleton to import the shared module\nexport const tryImportSharedPromise = tryImportShared();\n\nexport function RemoteComponentSharedRemote({ name }: { name: string }) {\n  const shared = use(tryImportSharedPromise);\n\n  if ('__remote_components_missing_shared__' in shared) {\n    throw new RemoteComponentsError(\n      shared.__remote_components_missing_shared__,\n    );\n  }\n\n  return (\n    // render the shared module as a script tag\n    <script\n      data-remote-components-shared=\"\"\n      id={`${name}_shared`}\n      type=\"application/json\"\n    >\n      {JSON.stringify(shared)}\n    </script>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CI;AAAA;AAAA;AAAA;AAxCJ,mBAAoB;AACpB,8BAAsC;AAItC,eAAe,kBAAkB;AAC/B,MAAI;AACF,UAAM,OAAO;AAKb,SAAK,0BAA0B,MAAM,OACnC,qCACF;AACA,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,WAAO;AAAA,EACT,QAAE;AACA,WAAO;AAAA;AAAA,MAEL,sCACE;AAAA,IACJ;AAAA,EACF;AACF;AAGO,MAAM,yBAAyB,gBAAgB;AAE/C,SAAS,4BAA4B,EAAE,KAAK,GAAqB;AACtE,QAAM,aAAS,kBAAI,sBAAsB;AAEzC,MAAI,0CAA0C,QAAQ;AACpD,UAAM,IAAI;AAAA,MACR,OAAO;AAAA,IACT;AAAA,EACF;AAEA,SAEE;AAAA,IAAC;AAAA;AAAA,MACC,iCAA8B;AAAA,MAC9B,IAAI,GAAG;AAAA,MACP,MAAK;AAAA,MAEJ,eAAK,UAAU,MAAM;AAAA;AAAA,EACxB;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/next/remote/render-client.tsx"],"sourcesContent":["'use client';\n\nimport { use } from 'react';\nimport { RemoteComponentsError } from '#internal/shared/client/remote-component';\n\n// try to import the shared module from the remote application\n// use an empty object as a fallback if the import fails to avoid breaking the application\nasync function tryImportShared() {\n  try {\n    const self = globalThis as unknown as {\n      TURBOPACK_REMOTE_SHARED: { shared: Record<string, string> };\n    };\n    // this is a marker to find the shared module initializer in the Turbopack bundle\n    // DO NOT REMOVE\n    self.TURBOPACK_REMOTE_SHARED = await import(\n      'remote-components/shared/remote/app'\n    );\n    const { shared } = self.TURBOPACK_REMOTE_SHARED;\n    return shared;\n  } catch {\n    return {\n      // eslint-disable-next-line camelcase\n      __remote_components_missing_shared__:\n        'Remote Components shared modules not found. Did you forget to wrap your config with `withRemoteComponents` on both host and remote?',\n    };\n  }\n}\n\n// create a promise singleton to import the shared module\nexport const tryImportSharedPromise = tryImportShared();\n\nexport function RemoteComponentSharedRemote({ name }: { name: string }) {\n  const shared = use(tryImportSharedPromise);\n\n  if ('__remote_components_missing_shared__' in shared) {\n    throw new RemoteComponentsError(\n      shared.__remote_components_missing_shared__,\n    );\n  }\n\n  return (\n    // render the shared module as a script tag\n    <script\n      data-remote-components-shared=\"\"\n      id={`${name}_shared`}\n      type=\"application/json\"\n    >\n      {JSON.stringify(shared)}\n    </script>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA0CI;AAAA;AAAA;AAAA;AAxCJ,mBAAoB;AACpB,8BAAsC;AAItC,eAAe,kBAAkB;AAC/B,MAAI;AACF,UAAM,OAAO;AAKb,SAAK,0BAA0B,MAAM,OACnC,qCACF;AACA,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,WAAO;AAAA,EACT,QAAE;AACA,WAAO;AAAA;AAAA,MAEL,sCACE;AAAA,IACJ;AAAA,EACF;AACF;AAGO,MAAM,yBAAyB,gBAAgB;AAE/C,SAAS,4BAA4B,EAAE,KAAK,GAAqB;AACtE,QAAM,aAAS,kBAAI,sBAAsB;AAEzC,MAAI,0CAA0C,QAAQ;AACpD,UAAM,IAAI;AAAA,MACR,OAAO;AAAA,IACT;AAAA,EACF;AAEA,SAEE;AAAA,IAAC;AAAA;AAAA,MACC,iCAA8B;AAAA,MAC9B,IAAI,GAAG;AAAA,MACP,MAAK;AAAA,MAEJ,eAAK,UAAU,MAAM;AAAA;AAAA,EACxB;AAEJ;","names":[]}

package/dist/internal/next/remote/render-client.js

@@ -11,7 +11,7 @@ async function tryImportShared() {
   } catch {
     return {
       // eslint-disable-next-line camelcase
-      __remote_components_missing_shared__: "Remote Components shared module not found. Did you forget to wrap your config with `withRemoteComponents` on both host and remote?"
+      __remote_components_missing_shared__: "Remote Components shared modules not found. Did you forget to wrap your config with `withRemoteComponents` on both host and remote?"
     };
   }
 }

package/dist/internal/next/remote/render-client.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/next/remote/render-client.tsx"],"sourcesContent":["'use client';\n\nimport { use } from 'react';\nimport { RemoteComponentsError } from '#internal/shared/client/remote-component';\n\n// try to import the shared module from the remote application\n// use an empty object as a fallback if the import fails to avoid breaking the application\nasync function tryImportShared() {\n  try {\n    const self = globalThis as unknown as {\n      TURBOPACK_REMOTE_SHARED: { shared: Record<string, string> };\n    };\n    // this is a marker to find the shared module initializer in the Turbopack bundle\n    // DO NOT REMOVE\n    self.TURBOPACK_REMOTE_SHARED = await import(\n      'remote-components/shared/remote/app'\n    );\n    const { shared } = self.TURBOPACK_REMOTE_SHARED;\n    return shared;\n  } catch {\n    return {\n      // eslint-disable-next-line camelcase\n      __remote_components_missing_shared__:\n        'Remote Components shared module not found. Did you forget to wrap your config with `withRemoteComponents` on both host and remote?',\n    };\n  }\n}\n\n// create a promise singleton to import the shared module\nexport const tryImportSharedPromise = tryImportShared();\n\nexport function RemoteComponentSharedRemote({ name }: { name: string }) {\n  const shared = use(tryImportSharedPromise);\n\n  if ('__remote_components_missing_shared__' in shared) {\n    throw new RemoteComponentsError(\n      shared.__remote_components_missing_shared__,\n    );\n  }\n\n  return (\n    // render the shared module as a script tag\n    <script\n      data-remote-components-shared=\"\"\n      id={`${name}_shared`}\n      type=\"application/json\"\n    >\n      {JSON.stringify(shared)}\n    </script>\n  );\n}\n"],"mappings":";AA0CI;AAxCJ,SAAS,WAAW;AACpB,SAAS,6BAA6B;AAItC,eAAe,kBAAkB;AAC/B,MAAI;AACF,UAAM,OAAO;AAKb,SAAK,0BAA0B,MAAM,OACnC,qCACF;AACA,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,WAAO;AAAA,EACT,QAAE;AACA,WAAO;AAAA;AAAA,MAEL,sCACE;AAAA,IACJ;AAAA,EACF;AACF;AAGO,MAAM,yBAAyB,gBAAgB;AAE/C,SAAS,4BAA4B,EAAE,KAAK,GAAqB;AACtE,QAAM,SAAS,IAAI,sBAAsB;AAEzC,MAAI,0CAA0C,QAAQ;AACpD,UAAM,IAAI;AAAA,MACR,OAAO;AAAA,IACT;AAAA,EACF;AAEA;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QACC,iCAA8B;AAAA,QAC9B,IAAI,GAAG;AAAA,QACP,MAAK;AAAA,QAEJ,eAAK,UAAU,MAAM;AAAA;AAAA,IACxB;AAAA;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/next/remote/render-client.tsx"],"sourcesContent":["'use client';\n\nimport { use } from 'react';\nimport { RemoteComponentsError } from '#internal/shared/client/remote-component';\n\n// try to import the shared module from the remote application\n// use an empty object as a fallback if the import fails to avoid breaking the application\nasync function tryImportShared() {\n  try {\n    const self = globalThis as unknown as {\n      TURBOPACK_REMOTE_SHARED: { shared: Record<string, string> };\n    };\n    // this is a marker to find the shared module initializer in the Turbopack bundle\n    // DO NOT REMOVE\n    self.TURBOPACK_REMOTE_SHARED = await import(\n      'remote-components/shared/remote/app'\n    );\n    const { shared } = self.TURBOPACK_REMOTE_SHARED;\n    return shared;\n  } catch {\n    return {\n      // eslint-disable-next-line camelcase\n      __remote_components_missing_shared__:\n        'Remote Components shared modules not found. Did you forget to wrap your config with `withRemoteComponents` on both host and remote?',\n    };\n  }\n}\n\n// create a promise singleton to import the shared module\nexport const tryImportSharedPromise = tryImportShared();\n\nexport function RemoteComponentSharedRemote({ name }: { name: string }) {\n  const shared = use(tryImportSharedPromise);\n\n  if ('__remote_components_missing_shared__' in shared) {\n    throw new RemoteComponentsError(\n      shared.__remote_components_missing_shared__,\n    );\n  }\n\n  return (\n    // render the shared module as a script tag\n    <script\n      data-remote-components-shared=\"\"\n      id={`${name}_shared`}\n      type=\"application/json\"\n    >\n      {JSON.stringify(shared)}\n    </script>\n  );\n}\n"],"mappings":";AA0CI;AAxCJ,SAAS,WAAW;AACpB,SAAS,6BAA6B;AAItC,eAAe,kBAAkB;AAC/B,MAAI;AACF,UAAM,OAAO;AAKb,SAAK,0BAA0B,MAAM,OACnC,qCACF;AACA,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,WAAO;AAAA,EACT,QAAE;AACA,WAAO;AAAA;AAAA,MAEL,sCACE;AAAA,IACJ;AAAA,EACF;AACF;AAGO,MAAM,yBAAyB,gBAAgB;AAE/C,SAAS,4BAA4B,EAAE,KAAK,GAAqB;AACtE,QAAM,SAAS,IAAI,sBAAsB;AAEzC,MAAI,0CAA0C,QAAQ;AACpD,UAAM,IAAI;AAAA,MACR,OAAO;AAAA,IACT;AAAA,EACF;AAEA;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QACC,iCAA8B;AAAA,QAC9B,IAAI,GAAG;AAAA,QACP,MAAK;AAAA,QAEJ,eAAK,UAAU,MAAM;AAAA;AAAA,IACxB;AAAA;AAEJ;","names":[]}

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

@@ -361,6 +361,7 @@ function getBundleKey(bundle) {
 // src/shared/client/chunk-loader.ts
 function createChunkLoader(runtime) {
   return function __turbopack_chunk_load__(chunkId, scriptBundle) {
+    logDebug("ChunkLoader", `Loading chunk: "${chunkId}"`);
     const self = globalThis;
     const {
       bundle,
@@ -370,8 +371,14 @@ function createChunkLoader(runtime) {
       bundle: scriptBundle ?? "",
       id: chunkId
     };
+    logDebug(
+      "ChunkLoader",
+      `Parsed chunk - bundle: "${bundle}", path: "${path}", prefix: "${prefix}"`
+    );
     const remoteRuntime = self.__remote_webpack_require__?.[bundle ?? "default"] ? self.__remote_webpack_require__[bundle ?? "default"]?.type || "webpack" : runtime;
+    logDebug("ChunkLoader", `Remote runtime: "${remoteRuntime}"`);
     if (remoteRuntime === RUNTIME_WEBPACK) {
+      logDebug("ChunkLoader", "Skipping chunk load - webpack runtime detected");
       return Promise.resolve(void 0);
     }
     const url = new URL(
@@ -382,14 +389,17 @@ function createChunkLoader(runtime) {
       self.__remote_bundle_url__?.[bundle ?? "default"] ?? new URL(location.origin)
     ).href;
     if (url.endsWith(".css")) {
+      logDebug("ChunkLoader", `Skipping CSS file: "${url}"`);
       return;
     }
     if (!self.__remote_components_turbopack_chunk_loader_promise__) {
       self.__remote_components_turbopack_chunk_loader_promise__ = {};
     }
     if (self.__remote_components_turbopack_chunk_loader_promise__[url]) {
+      logDebug("ChunkLoader", `Returning cached promise for: "${url}"`);
       return self.__remote_components_turbopack_chunk_loader_promise__[url];
     }
+    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")) {
@@ -401,7 +411,12 @@ function createChunkLoader(runtime) {
   };
 }
 async function handleTurbopackChunk(code, bundle, url) {
+  logDebug(
+    "ChunkLoader",
+    `Handling Turbopack chunk - bundle: "${bundle}", url: "${url}"`
+  );
   if (/importScripts\(\.\.\.self.TURBOPACK_NEXT_CHUNK_URLS/.test(code)) {
+    logDebug("ChunkLoader", `Skipping worker chunk: "${url}"`);
     const preloadLinks = document.querySelectorAll(
       `link[rel="preload"][href="${new URL(url).pathname}"]`
     );
@@ -410,6 +425,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(
     /TURBOPACK_WORKER_LOCATION/g,
     `TURBOPACK_WORKER_LOCATION_${bundleKey}`
@@ -429,6 +445,7 @@ async function handleTurbopackChunk(code, bundle, url) {
       )
     ).href}$1$2.js.map`
   );
+  logDebug("ChunkLoader", `Creating blob script for: "${url}"`);
   await new Promise((scriptResolve, scriptReject) => {
     const blob = new Blob([transformedCode], {
       type: "application/javascript; charset=UTF-8"
@@ -455,10 +472,18 @@ async function handleTurbopackChunk(code, bundle, url) {
     document.head.appendChild(script);
   });
   const chunkLists = self[`TURBOPACK_${bundleKey}_CHUNK_LISTS`];
+  logDebug(
+    "ChunkLoader",
+    `Processing chunk lists for bundle "${bundle}": ${chunkLists?.length ?? 0} lists`
+  );
   const loadChunkLists = [];
   while (chunkLists?.length) {
     const { chunks } = chunkLists.shift() ?? { chunks: [] };
     if (chunks.length > 0) {
+      logDebug(
+        "ChunkLoader",
+        `Loading ${chunks.length} additional chunks for bundle "${bundle}": [${chunks.join(", ")}]`
+      );
       chunks.forEach((id) => {
         const chunkLoadResult = self.__webpack_chunk_load__?.(
           `[${bundle}] ${url.slice(0, url.indexOf("/_next"))}/_next/${id}`
@@ -470,6 +495,10 @@ async function handleTurbopackChunk(code, bundle, url) {
     }
   }
   if (loadChunkLists.length > 0) {
+    logDebug(
+      "ChunkLoader",
+      `Waiting for ${loadChunkLists.length} additional chunks to load`
+    );
     await Promise.all(loadChunkLists);
   }
 }