@rollipop/plugin-module-federation 0.0.0 → 0.1.0-alpha.20

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @rollipop/plugin-module-federation
+
+## 0.1.0-alpha.20
+
+### Patch Changes
+
+- 140902b: impl @rollipop/plugin-module-federation
+- Updated dependencies [d6e10db]
+- Updated dependencies [140902b]
+  - rollipop@0.1.0-alpha.20

package/README.md

@@ -1 +1,127 @@
-# rollipop-empty
+# @rollipop/plugin-module-federation
+
+Module Federation for Rollipop. Wires `@module-federation/runtime` into the host bundle and emits a self-contained IIFE for each remote, with shared dependencies resolved through a host-owned global registry.
+
+## Status
+
+> **Initial implementation.** This plugin is an early-stage feature. The public
+> API and the bundle layout may change, and the role model is intentionally
+> narrower than standard Module Federation — see [Roles](#roles) and
+> [Constraints](#constraints).
+>
+> Notably, a single config takes exactly one role (host **or** remote). Standard
+> (web) Module Federation lets one build both `expose` modules and `consume`
+> remotes; that bidirectional / chained-federation model is **not supported
+> yet**. Lifting it requires emitting the federation container as a separate
+> artifact from the app bundle, which is not implemented at this stage.
+
+## Roles
+
+A single Rollipop config takes one role. Defining both `remotes` and `exposes` throws.
+
+| Role   | Has       | Bundle output                                                                |
+| ------ | --------- | ---------------------------------------------------------------------------- |
+| Host   | `remotes` | Normal Rollipop bundle. `import('<remote>/<expose>')` is rewritten at build. |
+| Remote | `exposes` | IIFE that registers a federation container on `globalThis`.                  |
+
+## Host
+
+```ts
+// rollipop.host.config.ts
+import { federation } from '@rollipop/plugin-module-federation';
+import { defineConfig } from 'rollipop';
+
+export default defineConfig({
+  entry: 'src/host/index.js',
+  plugins: [
+    federation({
+      name: 'host_app',
+      remotes: {
+        remote_app: 'remote_app@http://localhost:8082/index.bundle?platform=ios',
+      },
+      shared: {
+        react: { singleton: true, eager: true, requiredVersion: '19.2.3' },
+        'react-native': { singleton: true, eager: true, requiredVersion: '0.84.1' },
+      },
+      runtime: {
+        // Register a `ModuleFederationScriptLoader` on `globalThis.__rollipop_script_loader__`.
+        // Typically delegates to a native TurboModule that does fetch + JSI evaluate.
+        implement: `
+          globalThis.__rollipop_script_loader__ = {
+            async loadScript({ scriptId, url }) {
+              await NativeScriptManager.loadScript(scriptId, { url });
+            },
+          };
+        `,
+      },
+    }),
+  ],
+});
+```
+
+In your app, consume the remote with dynamic import:
+
+```ts
+const RemoteNavigator = React.lazy(() =>
+  import('remote_app/RemoteNavigator').then((m) => ({ default: m.default ?? m })),
+);
+```
+
+The plugin rewrites the `import()` call into a `loadRemote` invocation against the federation runtime — no native `import()` evaluation happens at runtime.
+
+## Remote
+
+```ts
+// rollipop.remote.config.ts
+import { federation } from '@rollipop/plugin-module-federation';
+import { defineConfig } from 'rollipop';
+
+export default defineConfig({
+  entry: 'src/remote/index.js',
+  plugins: [
+    federation({
+      name: 'remote_app',
+      exposes: {
+        './RemoteNavigator': './src/remote/exposed/RemoteNavigator.tsx',
+      },
+      shared: {
+        react: { singleton: true, requiredVersion: '19.2.3' },
+        'react-native': { singleton: true, requiredVersion: '0.84.1' },
+      },
+    }),
+  ],
+});
+```
+
+The bundle is emitted as IIFE. Each shared dep import (e.g. `import RN from 'react-native'`) is replaced with a stub that reads from the host's `globalThis.__rollipop_shared__` registry and throws if the dep is not registered. Rollipop's prelude / polyfills are skipped because the host has already initialized the React Native runtime.
+
+## Script loader contract
+
+Defined at `@rollipop/plugin-module-federation/runtime`:
+
+```ts
+export interface ModuleFederationScriptLoader {
+  loadScript(args: { scriptId: string; url: string; parentUrl?: string }): Promise<void>;
+}
+```
+
+The host registers an implementation on `globalThis.__rollipop_script_loader__`. The plugin's MF runtime adapter delegates `loadEntry` to it. After the script is evaluated the container is read back from `globalThis[<entryGlobalName>]`.
+
+## Globals exposed at runtime
+
+| Global                       | Owner  | Purpose                                                                 |
+| ---------------------------- | ------ | ----------------------------------------------------------------------- |
+| `__rollipop_script_loader__` | user   | `ModuleFederationScriptLoader` implementation.                          |
+| `__rollipop_shared__`        | host   | Shared dependency registry. Lazily populated; missing keys throw.       |
+| `__rollipop_load_remote__`   | plugin | `(id: string) => Promise<unknown>` — wraps the federation `loadRemote`. |
+
+## Constraints
+
+- A single config cannot define both `remotes` and `exposes` — this is a
+  current-implementation limitation, not an inherent Module Federation rule.
+  Split a host and a remote into two configs and run them as separate Rollipop
+  processes. See [Status](#status).
+- React Native does not support native `import()`. Static imports of remote modules are intentionally not supported — use dynamic `import('<remote>/<expose>')`.
+- Subpath imports of shared deps (`react/jsx-dev-runtime`, etc.) are bundled into the remote and consume the parent shared instance through `__rollipop_shared__`.
+
+See `examples/module-federation` for a working RN 0.84 host + remote setup with a Pure C++/Obj-C++ TurboModule script loader.

package/dist/index.d.ts

@@ -0,0 +1,72 @@
+import { Plugin } from "rollipop";
+
+//#region src/types.d.ts
+/**
+ * Module Federation plugin configuration.
+ *
+ * A single config takes one role at a time:
+ *
+ * - **Host** — declare `remotes`. The bundle consumes federated modules via `import('<remote>/<expose>')`,
+ *   which the plugin rewrites to a runtime `loadRemote` call against the host's federation instance.
+ * - **Remote** — declare `exposes`. The plugin emits an IIFE bundle whose container is registered on `globalThis`
+ *   so the host can read it after the script is evaluated by the user-provided script loader.
+ *
+ * Defining both `remotes` and `exposes` in the same config throws.
+ * Split into two configs and run them as separate Rollipop processes.
+ */
+interface ModuleFederationConfig {
+  /**
+   * Federation name. Must be a non-empty string and stable across builds.
+   */
+  name: string;
+  /**
+   * Remotes consumed by this bundle (host role).
+   *
+   * The value is either the remote entry URL or an object form. Either way,
+   * `entry` is the URL the user-provided script loader fetches at runtime.
+   */
+  remotes?: Record<string, string | ModuleFederationRemoteConfig>;
+  /**
+   * Modules exposed to other federated bundles (remote role).
+   *
+   * Each key is the public path (must start with `'./'`).
+   * The value is the source file to expose, resolved relative to the project root.
+   */
+  exposes?: Record<string, string>;
+  /**
+   * Shared dependencies that the host owns and remotes consume from the shared registry.
+   *
+   * Use the array form for the simplest case (versions are read from `node_modules`).
+   * The object form lets each entry tune `requiredVersion`, `singleton`, and `eager`.
+   */
+  shared?: string[] | Record<string, string | ModuleFederationSharedDependencyConfig>;
+  /**
+   * Share resolution strategy passed through to `@module-federation/runtime`.
+   */
+  shareStrategy?: 'version-first' | 'loaded-first';
+  /**
+   * Runtime configuration for the host bundle.
+   *
+   * `implement` is raw source that registers `globalThis.__rollipop_script_loader__` with a `ModuleFederationScriptLoader` implementation.
+   * Injected as a polyfill so it runs before any module init.
+   */
+  runtime?: ModuleFederationRuntimeConfig;
+}
+interface ModuleFederationRemoteConfig {
+  name: string;
+  entry: string;
+  type?: 'var';
+}
+interface ModuleFederationSharedDependencyConfig {
+  requiredVersion?: string;
+  singleton?: boolean;
+  eager?: boolean;
+}
+interface ModuleFederationRuntimeConfig {
+  implement: string;
+}
+//#endregion
+//#region src/plugin.d.ts
+declare function moduleFederationPlugin(config: ModuleFederationConfig): Plugin;
+//#endregion
+export { type ModuleFederationConfig, type ModuleFederationRemoteConfig, type ModuleFederationRuntimeConfig, type ModuleFederationSharedDependencyConfig, moduleFederationPlugin as federation };

package/dist/index.js

@@ -0,0 +1,607 @@
+import { createRequire } from "node:module";
+import path from "node:path";
+import MagicString from "magic-string";
+import { id, include, prefixRegex } from "rollipop/pluginutils";
+import baseDedent from "dedent";
+import fs from "node:fs";
+//#region src/constants.ts
+const PLUGIN_NAME = "rollipop:module-federation";
+const VIRTUAL_PREFIX = "\0rollipop:module-federation:";
+const VIRTUAL_HOST_INIT_ID = `${VIRTUAL_PREFIX}host-init`;
+const VIRTUAL_RUNTIME_ADAPTER_ID = `${VIRTUAL_PREFIX}runtime-adapter`;
+const VIRTUAL_SHARE_SCOPE_ID = `${VIRTUAL_PREFIX}share-scope`;
+`${VIRTUAL_PREFIX}`;
+const VIRTUAL_SHARED_SHIM_PREFIX = `${VIRTUAL_PREFIX}shared:`;
+const VIRTUAL_REMOTE_PROXY_PREFIX = `${VIRTUAL_PREFIX}remote:`;
+const SCRIPT_LOADER_GLOBAL = "__rollipop_script_loader__";
+const SHARED_REGISTRY_GLOBAL = "__rollipop_shared__";
+const REMOTE_CACHE_GLOBAL = "__rollipop_module_federation_cache__";
+const HMR_HOT_PATH = "/hot";
+const HMR_EVENT = "mf:remote-update";
+//#endregion
+//#region src/virtual/_dedent.ts
+const dedent = baseDedent.withOptions({ escapeSpecialCharacters: false });
+const Q = "\\u0027";
+//#endregion
+//#region src/virtual/host-init.ts
+function generateHostInitCode(config) {
+	const remotesArray = Object.values(config.remotes).map((remote) => ({
+		name: remote.name,
+		entry: remote.entry,
+		type: remote.type,
+		entryGlobalName: remote.entryGlobalName
+	}));
+	const sharedEntries = Object.entries(config.shared);
+	const sharedRegistryPropExprs = sharedEntries.map(([name]) => `  ${JSON.stringify(name)}: require(${JSON.stringify(name)}),`).join("\n");
+	const sharedRuntimeMap = sharedEntries.reduce((acc, [name, info]) => ({
+		...acc,
+		[name]: {
+			version: info.version,
+			shareConfig: {
+				singleton: info.singleton,
+				requiredVersion: info.requiredVersion ?? false,
+				eager: info.eager
+			}
+		}
+	}), {});
+	return dedent`
+    import adapter from ${JSON.stringify(VIRTUAL_RUNTIME_ADAPTER_ID)};
+    import { createInstance } from '@module-federation/runtime';
+
+    globalThis.${SHARED_REGISTRY_GLOBAL} = globalThis.${SHARED_REGISTRY_GLOBAL} || {
+    ${sharedRegistryPropExprs}
+    };
+
+    const sharedConfig = ${JSON.stringify(sharedRuntimeMap, null, 2)};
+    for (const sharedName of Object.keys(sharedConfig)) {
+      sharedConfig[sharedName].lib = () => globalThis.${SHARED_REGISTRY_GLOBAL}[sharedName];
+    }
+
+    const instance = createInstance({
+      name: ${JSON.stringify(config.name)},
+      remotes: ${JSON.stringify(remotesArray, null, 2)},
+      shared: sharedConfig,
+      plugins: [adapter],
+      shareStrategy: ${JSON.stringify(config.shareStrategy)},
+    });
+
+    const remoteList = ${JSON.stringify(remotesArray)};
+
+    if (globalThis.${REMOTE_CACHE_GLOBAL} == null) {
+      const cache = {
+        modules: Object.create(null),
+        pending: Object.create(null),
+        // Per-id invalidation: only ids actually present in the cache when
+        // HMR fired need to bypass the federation runtime. Cleared after
+        // each successful bypass load — new ids fall back to the normal
+        // loadRemote flow with full shared-module negotiation.
+        invalidatedIds: new Set(),
+        subscribers: new Set(),
+        load(id) {
+          if (this.modules[id] !== undefined) {
+            return Promise.resolve(this.modules[id]);
+          }
+          if (this.pending[id]) {
+            return this.pending[id];
+          }
+          const isInvalidated = this.invalidatedIds.has(id);
+          let fetcher;
+          if (isInvalidated) {
+            const slash = id.indexOf('/');
+            const remoteName = slash === -1 ? id : id.slice(0, slash);
+            const exposePath = slash === -1 ? '.' : './' + id.slice(slash + 1);
+            fetcher = Promise.resolve().then(() => {
+              const container = globalThis[remoteName];
+              if (container == null) {
+                throw new Error('[rollipop:module-federation] container ${Q}' + remoteName + '${Q} not registered');
+              }
+              return container.get(exposePath).then((factory) => {
+                return typeof factory === 'function' ? factory() : factory;
+              });
+            });
+          } else {
+            fetcher = instance.loadRemote(id);
+          }
+          this.pending[id] = fetcher.then((mod) => {
+            this.modules[id] = mod;
+            delete this.pending[id];
+            if (isInvalidated) {
+              this.invalidatedIds.delete(id);
+            }
+            return mod;
+          });
+          return this.pending[id];
+        },
+        invalidate(remoteName) {
+          for (const key of Object.keys(this.modules)) {
+            if (key === remoteName || key.startsWith(remoteName + '/')) {
+              this.invalidatedIds.add(key);
+              delete this.modules[key];
+            }
+          }
+          for (const cb of this.subscribers) {
+            try {
+              cb(remoteName);
+            } catch (_e) {}
+          }
+        },
+      };
+      globalThis.${REMOTE_CACHE_GLOBAL} = cache;
+    }
+
+    const __cache = globalThis.${REMOTE_CACHE_GLOBAL};
+
+    async function applyRemoteUpdate(remote) {
+      const generation = (remote.__mfHmrGen = (remote.__mfHmrGen || 0) + 1);
+      const cacheBust = (remote.entry.indexOf('?') === -1 ? '?' : '&') + '_mf_hmr=' + generation;
+      try {
+        await globalThis.${SCRIPT_LOADER_GLOBAL}.loadScript({
+          scriptId: remote.name + '@' + generation,
+          url: remote.entry + cacheBust,
+        });
+      } catch (error) {
+        console.error(
+          '[rollipop:module-federation] failed to reload remote ${Q}' + remote.name + '${Q} during HMR. App is running stale code until next successful update.',
+          error,
+        );
+        return;
+      }
+      __cache.invalidate(remote.name);
+    }
+
+    function subscribeRemoteHmr(remote) {
+      let wsUrl;
+      try {
+        const url = new URL(remote.entry);
+        const wsProtocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
+        wsUrl = wsProtocol + '//' + url.host + ${JSON.stringify(HMR_HOT_PATH)};
+      } catch (_e) {
+        return;
+      }
+
+      const connect = () => {
+        let socket;
+        try {
+          socket = new WebSocket(wsUrl);
+        } catch (_e) {
+          setTimeout(connect, 1000);
+          return;
+        }
+        socket.onmessage = (event) => {
+          let parsed;
+          try {
+            parsed = JSON.parse(typeof event.data === 'string' ? event.data : '');
+          } catch (_e) {
+            return;
+          }
+          if (parsed == null || parsed.type !== ${JSON.stringify(HMR_EVENT)}) {
+            return;
+          }
+          if (parsed.payload != null && parsed.payload.name !== remote.name) {
+            return;
+          }
+          applyRemoteUpdate(remote);
+        };
+        socket.onclose = () => setTimeout(connect, 1000);
+        socket.onerror = () => {
+          try {
+            socket.close();
+          } catch (_e) {}
+        };
+      };
+      connect();
+    }
+
+    // Defer to the next tick so React Native's InitializeCore has set up
+    // WebSocket / setTimeout before the subscription starts.
+    if (typeof __DEV__ !== 'undefined' && __DEV__) {
+      Promise.resolve().then(() => {
+        if (typeof WebSocket === 'undefined') {
+          return;
+        }
+        for (const r of remoteList) {
+          subscribeRemoteHmr(r);
+        }
+      });
+    }
+  `;
+}
+//#endregion
+//#region src/virtual/runtime-adapter.ts
+function generateRuntimeAdapterCode() {
+	return dedent`
+    const adapter = {
+      name: 'rollipop-script-loader-adapter',
+      async loadEntry({ remoteInfo }) {
+        const loader = globalThis.${SCRIPT_LOADER_GLOBAL};
+        if (loader == null) {
+          throw new Error(
+            '[${PLUGIN_NAME}] ${Q}globalThis.${SCRIPT_LOADER_GLOBAL}${Q} is not registered. Provide ${Q}runtime.implement${Q} in plugin config.'
+          );
+        }
+        await loader.loadScript({
+          scriptId: remoteInfo.name,
+          url: remoteInfo.entry,
+        });
+        const container = globalThis[remoteInfo.entryGlobalName];
+        if (container == null) {
+          throw new Error(
+            '[${PLUGIN_NAME}] Remote container ${Q}' + remoteInfo.entryGlobalName + '${Q} was not registered after script load.'
+          );
+        }
+        return container;
+      },
+    };
+
+    export default adapter;
+  `;
+}
+//#endregion
+//#region src/virtual/share-scope.ts
+function generateShareScopeCode() {
+	return dedent`
+    export { loadRemote, loadShare, loadShareSync } from '@module-federation/runtime';
+  `;
+}
+//#endregion
+//#region src/host/load.ts
+function loadVirtualModule(id, config) {
+	switch (id) {
+		case VIRTUAL_RUNTIME_ADAPTER_ID: return generateRuntimeAdapterCode();
+		case VIRTUAL_HOST_INIT_ID: return generateHostInitCode(config);
+		case VIRTUAL_SHARE_SCOPE_ID: return generateShareScopeCode();
+		default: return null;
+	}
+}
+//#endregion
+//#region src/host/resolve.ts
+function resolveVirtualId(source) {
+	if (source.startsWith("\0rollipop:module-federation:")) return source;
+	return null;
+}
+//#endregion
+//#region src/host/transform.ts
+function transformHostEntry(code, id) {
+	const magicString = new MagicString(code);
+	magicString.prepend(`import ${JSON.stringify(VIRTUAL_HOST_INIT_ID)};\n`);
+	return {
+		code: magicString.toString(),
+		map: magicString.generateMap({
+			hires: true,
+			source: id
+		})
+	};
+}
+//#endregion
+//#region src/shared/resolve-version.ts
+function resolveSharedVersion(packageName, projectRoot) {
+	try {
+		const packageJsonPath = createRequire(`${projectRoot}/__placeholder__.js`).resolve(`${packageName}/package.json`);
+		const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8"));
+		return typeof packageJson.version === "string" ? packageJson.version : void 0;
+	} catch {
+		return;
+	}
+}
+//#endregion
+//#region src/normalize.ts
+const DEFAULT_SHARE_STRATEGY = "version-first";
+function normalizeConfig(config, projectRoot) {
+	validateConfig(config);
+	const remotes = normalizeRemotes(config.remotes ?? {});
+	const exposes = config.exposes ?? {};
+	const shared = normalizeShared(config.shared ?? [], projectRoot);
+	return {
+		name: config.name,
+		remotes,
+		exposes,
+		shared,
+		shareStrategy: config.shareStrategy ?? DEFAULT_SHARE_STRATEGY,
+		runtime: config.runtime,
+		hasRemotes: Object.keys(remotes).length > 0,
+		hasExposes: Object.keys(exposes).length > 0
+	};
+}
+function normalizeRemotes(remotes) {
+	return Object.entries(remotes).reduce((acc, [key, value]) => {
+		const remote = typeof value === "string" ? parseRemoteString(key, value) : value;
+		return {
+			...acc,
+			[key]: {
+				name: remote.name,
+				entry: remote.entry,
+				type: remote.type ?? "var",
+				entryGlobalName: remote.name
+			}
+		};
+	}, {});
+}
+function parseRemoteString(key, value) {
+	const at = value.indexOf("@");
+	if (at <= 0) return {
+		name: key,
+		entry: value
+	};
+	return {
+		name: value.slice(0, at),
+		entry: value.slice(at + 1)
+	};
+}
+function normalizeShared(shared, projectRoot) {
+	return (Array.isArray(shared) ? shared.map((name) => [name, {}]) : Object.entries(shared).map(([name, value]) => typeof value === "string" ? [name, { requiredVersion: value }] : [name, value])).reduce((acc, [name, opts]) => ({
+		...acc,
+		[name]: {
+			version: resolveSharedVersion(name, projectRoot),
+			requiredVersion: opts.requiredVersion,
+			singleton: opts.singleton ?? false,
+			eager: opts.eager ?? false
+		}
+	}), {});
+}
+function validateConfig(config) {
+	if (!config.name || typeof config.name !== "string") throw new Error(`[${PLUGIN_NAME}] 'name' is required and must be a non-empty string`);
+	if (config.remotes != null) for (const [key, value] of Object.entries(config.remotes)) {
+		if (typeof value === "string") continue;
+		if (!value.name || !value.entry) throw new Error(`[${PLUGIN_NAME}] Remote '${key}' must have both 'name' and 'entry'`);
+	}
+	if (config.exposes != null) for (const [key, value] of Object.entries(config.exposes)) {
+		if (!key.startsWith("./")) throw new Error(`[${PLUGIN_NAME}] Expose key '${key}' must start with './'`);
+		if (typeof value !== "string") throw new Error(`[${PLUGIN_NAME}] Expose value for '${key}' must be a string file path`);
+	}
+}
+//#endregion
+//#region src/virtual/remote-entry.ts
+function generateRemoteEntryCode(options) {
+	const exposeEntries = Object.entries(options.exposes);
+	return dedent`
+    ${exposeEntries.map(([, filePath], index) => `import * as __expose_${index} from ${JSON.stringify(filePath)};`).join("\n")}
+
+    const moduleMap = {
+    ${exposeEntries.map(([key], index) => `  ${JSON.stringify(key)}: () => __expose_${index},`).join("\n")}
+    };
+
+    const container = {
+      init() {},
+      async get(path) {
+        const factory = moduleMap[path];
+        if (factory == null) {
+          throw new Error('[${PLUGIN_NAME}] Module ${Q}' + path + '${Q} is not exposed by ${Q}${options.name}${Q}');
+        }
+        return factory;
+      },
+    };
+
+    globalThis[${JSON.stringify(options.name)}] = container;
+    globalThis.${SHARED_REGISTRY_GLOBAL} = globalThis.${SHARED_REGISTRY_GLOBAL} || {};
+  `;
+}
+//#endregion
+//#region src/virtual/remote-proxy.ts
+function generateRemoteProxyCode({ remoteId, reactAware }) {
+	const idLiteral = JSON.stringify(remoteId);
+	if (reactAware) return dedent`
+      import * as __mfReact from 'react';
+
+      const __cache = globalThis.${REMOTE_CACHE_GLOBAL};
+      const __id = ${idLiteral};
+
+      function __ensureLoaded() {
+        if (__cache.modules[__id] !== undefined) {
+          return null;
+        }
+        return __cache.load(__id);
+      }
+
+      function __getMod() {
+        return __cache.modules[__id];
+      }
+
+      function __FederatedProxy(props) {
+        const [, setVersion] = __mfReact.useState(0);
+        __mfReact.useEffect(() => {
+          const listener = () => setVersion((v) => v + 1);
+          __cache.subscribers.add(listener);
+          return () => {
+            __cache.subscribers.delete(listener);
+          };
+        }, []);
+
+        const mod = __getMod();
+        if (mod === undefined) {
+          throw __ensureLoaded();
+        }
+        const fn = mod.default ?? mod;
+        return __mfReact.createElement(fn, props);
+      }
+
+      const __proxy = new Proxy(__FederatedProxy, {
+        get(target, prop) {
+          if (prop === '__esModule') {
+            return true;
+          }
+          if (prop === 'then') {
+            return undefined;
+          }
+          const mod = __getMod();
+          if (mod === undefined) {
+            throw __ensureLoaded();
+          }
+          if (prop in mod) {
+            return mod[prop];
+          }
+          if (mod.default != null && prop in mod.default) {
+            return mod.default[prop];
+          }
+          return target[prop];
+        },
+      });
+
+      export default __proxy;
+    `;
+	return dedent`
+    const __cache = globalThis.${REMOTE_CACHE_GLOBAL};
+    const __id = ${idLiteral};
+
+    function __getMod() {
+      if (__cache.modules[__id] !== undefined) {
+        return __cache.modules[__id];
+      }
+      throw __cache.load(__id);
+    }
+
+    function __invoke(...args) {
+      const mod = __getMod();
+      const fn = mod.default ?? mod;
+      return fn.apply(this, args);
+    }
+
+    const __proxy = new Proxy(__invoke, {
+      get(target, prop) {
+        if (prop === '__esModule') {
+          return true;
+        }
+        if (prop === 'then') {
+          return undefined;
+        }
+        const mod = __getMod();
+        if (prop in mod) {
+          return mod[prop];
+        }
+        if (mod.default != null && prop in mod.default) {
+          return mod.default[prop];
+        }
+        return target[prop];
+      },
+    });
+
+    export default __proxy;
+  `;
+}
+//#endregion
+//#region src/virtual/shared-shim.ts
+function generateSharedShimCode(sharedName) {
+	return dedent`
+    const __mod = globalThis.${SHARED_REGISTRY_GLOBAL} && globalThis.${SHARED_REGISTRY_GLOBAL}[${JSON.stringify(sharedName)}];
+    if (__mod == null) {
+      throw new Error('[${PLUGIN_NAME}] shared module ${Q}${sharedName}${Q} is not registered on the host. Add it to the host config${Q}s ${Q}shared${Q} field.');
+    }
+    module.exports = __mod;
+  `;
+}
+//#endregion
+//#region src/plugin.ts
+function moduleFederationPlugin(config) {
+	const federationConfig = config;
+	const hasRemotes = Object.keys(federationConfig.remotes ?? {}).length > 0;
+	const hasExposes = Object.keys(federationConfig.exposes ?? {}).length > 0;
+	if (hasRemotes && hasExposes) throw new Error(`[${PLUGIN_NAME}] A single config cannot define both 'remotes' and 'exposes'. Split into two configs (one host, one remote) and run them as separate Rollipop processes.`);
+	let resolvedConfig = null;
+	let normalized = null;
+	let broadcast = null;
+	const exposesAbsolute = {};
+	const sharedRoots = new Set(collectSharedNames(federationConfig));
+	let debounceTimer = null;
+	return {
+		name: PLUGIN_NAME,
+		config(pluginConfig) {
+			const serializer = pluginConfig.serializer ??= {};
+			if (hasExposes) {
+				serializer.prelude = [];
+				serializer.polyfills = [];
+				return { dangerously_overrideRolldownOptions: (opts) => ({
+					input: opts.input,
+					output: {
+						...opts.output,
+						format: "iife"
+					}
+				}) };
+			}
+			if (hasRemotes && config.runtime?.implement != null) (serializer.polyfills ??= []).push({
+				type: "iife",
+				code: config.runtime.implement
+			});
+		},
+		configResolved(config) {
+			resolvedConfig = config;
+			normalized = normalizeConfig(federationConfig, config.root);
+			if (hasExposes) for (const [key, filePath] of Object.entries(normalized.exposes)) exposesAbsolute[key] = path.resolve(config.root, filePath);
+		},
+		resolveId: { handler(source) {
+			if (hasExposes && sharedRoots.has(source)) return { id: VIRTUAL_SHARED_SHIM_PREFIX + source };
+			if (hasRemotes && normalized != null) {
+				const remoteNames = Object.keys(normalized.remotes);
+				for (const name of remoteNames) if (source === name || source.startsWith(`${name}/`)) return { id: VIRTUAL_REMOTE_PROXY_PREFIX + source };
+			}
+			const resolved = resolveVirtualId(source);
+			if (resolved != null) return { id: resolved };
+			return null;
+		} },
+		load: {
+			filter: [include(id(prefixRegex(VIRTUAL_PREFIX)))],
+			handler(id) {
+				if (id.startsWith(VIRTUAL_SHARED_SHIM_PREFIX)) return {
+					code: generateSharedShimCode(id.slice(VIRTUAL_SHARED_SHIM_PREFIX.length)),
+					moduleType: "js"
+				};
+				if (id.startsWith(VIRTUAL_REMOTE_PROXY_PREFIX)) return {
+					code: generateRemoteProxyCode({
+						remoteId: id.slice(VIRTUAL_REMOTE_PROXY_PREFIX.length),
+						reactAware: resolvedConfig?.mode !== "production"
+					}),
+					moduleType: "js"
+				};
+				if (normalized == null) return null;
+				const code = loadVirtualModule(id, normalized);
+				if (code != null) return {
+					code,
+					moduleType: "js"
+				};
+				return null;
+			}
+		},
+		transform: { handler(code, id) {
+			if (normalized == null || resolvedConfig == null) return null;
+			if (id.startsWith("\0rollipop:module-federation:")) return null;
+			const isEntry = this.getModuleInfo(id)?.isEntry ?? false;
+			if (hasExposes) {
+				if (!isEntry) return null;
+				const containerCode = generateRemoteEntryCode({
+					name: normalized.name,
+					exposes: exposesAbsolute
+				});
+				const ms = new MagicString(code);
+				ms.append("\n" + containerCode);
+				return {
+					code: ms.toString(),
+					map: ms.generateMap({
+						hires: true,
+						source: id
+					})
+				};
+			}
+			if (hasRemotes && isEntry) return transformHostEntry(code, id);
+			return null;
+		} },
+		watchChange() {
+			if (!hasExposes || broadcast == null) return;
+			if (debounceTimer != null) clearTimeout(debounceTimer);
+			debounceTimer = setTimeout(() => {
+				debounceTimer = null;
+				broadcast?.();
+			}, 100);
+		},
+		configureServer(server) {
+			if (!hasExposes) return;
+			broadcast = () => {
+				server.hot.sendAll(HMR_EVENT, { name: federationConfig.name });
+			};
+		}
+	};
+}
+function collectSharedNames(config) {
+	const shared = config.shared;
+	if (shared == null) return [];
+	return Array.isArray(shared) ? shared : Object.keys(shared);
+}
+//#endregion
+export { moduleFederationPlugin as federation };

package/dist/runtime.d.ts

@@ -0,0 +1,17 @@
+//#region src/runtime.d.ts
+interface ModuleFederationScriptLoader {
+  loadScript(args: {
+    scriptId: string;
+    url: string;
+    parentUrl?: string;
+  }): Promise<void>;
+}
+interface RemoteEntryExports {
+  init(shareScope: unknown, initScope?: unknown[]): void | Promise<void>;
+  get(modulePath: string): () => Promise<unknown>;
+}
+declare global {
+  var __rollipop_script_loader__: ModuleFederationScriptLoader | undefined;
+}
+//#endregion
+export { ModuleFederationScriptLoader, RemoteEntryExports };

package/dist/runtime.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,4 +1,52 @@
 {
   "name": "@rollipop/plugin-module-federation",
-  "version": "0.0.0"
-}
+  "version": "0.1.0-alpha.20",
+  "homepage": "https://github.com/leegeunhyeok/rollipop#readme",
+  "bugs": {
+    "url": "https://github.com/leegeunhyeok/rollipop/issues"
+  },
+  "license": "MIT",
+  "author": "leegeunhyeok <dev.ghlee@gmail.com> (https://github.com/leegeunhyeok)",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/leegeunhyeok/rollipop.git",
+    "directory": "packages/plugin-module-federation"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./runtime": {
+      "types": "./dist/runtime.d.ts",
+      "default": "./dist/runtime.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "prepack": "yarn build",
+    "typecheck": "tsc --noEmit",
+    "test": "vp test --run",
+    "build": "vp pack"
+  },
+  "dependencies": {
+    "@module-federation/runtime": "^2.4.0",
+    "@module-federation/sdk": "^2.4.0",
+    "dedent": "^1.7.2",
+    "magic-string": "^0.30.21"
+  },
+  "devDependencies": {
+    "rollipop": "0.1.0-alpha.20",
+    "typescript": "6.0.3",
+    "vite-plus": "latest"
+  },
+  "peerDependencies": {
+    "rollipop": "0.1.0-alpha.20"
+  }
+}

package/.editorconfig

@@ -1,10 +0,0 @@
-root = true
-
-[*]
-end_of_line = lf
-insert_final_newline = true
-
-[*.{js,json,yml}]
-charset = utf-8
-indent_style = space
-indent_size = 2

package/.gitattributes

@@ -1,4 +0,0 @@
-/.yarn/**            linguist-vendored
-/.yarn/releases/*    binary
-/.yarn/plugins/**/*  binary
-/.pnp.*              binary linguist-generated