remote-components 0.0.47 → 0.0.49

package/dist/{types-6e4ba234.d.ts → types-cbe44b51.d.ts}

@@ -42,17 +42,51 @@ interface RemoteComponentMetadata {
     id: string;
     type: 'nextjs' | 'remote-component' | 'unknown';
 }
+/**
+ * Options object passed to hook functions containing abort capabilities.
+ * Uses standard AbortController/AbortSignal for compatibility with Web APIs.
+ *
+ * @example
+ * // Abort on redirect
+ * component.onResponse = (url, response, { signal, abort }) => {
+ *   if (response.redirected) {
+ *     abort();
+ *   }
+ * };
+ *
+ * @example
+ * // Check if already aborted
+ * component.onRequest = (url, init, { signal }) => {
+ *   if (signal.aborted) return;
+ *   // ...
+ * };
+ *
+ * @example
+ * // Pass signal to fetch or other APIs
+ * component.onRequest = async (url, init, { signal }) => {
+ *   const data = await fetch('/api/check', { signal });
+ *   // ...
+ * };
+ */
+interface HookOptions {
+    /** Standard AbortSignal - can be passed to fetch and other Web APIs */
+    signal: AbortSignal;
+    /** Abort loading - prevents further processing and DOM attachment */
+    abort(reason?: unknown): void;
+}
 /**
  * Hook function that intercepts remote component fetch requests.
- * Can be used to modify request options, provide a custom response, or inspect the request.
+ * Can be used to modify request options, provide a custom response, inspect the request,
+ * or abort loading.
  *
  * @param url - The URL being fetched
  * @param init - The fetch init options being used
+ * @param options - Options object containing the abort signal
  * @returns Optional Response to use instead of fetching, or void/undefined to proceed with normal fetch
  *
  * @example
  * // Log all remote component requests
- * const onRequest = async (url, init) => {
+ * const onRequest = async (url, init, { abort }) => {
  *   console.log('Fetching remote component from:', url.href);
  * };
  *
@@ -70,21 +104,32 @@ interface RemoteComponentMetadata {
  *     return new Response(cached);
  *   }
  * };
+ *
+ * @example
+ * // Block certain domains
+ * const onRequest = async (url, init, { abort }) => {
+ *   if (isBlockedDomain(url)) {
+ *     abort('Domain is blocked');
+ *   }
+ * };
  */
-type OnRequestHook = (url: URL, init: RequestInit) => Promise<Response | undefined> | Response | undefined;
+type OnRequestHook = (url: URL, init: RequestInit, options: HookOptions) => Promise<Response | undefined> | Response | undefined;
 /**
  * Hook function that is called after a remote component fetch completes.
- * Can be used to inspect the response, check for redirects, or transform the response.
+ * Can be used to inspect the response, check for redirects, transform the response,
+ * or abort loading.
  *
  * @param url - The original URL that was requested
  * @param response - The Response object from the fetch
+ * @param options - Options object containing the abort signal
  * @returns Optional Response to use instead of the original, or void/undefined to use the original response
  *
  * @example
- * // Check for redirects
- * const onResponse = async (url, response) => {
+ * // Check for redirects and abort
+ * const onResponse = async (url, response, { abort }) => {
  *   if (response.redirected) {
  *     console.log(`Redirected from ${url.href} to ${response.url}`);
+ *     abort();
  *   }
  * };
  *
@@ -102,8 +147,17 @@ type OnRequestHook = (url: URL, init: RequestInit) => Promise<Response | undefin
  *   const modified = text.replace(/foo/g, 'bar');
  *   return new Response(modified, response);
  * };
+ *
+ * @example
+ * // Abort on redirect to legacy routes
+ * const onResponse = async (url, response, { abort }) => {
+ *   if (response.redirected && isLegacyRoute(response.url)) {
+ *     window.location.href = toLegacyUrl(response.url);
+ *     abort(); // Abort rendering - no flash!
+ *   }
+ * };
  */
