@micro-zoe/micro-app 0.6.0 → 0.7.1

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '0.6.0';
+const version = '0.7.1';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -41,6 +41,9 @@ function isBoundFunction(target) {
 function isShadowRoot(target) {
     return typeof ShadowRoot !== 'undefined' && target instanceof ShadowRoot;
 }
+const rawDefineProperty = Object.defineProperty;
+const rawDefineProperties = Object.defineProperties;
+const rawHasOwnProperty = Object.prototype.hasOwnProperty;
 /**
  * format error log
  * @param msg message
@@ -230,6 +233,17 @@ let currentMicroAppName = null;
 function setCurrentAppName(appName) {
     currentMicroAppName = appName;
 }
+let isWaitingForReset = false;
+function throttleDeferForSetAppName(appName) {
+    if (!isWaitingForReset || currentMicroAppName !== appName) {
+        isWaitingForReset = true;
+        setCurrentAppName(appName);
+        defer(() => {
+            isWaitingForReset = false;
+            setCurrentAppName(null);
+        });
+    }
+}
 // get the currently running app.name
 function getCurrentAppName() {
     return currentMicroAppName;
@@ -326,6 +340,7 @@ var keepAliveStates;
     keepAliveStates["KEEP_ALIVE_SHOW"] = "KEEP_ALIVE_SHOW";
     keepAliveStates["KEEP_ALIVE_HIDDEN"] = "KEEP_ALIVE_HIDDEN";
 })(keepAliveStates || (keepAliveStates = {}));
+const globalKeyToBeCached = 'window,self,globalThis,Array,Object,String,Boolean,Math,Number,Symbol,Date,Promise,Function,Proxy,WeakMap,WeakSet,Set,Map,Reflect,Element,Node,Document,RegExp,Error,TypeError,JSON,isNaN,parseFloat,parseInt,performance,console,decodeURI,encodeURI,decodeURIComponent,encodeURIComponent,location,navigator,undefined';
 
 /**
  * fetch source of html, js, css
@@ -343,6 +358,10 @@ function fetchSource(url, appName = null, options = {}) {
 }
 
 const globalEnv = {};
+/**
+ * Note loop nesting
+ * Only prototype or unique values can be put here
+ */
 function initGlobalEnv() {
     if (isBrowser) {
         /**
@@ -350,12 +369,13 @@ function initGlobalEnv() {
          * pay attention to this binding
          */
         const rawSetAttribute = Element.prototype.setAttribute;
-        const rawAppendChild = Node.prototype.appendChild;
-        const rawInsertBefore = Node.prototype.insertBefore;
-        const rawReplaceChild = Node.prototype.replaceChild;
-        const rawRemoveChild = Node.prototype.removeChild;
+        const rawAppendChild = Element.prototype.appendChild;
+        const rawInsertBefore = Element.prototype.insertBefore;
+        const rawReplaceChild = Element.prototype.replaceChild;
+        const rawRemoveChild = Element.prototype.removeChild;
         const rawAppend = Element.prototype.append;
         const rawPrepend = Element.prototype.prepend;
+        const rawCloneNode = Element.prototype.cloneNode;
         const rawCreateElement = Document.prototype.createElement;
         const rawCreateElementNS = Document.prototype.createElementNS;
         const rawCreateDocumentFragment = Document.prototype.createDocumentFragment;
@@ -365,6 +385,13 @@ function initGlobalEnv() {
         const rawGetElementsByClassName = Document.prototype.getElementsByClassName;
         const rawGetElementsByTagName = Document.prototype.getElementsByTagName;
         const rawGetElementsByName = Document.prototype.getElementsByName;
+        const ImageProxy = new Proxy(Image, {
+            construct(Target, args) {
+                const elementImage = new Target(...args);
+                elementImage.__MICRO_APP_NAME__ = getCurrentAppName();
+                return elementImage;
+            },
+        });
         const rawWindow = Function('return window')();
         const rawDocument = Function('return document')();
         const supportModuleScript = isSupportModuleScript();
@@ -392,6 +419,7 @@ function initGlobalEnv() {
             rawRemoveChild,
             rawAppend,
             rawPrepend,
+            rawCloneNode,
             rawCreateElement,
             rawCreateElementNS,
             rawCreateDocumentFragment,
@@ -401,6 +429,7 @@ function initGlobalEnv() {
             rawGetElementsByClassName,
             rawGetElementsByTagName,
             rawGetElementsByName,
+            ImageProxy,
             // common global vars
             rawWindow,
             rawDocument,
@@ -419,13 +448,6 @@ function initGlobalEnv() {
     }
 }
 
-// https://developer.mozilla.org/zh-CN/docs/Web/API/CSSRule
-var CSSRuleType;
-(function (CSSRuleType) {
-    CSSRuleType[CSSRuleType["STYLE_RULE"] = 1] = "STYLE_RULE";
-    CSSRuleType[CSSRuleType["MEDIA_RULE"] = 4] = "MEDIA_RULE";
-    CSSRuleType[CSSRuleType["SUPPORTS_RULE"] = 12] = "SUPPORTS_RULE";
-})(CSSRuleType || (CSSRuleType = {}));
 /**
  * Bind css scope
  * Special case:
@@ -469,7 +491,7 @@ function scopedStyleRule(rule, prefix) {
  */
 function scopedHost(cssText, baseURI, textContent, linkpath) {
     return cssText.replace(/url\(["']?([^)"']+)["']?\)/gm, (all, $1) => {
-        if (/^(data|blob):/.test($1)) {
+        if (/^((data|blob):|#)/.test($1)) {
             return all;
         }
         else if (/^(https?:)?\/\//.test($1)) {
@@ -506,14 +528,15 @@ function scopedPackRule(rule, prefix, packName) {
 function scopedRule(rules, prefix) {
     let result = '';
     for (const rule of rules) {
-        switch (rule.type) {
-            case CSSRuleType.STYLE_RULE:
+        // https://developer.mozilla.org/zh-CN/docs/Web/API/CSSRule
+        switch (rule.constructor.name) {
+            case 'CSSStyleRule':
                 result += scopedStyleRule(rule, prefix);
                 break;
-            case CSSRuleType.MEDIA_RULE:
+            case 'CSSMediaRule':
                 result += scopedPackRule(rule, prefix, 'media');
                 break;
-            case CSSRuleType.SUPPORTS_RULE:
+            case 'CSSSupportsRule':
                 result += scopedPackRule(rule, prefix, 'supports');
                 break;
             default:
@@ -716,7 +739,12 @@ function fetchLinkSuccess(url, info, data, microAppHead, app) {
     styleLink.textContent = data;
     styleLink.__MICRO_APP_LINK_PATH__ = url;
     styleLink.setAttribute('data-origin-href', url);
-    microAppHead.replaceChild(scopedCSS(styleLink, app), info.placeholder);
+    if (info.placeholder.parentNode) {
+        info.placeholder.parentNode.replaceChild(scopedCSS(styleLink, app), info.placeholder);
+    }
+    else {
+        microAppHead.appendChild(scopedCSS(styleLink, app));
+    }
     info.placeholder = null;
     info.code = data;
 }
@@ -907,17 +935,21 @@ function execScripts(scriptList, app, initedHook) {
         }
     }
     if (deferScriptPromise.length) {
-        Promise.all(deferScriptPromise).then((res) => {
-            res.forEach((code, index) => {
-                const [url, info] = deferScriptInfo[index];
-                info.code = info.code || code;
-                runScript(url, app, info, false, initedHook);
-                !info.module && initedHook(false);
-            });
-            initedHook(isUndefined(initedHook.moduleCount));
-        }).catch((err) => {
+        promiseStream(deferScriptPromise, (res) => {
+            const info = deferScriptInfo[res.index][1];
+            info.code = info.code || res.data;
+        }, (err) => {
+            initedHook.errorCount = initedHook.errorCount ? ++initedHook.errorCount : 1;
             logError(err, app.name);
-            initedHook(true);
+        }, () => {
+            deferScriptInfo.forEach(([url, info]) => {
+                if (info.code) {
+                    runScript(url, app, info, false, initedHook);
+                    !info.module && initedHook(false);
+                }
+            });
+            initedHook(isUndefined(initedHook.moduleCount) ||
+                initedHook.errorCount === deferScriptPromise.length);
         });
     }
     else {
@@ -1052,7 +1084,7 @@ function bindScope(url, app, code, module) {
     }
     if (app.sandBox && !module) {
         globalEnv.rawWindow.__MICRO_APP_PROXY_WINDOW__ = app.sandBox.proxyWindow;
-        return `;(function(window, self){with(window){;${code}\n}}).call(window.__MICRO_APP_PROXY_WINDOW__, window.__MICRO_APP_PROXY_WINDOW__, window.__MICRO_APP_PROXY_WINDOW__);`;
+        return `;(function(proxyWindow){with(proxyWindow.__MICRO_APP_WINDOW__){(function(${globalKeyToBeCached}){;${code}\n}).call(proxyWindow,${globalKeyToBeCached})}})(window.__MICRO_APP_PROXY_WINDOW__);`;
     }
     return code;
 }
@@ -1190,416 +1222,115 @@ function extractHtml(app) {
     });
 }
 
-const boundedMap = new WeakMap();
-function isBoundedFunction(value) {
-    if (boundedMap.has(value)) {
-        return boundedMap.get(value);
-    }
-    // bind function
-    const boundFunction = isBoundFunction(value);
-    boundedMap.set(value, boundFunction);
-    return boundFunction;
-}
-const constructorMap = new WeakMap();
-function isConstructor(value) {
-    if (constructorMap.has(value)) {
-        return constructorMap.get(value);
-    }
-    const valueStr = value.toString();
-    const result = (value.prototype &&
-        value.prototype.constructor === value &&
-        Object.getOwnPropertyNames(value.prototype).length > 1) ||
-        /^function\s+[A-Z]/.test(valueStr) ||
-        /^class\s+/.test(valueStr);
-    constructorMap.set(value, result);
-    return result;
-}
-const rawWindowMethodMap = new WeakMap();
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-function bindFunctionToRawWidow(rawWindow, value) {
-    if (rawWindowMethodMap.has(value)) {
-        return rawWindowMethodMap.get(value);
+class EventCenter {
+    constructor() {
+        this.eventList = new Map();
     }
-    if (isFunction(value) && !isConstructor(value) && !isBoundedFunction(value)) {
-        const bindRawWindowValue = value.bind(rawWindow);
-        for (const key in value) {
-            bindRawWindowValue[key] = value[key];
-        }
-        if (value.hasOwnProperty('prototype') && !bindRawWindowValue.hasOwnProperty('prototype')) {
-            bindRawWindowValue.prototype = value.prototype;
+    // whether the name is legal
+    isLegalName(name) {
+        if (!name) {
+            logError('event-center: Invalid name');
+            return false;
         }
-        rawWindowMethodMap.set(value, bindRawWindowValue);
-        return bindRawWindowValue;
-    }
-    return value;
-}
-
-// document.onclick binding list, the binding function of each application is unique
-const documentClickListMap = new Map();
-let hasRewriteDocumentOnClick = false;
-/**
- * Rewrite document.onclick and execute it only once
- */
-function overwriteDocumentOnClick() {
-    hasRewriteDocumentOnClick = true;
-    if (Object.getOwnPropertyDescriptor(document, 'onclick')) {
-        return logWarn('Cannot redefine document property onclick');
-    }
-    const rawOnClick = document.onclick;
-    document.onclick = null;
-    let hasDocumentClickInited = false;
-    function onClickHandler(e) {
-        documentClickListMap.forEach((f) => {
-            isFunction(f) && f.call(document, e);
-        });
+        return true;
     }
-    Object.defineProperty(document, 'onclick', {
-        configurable: true,
-        enumerable: true,
-        get() {
-            const appName = getCurrentAppName();
-            return appName ? documentClickListMap.get(appName) : documentClickListMap.get('base');
-        },
-        set(f) {
-            const appName = getCurrentAppName();
-            if (appName) {
-                documentClickListMap.set(appName, f);
+    /**
+     * add listener
+     * @param name event name
+     * @param f listener
+     * @param autoTrigger If there is cached data when first bind listener, whether it needs to trigger, default is false
+     */
+    on(name, f, autoTrigger = false) {
+        if (this.isLegalName(name)) {
+            if (!isFunction(f)) {
+                return logError('event-center: Invalid callback function');
             }
-            else {
-                documentClickListMap.set('base', f);
+            let eventInfo = this.eventList.get(name);
+            if (!eventInfo) {
+                eventInfo = {
+                    data: {},
+                    callbacks: new Set(),
+                };
+                this.eventList.set(name, eventInfo);
             }
-            if (!hasDocumentClickInited && isFunction(f)) {
-                hasDocumentClickInited = true;
-                globalEnv.rawDocumentAddEventListener.call(globalEnv.rawDocument, 'click', onClickHandler, false);
+            else if (autoTrigger && Object.getOwnPropertyNames(eventInfo.data).length) {
+                // auto trigger when data not null
+                f(eventInfo.data);
             }
+            eventInfo.callbacks.add(f);
         }
-    });
-    rawOnClick && (document.onclick = rawOnClick);
-}
-/**
- * The document event is globally, we need to clear these event bindings when micro application unmounted
- */
-const documentEventListenerMap = new Map();
-function effectDocumentEvent() {
-    const { rawDocument, rawDocumentAddEventListener, rawDocumentRemoveEventListener, } = globalEnv;
-    !hasRewriteDocumentOnClick && overwriteDocumentOnClick();
-    document.addEventListener = function (type, listener, options) {
-        var _a;
-        const appName = getCurrentAppName();
-        /**
-         * ignore bound function of document event in umd mode, used to solve problem of react global events
-         */
-        if (appName && !(((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.umdMode) && isBoundFunction(listener))) {
-            const appListenersMap = documentEventListenerMap.get(appName);
-            if (appListenersMap) {
-                const appListenerList = appListenersMap.get(type);
-                if (appListenerList) {
-                    appListenerList.add(listener);
+    }
+    // remove listener, but the data is not cleared
+    off(name, f) {
+        if (this.isLegalName(name)) {
+            const eventInfo = this.eventList.get(name);
+            if (eventInfo) {
+                if (isFunction(f)) {
+                    eventInfo.callbacks.delete(f);
                 }
                 else {
-                    appListenersMap.set(type, new Set([listener]));
+                    eventInfo.callbacks.clear();
                 }
             }
-            else {
-                documentEventListenerMap.set(appName, new Map([[type, new Set([listener])]]));
-            }
-            listener && (listener.__MICRO_MARK_OPTIONS__ = options);
         }
-        rawDocumentAddEventListener.call(rawDocument, type, listener, options);
-    };
-    document.removeEventListener = function (type, listener, options) {
-        var _a;
-        const appName = getCurrentAppName();
-        if (appName && !(((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.umdMode) && isBoundFunction(listener))) {
-            const appListenersMap = documentEventListenerMap.get(appName);
-            if (appListenersMap) {
-                const appListenerList = appListenersMap.get(type);
-                if ((appListenerList === null || appListenerList === void 0 ? void 0 : appListenerList.size) && appListenerList.has(listener)) {
-                    appListenerList.delete(listener);
+    }
+    // dispatch data
+    dispatch(name, data) {
+        if (this.isLegalName(name)) {
+            if (!isPlainObject(data)) {
+                return logError('event-center: data must be object');
+            }
+            let eventInfo = this.eventList.get(name);
+            if (eventInfo) {
+                // Update when the data is not equal
+                if (eventInfo.data !== data) {
+                    eventInfo.data = data;
+                    for (const f of eventInfo.callbacks) {
+                        f(data);
+                    }
                 }
             }
+            else {
+                eventInfo = {
+                    data: data,
+                    callbacks: new Set(),
+                };
+                this.eventList.set(name, eventInfo);
+            }
         }
-        rawDocumentRemoveEventListener.call(rawDocument, type, listener, options);
-    };
-}
-// Clear the document event agent
-function releaseEffectDocumentEvent() {
-    document.addEventListener = globalEnv.rawDocumentAddEventListener;
-    document.removeEventListener = globalEnv.rawDocumentRemoveEventListener;
+    }
+    // get data
+    getData(name) {
+        var _a;
+        const eventInfo = this.eventList.get(name);
+        return (_a = eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.data) !== null && _a !== void 0 ? _a : null;
+    }
 }
-// this events should be sent to the specified app
-const formatEventList = ['unmount', 'appstate-change'];
+
+const eventCenter = new EventCenter();
 /**
  * Format event name
- * @param type event name
- * @param microWindow micro window
+ * @param appName app.name
+ * @param fromBaseApp is from base app
  */
-function formatEventType(type, microWindow) {
-    if (formatEventList.includes(type)) {
-        return `${type}-${microWindow.__MICRO_APP_NAME__}`;
-    }
-    return type;
+function formatEventName(appName, fromBaseApp) {
+    if (!isString(appName) || !appName)
+        return '';
+    return fromBaseApp ? `__from_base_app_${appName}__` : `__from_micro_app_${appName}__`;
 }
-/**
- * Rewrite side-effect events
- * @param microWindow micro window
- */
-function effect(microWindow) {
-    const appName = microWindow.__MICRO_APP_NAME__;
-    const eventListenerMap = new Map();
-    const intervalIdMap = new Map();
-    const timeoutIdMap = new Map();
-    const { rawWindow, rawDocument, rawWindowAddEventListener, rawWindowRemoveEventListener, rawSetInterval, rawSetTimeout, rawClearInterval, rawClearTimeout, rawDocumentRemoveEventListener, } = globalEnv;
-    // listener may be null, e.g test-passive
-    microWindow.addEventListener = function (type, listener, options) {
-        type = formatEventType(type, microWindow);
-        const listenerList = eventListenerMap.get(type);
-        if (listenerList) {
-            listenerList.add(listener);
-        }
-        else {
-            eventListenerMap.set(type, new Set([listener]));
-        }
-        listener && (listener.__MICRO_MARK_OPTIONS__ = options);
-        rawWindowAddEventListener.call(rawWindow, type, listener, options);
-    };
-    microWindow.removeEventListener = function (type, listener, options) {
-        type = formatEventType(type, microWindow);
-        const listenerList = eventListenerMap.get(type);
-        if ((listenerList === null || listenerList === void 0 ? void 0 : listenerList.size) && listenerList.has(listener)) {
-            listenerList.delete(listener);
-        }
-        rawWindowRemoveEventListener.call(rawWindow, type, listener, options);
-    };
-    microWindow.setInterval = function (handler, timeout, ...args) {
-        const intervalId = rawSetInterval.call(rawWindow, handler, timeout, ...args);
-        intervalIdMap.set(intervalId, { handler, timeout, args });
-        return intervalId;
-    };
-    microWindow.setTimeout = function (handler, timeout, ...args) {
-        const timeoutId = rawSetTimeout.call(rawWindow, handler, timeout, ...args);
-        timeoutIdMap.set(timeoutId, { handler, timeout, args });
-        return timeoutId;
-    };
-    microWindow.clearInterval = function (intervalId) {
-        intervalIdMap.delete(intervalId);
-        rawClearInterval.call(rawWindow, intervalId);
-    };
-    microWindow.clearTimeout = function (timeoutId) {
-        timeoutIdMap.delete(timeoutId);
-        rawClearTimeout.call(rawWindow, timeoutId);
-    };
-    const umdWindowListenerMap = new Map();
-    const umdDocumentListenerMap = new Map();
-    let umdIntervalIdMap = new Map();
-    let umdTimeoutIdMap = new Map();
-    let umdOnClickHandler;
-    // record event and timer before exec umdMountHook
-    const recordUmdEffect = () => {
-        // record window event
-        eventListenerMap.forEach((listenerList, type) => {
-            if (listenerList.size) {
-                umdWindowListenerMap.set(type, new Set(listenerList));
-            }
-        });
-        // record timers
-        if (intervalIdMap.size) {
-            umdIntervalIdMap = new Map(intervalIdMap);
-        }
-        if (timeoutIdMap.size) {
-            umdTimeoutIdMap = new Map(timeoutIdMap);
-        }
-        // record onclick handler
-        umdOnClickHandler = documentClickListMap.get(appName);
-        // record document event
-        const documentAppListenersMap = documentEventListenerMap.get(appName);
-        if (documentAppListenersMap) {
-            documentAppListenersMap.forEach((listenerList, type) => {
-                if (listenerList.size) {
-                    umdDocumentListenerMap.set(type, new Set(listenerList));
-                }
-            });
-        }
-    };
-    // rebuild event and timer before remount umd app
-    const rebuildUmdEffect = () => {
-        // rebuild window event
-        umdWindowListenerMap.forEach((listenerList, type) => {
-            for (const listener of listenerList) {
-                microWindow.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_MARK_OPTIONS__);
-            }
-        });
-        // rebuild timer
-        umdIntervalIdMap.forEach((info) => {
-            microWindow.setInterval(info.handler, info.timeout, ...info.args);
-        });
-        umdTimeoutIdMap.forEach((info) => {
-            microWindow.setTimeout(info.handler, info.timeout, ...info.args);
-        });
-        // rebuild onclick event
-        umdOnClickHandler && documentClickListMap.set(appName, umdOnClickHandler);
-        // rebuild document event
-        setCurrentAppName(appName);
-        umdDocumentListenerMap.forEach((listenerList, type) => {
-            for (const listener of listenerList) {
-                document.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_MARK_OPTIONS__);
-            }
-        });
-        setCurrentAppName(null);
-    };
-    // release all event listener & interval & timeout when unmount app
-    const releaseEffect = () => {
-        // Clear window binding events
-        if (eventListenerMap.size) {
-            eventListenerMap.forEach((listenerList, type) => {
-                for (const listener of listenerList) {
-                    rawWindowRemoveEventListener.call(rawWindow, type, listener);
-                }
-            });
-            eventListenerMap.clear();
-        }
-        // Clear timers
-        if (intervalIdMap.size) {
-            intervalIdMap.forEach((_, intervalId) => {
-                rawClearInterval.call(rawWindow, intervalId);
-            });
-            intervalIdMap.clear();
-        }
-        if (timeoutIdMap.size) {
-            timeoutIdMap.forEach((_, timeoutId) => {
-                rawClearTimeout.call(rawWindow, timeoutId);
-            });
-            timeoutIdMap.clear();
-        }
-        // Clear the function bound by micro application through document.onclick
-        documentClickListMap.delete(appName);
-        // Clear document binding event
-        const documentAppListenersMap = documentEventListenerMap.get(appName);
-        if (documentAppListenersMap) {
-            documentAppListenersMap.forEach((listenerList, type) => {
-                for (const listener of listenerList) {
-                    rawDocumentRemoveEventListener.call(rawDocument, type, listener);
-                }
-            });
-            documentAppListenersMap.clear();
-        }
-    };
-    return {
-        recordUmdEffect,
-        rebuildUmdEffect,
-        releaseEffect,
-    };
-}
-
-class EventCenter {
-    constructor() {
-        this.eventList = new Map();
-    }
-    // whether the name is legal
-    isLegalName(name) {
-        if (!name) {
-            logError('event-center: Invalid name');
-            return false;
-        }
-        return true;
-    }
-    /**
-     * add listener
-     * @param name event name
-     * @param f listener
-     * @param autoTrigger If there is cached data when first bind listener, whether it needs to trigger, default is false
-     */
-    on(name, f, autoTrigger = false) {
-        if (this.isLegalName(name)) {
-            if (!isFunction(f)) {
-                return logError('event-center: Invalid callback function');
-            }
-            let eventInfo = this.eventList.get(name);
-            if (!eventInfo) {
-                eventInfo = {
-                    data: {},
-                    callbacks: new Set(),
-                };
-                this.eventList.set(name, eventInfo);
-            }
-            else if (autoTrigger && Object.getOwnPropertyNames(eventInfo.data).length) {
-                // auto trigger when data not null
-                f(eventInfo.data);
-            }
-            eventInfo.callbacks.add(f);
-        }
-    }
-    // remove listener, but the data is not cleared
-    off(name, f) {
-        if (this.isLegalName(name)) {
-            const eventInfo = this.eventList.get(name);
-            if (eventInfo) {
-                if (isFunction(f)) {
-                    eventInfo.callbacks.delete(f);
-                }
-                else {
-                    eventInfo.callbacks.clear();
-                }
-            }
-        }
-    }
-    // dispatch data
-    dispatch(name, data) {
-        if (this.isLegalName(name)) {
-            if (!isPlainObject(data)) {
-                return logError('event-center: data must be object');
-            }
-            let eventInfo = this.eventList.get(name);
-            if (eventInfo) {
-                // Update when the data is not equal
-                if (eventInfo.data !== data) {
-                    eventInfo.data = data;
-                    for (const f of eventInfo.callbacks) {
-                        f(data);
-                    }
-                }
-            }
-            else {
-                eventInfo = {
-                    data: data,
-                    callbacks: new Set(),
-                };
-                this.eventList.set(name, eventInfo);
-            }
-        }
-    }
-    // get data
-    getData(name) {
-        var _a;
-        const eventInfo = this.eventList.get(name);
-        return (_a = eventInfo === null || eventInfo === void 0 ? void 0 : eventInfo.data) !== null && _a !== void 0 ? _a : null;
-    }
-}
-
-const eventCenter = new EventCenter();
-/**
- * Format event name
- * @param appName app.name
- * @param fromBaseApp is from base app
- */
-function formatEventName(appName, fromBaseApp) {
-    if (!isString(appName) || !appName)
-        return '';
-    return fromBaseApp ? `__from_base_app_${appName}__` : `__from_micro_app_${appName}__`;
-}
-// Global data
-class EventCenterForGlobal {
-    /**
-     * add listener of global data
-     * @param cb listener
-     * @param autoTrigger If there is cached data when first bind listener, whether it needs to trigger, default is false
-     */
-    addGlobalDataListener(cb, autoTrigger) {
-        const appName = this.appName;
-        // if appName exists, this is in sub app
-        if (appName) {
-            cb.__APP_NAME__ = appName;
-            cb.__AUTO_TRIGGER__ = autoTrigger;
+// Global data
+class EventCenterForGlobal {
+    /**
+     * add listener of global data
+     * @param cb listener
+     * @param autoTrigger If there is cached data when first bind listener, whether it needs to trigger, default is false
+     */
+    addGlobalDataListener(cb, autoTrigger) {
+        const appName = this.appName;
+        // if appName exists, this is in sub app
+        if (appName) {
+            cb.__APP_NAME__ = appName;
+            cb.__AUTO_TRIGGER__ = autoTrigger;
         }
         eventCenter.on('global', cb, autoTrigger);
     }
@@ -1753,197 +1484,384 @@ function recordDataCenterSnapshot(microAppEventCneter) {
                 microAppEventCneter.umdDataListeners.global.add(cb);
             }
         }
-    }
-    const subAppEventInfo = eventCenter.eventList.get(formatEventName(appName, true));
-    if (subAppEventInfo) {
-        microAppEventCneter.umdDataListeners.normal = new Set(subAppEventInfo.callbacks);
-    }
-}
-/**
- * Rebind the UMD function of the record before remount
- * @param microAppEventCneter instance of EventCenterForMicroApp
- */
-function rebuildDataCenterSnapshot(microAppEventCneter) {
-    for (const cb of microAppEventCneter.umdDataListeners.global) {
-        microAppEventCneter.addGlobalDataListener(cb, cb.__AUTO_TRIGGER__);
-    }
-    for (const cb of microAppEventCneter.umdDataListeners.normal) {
-        microAppEventCneter.addDataListener(cb, cb.__AUTO_TRIGGER__);
-    }
+    }
+    const subAppEventInfo = eventCenter.eventList.get(formatEventName(appName, true));
+    if (subAppEventInfo) {
+        microAppEventCneter.umdDataListeners.normal = new Set(subAppEventInfo.callbacks);
+    }
+}
+/**
+ * Rebind the UMD function of the record before remount
+ * @param microAppEventCneter instance of EventCenterForMicroApp
+ */
+function rebuildDataCenterSnapshot(microAppEventCneter) {
+    for (const cb of microAppEventCneter.umdDataListeners.global) {
+        microAppEventCneter.addGlobalDataListener(cb, cb.__AUTO_TRIGGER__);
+    }
+    for (const cb of microAppEventCneter.umdDataListeners.normal) {
+        microAppEventCneter.addDataListener(cb, cb.__AUTO_TRIGGER__);
+    }
+}
+
+/* eslint-disable no-return-assign */
+function isBoundedFunction(value) {
+    if (isBoolean(value.__MICRO_APP_ISBOUND_FUNCTION))
+        return value.__MICRO_APP_ISBOUND_FUNCTION;
+    return value.__MICRO_APP_ISBOUND_FUNCTION = isBoundFunction(value);
+}
+function isConstructor(value) {
+    var _a;
+    if (isBoolean(value.__MICRO_APP_ISCONSTRUCTOR))
+        return value.__MICRO_APP_ISCONSTRUCTOR;
+    const valueStr = value.toString();
+    const result = (((_a = value.prototype) === null || _a === void 0 ? void 0 : _a.constructor) === value &&
+        Object.getOwnPropertyNames(value.prototype).length > 1) ||
+        /^function\s+[A-Z]/.test(valueStr) ||
+        /^class\s+/.test(valueStr);
+    return value.__MICRO_APP_ISCONSTRUCTOR = result;
+}
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+function bindFunctionToRawWindow(rawWindow, value) {
+    if (value.__MICRO_APP_BOUND_WINDOW_FUNCTION)
+        return value.__MICRO_APP_BOUND_WINDOW_FUNCTION;
+    if (!isConstructor(value) && !isBoundedFunction(value)) {
+        const bindRawWindowValue = value.bind(rawWindow);
+        for (const key in value) {
+            bindRawWindowValue[key] = value[key];
+        }
+        if (value.hasOwnProperty('prototype')) {
+            rawDefineProperty(bindRawWindowValue, 'prototype', {
+                value: value.prototype,
+                configurable: true,
+                enumerable: false,
+                writable: true,
+            });
+        }
+        return value.__MICRO_APP_BOUND_WINDOW_FUNCTION = bindRawWindowValue;
+    }
+    return value;
+}
+
+// document.onclick binding list, the binding function of each application is unique
+const documentClickListMap = new Map();
+let hasRewriteDocumentOnClick = false;
+/**
+ * Rewrite document.onclick and execute it only once
+ */
+function overwriteDocumentOnClick() {
+    hasRewriteDocumentOnClick = true;
+    if (Object.getOwnPropertyDescriptor(document, 'onclick')) {
+        return logWarn('Cannot redefine document property onclick');
+    }
+    const rawOnClick = document.onclick;
+    document.onclick = null;
+    let hasDocumentClickInited = false;
+    function onClickHandler(e) {
+        documentClickListMap.forEach((f) => {
+            isFunction(f) && f.call(document, e);
+        });
+    }
+    rawDefineProperty(document, 'onclick', {
+        configurable: true,
+        enumerable: true,
+        get() {
+            const appName = getCurrentAppName();
+            return appName ? documentClickListMap.get(appName) : documentClickListMap.get('base');
+        },
+        set(f) {
+            const appName = getCurrentAppName();
+            if (appName) {
+                documentClickListMap.set(appName, f);
+            }
+            else {
+                documentClickListMap.set('base', f);
+            }
+            if (!hasDocumentClickInited && isFunction(f)) {
+                hasDocumentClickInited = true;
+                globalEnv.rawDocumentAddEventListener.call(globalEnv.rawDocument, 'click', onClickHandler, false);
+            }
+        }
+    });
+    rawOnClick && (document.onclick = rawOnClick);
+}
+/**
+ * The document event is globally, we need to clear these event bindings when micro application unmounted
+ */
+const documentEventListenerMap = new Map();
+function effectDocumentEvent() {
+    const { rawDocument, rawDocumentAddEventListener, rawDocumentRemoveEventListener, } = globalEnv;
+    !hasRewriteDocumentOnClick && overwriteDocumentOnClick();
+    document.addEventListener = function (type, listener, options) {
+        var _a;
+        const appName = getCurrentAppName();
+        /**
+         * ignore bound function of document event in umd mode, used to solve problem of react global events
+         */
+        if (appName && !(((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.umdMode) && isBoundFunction(listener))) {
+            const appListenersMap = documentEventListenerMap.get(appName);
+            if (appListenersMap) {
+                const appListenerList = appListenersMap.get(type);
+                if (appListenerList) {
+                    appListenerList.add(listener);
+                }
+                else {
+                    appListenersMap.set(type, new Set([listener]));
+                }
+            }
+            else {
+                documentEventListenerMap.set(appName, new Map([[type, new Set([listener])]]));
+            }
+            listener && (listener.__MICRO_APP_MARK_OPTIONS__ = options);
+        }
+        rawDocumentAddEventListener.call(rawDocument, type, listener, options);
+    };
+    document.removeEventListener = function (type, listener, options) {
+        var _a;
+        const appName = getCurrentAppName();
+        if (appName && !(((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.umdMode) && isBoundFunction(listener))) {
+            const appListenersMap = documentEventListenerMap.get(appName);
+            if (appListenersMap) {
+                const appListenerList = appListenersMap.get(type);
+                if ((appListenerList === null || appListenerList === void 0 ? void 0 : appListenerList.size) && appListenerList.has(listener)) {
+                    appListenerList.delete(listener);
+                }
+            }
+        }
+        rawDocumentRemoveEventListener.call(rawDocument, type, listener, options);
+    };
+}
+// Clear the document event agent
+function releaseEffectDocumentEvent() {
+    document.addEventListener = globalEnv.rawDocumentAddEventListener;
+    document.removeEventListener = globalEnv.rawDocumentRemoveEventListener;
+}
+// this events should be sent to the specified app
+const formatEventList = ['unmount', 'appstate-change'];
+/**
+ * Format event name
+ * @param type event name
+ * @param microAppWindow micro window
+ */
+function formatEventType(type, microAppWindow) {
+    if (formatEventList.includes(type)) {
+        return `${type}-${microAppWindow.__MICRO_APP_NAME__}`;
+    }
+    return type;
+}
+/**
+ * Rewrite side-effect events
+ * @param microAppWindow micro window
+ */
+function effect(microAppWindow) {
+    const appName = microAppWindow.__MICRO_APP_NAME__;
+    const eventListenerMap = new Map();
+    const intervalIdMap = new Map();
+    const timeoutIdMap = new Map();
+    const { rawWindow, rawDocument, rawWindowAddEventListener, rawWindowRemoveEventListener, rawSetInterval, rawSetTimeout, rawClearInterval, rawClearTimeout, rawDocumentRemoveEventListener, } = globalEnv;
+    // listener may be null, e.g test-passive
+    microAppWindow.addEventListener = function (type, listener, options) {
+        type = formatEventType(type, microAppWindow);
+        const listenerList = eventListenerMap.get(type);
+        if (listenerList) {
+            listenerList.add(listener);
+        }
+        else {
+            eventListenerMap.set(type, new Set([listener]));
+        }
+        listener && (listener.__MICRO_APP_MARK_OPTIONS__ = options);
+        rawWindowAddEventListener.call(rawWindow, type, listener, options);
+    };
+    microAppWindow.removeEventListener = function (type, listener, options) {
+        type = formatEventType(type, microAppWindow);
+        const listenerList = eventListenerMap.get(type);
+        if ((listenerList === null || listenerList === void 0 ? void 0 : listenerList.size) && listenerList.has(listener)) {
+            listenerList.delete(listener);
+        }
+        rawWindowRemoveEventListener.call(rawWindow, type, listener, options);
+    };
+    microAppWindow.setInterval = function (handler, timeout, ...args) {
+        const intervalId = rawSetInterval.call(rawWindow, handler, timeout, ...args);
+        intervalIdMap.set(intervalId, { handler, timeout, args });
+        return intervalId;
+    };
+    microAppWindow.setTimeout = function (handler, timeout, ...args) {
+        const timeoutId = rawSetTimeout.call(rawWindow, handler, timeout, ...args);
+        timeoutIdMap.set(timeoutId, { handler, timeout, args });
+        return timeoutId;
+    };
+    microAppWindow.clearInterval = function (intervalId) {
+        intervalIdMap.delete(intervalId);
+        rawClearInterval.call(rawWindow, intervalId);
+    };
+    microAppWindow.clearTimeout = function (timeoutId) {
+        timeoutIdMap.delete(timeoutId);
+        rawClearTimeout.call(rawWindow, timeoutId);
+    };
+    const umdWindowListenerMap = new Map();
+    const umdDocumentListenerMap = new Map();
+    let umdIntervalIdMap = new Map();
+    let umdTimeoutIdMap = new Map();
+    let umdOnClickHandler;
+    // record event and timer before exec umdMountHook
+    const recordUmdEffect = () => {
+        // record window event
+        eventListenerMap.forEach((listenerList, type) => {
+            if (listenerList.size) {
+                umdWindowListenerMap.set(type, new Set(listenerList));
+            }
+        });
+        // record timers
+        if (intervalIdMap.size) {
+            umdIntervalIdMap = new Map(intervalIdMap);
+        }
+        if (timeoutIdMap.size) {
+            umdTimeoutIdMap = new Map(timeoutIdMap);
+        }
+        // record onclick handler
+        umdOnClickHandler = documentClickListMap.get(appName);
+        // record document event
+        const documentAppListenersMap = documentEventListenerMap.get(appName);
+        if (documentAppListenersMap) {
+            documentAppListenersMap.forEach((listenerList, type) => {
+                if (listenerList.size) {
+                    umdDocumentListenerMap.set(type, new Set(listenerList));
+                }
+            });
+        }
+    };
+    // rebuild event and timer before remount umd app
+    const rebuildUmdEffect = () => {
+        // rebuild window event
+        umdWindowListenerMap.forEach((listenerList, type) => {
+            for (const listener of listenerList) {
+                microAppWindow.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
+            }
+        });
+        // rebuild timer
+        umdIntervalIdMap.forEach((info) => {
+            microAppWindow.setInterval(info.handler, info.timeout, ...info.args);
+        });
+        umdTimeoutIdMap.forEach((info) => {
+            microAppWindow.setTimeout(info.handler, info.timeout, ...info.args);
+        });
+        // rebuild onclick event
+        umdOnClickHandler && documentClickListMap.set(appName, umdOnClickHandler);
+        // rebuild document event
+        setCurrentAppName(appName);
+        umdDocumentListenerMap.forEach((listenerList, type) => {
+            for (const listener of listenerList) {
+                document.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
+            }
+        });
+        setCurrentAppName(null);
+    };
+    // release all event listener & interval & timeout when unmount app
+    const releaseEffect = () => {
+        // Clear window binding events
+        if (eventListenerMap.size) {
+            eventListenerMap.forEach((listenerList, type) => {
+                for (const listener of listenerList) {
+                    rawWindowRemoveEventListener.call(rawWindow, type, listener);
+                }
+            });
+            eventListenerMap.clear();
+        }
+        // Clear timers
+        if (intervalIdMap.size) {
+            intervalIdMap.forEach((_, intervalId) => {
+                rawClearInterval.call(rawWindow, intervalId);
+            });
+            intervalIdMap.clear();
+        }
+        if (timeoutIdMap.size) {
+            timeoutIdMap.forEach((_, timeoutId) => {
+                rawClearTimeout.call(rawWindow, timeoutId);
+            });
+            timeoutIdMap.clear();
+        }
+        // Clear the function bound by micro application through document.onclick
+        documentClickListMap.delete(appName);
+        // Clear document binding event
+        const documentAppListenersMap = documentEventListenerMap.get(appName);
+        if (documentAppListenersMap) {
+            documentAppListenersMap.forEach((listenerList, type) => {
+                for (const listener of listenerList) {
+                    rawDocumentRemoveEventListener.call(rawDocument, type, listener);
+                }
+            });
+            documentAppListenersMap.clear();
+        }
+    };
+    return {
+        recordUmdEffect,
+        rebuildUmdEffect,
+        releaseEffect,
+    };
 }
+// window.addEventListener('mousedown', (e: Event) => {
+//   const targetNode = e.target
+//   const activeApps = getActiveApps(true)
+//   let isScopeOfMicroApp = false
+//   for (const appName of activeApps) {
+//     const app = appInstanceMap.get(appName)!
+//     if (targetNode instanceof Node && app.container!.contains(targetNode)) {
+//       isScopeOfMicroApp = true
+//       // console.log(111111, appName)
+//       setCurrentAppName(appName)
+//       break
+//     }
+//   }
+//   if (!isScopeOfMicroApp) {
+//     setCurrentAppName(null)
+//   }
+// }, false)
+// let isWaitingForMacroReset = false
+// window.addEventListener('mouseup', () => {
+//   if (!isWaitingForMacroReset && getCurrentAppName()) {
+//     isWaitingForMacroReset = true
+//     setTimeout(() => {
+//       setCurrentAppName(null)
+//       isWaitingForMacroReset = false
+//     })
+//   }
+// }, false)
 
 // Variables that can escape to rawWindow
 const staticEscapeProperties = [
     'System',
     '__cjsWrapper',
-    '__REACT_ERROR_OVERLAY_GLOBAL_HOOK__',
 ];
 // Variables that can only assigned to rawWindow
 const escapeSetterKeyList = [
     'location',
 ];
-const unscopables = {
-    undefined: true,
-    Array: true,
-    Object: true,
-    String: true,
-    Boolean: true,
-    Math: true,
-    Number: true,
-    Symbol: true,
-    parseFloat: true,
-    Float32Array: true,
-};
-/**
- * macro task to solve the rendering problem of vue3
- */
-let macroTimer;
-function macroTask(fn) {
-    macroTimer && clearTimeout(macroTimer);
-    macroTimer = setTimeout(fn, 0);
-}
+const globalPropertyList = ['window', 'self', 'globalThis'];
 class SandBox {
-    constructor(appName, url, macro) {
-        // Scoped global Properties(Properties that can only get and set in microWindow, will not escape to rawWindow)
+    constructor(appName, url) {
+        // Scoped global Properties(Properties that can only get and set in microAppWindow, will not escape to rawWindow)
         this.scopeProperties = ['webpackJsonp'];
         // Properties that can be escape to rawWindow
         this.escapeProperties = [];
-        // Properties newly added to microWindow
+        // Properties newly added to microAppWindow
         this.injectedKeys = new Set();
         // Properties escape to rawWindow, cleared when unmount
         this.escapeKeys = new Set();
         // sandbox state
         this.active = false;
-        this.microWindow = {}; // Proxy target
-        const rawWindow = globalEnv.rawWindow;
-        const rawDocument = globalEnv.rawDocument;
-        const descriptorTargetMap = new Map();
-        const hasOwnProperty = (key) => this.microWindow.hasOwnProperty(key) || rawWindow.hasOwnProperty(key);
+        this.microAppWindow = {}; // Proxy target
         // get scopeProperties and escapeProperties from plugins
         this.getScopeProperties(appName);
+        // create proxyWindow with Proxy(microAppWindow)
+        this.proxyWindow = this.createProxyWindow();
         // inject global properties
-        this.inject(this.microWindow, appName, url);
+        this.initMicroAppWindow(this.microAppWindow, appName, url);
         // Rewrite global event listener & timeout
-        Object.assign(this, effect(this.microWindow));
-        this.proxyWindow = new Proxy(this.microWindow, {
-            get: (target, key) => {
-                if (key === Symbol.unscopables)
-                    return unscopables;
-                if (['window', 'self', 'globalThis'].includes(key)) {
-                    return this.proxyWindow;
-                }
-                if (key === 'top' || key === 'parent') {
-                    if (rawWindow === rawWindow.parent) { // not in iframe
-                        return this.proxyWindow;
-                    }
-                    return Reflect.get(rawWindow, key); // iframe
-                }
-                if (key === 'hasOwnProperty')
-                    return hasOwnProperty;
-                if (key === 'document' || key === 'eval') {
-                    if (this.active) {
-                        setCurrentAppName(appName);
-                        (macro ? macroTask : defer)(() => setCurrentAppName(null));
-                    }
-                    switch (key) {
-                        case 'document':
-                            return rawDocument;
-                        case 'eval':
-                            return eval;
-                    }
-                }
-                if (Reflect.has(target, key)) {
-                    return Reflect.get(target, key);
-                }
-                if (this.scopeProperties.includes(key) ||
-                    (isString(key) && /^__MICRO_APP_/.test(key))) {
-                    return Reflect.get(target, key);
-                }
-                const rawValue = Reflect.get(rawWindow, key);
-                return bindFunctionToRawWidow(rawWindow, rawValue);
-            },
-            set: (target, key, value) => {
-                if (this.active) {
-                    if (escapeSetterKeyList.includes(key)) {
-                        Reflect.set(rawWindow, key, value);
-                    }
-                    else if (!target.hasOwnProperty(key) &&
-                        rawWindow.hasOwnProperty(key) &&
-                        !this.scopeProperties.includes(key)) {
-                        const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
-                        const { writable, configurable, enumerable } = descriptor;
-                        if (writable) {
-                            Object.defineProperty(target, key, {
-                                configurable,
-                                enumerable,
-                                writable,
-                                value,
-                            });
-                            this.injectedKeys.add(key);
-                        }
-                    }
-                    else {
-                        Reflect.set(target, key, value);
-                        this.injectedKeys.add(key);
-                    }
-                    if ((this.escapeProperties.includes(key) ||
-                        (staticEscapeProperties.includes(key) && !Reflect.has(rawWindow, key))) &&
-                        !this.scopeProperties.includes(key)) {
-                        Reflect.set(rawWindow, key, value);
-                        this.escapeKeys.add(key);
-                    }
-                }
-                return true;
-            },
-            has: (target, key) => {
-                if (this.scopeProperties.includes(key))
-                    return key in target;
-                return key in unscopables || key in target || key in rawWindow;
-            },
-            // Object.getOwnPropertyDescriptor(window, key)
-            // TODO: use set
-            getOwnPropertyDescriptor: (target, key) => {
-                if (target.hasOwnProperty(key)) {
-                    descriptorTargetMap.set(key, 'target');
-                    return Object.getOwnPropertyDescriptor(target, key);
-                }
-                if (rawWindow.hasOwnProperty(key)) {
-                    // like console, alert ...
-                    descriptorTargetMap.set(key, 'rawWindow');
-                    const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
-                    if (descriptor && !descriptor.configurable) {
-                        descriptor.configurable = true;
-                    }
-                    return descriptor;
-                }
-                return undefined;
-            },
-            // Object.defineProperty(window, key, Descriptor)
-            defineProperty: (target, key, value) => {
-                const from = descriptorTargetMap.get(key);
-                if (from === 'rawWindow') {
-                    return Reflect.defineProperty(rawWindow, key, value);
-                }
-                return Reflect.defineProperty(target, key, value);
-            },
-            // Object.getOwnPropertyNames(window)
-            ownKeys: (target) => {
-                return unique(Reflect.ownKeys(rawWindow).concat(Reflect.ownKeys(target)));
-            },
-            deleteProperty: (target, key) => {
-                if (target.hasOwnProperty(key)) {
-                    this.injectedKeys.has(key) && this.injectedKeys.delete(key);
-                    this.escapeKeys.has(key) && Reflect.deleteProperty(rawWindow, key);
-                    return Reflect.deleteProperty(target, key);
-                }
-                return true;
-            },
-        });
+        Object.assign(this, effect(this.microAppWindow));
     }
     start(baseroute) {
         if (!this.active) {
             this.active = true;
-            this.microWindow.__MICRO_APP_BASE_ROUTE__ = this.microWindow.__MICRO_APP_BASE_URL__ = baseroute;
+            this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
             // BUG FIX: bable-polyfill@6.x
             globalEnv.rawWindow._babelPolyfill && (globalEnv.rawWindow._babelPolyfill = false);
             if (++SandBox.activeCount === 1) {
@@ -1955,10 +1873,10 @@ class SandBox {
         if (this.active) {
             this.active = false;
             this.releaseEffect();
-            this.microWindow.microApp.clearDataListener();
-            this.microWindow.microApp.clearGlobalDataListener();
+            this.microAppWindow.microApp.clearDataListener();
+            this.microAppWindow.microApp.clearGlobalDataListener();
             this.injectedKeys.forEach((key) => {
-                Reflect.deleteProperty(this.microWindow, key);
+                Reflect.deleteProperty(this.microAppWindow, key);
             });
             this.injectedKeys.clear();
             this.escapeKeys.forEach((key) => {
@@ -1972,12 +1890,12 @@ class SandBox {
     }
     // record umd snapshot before the first execution of umdHookMount
     recordUmdSnapshot() {
-        this.microWindow.__MICRO_APP_UMD_MODE__ = true;
+        this.microAppWindow.__MICRO_APP_UMD_MODE__ = true;
         this.recordUmdEffect();
-        recordDataCenterSnapshot(this.microWindow.microApp);
+        recordDataCenterSnapshot(this.microAppWindow.microApp);
         this.recordUmdinjectedValues = new Map();
         this.injectedKeys.forEach((key) => {
-            this.recordUmdinjectedValues.set(key, Reflect.get(this.microWindow, key));
+            this.recordUmdinjectedValues.set(key, Reflect.get(this.microAppWindow, key));
         });
     }
     // rebuild umd snapshot before remount umd app
@@ -1986,7 +1904,7 @@ class SandBox {
             Reflect.set(this.proxyWindow, key, value);
         });
         this.rebuildUmdEffect();
-        rebuildDataCenterSnapshot(this.microWindow.microApp);
+        rebuildDataCenterSnapshot(this.microAppWindow.microApp);
     }
     /**
      * get scopeProperties and escapeProperties from plugins
@@ -2021,25 +1939,183 @@ class SandBox {
             }
         }
     }
+    // create proxyWindow with Proxy(microAppWindow)
+    createProxyWindow() {
+        const rawWindow = globalEnv.rawWindow;
+        const descriptorTargetMap = new Map();
+        // window.xxx will trigger proxy
+        return new Proxy(this.microAppWindow, {
+            get: (target, key) => {
+                if (Reflect.has(target, key) ||
+                    (isString(key) && /^__MICRO_APP_/.test(key)) ||
+                    this.scopeProperties.includes(key))
+                    return Reflect.get(target, key);
+                const rawValue = Reflect.get(rawWindow, key);
+                return isFunction(rawValue) ? bindFunctionToRawWindow(rawWindow, rawValue) : rawValue;
+            },
+            set: (target, key, value) => {
+                if (this.active) {
+                    if (escapeSetterKeyList.includes(key)) {
+                        Reflect.set(rawWindow, key, value);
+                    }
+                    else if (
+                    // target.hasOwnProperty has been rewritten
+                    !rawHasOwnProperty.call(target, key) &&
+                        rawHasOwnProperty.call(rawWindow, key) &&
+                        !this.scopeProperties.includes(key)) {
+                        const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
+                        const { configurable, enumerable, writable, set } = descriptor;
+                        // set value because it can be set
+                        rawDefineProperty(target, key, {
+                            value,
+                            configurable,
+                            enumerable,
+                            writable: writable !== null && writable !== void 0 ? writable : !!set,
+                        });
+                        this.injectedKeys.add(key);
+                    }
+                    else {
+                        Reflect.set(target, key, value);
+                        this.injectedKeys.add(key);
+                    }
+                    if ((this.escapeProperties.includes(key) ||
+                        (staticEscapeProperties.includes(key) && !Reflect.has(rawWindow, key))) &&
+                        !this.scopeProperties.includes(key)) {
+                        Reflect.set(rawWindow, key, value);
+                        this.escapeKeys.add(key);
+                    }
+                }
+                return true;
+            },
+            has: (target, key) => {
+                if (this.scopeProperties.includes(key))
+                    return key in target;
+                return key in target || key in rawWindow;
+            },
+            // Object.getOwnPropertyDescriptor(window, key)
+            getOwnPropertyDescriptor: (target, key) => {
+                if (rawHasOwnProperty.call(target, key)) {
+                    descriptorTargetMap.set(key, 'target');
+                    return Object.getOwnPropertyDescriptor(target, key);
+                }
+                if (rawHasOwnProperty.call(rawWindow, key)) {
+                    descriptorTargetMap.set(key, 'rawWindow');
+                    const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
+                    if (descriptor && !descriptor.configurable) {
+                        descriptor.configurable = true;
+                    }
+                    return descriptor;
+                }
+                return undefined;
+            },
+            // Object.defineProperty(window, key, Descriptor)
+            defineProperty: (target, key, value) => {
+                const from = descriptorTargetMap.get(key);
+                if (from === 'rawWindow') {
+                    return Reflect.defineProperty(rawWindow, key, value);
+                }
+                return Reflect.defineProperty(target, key, value);
+            },
+            // Object.getOwnPropertyNames(window)
+            ownKeys: (target) => {
+                return unique(Reflect.ownKeys(rawWindow).concat(Reflect.ownKeys(target)));
+            },
+            deleteProperty: (target, key) => {
+                if (rawHasOwnProperty.call(target, key)) {
+                    this.injectedKeys.has(key) && this.injectedKeys.delete(key);
+                    this.escapeKeys.has(key) && Reflect.deleteProperty(rawWindow, key);
+                    return Reflect.deleteProperty(target, key);
+                }
+                return true;
+            },
+        });
+    }
     /**
-     * inject global properties to microWindow
-     * @param microWindow micro window
+     * inject global properties to microAppWindow
+     * @param microAppWindow micro window
      * @param appName app name
      * @param url app url
      */
-    inject(microWindow, appName, url) {
-        microWindow.__MICRO_APP_ENVIRONMENT__ = true;
-        microWindow.__MICRO_APP_NAME__ = appName;
-        microWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
-        microWindow.microApp = new EventCenterForMicroApp(appName);
-        microWindow.rawWindow = globalEnv.rawWindow;
-        microWindow.rawDocument = globalEnv.rawDocument;
-        microWindow.removeDomScope = removeDomScope;
+    initMicroAppWindow(microAppWindow, appName, url) {
+        microAppWindow.__MICRO_APP_ENVIRONMENT__ = true;
+        microAppWindow.__MICRO_APP_NAME__ = appName;
+        microAppWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
+        microAppWindow.__MICRO_APP_WINDOW__ = microAppWindow;
+        microAppWindow.microApp = new EventCenterForMicroApp(appName);
+        microAppWindow.rawWindow = globalEnv.rawWindow;
+        microAppWindow.rawDocument = globalEnv.rawDocument;
+        microAppWindow.removeDomScope = removeDomScope;
+        microAppWindow.hasOwnProperty = (key) => rawHasOwnProperty.call(microAppWindow, key) || rawHasOwnProperty.call(globalEnv.rawWindow, key);
+        this.setMappingPropertiesWithRawDescriptor(microAppWindow);
+        this.setHijackProperties(microAppWindow, appName);
+    }
+    // properties associated with the native window
+    setMappingPropertiesWithRawDescriptor(microAppWindow) {
+        let topValue, parentValue;
+        const rawWindow = globalEnv.rawWindow;
+        if (rawWindow === rawWindow.parent) { // not in iframe
+            topValue = parentValue = this.proxyWindow;
+        }
+        else { // in iframe
+            topValue = rawWindow.top;
+            parentValue = rawWindow.parent;
+        }
+        rawDefineProperty(microAppWindow, 'top', this.createDescriptorFormicroAppWindow('top', topValue));
+        rawDefineProperty(microAppWindow, 'parent', this.createDescriptorFormicroAppWindow('parent', parentValue));
+        globalPropertyList.forEach((key) => {
+            rawDefineProperty(microAppWindow, key, this.createDescriptorFormicroAppWindow(key, this.proxyWindow));
+        });
+    }
+    createDescriptorFormicroAppWindow(key, value) {
+        const { configurable = true, enumerable = true, writable, set } = Object.getOwnPropertyDescriptor(globalEnv.rawWindow, key) || { writable: true };
+        const descriptor = {
+            value,
+            configurable,
+            enumerable,
+            writable: writable !== null && writable !== void 0 ? writable : !!set
+        };
+        return descriptor;
+    }
+    // set hijack Properties to microAppWindow
+    setHijackProperties(microAppWindow, appName) {
+        let modifiedEval, modifiedImage;
+        rawDefineProperties(microAppWindow, {
+            document: {
+                get() {
+                    throttleDeferForSetAppName(appName);
+                    return globalEnv.rawDocument;
+                },
+                configurable: false,
+                enumerable: true,
+            },
+            eval: {
+                get() {
+                    throttleDeferForSetAppName(appName);
+                    return modifiedEval || eval;
+                },
+                set: (value) => {
+                    modifiedEval = value;
+                },
+                configurable: true,
+                enumerable: false,
+            },
+            Image: {
+                get() {
+                    throttleDeferForSetAppName(appName);
+                    return modifiedImage || globalEnv.ImageProxy;
+                },
+                set: (value) => {
+                    modifiedImage = value;
+                },
+                configurable: true,
+                enumerable: false,
+            },
+        });
     }
 }
 SandBox.activeCount = 0; // number of active sandbox
 
-function eventHandler$1(event, element) {
+function formatEventInfo(event, element) {
     Object.defineProperties(event, {
         currentTarget: {
             get() {
@@ -2078,7 +2154,7 @@ function dispatchLifecyclesEvent(element, appName, lifecycleName, error) {
     const event = new CustomEvent(lifecycleName, {
         detail,
     });
-    eventHandler$1(event, element);
+    formatEventInfo(event, element);
     // global hooks
     // @ts-ignore
     if (isFunction((_a = microApp.lifeCycles) === null || _a === void 0 ? void 0 : _a[lifecycleName])) {
@@ -2103,7 +2179,7 @@ function dispatchCustomEventToMicroApp(eventName, appName, detail = {}) {
 // micro app instances
 const appInstanceMap = new Map();
 class CreateApp {
-    constructor({ name, url, ssrUrl, container, inline, scopecss, useSandbox, macro, baseroute, }) {
+    constructor({ name, url, ssrUrl, container, inline, scopecss, useSandbox, baseroute, }) {
         this.state = appStates.NOT_LOADED;
         this.keepAliveState = null;
         this.keepAliveContainer = null;
@@ -2114,7 +2190,6 @@ class CreateApp {
         this.umdMode = false;
         this.isPrefetch = false;
         this.container = null;
-        this.macro = false;
         this.baseroute = '';
         this.sandBox = null;
         this.container = container !== null && container !== void 0 ? container : null;
@@ -2126,13 +2201,12 @@ class CreateApp {
         this.url = url;
         this.useSandbox = useSandbox;
         this.scopecss = this.useSandbox && scopecss;
-        this.macro = macro !== null && macro !== void 0 ? macro : false;
         this.source = {
             links: new Map(),
             scripts: new Map(),
         };
         this.loadSourceCode();
-        this.useSandbox && (this.sandBox = new SandBox(name, url, this.macro));
+        this.useSandbox && (this.sandBox = new SandBox(name, url));
     }
     // Load resources
     loadSourceCode() {
@@ -2298,21 +2372,21 @@ class CreateApp {
      */
     actionsForUnmount(destroy, unmountcb) {
         var _a;
-        // dispatch unmount event to base app
-        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.UNMOUNT);
         (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.stop();
         if (destroy) {
-            this.actionsForCompletelyDestory();
+            this.actionsForCompletelyDestroy();
         }
         else if (this.umdMode && this.container.childElementCount) {
             cloneContainer(this.container, this.source.html, false);
         }
+        // dispatch unmount event to base app
+        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.UNMOUNT);
         this.container.innerHTML = '';
         this.container = null;
         unmountcb && unmountcb();
     }
     // actions for completely destroy
-    actionsForCompletelyDestory() {
+    actionsForCompletelyDestroy() {
         if (!this.useSandbox && this.umdMode) {
             delete window[this.libraryName];
         }
@@ -2320,6 +2394,9 @@ class CreateApp {
     }
     // hidden app when disconnectedCallback called with keep-alive
     hiddenKeepAliveApp() {
+        const oldContainer = this.container;
+        cloneContainer(this.container, this.keepAliveContainer ? this.keepAliveContainer : (this.keepAliveContainer = document.createElement('div')), false);
+        this.container = this.keepAliveContainer;
         this.keepAliveState = keepAliveStates.KEEP_ALIVE_HIDDEN;
         // event should dispatch before clone node
         // dispatch afterhidden event to micro-app
@@ -2327,9 +2404,7 @@ class CreateApp {
             appState: 'afterhidden',
         });
         // dispatch afterhidden event to base app
-        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.AFTERHIDDEN);
-        cloneContainer(this.container, this.keepAliveContainer ? this.keepAliveContainer : (this.keepAliveContainer = document.createElement('div')), false);
-        this.container = this.keepAliveContainer;
+        dispatchLifecyclesEvent(oldContainer, this.name, lifeCycles.AFTERHIDDEN);
     }
     // show app when connectedCallback called with keep-alive
     showKeepAliveApp(container) {
@@ -2377,20 +2452,6 @@ class CreateApp {
         return {};
     }
 }
-// if app not prefetch & not unmount, then app is active
-function getActiveApps() {
-    const activeApps = [];
-    appInstanceMap.forEach((app, appName) => {
-        if (appStates.UNMOUNT !== app.getAppState() && !app.isPrefetch) {
-            activeApps.push(appName);
-        }
-    });
-    return activeApps;
-}
-// get all registered apps
-function getAllApps() {
-    return Array.from(appInstanceMap.keys());
-}
 
 // Record element and map element
 const dynamicElementInMicroAppMap = new WeakMap();
@@ -2585,13 +2646,13 @@ function patchElementPrototypeMethods() {
         }
     };
     // prototype methods of add element👇
-    Node.prototype.appendChild = function appendChild(newChild) {
+    Element.prototype.appendChild = function appendChild(newChild) {
         return commonElementHander(this, newChild, null, globalEnv.rawAppendChild);
     };
-    Node.prototype.insertBefore = function insertBefore(newChild, refChild) {
+    Element.prototype.insertBefore = function insertBefore(newChild, refChild) {
         return commonElementHander(this, newChild, refChild, globalEnv.rawInsertBefore);
     };
-    Node.prototype.replaceChild = function replaceChild(newChild, oldChild) {
+    Element.prototype.replaceChild = function replaceChild(newChild, oldChild) {
         return commonElementHander(this, newChild, oldChild, globalEnv.rawReplaceChild);
     };
     Element.prototype.append = function append(...nodes) {
@@ -2610,7 +2671,7 @@ function patchElementPrototypeMethods() {
         }
     };
     // prototype methods of delete element👇
-    Node.prototype.removeChild = function removeChild(oldChild) {
+    Element.prototype.removeChild = function removeChild(oldChild) {
         if (oldChild === null || oldChild === void 0 ? void 0 : oldChild.__MICRO_APP_NAME__) {
             const app = appInstanceMap.get(oldChild.__MICRO_APP_NAME__);
             if (app === null || app === void 0 ? void 0 : app.container) {
@@ -2620,6 +2681,12 @@ function patchElementPrototypeMethods() {
         }
         return globalEnv.rawRemoveChild.call(this, oldChild);
     };
+    // patch cloneNode
+    Element.prototype.cloneNode = function cloneNode(deep) {
+        const clonedNode = globalEnv.rawCloneNode.call(this, deep);
+        this.__MICRO_APP_NAME__ && (clonedNode.__MICRO_APP_NAME__ = this.__MICRO_APP_NAME__);
+        return clonedNode;
+    };
 }
 /**
  * Mark the newly created element in the micro application
@@ -2738,12 +2805,13 @@ function releasePatches() {
     setCurrentAppName(null);
     releasePatchDocument();
     Element.prototype.setAttribute = globalEnv.rawSetAttribute;
-    Node.prototype.appendChild = globalEnv.rawAppendChild;
-    Node.prototype.insertBefore = globalEnv.rawInsertBefore;
-    Node.prototype.replaceChild = globalEnv.rawReplaceChild;
-    Node.prototype.removeChild = globalEnv.rawRemoveChild;
+    Element.prototype.appendChild = globalEnv.rawAppendChild;
+    Element.prototype.insertBefore = globalEnv.rawInsertBefore;
+    Element.prototype.replaceChild = globalEnv.rawReplaceChild;
+    Element.prototype.removeChild = globalEnv.rawRemoveChild;
     Element.prototype.append = globalEnv.rawAppend;
     Element.prototype.prepend = globalEnv.rawPrepend;
+    Element.prototype.cloneNode = globalEnv.rawCloneNode;
 }
 // Set the style of micro-app-head and micro-app-body
 let hasRejectMicroAppStyle = false;
@@ -2823,12 +2891,12 @@ function defineElement(tagName) {
                                 this.actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp);
                             });
                         }
-                        else if (this.getDisposeResult('keep-alive')) {
+                        else if (this.getKeepAliveModeResult()) {
                             this.handleHiddenKeepAliveApp();
                             this.actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp);
                         }
                         else {
-                            this.handleUnmount(this.getDisposeResult('destroy') || this.getDisposeResult('destory'), () => {
+                            this.handleUnmount(this.getDestroyCompatibleResult(), () => {
                                 this.actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp);
                             });
                         }
@@ -2854,9 +2922,8 @@ function defineElement(tagName) {
         // inline: whether js runs in inline script mode, default is false
         // disableScopecss: whether disable css scoped, default is false
         // disableSandbox: whether disable sandbox, default is false
-        // macro: used to solve the async render problem of vue3, default is false
         // baseRoute: route prefix, default is ''
-        // keep-alive: open keep-alive mode, keep-alive has priority over destroy
+        // keep-alive: open keep-alive mode
         connectedCallback() {
             this.hasConnected = true;
             if (!elementInstanceMap.has(this)) {
@@ -2867,13 +2934,13 @@ function defineElement(tagName) {
         }
         disconnectedCallback() {
             this.hasConnected = false;
-            // keep-alive has priority over destroy
-            if (this.getDisposeResult('keep-alive')) {
+            // keep-alive
+            if (this.getKeepAliveModeResult()) {
                 this.handleHiddenKeepAliveApp();
             }
             else {
                 elementInstanceMap.delete(this);
-                this.handleUnmount(this.getDisposeResult('destroy') || this.getDisposeResult('destory'), () => {
+                this.handleUnmount(this.getDestroyCompatibleResult(), () => {
                     if (elementInstanceMap.size === 0) {
                         releasePatches();
                     }
@@ -3052,7 +3119,7 @@ function defineElement(tagName) {
              * fix of unmounted umd app with disableSandbox
              */
             if (appInstanceMap.has(this.appName)) {
-                appInstanceMap.get(this.appName).actionsForCompletelyDestory();
+                appInstanceMap.get(this.appName).actionsForCompletelyDestroy();
             }
             const instance = new CreateApp({
                 name: this.appName,
@@ -3062,7 +3129,6 @@ function defineElement(tagName) {
                 inline: this.getDisposeResult('inline'),
                 scopecss: !(this.getDisposeResult('disableScopecss') || this.getDisposeResult('shadowDOM')),
                 useSandbox: !this.getDisposeResult('disableSandbox'),
-                macro: this.getDisposeResult('macro'),
                 baseroute: this.getBaseRouteCompatible(),
             });
             appInstanceMap.set(this.appName, instance);
@@ -3097,7 +3163,27 @@ function defineElement(tagName) {
          */
         getDisposeResult(name) {
             // @ts-ignore
-            return (this.hasAttribute(name) || microApp[name]) && this.getAttribute(name) !== 'false';
+            return (this.compatibleSpecialProperties(name) || microApp[name]) && this.compatibleDisablSpecialProperties(name);
+        }
+        // compatible of disableScopecss & disableSandbox
+        compatibleSpecialProperties(name) {
+            if (name === 'disableScopecss') {
+                return this.hasAttribute('disableScopecss') || this.hasAttribute('disable-scopecss');
+            }
+            else if (name === 'disableSandbox') {
+                return this.hasAttribute('disableSandbox') || this.hasAttribute('disable-sandbox');
+            }
+            return this.hasAttribute(name);
+        }
+        // compatible of disableScopecss & disableSandbox
+        compatibleDisablSpecialProperties(name) {
+            if (name === 'disableScopecss') {
+                return this.getAttribute('disableScopecss') !== 'false' && this.getAttribute('disable-scopecss') !== 'false';
+            }
+            else if (name === 'disableSandbox') {
+                return this.getAttribute('disableSandbox') !== 'false' && this.getAttribute('disable-sandbox') !== 'false';
+            }
+            return this.getAttribute(name) !== 'false';
         }
         /**
          * 2021-09-08
@@ -3108,6 +3194,16 @@ function defineElement(tagName) {
             var _a, _b;
             return (_b = (_a = this.getAttribute('baseroute')) !== null && _a !== void 0 ? _a : this.getAttribute('baseurl')) !== null && _b !== void 0 ? _b : '';
         }
+        // compatible of destroy
+        getDestroyCompatibleResult() {
+            return this.getDisposeResult('destroy') || this.getDisposeResult('destory');
+        }
+        /**
+         * destroy has priority over destroy keep-alive
+         */
+        getKeepAliveModeResult() {
+            return this.getDisposeResult('keep-alive') && !this.getDestroyCompatibleResult();
+        }
         /**
          * Data from the base application
          */
@@ -3157,13 +3253,12 @@ function filterPreFetchTarget(apps) {
  *    url: string,
  *    disableScopecss?: boolean,
  *    disableSandbox?: boolean,
- *    macro?: boolean,
  *  },
  *  ...
  * ])
  * Note:
  *  1: preFetch is asynchronous and is performed only when the browser is idle
- *  2: disableScopecss, disableSandbox, macro must be same with micro-app element, if conflict, the one who executes first shall prevail
+ *  2: disableScopecss, disableSandbox must be same with micro-app element, if conflict, the one who executes first shall prevail
  * @param apps micro apps
  */
 function preFetch(apps) {
@@ -3173,13 +3268,12 @@ function preFetch(apps) {
     requestIdleCallback(() => {
         isFunction(apps) && (apps = apps());
         filterPreFetchTarget(apps).forEach((item) => {
-            var _a, _b, _c;
+            var _a, _b;
             const app = new CreateApp({
                 name: item.name,
                 url: item.url,
                 scopecss: !((_a = item.disableScopecss) !== null && _a !== void 0 ? _a : microApp.disableScopecss),
                 useSandbox: !((_b = item.disableSandbox) !== null && _b !== void 0 ? _b : microApp.disableSandbox),
-                macro: (_c = item.macro) !== null && _c !== void 0 ? _c : microApp.macro,
             });
             app.isPrefetch = true;
             appInstanceMap.set(item.name, app);
@@ -3229,6 +3323,99 @@ function getGlobalAssets(assets) {
     }
 }
 
+/**
+ * if app not prefetch & not unmount, then app is active
+ * @param excludeHiddenApp exclude hidden keep-alive app
+ * @returns active apps
+ */
+function getActiveApps(excludeHiddenApp) {
+    const activeApps = [];
+    appInstanceMap.forEach((app, appName) => {
+        if (appStates.UNMOUNT !== app.getAppState() &&
+            !app.isPrefetch &&
+            (!excludeHiddenApp ||
+                keepAliveStates.KEEP_ALIVE_HIDDEN !== app.getKeepAliveState())) {
+            activeApps.push(appName);
+        }
+    });
+    return activeApps;
+}
+// get all registered apps
+function getAllApps() {
+    return Array.from(appInstanceMap.keys());
+}
+/**
+ * unmount app by appname
+ * @param appName
+ * @param options unmountAppParams
+ * @returns Promise<void>
+ */
+function unmountApp(appName, options) {
+    const app = appInstanceMap.get(formatAppName(appName));
+    return new Promise((reslove) => {
+        if (app) {
+            if (app.getAppState() === appStates.UNMOUNT || app.isPrefetch) {
+                if (options === null || options === void 0 ? void 0 : options.destroy) {
+                    app.actionsForCompletelyDestroy();
+                }
+                reslove();
+            }
+            else if (app.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN) {
+                if (options === null || options === void 0 ? void 0 : options.destroy) {
+                    app.unmount(true, reslove);
+                }
+                else if (options === null || options === void 0 ? void 0 : options.clearAliveState) {
+                    app.unmount(false, reslove);
+                }
+                else {
+                    reslove();
+                }
+            }
+            else {
+                const container = getRootContainer(app.container);
+                const unmountHandler = () => {
+                    container.removeEventListener('unmount', unmountHandler);
+                    container.removeEventListener('afterhidden', afterhiddenHandler);
+                    reslove();
+                };
+                const afterhiddenHandler = () => {
+                    container.removeEventListener('unmount', unmountHandler);
+                    container.removeEventListener('afterhidden', afterhiddenHandler);
+                    reslove();
+                };
+                container.addEventListener('unmount', unmountHandler);
+                container.addEventListener('afterhidden', afterhiddenHandler);
+                if (options === null || options === void 0 ? void 0 : options.destroy) {
+                    let destroyAttrValue, destoryAttrValue;
+                    container.hasAttribute('destroy') && (destroyAttrValue = container.getAttribute('destroy'));
+                    container.hasAttribute('destory') && (destoryAttrValue = container.getAttribute('destory'));
+                    container.setAttribute('destroy', 'true');
+                    container.parentNode.removeChild(container);
+                    container.removeAttribute('destroy');
+                    typeof destroyAttrValue === 'string' && container.setAttribute('destroy', destroyAttrValue);
+                    typeof destoryAttrValue === 'string' && container.setAttribute('destory', destoryAttrValue);
+                }
+                else if ((options === null || options === void 0 ? void 0 : options.clearAliveState) && container.hasAttribute('keep-alive')) {
+                    const keepAliveAttrValue = container.getAttribute('keep-alive');
+                    container.removeAttribute('keep-alive');
+                    container.parentNode.removeChild(container);
+                    container.setAttribute('keep-alive', keepAliveAttrValue);
+                }
+                else {
+                    container.parentNode.removeChild(container);
+                }
+            }
+        }
+        else {
+            logWarn(`app ${appName} does not exist`);
+            reslove();
+        }
+    });
+}
+// unmount all apps in turn
+function unmountAllApps(options) {
+    return Array.from(appInstanceMap.keys()).reduce((pre, next) => pre.then(() => unmountApp(next, options)), Promise.resolve());
+}
 class MicroApp extends EventCenterForBaseApp {
     constructor() {
         super(...arguments);
@@ -3263,7 +3450,6 @@ class MicroApp extends EventCenterForBaseApp {
             this.inline = options.inline;
             this.disableScopecss = options.disableScopecss;
             this.disableSandbox = options.disableSandbox;
-            this.macro = options.macro;
             this.ssr = options.ssr;
             isFunction(options.fetch) && (this.fetch = options.fetch);
             isPlainObject(options.lifeCycles) && (this.lifeCycles = options.lifeCycles);
@@ -3292,5 +3478,5 @@ class MicroApp extends EventCenterForBaseApp {
 var microApp = new MicroApp();
 
 export default microApp;
-export { EventCenterForMicroApp, getActiveApps, getAllApps, preFetch, pureCreateElement, removeDomScope, version };
+export { EventCenterForMicroApp, MicroApp, getActiveApps, getAllApps, preFetch, pureCreateElement, removeDomScope, unmountAllApps, unmountApp, version };
 //# sourceMappingURL=index.esm.js.map