@lvetechs/micro-app 1.0.3 → 1.1.2

package/README.md

@@ -16,16 +16,17 @@ npm install @lvetechs/micro-app
 {
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react-dom": ">=16.8.0",
+    "vue": ">=3.0.0"
   }
 }
 ```
 
-## 两种使用模式
+> **注意**：Vue 是可选依赖。如果在 Vue 项目中使用，需要安装 Vue；如果在 React 项目中使用，需要安装 React。
 
-### 模式一：函数式实例化
+## 在 React 项目中使用
 
-使用 `createMicroApp` 函数创建微应用服务实例，通过返回的实例方法控制应用。
+### 方式一：函数式实例化
 
 ```tsx
 import { createMicroApp } from '@lvetechs/micro-app'
@@ -228,6 +229,84 @@ function App() {
 <!-- 组件式会自动创建，但容器选择器需要匹配配置 -->
 ```
 
+## 在 Vue 项目中使用
+
+### 方式一：函数式实例化
+
+与 React 项目相同，使用 `createMicroApp` 函数：
+
+```vue
+<script setup lang="ts">
+import { createMicroApp } from '@lvetechs/micro-app'
+
+const microApp = createMicroApp({
+  apps: [
+    {
+      name: 'react-app',
+      entry: 'http://localhost:3001',
+      container: '#react-app-container',
+      mode: 'iframe',
+    },
+  ],
+  onStatusChange: (name, status) => {
+    console.log(`[${name}] 状态变化: ${status}`)
+  },
+})
+
+// 启动应用
+microApp.startApp('react-app')
+</script>
+
+<template>
+  <div id="react-app-container"></div>
+</template>
+```
+
+### 方式二：使用 Vue 组件
+
+在 Vue 3 项目中可以使用 `MicroAppVue.vue` 组件：
+
+```vue
+<script setup lang="ts">
+import { ref } from 'vue'
+import MicroAppVue from '@lvetechs/micro-app/dist/components/MicroAppVue.vue'
+
+const apps = [
+  {
+    name: 'react-app',
+    entry: 'http://localhost:3001',
+    container: '#vue-app-container',
+    active_rule: '/app/react',
+  },
+  {
+    name: 'vue-app',
+    entry: 'http://localhost:3002',
+    container: '#vue-app-container',
+    active_rule: '/app/vue',
+  },
+]
+
+const activeApp = ref(apps[0].name)
+</script>
+
+<template>
+  <div>
+    <!-- 切换按钮 -->
+    <button @click="activeApp = 'react-app'">React App</button>
+    <button @click="activeApp = 'vue-app'">Vue App</button>
+    
+    <!-- 微应用组件 -->
+    <MicroAppVue
+      :apps="apps"
+      :active-app="activeApp"
+      @status-change="(name, status) => console.log(name, status)"
+    />
+  </div>
+</template>
+```
+
+> **注意**：使用 Vue 组件时，需要在项目中安装 `@vitejs/plugin-vue`。
+
 ## 打包
 
 ```bash

package/dist/components/MicroAppVue.vue

@@ -0,0 +1,138 @@
+/**
+ * ============================================
+ * 微应用组件 - Vue 版本
+ * ============================================
+ * 
+ * 轻量级微前端框架 - Vue 集成
+ */
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue'
+import { createMicroApp } from '../core/MicroAppManager'
+import type { SubAppConfig, MicroAppStatus, MicroAppService } from '../types'
+
+// Props 定义
+interface Props {
+  /** 子应用配置数组 */
+  apps: SubAppConfig[]
+  /** 当前激活的应用名称（只渲染一个应用） */
+  activeApp?: string
+  /** 错误回调 */
+  onError?: (error: Error, appName?: string) => void
+  /** 状态变化回调 */
+  onStatusChange?: (name: string, status: MicroAppStatus) => void
+  /** 加载完成回调 */
+  onLoad?: (appName: string) => void
+  /** 自定义加载中 UI */
+  loading?: any
+  /** 自定义错误 UI */
+  errorFallback?: any
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  activeApp: '',
+})
+
+// 记录当前已启动的应用
+const startedAppsRef = ref<Set<string>>(new Set())
+
+// 微应用服务实例
+let service: MicroAppService | null = null
+
+// 初始化微应用服务
+onMounted(() => {
+  service = createMicroApp({
+    apps: props.apps,
+    onError: props.onError,
+    onStatusChange: (name, status) => {
+      props.onStatusChange?.(name, status)
+    },
+    onLoad: props.onLoad,
+  })
+  
+  // 初始启动 activeApp
+  if (props.activeApp) {
+    startApp(props.activeApp)
+  }
+})
+
+// 清理
+onUnmounted(() => {
+  // 停止所有已启动的应用
+  startedAppsRef.value.forEach(appName => {
+    service?.stopApp(appName)
+  })
+})
+
+// 监听 activeApp 变化
+watch(() => props.activeApp, async (newApp, oldApp) => {
+  if (!service) return
+  
+  // 停止旧应用
+  if (oldApp && oldApp !== newApp && startedAppsRef.value.has(oldApp)) {
+    service.stopApp(oldApp)
+    startedAppsRef.value.delete(oldApp)
+  }
+  
+  // 启动新应用
+  if (newApp && newApp !== oldApp) {
+    await startApp(newApp)
+  }
+})
+
+// 启动应用（等待 DOM 就绪）
+async function startApp(appName: string) {
+  if (!service) return
+  
+  const appConfig = props.apps.find(app => app.name === appName)
+  if (!appConfig) return
+  
+  // 等待 DOM 渲染完成
+  await nextTick()
+  
+  const tryStartApp = () => {
+    const containerElement = document.querySelector(appConfig.container)
+    if (!containerElement) {
+      requestAnimationFrame(tryStartApp)
+      return
+    }
+    
+    if (!startedAppsRef.value.has(appName)) {
+      service?.startApp(appName)
+      startedAppsRef.value.add(appName)
+    }
+  }
+  
+  requestAnimationFrame(tryStartApp)
+}
+
+// 获取当前激活的应用配置
+const activeAppConfig = computed(() => {
+  if (!props.activeApp) return null
+  return props.apps.find(app => app.name === props.activeApp)
+})
+</script>
+
+<template>
+  <div class="micro-app-wrapper">
+    <!-- 渲染激活的应用容器 -->
+    <div
+      v-if="activeAppConfig"
+      :id="activeAppConfig.container.replace('#', '')"
+      class="micro-app-container"
+      :data-micro-app="activeAppConfig.name"
+    />
+  </div>
+</template>
+
+<style scoped>
+.micro-app-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+.micro-app-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/dist/index.d.ts

