{"_id":"@ajay_gummalla/micro-frontend-client","_rev":"4-bc0a3d8fb59db679b5c1a49abd75a4d9","name":"@ajay_gummalla/micro-frontend-client","dist-tags":{"latest":"2.0.0"},"versions":{"1.0.2":{"name":"@ajay_gummalla/micro-frontend-client","version":"1.0.2","keywords":["micro-frontend","react","vue","angular","svelte","microfrontends","client"],"author":{"name":"ajay_gummalla"},"license":"MIT","_id":"@ajay_gummalla/micro-frontend-client@1.0.2","maintainers":[{"name":"ajay_kumar_gummalla","email":"ajay.gummalla20@gmail.com"}],"homepage":"https://github.com/ajaygummalla20/MFE#readme","bugs":{"url":"https://github.com/ajaygummalla20/MFE/issues"},"dist":{"shasum":"b351a62ab97613cd218c6cb7fdf433b9f3e6618e","tarball":"https://registry.npmjs.org/@ajay_gummalla/micro-frontend-client/-/micro-frontend-client-1.0.2.tgz","fileCount":15,"integrity":"sha512-xxoYS3kXo31ExQaNKUnourAo1hDqJmZIe+azDftejR0oqgn00pVo8RFesoIX9IQ7tHxSGRf42o2rfjWSAyScXQ==","signatures":[{"sig":"MEUCIH3FmkHZPiM9m2atRX38NhwEjcGm0vtT2WhWQH5XKru3AiEA8oK+hxeZCtUaD9q7QKd+eayQgY0CwEs+BZLY3iKrArI=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19958},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"d2994b8ba6d851d78b920a4f518d383ec521bd6a","scripts":{"dev":"tsc --watch","build":"tsc","clean":"rm -rf dist","prepublishOnly":"pnpm build"},"_npmUser":{"name":"ajay_kumar_gummalla","email":"ajay.gummalla20@gmail.com"},"repository":{"url":"git+https://github.com/ajaygummalla20/MFE.git","type":"git"},"_npmVersion":"10.8.2","description":"Helper utilities for building micro-frontend client applications","directories":{},"_nodeVersion":"20.20.0","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","react":"^18.2.0","typescript":"^5.3.3"},"peerDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/micro-frontend-client_1.0.2_1771400355215_0.32449843792249755","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@ajay_gummalla/micro-frontend-client","version":"1.0.4","keywords":["micro-frontend","react","vue","angular","svelte","microfrontends","client"],"author":{"name":"ajay_gummalla"},"license":"MIT","_id":"@ajay_gummalla/micro-frontend-client@1.0.4","maintainers":[{"name":"ajay_kumar_gummalla","email":"ajay.gummalla20@gmail.com"}],"homepage":"https://github.com/ajaygummalla20/MFE#readme","bugs":{"url":"https://github.com/ajaygummalla20/MFE/issues"},"dist":{"shasum":"cbed4b9c2c08859c736c5f5e4468d64c47fd9920","tarball":"https://registry.npmjs.org/@ajay_gummalla/micro-frontend-client/-/micro-frontend-client-1.0.4.tgz","fileCount":15,"integrity":"sha512-Bd2GeW8jdjWhXQST3cMiZCkdH7PYrwhpyN6grvjS5h9n8wHVlchSyHjlZXsfMqF3v4Oj40peIeqPGje+MZZ5Tg==","signatures":[{"sig":"MEUCIGXNdjd0wyraFnx2xgR2tgfbXSDNdYISz55auuvetnCbAiEAv34bXLDNIlzNusvZLjqlHOpRRkIqgQ07OSZNqh+jCfw=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":19957},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"63deee1e6c615f05a5ae780fcc8628b6a2933c0e","scripts":{"dev":"tsc --watch","build":"tsc","clean":"rm -rf dist","prepublishOnly":"pnpm build"},"_npmUser":{"name":"ajay_kumar_gummalla","email":"ajay.gummalla20@gmail.com"},"repository":{"url":"git+https://github.com/ajaygummalla20/MFE.git","type":"git"},"_npmVersion":"10.8.2","description":"Helper utilities for building micro-frontend client applications","directories":{},"_nodeVersion":"20.20.0","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","react":"^18.2.0","typescript":"5.8.3"},"peerDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/micro-frontend-client_1.0.4_1771423514298_0.8876330178769383","host":"s3://npm-registry-packages-npm-production"}},"1.0.5":{"name":"@ajay_gummalla/micro-frontend-client","version":"1.0.5","keywords":["micro-frontend","react","vue","angular","svelte","microfrontends","client"],"author":{"name":"ajay_gummalla"},"license":"MIT","_id":"@ajay_gummalla/micro-frontend-client@1.0.5","maintainers":[{"name":"ajay_kumar_gummalla","email":"ajay.gummalla20@gmail.com"}],"homepage":"https://github.com/ajaygummalla20/MFE#readme","bugs":{"url":"https://github.com/ajaygummalla20/MFE/issues"},"dist":{"shasum":"efae875aa2ce9b05a83622c1e9cb7a2ff677f642","tarball":"https://registry.npmjs.org/@ajay_gummalla/micro-frontend-client/-/micro-frontend-client-1.0.5.tgz","fileCount":15,"integrity":"sha512-UoTUAmTcZP6L1g3h5Pc5ShQBxF3Q6l22dDKk3Vtx/yLHF6PWv4Dfdnx5YSpMGMqLA5+VPTgaATJGVCmPZe+ykw==","signatures":[{"sig":"MEUCIQCOcXCTkwHW4TnF6YszMjEA6EGfkXieKwROJufbXhWPMQIgNzEGRYWHRIoZH20toUt94jV+Zh6VeHNRmNDQi62XFEg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":20497},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"159a23b7adff5031701bc5a0f17e5633e5576483","scripts":{"dev":"tsc --watch","build":"tsc","clean":"rm -rf dist","prepublishOnly":"pnpm build"},"_npmUser":{"name":"ajay_kumar_gummalla","email":"ajay.gummalla20@gmail.com"},"repository":{"url":"git+https://github.com/ajaygummalla20/MFE.git","type":"git"},"_npmVersion":"10.8.2","description":"Helper utilities for building micro-frontend client applications","directories":{},"_nodeVersion":"20.20.0","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.4.0","react":"^18.2.0","typescript":"5.8.3"},"peerDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/micro-frontend-client_1.0.5_1771483019201_0.596373705851565","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@ajay_gummalla/micro-frontend-client","version":"2.0.0","description":"Helper utilities for building micro-frontend client applications","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"tsc","dev":"tsc --watch","clean":"rm -rf dist","prepublishOnly":"pnpm build"},"keywords":["micro-frontend","react","vue","angular","svelte","microfrontends","client"],"author":{"name":"ajay_gummalla"},"license":"MIT","peerDependencies":{},"devDependencies":{"typescript":"5.8.3","react":"^18.2.0","vue":"^3.4.0"},"repository":{"type":"git","url":"git+https://github.com/ajaygummalla20/MFE.git"},"_id":"@ajay_gummalla/micro-frontend-client@2.0.0","gitHead":"1cdf5edfd3f43f767e8337fb8d94a67dae35a2de","bugs":{"url":"https://github.com/ajaygummalla20/MFE/issues"},"homepage":"https://github.com/ajaygummalla20/MFE#readme","_nodeVersion":"20.20.2","_npmVersion":"10.8.2","dist":{"integrity":"sha512-HwkWZvpLMRvhmRIKqQIbY864i1K5565OcygNp6tMdmb9rR0PQhcvn4cHIP/M+vEC7H6cLOtDmSRliRyOUlZzAg==","shasum":"a18225ea6a262dc7f8bd1747df9638ab6ced4661","tarball":"https://registry.npmjs.org/@ajay_gummalla/micro-frontend-client/-/micro-frontend-client-2.0.0.tgz","fileCount":15,"unpackedSize":23049,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIBceKOU8K37y7SHqp5RuUt1YH0dZyNeWbUW9lQCIMEAbAiEApbPk6EvCfC2xqLGavyGzeefRkMUE/8d2ypi6vRoDBDg="}]},"_npmUser":{"name":"ajay_kumar_gummalla","email":"ajay.gummalla20@gmail.com"},"directories":{},"maintainers":[{"name":"ajay_kumar_gummalla","email":"ajay.gummalla20@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/micro-frontend-client_2.0.0_1778491488206_0.8464649885612543"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-18T07:39:15.140Z","modified":"2026-05-11T09:24:48.747Z","1.0.2":"2026-02-18T07:39:15.434Z","1.0.4":"2026-02-18T14:05:14.449Z","1.0.5":"2026-02-19T06:36:59.347Z","2.0.0":"2026-05-11T09:24:48.599Z"},"bugs":{"url":"https://github.com/ajaygummalla20/MFE/issues"},"author":{"name":"ajay_gummalla"},"license":"MIT","homepage":"https://github.com/ajaygummalla20/MFE#readme","keywords":["micro-frontend","react","vue","angular","svelte","microfrontends","client"],"repository":{"type":"git","url":"git+https://github.com/ajaygummalla20/MFE.git"},"description":"Helper utilities for building micro-frontend client applications","maintainers":[{"name":"ajay_kumar_gummalla","email":"ajay.gummalla20@gmail.com"}],"readme":"# @ajay_gummalla/micro-frontend-client\n\n[![npm version](https://img.shields.io/npm/v/@ajay_gummalla/micro-frontend-client.svg)](https://www.npmjs.com/package/@ajay_gummalla/micro-frontend-client)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\nHelper utilities for building micro-frontend client applications that integrate with [@ajay_gummalla/micro-frontend-host](https://www.npmjs.com/package/@ajay_gummalla/micro-frontend-host).\n\n## Installation\n\n```bash\nnpm install @ajay_gummalla/micro-frontend-client\n# or\npnpm add @ajay_gummalla/micro-frontend-client\n# or\nyarn add @ajay_gummalla/micro-frontend-client\n```\n\n## Quick Start\n\n### React\n\n```typescript\nimport React from 'react';\nimport { createReactMicroFrontend } from '@ajay_gummalla/micro-frontend-client';\nimport App from './App';\n\ncreateReactMicroFrontend({\n  name: 'myReactApp',\n  rootComponent: App\n});\n\n// Your App component receives props\nfunction App({ config, onNavigate }) {\n  return (\n    <div>\n      <h1>{config.title}</h1>\n      <button onClick={() => onNavigate('/home')}>\n        Go Home\n      </button>\n    </div>\n  );\n}\n```\n\n### Vue\n\n```typescript\nimport { createApp } from 'vue';\nimport { createVueMicroFrontend } from '@ajay_gummalla/micro-frontend-client';\nimport App from './App.vue';\nimport router from './router';\nimport store from './store';\n\ncreateVueMicroFrontend({\n  name: 'myVueApp',\n  rootComponent: App,\n  router,\n  store\n});\n```\n\n```vue\n<!-- App.vue -->\n<template>\n  <div>\n    <h1>{{ config.title }}</h1>\n    <button @click=\"goHome\">Go Home</button>\n  </div>\n</template>\n\n<script setup>\nimport { inject } from 'vue';\n\nconst config = inject('externalProps');\nconst onNavigate = inject('onNavigate');\n\nconst goHome = () => onNavigate('/home');\n</script>\n```\n\n### Vanilla JavaScript\n\n```typescript\nimport { createVanillaMicroFrontend } from '@ajay_gummalla/micro-frontend-client';\n\ncreateVanillaMicroFrontend({\n  name: 'myVanillaApp',\n  mount: (container, props) => {\n    container.innerHTML = `\n      <div>\n        <h1>${props.title}</h1>\n        <button id=\"home-btn\">Go Home</button>\n      </div>\n    `;\n    \n    const btn = container.querySelector('#home-btn');\n    btn.addEventListener('click', () => props.onNavigate('/home'));\n    \n    return { container };\n  },\n  unmount: ({ container }) => {\n    container.innerHTML = '';\n  }\n});\n```\n\n### Simple DOM App\n\n```typescript\nimport { createDOMApp } from '@ajay_gummalla/micro-frontend-client';\n\ncreateDOMApp({\n  name: 'myDOMApp',\n  render: (container, props) => {\n    container.innerHTML = `<h1>${props.title}</h1>`;\n  }\n});\n```\n\n## Manual Registration\n\n```typescript\nimport { registerMicroFrontend } from '@ajay_gummalla/micro-frontend-client';\n\nregisterMicroFrontend({\n  name: 'myCustomApp',\n  \n  mount: (props) => {\n    // Custom mount logic  \n    const app = initializeMyApp(props.container);\n    return app;\n  },\n  \n  unmount: (app) => {\n    // Cleanup\n    app.destroy();\n  }\n});\n```\n\n## TypeScript Support\n\n```typescript\nimport { \n  MicroFrontendMountProps,\n  MicroFrontendApp,\n  MicroFrontendConfig\n} from '@ajay_gummalla/micro-frontend-client';\n\nconst app: MicroFrontendApp = {\n  mount: (props: MicroFrontendMountProps) => {\n    // Your implementation\n  },\n  unmount: (instance) => {\n    // Cleanup\n  }\n};\n```\n\n## Props Interface\n\nYour app receives:\n\n```typescript\ninterface MicroFrontendMountProps {\n  container: HTMLElement;        // Render target\n  basePath: string;              // Current route path\n  routeData?: any;               // Props from host\n  onNavigate?: (path) => void;   // Navigation function\n  parentRouter?: any;            // Host router reference\n  parentRoute?: any;             // Host route reference\n}\n```\n\n## Webpack Configuration\n\nYour app must expose itself on `window`:\n\n```javascript\n// webpack.config.js\nmodule.exports = {\n  output: {\n    filename: 'main.js',\n    library: 'myAppName',\n    libraryTarget: 'window'\n  }\n};\n```\n\n## Complete Example\n\nSee the [examples folder](https://github.com/ajaygummalla20/MFE/tree/main/examples) for complete working examples.\n\n## API Reference\n\n### Functions\n\n- `createReactMicroFrontend(config)` - React integration\n- `createVueMicroFrontend(config)` - Vue integration\n- `createVanillaMicroFrontend(config)` - Vanilla JS integration\n- `createDOMApp(config)` - Simple DOM-based app\n- `registerMicroFrontend(config)` - Manual registration\n- `createLifecycleAdapter(config)` - Custom lifecycle adapter\n\n## Contributing\n\nContributions, suggestions, and improvements are welcome! If you have ideas for new features, bug fixes, or enhancements, please feel free to:\n\n- **Open an issue** on [GitHub](https://github.com/ajaygummalla20/MFE/issues) to report bugs or suggest features\n- **Submit a pull request** with your improvements\n- **Share your feedback** to help make this library better\n\nVisit the repository: [https://github.com/ajaygummalla20/MFE](https://github.com/ajaygummalla20/MFE)\n\nWe appreciate all contributions from the community!\n\n## License\n\nMIT\n","readmeFilename":"README.md"}