{"_id":"@delpi/mfe-zx","_rev":"2-bd06b04f713e78c873dc1df149d05ad1","name":"@delpi/mfe-zx","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@delpi/mfe-zx","version":"1.0.0","keywords":["micro-frontend","microfrontend","mfe","micro-fe","runtime","runtime-loader","dynamic-runtime","micro-frontend-runtime","mfe-runtime","framework-agnostic","framework-independent","cross-framework","event-bus","global-event-bus","cross-app-events","shared-state","state-sync","state-sharing","router-sync","route-sync","cross-app-routing","lazy-load","dynamic-import","remote-module","frontend-architecture","frontend-platform","frontend-infrastructure","monorepo","enterprise-frontend","scalable-frontend","large-scale-app"],"author":{"name":"Delpi.Kye"},"license":"MIT","_id":"@delpi/mfe-zx@1.0.0","maintainers":[{"name":"delpikye","email":"tungvu.it@gmail.com"}],"homepage":"https://github.com/delpikye-v/mfe-zx#readme","bugs":{"url":"https://github.com/delpikye-v/mfe-zx/issues"},"dist":{"shasum":"55f0d61609614deffe896a60ec53177bd51db7e0","tarball":"https://registry.npmjs.org/@delpi/mfe-zx/-/mfe-zx-1.0.0.tgz","fileCount":27,"integrity":"sha512-C3J7sJI37vc24uHP+X3PcZWzQpWkzvfMJ5W9Vzl2P4fldnNvJ3cNivDuZYN0cZUq7QRxl7BLmPCh/GBCyEvRbg==","signatures":[{"sig":"MEUCICB3Tvh3syPMLkvC36nObj52RsAOKjExf/8LD1HVWKzUAiEAv0VgioLTVB8N/u36EZZcAiOa5xNW6+b2sHg1r2EStDI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":63261},"main":"build/index.js","types":"build/index.d.ts","unpkg":"build/index.min.js","module":"build/index.esm.js","browser":"build/index.js","exports":{".":{"import":"./build/index.esm.js","require":"./build/index.js"},"./dev":{"import":"./build/dev.esm.js"}},"gitHead":"96472038624057347c623f65e58821954c6c0129","scripts":{"cb":"npm run clean && npm run build","build":"rollup -c","clean":"rimraf build","prepublishOnly":"npm run build"},"_npmUser":{"name":"delpikye","email":"tungvu.it@gmail.com"},"repository":{"url":"git+https://github.com/delpikye-v/mfe-zx.git","type":"git"},"_npmVersion":"11.6.2","description":"Framework-agnostic micro-frontend runtime (host, event bus, shared state, router sync)","directories":{},"_nodeVersion":"25.1.0","dependencies":{"eventbus-z":"^2.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"ws":"^8.18.3","tslib":"^2.3.1","rimraf":"^3.0.2","rollup":"^2.56.3","typescript":"^4.4.2","@babel/core":"^7.15.0","babel-loader":"^8.2.2","rollup-plugin-copy":"^3.4.0","rollup-plugin-terser":"^7.0.2","@rollup/plugin-commonjs":"^17.1.0","rollup-plugin-typescript2":"^0.29.0","@rollup/plugin-node-resolve":"^11.2.1","rollup-plugin-peer-deps-external":"^2.2.4"},"optionalDependencies":{"ws":"^8.18.3"},"_npmOperationalInternal":{"tmp":"tmp/mfe-zx_1.0.0_1767378980807_0.9697465551543072","host":"s3://npm-registry-packages-npm-production"},"deprecated":"no-support"}},"time":{"created":"2026-01-02T18:36:20.673Z","modified":"2026-01-05T17:04:38.223Z","1.0.0":"2026-01-02T18:36:20.953Z"},"bugs":{"url":"https://github.com/delpikye-v/mfe-zx/issues"},"author":{"name":"Delpi.Kye"},"license":"MIT","homepage":"https://github.com/delpikye-v/mfe-zx#readme","keywords":["micro-frontend","microfrontend","mfe","micro-fe","runtime","runtime-loader","dynamic-runtime","micro-frontend-runtime","mfe-runtime","framework-agnostic","framework-independent","cross-framework","event-bus","global-event-bus","cross-app-events","shared-state","state-sync","state-sharing","router-sync","route-sync","cross-app-routing","lazy-load","dynamic-import","remote-module","frontend-architecture","frontend-platform","frontend-infrastructure","monorepo","enterprise-frontend","scalable-frontend","large-scale-app"],"repository":{"url":"git+https://github.com/delpikye-v/mfe-zx.git","type":"git"},"description":"Framework-agnostic micro-frontend runtime (host, event bus, shared state, router sync)","maintainers":[{"name":"delpikye","email":"tungvu.it@gmail.com"}],"readme":"# 🌐 @delpi/mfe-zx\n\n[![NPM](https://img.shields.io/npm/v/@delpi/mfe-zx.svg)](https://www.npmjs.com/package/@delpi/mfe-zx)\n![Downloads](https://img.shields.io/npm/dt/@delpi/mfe-zx.svg)\n\n[Live Demo](https://codesandbox.io/p/sandbox/c57cwd)\n\n---\n\n## ⚡ Description\n\n**@delpi/mfe-zx** allows you to dynamically load and mount multiple independent frontend apps (MFEs) at runtime. It works with any framework (React, Vue, Svelte, Vanilla JS) without requiring build-time federation.\n\nFeatures:\n\n* Load and mount/unmount remote apps dynamically\n* Share state between MFEs\n* Synchronize routing\n* Optional Shadow DOM isolation\n* Event-driven intent system\n* Dev HMR support\n\n---\n\n## 🛠 Installation\n\n```bash\nnpm install @delpi/mfe-zx\n# or\nyarn add @delpi/mfe-zx\n```\n\n---\n\n## 🚀 Usage\n\n#### 1️⃣ Manual Mount / Unmount (Host controls remotes)\n\n###### 1 Host (React)\n\n```ts\n// import { MFEHost, createSharedStore } from \"@delpi/mfe-zx\"\n// const authStore = createSharedStore({ user: null })\n// const host = new MFEHost({ stores: { auth: authStore } })\n// async function init() {\n//   const productRemote = await host.load(\"http://localhost:3001/remote.js\", \"productApp\")\n//   host.mount(productRemote, document.getElementById(\"product-root\")!, \"productApp\", { isolate: true })\n// }\n\n// init()\n\nimport React from \"react\"\nimport { MFEHost, createSharedStore } from \"@delpi/mfe-zx\"\n\nconst authStore = createSharedStore({ user: null })\n\nconst host = new MFEHost({ stores: { auth: authStore } })\n\nasync function loadVanillaRemote() {\n  const remote = await host.load(\"http://localhost:3001/remote.js\", \"productApp\")\n  host.mount(remote, document.getElementById(\"product-root\")!, \"productApp\")\n}\n\nasync function loadReactRemote() {\n  const remote = await host.load(\"http://localhost:3002/remote.js\", \"cartApp\")\n  host.mount(remote, document.getElementById(\"cart-root\")!, \"cartApp\")\n}\n\nexport default function App() {\n  return (\n    <div>\n      <h1>Host App (React)</h1>\n\n      <button onClick={loadVanillaRemote}>Load Vanilla Remote</button>\n      <div id=\"product-root\" />\n\n      <button onClick={loadReactRemote}>Load React Remote</button>\n      <div id=\"cart-root\" />\n    </div>\n  )\n}\n```\n\n###### 2 Remote (Vanilla JS)\n\n```ts\nexport function mount(el: HTMLElement) {\n  const div = document.createElement(\"div\")\n  div.textContent = \"Hello from Vanilla Remote\"\n  el.appendChild(div)\n}\n\nexport function unmount(el: HTMLElement) {\n  el.innerHTML = \"\"\n}\n\n;(window as any).productApp = { mount, unmount }\n```\n\n###### 3 Remote Example (React)\n\n```ts\nimport React from \"react\"\nimport ReactDOM from \"react-dom/client\"\n\nfunction App({ auth }: any) {\n  return <div>Hello React Remote, user: {auth.user?.name ?? \"Guest\"}</div>\n}\n\nexport function mount(el: HTMLElement, ctx: any) {\n  const root = ReactDOM.createRoot(el)\n  ;(el as any)._reactRoot = root\n  root.render(<App auth={ctx.stores.auth.getState()} />)\n}\n\nexport function unmount(el: HTMLElement) {\n  const root = (el as any)._reactRoot\n  root?.unmount()\n  el.innerHTML = \"\"\n}\n\n;(window as any).cartApp = { mount, unmount }\n```\n\n---\n\n#### 2️⃣ Intent-based (Dispatch intents → load/mount remotes)\n```ts\nimport React from \"react\"\nimport { MFEHost, createIntentEngine, createIntentResolver } from \"@delpi/mfe-zx\"\n\n// Host & intent engine\nconst host = new MFEHost({ stores: {} })\nconst intentEngine = createIntentEngine()\n\n// Map intents → remotes\nconst intentMap = {\n  OPEN_PRODUCT: {\n    mfe: \"productApp\",\n    url: \"http://localhost:3001/remote.js\",\n    global: \"productApp\",\n    target: () => document.getElementById(\"product-root\")!,\n  },\n  OPEN_CART: {\n    mfe: \"cartApp\",\n    url: \"http://localhost:3002/remote.js\",\n    global: \"cartApp\",\n    target: () => document.getElementById(\"cart-root\")!,\n  }\n}\n\n// Bind intents\ncreateIntentResolver(intentEngine, host, intentMap)\n\nexport default function App() {\n  return (\n    <div>\n      <h1>Intent-based Host (React)</h1>\n\n      <button onClick={() => intentEngine.dispatch(\"OPEN_PRODUCT\")}>\n        Open Vanilla Remote\n      </button>\n      <div id=\"product-root\" />\n\n      <button onClick={() => intentEngine.dispatch(\"OPEN_CART\")}>\n        Open React Remote\n      </button>\n      <div id=\"cart-root\" />\n    </div>\n  )\n}\n```\n\n---\n\n#### 3️⃣ Dev HMR Support\n###### Host Dev Reload\n```ts\nimport { MFEHost } from \"@delpi/mfe-zx\"\nimport { createMFEReloadServer } from \"@delpi/mfe-zx/dev\"\n\nconst host = new MFEHost({})\n\nconst startDevReload = createMFEReloadServer(host, {\n  productApp: {\n    url: \"http://localhost:3001/remote.js\",\n    global: \"productApp\",\n    el: () => document.getElementById(\"product-root\")!,\n  },\n  cartApp: {\n    url: \"http://localhost:3002/remote.js\",\n    global: \"cartApp\",\n    el: () => document.getElementById(\"cart-root\")!,\n  }\n})\n\n// Only start dev reload in dev mode\nif (import.meta.env.DEV) startDevReload()\n```\n\n###### Remote Dev Notify\n```ts\nimport { setupMFEDefNotify } from \"@delpi/mfe-zx/dev\"\n\n// Called in the remote app (productApp / cartApp)\nsetupMFEDefNotify({\n  name: \"productApp\",       // unique remote name\n  version: \"dev\",           // optional version\n  wsUrl: \"ws://localhost:3000/__mfe_reload\"  // dev WS server\n})\n```\n\n---\n\n## 🧩 Shared State Example\n\n```ts\nimport { createSharedStore } from \"@delpi/mfe-zx\"\nconst store = createSharedStore({ auth: { user: null } })\nstore.subscribe(state => console.log(state))\nstore.setState({ auth: { user: { id: 1, name: \"Alice\" } } })\n```\n\n---\n\n## 📦 Router Example\n\n```ts\nimport { createSharedRouter } from \"@delpi/mfe-zx\"\nconst router = createSharedRouter({ eventBus, name: \"productApp\" })\nrouter.go(\"/checkout\")\nrouter.onChange(path => console.log(\"Navigated to\", path))\n```\n\n---\n\n## Micro-Frontend Runtime Comparison\n\n| Feature / Lib                   | **@delpi/mfe-zx**  | Module Federation   | single-spa | qiankun     |\n| ------------------------------- | -----------------  | ------------------- | ---------- | ----------- |\n| Framework-agnostic              | ✅ Yes             | ❌ Mostly Webpack    | ✅ Yes      | ✅ Yes     |\n| Runtime loading                 | ✅ Yes             | ❌ Build-time        | ✅ Yes      | ✅ Yes     |\n| Shadow DOM / isolation          | ✅ Optional        | ❌ Not built-in      | ❌ No       | Partial    |\n| Shared state / EventBus         | ✅ Yes             | ❌ Requires external | ✅ Yes      | ✅ Yes     |\n| Dynamic mount/unmount           | ✅ Yes             | ❌ Build-time        | ✅ Yes      | ✅ Yes     |\n| Dev HMR support                 | ✅ Yes             | ❌ Limited           | ⚠️ Plugin   | ⚠️ Plugin  |\n| Build-time federation required? | ❌ No              | ✅ Yes               | ❌ No       | ❌ No      |\n\n---\n\n\n## Core Concepts\n\n**Host-driven architecture**\n\n- Each micro-frontend is an **independent app**\n- The host coordinates loading, routing, and shared services\n- No direct imports between micro-frontends\n\n---\n\n## 📝 License\n\nMIT License\n","readmeFilename":"README.md"}