remote-components 0.0.30 → 0.0.32

package/dist/component-loader-e5513139.d.ts

@@ -0,0 +1,76 @@
+import * as react from 'react';
+
+interface RemoteComponentMetadata {
+    bundle: string;
+    route: string;
+    runtime: 'webpack' | 'turbopack';
+    id: string;
+}
+
+interface RemoteComponentProps {
+    url: 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;
+    children: react.ReactNode;
+}
+interface GlobalScope {
+    __DISABLE_WEBPACK_EXEC__?: Record<string, boolean>;
+    __webpack_chunk_load__?: (chunkId: string, scriptBundle?: string) => Promise<unknown> | undefined;
+    __original_webpack_chunk_load__?: (chunkId: string, scriptBundle?: string) => Promise<unknown> | undefined;
+    __webpack_require__?: (id: string) => unknown;
+    __webpack_get_script_filename__?: (id: string) => string | null | undefined;
+    __original_webpack_require__?: (id: string) => unknown;
+    __remote_webpack_require__?: Record<string, ((remoteId: string | number) => unknown) & {
+        c?: Record<string | number, {
+            id: string;
+            parents: string[];
+            children: string[];
+        }>;
+        m?: Record<string | number, (module: {
+            exports: unknown;
+        }) => void>;
+        type?: 'turbopack' | 'webpack';
+    }>;
+    __webpack_require_type__?: RemoteComponentMetadata['runtime'];
+    __remote_shared_modules__?: Record<string, Record<string, unknown>>;
+    __remote_bundle_url__?: Record<string, string | URL>;
+    __remote_components_turbopack_chunk_loader_promise__?: Record<string, Promise<unknown>>;
+    __remote_components_turbopack_modules__?: Record<string, Record<string, unknown>>;
+    __remote_components_turbopack_global__?: Record<string, unknown>;
+    [key: string]: unknown;
+}
+interface LoaderResult {
+    component: react.ReactNode;
+    error?: Error;
+}
+
+type LoadRemoteComponentProps = Pick<RemoteComponentProps, 'name' | 'bundle' | 'route' | 'runtime' | 'data' | 'nextData' | 'scripts'> & {
+    url: URL;
+    shared: Promise<Record<string, (bundle?: string) => Promise<unknown>>> | Record<string, (bundle?: string) => Promise<unknown>>;
+    remoteShared: Record<string, string>;
+    container?: HTMLHeadElement | ShadowRoot | null;
+    rscName?: string;
+};
+/**
+ * Main loader function that orchestrates the component loading process
+ */
+declare function loadRemoteComponent({ url, name, rscName, bundle, route, runtime, data, nextData, scripts, shared, remoteShared, container, }: LoadRemoteComponentProps): Promise<LoaderResult>;
+
+export { GlobalScope as G, LoaderResult as L, RemoteComponentProps as R, LoadRemoteComponentProps as a, loadRemoteComponent as l };

package/dist/html/host.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,32 +502,28 @@ 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 };
-  const exportNames = /* @__PURE__ */ new Set();
   if (!self.__remote_components_turbopack_modules__) {
     self.__remote_components_turbopack_modules__ = {};
   }
@@ -495,43 +559,80 @@ function handleTurbopackModule(bundle, moduleId, id) {
           };
         }
       },
-      s(m) {
-        let mod = m;
-        if (Array.isArray(m)) {
-          mod = {};
-          const keys = [];
-          for (const current of m) {
-            if (typeof current === "string") {
-              keys.push(current);
-            } else if (typeof current === "function") {
-              while (keys.length > 0) {
-                const key = keys.shift();
-                if (key) {
-                  mod[key] = current;
-                }
+      // esm
+      s(bindings, esmId) {
+        let mod = exports;
+        if (typeof esmId === "string" || typeof esmId === "number") {
+          if (!self.__remote_components_turbopack_modules__) {
+            self.__remote_components_turbopack_modules__ = {};
+          }
+          if (!self.__remote_components_turbopack_modules__[bundle]) {
+            self.__remote_components_turbopack_modules__[bundle] = {};
+          }
+          if (!self.__remote_components_turbopack_modules__[bundle][esmId]) {
+            self.__remote_components_turbopack_modules__[bundle][esmId] = {};
+          }
+          mod = self.__remote_components_turbopack_modules__[bundle][esmId];
+        }
+        Object.defineProperty(mod, "__esModule", { value: true });
+        if (Array.isArray(bindings)) {
+          let i = 0;
+          while (i < bindings.length) {
+            const propName = bindings[i++];
+            const tagOrFunc = bindings[i++];
+            if (typeof tagOrFunc === "number") {
+              Object.defineProperty(mod, propName, {
+                value: bindings[i++],
+                enumerable: true,
+                writable: false
+              });
+            } else {
+              const getterFn = tagOrFunc;
+              if (typeof bindings[i] === "function") {
+                const setterFn = bindings[i++];
+                Object.defineProperty(mod, propName, {
+                  get: getterFn,
+                  set: setterFn,
+                  enumerable: true
+                });
+              } else {
+                Object.defineProperty(mod, propName, {
+                  get: getterFn,
+                  enumerable: true
+                });
               }
             }
           }
         }
-        for (const [key, value] of Object.entries(mod)) {
-          exports[key] = value;
-          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
+      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]") {
+        if (typeof mod !== "object") {
+          mod = { default: mod };
+        } else if (!("default" in mod) && // eslint-disable-next-line @typescript-eslint/no-base-to-string
+        mod.toString() !== "[object Module]") {
           try {
             mod.default = mod;
           } catch {
@@ -539,12 +640,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 {
+          moduleExports.exports = value;
+        }
       },
+      // async module initializer
       async a(mod) {
         let result;
         await mod(
@@ -554,12 +664,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
@@ -567,11 +695,6 @@ function handleTurbopackModule(bundle, moduleId, id) {
     moduleExports,
     exports
   );
-  for (const name of exportNames) {
-    if (typeof exports[name] === "function") {
-      exports[name] = exports[name]();
-    }
-  }
   if (self.__remote_components_turbopack_modules__[bundle][moduleId] !== moduleExports.exports) {
     self.__remote_components_turbopack_modules__[bundle][moduleId] = moduleExports.exports;
   }