@hhfenpm/micro-app 1.0.6 → 1.0.8

package/README.md

@@ -14,12 +14,12 @@ yarn add @hhfenpm/micro-app
 
 ## 能力概览
 
-| 能力 | 说明 |
-|------|------|
-| **通信桥接** | 子应用通过 `vm.$base.命名空间.方法(params)` 调用父应用方法，支持 Promise |
-| **状态同步** | 父子应用 Vuex `base` 模块双向同步 |
+| 能力         | 说明                                                                                |
+| ------------ | ----------------------------------------------------------------------------------- |
+| **通信桥接** | 子应用通过 `vm.$base.命名空间.方法(params)` 调用父应用方法，支持 Promise            |
+| **状态同步** | 父子应用 Vuex `base` 模块双向同步                                                   |
 | **生命周期** | 父应用调用 `mount/update/unmount`，子应用通过 `window.__MICRO_APP_LIFECYCLE__` 响应 |
-| **路由同步** | 子应用路由变化同步到父应用 URL（需子应用调用 `store.attachRouterSync(router)`） |
+| **路由同步** | 子应用路由变化同步到父应用 URL（需子应用调用 `store.attachRouterSync(router)`）     |
 
 ---
 
@@ -32,14 +32,16 @@ yarn add @hhfenpm/micro-app
 ```javascript
 import { initBridge, createRegisterHandlers } from '@hhfenpm/micro-app'
 
-const vm = new Vue({ /* ... */ })
+const vm = new Vue({
+  /* ... */
+})
 
 // getElectron：返回 electron 模块，无则 () => ({}) 或 () => require('@/utils/electron')
 const getElectron = () => ({}) // 或 () => require('@/utils/electron')
 const toHandlers = createRegisterHandlers(getElectron)
 
 initBridge({
-  isParent: true,
+  isBase: true,
   vm,
   handlers: toHandlers(vm),
   iframeSelector: '#microApp', // 可选，默认 '#microApp'
@@ -56,13 +58,17 @@ initBridge({
 ```javascript
 import { initBridge } from '@hhfenpm/micro-app'
 
-const vm = new Vue({ /* ... */ })
+const vm = new Vue({
+  /* ... */
+})
 
-initBridge({ isParent: false, vm })
+initBridge({ isBase: false, vm })
 
 // 调用父应用：vm.$base.命名空间.方法(params)，返回 Promise
 vm.$base.ui.$message('来自子应用')
-vm.$base.ui.$confirm('确认？').then(ok => { /* ... */ })
+vm.$base.ui.$confirm('确认？').then(ok => {
+  /* ... */
+})
 vm.$base.cs.show()
 ```
 
@@ -77,7 +83,7 @@ import { createMicroAppCore } from '@hhfenpm/micro-app'
 
 const modelMap = () => ({
   'disease-analysis': ['/disease-analysis', '/ds-consult'],
-  'health': ['/health-manage'],
+  health: ['/health-manage'],
 })
 
 const core = createMicroAppCore({
@@ -86,7 +92,7 @@ const core = createMicroAppCore({
 })
 
 // 根据路径得到模块名，未命中或未启用则为 null
-const module = core.microAppModule('/disease-analysis')  // 'disease-analysis'
+const module = core.microAppModule('/disease-analysis') // 'disease-analysis'
 
 // 子应用完整 URL（含 hash）
 const src = core.microAppSrc('/disease-analysis')
@@ -110,7 +116,7 @@ import base from './store/modules/base' // 需含 base/SYNC_STATE
 
 const store = new Vuex.Store({
   modules: { base },
-  plugins: [baseSyncPlugin({ isParent: true, iframeSelector: '#microApp' })],
+  plugins: [baseSyncPlugin({ isBase: true, iframeSelector: '#microApp' })],
 })
 ```
 
@@ -122,7 +128,7 @@ import base from './store/modules/base'
 
 const store = new Vuex.Store({
   modules: { base },
-  plugins: [baseSyncPlugin({ isParent: false, iframeSelector: '#microApp' })],
+  plugins: [baseSyncPlugin({ isBase: false, iframeSelector: '#microApp' })],
 })
 
 import router from './router'
