remote-components 0.0.30 → 0.0.31

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

@@ -29,7 +29,8 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var render_client_exports = {};
 __export(render_client_exports, {
-  RemoteComponentSharedRemote: () => RemoteComponentSharedRemote
+  RemoteComponentSharedRemote: () => RemoteComponentSharedRemote,
+  tryImportSharedPromise: () => tryImportSharedPromise
 });
 module.exports = __toCommonJS(render_client_exports);
 var import_jsx_runtime = (
@@ -39,7 +40,9 @@ var import_jsx_runtime = (
 var import_react = require("react");
 async function tryImportShared() {
   try {
-    const { shared } = await import("@remote-components/shared/remote/app");
+    const self = globalThis;
+    self.TURBOPACK_REMOTE_SHARED = await import("@remote-components/shared/remote/app");
+    const { shared } = self.TURBOPACK_REMOTE_SHARED;
     return shared;
   } catch {
     return {};
@@ -59,6 +62,7 @@ function RemoteComponentSharedRemote({ name }) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  RemoteComponentSharedRemote
+  RemoteComponentSharedRemote,
+  tryImportSharedPromise
 });
 //# sourceMappingURL=render-client.cjs.map

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';\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 { shared } = await import('@remote-components/shared/remote/app');\n    return shared;\n  } catch {\n    return {};\n  }\n}\n\n// create a promise singleton to import the shared module\nconst tryImportSharedPromise = tryImportShared();\n\nexport function RemoteComponentSharedRemote({ name }: { name: string }) {\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(use(tryImportSharedPromise))}\n    </script>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBI;AAAA;AAAA;AAAA;AAnBJ,mBAAoB;AAIpB,eAAe,kBAAkB;AAC/B,MAAI;AACF,UAAM,EAAE,OAAO,IAAI,MAAM,OAAO,sCAAsC;AACtE,WAAO;AAAA,EACT,QAAE;AACA,WAAO,CAAC;AAAA,EACV;AACF;AAGA,MAAM,yBAAyB,gBAAgB;AAExC,SAAS,4BAA4B,EAAE,KAAK,GAAqB;AACtE,SAEE;AAAA,IAAC;AAAA;AAAA,MACC,iCAA8B;AAAA,MAC9B,IAAI,GAAG;AAAA,MACP,MAAK;AAAA,MAEJ,eAAK,cAAU,kBAAI,sBAAsB,CAAC;AAAA;AAAA,EAC7C;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/next/remote/render-client.tsx"],"sourcesContent":["'use client';\n\nimport { use } from 'react';\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  }\n}\n\n// create a promise singleton to import the shared module\nexport const tryImportSharedPromise = tryImportShared();\n\nexport function RemoteComponentSharedRemote({ name }: { name: string }) {\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(use(tryImportSharedPromise))}\n    </script>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA6BI;AAAA;AAAA;AAAA;AA3BJ,mBAAoB;AAIpB,eAAe,kBAAkB;AAC/B,MAAI;AACF,UAAM,OAAO;AAKb,SAAK,0BAA0B,MAAM,OACnC,sCACF;AACA,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,WAAO;AAAA,EACT,QAAE;AACA,WAAO,CAAC;AAAA,EACV;AACF;AAGO,MAAM,yBAAyB,gBAAgB;AAE/C,SAAS,4BAA4B,EAAE,KAAK,GAAqB;AACtE,SAEE;AAAA,IAAC;AAAA;AAAA,MACC,iCAA8B;AAAA,MAC9B,IAAI,GAAG;AAAA,MACP,MAAK;AAAA,MAEJ,eAAK,cAAU,kBAAI,sBAAsB,CAAC;AAAA;AAAA,EAC7C;AAEJ;","names":[]}

package/dist/internal/next/remote/render-client.d.ts

@@ -1,7 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+declare const tryImportSharedPromise: Promise<Record<string, string>>;
 declare function RemoteComponentSharedRemote({ name }: {
     name: string;
 }): react_jsx_runtime.JSX.Element;
 
-export { RemoteComponentSharedRemote };
+export { RemoteComponentSharedRemote, tryImportSharedPromise };

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

@@ -3,7 +3,9 @@ import { jsx } from "react/jsx-runtime";
 import { use } from "react";
 async function tryImportShared() {
   try {
-    const { shared } = await import("@remote-components/shared/remote/app");
+    const self = globalThis;
+    self.TURBOPACK_REMOTE_SHARED = await import("@remote-components/shared/remote/app");
+    const { shared } = self.TURBOPACK_REMOTE_SHARED;
     return shared;
   } catch {
     return {};
@@ -25,6 +27,7 @@ function RemoteComponentSharedRemote({ name }) {
   );
 }
 export {
-  RemoteComponentSharedRemote
+  RemoteComponentSharedRemote,
+  tryImportSharedPromise
 };
 //# sourceMappingURL=render-client.js.map

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';\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 { shared } = await import('@remote-components/shared/remote/app');\n    return shared;\n  } catch {\n    return {};\n  }\n}\n\n// create a promise singleton to import the shared module\nconst tryImportSharedPromise = tryImportShared();\n\nexport function RemoteComponentSharedRemote({ name }: { name: string }) {\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(use(tryImportSharedPromise))}\n    </script>\n  );\n}\n"],"mappings":";AAqBI;AAnBJ,SAAS,WAAW;AAIpB,eAAe,kBAAkB;AAC/B,MAAI;AACF,UAAM,EAAE,OAAO,IAAI,MAAM,OAAO,sCAAsC;AACtE,WAAO;AAAA,EACT,QAAE;AACA,WAAO,CAAC;AAAA,EACV;AACF;AAGA,MAAM,yBAAyB,gBAAgB;AAExC,SAAS,4BAA4B,EAAE,KAAK,GAAqB;AACtE;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QACC,iCAA8B;AAAA,QAC9B,IAAI,GAAG;AAAA,QACP,MAAK;AAAA,QAEJ,eAAK,UAAU,IAAI,sBAAsB,CAAC;AAAA;AAAA,IAC7C;AAAA;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/next/remote/render-client.tsx"],"sourcesContent":["'use client';\n\nimport { use } from 'react';\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  }\n}\n\n// create a promise singleton to import the shared module\nexport const tryImportSharedPromise = tryImportShared();\n\nexport function RemoteComponentSharedRemote({ name }: { name: string }) {\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(use(tryImportSharedPromise))}\n    </script>\n  );\n}\n"],"mappings":";AA6BI;AA3BJ,SAAS,WAAW;AAIpB,eAAe,kBAAkB;AAC/B,MAAI;AACF,UAAM,OAAO;AAKb,SAAK,0BAA0B,MAAM,OACnC,sCACF;AACA,UAAM,EAAE,OAAO,IAAI,KAAK;AACxB,WAAO;AAAA,EACT,QAAE;AACA,WAAO,CAAC;AAAA,EACV;AACF;AAGO,MAAM,yBAAyB,gBAAgB;AAE/C,SAAS,4BAA4B,EAAE,KAAK,GAAqB;AACtE;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QACC,iCAA8B;AAAA,QAC9B,IAAI,GAAG;AAAA,QACP,MAAK;AAAA,QAEJ,eAAK,UAAU,IAAI,sBAAsB,CAAC;AAAA;AAAA,IAC7C;AAAA;AAEJ;","names":[]}

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

@@ -212,19 +212,6 @@ async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location
   }
   self.__remote_bundle_url__[bundle ?? "default"] = url;
   self.__webpack_get_script_filename__ = () => null;
-  await initializeSharedModules(
-    bundle ?? "default",
-    // include all core modules as shared
-    {
-      react: async () => (await import("react")).default,
-      "react-dom": async () => (await import("react-dom")).default,
-      "react/jsx-dev-runtime": async () => (await import("react/jsx-dev-runtime")).default,
-      "react/jsx-runtime": async () => (await import("react/jsx-runtime")).default,
-      "react-dom/client": async () => (await import("react-dom/client")).default,
-      ...shared
-    },
-    remoteShared
-  );
   if (typeof self.__webpack_require__ !== "function" || self.__webpack_require_type__ !== "turbopack") {
     if (!self.__original_webpack_require__ && !self.__original_webpack_chunk_load__) {
       self.__original_webpack_chunk_load__ = self.__webpack_chunk_load__;
@@ -249,6 +236,19 @@ async function setupWebpackRuntime(runtime, scripts = [], url = new URL(location
       })
     );
   }
+  await initializeSharedModules(
+    bundle ?? "default",
+    // include all core modules as shared
+    {
+      react: async () => (await import("react")).default,
+      "react-dom": async () => (await import("react-dom")).default,
+      "react/jsx-dev-runtime": async () => (await import("react/jsx-dev-runtime")).default,
+      "react/jsx-runtime": async () => (await import("react/jsx-runtime")).default,
+      "react-dom/client": async () => (await import("react-dom/client")).default,
+      ...shared
+    },
+    remoteShared
+  );
 }
 function createChunkLoader(runtime) {
   return function __turbopack_chunk_load__(chunkId, scriptBundle) {
@@ -326,6 +326,7 @@ async function handleTurbopackChunk(code, bundle, url) {
     });
     const scriptUrl = URL.createObjectURL(blob);
     const script = document.createElement("script");
+    script.setAttribute("data-turbopack-src", url);
     script.src = scriptUrl;
     script.async = true;
     script.onload = () => {
@@ -400,17 +401,84 @@ function createModuleRequire(runtime) {
     }
   };
 }
-function initializeSharedModules(bundle, shared = {}, remoteShared = {}) {
+async function initializeSharedModules(bundle, hostShared = {}, remoteShared = {}) {
   const self = globalThis;
   self.__remote_shared_modules__ = self.__remote_shared_modules__ ?? {};
   if (!self.__remote_shared_modules__[bundle]) {
     self.__remote_shared_modules__[bundle] = {};
   }
+  const bundleKey = getBundleKey(bundle);
+  const modules = self[`TURBOPACK_${bundleKey}`];
+  let sharedModuleInitializer = null;
+  if (modules && Array.isArray(modules)) {
+    const allModules = modules.flat();
+    const sharedModuleInitializerIndex = allModules.findIndex((idOrFunc) => {
+      if (typeof idOrFunc !== "function") {
+        return false;
+      }
+      const funcCode = idOrFunc.toString();
+      return /[a-z]\.TURBOPACK_REMOTE_SHARED/.test(funcCode);
+    });
+    if (sharedModuleInitializerIndex > 0) {
+      const sharedModuleInitializerCode = allModules[sharedModuleInitializerIndex].toString();
+      const sharedModuleInitializerId = allModules[sharedModuleInitializerIndex - 1];
+      const { sharedModuleId } = /\.TURBOPACK_REMOTE_SHARED=await e\.A\((?<sharedModuleId>[0-9]+)\)/.exec(
+        sharedModuleInitializerCode
+      )?.groups ?? {};
+      if (sharedModuleId) {
+        const { default: sharedModuleInitializerInstance } = handleTurbopackModule(
+          bundle,
+          sharedModuleId,
+          `[${bundle}] ${sharedModuleInitializerId}`
+        );
+        sharedModuleInitializer = sharedModuleInitializerInstance;
+      }
+    }
+    if (sharedModuleInitializer) {
+      const { shared } = await sharedModuleInitializer;
+      const sharedModuleIds = Object.entries(shared).filter(([, value]) => typeof value === "function").reduce((acc, [key, value]) => {
+        const { asyncSharedModuleId } = /e\.A\((?<asyncSharedModuleId>[0-9]+)\)/.exec(value.toString())?.groups ?? {};
+        if (asyncSharedModuleId) {
+          const asyncSharedModuleIdNumber = Number(asyncSharedModuleId);
+          let asyncSharedModule;
+          const newAllModules = self[`TURBOPACK_${bundleKey}`]?.flat() ?? [];
+          const asyncSharedModuleIdIndex = newAllModules.indexOf(
+            asyncSharedModuleIdNumber
+          );
+          if (asyncSharedModuleIdIndex !== -1 && typeof newAllModules[asyncSharedModuleIdIndex + 1] === "function") {
+            asyncSharedModule = newAllModules[asyncSharedModuleIdIndex + 1];
+          }
+          if (asyncSharedModule) {
+            const asyncSharedModuleCode = asyncSharedModule.toString();
+            const { sharedModuleId } = /e=>{e\.v\(e=>Promise\.resolve\(\)\.then\(\(\)=>e\((?<sharedModuleId>[0-9]+)\)\)\)}/.exec(
+              asyncSharedModuleCode
+            )?.groups ?? /e=>{e\.v\(t=>Promise\.all\(\["[^"]+"\].map\(t=>e\.l\(t\)\)\)\.then\(\(\)=>t\((?<sharedModuleId>[0-9]+)\)\)\)}/.exec(
+              asyncSharedModuleCode
+            )?.groups ?? {};
+            acc[sharedModuleId ?? asyncSharedModuleId] = key.replace(
+              "__remote_shared_module_",
+              ""
+            );
+          }
+        }
+        return acc;
+      }, {});
+      return Promise.all(
+        Object.entries(sharedModuleIds).map(async ([id, module2]) => {
+          if (self.__remote_shared_modules__?.[bundle]) {
+            if (hostShared[module2]) {
+              self.__remote_shared_modules__[bundle][id] = await hostShared[module2](bundle);
+            }
+          }
+        })
+      );
+    }
+  }
   return Promise.all(
     Object.entries(remoteShared).map(async ([id, module2]) => {
       if (self.__remote_shared_modules__?.[bundle]) {
-        if (shared[module2]) {
-          self.__remote_shared_modules__[bundle][id.replace("[app-ssr]", "[app-client]")] = await shared[module2](bundle);
+        if (hostShared[module2]) {
+          self.__remote_shared_modules__[bundle][id.replace("[app-ssr]", "[app-client]")] = await hostShared[module2](bundle);
         } else {
           console.error(`Shared module "${module2}" not found for "${bundle}".`);
         }
@@ -434,28 +502,25 @@ function handleTurbopackModule(bundle, moduleId, id) {
   const bundleKey = getBundleKey(bundle);
   const modules = self[`TURBOPACK_${bundleKey}`];
   let moduleInit;
-  for (const mod of modules ?? []) {
-    if (typeof mod[1] === "string") {
-      let index = mod.indexOf(moduleId);
-      if (index === -1) {
-        index = mod.findIndex(
-          (m) => typeof m === "string" && m.startsWith(moduleId)
-        );
-      }
-      if (index !== -1) {
-        while (typeof mod[index] !== "function" && index < mod.length) {
-          index++;
-        }
-        moduleInit = mod[index];
-        break;
-      }
-    } else {
-      const map = mod[1];
-      if (moduleId in map) {
-        moduleInit = map[moduleId];
-        break;
+  const allModules = modules?.flat() ?? [];
+  if (typeof allModules[1] === "string" || typeof allModules[1] === "number") {
+    const normalizedId = /^[0-9]+$/.test(moduleId) ? Number(moduleId) : moduleId;
+    let moduleIdIndex = allModules.indexOf(normalizedId);
+    if (moduleIdIndex === -1) {
+      moduleIdIndex = allModules.findIndex(
+        (bundleEntry) => typeof bundleEntry === "string" && bundleEntry.startsWith(moduleId) || bundleEntry === normalizedId
+      );
+    }
+    if (moduleIdIndex !== -1) {
+      while (typeof allModules[moduleIdIndex] !== "function" && moduleIdIndex < allModules.length) {
+        moduleIdIndex++;
       }
+      moduleInit = allModules[moduleIdIndex];
     }
+  } else {
+    moduleInit = allModules.find(
+      (bundleEntry) => typeof bundleEntry === "object" && bundleEntry !== null && moduleId in bundleEntry
+    )?.[moduleId];
   }
   const exports = {};
   const moduleExports = { exports };
@@ -495,6 +560,7 @@ function handleTurbopackModule(bundle, moduleId, id) {
           };
         }
       },
+      // define exports
       s(m) {
         let mod = m;
         if (Array.isArray(m)) {
@@ -518,18 +584,29 @@ function handleTurbopackModule(bundle, moduleId, id) {
           exportNames.add(key);
         }
       },
-      i(iid) {
-        const { exportSource, exportName } = /\s+<export (?<exportSource>.*?) as (?<exportName>.*?)>$/.exec(iid)?.groups ?? {};
-        const normalizedId = iid.replace(/\s+<export(?<specifier>.*)>$/, "");
-        const mod = self.__webpack_require__?.(
-          `[${bundle}] ${normalizedId}`
-        );
-        if (exportSource && exportName && (exportSource === "*" || typeof mod[exportSource] !== "undefined") && typeof mod[exportName] === "undefined") {
-          if (exportSource === "*") {
-            mod[exportName] = mod;
-          } else {
-            mod[exportName] = mod[exportSource];
+      // import ESM
+      i(importId) {
+        let mod;
+        if (typeof importId === "string") {
+          const { exportSource, exportName } = /\s+<export (?<exportSource>.*?) as (?<exportName>.*?)>$/.exec(
+            importId
+          )?.groups ?? {};
+          const normalizedId = importId.replace(
+            /\s+<export(?<specifier>.*)>$/,
+            ""
+          );
+          mod = self.__webpack_require__?.(
+            `[${bundle}] ${normalizedId}`
+          );
+          if (exportSource && exportName && (exportSource === "*" || typeof mod[exportSource] !== "undefined") && typeof mod[exportName] === "undefined") {
+            if (exportSource === "*") {
+              mod[exportName] = mod;
+            } else {
+              mod[exportName] = mod[exportSource];
+            }
           }
+        } else {
+          mod = self.__webpack_require__?.(`[${bundle}] ${importId}`);
         }
         if (!("default" in mod) && mod.toString() !== "[object Module]") {
           try {
@@ -539,12 +616,21 @@ function handleTurbopackModule(bundle, moduleId, id) {
         }
         return mod;
       },
-      r(rid) {
-        return self.__webpack_require__?.(`[${bundle}] ${rid}`);
+      // require
+      r(requireId) {
+        return self.__webpack_require__?.(`[${bundle}] ${requireId}`);
       },
+      // value exports
       v(value) {
-        exports.default = value;
+        if (typeof value === "function") {
+          exports.default = value((vid) => {
+            return self.__webpack_require__?.(`[${bundle}] ${vid}`);
+          });
+        } else {
+          exports.default = value;
+        }
       },
+      // async module initializer
       async a(mod) {
         let result;
         await mod(
@@ -554,12 +640,30 @@ function handleTurbopackModule(bundle, moduleId, id) {
         );
         exports.default = result;
       },
+      // async module loader
       async A(Aid) {
         const mod = self.__webpack_require__?.(`[${bundle}] ${Aid}`);
         return mod.default(
           (parentId) => self.__webpack_require__?.(`[${bundle}] ${parentId}`)
         );
       },
+      // chunk loader
+      l(url) {
+        const moduleInitIndex = allModules.indexOf(moduleInit);
+        if (moduleInitIndex !== -1) {
+          const scriptIndex = allModules.slice(0, moduleInitIndex).findLastIndex((bundleEntry) => bundleEntry instanceof Element);
+          if (scriptIndex !== -1) {
+            const script = allModules[scriptIndex];
+            const scriptSrc = script.getAttribute("data-turbopack-src") || "";
+            const nextIndex = scriptSrc.indexOf("/_next");
+            const baseUrl = nextIndex !== -1 ? scriptSrc.slice(0, nextIndex) : "";
+            const bundleUrl = `[${bundle}] ${baseUrl}/_next/${url}`;
+            return self.__webpack_chunk_load__?.(bundleUrl, bundle);
+          }
+        }
+        throw new Error(`Failed to load chunk ${url} for module ${id}`);
+      },
+      // global
       g: self.__remote_components_turbopack_global__[bundle],
       m: moduleExports,
       e: exports