{"_id":"@ecommerce-platform/app-injector","name":"@ecommerce-platform/app-injector","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@ecommerce-platform/app-injector","version":"1.0.0","description":"Micro-frontend app injector for React applications - provides standardized inject/unmount methods with React 16/17/18+ support","author":{"name":"Ecommerce Platform Team"},"license":"MIT","main":"./dist/index.js","module":"./dist/index.mjs","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.mts","default":"./dist/index.mjs"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.js"}}},"sideEffects":false,"keywords":["micro-frontend","microfrontend","react","module-federation","app-injector","inject","unmount","ecommerce"],"repository":{"type":"git","url":"git+https://github.com/your-org/ecommerce-platform.git","directory":"packages/app-injector"},"bugs":{"url":"https://github.com/your-org/ecommerce-platform/issues"},"homepage":"https://github.com/your-org/ecommerce-platform/tree/main/packages/app-injector#readme","peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"peerDependenciesMeta":{"react":{"optional":false},"react-dom":{"optional":false}},"devDependencies":{"@types/react":"^18.2.0","@types/react-dom":"^18.2.0","react":"^18.2.0","react-dom":"^18.2.0","tsup":"^8.0.0","typescript":"^5.3.0"},"scripts":{"build":"tsup","build:watch":"tsup --watch","typecheck":"tsc --noEmit","clean":"rm -rf dist","prepublishOnly":"npm run clean && npm run build","release":"npm publish --access public"},"engines":{"node":">=16.0.0"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org/"},"_id":"@ecommerce-platform/app-injector@1.0.0","gitHead":"2174b59810aa1be59cf01776a6adb2a921c6825a","_nodeVersion":"18.20.8","_npmVersion":"10.8.2","dist":{"integrity":"sha512-KDLc4IT3T4/aKVRdm/NMvJUjpfzHSM0JmIsT1/7/qwbqaeN0TIYsn1aSMzccQn06iVIaOsrDhbqFFBSFmGbGUA==","shasum":"acd6b2692f140fd55c67fb8bc6cbf298348e02d1","tarball":"https://registry.npmjs.org/@ecommerce-platform/app-injector/-/app-injector-1.0.0.tgz","fileCount":9,"unpackedSize":99079,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIEP1Ec/bE+ExNtGApmJP5prrZtho/R6ruBrFAIW+K/NZAiAlBynpPRbj4pPzS2ZBVa/xQIkUlSRBSxeNgQ6mRGdtUA=="}]},"_npmUser":{"name":"tai.nguyenthanh","email":"tai606760@gmail.com"},"directories":{},"maintainers":[{"name":"tai.nguyenthanh","email":"tai606760@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/app-injector_1.0.0_1765442873340_0.451396626013695"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-11T08:47:53.279Z","1.0.0":"2025-12-11T08:47:53.478Z","modified":"2025-12-11T08:47:53.748Z"},"maintainers":[{"name":"tai.nguyenthanh","email":"tai606760@gmail.com"}],"description":"Micro-frontend app injector for React applications - provides standardized inject/unmount methods with React 16/17/18+ support","homepage":"https://github.com/your-org/ecommerce-platform/tree/main/packages/app-injector#readme","keywords":["micro-frontend","microfrontend","react","module-federation","app-injector","inject","unmount","ecommerce"],"repository":{"type":"git","url":"git+https://github.com/your-org/ecommerce-platform.git","directory":"packages/app-injector"},"author":{"name":"Ecommerce Platform Team"},"bugs":{"url":"https://github.com/your-org/ecommerce-platform/issues"},"license":"MIT","readme":"# @ecommerce-platform/app-injector\n\nA lightweight, type-safe micro-frontend app injector for React applications. Provides standardized inject/unmount methods with automatic React 16/17/18+ support.\n\n## Features\n\n- 🚀 **React Version Agnostic** - Automatically detects and uses the appropriate React rendering API (createRoot for 18+, render for 16/17)\n- 🔄 **Retry Logic** - Enhanced injector with configurable retry mechanism for resilient mounting\n- 📦 **Type-Safe** - Full TypeScript support with comprehensive type definitions\n- 🎯 **Minimal Dependencies** - Only requires React and ReactDOM as peer dependencies\n- 🔧 **Environment Detection** - Built-in utilities for detecting production/staging/development environments\n- 📝 **Debug Mode** - Optional detailed logging for troubleshooting\n\n## Installation\n\n```bash\n# npm\nnpm install @ecommerce-platform/app-injector\n\n# yarn\nyarn add @ecommerce-platform/app-injector\n\n# pnpm\npnpm add @ecommerce-platform/app-injector\n```\n\n### Peer Dependencies\n\nMake sure you have React and ReactDOM installed:\n\n```bash\nnpm install react react-dom\n```\n\n## Quick Start\n\n### Basic Usage\n\n```tsx\nimport { createAppInjector } from '@ecommerce-platform/app-injector';\nimport MyApp from './MyApp';\n\n// Create an injector for your app\nconst MyAppInjector = createAppInjector(MyApp);\n\n// Inject into a container element\nMyAppInjector.inject('app-container', {\n  config: {\n    appContext: {\n      user: { id: '1', email: 'user@example.com' },\n      theme: 'dark',\n    },\n    onNavigate: (path) => console.log('Navigate to:', path),\n  },\n});\n\n// Unmount when needed\nMyAppInjector.unmount('app-container');\n```\n\n### Enhanced Usage with Retry Logic\n\n```tsx\nimport { createEnhancedAppInjector } from '@ecommerce-platform/app-injector';\nimport MyApp from './MyApp';\n\nconst MyAppInjector = createEnhancedAppInjector(MyApp, {\n  maxRetries: 3,\n  retryDelay: 1000,\n  elementTimeout: 5000,\n  debug: true,\n  onSuccess: (id) => console.log(`Mounted in ${id}`),\n  onFailure: (id, error) => console.error(`Failed to mount in ${id}`, error),\n});\n\n// Async injection with retry\nawait MyAppInjector.inject('app-container', {\n  config: {\n    appContext: { user: currentUser },\n  },\n});\n\n// Check if currently mounted\nif (MyAppInjector.isInjected('app-container')) {\n  console.log('App is mounted');\n}\n```\n\n## API Reference\n\n### `createAppInjector(AppComponent)`\n\nCreates a basic app injector.\n\n**Parameters:**\n- `AppComponent` - React component to inject\n\n**Returns:** `AppInjector`\n- `inject(parentElementId, props?)` - Mount the component\n- `unmount(parentElementId)` - Unmount the component\n\n### `createEnhancedAppInjector(AppComponent, options?)`\n\nCreates an enhanced app injector with retry logic.\n\n**Parameters:**\n- `AppComponent` - React component to inject\n- `options` - Configuration options:\n  - `maxRetries` (default: 3) - Number of retry attempts\n  - `retryDelay` (default: 1000) - Delay between retries in ms\n  - `elementTimeout` (default: 5000) - Timeout for element detection\n  - `debug` (default: false) - Enable debug logging\n  - `onSuccess` - Callback on successful injection\n  - `onFailure` - Callback on failed injection\n\n**Returns:** `EnhancedAppInjector`\n- `inject(parentElementId, props?)` - Async mount with retry\n- `unmount(parentElementId)` - Unmount the component\n- `isInjected(parentElementId)` - Check if mounted\n\n### Environment Utilities\n\n```tsx\nimport {\n  getEnvironment,\n  isProductionEnv,\n  isStagingEnv,\n  isDevelopmentEnv,\n  getApiBaseUrl,\n  configureEnvironment,\n} from '@ecommerce-platform/app-injector';\n\n// Check current environment\nconsole.log(getEnvironment()); // 'development' | 'staging' | 'production'\n\n// Configure for your project\nconfigureEnvironment({\n  productionHostname: 'myapp.com',\n  stagingHostname: 'staging.myapp.com',\n  developmentHostnames: ['localhost', 'dev.local'],\n  apiUrls: {\n    production: 'https://api.myapp.com',\n    staging: 'https://api.staging.myapp.com',\n    development: 'http://localhost:8080',\n  },\n});\n```\n\n### Custom Environment Detector\n\n```tsx\nimport { createEnvironmentDetector } from '@ecommerce-platform/app-injector';\n\nconst env = createEnvironmentDetector({\n  productionHostname: 'myapp.com',\n  stagingHostname: 'staging.myapp.com',\n  developmentHostnames: ['localhost'],\n  apiUrls: {\n    production: 'https://api.myapp.com',\n    staging: 'https://api.staging.myapp.com',\n    development: 'http://localhost:8080',\n  },\n});\n\nconsole.log(env.getEnvironment()); // 'development'\nconsole.log(env.getApiBaseUrl()); // 'http://localhost:8080'\n```\n\n## Types\n\n### AppInjectorProps\n\nProps passed to the injected component:\n\n```typescript\ninterface AppInjectorProps {\n  config?: MicroFrontendConfig;\n  [key: string]: unknown;\n}\n\ninterface MicroFrontendConfig {\n  appContext?: AppContext;\n  onNavigate?: (path: string) => void;\n  onLogout?: () => void;\n  onError?: (error: Error) => void;\n}\n\ninterface AppContext {\n  user?: User | null;\n  token?: string | null;\n  theme?: 'light' | 'dark';\n  locale?: string;\n  basePath?: string;\n  apiBaseUrl?: string;\n}\n```\n\n## Use with Module Federation\n\nThis library is designed to work seamlessly with Webpack Module Federation:\n\n```tsx\n// remote-entry.ts (in your micro-frontend)\nimport { createAppInjector } from '@ecommerce-platform/app-injector';\nimport App from './app/App';\n\nexport const StoreAppInjector = createAppInjector(App);\nexport default StoreAppInjector;\n```\n\n```tsx\n// host application\nimport StoreAppInjector from 'store/Module';\n\n// Mount the micro-frontend\nStoreAppInjector.inject('store-container', {\n  config: {\n    appContext: { user: currentUser },\n    onNavigate: (path) => navigate(path),\n  },\n});\n```\n\n## React Version Support\n\n| React Version | Rendering API Used |\n|--------------|-------------------|\n| 18.x, 19.x   | `createRoot`      |\n| 16.x, 17.x   | `ReactDOM.render` |\n\nThe library automatically detects the React version and uses the appropriate API.\n\n## License\n\nMIT\n\n","readmeFilename":"README.md","_rev":"1-22728633d47c9a86b15723295ba12672"}