@@ -141,9 +147,15 @@ store.attachRouterSync(router) // 必调，用于把子应用路由同步到父
 
 ```javascript
 window.__MICRO_APP_LIFECYCLE__ = {
-  mount(payload) { /* 挂载后 */ },
-  update(payload) { /* 更新时，如路由变化 */ },
-  unmount(payload) { /* 卸载前 */ },
+  mount(payload) {
+    /* 挂载后 */
+  },
+  update(payload) {
+    /* 更新时，如路由变化 */
+  },
+  unmount(payload) {
+    /* 卸载前 */
+  },
 }
 ```
 
@@ -161,30 +173,33 @@ store.callMicroAppLifeCycle('unmount')
 
 ## API 一览
 
-| 接口 | 说明 |
-|------|------|
-| `initBridge({ isParent, vm, iframeSelector?, handlers? })` | 初始化桥接；父应用传 `handlers`，子应用可访问 `vm.$base` |
-| `createRegisterHandlers(getElectron?)` | 返回 `(vm) => ({ ui, cs })`，用作 `handlers` |
-| `createMicroAppCore({ modelMap, enabledModules? })` | 返回 `{ microAppModule, microAppSrc, microAppDeployed }` |
-| `baseSyncPlugin({ isParent, iframeSelector? })` | Vuex 插件，并挂载 `store.attachRouterSync`、`store.callMicroAppLifeCycle` |
+| 接口                                                     | 说明                                                                      |
+| -------------------------------------------------------- | ------------------------------------------------------------------------- |
+| `initBridge({ isBase, vm, iframeSelector?, handlers? })` | 初始化桥接；父应用传 `handlers`，子应用可访问 `vm.$base`                  |
+| `createRegisterHandlers(getElectron?)`                   | 返回 `(vm) => ({ ui, cs })`，用作 `handlers`                              |
+| `createMicroAppCore({ modelMap, enabledModules? })`      | 返回 `{ microAppModule, microAppSrc, microAppDeployed }`                  |
+| `baseSyncPlugin({ isBase, iframeSelector? })`            | Vuex 插件，并挂载 `store.attachRouterSync`、`store.callMicroAppLifeCycle` |
 
 ### 参数说明
 
 - **initBridge**
-  - `isParent`: 是否父应用
+
+  - `isBase`: 是否父应用
   - `vm`: Vue 实例（子应用会在其上挂 `vm.$base`、`vm.$baseReady`）
   - `iframeSelector`: 父应用 iframe 选择器，默认 `'#microApp'`
   - `handlers`: 仅父应用需要，`{ [namespace]: { [method]: (params)=>any } }`
 
 - **createRegisterHandlers**
+
   - `getElectron`: `() => electronModule`，可选；异常或未传时 `cs` 使用 noop
 
 - **createMicroAppCore**
+
   - `modelMap`: `() => ({ [moduleName]: path[] })`，必填
   - `enabledModules`: `() => string[]` 或 `string[]`，可选；缺省时从 `window.GLOBAL_CONFIG.microApp` 读取
 
 - **baseSyncPlugin**
-  - `isParent`: 是否父应用
+  - `isBase`: 是否父应用
   - `iframeSelector`: 默认 `'#microApp'`
 
 ---

package/dist/index.esm.js

@@ -89,7 +89,7 @@ const safeClone = value => {
 const createBaseObject = pending => {
   const namespaces = {};
   const hasProxy = typeof Proxy !== 'undefined';
-  
+
   const createMethod = (namespace, method) => {
     return params =>
       new Promise(resolve => {
@@ -104,7 +104,7 @@ const createBaseObject = pending => {
         });
       })
   };
-  
+
   if (hasProxy) {
     const base = {};
     return new Proxy(base, {
@@ -117,33 +117,36 @@ const createBaseObject = pending => {
             get(target2, method) {
               if (typeof method === 'string') {
                 if (!namespaces[namespace][method]) {
-                  namespaces[namespace][method] = createMethod(namespace, method);
+                  namespaces[namespace][method] = createMethod(
+                    namespace,
+                    method
+                  );
                 }
                 return namespaces[namespace][method]
               }
               return undefined
-            }
+            },
           })
         }
         return undefined
-      }
+      },
     })
   } else {
     const base = {};
     const commonNamespaces = ['ui', 'cs'];
-    
+
     commonNamespaces.forEach(ns => {
       namespaces[ns] = {};
       const nsObj = {};
-      
+
       Object.defineProperty(base, ns, {
         get() {
           return nsObj
         },
-        configurable: true
+        configurable: true,
       });
     });
-    
+
     return base
   }
 };
