@lvetechs/micro-app 1.1.0 → 1.1.2

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvetechs/micro-app",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "轻量级微前端框架 - 支持函数式和组件式实例化",
   "type": "module",
   "main": "dist/index.js",
@@ -64,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"
   }