remote-components 0.0.1

package/dist/next/remote/render-server.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/next/remote/render-server.tsx"],"sourcesContent":["import { headers } from 'next/headers';\nimport { workAsyncStorage } from 'next/dist/server/app-render/work-async-storage.external';\nimport type { Manifest } from './types';\n\n// internal Next.js symbol to access the manifest which is stored in the global scope\nconst SERVER_ACTION_MANIFESTS_SINGLETON = Symbol.for(\n  'next.server.action-manifests',\n);\n\nconst CURRENT_ZONE = process.env.NEXT_PUBLIC_MFE_CURRENT_APPLICATION;\n\n// inject the RSC flight data into the HTML response using <script>\n// the RSC flight data is used to hydrate the remote component on the host\n// this approach is similar to an island architecture on the host\n// the remote component is static HTML until it is hydrated using this RSC flight data\nfunction RemoteComponentData({ name, data }: { name: string; data: string[] }) {\n  return (\n    <script id={`${name}_rsc`}>\n      {data\n        .map(\n          (chunk, i) =>\n            // make the data handling somewhat safe\n            `${i === 0 ? `self[\"${name}\"]=self[\"${name}\"]||[];` : ''}self[\"${name}\"].push(${JSON.stringify(\n              chunk,\n            )});`,\n        )\n        .join('\\n')}\n    </script>\n  );\n}\n\n// a React Server Component to start rendering of the remote component\n// this is a temporary solution until the Next.js team provides a better way to handle remote components\nexport async function RemoteComponent({\n  name = '__vercel_remote_component',\n  children,\n}: {\n  name?: string;\n  children: React.ReactNode;\n}) {\n  const headersList = await headers();\n  const url = headersList.get('Vercel-Remote-Component-Url');\n  const isRemote = url !== null;\n\n  if (!isRemote) {\n    return children;\n  }\n\n  // this URL passed by the remote component consumer is only used to know the public address of the remote component\n  // it is only used to determine if we need to mutate the client module map for now\n\n  const { pathname } = new URL(url);\n  // access the internal Next.js work store to get the active page and route\n  const { page, route } = workAsyncStorage.getStore() ?? { page: pathname };\n\n  // get reference to the manifests from the global scope\n  const manifests = (\n    globalThis as typeof globalThis & {\n      [SERVER_ACTION_MANIFESTS_SINGLETON]: {\n        clientReferenceManifestsPerPage?: Record<string, Manifest>;\n      };\n    }\n  )[SERVER_ACTION_MANIFESTS_SINGLETON];\n  const manifest = manifests.clientReferenceManifestsPerPage?.[route ?? page];\n\n  const self = globalThis as typeof globalThis & {\n    [SERVER_ACTION_MANIFESTS_SINGLETON]?: {\n      clientReferenceManifestsPerPage?: Record<string, Manifest>;\n    };\n    __RSC_MANIFEST?: Record<string, unknown>;\n  };\n\n  // manually handle the internal Next.js manifest\n  self.__RSC_MANIFEST = self.__RSC_MANIFEST || {};\n  self.__RSC_MANIFEST[page] = self.__RSC_MANIFEST[page] || manifest;\n\n  // get the client and SSR module mapping to be able to use client components in the remote component\n  let clientModules = manifest?.clientModules ?? {};\n  const ssrModuleMapping = { ...manifest?.ssrModuleMapping };\n\n  // if the remote component is used in a hosting application, we need to mutate the module map to include the zone\n  clientModules = Object.fromEntries(\n    Object.entries(clientModules).map(([key, value]) => {\n      // append a prefix to each entry in the module map to include the zone of the remote component\n      const remoteId = `[${CURRENT_ZONE}] ${value.id}`;\n      ssrModuleMapping[remoteId] = ssrModuleMapping[value.id];\n      // override the original id with the new remote id\n      return [\n        key,\n        {\n          ...value,\n          id: remoteId,\n          // prepend the current zone to the chunks to handle remote component chunk loading in Webpack\n          // this is required to avoid loading the wrong chunk in the host application\n          chunks: value.chunks.map((chunk) => `[${CURRENT_ZONE}] ${chunk}`),\n          // async: true,\n        },\n      ];\n    }),\n  );\n\n  // dynamically import the runtime specific RSC rendering functions and client component\n  const [{ renderToReadableStream }, { RemoteComponentSSR }] =\n    await Promise.all(\n      process.env.TURBOPACK\n        ? [\n            import('react-server-dom-turbopack/server.edge'),\n            import('./render-client-turbopack'),\n          ]\n        : [\n            import('react-server-dom-webpack/server.edge'),\n            import('./render-client-webpack'),\n          ],\n    );\n  // render the wrapped content of this component (children) into an RSC stream\n  const stream = renderToReadableStream(children, clientModules);\n\n  const data = [];\n  const decoder = new TextDecoder();\n\n  // convert the stream to an array for safe passing to the client\n  for await (const chunk of stream as unknown as AsyncIterable<Uint8Array>) {\n    data.push(decoder.decode(chunk));\n  }\n\n  const runtime = process.env.TURBOPACK ? 'turbopack' : 'webpack';\n  const remoteComponentName = `${name}_${route?.replace(/\\//g, '_')}`;\n\n  return (\n    // wrap the remote component content into a div to know which part of the HTML belongs to the remote component\n    <div\n      data-bundle={CURRENT_ZONE}\n      data-route={route}\n      data-runtime={runtime}\n      id={`${remoteComponentName}_ssr`}\n    >\n      <RemoteComponentSSR\n        data={data}\n        moduleLoading={manifest?.moduleLoading ?? {}}\n        moduleMap={ssrModuleMapping}\n        name={remoteComponentName}\n      />\n      {/* inject RSC flight data as <script> */}\n      <RemoteComponentData data={data} name={remoteComponentName} />\n    </div>\n  );\n}\n"],"mappings":"AAiBI,cAiHA,YAjHA;AAjBJ,SAAS,eAAe;AACxB,SAAS,wBAAwB;AAIjC,MAAM,oCAAoC,OAAO;AAAA,EAC/C;AACF;AAEA,MAAM,eAAe,QAAQ,IAAI;AAMjC,SAAS,oBAAoB,EAAE,MAAM,KAAK,GAAqC;AAC7E,SACE,oBAAC,YAAO,IAAI,GAAG,YACZ,eACE;AAAA,IACC,CAAC,OAAO;AAAA;AAAA,MAEN,GAAG,MAAM,IAAI,SAAS,gBAAgB,gBAAgB,WAAW,eAAe,KAAK;AAAA,QACnF;AAAA,MACF;AAAA;AAAA,EACJ,EACC,KAAK,IAAI,GACd;AAEJ;AAIA,eAAsB,gBAAgB;AAAA,EACpC,OAAO;AAAA,EACP;AACF,GAGG;AACD,QAAM,cAAc,MAAM,QAAQ;AAClC,QAAM,MAAM,YAAY,IAAI,6BAA6B;AACzD,QAAM,WAAW,QAAQ;AAEzB,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAKA,QAAM,EAAE,SAAS,IAAI,IAAI,IAAI,GAAG;AAEhC,QAAM,EAAE,MAAM,MAAM,IAAI,iBAAiB,SAAS,KAAK,EAAE,MAAM,SAAS;AAGxE,QAAM,YACJ,WAKA,iCAAiC;AACnC,QAAM,WAAW,UAAU,kCAAkC,SAAS,IAAI;AAE1E,QAAM,OAAO;AAQb,OAAK,iBAAiB,KAAK,kBAAkB,CAAC;AAC9C,OAAK,eAAe,IAAI,IAAI,KAAK,eAAe,IAAI,KAAK;AAGzD,MAAI,gBAAgB,UAAU,iBAAiB,CAAC;AAChD,QAAM,mBAAmB,EAAE,GAAG,UAAU,iBAAiB;AAGzD,kBAAgB,OAAO;AAAA,IACrB,OAAO,QAAQ,aAAa,EAAE,IAAI,CAAC,CAAC,KAAK,KAAK,MAAM;AAElD,YAAM,WAAW,IAAI,iBAAiB,MAAM;AAC5C,uBAAiB,QAAQ,IAAI,iBAAiB,MAAM,EAAE;AAEtD,aAAO;AAAA,QACL;AAAA,QACA;AAAA,UACE,GAAG;AAAA,UACH,IAAI;AAAA;AAAA;AAAA,UAGJ,QAAQ,MAAM,OAAO,IAAI,CAAC,UAAU,IAAI,iBAAiB,OAAO;AAAA;AAAA,QAElE;AAAA,MACF;AAAA,IACF,CAAC;AAAA,EACH;AAGA,QAAM,CAAC,EAAE,uBAAuB,GAAG,EAAE,mBAAmB,CAAC,IACvD,MAAM,QAAQ;AAAA,IACZ,QAAQ,IAAI,YACR;AAAA,MACE,OAAO,wCAAwC;AAAA,MAC/C,OAAO,2BAA2B;AAAA,IACpC,IACA;AAAA,MACE,OAAO,sCAAsC;AAAA,MAC7C,OAAO,yBAAyB;AAAA,IAClC;AAAA,EACN;AAEF,QAAM,SAAS,uBAAuB,UAAU,aAAa;AAE7D,QAAM,OAAO,CAAC;AACd,QAAM,UAAU,IAAI,YAAY;AAGhC,mBAAiB,SAAS,QAAgD;AACxE,SAAK,KAAK,QAAQ,OAAO,KAAK,CAAC;AAAA,EACjC;AAEA,QAAM,UAAU,QAAQ,IAAI,YAAY,cAAc;AACtD,QAAM,sBAAsB,GAAG,QAAQ,OAAO,QAAQ,OAAO,GAAG;AAEhE;AAAA;AAAA,IAEE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,cAAY;AAAA,QACZ,gBAAc;AAAA,QACd,IAAI,GAAG;AAAA,QAEP;AAAA;AAAA,YAAC;AAAA;AAAA,cACC;AAAA,cACA,eAAe,UAAU,iBAAiB,CAAC;AAAA,cAC3C,WAAW;AAAA,cACX,MAAM;AAAA;AAAA,UACR;AAAA,UAEA,oBAAC,uBAAoB,MAAY,MAAM,qBAAqB;AAAA;AAAA;AAAA,IAC9D;AAAA;AAEJ;","names":[]}