@@ -160,15 +163,15 @@ function createRegisterHandlers(getElectron) {
 }
 
 const initBridge = ({
-  isParent = false,
+  isBase = false,
   vm,
   iframeSelector = '#microApp',
   handlers = {},
 } = {}) => {
-  const finalHandlers = isParent ? handlers : Object.create(null);
+  const finalHandlers = isBase ? handlers : Object.create(null);
   const pending = Object.create(null);
 
-  if (!isParent && vm) {
+  if (!isBase && vm) {
     const baseObj = createBaseObject(pending);
     vm.$base = baseObj;
     vm.$baseReady = true;
@@ -216,8 +219,8 @@ const initBridge = ({
     if (e.origin !== window.location.origin) return
 
     const { type } = e.data || {};
-    if (isParent && type === BRIDGE$1.INVOKE) handleInvoke(e);
-    if (!isParent && type === BRIDGE$1.CALLBACK) handleCallback(e);
+    if (isBase && type === BRIDGE$1.INVOKE) handleInvoke(e);
+    if (!isBase && type === BRIDGE$1.CALLBACK) handleCallback(e);
   });
 };
 
@@ -288,144 +291,210 @@ const LIFE_CYCLE = {
 
 const BRIDGE = { INVOKE: 'bridge-invoke', CALLBACK: 'bridge-callback' };
 
-const LIFE_CYCLE_TYPES = Object.values(LIFE_CYCLE);
-const BRIDGE_TYPES = Object.values(BRIDGE);
+const LIFE_CYCLE_SET = new Set(Object.values(LIFE_CYCLE));
+const BRIDGE_SET = new Set(Object.values(BRIDGE));
+const INTERNAL_SET = new Set([
+  MESSAGE.SYNC_FROM_CHILD,
+  MESSAGE.REQUEST_FROM_CHILD,
+  MESSAGE.CHILD_ROUTE_CHANGE,
+]);
 
 const postToChild = (iframeSelector, message) => {
-  document.querySelector(iframeSelector)?.contentWindow?.postMessage(
-    message,
-    window.location.origin
-  );
+  const iframe = document.querySelector(iframeSelector);
+  if (!iframe) return
+  iframe.contentWindow?.postMessage(message, window.location.origin);
 };
 
 const postToParent = message => {
   window.parent?.postMessage(message, window.location.origin);
 };
 
-const isLifeCycleMessage = type => LIFE_CYCLE_TYPES.includes(type);
-
-const isBridgeMessage = type => BRIDGE_TYPES.includes(type);
-
-const isInternalMessage = type =>
-  [
-    MESSAGE.SYNC_FROM_CHILD,
-    MESSAGE.REQUEST_FROM_CHILD,
-    MESSAGE.CHILD_ROUTE_CHANGE,
-  ].includes(type);
-
 const syncRouteFromChild = fullPath => {
   if (typeof fullPath !== 'string') return
+
   const { origin, pathname } = window.location;
-  const base =
-    pathname === '/' || pathname === ''
-      ? origin
-      : (origin + pathname).replace(/\/$/, '');
+  let base = origin;
+
+  if (pathname && pathname !== '/') {
+    base = (origin + pathname).replace(/\/$/, '');
+  }
+
   const target = `${base}/#${fullPath}`;
   if (window.location.href !== target) {
     window.location.href = target;
   }
 };
 
+const createMessageHandlers = (
+  store,
+  isBase,
+  iframeSelector,
+  getLatestBaseState
+) => {
+  const handlers = [];
+
+  if (!isBase) {
+    handlers.push((type, payload) => {
+      if (LIFE_CYCLE_SET.has(type)) {
+        window.__MICRO_APP_LIFECYCLE__?.[type]?.(payload);
+        return true
+      }
+      return false
+    });
+  }
+
+  handlers.push((type, payload, fullPath) => {
+    if (type === MESSAGE.SYNC_FROM_CHILD && isBase) {
+      store.commit('base/SYNC_STATE', payload);
+      return true
+    }
+
+    if (type === MESSAGE.SYNC_FROM_PARENT && !isBase) {
+      store.commit('base/SYNC_STATE', payload);
+      return true
+    }
+
+    if (type === MESSAGE.REQUEST_FROM_CHILD && isBase) {
+      postToChild(iframeSelector, {
+        type: MESSAGE.SYNC_FROM_PARENT,
+        payload: getLatestBaseState(),
+      });
+      return true
+    }
+
+    if (type === MESSAGE.CHILD_ROUTE_CHANGE && isBase) {
+      syncRouteFromChild(fullPath);
+      return true
+    }
+
+    return false
+  });
+
+  handlers.push((type, data) => {
+    if (isBase && !INTERNAL_SET.has(type) && !BRIDGE_SET.has(type)) {
+      window.parent?.postMessage(data, '*');
+      return true
+    }
+    return false
+  });
+
+  return handlers
+};
+
 function baseSyncPlugin({
-  isParent = false,
+  isBase = false,
   iframeSelector = '#microApp',
 } = {}) {
   return store => {
     let latestBaseState = store.state.base;
+    let isMounted = false;
 
-    store.watch(
-      state => state.base,
+    const handleStateChange = () => {
+      if (!isMounted) return
+
+      const message = isBase
+        ? { type: MESSAGE.SYNC_FROM_PARENT, payload: latestBaseState }
+        : { type: MESSAGE.SYNC_FROM_CHILD, payload: latestBaseState };
+
+      isBase ? postToChild(iframeSelector, message) : postToParent(message);
+    };
+
+    const unwatch = store.watch(
+      () => store.state.base,
       newBase => {
         latestBaseState = newBase;
-        if (isParent) {
-          postToChild(iframeSelector, {
-            type: MESSAGE.SYNC_FROM_PARENT,
-            payload: latestBaseState,
-          });
-        } else {
-          postToParent({
-            type: MESSAGE.SYNC_FROM_CHILD,
-            payload: latestBaseState,
-          });
-        }
+        handleStateChange();
       },
       { deep: true }
     );
 
+    const messageHandlers = createMessageHandlers(
+      store,
+      isBase,
+      iframeSelector,
+      () => latestBaseState
+    );
+
+    const messageListener = event => {
+      if (event.origin !== window.location.origin) return
+
+      const { type, payload, fullPath } = event.data || {};
+      if (!type) return
+
+      for (const handler of messageHandlers) {
+        if (handler(type, payload, fullPath, event.data)) {
+          break
+        }
+      }
+    };
+
     store.attachRouterSync = router => {
-      if (!router || isParent) return
-      router.afterEach(to => {
+      if (!router || isBase) return
+
+      const routeHandler = to => {
         const parentHref = window.parent?.location?.href || '';
-        const parentFullPath = parentHref.includes('#')
-          ? parentHref.split('#')[1]
-          : '';
+        const hashIndex = parentHref.indexOf('#');
+        const parentFullPath =
+          hashIndex > -1 ? parentHref.slice(hashIndex + 1) : '';
         const childFullPath = to.fullPath.startsWith('/')
           ? to.fullPath
           : '/' + to.fullPath;
+
         if (parentFullPath !== childFullPath) {
           postToParent({
             type: MESSAGE.CHILD_ROUTE_CHANGE,
             fullPath: to.fullPath,
           });
         }
-      });
+      };
+
+      router.afterEach(routeHandler);
     };
 
     store.callMicroAppLifeCycle = (type, payload) => {
-      if (!isParent) return
-      if (!isLifeCycleMessage(type)) return
+      if (!isBase || !LIFE_CYCLE_SET.has(type)) return
 
-      postToChild(iframeSelector, {
-        type,
-        payload,
-      });
+      postToChild(iframeSelector, { type, payload });
     };
 
-    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,
-          payload: latestBaseState,
-        });
-        return
-      }
-
-      if (isParent && type === MESSAGE.CHILD_ROUTE_CHANGE) {
-        syncRouteFromChild(fullPath);
-        return
-      }
-
-      if (isParent && !isInternalMessage(type) && !isBridgeMessage(type)) {
-        window.parent?.postMessage(event.data || {}, '*');
-      }
+    store.destroy = () => {
+      window.removeEventListener('message', messageListener);
+      unwatch?.();
+      isMounted = false;
     };
 
-    window.addEventListener('message', handleMessage);
+    window.addEventListener('message', messageListener);
 
-    if (!isParent && window.parent) {
-      postToParent({ type: MESSAGE.REQUEST_FROM_CHILD });
+    if (!isBase && window.parent) {
+      const requestTimer = setTimeout(() => {
+        postToParent({ type: MESSAGE.REQUEST_FROM_CHILD });
+        isMounted = true;
+        clearTimeout(requestTimer);
+      }, 0);
+    } else {
+      isMounted = true;
     }
+
+    return store
   }
 }
 
-var index = { initBridge, baseSyncPlugin };
+function syncState(watch = {}) {
+  return function SYNC_STATE(state, payload) {
+    if (!payload || typeof payload !== 'object') return
+
+    Object.keys(watch).forEach(key => {
+      if (state[key] !== payload[key] && typeof watch[key] === 'function')
+        watch[key]({
+          store: this,
+          value: payload[key],
+          valueOld: state[key],
+        });
+    });
+    Object.keys(payload).forEach(key => {
+      if (state[key] !== payload[key]) state[key] = payload[key];
+    });
+  }
+}
 
-export { baseSyncPlugin, createMicroAppCore, createRegisterHandlers, index as default, initBridge };
+export { baseSyncPlugin, createMicroAppCore, createRegisterHandlers, initBridge, syncState };

package/dist/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var uiHandler = vm => ({
   $message: (...args) => vm.$message(...args),
   $success: msg => vm.$message.success(msg),
@@ -93,7 +91,7 @@ const safeClone = value => {
 const createBaseObject = pending => {
   const namespaces = {};
   const hasProxy = typeof Proxy !== 'undefined';
-  
+
   const createMethod = (namespace, method) => {
     return params =>
       new Promise(resolve => {
@@ -108,7 +106,7 @@ const createBaseObject = pending => {
         });
       })
   };
-  
+
   if (hasProxy) {
     const base = {};
     return new Proxy(base, {
@@ -121,33 +119,36 @@ const createBaseObject = pending => {
             get(target2, method) {
               if (typeof method === 'string') {
                 if (!namespaces[namespace][method]) {
-                  namespaces[namespace][method] = createMethod(namespace, method);
+                  namespaces[namespace][method] = createMethod(
+                    namespace,
+                    method
+                  );
                 }
                 return namespaces[namespace][method]
               }
               return undefined
-            }
+            },
           })
         }
         return undefined
-      }
+      },
     })
   } else {
     const base = {};
     const commonNamespaces = ['ui', 'cs'];
-    
+
     commonNamespaces.forEach(ns => {
       namespaces[ns] = {};
       const nsObj = {};
-      
+
       Object.defineProperty(base, ns, {
         get() {
           return nsObj
         },
-        configurable: true
+        configurable: true,
       });
     });
-    
+
     return base
   }
 };
