@lvetechs/micro-app 1.1.0 → 1.1.3

package/README.md

@@ -26,7 +26,43 @@ npm install @lvetechs/micro-app
 
 ## 在 React 项目中使用
 
-### 方式一：函数式实例化
+### 方式一：mountMicroApp（推荐）
+
+使用 `mountMicroApp` 简化微应用挂载，自动创建容器：
+
+```tsx
+import { mountMicroApp } from '@lvetechs/micro-app'
+import { useEffect, useRef } from 'react'
+
+function App() {
+  const appRef = useRef<ReturnType<typeof mountMicroApp> | null>(null)
+
+  useEffect(() => {
+    // 创建并挂载微应用
+    const result = mountMicroApp({
+      app: {
+        name: 'my-app',
+        entry: 'http://localhost:3001',
+        container: 'app-container',  // 无需手动创建容器
+      },
+      onStatusChange: (status) => console.log('状态:', status),
+      onError: (error) => console.error('错误:', error),
+      onLoad: () => console.log('加载完成'),
+    })
+    
+    result.mount()
+    appRef.current = result
+
+    return () => {
+      result.destroy()
+    }
+  }, [])
+
+  return <div id="app-container" />
+}
+```
+
+### 方式二：createMicroApp
 
 ```tsx
 import { createMicroApp } from '@lvetechs/micro-app'
@@ -231,7 +267,45 @@ function App() {
 
 ## 在 Vue 项目中使用
 
-### 方式一：函数式实例化
+### 方式一：mountMicroApp（推荐）
+
+使用 `mountMicroApp` 简化微应用挂载，自动创建容器：
+
+```vue
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue'
+import { mountMicroApp } from '@lvetechs/micro-app'
+
+const appRef = ref<ReturnType<typeof mountMicroApp> | null>(null)
+
+onMounted(() => {
+  // 创建并挂载微应用
+  const result = mountMicroApp({
+    app: {
+      name: 'my-app',
+      entry: 'http://localhost:3001',
+      container: 'app-container',  // 无需手动创建容器
+    },
+    onStatusChange: (status) => console.log('状态:', status),
+    onError: (error) => console.error('错误:', error),
+    onLoad: () => console.log('加载完成'),
+  })
+  
+  result.mount()
+  appRef.value = result
+})
+
+onUnmounted(() => {
+  appRef.value?.destroy()
+})
+</script>
+
+<template>
+  <div id="app-container" />
+</template>
+```
+
+### 方式二：createMicroApp
 
 与 React 项目相同，使用 `createMicroApp` 函数：
 

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/functions/mountMicroApp.d.ts

@@ -0,0 +1,91 @@
+import { SubAppConfig, MicroAppStatus, MicroAppService } from '../types';
+
+/**
+ * 简化的微应用配置
+ */
+export interface SimpleSubAppConfig {
+    /** 应用名称 */
+    name: string;
+    /** 应用入口 URL */
+    entry: string;
+    /** 挂载容器选择器 */
+    container: string;
+    /** 路由规则 */
+    activeRule?: string;
+}
+/**
+ * mountMicroApp 配置
+ */
+export interface MountMicroAppOptions {
+    /** 子应用配置 */
+    app: SimpleSubAppConfig;
+    /** 错误回调 */
+    onError?: (error: Error) => void;
+    /** 状态变化回调 */
+    onStatusChange?: (status: MicroAppStatus) => void;
+    /** 加载完成回调 */
+    onLoad?: () => void;
+    /** 加载模式 */
+    mode?: 'iframe' | 'dynamic';
+}
+/**
+ * mountMicroApp 返回值
+ */
+export interface MountResult {
+    /** 启动应用 */
+    mount: () => void;
+    /** 卸载应用 */
+    unmount: () => void;
+    /** 重新加载 */
+    reload: () => void;
+    /** 销毁 */
+    destroy: () => void;
+}
+/**
+ * 创建并挂载微应用的简化函数
+ *
+ * @param options 配置项
+ * @returns 控制函数
+ *
+ * @example
+ * // React 使用
+ * useEffect(() => {
+ *   const { mount } = mountMicroApp({
+ *     app: { name: 'my-app', entry: 'http://localhost:3001', container: '#app' }
+ *   })
+ *   mount()
+ *   return () => destroy()
+ * }, [])
+ *
+ * @example
+ * // Vue 使用
+ * onMounted(() => {
+ *   const { mount } = mountMicroApp({
+ *     app: { name: 'my-app', entry: 'http://localhost:3001', container: '#app' }
+ *   })
+ *   mount()
+ * })
+ *
+ * onUnmounted(() => {
+ *   result?.destroy()
+ * })
+ */
+export declare function mountMicroApp(options: MountMicroAppOptions): MountResult;
+/**
+ * 批量挂载多个微应用
+ *
+ * @param apps 子应用配置数组
+ * @param options 全局配置
+ * @returns 应用名称到控制函数的映射
+ *
+ * @example
+ * const apps = mountMicroApps([
+ *   { name: 'app1', entry: 'http://localhost:3001', container: '#app1' },
+ *   { name: 'app2', entry: 'http://localhost:3002', container: '#app2' },
+ * ])
+ *
+ * // 启动所有
+ * Object.values(apps).forEach(app => app.mount())
+ */
+export declare function mountMicroApps(apps: SimpleSubAppConfig[], options?: Omit<MountMicroAppOptions, 'app'>): Record<string, MountResult>;
+export type { MicroAppService, MicroAppStatus, SubAppConfig };

package/dist/index.d.ts

@@ -8,12 +8,13 @@
  * 同时支持 React 和 Vue
  *
  * 使用方式：
- * - React: import { MicroApp, createMicroApp } from '@lvetechs/micro-app'
- * - Vue:   import { createMicroApp } from '@lvetechs/micro-app'
- *          并使用 src/components/MicroAppVue.vue 组件
+ * - React: import { MicroApp, createMicroApp, mountMicroApp } from '@lvetechs/micro-app'
+ * - Vue:   import { createMicroApp, mountMicroApp } from '@lvetechs/micro-app'
  */
 export type { MicroAppStatus, LoadMode, SubAppConfig, MicroAppInfo, MicroAppInstance, MicroAppOptions, MicroAppService, } from './types';
 export { createMicroApp } from './core/MicroAppManager';
+export { mountMicroApp, mountMicroApps } from './functions/mountMicroApp';
+export type { MountMicroAppOptions, MountResult, SimpleSubAppConfig } from './functions/mountMicroApp';
 export { MicroApp } from './components/MicroApp';
 export type { MicroAppProps } from './components/MicroApp';
 export { ErrorBoundary } from './components/ErrorBoundary';