package/dist/next/remote/server.cjs

@@ -0,0 +1,29 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var server_exports = {};
+__export(server_exports, {
+  RemoteComponent: () => import_render_server.RemoteComponent
+});
+module.exports = __toCommonJS(server_exports);
+var import_render_server = require("./render-server");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RemoteComponent
+});
+//# sourceMappingURL=server.cjs.map

package/dist/next/remote/server.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/next/remote/server.ts"],"sourcesContent":["export { RemoteComponent } from './render-server';\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAgC;","names":[]}

package/dist/next/remote/server.d.ts

@@ -0,0 +1,3 @@
+export { RemoteComponent } from './render-server.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/next/remote/server.js

@@ -0,0 +1,5 @@
+import { RemoteComponent } from "./render-server";
+export {
+  RemoteComponent
+};
+//# sourceMappingURL=server.js.map

package/dist/next/remote/server.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/next/remote/server.ts"],"sourcesContent":["export { RemoteComponent } from './render-server';\n"],"mappings":"AAAA,SAAS,uBAAuB;","names":[]}

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

@@ -0,0 +1,558 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/shared/client/remote-component.ts
+var remote_component_exports = {};
+__export(remote_component_exports, {
+  DEFAULT_ROUTE: () => DEFAULT_ROUTE,
+  REMOTE_COMPONENT_PREFIX: () => REMOTE_COMPONENT_PREFIX,
+  REMOTE_COMPONENT_REGEX: () => REMOTE_COMPONENT_REGEX,
+  RUNTIME_TURBOPACK: () => RUNTIME_TURBOPACK,
+  RUNTIME_WEBPACK: () => RUNTIME_WEBPACK,
+  createRSCStream: () => createRSCStream,
+  fixPayload: () => fixPayload,
+  getBundleKey: () => getBundleKey,
+  loadRemoteComponent: () => loadRemoteComponent,
+  loadScripts: () => loadScripts,
+  setupWebpackRuntime: () => setupWebpackRuntime
+});
+module.exports = __toCommonJS(remote_component_exports);
+
+// src/shared/client/component-loader.ts
+var React = __toESM(require("react"), 1);
+var ReactDOM = __toESM(require("react-dom"), 1);
+var JSXDevRuntime = __toESM(require("react/jsx-dev-runtime"), 1);
+var JSXRuntime = __toESM(require("react/jsx-runtime"), 1);
+
+// src/shared/webpack/shared-modules.ts
+function applySharedModules(bundle, resolve) {
+  const self = globalThis;
+  if (self.__remote_webpack_require__?.[bundle]) {
+    const modulePaths = Object.keys(
+      self.__remote_webpack_module_map__?.[bundle] ?? self.__remote_webpack_require__[bundle].m ?? {}
+    );
+    for (const [key, value] of Object.entries(resolve)) {
+      const ids = modulePaths.filter((p) => p.includes(key));
+      for (let id of ids) {
+        const webpackBundle = self.__remote_webpack_require__[bundle];
+        if (webpackBundle.m) {
+          if (self.__remote_webpack_module_map__?.[bundle]?.[id]) {
+            id = `${self.__remote_webpack_module_map__[bundle][id]}`;
+          }
+          webpackBundle.m[id] = (module2) => {
+            module2.exports = value;
+          };
+        }
+      }
+    }
+  }
+}
+
+// src/shared/webpack/next-client-pages-loader.ts
+function nextClientPagesLoader(bundle, route, styleContainer = document.head) {
+  const self = globalThis;
+  const nextCssOriginal = document.getElementById("__next_css__DO_NOT_USE__");
+  if (nextCssOriginal) {
+    nextCssOriginal.parentNode?.removeChild(nextCssOriginal);
+  }
+  const nextCss = document.createElement("noscript");
+  nextCss.id = "__next_css__DO_NOT_USE__";
+  const lastNode = document.head.childNodes[document.head.childNodes.length - 1];
+  document.head.appendChild(nextCss);
+  const componentLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}`)
+  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=${encodeURIComponent(route)}`)
+  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? ""] ?? -1;
+  const appLoaderChunk = Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
+  ) ?? Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? self.__remote_webpack_module_map__?.[bundle]?.[Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/webpack/loaders/next-client-pages-loader.js") && key.includes(`page=%2F_app`)
+  ) ?? Object.keys(self.__remote_webpack_module_map__[bundle] ?? {}).find(
+    (key) => key.includes("/next/dist/client/page-loader.js")
+  ) ?? ""] ?? -1;
+  if (!(componentLoaderChunk && appLoaderChunk)) {
+    throw new Error(
+      `Next.js client pages loader not found in bundle "${bundle}"`
+    );
+  }
+  const __NEXT_P_ORIGINAL = self.__NEXT_P;
+  const selfOriginal = self;
+  delete selfOriginal.__NEXT_P;
+  self.__remote_webpack_require__?.[bundle]?.(componentLoaderChunk);
+  if (typeof appLoaderChunk === "string" || typeof appLoaderChunk === "number" && appLoaderChunk !== -1) {
+    self.__remote_webpack_require__?.[bundle]?.(appLoaderChunk);
+  }
+  if (self.__NEXT_P) {
+    const [, componentLoader] = self.__NEXT_P[0] ?? [
+      void 0,
+      () => ({ default: null })
+    ];
+    const [, appLoader] = self.__NEXT_P[2] ?? [
+      void 0,
+      () => ({
+        default: null
+      })
+    ];
+    const { default: Component } = componentLoader();
+    const { default: App } = appLoader();
+    const cssRE = /\.s?css$/;
+    Object.keys(self.__remote_webpack_require__?.[bundle]?.m ?? {}).filter((id) => cssRE.test(id)).forEach((id) => {
+      self.__remote_webpack_require__?.[bundle]?.(id);
+    });
+    Object.keys(self.__remote_webpack_module_map__?.[bundle] ?? {}).filter((path) => cssRE.test(path)).forEach((path) => {
+      const id = self.__remote_webpack_module_map__?.[bundle]?.[path];
+      if (id) {
+        self.__remote_webpack_require__?.[bundle]?.(id);
+      }
+    });
+    if (styleContainer) {
+      let node = nextCss.previousSibling;
+      while (node && node !== lastNode) {
+        styleContainer.appendChild(node);
+        node = nextCss.previousSibling;
+      }
+    }
+    delete self.__NEXT_P;
+    self.__NEXT_P = __NEXT_P_ORIGINAL;
+    if (nextCssOriginal) {
+      nextCssOriginal.parentNode?.appendChild(nextCssOriginal);
+    }
+    return { Component, App };
+  }
+  return { Component: null, App: null };
+}
+
+// src/shared/client/script-loader.ts
+async function loadScripts(scripts) {
+  await Promise.all(
+    scripts.map((script) => {
+      return new Promise((resolve, reject) => {
+        const newSrc = new URL(
+          // remove the remote component bundle name identifier from the script src
+          script.src.replace(/\/_next\/\[.+\] /, "/_next/"),
+          location.origin
+        ).href;
+        const newScript = document.createElement("script");
+        newScript.onload = () => {
+          resolve();
+        };
+        newScript.onerror = () => {
+          reject(
+            new Error(
+              `Failed to load script ${script.src} for remote component`
+            )
+          );
+        };
+        newScript.src = newSrc;
+        newScript.async = true;
+        document.head.appendChild(newScript);
+      });
+    })
+  );
+}
+function loadCSS(url) {
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = url;
+  document.head.appendChild(link);
+}
+
+// src/shared/client/const.ts
+var DEFAULT_ROUTE = "/";
+var RUNTIME_WEBPACK = "webpack";
+var RUNTIME_TURBOPACK = "turbopack";
+var REMOTE_COMPONENT_PREFIX = "[remote-component-";
+var REMOTE_COMPONENT_REGEX = /(?<prefix>.*)?\[(?<bundle>remote-component-(?:[^\]]+))\](?:%20| )(?<id>.+)/;
+function getBundleKey(bundle) {
+  return bundle.replace(/-/g, "_");
+}
+
+// src/shared/client/webpack-adapter.ts
+async function setupWebpackRuntime(runtime, scripts = [], bundle, shared = {}, remoteShared = {}) {
+  const self = globalThis;
+  self.__DISABLE_WEBPACK_EXEC__ = true;
+  await initializeSharedModules(bundle ?? "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__;
+      self.__original_webpack_require__ = self.__webpack_require__;
+    }
+    self.__webpack_chunk_load__ = createChunkLoader(runtime);
+    self.__webpack_require__ = createModuleRequire(runtime);
+    self.__webpack_require_type__ = runtime;
+    if (self.__remote_webpack_require__) {
+      const remoteBundle = bundle ?? "default";
+      self.__remote_webpack_require__[remoteBundle] = self.__webpack_require__;
+      self.__remote_webpack_require__[remoteBundle].type = "turbopack";
+    }
+  }
+  await Promise.all(
+    scripts.map((script) => {
+      if (script.src) {
+        return self.__webpack_chunk_load__?.(script.src, bundle);
+      }
+      return Promise.resolve(void 0);
+    })
+  );
+}
+function createChunkLoader(runtime) {
+  return function __turbopack_chunk_load__(chunkId, scriptBundle) {
+    if (runtime === RUNTIME_WEBPACK) {
+      return Promise.resolve(void 0);
+    }
+    const {
+      bundle,
+      id: path,
+      prefix
+    } = REMOTE_COMPONENT_REGEX.exec(chunkId)?.groups ?? {
+      bundle: scriptBundle ?? "",
+      id: chunkId
+    };
+    const url = new URL(
+      path ? `${prefix ?? ""}${path}`.replace(
+        /(?<char>[^:])(?<double>\/\/)/g,
+        "$1/"
+      ) : "/",
+      location.origin
+    ).href;
+    if (url.endsWith(".css")) {
+      loadCSS(url);
+      return;
+    }
+    return new Promise((resolve, reject) => {
+      fetch(url).then((res) => res.text()).then((code) => {
+        if (code.includes("globalThis.TURBOPACK")) {
+          return handleTurbopackChunk(code, bundle ?? "", url);
+        }
+      }).then(resolve).catch(reject);
+    });
+  };
+}
+async function handleTurbopackChunk(code, bundle, url) {
+  if (code.includes("/next/dist/client/app-next-turbopack.js") && code.includes("importScripts(...self.TURBOPACK_NEXT_CHUNK_URLS")) {
+    const preloadLinks = document.querySelectorAll(
+      `link[rel="preload"][href="${new URL(url).pathname}"]`
+    );
+    preloadLinks.forEach((preloadLink) => preloadLink.remove());
+    return;
+  }
+  const self = globalThis;
+  const bundleKey = getBundleKey(bundle);
+  const transformedCode = code.replace(/globalThis\.TURBOPACK/g, `globalThis.TURBOPACK_${bundleKey}`).replace(
+    /TURBOPACK_WORKER_LOCATION/g,
+    `TURBOPACK_WORKER_LOCATION_${bundleKey}`
+  ).replace(
+    /TURBOPACK_NEXT_CHUNK_URLS/g,
+    `TURBOPACK_NEXT_CHUNK_URLS_${bundleKey}`
+  ).replace(
+    /TURBOPACK_CHUNK_UPDATE_LISTENERS/g,
+    `TURBOPACK_CHUNK_UPDATE_LISTENERS_${bundleKey}`
+  ).replace(/__next_require__/g, `__${bundleKey}_next_require__`).replace(
+    /\/\/# sourceMappingURL=(?<name>.+)\._\.js\.map/g,
+    `//# sourceMappingURL=${new URL(".", new URL(url)).pathname}$1._.js.map`
+  );
+  await new Promise((scriptResolve, scriptReject) => {
+    const blob = new Blob([transformedCode], {
+      type: "application/javascript"
+    });
+    const scriptUrl = URL.createObjectURL(blob);
+    const script = document.createElement("script");
+    script.src = scriptUrl;
+    script.async = true;
+    script.onload = () => {
+      URL.revokeObjectURL(scriptUrl);
+      scriptResolve(void 0);
+    };
+    script.onerror = (error) => {
+      URL.revokeObjectURL(scriptUrl);
+      scriptReject(
+        new Error(
+          `Failed to load script: ${error instanceof Error ? error.message : String(error)}`
+        )
+      );
+    };
+    document.head.appendChild(script);
+  });
+  const chunkLists = self[`TURBOPACK_${bundleKey}_CHUNK_LISTS`];
+  const loadChunkLists = [];
+  while (chunkLists?.length) {
+    const { chunks } = chunkLists.shift() ?? { chunks: [] };
+    if (chunks.length > 0) {
+      chunks.forEach((id) => {
+        const chunkLoadResult = self.__webpack_chunk_load__?.(
+          `[${bundle}] ${url.slice(0, url.indexOf("/_next"))}/_next/${id}`
+        );
+        if (chunkLoadResult) {
+          loadChunkLists.push(chunkLoadResult);
+        }
+      });
+    }
+  }
+  if (loadChunkLists.length > 0) {
+    await Promise.all(loadChunkLists);
+  }
+}
+function createModuleRequire(runtime) {
+  return (id) => {
+    const self = globalThis;
+    try {
+      const { bundle, id: moduleId } = id.match(REMOTE_COMPONENT_REGEX)?.groups ?? { bundle: "", id };
+      if (runtime === RUNTIME_WEBPACK && bundle && moduleId) {
+        return self.__remote_webpack_require__?.[bundle]?.(moduleId);
+      }
+      const sharedModule = getSharedModule(bundle ?? "default", moduleId ?? id);
+      if (sharedModule) {
+        return sharedModule;
+      }
+      if (bundle && moduleId) {
+        return handleTurbopackModule(bundle, moduleId, id);
+      }
+      throw new Error(`Module ${id} not found`);
+    } catch {
+      return self.__original_webpack_require__?.(id);
+    }
+  };
+}
+function initializeSharedModules(bundle, shared = {}, remoteShared = {}) {
+  const self = globalThis;
+  self.__remote_shared_modules__ = self.__remote_shared_modules__ ?? {};
+  if (!self.__remote_shared_modules__[bundle]) {
+    self.__remote_shared_modules__[bundle] = {};
+  }
+  return Promise.all(
+    Object.entries(remoteShared).map(async ([id, module2]) => {
+      if (self.__remote_shared_modules__?.[bundle]) {
+        self.__remote_shared_modules__[bundle][id.replace("[app-ssr]", "[app-client]")] = await (shared[module2] ?? (() => {
+          console.warn(
+            `Shared dependency not found for "${bundle}": ${module2}`
+          );
+          return Promise.resolve({});
+        }))();
+      }
+    })
+  );
+}
+function getSharedModule(bundle, id) {
+  const self = globalThis;
+  for (const [key, value] of Object.entries(
+    self.__remote_shared_modules__?.[bundle] ?? {}
+  )) {
+    if (id.includes(key)) {
+      return value;
+    }
+  }
+  return null;
+}
+function handleTurbopackModule(bundle, moduleId, id) {
+  const self = globalThis;
+  const bundleKey = getBundleKey(bundle);
+  const modules = self[`TURBOPACK_${bundleKey}`]?.find((mod) => moduleId in mod[1])?.[1];
+  const moduleInit = modules?.[moduleId];
+  if (typeof moduleInit !== "function") {
+    throw new Error(
+      `Module ${id} not found in bundle ${bundle} with id ${moduleId}`
+    );
+  }
+  const exports = {};
+  moduleInit({
+    // HMR not implemented for Remote Components
+    k: {
+      register() {
+      },
+      registerExports() {
+      },
+      signature() {
+        return () => {
+        };
+      }
+    },
+    s(m) {
+      for (const [key, value] of Object.entries(m)) {
+        exports[key] = value;
+      }
+    },
+    i(iid) {
+      return self.__webpack_require__?.(`[${bundle}] ${iid}`);
+    },
+    r(rid) {
+      return self.__webpack_require__?.(`[${bundle}] ${rid}`);
+    },
+    m: {
+      exports
+    }
+  });
+  for (const [key, value] of Object.entries(exports)) {
+    if (typeof value === "function") {
+      exports[key] = value();
+    }
+  }
+  return exports;
+}
+
+// src/shared/client/rsc.ts
+function fixPayload(payload) {
+  if (Array.isArray(payload)) {
+    if (payload[0] === "$") {
+      fixPayload(payload[3]);
+      if (payload.length === 4) {
+        payload.push(null, null, 1);
+      }
+    } else {
+      for (const item of payload) {
+        fixPayload(item);
+      }
+    }
+  } else if (typeof payload === "object" && payload !== null) {
+    for (const key in payload) {
+      fixPayload(payload[key]);
+    }
+  }
+}
+function createRSCStream(name, data) {
+  return new ReadableStream({
+    type: "bytes",
+    start(controller) {
+      const encoder = new TextEncoder();
+      const self = globalThis;
+      if (!self[name] && data.length > 0) {
+        data.forEach((chunk) => {
+          const lines = chunk.split("\n");
+          for (const line of lines) {
+            const match = /\.push\("(?<rsc>.*)"\);$/.exec(line);
+            if (match?.groups?.rsc) {
+              self[name] = self[name] ?? [];
+              self[name].push(JSON.parse(`"${match.groups.rsc}"`));
+            }
+          }
+        });
+      }
+      const allChunks = (self[name] ?? [`0:[null]
+`]).join("");
+      allChunks.split("\n").forEach((chunk) => {
+        if (chunk.length > 0) {
+          const { id, prefix, payload } = /(?<id>[0-9a-zA-Z]+):(?<prefix>[A-Z])?(?<payload>\[.*\])/.exec(
+            chunk
+          )?.groups ?? {};
+          if (payload) {
+            const jsonPayload = JSON.parse(payload);
+            fixPayload(jsonPayload);
+            const reconstruct = `${id}:${prefix ?? ""}${JSON.stringify(jsonPayload)}`;
+            controller.enqueue(encoder.encode(`${reconstruct}
+`));
+          } else {
+            controller.enqueue(encoder.encode(`${chunk}
+`));
+          }
+        } else {
+          controller.enqueue(encoder.encode(`${chunk}
+`));
+        }
+      });
+      controller.close();
+    }
+  });
+}
+
+// src/shared/client/component-loader.ts
+async function loadRemoteComponent({
+  name,
+  bundle,
+  route = "/",
+  runtime = "webpack",
+  data,
+  nextData,
+  scripts = [],
+  shared = {},
+  remoteShared = {}
+}) {
+  try {
+    if (runtime === "webpack") {
+      await loadScripts(scripts);
+    }
+    await setupWebpackRuntime(runtime, scripts, bundle, shared, remoteShared);
+    if (bundle) {
+      const resolve = {
+        "/react/index.js": React,
+        "/react/jsx-dev-runtime.js": JSXDevRuntime,
+        "/react/jsx-runtime.js": JSXRuntime,
+        "/react-dom/index.js": ReactDOM
+      };
+      applySharedModules(bundle, resolve);
+    }
+    if (data.length > 0) {
+      return await loadRSCComponent(name, data);
+    } else if (nextData) {
+      return loadNextPagesComponent(bundle, route, nextData, name);
+    }
+    throw new Error(`No valid data provided for remote component ${name}`);
+  } catch (error) {
+    return {
+      component: null,
+      error: error instanceof Error ? error : new Error(String(error))
+    };
+  }
+}
+async function loadRSCComponent(name, data) {
+  const { createFromReadableStream } = await import("next/dist/compiled/react-server-dom-webpack/client.browser");
+  const stream = createRSCStream(name, data);
+  const component = createFromReadableStream(stream);
+  return { component };
+}
+function loadNextPagesComponent(bundle, route, nextData, name) {
+  const { Component, App } = nextClientPagesLoader(bundle, route);
+  if (!Component) {
+    throw new Error(
+      `Remote component ${name} is trying to load the component for route ${route} but it is not available.`
+    );
+  }
+  const component = App ? React.createElement(App, { Component, ...nextData.props }) : React.createElement(Component, nextData.props);
+  return { component };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_ROUTE,
+  REMOTE_COMPONENT_PREFIX,
+  REMOTE_COMPONENT_REGEX,
+  RUNTIME_TURBOPACK,
+  RUNTIME_WEBPACK,
+  createRSCStream,
+  fixPayload,
+  getBundleKey,
+  loadRemoteComponent,
+  loadScripts,
+  setupWebpackRuntime
+});
+//# sourceMappingURL=remote-component.cjs.map