@@ -164,15 +165,15 @@ function createRegisterHandlers(getElectron) {
 }
 
 const initBridge = ({
-  isParent = false,
+  isBase = false,
   vm,
   iframeSelector = '#microApp',
   handlers = {},
 } = {}) => {
-  const finalHandlers = isParent ? handlers : Object.create(null);
+  const finalHandlers = isBase ? handlers : Object.create(null);
   const pending = Object.create(null);
 
-  if (!isParent && vm) {
+  if (!isBase && vm) {
     const baseObj = createBaseObject(pending);
     vm.$base = baseObj;
     vm.$baseReady = true;
@@ -220,8 +221,8 @@ const initBridge = ({
     if (e.origin !== window.location.origin) return
 
     const { type } = e.data || {};
-    if (isParent && type === BRIDGE$1.INVOKE) handleInvoke(e);
-    if (!isParent && type === BRIDGE$1.CALLBACK) handleCallback(e);
+    if (isBase && type === BRIDGE$1.INVOKE) handleInvoke(e);
+    if (!isBase && type === BRIDGE$1.CALLBACK) handleCallback(e);
   });
 };
 
@@ -292,148 +293,214 @@ const LIFE_CYCLE = {
 
 const BRIDGE = { INVOKE: 'bridge-invoke', CALLBACK: 'bridge-callback' };
 
-const LIFE_CYCLE_TYPES = Object.values(LIFE_CYCLE);
-const BRIDGE_TYPES = Object.values(BRIDGE);
+const LIFE_CYCLE_SET = new Set(Object.values(LIFE_CYCLE));
+const BRIDGE_SET = new Set(Object.values(BRIDGE));
+const INTERNAL_SET = new Set([
+  MESSAGE.SYNC_FROM_CHILD,
+  MESSAGE.REQUEST_FROM_CHILD,
+  MESSAGE.CHILD_ROUTE_CHANGE,
+]);
 
 const postToChild = (iframeSelector, message) => {
-  document.querySelector(iframeSelector)?.contentWindow?.postMessage(
-    message,
-    window.location.origin
-  );
+  const iframe = document.querySelector(iframeSelector);
+  if (!iframe) return
+  iframe.contentWindow?.postMessage(message, window.location.origin);
 };
 
 const postToParent = message => {
   window.parent?.postMessage(message, window.location.origin);
 };
 
-const isLifeCycleMessage = type => LIFE_CYCLE_TYPES.includes(type);
-
-const isBridgeMessage = type => BRIDGE_TYPES.includes(type);
-
-const isInternalMessage = type =>
-  [
-    MESSAGE.SYNC_FROM_CHILD,
-    MESSAGE.REQUEST_FROM_CHILD,
-    MESSAGE.CHILD_ROUTE_CHANGE,
-  ].includes(type);
-
 const syncRouteFromChild = fullPath => {
   if (typeof fullPath !== 'string') return
+
   const { origin, pathname } = window.location;
-  const base =
-    pathname === '/' || pathname === ''
-      ? origin
-      : (origin + pathname).replace(/\/$/, '');
+  let base = origin;
+
+  if (pathname && pathname !== '/') {
+    base = (origin + pathname).replace(/\/$/, '');
+  }
+
   const target = `${base}/#${fullPath}`;
   if (window.location.href !== target) {
     window.location.href = target;
   }
 };
 
+const createMessageHandlers = (
+  store,
+  isBase,
+  iframeSelector,
+  getLatestBaseState
+) => {
+  const handlers = [];
+
+  if (!isBase) {
+    handlers.push((type, payload) => {
+      if (LIFE_CYCLE_SET.has(type)) {
+        window.__MICRO_APP_LIFECYCLE__?.[type]?.(payload);
+        return true
+      }
+      return false
+    });
+  }
+
+  handlers.push((type, payload, fullPath) => {
+    if (type === MESSAGE.SYNC_FROM_CHILD && isBase) {
+      store.commit('base/SYNC_STATE', payload);
+      return true
+    }
+
+    if (type === MESSAGE.SYNC_FROM_PARENT && !isBase) {
+      store.commit('base/SYNC_STATE', payload);
+      return true
+    }
+
+    if (type === MESSAGE.REQUEST_FROM_CHILD && isBase) {
+      postToChild(iframeSelector, {
+        type: MESSAGE.SYNC_FROM_PARENT,
+        payload: getLatestBaseState(),
+      });
+      return true
+    }
+
+    if (type === MESSAGE.CHILD_ROUTE_CHANGE && isBase) {
+      syncRouteFromChild(fullPath);
+      return true
+    }
+
+    return false
+  });
+
+  handlers.push((type, data) => {
+    if (isBase && !INTERNAL_SET.has(type) && !BRIDGE_SET.has(type)) {
+      window.parent?.postMessage(data, '*');
+      return true
+    }
+    return false
+  });
+
+  return handlers
+};
+
 function baseSyncPlugin({
-  isParent = false,
+  isBase = false,
   iframeSelector = '#microApp',
 } = {}) {
   return store => {
     let latestBaseState = store.state.base;
+    let isMounted = false;
+
+    const handleStateChange = () => {
+      if (!isMounted) return
+
+      const message = isBase
+        ? { type: MESSAGE.SYNC_FROM_PARENT, payload: latestBaseState }
+        : { type: MESSAGE.SYNC_FROM_CHILD, payload: latestBaseState };
+
+      isBase ? postToChild(iframeSelector, message) : postToParent(message);
+    };
 
-    store.watch(
-      state => state.base,
+    const unwatch = store.watch(
+      () => store.state.base,
       newBase => {
         latestBaseState = newBase;
-        if (isParent) {
-          postToChild(iframeSelector, {
-            type: MESSAGE.SYNC_FROM_PARENT,
-            payload: latestBaseState,
-          });
-        } else {
-          postToParent({
-            type: MESSAGE.SYNC_FROM_CHILD,
-            payload: latestBaseState,
-          });
-        }
+        handleStateChange();
       },
       { deep: true }
     );
 
+    const messageHandlers = createMessageHandlers(
+      store,
+      isBase,
+      iframeSelector,
+      () => latestBaseState
+    );
+
+    const messageListener = event => {
+      if (event.origin !== window.location.origin) return
+
+      const { type, payload, fullPath } = event.data || {};
+      if (!type) return
+
+      for (const handler of messageHandlers) {
+        if (handler(type, payload, fullPath, event.data)) {
+          break
+        }
+      }
+    };
+
     store.attachRouterSync = router => {
-      if (!router || isParent) return
-      router.afterEach(to => {
+      if (!router || isBase) return
+
+      const routeHandler = to => {
         const parentHref = window.parent?.location?.href || '';
-        const parentFullPath = parentHref.includes('#')
-          ? parentHref.split('#')[1]
-          : '';
+        const hashIndex = parentHref.indexOf('#');
+        const parentFullPath =
+          hashIndex > -1 ? parentHref.slice(hashIndex + 1) : '';
         const childFullPath = to.fullPath.startsWith('/')
           ? to.fullPath
           : '/' + to.fullPath;
+
         if (parentFullPath !== childFullPath) {
           postToParent({
             type: MESSAGE.CHILD_ROUTE_CHANGE,
             fullPath: to.fullPath,
           });
         }
-      });
+      };
+
+      router.afterEach(routeHandler);
     };
 
     store.callMicroAppLifeCycle = (type, payload) => {
-      if (!isParent) return
-      if (!isLifeCycleMessage(type)) return
+      if (!isBase || !LIFE_CYCLE_SET.has(type)) return
 
-      postToChild(iframeSelector, {
-        type,
-        payload,
-      });
+      postToChild(iframeSelector, { type, payload });
     };
 
-    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,
-          payload: latestBaseState,
-        });
-        return
-      }
-
-      if (isParent && type === MESSAGE.CHILD_ROUTE_CHANGE) {
-        syncRouteFromChild(fullPath);
-        return
-      }
-
-      if (isParent && !isInternalMessage(type) && !isBridgeMessage(type)) {
-        window.parent?.postMessage(event.data || {}, '*');
-      }
+    store.destroy = () => {
+      window.removeEventListener('message', messageListener);
+      unwatch?.();
+      isMounted = false;
     };
 
-    window.addEventListener('message', handleMessage);
+    window.addEventListener('message', messageListener);
 
-    if (!isParent && window.parent) {
-      postToParent({ type: MESSAGE.REQUEST_FROM_CHILD });
+    if (!isBase && window.parent) {
+      const requestTimer = setTimeout(() => {
+        postToParent({ type: MESSAGE.REQUEST_FROM_CHILD });
+        isMounted = true;
+        clearTimeout(requestTimer);
+      }, 0);
+    } else {
+      isMounted = true;
     }
+
+    return store
   }
 }
 
-var index = { initBridge, baseSyncPlugin };
+function syncState(watch = {}) {
+  return function SYNC_STATE(state, payload) {
+    if (!payload || typeof payload !== 'object') return
+
+    Object.keys(watch).forEach(key => {
+      if (state[key] !== payload[key] && typeof watch[key] === 'function')
+        watch[key]({
+          store: this,
+          value: payload[key],
+          valueOld: state[key],
+        });
+    });
+    Object.keys(payload).forEach(key => {
+      if (state[key] !== payload[key]) state[key] = payload[key];
+    });
+  }
+}
 
 exports.baseSyncPlugin = baseSyncPlugin;
 exports.createMicroAppCore = createMicroAppCore;
 exports.createRegisterHandlers = createRegisterHandlers;
-exports.default = index;
 exports.initBridge = initBridge;
+exports.syncState = syncState;

package/package.json

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