remote-components 0.0.1

package/dist/next/config.js

@@ -0,0 +1,325 @@
+// src/next/config/index.ts
+import { dirname, join as join2, relative } from "node:path";
+import { mkdirSync, writeFileSync } from "node:fs";
+import {
+  MicrofrontendsServer,
+  getApplicationContext
+} from "@vercel/microfrontends/microfrontends/server";
+
+// src/next/config/webpack/index.ts
+import { join } from "node:path";
+
+// src/next/config/webpack/plugins/remote-webpack-require-runtime-module.ts
+import { RuntimeModule } from "webpack";
+var RemoteWebpackRequireRuntimeModule = class extends RuntimeModule {
+  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 {
+  constructor(appName) {
+    this.appName = appName;
+  }
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap(
+      "RemoteWebpackRequirePlugin",
+      (compilation) => {
+        compilation.hooks.runtimeRequirementInTree.for("__webpack_require__").tap("RemoteWebpackRequirePlugin", (chunk) => {
+          compilation.addRuntimeModule(
+            chunk,
+            new RemoteWebpackRequireRuntimeModule(this.appName)
+          );
+        });
+      }
+    );
+  }
+};
+
+// src/next/config/webpack/plugins/module-id-embed-runtime-module.ts
+import { RuntimeModule as RuntimeModule2 } from "webpack";
+var ModuleIdEmbedRuntimeModule = class extends RuntimeModule2 {
+  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 ModuleIdEmbedPlugin = class {
+  constructor(appName) {
+    this.appName = appName;
+  }
+  apply(compiler) {
+    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) {
+                  moduleMap[normalModule.resource || normalModule.request] = id;
+                }
+              }
+            }
+          }
+        }
+        for (const mod of compilation.modules) {
+          const id = compilation.chunkGraph.getModuleId(mod);
+          if (id && mod.layer?.endsWith("browser")) {
+            const normalModule = mod;
+            moduleMap[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/conditional-exec.ts
+import { Compilation, sources } from "webpack";
+var ConditionalExecPlugin = class {
+  apply(compiler) {
+    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__) return; return __webpack_require__(__webpack_require__.s = moduleId); }`
+                );
+                compilation.updateAsset(
+                  name,
+                  new sources.RawSource(patchedSource)
+                );
+              }
+            }
+          }
+        );
+      }
+    );
+  }
+};
+
+// src/next/config/webpack/plugins/patch-require.ts
+var PatchRequirePlugin = class {
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap("PatchRequirePlugin", (compilation) => {
+      compilation.mainTemplate.hooks.requireExtensions.tap(
+        "PatchRequirePlugin",
+        (source) => {
+          return new compiler.webpack.sources.ConcatSource(
+            source,
+            `const __webpack_require_orig__ = __webpack_require__;
+const REMOTE_RE = /\\[(?<bundle>[a-zA-Z0-9-_]+)\\] (?<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') {
+        throw new Error(\`Remote component loading error: "\${bundle}"\`);
+    }
+    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__(url, 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/index.ts
+function transform(nextConfig, {
+  app,
+  alias = {},
+  emitSharedFiles = () => {
+  }
+}) {
+  const webpackConfig = nextConfig.webpack;
+  nextConfig.webpack = (baseConfig, webpackContext) => {
+    const config = typeof webpackConfig === "function" ? webpackConfig(baseConfig, webpackContext) ?? baseConfig : baseConfig;
+    config.plugins.push(
+      new RemoteWebpackRequirePlugin(app.name),
+      new ModuleIdEmbedPlugin(app.name),
+      new ConditionalExecPlugin(),
+      new PatchRequirePlugin()
+    );
+    if (!webpackContext.isServer) {
+      config.output.chunkLoadingGlobal = `__remote_chunk_loading_global_${app.name}__`;
+    }
+    config.resolve = {
+      ...config.resolve,
+      alias: {
+        ...config.resolve.alias,
+        ...Object.fromEntries(
+          Object.entries(alias).map(([key, value]) => [
+            key,
+            join(process.cwd(), value)
+          ])
+        )
+      }
+    };
+    emitSharedFiles();
+    return config;
+  };
+  return nextConfig;
+}
+
+// src/next/config/index.ts
+function withRemoteComponents(nextConfig, options) {
+  const virtualRemoteComponentSharedRemote = join2(
+    process.cwd(),
+    nextConfig.distDir ?? ".next",
+    "remote-components/shared/remote.tsx"
+  );
+  const virtualRemoteComponentSharedHost = join2(
+    process.cwd(),
+    nextConfig.distDir ?? ".next",
+    "remote-components/shared/host.tsx"
+  );
+  const shared = /* @__PURE__ */ new Set([
+    ...[
+      "react",
+      "react/jsx-dev-runtime",
+      "react/jsx-runtime",
+      "react-dom",
+      "react-dom/client",
+      "next/navigation",
+      "next/link",
+      "next/form",
+      "next/image",
+      "next/script"
+    ],
+    ...options?.shared ?? []
+  ]);
+  const vendorShared = {
+    react: `'/react/index.js'`,
+    "react/jsx-dev-runtime": `'/react/jsx-dev-runtime.js'`,
+    "react/jsx-runtime": `'/react/jsx-runtime.js'`,
+    "react-dom": `'/react-dom/index.js'`
+  };
+  const sharedRemote = `'use client';
+module.exports = { shared: { ${Array.from(
+    shared
+  ).reduce((acc, curr) => {
+    acc.push(
+      `[${vendorShared[curr] ?? `require.resolve('${curr}')`}]: '${curr}',`
+    );
+    return acc;
+  }, []).join("\n")} } };
+`;
+  const sharedHost = `'use client';
+module.exports = { shared: { ${Array.from(
+    shared
+  ).reduce((acc, curr) => {
+    acc.push(`['${curr}']: () => import('${curr}'),`);
+    return acc;
+  }, []).join("\n")} } };
+`;
+  const emitSharedFiles = () => {
+    mkdirSync(dirname(virtualRemoteComponentSharedRemote), {
+      recursive: true
+    });
+    writeFileSync(virtualRemoteComponentSharedRemote, sharedRemote, "utf-8");
+    writeFileSync(virtualRemoteComponentSharedHost, sharedHost, "utf-8");
+  };
+  nextConfig.transpilePackages = [
+    ...nextConfig.transpilePackages ?? [],
+    "remote-components/next",
+    "remote-components/next/host",
+    "@remote-component/shared/remote",
+    "@remote-component/shared/host"
+  ];
+  const alias = {
+    "@remote-component/shared/remote": `./${relative(
+      process.cwd(),
+      virtualRemoteComponentSharedRemote
+    )}`,
+    "@remote-component/shared/host": `./${relative(
+      process.cwd(),
+      virtualRemoteComponentSharedHost
+    )}`
+  };
+  if (process.env.TURBOPACK) {
+    nextConfig.turbopack = {
+      ...nextConfig.turbopack,
+      moduleIds: "named",
+      resolveAlias: {
+        ...nextConfig.turbopack?.resolveAlias,
+        ...alias
+      }
+    };
+    emitSharedFiles();
+    return nextConfig;
+  }
+  const { name: fromApp } = getApplicationContext();
+  const microfrontends = MicrofrontendsServer.infer();
+  const app = microfrontends.config.getApplication(fromApp);
+  return transform(nextConfig, { app, alias, emitSharedFiles });
+}
+export {
+  withRemoteComponents
+};
+//# sourceMappingURL=config.js.map

package/dist/next/config.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/next/config/index.ts","../../src/next/config/webpack/index.ts","../../src/next/config/webpack/plugins/remote-webpack-require-runtime-module.ts","../../src/next/config/webpack/plugins/remote-webpack-require.ts","../../src/next/config/webpack/plugins/module-id-embed-runtime-module.ts","../../src/next/config/webpack/plugins/module-id-embed.ts","../../src/next/config/webpack/plugins/conditional-exec.ts","../../src/next/config/webpack/plugins/patch-require.ts"],"sourcesContent":["import { dirname, join, relative } from 'node:path';\nimport { mkdirSync, writeFileSync } from 'node:fs';\nimport type { NextConfig } from 'next';\nimport {\n  MicrofrontendsServer,\n  getApplicationContext,\n} from '@vercel/microfrontends/microfrontends/server';\nimport { transform as webpackTransform } from './webpack';\n\ninterface RemoteComponentsOptions {\n  shared?: string[];\n}\n\nexport function withRemoteComponents(\n  nextConfig: NextConfig,\n  options?: RemoteComponentsOptions,\n) {\n  const virtualRemoteComponentSharedRemote = join(\n    process.cwd(),\n    nextConfig.distDir ?? '.next',\n    'remote-components/shared/remote.tsx',\n  );\n  const virtualRemoteComponentSharedHost = join(\n    process.cwd(),\n    nextConfig.distDir ?? '.next',\n    'remote-components/shared/host.tsx',\n  );\n\n  const shared = new Set([\n    ...[\n      'react',\n      'react/jsx-dev-runtime',\n      'react/jsx-runtime',\n      'react-dom',\n      'react-dom/client',\n      'next/navigation',\n      'next/link',\n      'next/form',\n      'next/image',\n      'next/script',\n    ],\n    ...(options?.shared ?? []),\n  ]);\n\n  const vendorShared: Record<string, string> = {\n    react: `'/react/index.js'`,\n    'react/jsx-dev-runtime': `'/react/jsx-dev-runtime.js'`,\n    'react/jsx-runtime': `'/react/jsx-runtime.js'`,\n    'react-dom': `'/react-dom/index.js'`,\n  };\n\n  const sharedRemote = `'use client';\\nmodule.exports = { shared: { ${Array.from(\n    shared,\n  )\n    .reduce<string[]>((acc, curr) => {\n      acc.push(\n        `[${vendorShared[curr] ?? `require.resolve('${curr}')`}]: '${curr}',`,\n      );\n      return acc;\n    }, [])\n    .join('\\n')} } };\\n`;\n\n  const sharedHost = `'use client';\\nmodule.exports = { shared: { ${Array.from(\n    shared,\n  )\n    .reduce<string[]>((acc, curr) => {\n      acc.push(`['${curr}']: () => import('${curr}'),`);\n      return acc;\n    }, [])\n    .join('\\n')} } };\\n`;\n\n  const emitSharedFiles = () => {\n    mkdirSync(dirname(virtualRemoteComponentSharedRemote), {\n      recursive: true,\n    });\n\n    writeFileSync(virtualRemoteComponentSharedRemote, sharedRemote, 'utf-8');\n    writeFileSync(virtualRemoteComponentSharedHost, sharedHost, 'utf-8');\n  };\n\n  nextConfig.transpilePackages = [\n    ...(nextConfig.transpilePackages ?? []),\n    'remote-components/next',\n    'remote-components/next/host',\n    '@remote-component/shared/remote',\n    '@remote-component/shared/host',\n  ];\n\n  const alias = {\n    '@remote-component/shared/remote': `./${relative(\n      process.cwd(),\n      virtualRemoteComponentSharedRemote,\n    )}`,\n    '@remote-component/shared/host': `./${relative(\n      process.cwd(),\n      virtualRemoteComponentSharedHost,\n    )}`,\n  };\n  if (process.env.TURBOPACK) {\n    nextConfig.turbopack = {\n      ...nextConfig.turbopack,\n      moduleIds: 'named',\n      resolveAlias: {\n        ...nextConfig.turbopack?.resolveAlias,\n        ...alias,\n      },\n    };\n    emitSharedFiles();\n    return nextConfig;\n  }\n\n  const { name: fromApp } = getApplicationContext();\n  const microfrontends = MicrofrontendsServer.infer();\n\n  // fetch the config for the current app\n  const app = microfrontends.config.getApplication(fromApp);\n\n  // apply the webpack transform\n  return webpackTransform(nextConfig, { app, alias, emitSharedFiles });\n}\n","import { join } from 'node:path';\nimport type { NextConfig } from 'next';\nimport type { WebpackOptionsNormalized } from 'webpack';\nimport { RemoteWebpackRequirePlugin } from './plugins/remote-webpack-require';\nimport { ModuleIdEmbedPlugin } from './plugins/module-id-embed';\nimport { ConditionalExecPlugin } from './plugins/conditional-exec';\nimport { PatchRequirePlugin } from './plugins/patch-require';\n\nexport function transform(\n  nextConfig: NextConfig,\n  {\n    app,\n    alias = {},\n    emitSharedFiles = () => {\n      // no-op by default\n    },\n  }: {\n    app: { name: string };\n    alias?: Record<string, string>;\n    emitSharedFiles?: () => void;\n  },\n) {\n  const webpackConfig = nextConfig.webpack;\n\n  nextConfig.webpack = (\n    baseConfig: WebpackOptionsNormalized,\n    webpackContext,\n  ) => {\n    // execute the client config first, otherwise their config may accidentally\n    // overwrite our required config - leading to unexpected errors.\n    const config = (\n      typeof webpackConfig === 'function'\n        ? (webpackConfig(baseConfig, webpackContext) ?? baseConfig)\n        : baseConfig\n    ) as WebpackOptionsNormalized;\n\n    // remote component specific plugins\n    config.plugins.push(\n      new RemoteWebpackRequirePlugin(app.name),\n      new ModuleIdEmbedPlugin(app.name),\n      new ConditionalExecPlugin(),\n      new PatchRequirePlugin(),\n    );\n    if (!webpackContext.isServer) {\n      // change the chunk loading global to avoid conflicts with other remote components\n      config.output.chunkLoadingGlobal = `__remote_chunk_loading_global_${app.name}__`;\n    }\n\n    config.resolve = {\n      ...config.resolve,\n      alias: {\n        ...config.resolve.alias,\n        ...Object.fromEntries(\n          Object.entries(alias).map(([key, value]) => [\n            key,\n            join(process.cwd(), value),\n          ]),\n        ),\n      },\n    };\n\n    emitSharedFiles();\n    return config;\n  };\n\n  return nextConfig;\n}\n","import { RuntimeModule } from 'webpack';\n\nexport class RemoteWebpackRequireRuntimeModule extends 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","import { type Compiler } from 'webpack';\nimport { RemoteWebpackRequireRuntimeModule } 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    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(this.appName),\n            );\n          });\n      },\n    );\n  }\n}\n","import { RuntimeModule } from 'webpack';\n\nexport class ModuleIdEmbedRuntimeModule extends 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","import type { NormalModule, Compiler } from 'webpack';\nimport { ModuleIdEmbedRuntimeModule } from './module-id-embed-runtime-module';\n\nexport class ModuleIdEmbedPlugin {\n  appName: string;\n\n  constructor(appName: string) {\n    this.appName = appName;\n  }\n\n  apply(compiler: Compiler) {\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) {\n                    moduleMap[normalModule.resource || normalModule.request] =\n                      id;\n                  }\n                }\n              }\n            }\n          }\n          for (const mod of compilation.modules) {\n            const id = compilation.chunkGraph.getModuleId(mod);\n            if (id && mod.layer?.endsWith('browser')) {\n              const normalModule = mod as NormalModule;\n              moduleMap[normalModule.resource || normalModule.request] = id;\n            }\n          }\n\n          if (Object.keys(moduleMap).length > 0) {\n            compilation.addRuntimeModule(\n              chunk,\n              new ModuleIdEmbedRuntimeModule(this.appName, moduleMap),\n            );\n\n            set.add(compiler.webpack.RuntimeGlobals.require);\n          }\n        });\n    });\n  }\n}\n","import { type Compiler, Compilation, sources } from 'webpack';\n\nexport class ConditionalExecPlugin {\n  apply(compiler: Compiler) {\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__) 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 { 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  apply(compiler: Compiler) {\n    compiler.hooks.thisCompilation.tap('PatchRequirePlugin', (compilation) => {\n      compilation.mainTemplate.hooks.requireExtensions.tap(\n        'PatchRequirePlugin',\n        (source) => {\n          return new compiler.webpack.sources.ConcatSource(\n            source,\n            `const __webpack_require_orig__ = __webpack_require__;\nconst REMOTE_RE = /\\\\[(?<bundle>[a-zA-Z0-9-_]+)\\\\] (?<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        throw new Error(\\`Remote component loading error: \"\\${bundle}\"\\`);\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__(url, 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"],"mappings":"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","names":["join","RuntimeModule","join"]}

package/dist/next/host/app-client.cjs

@@ -0,0 +1,124 @@
+"use strict";
+"use client";
+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 app_client_exports = {};
+__export(app_client_exports, {
+  RemoteComponentClient: () => RemoteComponentClient
+});
+module.exports = __toCommonJS(app_client_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react2 = require("react");
+var import_host = require("@remote-component/shared/host");
+var import_remote_component = require("../../shared/client/remote-component");
+function RemoteComponentClient({
+  name,
+  bundle,
+  route = import_remote_component.DEFAULT_ROUTE,
+  runtime = import_remote_component.RUNTIME_WEBPACK,
+  data,
+  nextData,
+  scripts = [],
+  links = [],
+  remoteShared = {},
+  children
+}) {
+  const [component, setComponent] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
+    let mounted = true;
+    if (!component) {
+      (0, import_remote_component.loadRemoteComponent)({
+        name,
+        bundle,
+        route,
+        runtime,
+        data,
+        nextData,
+        scripts,
+        shared: import_host.shared,
+        remoteShared
+      }).then((result) => {
+        if (mounted) {
+          if (result.error) {
+            setComponent(result.error);
+          } else {
+            setComponent(result.component);
+          }
+        }
+      }).catch((error) => {
+        if (mounted) {
+          setComponent(error);
+        }
+      });
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [
+    component,
+    name,
+    bundle,
+    route,
+    runtime,
+    scripts,
+    data,
+    nextData,
+    remoteShared,
+    children,
+    links
+  ]);
+  if (component instanceof Error) {
+    throw component;
+  }
+  const shouldUseChildren = (!component || component && !nextData && typeof component.then !== "function") && // if the remote Next.js Pages Router application is in development mode
+  // we don't use the provided static HTML
+  // to mitigate layout shift when loading CSS using JavaScript on the client
+  nextData?.buildId !== "development";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
+      name,
+      bundle,
+      route,
+      runtime
+    }) }),
+    shouldUseChildren ? children : component,
+    data.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("script", { id: `${name}_rsc`, children: data.join("\n") }) : null,
+    nextData ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "script",
+      {
+        id: `${bundle}_${route.replace(/\//g, "_")}${name}_next_data`,
+        type: "application/json",
+        children: JSON.stringify(nextData)
+      }
+    ) : null,
+    links.map((link) => /* @__PURE__ */ (0, import_react.createElement)(
+      "link",
+      {
+        ...link,
+        key: `${link.href}_${link.rel}`,
+        precedence: bundle
+      }
+    ))
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RemoteComponentClient
+});
+//# sourceMappingURL=app-client.cjs.map

package/dist/next/host/app-client.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/next/host/app-client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { shared } from '@remote-component/shared/host';\nimport {\n  loadRemoteComponent,\n  DEFAULT_ROUTE,\n  RUNTIME_WEBPACK,\n} from '../../shared/client/remote-component';\nimport type { RemoteComponentProps } from '../../shared/client/remote-component';\n\n/**\n * RemoteComponentClient - Main component for rendering remote components\n *\n * This component handles the loading and rendering of remote microfrontends.\n * It supports both RSC (React Server Components) and Next.js Pages Router based components.\n */\nexport function RemoteComponentClient({\n  name,\n  bundle,\n  route = DEFAULT_ROUTE,\n  runtime = RUNTIME_WEBPACK,\n  data,\n  nextData,\n  scripts = [],\n  links = [],\n  remoteShared = {},\n  children,\n}: RemoteComponentProps) {\n  const [component, setComponent] = useState<React.ReactNode | Error>(null);\n\n  useEffect(() => {\n    let mounted = true;\n\n    // if we have a component, we don't need to load it again\n    if (!component) {\n      loadRemoteComponent({\n        name,\n        bundle,\n        route,\n        runtime,\n        data,\n        nextData,\n        scripts,\n        shared,\n        remoteShared,\n      })\n        .then((result) => {\n          if (mounted) {\n            if (result.error) {\n              setComponent(result.error);\n            } else {\n              setComponent(result.component);\n            }\n          }\n        })\n        .catch((error: Error) => {\n          if (mounted) {\n            setComponent(error);\n          }\n        });\n    }\n\n    return () => {\n      mounted = false;\n    };\n  }, [\n    component,\n    name,\n    bundle,\n    route,\n    runtime,\n    scripts,\n    data,\n    nextData,\n    remoteShared,\n    children,\n    links,\n  ]);\n\n  // Handle errors by re-throwing them\n  if (component instanceof Error) {\n    throw component;\n  }\n\n  // determine whether to use children or loaded component\n  const shouldUseChildren =\n    (!component ||\n      (component &&\n        !nextData &&\n        typeof (component as unknown as Promise<unknown>).then !==\n          'function')) &&\n    // if the remote Next.js Pages Router application is in development mode\n    // we don't use the provided static HTML\n    // to mitigate layout shift when loading CSS using JavaScript on the client\n    nextData?.buildId !== 'development';\n\n  return (\n    <>\n      <script data-remote-component type=\"application/json\">\n        {JSON.stringify({\n          name,\n          bundle,\n          route,\n          runtime,\n        })}\n      </script>\n      {shouldUseChildren ? children : (component as React.ReactNode)}\n      {data.length > 0 ? (\n        <script id={`${name}_rsc`}>{data.join('\\n')}</script>\n      ) : null}\n      {nextData ? (\n        <script\n          id={`${bundle}_${route.replace(/\\//g, '_')}${name}_next_data`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(nextData)}\n        </script>\n      ) : null}\n      {links.map((link) => (\n        <link\n          {...link}\n          key={`${link.href as string}_${link.rel}`}\n          precedence={bundle}\n        />\n      ))}\n    </>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkGI;AAsBI;AAtHR,IAAAA,gBAAoC;AACpC,kBAAuB;AACvB,8BAIO;AASA,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,UAAU,CAAC;AAAA,EACX,QAAQ,CAAC;AAAA,EACT,eAAe,CAAC;AAAA,EAChB;AACF,GAAyB;AACvB,QAAM,CAAC,WAAW,YAAY,QAAI,wBAAkC,IAAI;AAExE,+BAAU,MAAM;AACd,QAAI,UAAU;AAGd,QAAI,CAAC,WAAW;AACd,uDAAoB;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC,EACE,KAAK,CAAC,WAAW;AAChB,YAAI,SAAS;AACX,cAAI,OAAO,OAAO;AAChB,yBAAa,OAAO,KAAK;AAAA,UAC3B,OAAO;AACL,yBAAa,OAAO,SAAS;AAAA,UAC/B;AAAA,QACF;AAAA,MACF,CAAC,EACA,MAAM,CAAC,UAAiB;AACvB,YAAI,SAAS;AACX,uBAAa,KAAK;AAAA,QACpB;AAAA,MACF,CAAC;AAAA,IACL;AAEA,WAAO,MAAM;AACX,gBAAU;AAAA,IACZ;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,MAAI,qBAAqB,OAAO;AAC9B,UAAM;AAAA,EACR;AAGA,QAAM,qBACH,CAAC,aACC,aACC,CAAC,YACD,OAAQ,UAA0C,SAChD;AAAA;AAAA;AAAA,EAIN,UAAU,YAAY;AAExB,SACE,4EACE;AAAA,gDAAC,YAAO,yBAAqB,MAAC,MAAK,oBAChC,eAAK,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC,GACH;AAAA,IACC,oBAAoB,WAAY;AAAA,IAChC,KAAK,SAAS,IACb,4CAAC,YAAO,IAAI,GAAG,YAAa,eAAK,KAAK,IAAI,GAAE,IAC1C;AAAA,IACH,WACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,GAAG,UAAU,MAAM,QAAQ,OAAO,GAAG,IAAI;AAAA,QAC7C,MAAK;AAAA,QAEJ,eAAK,UAAU,QAAQ;AAAA;AAAA,IAC1B,IACE;AAAA,IACH,MAAM,IAAI,CAAC,SACV;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK,GAAG,KAAK,QAAkB,KAAK;AAAA,QACpC,YAAY;AAAA;AAAA,IACd,CACD;AAAA,KACH;AAEJ;","names":["import_react"]}

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

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { R as RemoteComponentMetadata } from '../../types-280a3640.js';
+
+interface RemoteComponentProps {
+    name: string;
+    bundle: string;
+    route?: string;
+    runtime?: RemoteComponentMetadata['runtime'];
+    data: string[];
+    nextData?: {
+        props: {
+            pageProps: Record<string, unknown>;
+        };
+        buildId?: string;
+    };
+    scripts?: {
+        src: string;
+    }[];
+    links?: Record<string, string | boolean>[];
+    remoteShared?: Record<string, string>;
+    children: react.ReactNode;
+}
+
+/**
+ * RemoteComponentClient - Main component for rendering remote components
+ *
+ * This component handles the loading and rendering of remote microfrontends.
+ * It supports both RSC (React Server Components) and Next.js Pages Router based components.
+ */
+declare function RemoteComponentClient({ name, bundle, route, runtime, data, nextData, scripts, links, remoteShared, children, }: RemoteComponentProps): react_jsx_runtime.JSX.Element;
+
+export { RemoteComponentClient };

package/dist/next/host/app-client.js

@@ -0,0 +1,104 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createElement } from "react";
+import { useEffect, useState } from "react";
+import { shared } from "@remote-component/shared/host";
+import {
+  loadRemoteComponent,
+  DEFAULT_ROUTE,
+  RUNTIME_WEBPACK
+} from "../../shared/client/remote-component";
+function RemoteComponentClient({
+  name,
+  bundle,
+  route = DEFAULT_ROUTE,
+  runtime = RUNTIME_WEBPACK,
+  data,
+  nextData,
+  scripts = [],
+  links = [],
+  remoteShared = {},
+  children
+}) {
+  const [component, setComponent] = useState(null);
+  useEffect(() => {
+    let mounted = true;
+    if (!component) {
+      loadRemoteComponent({
+        name,
+        bundle,
+        route,
+        runtime,
+        data,
+        nextData,
+        scripts,
+        shared,
+        remoteShared
+      }).then((result) => {
+        if (mounted) {
+          if (result.error) {
+            setComponent(result.error);
+          } else {
+            setComponent(result.component);
+          }
+        }
+      }).catch((error) => {
+        if (mounted) {
+          setComponent(error);
+        }
+      });
+    }
+    return () => {
+      mounted = false;
+    };
+  }, [
+    component,
+    name,
+    bundle,
+    route,
+    runtime,
+    scripts,
+    data,
+    nextData,
+    remoteShared,
+    children,
+    links
+  ]);
+  if (component instanceof Error) {
+    throw component;
+  }
+  const shouldUseChildren = (!component || component && !nextData && typeof component.then !== "function") && // if the remote Next.js Pages Router application is in development mode
+  // we don't use the provided static HTML
+  // to mitigate layout shift when loading CSS using JavaScript on the client
+  nextData?.buildId !== "development";
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("script", { "data-remote-component": true, type: "application/json", children: JSON.stringify({
+      name,
+      bundle,
+      route,
+      runtime
+    }) }),
+    shouldUseChildren ? children : component,
+    data.length > 0 ? /* @__PURE__ */ jsx("script", { id: `${name}_rsc`, children: data.join("\n") }) : null,
+    nextData ? /* @__PURE__ */ jsx(
+      "script",
+      {
+        id: `${bundle}_${route.replace(/\//g, "_")}${name}_next_data`,
+        type: "application/json",
+        children: JSON.stringify(nextData)
+      }
+    ) : null,
+    links.map((link) => /* @__PURE__ */ createElement(
+      "link",
+      {
+        ...link,
+        key: `${link.href}_${link.rel}`,
+        precedence: bundle
+      }
+    ))
+  ] });
+}
+export {
+  RemoteComponentClient
+};
+//# sourceMappingURL=app-client.js.map

package/dist/next/host/app-client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/next/host/app-client.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\nimport { shared } from '@remote-component/shared/host';\nimport {\n  loadRemoteComponent,\n  DEFAULT_ROUTE,\n  RUNTIME_WEBPACK,\n} from '../../shared/client/remote-component';\nimport type { RemoteComponentProps } from '../../shared/client/remote-component';\n\n/**\n * RemoteComponentClient - Main component for rendering remote components\n *\n * This component handles the loading and rendering of remote microfrontends.\n * It supports both RSC (React Server Components) and Next.js Pages Router based components.\n */\nexport function RemoteComponentClient({\n  name,\n  bundle,\n  route = DEFAULT_ROUTE,\n  runtime = RUNTIME_WEBPACK,\n  data,\n  nextData,\n  scripts = [],\n  links = [],\n  remoteShared = {},\n  children,\n}: RemoteComponentProps) {\n  const [component, setComponent] = useState<React.ReactNode | Error>(null);\n\n  useEffect(() => {\n    let mounted = true;\n\n    // if we have a component, we don't need to load it again\n    if (!component) {\n      loadRemoteComponent({\n        name,\n        bundle,\n        route,\n        runtime,\n        data,\n        nextData,\n        scripts,\n        shared,\n        remoteShared,\n      })\n        .then((result) => {\n          if (mounted) {\n            if (result.error) {\n              setComponent(result.error);\n            } else {\n              setComponent(result.component);\n            }\n          }\n        })\n        .catch((error: Error) => {\n          if (mounted) {\n            setComponent(error);\n          }\n        });\n    }\n\n    return () => {\n      mounted = false;\n    };\n  }, [\n    component,\n    name,\n    bundle,\n    route,\n    runtime,\n    scripts,\n    data,\n    nextData,\n    remoteShared,\n    children,\n    links,\n  ]);\n\n  // Handle errors by re-throwing them\n  if (component instanceof Error) {\n    throw component;\n  }\n\n  // determine whether to use children or loaded component\n  const shouldUseChildren =\n    (!component ||\n      (component &&\n        !nextData &&\n        typeof (component as unknown as Promise<unknown>).then !==\n          'function')) &&\n    // if the remote Next.js Pages Router application is in development mode\n    // we don't use the provided static HTML\n    // to mitigate layout shift when loading CSS using JavaScript on the client\n    nextData?.buildId !== 'development';\n\n  return (\n    <>\n      <script data-remote-component type=\"application/json\">\n        {JSON.stringify({\n          name,\n          bundle,\n          route,\n          runtime,\n        })}\n      </script>\n      {shouldUseChildren ? children : (component as React.ReactNode)}\n      {data.length > 0 ? (\n        <script id={`${name}_rsc`}>{data.join('\\n')}</script>\n      ) : null}\n      {nextData ? (\n        <script\n          id={`${bundle}_${route.replace(/\\//g, '_')}${name}_next_data`}\n          type=\"application/json\"\n        >\n          {JSON.stringify(nextData)}\n        </script>\n      ) : null}\n      {links.map((link) => (\n        <link\n          {...link}\n          key={`${link.href as string}_${link.rel}`}\n          precedence={bundle}\n        />\n      ))}\n    </>\n  );\n}\n"],"mappings":";AAkGI,mBACE,KADF;AAsBI;AAtHR,SAAS,WAAW,gBAAgB;AACpC,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AASA,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,UAAU,CAAC;AAAA,EACX,QAAQ,CAAC;AAAA,EACT,eAAe,CAAC;AAAA,EAChB;AACF,GAAyB;AACvB,QAAM,CAAC,WAAW,YAAY,IAAI,SAAkC,IAAI;AAExE,YAAU,MAAM;AACd,QAAI,UAAU;AAGd,QAAI,CAAC,WAAW;AACd,0BAAoB;AAAA,QAClB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF,CAAC,EACE,KAAK,CAAC,WAAW;AAChB,YAAI,SAAS;AACX,cAAI,OAAO,OAAO;AAChB,yBAAa,OAAO,KAAK;AAAA,UAC3B,OAAO;AACL,yBAAa,OAAO,SAAS;AAAA,UAC/B;AAAA,QACF;AAAA,MACF,CAAC,EACA,MAAM,CAAC,UAAiB;AACvB,YAAI,SAAS;AACX,uBAAa,KAAK;AAAA,QACpB;AAAA,MACF,CAAC;AAAA,IACL;AAEA,WAAO,MAAM;AACX,gBAAU;AAAA,IACZ;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,CAAC;AAGD,MAAI,qBAAqB,OAAO;AAC9B,UAAM;AAAA,EACR;AAGA,QAAM,qBACH,CAAC,aACC,aACC,CAAC,YACD,OAAQ,UAA0C,SAChD;AAAA;AAAA;AAAA,EAIN,UAAU,YAAY;AAExB,SACE,iCACE;AAAA,wBAAC,YAAO,yBAAqB,MAAC,MAAK,oBAChC,eAAK,UAAU;AAAA,MACd;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC,GACH;AAAA,IACC,oBAAoB,WAAY;AAAA,IAChC,KAAK,SAAS,IACb,oBAAC,YAAO,IAAI,GAAG,YAAa,eAAK,KAAK,IAAI,GAAE,IAC1C;AAAA,IACH,WACC;AAAA,MAAC;AAAA;AAAA,QACC,IAAI,GAAG,UAAU,MAAM,QAAQ,OAAO,GAAG,IAAI;AAAA,QAC7C,MAAK;AAAA,QAEJ,eAAK,UAAU,QAAQ;AAAA;AAAA,IAC1B,IACE;AAAA,IACH,MAAM,IAAI,CAAC,SACV;AAAA,MAAC;AAAA;AAAA,QACE,GAAG;AAAA,QACJ,KAAK,GAAG,KAAK,QAAkB,KAAK;AAAA,QACpC,YAAY;AAAA;AAAA,IACd,CACD;AAAA,KACH;AAEJ;","names":[]}