@hhfenpm/micro-app 1.0.5 → 1.0.7

package/README.md

@@ -2,6 +2,8 @@
 
 基于 iframe + postMessage 的微前端工具：父子应用**通信桥接**、**Vuex 状态同步**、**生命周期**与**路由同步**。
 
+**兼容 IE9+**
+
 ## 安装
 
 ```bash
@@ -192,15 +194,18 @@ store.callMicroAppLifeCycle('unmount')
 1. **同源**：postMessage 仅在同源下使用，需校验 `event.origin`。
 2. **base 模块**：`baseSyncPlugin` 通过 `base/SYNC_STATE` 同步；`base` 的 state 结构需与约定一致。
 3. **子应用必调**：`store.attachRouterSync(router)`，否则子应用路由不会回写到父应用 URL。
-4. **Proxy**：`vm.$base` 依赖 Proxy，不支持 IE11。
+4. **IE9 兼容**：本包已针对 IE9 进行了兼容处理，需要确保项目配置了 Babel 转译和 core-js polyfill。
 
 ---
 
 ## 兼容性
 
-- 现代浏览器（Chrome、Firefox、Safari、Edge）
-- 依赖 `postMessage`、`Proxy`
-- Vue 2.6+ / 3.x，Vuex 3.x / 4.x（peerDependencies）
+- **浏览器支持**：IE9+、现代浏览器（Chrome、Firefox、Safari、Edge）
+- **依赖要求**：
+  - Vue 2.6+ / 3.x，Vuex 3.x / 4.x（peerDependencies）
+- **项目配置要求**：
+  - 需要配置 Babel 转译（`transpileDependencies: true`）
+  - 需要配置 core-js polyfill（Promise、Object.fromEntries、Array.includes 等）
 
 ---
 

package/dist/index.esm.js

@@ -86,6 +86,68 @@ const safeClone = value => {
   }
 };
 
+const createBaseObject = pending => {
+  const namespaces = {};
+  const hasProxy = typeof Proxy !== 'undefined';
+  
+  const createMethod = (namespace, method) => {
+    return params =>
+      new Promise(resolve => {
+        const callbackId = genId();
+        pending[callbackId] = resolve;
+
+        post(window.parent, {
+          type: BRIDGE$1.INVOKE,
+          action: `${namespace}.${method}`,
+          params,
+          callbackId,
+        });
+      })
+  };
+  
+  if (hasProxy) {
+    const base = {};
+    return new Proxy(base, {
+      get(target, namespace) {
+        if (typeof namespace === 'string') {
+          if (!namespaces[namespace]) {
+            namespaces[namespace] = {};
+          }
+          return new Proxy(namespaces[namespace], {
+            get(target2, method) {
+              if (typeof method === 'string') {
+                if (!namespaces[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
+      });
+    });
+    
+    return base
+  }
+};
+
 function createRegisterHandlers(getElectron) {
   const electron = (() => {
     try {
@@ -107,33 +169,8 @@ const initBridge = ({
   const pending = Object.create(null);
 
   if (!isParent && vm) {
-    vm.$base = new Proxy(
-      {},
-      {
-        get(_, namespace) {
-          return new Proxy(
-            {},
-            {
-              get(_, method) {
-                return params =>
-                  new Promise(resolve => {
-                    const callbackId = genId();
-                    pending[callbackId] = resolve;
-
-                    post(window.parent, {
-                      type: BRIDGE$1.INVOKE,
-                      action: `${namespace}.${method}`,
-                      params,
-                      callbackId,
-                    });
-                  })
-              },
-            }
-          )
-        },
-      }
-    );
-
+    const baseObj = createBaseObject(pending);
+    vm.$base = baseObj;
     vm.$baseReady = true;
   }
 
@@ -389,6 +426,22 @@ function baseSyncPlugin({
   }
 }
 
-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),
@@ -90,6 +88,68 @@ const safeClone = value => {
   }
 };
 
+const createBaseObject = pending => {
+  const namespaces = {};
+  const hasProxy = typeof Proxy !== 'undefined';
+  
+  const createMethod = (namespace, method) => {
+    return params =>
+      new Promise(resolve => {
+        const callbackId = genId();
+        pending[callbackId] = resolve;
+
+        post(window.parent, {
+          type: BRIDGE$1.INVOKE,
+          action: `${namespace}.${method}`,
+          params,
+          callbackId,
+        });
+      })
+  };
+  
+  if (hasProxy) {
+    const base = {};
+    return new Proxy(base, {
+      get(target, namespace) {
+        if (typeof namespace === 'string') {
+          if (!namespaces[namespace]) {
+            namespaces[namespace] = {};
+          }
+          return new Proxy(namespaces[namespace], {
+            get(target2, method) {
+              if (typeof method === 'string') {
+                if (!namespaces[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
+      });
+    });
+    
+    return base
+  }
+};
+
 function createRegisterHandlers(getElectron) {
   const electron = (() => {
     try {
@@ -111,33 +171,8 @@ const initBridge = ({
   const pending = Object.create(null);
 
   if (!isParent && vm) {
-    vm.$base = new Proxy(
-      {},
-      {
-        get(_, namespace) {
-          return new Proxy(
-            {},
-            {
-              get(_, method) {
-                return params =>
-                  new Promise(resolve => {
-                    const callbackId = genId();
-                    pending[callbackId] = resolve;
-
-                    post(window.parent, {
-                      type: BRIDGE$1.INVOKE,
-                      action: `${namespace}.${method}`,
-                      params,
-                      callbackId,
-                    });
-                  })
-              },
-            }
-          )
-        },
-      }
-    );
-
+    const baseObj = createBaseObject(pending);
+    vm.$base = baseObj;
     vm.$baseReady = true;
   }
 
@@ -393,10 +428,26 @@ function baseSyncPlugin({
   }
 }
 
-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.5",
+  "version": "1.0.7",
   "description": "微前端通信桥接和状态同步工具，支持父子应用通信、状态同步、生命周期管理",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",