@@ -5,6 +5,12 @@
  *
  * 轻量级微前端框架
  * 支持函数式实例化和组件式实例化两种模式
+ * 同时支持 React 和 Vue
+ *
+ * 使用方式：
+ * - React: import { MicroApp, createMicroApp } from '@lvetechs/micro-app'
+ * - Vue:   import { createMicroApp } from '@lvetechs/micro-app'
+ *          并使用 src/components/MicroAppVue.vue 组件
  */
 export type { MicroAppStatus, LoadMode, SubAppConfig, MicroAppInfo, MicroAppInstance, MicroAppOptions, MicroAppService, } from './types';
 export { createMicroApp } from './core/MicroAppManager';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvetechs/micro-app",
-  "version": "1.0.3",
+  "version": "1.1.2",
   "description": "轻量级微前端框架 - 支持函数式和组件式实例化",
   "type": "module",
   "main": "dist/index.js",
@@ -22,7 +22,19 @@
   "peerDependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.30.3"
+    "react-router-dom": "^6.30.3",
+    "vue": "^3.4.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    }
   },
   "devDependencies": {
     "@types/react": "^18.2.66",
@@ -30,6 +42,7 @@
     "@typescript-eslint/eslint-plugin": "^7.2.0",
     "@typescript-eslint/parser": "^7.2.0",
     "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-vue": "^5.0.0",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.0",
@@ -38,7 +51,8 @@
     "tailwindcss": "^3.4.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.0",
-    "vite-plugin-dts": "^3.9.1"
+    "vite-plugin-dts": "^3.9.1",
+    "vue": "^3.4.0"
   },
   "keywords": [
     "micro-frontend",
@@ -50,7 +64,7 @@
   "license": "MIT",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build && node scripts/postbuild.mjs",
     "preview": "vite preview",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   }