@lvetechs/micro-app 1.0.0

package/README.md

@@ -0,0 +1,243 @@
+# @lvetechs/micro-app
+
+轻量级微前端框架，支持函数式实例化和组件式实例化两种模式。
+
+## 安装
+
+```bash
+npm install @lvetechs/micro-app
+```
+
+## 依赖
+
+本库依赖以下 peerDependencies：
+
+```json
+{
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  }
+}
+```
+
+## 两种使用模式
+
+### 模式一：函数式实例化
+
+使用 `createMicroApp` 函数创建微应用服务实例，通过返回的实例方法控制应用。
+
+```tsx
+import { createMicroApp } from '@lvetechs/micro-app'
+
+// 1. 创建微应用服务
+const microApp = createMicroApp({
+  apps: [
+    {
+      name: 'react-app',
+      entry: 'http://localhost:3001',
+      container: '#react-app-container',
+      mode: 'iframe',
+    },
+    {
+      name: 'vue-app',
+      entry: 'http://localhost:3002',
+      container: '#vue-app-container',
+      mode: 'iframe',
+    },
+  ],
+  // 状态变化回调
+  onStatusChange: (name, status) => {
+    console.log(`[${name}] 状态变化: ${status}`)
+  },
+  // 错误回调
+  onError: (error, appName) => {
+    console.error(`[${appName}] 错误:`, error)
+  },
+  // 加载完成回调
+  onLoad: (appName) => {
+    console.log(`[${appName}] 加载完成`)
+  },
+})
+
+// 2. 启动所有应用
+microApp.start()
+
+// 3. 或启动指定应用
+microApp.startApp('react-app')
+
+// 4. 停止指定应用
+microApp.stopApp('react-app')
+
+// 5. 重启指定应用
+microApp.restartApp('vue-app')
+
+// 6. 获取单个应用实例
+const app = microApp.getApp('react-app')
+if (app) {
+  app.onStatusChange((status, info) => {
+    console.log('状态变化:', status)
+  })
+}
+
+// 7. 监听所有应用状态变化
+const unsubscribe = microApp.onAppChange((name, status) => {
+  console.log(`[全局监听] ${name}: ${status}`)
+})
+
+// 8. 销毁（在组件卸载时调用）
+microApp.destroy()
+```
+
+详细示例见：`example/FunctionalExample.tsx`
+
+---
+
+### 模式二：组件式实例化
+
+使用 `MicroApp` 或 `SingleMicroApp` 组件直接在页面中使用。
+
+#### 使用 MicroApp 组件（管理多个子应用）
+
+```tsx
+import { MicroApp } from '@lvetechs/micro-app'
+
+function App() {
+  const apps = [
+    {
+      name: 'react-app',
+      entry: 'http://localhost:3001',
+      container: '#react-app-container',
+      mode: 'iframe',
+    },
+    {
+      name: 'vue-app',
+      entry: 'http://localhost:3002',
+      container: '#vue-app-container',
+      mode: 'iframe',
+    },
+  ]
+
+  return (
+    <MicroApp
+      apps={apps}
+      onStatusChange={(name, status) => {
+        console.log(`[${name}] 状态变化: ${status}`)
+      }}
+      onError={(error, appName) => {
+        console.error(`[${appName}] 错误:`, error)
+      }}
+      onLoad={(appName) => {
+        console.log(`[${appName}] 加载完成`)
+      }}
+    >
+      {/* 主应用内容 */}
+      <div>这是主应用</div>
+    </MicroApp>
+  )
+}
+```
+
+#### 使用 SingleMicroApp 组件（管理单个子应用）
+
+```tsx
+import { SingleMicroApp } from '@lvetechs/micro-app'
+
+function App() {
+  return (
+    <SingleMicroApp
+      name="remote-app"
+      entry="http://localhost:3001"
+      container="#app-container"
+      mode="iframe"
+      onStatusChange={(status) => console.log(status)}
+      onLoad={() => console.log('加载完成')}
+      loading={<div>加载中...</div>}
+    />
+  )
+}
+```
+
+详细示例见：`example/ComponentExample.tsx`
+
+---
+
+## API 参考
+
+### 类型定义
+
+#### SubAppConfig
+
+| 属性 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| name | string | 是 | 应用名称，唯一标识 |
+| entry | string | 否 | 远程应用入口 URL |
+| container | string \| HTMLElement | 是 | 挂载容器 DOM 或选择器 |
+| mode | 'iframe' \| 'dynamic' | 否 | 加载模式，默认 iframe |
+| priority | number | 否 | 优先级，数值越大越先加载 |
+| enabled | boolean | 否 | 是否启用，默认 true |
+
+#### MicroAppStatus
+
+| 状态 | 说明 |
+|------|------|
+| idle | 空闲：应用还未启动过 |
+| starting | 启动中：应用正在初始化 |
+| running | 运行中：应用正常运行 |
+| error | 错误：应用遇到问题 |
+| stopped | 已停止：应用已被停止 |
+
+### MicroAppService 接口
+
+| 方法 | 说明 |
+|------|------|
+| start() | 启动所有应用 |
+| stop() | 停止所有应用 |
+| startApp(name) | 启动指定应用 |
+| stopApp(name) | 停止指定应用 |
+| restartApp(name) | 重启指定应用 |
+| getApp(name) | 获取指定应用实例 |
+| getAllApps() | 获取所有应用实例 |
+| onAppChange(callback) | 监听所有应用状态变化 |
+| onStatusChange(name, callback) | 监听指定应用状态变化 |
+| destroy() | 销毁实例 |
+
+### MicroAppInstance 接口
+
+| 方法 | 说明 |
+|------|------|
+| name | 应用名称 |
+| getStatus() | 获取应用状态 |
+| getInfo() | 获取应用信息 |
+| start() | 启动应用 |
+| stop() | 停止应用 |
+| restart() | 重启应用 |
+| updateStatus(status, error?) | 更新状态 |
+| onStatusChange(callback) | 订阅状态变化 |
+| checkHealth() | 健康检查 |
+
+## 容器要求
+
+无论是函数式还是组件式，都需要提前在页面中准备好容器 DOM：
+
+```html
+<!-- 函数式需要手动创建容器 -->
+<div id="react-app-container"></div>
+<div id="vue-app-container"></div>
+
+<!-- 组件式会自动创建，但容器选择器需要匹配配置 -->
+```
+
+## 打包
+
+```bash
+# 构建
+npm run build
+
+# 开发模式（监听文件变化）
+npm run dev
+```
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@lvetechs/micro-app",
+  "version": "1.0.0",
+  "description": "轻量级微前端框架 - 支持函数式和组件式实例化",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.30.3"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.2.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "autoprefixer": "^10.4.19",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0",
+    "vite-plugin-dts": "^3.9.1"
+  },
+  "keywords": [
+    "micro-frontend",
+    "microapp",
+    "react",
+    "iframe"
+  ],
+  "author": "",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "build:lib": "tsc && vite build --mode lib",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
+  }
+}