-type OnResponseHook = (url: URL, response: Response) => Promise<Response | undefined> | Response | undefined;
+type OnResponseHook = (url: URL, response: Response, options: HookOptions) => Promise<Response | undefined> | Response | undefined;
 interface NextData {
     props: {
         pageProps: Record<string, unknown>;

package/dist/webpack.cjs

@@ -0,0 +1,274 @@
+"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);
+
+// src/webpack/index.ts
+var webpack_exports = {};
+__export(webpack_exports, {
+  RemoteComponentsWebpackPlugin: () => RemoteComponentsWebpackPlugin
+});
+module.exports = __toCommonJS(webpack_exports);
+
+// src/next/config/webpack/plugins/conditional-exec.ts
+var ConditionalExecPlugin = class {
+  appName;
+  constructor(appName) {
+    this.appName = appName;
+  }
+  apply(compiler) {
+    const { Compilation, sources } = compiler.webpack;
+    compiler.hooks.thisCompilation.tap(
+      "ConditionalExecPlugin",
+      (compilation) => {
+        compilation.hooks.processAssets.tap(
+          {
+            name: "ConditionalExecPlugin",
+            stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
+          },
+          (assets) => {
+            for (const [name, source] of Object.entries(assets)) {
+              if (name.endsWith(".js")) {
+                const patchedSource = source.source().toString().replace(
+                  `var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))`,
+                  `var __webpack_exec__ = (moduleId) => { if (globalThis.__DISABLE_WEBPACK_EXEC__ && globalThis.__DISABLE_WEBPACK_EXEC__["${this.appName}"]) return; return __webpack_require__(__webpack_require__.s = moduleId); }`
+                );
+                compilation.updateAsset(
+                  name,
+                  new sources.RawSource(patchedSource)
+                );
+              }
+            }
+          }
+        );
+      }
+    );
+  }
+};
+
+// src/next/config/webpack/plugins/module-id-embed.ts
+var import_node_path = require("path");
+
+// src/next/config/webpack/plugins/module-id-embed-runtime-module.ts
+function createModuleIdEmbedRuntimeModule(webpack) {
+  return class ModuleIdEmbedRuntimeModule extends webpack.RuntimeModule {
+    appName;
+    moduleMap;
+    constructor(appName, moduleMap) {
+      super("remote-webpack-module-id-embed");
+      this.appName = appName;
+      this.moduleMap = moduleMap;
+    }
+    generate() {
+      return `globalThis.__remote_webpack_module_map__ = globalThis.__remote_webpack_module_map__ || {}; globalThis.__remote_webpack_module_map__["${this.appName}"] = ${JSON.stringify(this.moduleMap)};`;
+    }
+  };
+}
+
+// src/next/config/webpack/plugins/module-id-embed.ts
+var cwd = process.cwd();
+var ModuleIdEmbedPlugin = class {
+  appName;
+  includeAllModules;
+  constructor(appName, options) {
+    this.appName = appName;
+    this.includeAllModules = options?.includeAllModules ?? false;
+  }
+  apply(compiler) {
+    const ModuleIdEmbedRuntimeModule = createModuleIdEmbedRuntimeModule(
+      compiler.webpack
+    );
+    compiler.hooks.thisCompilation.tap("ModuleIdEmbedPlugin", (compilation) => {
+      const moduleMap = {};
+      compilation.hooks.runtimeRequirementInTree.for(compiler.webpack.RuntimeGlobals.require).tap("ModuleIdEmbedPlugin", (chunk, set) => {
+        for (const [key, entry] of compilation.entrypoints) {
+          for (const entryChunk of entry.chunks) {
+            if (key.includes("nextjs-pages-remote")) {
+              for (const mod of compilation.chunkGraph.getChunkModulesIterable(
+                entryChunk
+              )) {
+                const id = compilation.chunkGraph.getModuleId(mod);
+                const normalModule = mod;
+                if (id && (normalModule.resource || normalModule.request)) {
+                  moduleMap[(0, import_node_path.relative)(
+                    cwd,
+                    normalModule.resource || normalModule.request
+                  )] = id;
+                }
+              }
+            }
+          }
+        }
+        for (const mod of compilation.modules) {
+          const id = compilation.chunkGraph.getModuleId(mod);
+          if (id && (this.includeAllModules || mod.layer?.endsWith("browser"))) {
+            const normalModule = mod;
+            if (normalModule.resource || normalModule.request) {
+              moduleMap[(0, import_node_path.relative)(cwd, normalModule.resource || normalModule.request)] = id;
+            }
+          }
+        }
+        if (Object.keys(moduleMap).length > 0) {
+          compilation.addRuntimeModule(
+            chunk,
+            new ModuleIdEmbedRuntimeModule(
+              this.appName,
+              moduleMap
+            )
+          );
+          set.add(compiler.webpack.RuntimeGlobals.require);
+        }
+      });
+    });
+  }
+};
+
+// src/next/config/webpack/plugins/patch-require.ts
+var PatchRequirePlugin = class {
+  appName;
+  constructor(appName) {
+    this.appName = appName;
+  }
+  apply(compiler) {
+    const { sources } = compiler.webpack;
+    compiler.hooks.thisCompilation.tap("PatchRequirePlugin", (compilation) => {
+      compilation.mainTemplate.hooks.requireExtensions.tap(
+        "PatchRequirePlugin",
+        (source) => {
+          return new sources.ConcatSource(
+            source,
+            `const __webpack_require_orig__ = __webpack_require__;
+const REMOTE_RE = /\\[(?<bundle>[^\\]]+)\\] (?<id>.*)/;
+__webpack_require__ = function __remote_webpack_require__(remoteId) {
+    const match = REMOTE_RE.exec(remoteId);
+    const bundle = match?.groups?.bundle;
+    const id = match?.groups?.id;
+    if (!(id && bundle)) {
+        return __webpack_require_orig__(remoteId);
+    }
+    if (typeof self.__remote_webpack_require__?.[bundle] !== 'function') {
+        const error = new Error(\`Remote Components are not available in "\${bundle}". Did you forget to wrap the Next.js config with \\\`withRemoteComponents\\\` on both host and remote?\`);
+        error.name = 'RemoteComponentsError';
+        error.code = 'REMOTE_COMPONENTS_ERROR';
+        throw error;
+    }
+    return self.__remote_webpack_require__[bundle](self.__remote_webpack_require__[bundle].type === 'turbopack' ? remoteId : id);
+};
+Object.assign(__webpack_require__, __webpack_require_orig__);
+const __webpack_require_l__ = __webpack_require__.l;
+__webpack_require__.l = function __remote_webpack_require_l__(url, done, key, chunkId) {
+    const match = REMOTE_RE.exec(chunkId);
+    const bundle = match?.groups?.bundle;
+    const id = match?.groups?.id;
+    if (!(id && bundle)) {
+        return __webpack_require_l__(new URL(url, globalThis.__remote_bundle_url__?.["${this.appName}"] ?? location.origin).href, done, key, chunkId);
+    }
+    return done();
+};
+const __webpack_require_o__ = __webpack_require__.o;
+__webpack_require__.o = function __remote_webpack_require_o__(installedChunks, chunkId) {
+    const match = REMOTE_RE.exec(chunkId);
+    const bundle = match?.groups?.bundle;
+    const id = match?.groups?.id;
+    if (!(id && bundle)) {
+        return __webpack_require_o__(installedChunks, chunkId);
+    }
+    return installedChunks[chunkId] = 0;
+};
+const __webpack_require_e__ = __webpack_require__.e;
+__webpack_require__.e = function __remote_webpack_require_e__(chunkId) {
+    const match = REMOTE_RE.exec(chunkId);
+    const bundle = match?.groups?.bundle;
+    const id = match?.groups?.id;
+    if (!(id && bundle)) {
+        return __webpack_require_e__(chunkId);
+    }
+    return Promise.resolve([]);
+};`
+          ).source().toString();
+        }
+      );
+    });
+  }
+};
+
+// src/next/config/webpack/plugins/remote-webpack-require-runtime-module.ts
+function createRemoteWebpackRequireRuntimeModule(webpack) {
+  return class RemoteWebpackRequireRuntimeModule extends webpack.RuntimeModule {
+    appName;
+    constructor(appName) {
+      super("remote-webpack-require");
+      this.appName = appName;
+    }
+    generate() {
+      return `globalThis.__remote_webpack_require__ = globalThis.__remote_webpack_require__ || {}; globalThis.__remote_webpack_require__["${this.appName}"] = __webpack_require__;`;
+    }
+  };
+}
+
+// src/next/config/webpack/plugins/remote-webpack-require.ts
+var RemoteWebpackRequirePlugin = class {
+  appName;
+  constructor(appName) {
+    this.appName = appName;
+  }
+  apply(compiler) {
+    const RemoteWebpackRequireRuntimeModule = createRemoteWebpackRequireRuntimeModule(compiler.webpack);
+    compiler.hooks.thisCompilation.tap(
+      "RemoteWebpackRequirePlugin",
+      (compilation) => {
+        compilation.hooks.runtimeRequirementInTree.for("__webpack_require__").tap("RemoteWebpackRequirePlugin", (chunk) => {
+          compilation.addRuntimeModule(
+            chunk,
+            new RemoteWebpackRequireRuntimeModule(
+              this.appName
+            )
+          );
+        });
+      }
+    );
+  }
+};
+
+// src/webpack/index.ts
+var RemoteComponentsWebpackPlugin = class {
+  appName;
+  chunkLoadingGlobal;
+  constructor({
+    appName,
+    chunkLoadingGlobal
+  }) {
+    this.appName = appName;
+    this.chunkLoadingGlobal = chunkLoadingGlobal;
+  }
+  apply(compiler) {
+    new RemoteWebpackRequirePlugin(this.appName).apply(compiler);
+    new ModuleIdEmbedPlugin(this.appName, { includeAllModules: true }).apply(
+      compiler
+    );
+    new ConditionalExecPlugin(this.appName).apply(compiler);
+    new PatchRequirePlugin(this.appName).apply(compiler);
+    if (compiler.options.output) {
+      compiler.options.output.chunkLoadingGlobal = this.chunkLoadingGlobal ?? compiler.options.output.chunkLoadingGlobal ?? `__remote_chunk_loading_global_${this.appName}__`;
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RemoteComponentsWebpackPlugin
+});
+//# sourceMappingURL=webpack.cjs.map

package/dist/webpack.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/webpack/index.ts","../src/next/config/webpack/plugins/conditional-exec.ts","../src/next/config/webpack/plugins/module-id-embed.ts","../src/next/config/webpack/plugins/module-id-embed-runtime-module.ts","../src/next/config/webpack/plugins/patch-require.ts","../src/next/config/webpack/plugins/remote-webpack-require-runtime-module.ts","../src/next/config/webpack/plugins/remote-webpack-require.ts"],"sourcesContent":["import type { Compiler } from 'webpack';\nimport { ConditionalExecPlugin } from '../next/config/webpack/plugins/conditional-exec';\nimport { ModuleIdEmbedPlugin } from '../next/config/webpack/plugins/module-id-embed';\nimport { PatchRequirePlugin } from '../next/config/webpack/plugins/patch-require';\nimport { RemoteWebpackRequirePlugin } from '../next/config/webpack/plugins/remote-webpack-require';\n\nexport type RemoteComponentsWebpackPluginOptions = {\n  appName: string;\n  chunkLoadingGlobal?: string;\n};\n\nexport class RemoteComponentsWebpackPlugin {\n  private readonly appName: string;\n  private readonly chunkLoadingGlobal?: string;\n\n  constructor({\n    appName,\n    chunkLoadingGlobal,\n  }: RemoteComponentsWebpackPluginOptions) {\n    this.appName = appName;\n    this.chunkLoadingGlobal = chunkLoadingGlobal;\n  }\n\n  apply(compiler: Compiler) {\n    new RemoteWebpackRequirePlugin(this.appName).apply(compiler);\n    new ModuleIdEmbedPlugin(this.appName, { includeAllModules: true }).apply(\n      compiler,\n    );\n    new ConditionalExecPlugin(this.appName).apply(compiler);\n    new PatchRequirePlugin(this.appName).apply(compiler);\n\n    if (compiler.options.output) {\n      compiler.options.output.chunkLoadingGlobal =\n        this.chunkLoadingGlobal ??\n        compiler.options.output.chunkLoadingGlobal ??\n        `__remote_chunk_loading_global_${this.appName}__`;\n    }\n  }\n}\n","import type { Compiler } from 'webpack';\n\nexport class ConditionalExecPlugin {\n  appName: string;\n\n  constructor(appName: string) {\n    this.appName = appName;\n  }\n\n  apply(compiler: Compiler) {\n    const { Compilation, sources } = compiler.webpack;\n\n    compiler.hooks.thisCompilation.tap(\n      'ConditionalExecPlugin',\n      (compilation) => {\n        compilation.hooks.processAssets.tap(\n          {\n            name: 'ConditionalExecPlugin',\n            stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,\n          },\n          (assets) => {\n            for (const [name, source] of Object.entries(assets)) {\n              if (name.endsWith('.js')) {\n                const patchedSource = source\n                  .source()\n                  .toString()\n                  .replace(\n                    `var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))`,\n                    `var __webpack_exec__ = (moduleId) => { if (globalThis.__DISABLE_WEBPACK_EXEC__ && globalThis.__DISABLE_WEBPACK_EXEC__[\"${this.appName}\"]) return; return __webpack_require__(__webpack_require__.s = moduleId); }`,\n                  );\n                compilation.updateAsset(\n                  name,\n                  new sources.RawSource(patchedSource),\n                );\n              }\n            }\n          },\n        );\n      },\n    );\n  }\n}\n","import { relative } from 'node:path';\nimport type { Compiler, NormalModule, RuntimeModule } from 'webpack';\nimport { createModuleIdEmbedRuntimeModule } from './module-id-embed-runtime-module';\n\nconst cwd = process.cwd();\n\nexport class ModuleIdEmbedPlugin {\n  appName: string;\n  includeAllModules: boolean;\n\n  constructor(appName: string, options?: { includeAllModules?: boolean }) {\n    this.appName = appName;\n    this.includeAllModules = options?.includeAllModules ?? false;\n  }\n\n  apply(compiler: Compiler) {\n    const ModuleIdEmbedRuntimeModule = createModuleIdEmbedRuntimeModule(\n      compiler.webpack,\n    );\n\n    compiler.hooks.thisCompilation.tap('ModuleIdEmbedPlugin', (compilation) => {\n      const moduleMap = {} as Record<string, string | number>;\n\n      compilation.hooks.runtimeRequirementInTree\n        .for(compiler.webpack.RuntimeGlobals.require)\n        .tap('ModuleIdEmbedPlugin', (chunk, set) => {\n          for (const [key, entry] of compilation.entrypoints) {\n            for (const entryChunk of entry.chunks) {\n              if (key.includes('nextjs-pages-remote')) {\n                for (const mod of compilation.chunkGraph.getChunkModulesIterable(\n                  entryChunk,\n                )) {\n                  const id = compilation.chunkGraph.getModuleId(mod);\n                  const normalModule = mod as NormalModule;\n                  if (id && (normalModule.resource || normalModule.request)) {\n                    moduleMap[\n                      relative(\n                        cwd,\n                        normalModule.resource || normalModule.request,\n                      )\n                    ] = id;\n                  }\n                }\n              }\n            }\n          }\n          for (const mod of compilation.modules) {\n            const id = compilation.chunkGraph.getModuleId(mod);\n            if (\n              id &&\n              (this.includeAllModules || mod.layer?.endsWith('browser'))\n            ) {\n              const normalModule = mod as NormalModule;\n              if (normalModule.resource || normalModule.request) {\n                moduleMap[\n                  relative(cwd, normalModule.resource || normalModule.request)\n                ] = id;\n              }\n            }\n          }\n\n          if (Object.keys(moduleMap).length > 0) {\n            compilation.addRuntimeModule(\n              chunk,\n              new ModuleIdEmbedRuntimeModule(\n                this.appName,\n                moduleMap,\n              ) as unknown as RuntimeModule,\n            );\n\n            set.add(compiler.webpack.RuntimeGlobals.require);\n          }\n        });\n    });\n  }\n}\n","export function createModuleIdEmbedRuntimeModule(webpack: {\n  RuntimeModule: new (name: string, stage?: number) => object;\n}) {\n  return class ModuleIdEmbedRuntimeModule extends webpack.RuntimeModule {\n    appName: string;\n    moduleMap: Record<string | number, unknown>;\n\n    constructor(appName: string, moduleMap: Record<string | number, unknown>) {\n      super('remote-webpack-module-id-embed');\n      this.appName = appName;\n      this.moduleMap = moduleMap;\n    }\n\n    generate(): null | string {\n      return `globalThis.__remote_webpack_module_map__ = globalThis.__remote_webpack_module_map__ || {}; globalThis.__remote_webpack_module_map__[\"${this.appName}\"] = ${JSON.stringify(this.moduleMap)};`;\n    }\n  };\n}\n","import type { Compiler } from 'webpack';\n\n// This plugin patches the webpack require function to support loading remote components in Next.js\nexport class PatchRequirePlugin {\n  appName: string;\n\n  constructor(appName: string) {\n    this.appName = appName;\n  }\n\n  apply(compiler: Compiler) {\n    const { sources } = compiler.webpack;\n\n    compiler.hooks.thisCompilation.tap('PatchRequirePlugin', (compilation) => {\n      compilation.mainTemplate.hooks.requireExtensions.tap(\n        'PatchRequirePlugin',\n        (source) => {\n          return new sources.ConcatSource(\n            source,\n            `const __webpack_require_orig__ = __webpack_require__;\nconst REMOTE_RE = /\\\\[(?<bundle>[^\\\\]]+)\\\\] (?<id>.*)/;\n__webpack_require__ = function __remote_webpack_require__(remoteId) {\n    const match = REMOTE_RE.exec(remoteId);\n    const bundle = match?.groups?.bundle;\n    const id = match?.groups?.id;\n    if (!(id && bundle)) {\n        return __webpack_require_orig__(remoteId);\n    }\n    if (typeof self.__remote_webpack_require__?.[bundle] !== 'function') {\n        const error = new Error(\\`Remote Components are not available in \"\\${bundle}\". Did you forget to wrap the Next.js config with \\\\\\`withRemoteComponents\\\\\\` on both host and remote?\\`);\n        error.name = 'RemoteComponentsError';\n        error.code = 'REMOTE_COMPONENTS_ERROR';\n        throw error;\n    }\n    return self.__remote_webpack_require__[bundle](self.__remote_webpack_require__[bundle].type === 'turbopack' ? remoteId : id);\n};\nObject.assign(__webpack_require__, __webpack_require_orig__);\nconst __webpack_require_l__ = __webpack_require__.l;\n__webpack_require__.l = function __remote_webpack_require_l__(url, done, key, chunkId) {\n    const match = REMOTE_RE.exec(chunkId);\n    const bundle = match?.groups?.bundle;\n    const id = match?.groups?.id;\n    if (!(id && bundle)) {\n        return __webpack_require_l__(new URL(url, globalThis.__remote_bundle_url__?.[\"${this.appName}\"] ?? location.origin).href, done, key, chunkId);\n    }\n    return done();\n};\nconst __webpack_require_o__ = __webpack_require__.o;\n__webpack_require__.o = function __remote_webpack_require_o__(installedChunks, chunkId) {\n    const match = REMOTE_RE.exec(chunkId);\n    const bundle = match?.groups?.bundle;\n    const id = match?.groups?.id;\n    if (!(id && bundle)) {\n        return __webpack_require_o__(installedChunks, chunkId);\n    }\n    return installedChunks[chunkId] = 0;\n};\nconst __webpack_require_e__ = __webpack_require__.e;\n__webpack_require__.e = function __remote_webpack_require_e__(chunkId) {\n    const match = REMOTE_RE.exec(chunkId);\n    const bundle = match?.groups?.bundle;\n    const id = match?.groups?.id;\n    if (!(id && bundle)) {\n        return __webpack_require_e__(chunkId);\n    }\n    return Promise.resolve([]);\n};`,\n          )\n            .source()\n            .toString();\n        },\n      );\n    });\n  }\n}\n","export function createRemoteWebpackRequireRuntimeModule(webpack: {\n  RuntimeModule: new (name: string, stage?: number) => object;\n}) {\n  return class RemoteWebpackRequireRuntimeModule extends webpack.RuntimeModule {\n    appName: string;\n\n    constructor(appName: string) {\n      super('remote-webpack-require');\n      this.appName = appName;\n    }\n\n    generate(): null | string {\n      return `globalThis.__remote_webpack_require__ = globalThis.__remote_webpack_require__ || {}; globalThis.__remote_webpack_require__[\"${this.appName}\"] = __webpack_require__;`;\n    }\n  };\n}\n","import type { Compiler, RuntimeModule } from 'webpack';\nimport { createRemoteWebpackRequireRuntimeModule } from './remote-webpack-require-runtime-module';\n\nexport class RemoteWebpackRequirePlugin {\n  appName: string;\n\n  constructor(appName: string) {\n    this.appName = appName;\n  }\n\n  apply(compiler: Compiler) {\n    const RemoteWebpackRequireRuntimeModule =\n      createRemoteWebpackRequireRuntimeModule(compiler.webpack);\n\n    compiler.hooks.thisCompilation.tap(\n      'RemoteWebpackRequirePlugin',\n      (compilation) => {\n        compilation.hooks.runtimeRequirementInTree\n          .for('__webpack_require__')\n          .tap('RemoteWebpackRequirePlugin', (chunk) => {\n            compilation.addRuntimeModule(\n              chunk,\n              new RemoteWebpackRequireRuntimeModule(\n                this.appName,\n              ) as unknown as RuntimeModule,\n            );\n          });\n      },\n    );\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/webpack.d.ts

@@ -0,0 +1,14 @@
+import { Compiler } from 'webpack';
+
+type RemoteComponentsWebpackPluginOptions = {
+    appName: string;
+    chunkLoadingGlobal?: string;
+};
+declare class RemoteComponentsWebpackPlugin {
+    private readonly appName;
+    private readonly chunkLoadingGlobal?;
+    constructor({ appName, chunkLoadingGlobal, }: RemoteComponentsWebpackPluginOptions);
+    apply(compiler: Compiler): void;
+}
+
+export { RemoteComponentsWebpackPlugin, RemoteComponentsWebpackPluginOptions };

package/dist/webpack.js

@@ -0,0 +1,247 @@
+// src/next/config/webpack/plugins/conditional-exec.ts
+var ConditionalExecPlugin = class {
+  appName;
+  constructor(appName) {
+    this.appName = appName;
+  }
+  apply(compiler) {
+    const { Compilation, sources } = compiler.webpack;
+    compiler.hooks.thisCompilation.tap(
+      "ConditionalExecPlugin",
+      (compilation) => {
+        compilation.hooks.processAssets.tap(
+          {
+            name: "ConditionalExecPlugin",
+            stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
+          },
+          (assets) => {
+            for (const [name, source] of Object.entries(assets)) {
+              if (name.endsWith(".js")) {
+                const patchedSource = source.source().toString().replace(
+                  `var __webpack_exec__ = (moduleId) => (__webpack_require__(__webpack_require__.s = moduleId))`,
+                  `var __webpack_exec__ = (moduleId) => { if (globalThis.__DISABLE_WEBPACK_EXEC__ && globalThis.__DISABLE_WEBPACK_EXEC__["${this.appName}"]) return; return __webpack_require__(__webpack_require__.s = moduleId); }`
+                );
+                compilation.updateAsset(
+                  name,
+                  new sources.RawSource(patchedSource)
+                );
+              }
+            }
+          }
+        );
+      }
+    );
+  }
+};
+
+// src/next/config/webpack/plugins/module-id-embed.ts
+import { relative } from "node:path";
+
+// src/next/config/webpack/plugins/module-id-embed-runtime-module.ts
+function createModuleIdEmbedRuntimeModule(webpack) {
+  return class ModuleIdEmbedRuntimeModule extends webpack.RuntimeModule {
+    appName;
+    moduleMap;
+    constructor(appName, moduleMap) {
+      super("remote-webpack-module-id-embed");
+      this.appName = appName;
+      this.moduleMap = moduleMap;
+    }
+    generate() {
+      return `globalThis.__remote_webpack_module_map__ = globalThis.__remote_webpack_module_map__ || {}; globalThis.__remote_webpack_module_map__["${this.appName}"] = ${JSON.stringify(this.moduleMap)};`;
+    }
+  };
+}
+
+// src/next/config/webpack/plugins/module-id-embed.ts
+var cwd = process.cwd();
+var ModuleIdEmbedPlugin = class {
+  appName;
+  includeAllModules;
+  constructor(appName, options) {
+    this.appName = appName;
+    this.includeAllModules = options?.includeAllModules ?? false;
+  }
+  apply(compiler) {
+    const ModuleIdEmbedRuntimeModule = createModuleIdEmbedRuntimeModule(
+      compiler.webpack
+    );
+    compiler.hooks.thisCompilation.tap("ModuleIdEmbedPlugin", (compilation) => {
+      const moduleMap = {};
+      compilation.hooks.runtimeRequirementInTree.for(compiler.webpack.RuntimeGlobals.require).tap("ModuleIdEmbedPlugin", (chunk, set) => {
+        for (const [key, entry] of compilation.entrypoints) {
+          for (const entryChunk of entry.chunks) {
+            if (key.includes("nextjs-pages-remote")) {
+              for (const mod of compilation.chunkGraph.getChunkModulesIterable(
+                entryChunk
+              )) {
+                const id = compilation.chunkGraph.getModuleId(mod);
+                const normalModule = mod;
+                if (id && (normalModule.resource || normalModule.request)) {
+                  moduleMap[relative(
+                    cwd,
+                    normalModule.resource || normalModule.request
+                  )] = id;
+                }
+              }
+            }
+          }
+        }
+        for (const mod of compilation.modules) {
+          const id = compilation.chunkGraph.getModuleId(mod);
+          if (id && (this.includeAllModules || mod.layer?.endsWith("browser"))) {
+            const normalModule = mod;
+            if (normalModule.resource || normalModule.request) {
+              moduleMap[relative(cwd, normalModule.resource || normalModule.request)] = id;
+            }
+          }
+        }
+        if (Object.keys(moduleMap).length > 0) {
+          compilation.addRuntimeModule(
+            chunk,
+            new ModuleIdEmbedRuntimeModule(
+              this.appName,
+              moduleMap
+            )
+          );
+          set.add(compiler.webpack.RuntimeGlobals.require);
+        }
+      });
+    });
+  }
+};
+
+// src/next/config/webpack/plugins/patch-require.ts
+var PatchRequirePlugin = class {
+  appName;
+  constructor(appName) {
+    this.appName = appName;
+  }
+  apply(compiler) {
+    const { sources } = compiler.webpack;
+    compiler.hooks.thisCompilation.tap("PatchRequirePlugin", (compilation) => {
+      compilation.mainTemplate.hooks.requireExtensions.tap(
+        "PatchRequirePlugin",
+        (source) => {
+          return new sources.ConcatSource(
+            source,
+            `const __webpack_require_orig__ = __webpack_require__;
+const REMOTE_RE = /\\[(?<bundle>[^\\]]+)\\] (?<id>.*)/;
+__webpack_require__ = function __remote_webpack_require__(remoteId) {
+    const match = REMOTE_RE.exec(remoteId);
+    const bundle = match?.groups?.bundle;
+    const id = match?.groups?.id;
+    if (!(id && bundle)) {
+        return __webpack_require_orig__(remoteId);
+    }
+    if (typeof self.__remote_webpack_require__?.[bundle] !== 'function') {
+        const error = new Error(\`Remote Components are not available in "\${bundle}". Did you forget to wrap the Next.js config with \\\`withRemoteComponents\\\` on both host and remote?\`);
+        error.name = 'RemoteComponentsError';
+        error.code = 'REMOTE_COMPONENTS_ERROR';
+        throw error;
+    }
+    return self.__remote_webpack_require__[bundle](self.__remote_webpack_require__[bundle].type === 'turbopack' ? remoteId : id);
+};
+Object.assign(__webpack_require__, __webpack_require_orig__);
+const __webpack_require_l__ = __webpack_require__.l;
+__webpack_require__.l = function __remote_webpack_require_l__(url, done, key, chunkId) {
+    const match = REMOTE_RE.exec(chunkId);
+    const bundle = match?.groups?.bundle;
+    const id = match?.groups?.id;
+    if (!(id && bundle)) {
+        return __webpack_require_l__(new URL(url, globalThis.__remote_bundle_url__?.["${this.appName}"] ?? location.origin).href, done, key, chunkId);
+    }
+    return done();
+};
+const __webpack_require_o__ = __webpack_require__.o;
+__webpack_require__.o = function __remote_webpack_require_o__(installedChunks, chunkId) {
+    const match = REMOTE_RE.exec(chunkId);
+    const bundle = match?.groups?.bundle;
+    const id = match?.groups?.id;
+    if (!(id && bundle)) {
+        return __webpack_require_o__(installedChunks, chunkId);
+    }
+    return installedChunks[chunkId] = 0;
+};
+const __webpack_require_e__ = __webpack_require__.e;
+__webpack_require__.e = function __remote_webpack_require_e__(chunkId) {
+    const match = REMOTE_RE.exec(chunkId);
+    const bundle = match?.groups?.bundle;
+    const id = match?.groups?.id;
+    if (!(id && bundle)) {
+        return __webpack_require_e__(chunkId);
+    }
+    return Promise.resolve([]);
+};`
+          ).source().toString();
+        }
+      );
+    });
+  }
+};
+
+// src/next/config/webpack/plugins/remote-webpack-require-runtime-module.ts
+function createRemoteWebpackRequireRuntimeModule(webpack) {
+  return class RemoteWebpackRequireRuntimeModule extends webpack.RuntimeModule {
+    appName;
+    constructor(appName) {
+      super("remote-webpack-require");
+      this.appName = appName;
+    }
+    generate() {
+      return `globalThis.__remote_webpack_require__ = globalThis.__remote_webpack_require__ || {}; globalThis.__remote_webpack_require__["${this.appName}"] = __webpack_require__;`;
+    }
+  };
+}
+
+// src/next/config/webpack/plugins/remote-webpack-require.ts
+var RemoteWebpackRequirePlugin = class {
+  appName;
+  constructor(appName) {
+    this.appName = appName;
+  }
+  apply(compiler) {
+    const RemoteWebpackRequireRuntimeModule = createRemoteWebpackRequireRuntimeModule(compiler.webpack);
+    compiler.hooks.thisCompilation.tap(
+      "RemoteWebpackRequirePlugin",
+      (compilation) => {
+        compilation.hooks.runtimeRequirementInTree.for("__webpack_require__").tap("RemoteWebpackRequirePlugin", (chunk) => {
+          compilation.addRuntimeModule(
+            chunk,
+            new RemoteWebpackRequireRuntimeModule(
+              this.appName
+            )
+          );
+        });
+      }
+    );
+  }
+};
+
+// src/webpack/index.ts
+var RemoteComponentsWebpackPlugin = class {
+  appName;
+  chunkLoadingGlobal;
+  constructor({
+    appName,
+    chunkLoadingGlobal
+  }) {
+    this.appName = appName;
+    this.chunkLoadingGlobal = chunkLoadingGlobal;
+  }
+  apply(compiler) {
+    new RemoteWebpackRequirePlugin(this.appName).apply(compiler);
+    new ModuleIdEmbedPlugin(this.appName, { includeAllModules: true }).apply(
+      compiler
+    );
+    new ConditionalExecPlugin(this.appName).apply(compiler);
+    new PatchRequirePlugin(this.appName).apply(compiler);
+    if (compiler.options.output) {
+      compiler.options.output.chunkLoadingGlobal = this.chunkLoadingGlobal ?? compiler.options.output.chunkLoadingGlobal ?? `__remote_chunk_loading_global_${this.appName}__`;
+    }
+  }
+};
+export {
+  RemoteComponentsWebpackPlugin
+};
+//# sourceMappingURL=webpack.js.map