@hhfenpm/micro-app 1.0.0 → 1.0.2

package/dist/index.esm.js

@@ -1,8 +1,3 @@
-/**
- * 微前端通信桥接
- * 支持父子应用之间的方法调用和通信
- */
-
 const BRIDGE$1 = {
   INVOKE: 'bridge-invoke',
   CALLBACK: 'bridge-callback',
@@ -24,27 +19,15 @@ const safeClone = value => {
   }
 };
 
-/**
- * 初始化通信桥接
- * @param {Object} options - 配置选项
- * @param {boolean} options.isParent - 是否为父应用，默认 false
- * @param {Object} options.vm - Vue 实例（可选）
- * @param {string} options.iframeSelector - iframe 选择器，默认 '#microApp'
- * @param {Object} options.handlers - 处理器对象（父应用需要提供）
- * @returns {void}
- */
 const initBridge = ({
   isParent = false,
   vm,
   iframeSelector = '#microApp',
   handlers = {},
 } = {}) => {
-  // 父应用使用传入的 handlers，子应用为空对象
   const finalHandlers = isParent ? handlers : Object.create(null);
-
   const pending = Object.create(null);
 
-  // 子应用：创建 $base 代理对象，用于调用父应用方法
   if (!isParent && vm) {
     vm.$base = new Proxy(
       {},
@@ -76,7 +59,6 @@ const initBridge = ({
     vm.$baseReady = true;
   }
 
-  // 处理来自子应用的调用请求（父应用）
   const handleInvoke = e => {
     const { action, params, callbackId } = e.data || {};
     if (!action || !callbackId) return
@@ -107,7 +89,6 @@ const initBridge = ({
     }
   };
 
-  // 处理来自父应用的响应（子应用）
   const handleCallback = e => {
     const { callbackId, result } = e.data || {};
     if (!callbackId || !pending[callbackId]) return
@@ -116,7 +97,6 @@ const initBridge = ({
     delete pending[callbackId];
   };
 
-  // 监听消息
   window.addEventListener('message', e => {
     if (e.origin !== window.location.origin) return
 
@@ -126,18 +106,88 @@ const initBridge = ({
   });
 };
 
-/**
- * 微前端核心功能
- * 提供模块路由映射、URL 生成、部署检测等功能
- */
-
-/**
- * 创建微前端核心功能
- * @param {Object} options - 配置选项
- * @param {Function} options.modelMap - 模块路由映射函数，返回 { [moduleName]: string[] }
- * @param {Array<string>|Function} options.enabledModules - 启用的模块列表或获取模块列表的函数
- * @returns {Object} 核心功能对象
- */
+var uiHandler = vm => ({
+  $message: (...args) => vm.$message(...args),
+  $success: msg => vm.$message.success(msg),
+  $warning: msg => vm.$message.warning(msg),
+  $error: msg => vm.$message.error(msg),
+  $notify: options => vm.$notify(options),
+  $confirm: (...args) =>
+    vm
+      .$confirm(...args)
+      .then(() => true)
+      .catch(() => false),
+  $alert: (...args) =>
+    vm
+      .$alert(...args)
+      .then(() => true)
+      .catch(() => false),
+  $prompt: (...args) =>
+    vm
+      .$prompt(...args)
+      .then(res => res.value)
+      .catch(() => null),
+  $loading: options => {
+    const loading = vm.$loading(options);
+    return () => loading.close()
+  },
+});
+
+const noop = () => console.warn('[bridge] electron 不可用');
+
+const KEYS = [
+  'renderer_listen',
+  'web_send',
+  'web_send_path',
+  'show',
+  'hide',
+  'quit',
+  'showAlertDialog',
+  'closeAlertDialog',
+  'closeAlertDialogAndJump',
+  'set_bounds',
+  'get_bounds',
+  'workarea',
+  'center',
+  'maximize',
+  'unmaximize',
+  'is_maximized',
+  'minimize',
+  'open_top',
+  'close_top',
+  'update',
+  'collapse',
+  'unfold',
+  'unfoldMax',
+  'get_version',
+];
+
+function createCs(electron = {}) {
+  const base = Object.fromEntries(
+    KEYS.map(k => [k, typeof electron[k] === 'function' ? electron[k] : noop])
+  );
+  return {
+    ...electron,
+    ...base,
+    is_app:
+      typeof electron.is_app === 'function'
+        ? electron.is_app()
+        : !!electron.is_app,
+  }
+}
+
+function createRegisterHandlers(getElectron) {
+  let electron = {};
+  try {
+    if (typeof getElectron === 'function') electron = getElectron();
+  } catch {}
+
+  return vm => ({
+    ui: uiHandler(vm),
+    cs: createCs(electron),
+  })
+}
+
 function createMicroAppCore({
   modelMap,
   enabledModules,
@@ -148,10 +198,6 @@ function createMicroAppCore({
 
   const MAP = modelMap();
 
-  /**
-   * 获取启用的模块列表
-   * @returns {Array<string>|null}
-   */
   const getEnabledModules = () => {
     if (Array.isArray(enabledModules)) {
       return enabledModules
@@ -159,18 +205,12 @@ function createMicroAppCore({
     if (typeof enabledModules === 'function') {
       return enabledModules()
     }
-    // 默认从 window.GLOBAL_CONFIG.microApp 获取
     if (typeof window !== 'undefined' && window.GLOBAL_CONFIG) {
       return window.GLOBAL_CONFIG.microApp || null
     }
     return null
   };
 
-  /**
-   * 根据路径获取对应的微前端模块名
-   * @param {string} path - 路由路径
-   * @returns {string|null} 模块名，如果不在任何模块中则返回 null
-   */
   const microAppModule = path => {
     const value = path.split('?')[0];
     const key = Object.keys(MAP).find(key => MAP[key].includes(value));
@@ -178,22 +218,12 @@ function createMicroAppCore({
     return DATA?.includes(key) ? key : null
   };
 
-  /**
-   * 生成微前端应用的完整 URL
-   * @param {string} path - 路由路径
-   * @returns {string} 完整的 URL
-   */
   const microAppSrc = path => {
     const module = microAppModule(path);
     const base = window.location.href.split('#')[0];
     return `${base}${module ? `${module}/` : ''}#${path}`
   };
 
-  /**
-   * 检测微前端模块是否已部署
-   * @param {string} module - 模块名
-   * @returns {Promise<boolean>} 是否已部署
-   */
   const microAppDeployed = async module => {
     try {
       const result = await fetch(`/${module}`, {
@@ -213,23 +243,6 @@ function createMicroAppCore({
   }
 }
 
-/**
- * 创建默认的微前端核心功能实例
- * 使用 window.GLOBAL_CONFIG.microApp 作为配置源
- * @param {Function} modelMap - 模块路由映射函数
- * @returns {Object} 核心功能对象
- */
-function createDefaultMicroAppCore(modelMap) {
-  return createMicroAppCore({
-    modelMap,
-  })
-}
-
-/**
- * Vuex 状态同步插件
- * 用于在父子应用之间同步 Vuex store 状态
- */
-
 const MESSAGE = {
   SYNC_FROM_CHILD: 'sync-base-from-child',
   SYNC_FROM_PARENT: 'sync-base-from-parent',
@@ -283,13 +296,6 @@ const syncRouteFromChild = fullPath => {
   }
 };
 
-/**
- * 创建状态同步插件
- * @param {Object} options - 配置选项
- * @param {boolean} options.isParent - 是否为父应用，默认 false
- * @param {string} options.iframeSelector - iframe 选择器，默认 '#microApp'
- * @returns {Function} Vuex 插件函数
- */
 function baseSyncPlugin({
   isParent = false,
   iframeSelector = '#microApp',
@@ -297,7 +303,6 @@ function baseSyncPlugin({
   return store => {
     let latestBaseState = store.state.base;
 
-    // 监听 base 状态变化，自动同步
     store.watch(
       state => state.base,
       newBase => {
@@ -317,7 +322,6 @@ function baseSyncPlugin({
       { deep: true }
     );
 
-    // 附加路由同步功能（子应用使用）
     store.attachRouterSync = router => {
       if (!router || isParent) return
       router.afterEach(to => {
@@ -337,7 +341,6 @@ function baseSyncPlugin({
       });
     };
 
-    // 调用微前端生命周期（父应用使用）
     store.callMicroAppLifeCycle = (type, payload) => {
       if (!isParent) return
       if (!isLifeCycleMessage(type)) return
@@ -348,30 +351,25 @@ function baseSyncPlugin({
       });
     };
 
-    // 处理消息
     const handleMessage = event => {
       if (event.origin !== window.location.origin) return
       const { type, payload, fullPath } = event.data || {};
 
-      // 子应用处理生命周期消息
       if (!isParent && isLifeCycleMessage(type)) {
         window.__MICRO_APP_LIFECYCLE__?.[type]?.(payload);
         return
       }
 
-      // 父应用处理来自子应用的状态同步
       if (isParent && type === MESSAGE.SYNC_FROM_CHILD) {
         store.commit('base/SYNC_STATE', payload);
         return
       }
 
-      // 子应用处理来自父应用的状态同步
       if (!isParent && type === MESSAGE.SYNC_FROM_PARENT) {
         store.commit('base/SYNC_STATE', payload);
         return
       }
 
-      // 父应用响应子应用的状态请求
       if (isParent && type === MESSAGE.REQUEST_FROM_CHILD) {
         postToChild(iframeSelector, {
           type: MESSAGE.SYNC_FROM_PARENT,
@@ -380,13 +378,11 @@ function baseSyncPlugin({
         return
       }
 
-      // 父应用处理子应用的路由变化
       if (isParent && type === MESSAGE.CHILD_ROUTE_CHANGE) {
         syncRouteFromChild(fullPath);
         return
       }
 
-      // 父应用转发其他消息到父窗口
       if (isParent && !isInternalMessage(type) && !isBridgeMessage(type)) {
         window.parent?.postMessage(event.data || {}, '*');
       }
@@ -394,23 +390,12 @@ function baseSyncPlugin({
 
     window.addEventListener('message', handleMessage);
 
-    // 子应用初始化时请求父应用状态
     if (!isParent && window.parent) {
       postToParent({ type: MESSAGE.REQUEST_FROM_CHILD });
     }
   }
 }
 
-/**
- * @hhfenpm/micro-app
- * 微前端通信桥接和状态同步工具
- */
-
-
-var index = {
-  initBridge,
-  createDefaultMicroAppCore,
-  baseSyncPlugin,
-};
+var index = { initBridge, baseSyncPlugin };
 
-export { baseSyncPlugin, createDefaultMicroAppCore, createMicroAppCore, index as default, initBridge };
+export { baseSyncPlugin, createMicroAppCore, createRegisterHandlers, index as default, initBridge };

package/dist/index.js

@@ -2,11 +2,6 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-/**
- * 微前端通信桥接
- * 支持父子应用之间的方法调用和通信
- */
-
 const BRIDGE$1 = {
   INVOKE: 'bridge-invoke',
   CALLBACK: 'bridge-callback',
@@ -28,27 +23,15 @@ const safeClone = value => {
   }
 };
 
-/**
- * 初始化通信桥接
- * @param {Object} options - 配置选项
- * @param {boolean} options.isParent - 是否为父应用，默认 false
- * @param {Object} options.vm - Vue 实例（可选）
- * @param {string} options.iframeSelector - iframe 选择器，默认 '#microApp'
- * @param {Object} options.handlers - 处理器对象（父应用需要提供）
- * @returns {void}
- */
 const initBridge = ({
   isParent = false,
   vm,
   iframeSelector = '#microApp',
   handlers = {},
 } = {}) => {
-  // 父应用使用传入的 handlers，子应用为空对象
   const finalHandlers = isParent ? handlers : Object.create(null);
-
   const pending = Object.create(null);
 
-  // 子应用：创建 $base 代理对象，用于调用父应用方法
   if (!isParent && vm) {
     vm.$base = new Proxy(
       {},
@@ -80,7 +63,6 @@ const initBridge = ({
     vm.$baseReady = true;
   }
 
-  // 处理来自子应用的调用请求（父应用）
   const handleInvoke = e => {
     const { action, params, callbackId } = e.data || {};
     if (!action || !callbackId) return
@@ -111,7 +93,6 @@ const initBridge = ({
     }
   };
 
-  // 处理来自父应用的响应（子应用）
   const handleCallback = e => {
     const { callbackId, result } = e.data || {};
     if (!callbackId || !pending[callbackId]) return
@@ -120,7 +101,6 @@ const initBridge = ({
     delete pending[callbackId];
   };
 
-  // 监听消息
   window.addEventListener('message', e => {
     if (e.origin !== window.location.origin) return
 
@@ -130,18 +110,88 @@ const initBridge = ({
   });
 };
 
-/**
- * 微前端核心功能
- * 提供模块路由映射、URL 生成、部署检测等功能
- */
-
-/**
- * 创建微前端核心功能
- * @param {Object} options - 配置选项
- * @param {Function} options.modelMap - 模块路由映射函数，返回 { [moduleName]: string[] }
- * @param {Array<string>|Function} options.enabledModules - 启用的模块列表或获取模块列表的函数
- * @returns {Object} 核心功能对象
- */
+var uiHandler = vm => ({
+  $message: (...args) => vm.$message(...args),
+  $success: msg => vm.$message.success(msg),
+  $warning: msg => vm.$message.warning(msg),
+  $error: msg => vm.$message.error(msg),
+  $notify: options => vm.$notify(options),
+  $confirm: (...args) =>
+    vm
+      .$confirm(...args)
+      .then(() => true)
+      .catch(() => false),
+  $alert: (...args) =>
+    vm
+      .$alert(...args)
+      .then(() => true)
+      .catch(() => false),
+  $prompt: (...args) =>
+    vm
+      .$prompt(...args)
+      .then(res => res.value)
+      .catch(() => null),
+  $loading: options => {
+    const loading = vm.$loading(options);
+    return () => loading.close()
+  },
+});
+
+const noop = () => console.warn('[bridge] electron 不可用');
+
+const KEYS = [
+  'renderer_listen',
+  'web_send',
+  'web_send_path',
+  'show',
+  'hide',
+  'quit',
+  'showAlertDialog',
+  'closeAlertDialog',
+  'closeAlertDialogAndJump',
+  'set_bounds',
+  'get_bounds',
+  'workarea',
+  'center',
+  'maximize',
+  'unmaximize',
+  'is_maximized',
+  'minimize',
+  'open_top',
+  'close_top',
+  'update',
+  'collapse',
+  'unfold',
+  'unfoldMax',
+  'get_version',
+];
+
+function createCs(electron = {}) {
+  const base = Object.fromEntries(
+    KEYS.map(k => [k, typeof electron[k] === 'function' ? electron[k] : noop])
+  );
+  return {
+    ...electron,
+    ...base,
+    is_app:
+      typeof electron.is_app === 'function'
+        ? electron.is_app()
+        : !!electron.is_app,
+  }
+}
+
+function createRegisterHandlers(getElectron) {
+  let electron = {};
+  try {
+    if (typeof getElectron === 'function') electron = getElectron();
+  } catch {}
+
+  return vm => ({
+    ui: uiHandler(vm),
+    cs: createCs(electron),
+  })
+}
+
 function createMicroAppCore({
   modelMap,
   enabledModules,
@@ -152,10 +202,6 @@ function createMicroAppCore({
 
   const MAP = modelMap();
 
-  /**
-   * 获取启用的模块列表
-   * @returns {Array<string>|null}
-   */
   const getEnabledModules = () => {
     if (Array.isArray(enabledModules)) {
       return enabledModules
@@ -163,18 +209,12 @@ function createMicroAppCore({
     if (typeof enabledModules === 'function') {
       return enabledModules()
     }
-    // 默认从 window.GLOBAL_CONFIG.microApp 获取
     if (typeof window !== 'undefined' && window.GLOBAL_CONFIG) {
       return window.GLOBAL_CONFIG.microApp || null
     }
     return null
   };
 
-  /**
-   * 根据路径获取对应的微前端模块名
-   * @param {string} path - 路由路径
-   * @returns {string|null} 模块名，如果不在任何模块中则返回 null
-   */
   const microAppModule = path => {
     const value = path.split('?')[0];
     const key = Object.keys(MAP).find(key => MAP[key].includes(value));
@@ -182,22 +222,12 @@ function createMicroAppCore({
     return DATA?.includes(key) ? key : null
   };
 
-  /**
-   * 生成微前端应用的完整 URL
-   * @param {string} path - 路由路径
-   * @returns {string} 完整的 URL
-   */
   const microAppSrc = path => {
     const module = microAppModule(path);
     const base = window.location.href.split('#')[0];
     return `${base}${module ? `${module}/` : ''}#${path}`
   };
 
-  /**
-   * 检测微前端模块是否已部署
-   * @param {string} module - 模块名
-   * @returns {Promise<boolean>} 是否已部署
-   */
   const microAppDeployed = async module => {
     try {
       const result = await fetch(`/${module}`, {
@@ -217,23 +247,6 @@ function createMicroAppCore({
   }
 }
 
-/**
- * 创建默认的微前端核心功能实例
- * 使用 window.GLOBAL_CONFIG.microApp 作为配置源
- * @param {Function} modelMap - 模块路由映射函数
- * @returns {Object} 核心功能对象
- */
-function createDefaultMicroAppCore(modelMap) {
-  return createMicroAppCore({
-    modelMap,
-  })
-}
-
-/**
- * Vuex 状态同步插件
- * 用于在父子应用之间同步 Vuex store 状态
- */
-
 const MESSAGE = {
   SYNC_FROM_CHILD: 'sync-base-from-child',
   SYNC_FROM_PARENT: 'sync-base-from-parent',
@@ -287,13 +300,6 @@ const syncRouteFromChild = fullPath => {
   }
 };
 
-/**
- * 创建状态同步插件
- * @param {Object} options - 配置选项
- * @param {boolean} options.isParent - 是否为父应用，默认 false
- * @param {string} options.iframeSelector - iframe 选择器，默认 '#microApp'
- * @returns {Function} Vuex 插件函数
- */
 function baseSyncPlugin({
   isParent = false,
   iframeSelector = '#microApp',
@@ -301,7 +307,6 @@ function baseSyncPlugin({
   return store => {
     let latestBaseState = store.state.base;
 
-    // 监听 base 状态变化，自动同步
     store.watch(
       state => state.base,
       newBase => {
@@ -321,7 +326,6 @@ function baseSyncPlugin({
       { deep: true }
     );
 
-    // 附加路由同步功能（子应用使用）
     store.attachRouterSync = router => {
       if (!router || isParent) return
       router.afterEach(to => {
@@ -341,7 +345,6 @@ function baseSyncPlugin({
       });
     };
 
-    // 调用微前端生命周期（父应用使用）
     store.callMicroAppLifeCycle = (type, payload) => {
       if (!isParent) return
       if (!isLifeCycleMessage(type)) return
@@ -352,30 +355,25 @@ function baseSyncPlugin({
       });
     };
 
-    // 处理消息
     const handleMessage = event => {
       if (event.origin !== window.location.origin) return
       const { type, payload, fullPath } = event.data || {};
 
-      // 子应用处理生命周期消息
       if (!isParent && isLifeCycleMessage(type)) {
         window.__MICRO_APP_LIFECYCLE__?.[type]?.(payload);
         return
       }
 
-      // 父应用处理来自子应用的状态同步
       if (isParent && type === MESSAGE.SYNC_FROM_CHILD) {
         store.commit('base/SYNC_STATE', payload);
         return
       }
 
-      // 子应用处理来自父应用的状态同步
       if (!isParent && type === MESSAGE.SYNC_FROM_PARENT) {
         store.commit('base/SYNC_STATE', payload);
         return
       }
 
-      // 父应用响应子应用的状态请求
       if (isParent && type === MESSAGE.REQUEST_FROM_CHILD) {
         postToChild(iframeSelector, {
           type: MESSAGE.SYNC_FROM_PARENT,
@@ -384,13 +382,11 @@ function baseSyncPlugin({
         return
       }
 
-      // 父应用处理子应用的路由变化
       if (isParent && type === MESSAGE.CHILD_ROUTE_CHANGE) {
         syncRouteFromChild(fullPath);
         return
       }
 
-      // 父应用转发其他消息到父窗口
       if (isParent && !isInternalMessage(type) && !isBridgeMessage(type)) {
         window.parent?.postMessage(event.data || {}, '*');
       }
@@ -398,27 +394,16 @@ function baseSyncPlugin({
 
     window.addEventListener('message', handleMessage);
 
-    // 子应用初始化时请求父应用状态
     if (!isParent && window.parent) {
       postToParent({ type: MESSAGE.REQUEST_FROM_CHILD });
     }
   }
 }
 
-/**
- * @hhfenpm/micro-app
- * 微前端通信桥接和状态同步工具
- */
-
-
-var index = {
-  initBridge,
-  createDefaultMicroAppCore,
-  baseSyncPlugin,
-};
+var index = { initBridge, baseSyncPlugin };
 
 exports.baseSyncPlugin = baseSyncPlugin;
-exports.createDefaultMicroAppCore = createDefaultMicroAppCore;
 exports.createMicroAppCore = createMicroAppCore;
+exports.createRegisterHandlers = createRegisterHandlers;
 exports.default = index;
 exports.initBridge = initBridge;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hhfenpm/micro-app",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "微前端通信桥接和状态同步工具，支持父子应用通信、状态同步、生命周期管理",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",