@micro-zoe/micro-app 0.5.3 → 0.7.0

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '0.5.3';
+const version = '0.7.0';
 // 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;
@@ -297,16 +311,16 @@ var ObservedAttrName;
     ObservedAttrName["URL"] = "url";
 })(ObservedAttrName || (ObservedAttrName = {}));
 // app status
-var appStatus;
-(function (appStatus) {
-    appStatus["NOT_LOADED"] = "NOT_LOADED";
-    appStatus["LOADING_SOURCE_CODE"] = "LOADING_SOURCE_CODE";
-    appStatus["LOAD_SOURCE_FINISHED"] = "LOAD_SOURCE_FINISHED";
-    appStatus["LOAD_SOURCE_ERROR"] = "LOAD_SOURCE_ERROR";
-    appStatus["MOUNTING"] = "MOUNTING";
-    appStatus["MOUNTED"] = "MOUNTED";
-    appStatus["UNMOUNT"] = "UNMOUNT";
-})(appStatus || (appStatus = {}));
+var appStates;
+(function (appStates) {
+    appStates["NOT_LOADED"] = "NOT_LOADED";
+    appStates["LOADING_SOURCE_CODE"] = "LOADING_SOURCE_CODE";
+    appStates["LOAD_SOURCE_FINISHED"] = "LOAD_SOURCE_FINISHED";
+    appStates["LOAD_SOURCE_ERROR"] = "LOAD_SOURCE_ERROR";
+    appStates["MOUNTING"] = "MOUNTING";
+    appStates["MOUNTED"] = "MOUNTED";
+    appStates["UNMOUNT"] = "UNMOUNT";
+})(appStates || (appStates = {}));
 // lifecycles
 var lifeCycles;
 (function (lifeCycles) {
@@ -315,7 +329,18 @@ var lifeCycles;
     lifeCycles["MOUNTED"] = "mounted";
     lifeCycles["UNMOUNT"] = "unmount";
     lifeCycles["ERROR"] = "error";
+    // 👇 keep-alive only
+    lifeCycles["BEFORESHOW"] = "beforeshow";
+    lifeCycles["AFTERSHOW"] = "aftershow";
+    lifeCycles["AFTERHIDDEN"] = "afterhidden";
 })(lifeCycles || (lifeCycles = {}));
+// keep-alive status
+var keepAliveStates;
+(function (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,WeakRef,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
@@ -333,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) {
         /**
@@ -340,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;
@@ -355,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();
@@ -382,6 +419,7 @@ function initGlobalEnv() {
             rawRemoveChild,
             rawAppend,
             rawPrepend,
+            rawCloneNode,
             rawCreateElement,
             rawCreateElementNS,
             rawCreateDocumentFragment,
@@ -391,6 +429,7 @@ function initGlobalEnv() {
             rawGetElementsByClassName,
             rawGetElementsByTagName,
             rawGetElementsByName,
+            ImageProxy,
             // common global vars
             rawWindow,
             rawDocument,
@@ -409,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:
@@ -496,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:
@@ -897,17 +930,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 {
@@ -1042,7 +1079,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;
 }
@@ -1180,498 +1217,199 @@ 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;
+    }
 }
+
+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 (type === 'unmount') {
-        return `unmount-${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);
+// 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;
         }
-        else {
-            eventListenerMap.set(type, new Set([listener]));
+        eventCenter.on('global', cb, autoTrigger);
+    }
+    /**
+     * remove listener of global data
+     * @param cb listener
+     */
+    removeGlobalDataListener(cb) {
+        isFunction(cb) && eventCenter.off('global', cb);
+    }
+    /**
+     * dispatch global data
+     * @param data data
+     */
+    setGlobalData(data) {
+        // clear dom scope before dispatch global data, apply to micro app
+        removeDomScope();
+        eventCenter.dispatch('global', data);
+    }
+    /**
+     * get global data
+     */
+    getGlobalData() {
+        return eventCenter.getData('global');
+    }
+    /**
+     * clear all listener of global data
+     * if appName exists, only the specified functions is cleared
+     * if appName not exists, only clear the base app functions
+     */
+    clearGlobalDataListener() {
+        const appName = this.appName;
+        const eventInfo = eventCenter.eventList.get('global');
+        if (eventInfo) {
+            for (const cb of eventInfo.callbacks) {
+                if ((appName && appName === cb.__APP_NAME__) ||
+                    !(appName || cb.__APP_NAME__)) {
+                    eventInfo.callbacks.delete(cb);
+                }
+            }
         }
-        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;
     }
+}
+// Event center for base app
+class EventCenterForBaseApp extends EventCenterForGlobal {
     /**
      * add listener
-     * @param name event name
-     * @param f listener
+     * @param appName app.name
+     * @param cb 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;
+    addDataListener(appName, cb, autoTrigger) {
+        eventCenter.on(formatEventName(formatAppName(appName), false), cb, autoTrigger);
     }
-}
-
-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
+     * remove listener
+     * @param appName app.name
      * @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);
+    removeDataListener(appName, cb) {
+        isFunction(cb) && eventCenter.off(formatEventName(formatAppName(appName), false), cb);
     }
     /**
-     * remove listener of global data
-     * @param cb listener
+     * get data from micro app or base app
+     * @param appName app.name
+     * @param fromBaseApp whether get data from base app, default is false
      */
-    removeGlobalDataListener(cb) {
-        isFunction(cb) && eventCenter.off('global', cb);
+    getData(appName, fromBaseApp = false) {
+        return eventCenter.getData(formatEventName(formatAppName(appName), fromBaseApp));
     }
     /**
-     * dispatch global data
+     * Dispatch data to the specified micro app
+     * @param appName app.name
      * @param data data
      */
-    setGlobalData(data) {
-        // clear dom scope before dispatch global data, apply to micro app
-        removeDomScope();
-        eventCenter.dispatch('global', data);
+    setData(appName, data) {
+        eventCenter.dispatch(formatEventName(formatAppName(appName), true), data);
     }
     /**
-     * get global data
+     * clear all listener for specified micro app
+     * @param appName app.name
      */
-    getGlobalData() {
-        return eventCenter.getData('global');
-    }
-    /**
-     * clear all listener of global data
-     * if appName exists, only the specified functions is cleared
-     * if appName not exists, only clear the base app functions
-     */
-    clearGlobalDataListener() {
-        const appName = this.appName;
-        const eventInfo = eventCenter.eventList.get('global');
-        if (eventInfo) {
-            for (const cb of eventInfo.callbacks) {
-                if ((appName && appName === cb.__APP_NAME__) ||
-                    !(appName || cb.__APP_NAME__)) {
-                    eventInfo.callbacks.delete(cb);
-                }
-            }
-        }
-    }
-}
-// Event center for base app
-class EventCenterForBaseApp extends EventCenterForGlobal {
-    /**
-     * add listener
-     * @param appName app.name
-     * @param cb listener
-     * @param autoTrigger If there is cached data when first bind listener, whether it needs to trigger, default is false
-     */
-    addDataListener(appName, cb, autoTrigger) {
-        eventCenter.on(formatEventName(formatAppName(appName), false), cb, autoTrigger);
-    }
-    /**
-     * remove listener
-     * @param appName app.name
-     * @param cb listener
-     */
-    removeDataListener(appName, cb) {
-        isFunction(cb) && eventCenter.off(formatEventName(formatAppName(appName), false), cb);
-    }
-    /**
-     * get data from micro app or base app
-     * @param appName app.name
-     * @param fromBaseApp whether get data from base app, default is false
-     */
-    getData(appName, fromBaseApp = false) {
-        return eventCenter.getData(formatEventName(formatAppName(appName), fromBaseApp));
-    }
-    /**
-     * Dispatch data to the specified micro app
-     * @param appName app.name
-     * @param data data
-     */
-    setData(appName, data) {
-        eventCenter.dispatch(formatEventName(formatAppName(appName), true), data);
-    }
-    /**
-     * clear all listener for specified micro app
-     * @param appName app.name
-     */
-    clearDataListener(appName) {
-        eventCenter.off(formatEventName(formatAppName(appName), false));
+    clearDataListener(appName) {
+        eventCenter.off(formatEventName(formatAppName(appName), false));
     }
 }
 // Event center for sub app
@@ -1760,178 +1498,365 @@ function rebuildDataCenterSnapshot(microAppEventCneter) {
     }
 }
 
-// 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,
-};
+/* 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;
 /**
- * macro task to solve the rendering problem of vue3
+ * Rewrite document.onclick and execute it only once
  */
-let macroTimer;
-function macroTask(fn) {
-    macroTimer && clearTimeout(macroTimer);
-    macroTimer = setTimeout(fn, 0);
+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);
 }
-class SandBox {
-    constructor(appName, url, macro) {
-        // Scoped global Properties(Properties that can only get and set in microWindow, will not escape to rawWindow)
-        this.scopeProperties = ['webpackJsonp'];
-        // Properties that can be escape to rawWindow
-        this.escapeProperties = [];
-        // Properties newly added to microWindow
-        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);
-        // get scopeProperties and escapeProperties from plugins
-        this.getScopeProperties(appName);
-        // inject global properties
-        this.inject(this.microWindow, 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);
+/**
+ * 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);
                 }
-                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);
-                    }
+                else {
+                    appListenersMap.set(type, new Set([listener]));
                 }
-                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);
+            }
+            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);
                 }
-                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;
+            }
+        }
+        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));
                 }
-                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);
+            });
+        }
+    };
+    // 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);
                 }
-                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);
+            });
+            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);
                 }
-                return true;
-            },
-        });
+            });
+            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',
+];
+// Variables that can only assigned to rawWindow
+const escapeSetterKeyList = [
+    'location',
+];
+const globalPropertyList = ['window', 'self', 'globalThis'];
+class SandBox {
+    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 microAppWindow
+        this.injectedKeys = new Set();
+        // Properties escape to rawWindow, cleared when unmount
+        this.escapeKeys = new Set();
+        // sandbox state
+        this.active = false;
+        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.initMicroAppWindow(this.microAppWindow, appName, url);
+        // Rewrite global event listener & timeout
+        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) {
@@ -1943,10 +1868,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) => {
@@ -1960,12 +1885,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
@@ -1974,7 +1899,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
@@ -2009,25 +1934,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) || {};
+        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() {
@@ -2066,7 +2149,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])) {
@@ -2076,19 +2159,25 @@ function dispatchLifecyclesEvent(element, appName, lifecycleName, error) {
     element.dispatchEvent(event);
 }
 /**
- * Dispatch unmount event to micro app
- * @param appName app.name
+ * Dispatch custom event to micro app
+ * @param eventName event name
+ * @param appName app name
+ * @param detail event detail
  */
-function dispatchUnmountToMicroApp(appName) {
-    const event = new CustomEvent(`unmount-${appName}`);
+function dispatchCustomEventToMicroApp(eventName, appName, detail = {}) {
+    const event = new CustomEvent(`${eventName}-${appName}`, {
+        detail,
+    });
     window.dispatchEvent(event);
 }
 
 // micro app instances
 const appInstanceMap = new Map();
 class CreateApp {
-    constructor({ name, url, ssrUrl, container, inline, scopecss, useSandbox, macro, baseroute, }) {
-        this.status = appStatus.NOT_LOADED;
+    constructor({ name, url, ssrUrl, container, inline, scopecss, useSandbox, baseroute, }) {
+        this.state = appStates.NOT_LOADED;
+        this.keepAliveState = null;
+        this.keepAliveContainer = null;
         this.loadSourceLevel = 0;
         this.umdHookMount = null;
         this.umdHookUnmount = null;
@@ -2096,7 +2185,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;
@@ -2108,17 +2196,16 @@ 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() {
-        this.status = appStatus.LOADING_SOURCE_CODE;
+        this.state = appStates.LOADING_SOURCE_CODE;
         extractHtml(this);
     }
     /**
@@ -2127,9 +2214,9 @@ class CreateApp {
     onLoad(html) {
         if (++this.loadSourceLevel === 2) {
             this.source.html = html;
-            if (this.isPrefetch || appStatus.UNMOUNT === this.status)
+            if (this.isPrefetch || appStates.UNMOUNT === this.state)
                 return;
-            this.status = appStatus.LOAD_SOURCE_FINISHED;
+            this.state = appStates.LOAD_SOURCE_FINISHED;
             this.mount();
         }
     }
@@ -2139,9 +2226,9 @@ class CreateApp {
      */
     onLoadError(e) {
         this.loadSourceLevel = -1;
-        if (appStatus.UNMOUNT !== this.status) {
+        if (appStates.UNMOUNT !== this.state) {
             this.onerror(e);
-            this.status = appStatus.LOAD_SOURCE_ERROR;
+            this.state = appStates.LOAD_SOURCE_ERROR;
         }
     }
     /**
@@ -2158,11 +2245,11 @@ class CreateApp {
         this.container = (_a = this.container) !== null && _a !== void 0 ? _a : container;
         this.baseroute = baseroute !== null && baseroute !== void 0 ? baseroute : this.baseroute;
         if (this.loadSourceLevel !== 2) {
-            this.status = appStatus.LOADING_SOURCE_CODE;
+            this.state = appStates.LOADING_SOURCE_CODE;
             return;
         }
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
-        this.status = appStatus.MOUNTING;
+        this.state = appStates.MOUNTING;
         cloneContainer(this.source.html, this.container, !this.umdMode);
         (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.start(this.baseroute);
         let umdHookMountResult; // result of mount function
@@ -2222,20 +2309,23 @@ class CreateApp {
      * dispatch mounted event when app run finished
      */
     dispatchMountedEvent() {
-        if (appStatus.UNMOUNT !== this.status) {
-            this.status = appStatus.MOUNTED;
+        if (appStates.UNMOUNT !== this.state) {
+            this.state = appStates.MOUNTED;
             dispatchLifecyclesEvent(this.container, this.name, lifeCycles.MOUNTED);
         }
     }
     /**
      * unmount app
      * @param destroy completely destroy, delete cache resources
+     * @param unmountcb callback of unmount
      */
-    unmount(destroy) {
-        if (this.status === appStatus.LOAD_SOURCE_ERROR) {
+    unmount(destroy, unmountcb) {
+        if (this.state === appStates.LOAD_SOURCE_ERROR) {
             destroy = true;
         }
-        this.status = appStatus.UNMOUNT;
+        this.state = appStates.UNMOUNT;
+        this.keepAliveState = null;
+        this.keepAliveContainer = null;
         // result of unmount function
         let umdHookUnmountResult;
         /**
@@ -2251,50 +2341,84 @@ class CreateApp {
             }
         }
         // dispatch unmount event to micro app
-        dispatchUnmountToMicroApp(this.name);
-        this.handleUnmounted(destroy, umdHookUnmountResult);
+        dispatchCustomEventToMicroApp('unmount', this.name);
+        this.handleUnmounted(destroy, umdHookUnmountResult, unmountcb);
     }
     /**
      * handle for promise umdHookUnmount
+     * @param destroy completely destroy, delete cache resources
      * @param umdHookUnmountResult result of umdHookUnmount
+     * @param unmountcb callback of unmount
      */
-    handleUnmounted(destroy, umdHookUnmountResult) {
+    handleUnmounted(destroy, umdHookUnmountResult, unmountcb) {
         if (isPromise(umdHookUnmountResult)) {
             umdHookUnmountResult
-                .then(() => this.actionsForUnmount(destroy))
-                .catch(() => this.actionsForUnmount(destroy));
+                .then(() => this.actionsForUnmount(destroy, unmountcb))
+                .catch(() => this.actionsForUnmount(destroy, unmountcb));
         }
         else {
-            this.actionsForUnmount(destroy);
+            this.actionsForUnmount(destroy, unmountcb);
         }
     }
     /**
      * actions for unmount app
      * @param destroy completely destroy, delete cache resources
+     * @param unmountcb callback of unmount
      */
-    actionsForUnmount(destroy) {
+    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) {
-            /**
-            * In umd mode, ui frameworks will no longer create style elements to head in lazy load page when render again, so we should save container to keep these elements
-            */
             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];
         }
         appInstanceMap.delete(this.name);
     }
+    // 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
+        dispatchCustomEventToMicroApp('appstate-change', this.name, {
+            appState: 'afterhidden',
+        });
+        // dispatch afterhidden event to base app
+        dispatchLifecyclesEvent(oldContainer, this.name, lifeCycles.AFTERHIDDEN);
+    }
+    // show app when connectedCallback called with keep-alive
+    showKeepAliveApp(container) {
+        // dispatch beforeshow event to micro-app
+        dispatchCustomEventToMicroApp('appstate-change', this.name, {
+            appState: 'beforeshow',
+        });
+        // dispatch beforeshow event to base app
+        dispatchLifecyclesEvent(container, this.name, lifeCycles.BEFORESHOW);
+        cloneContainer(this.container, container, false);
+        this.container = container;
+        this.keepAliveState = keepAliveStates.KEEP_ALIVE_SHOW;
+        // dispatch aftershow event to micro-app
+        dispatchCustomEventToMicroApp('appstate-change', this.name, {
+            appState: 'aftershow',
+        });
+        // dispatch aftershow event to base app
+        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.AFTERSHOW);
+    }
     /**
      * app rendering error
      * @param e Error
@@ -2302,15 +2426,19 @@ class CreateApp {
     onerror(e) {
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.ERROR, e);
     }
-    // get app status
-    getAppStatus() {
-        return this.status;
+    // get app state
+    getAppState() {
+        return this.state;
+    }
+    // get keep-alive state
+    getKeepAliveState() {
+        return this.keepAliveState;
     }
     // get umd library, if it not exist, return empty object
     getUmdLibraryHooks() {
         var _a, _b;
         // after execScripts, the app maybe unmounted
-        if (appStatus.UNMOUNT !== this.status) {
+        if (appStates.UNMOUNT !== this.state) {
             const global = ((_b = (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow) !== null && _b !== void 0 ? _b : globalEnv.rawWindow);
             this.libraryName = getRootContainer(this.container).getAttribute('library') || `micro-app-${this.name}`;
             // do not use isObject
@@ -2319,20 +2447,6 @@ class CreateApp {
         return {};
     }
 }
-// if app not prefetch & not unmount, then app is active
-function getActiveApps() {
-    const activeApps = [];
-    appInstanceMap.forEach((app, appName) => {
-        if (appStatus.UNMOUNT !== app.getAppStatus() && !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();
@@ -2527,13 +2641,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) {
@@ -2552,7 +2666,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) {
@@ -2562,6 +2676,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
@@ -2680,12 +2800,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;
@@ -2700,7 +2821,7 @@ function rejectMicroAppStyle() {
 }
 
 function unmountNestedApp() {
-    replaseUnmountOfNestedApp();
+    releaseUnmountOfNestedApp();
     appInstanceMap.forEach(app => {
         // @ts-ignore
         app.container && getRootContainer(app.container).disconnectedCallback();
@@ -2718,7 +2839,7 @@ function listenUmountOfNestedApp() {
     }
 }
 // release listener
-function replaseUnmountOfNestedApp() {
+function releaseUnmountOfNestedApp() {
     if (window.__MICRO_APP_ENVIRONMENT__) {
         window.removeEventListener('unmount', unmountNestedApp, false);
     }
@@ -2745,7 +2866,6 @@ function defineElement(tagName) {
              * handle for change of name an url after element inited
              */
             this.handleAttributeUpdate = () => {
-                var _a;
                 this.isWating = false;
                 const formatAttrName = formatAppName(this.getAttribute('name'));
                 const formatAttrUrl = formatAppURL(this.getAttribute('url'), this.appName);
@@ -2753,44 +2873,27 @@ function defineElement(tagName) {
                     const existApp = appInstanceMap.get(formatAttrName);
                     if (formatAttrName !== this.appName && existApp) {
                         // handling of cached and non-prefetch apps
-                        if (appStatus.UNMOUNT !== existApp.getAppStatus() && !existApp.isPrefetch) {
+                        if (appStates.UNMOUNT !== existApp.getAppState() &&
+                            keepAliveStates.KEEP_ALIVE_HIDDEN !== existApp.getKeepAliveState() &&
+                            !existApp.isPrefetch) {
                             this.setAttribute('name', this.appName);
-                            return logError(`an app named ${formatAttrName} already exists`, this.appName);
+                            return logError(`app name conflict, an app named ${formatAttrName} is running`, this.appName);
                         }
                     }
                     if (formatAttrName !== this.appName || formatAttrUrl !== this.appUrl) {
-                        this.handleUnmount(formatAttrName === this.appName);
-                        /**
-                         * change ssrUrl in ssr mode
-                         * do not add judgment of formatAttrUrl === this.appUrl
-                         */
-                        if (this.getDisposeResult('ssr')) {
-                            this.ssrUrl = CompletionPath(globalEnv.rawWindow.location.pathname, formatAttrUrl);
-                        }
-                        else if (this.ssrUrl) {
-                            this.ssrUrl = '';
-                        }
-                        this.appName = formatAttrName;
-                        this.appUrl = formatAttrUrl;
-                        ((_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this).innerHTML = '';
-                        if (formatAttrName !== this.getAttribute('name')) {
-                            this.setAttribute('name', this.appName);
+                        if (formatAttrName === this.appName) {
+                            this.handleUnmount(true, () => {
+                                this.actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp);
+                            });
                         }
-                        /**
-                         * when existApp not null:
-                         * scene1: if formatAttrName and this.appName are equal: exitApp is the current app, the url must be different, existApp has been unmounted
-                         * scene2: if formatAttrName and this.appName are different: existApp must be prefetch or unmounted, if url is equal, then just mount, if url is different, then create new app to replace existApp
-                         * scene3: url is different but ssrUrl is equal
-                         * scene4: url is equal but ssrUrl is different, if url is equal, name must different
-                         */
-                        if (existApp &&
-                            existApp.url === this.appUrl &&
-                            existApp.ssrUrl === this.ssrUrl) {
-                            // mount app
-                            this.handleAppMount(existApp);
+                        else if (this.getKeepAliveModeResult()) {
+                            this.handleHiddenKeepAliveApp();
+                            this.actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp);
                         }
                         else {
-                            this.handleCreateApp();
+                            this.handleUnmount(this.getDestroyCompatibleResult(), () => {
+                                this.actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp);
+                            });
                         }
                     }
                 }
@@ -2814,8 +2917,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
         connectedCallback() {
             this.hasConnected = true;
             if (!elementInstanceMap.has(this)) {
@@ -2826,10 +2929,17 @@ function defineElement(tagName) {
         }
         disconnectedCallback() {
             this.hasConnected = false;
-            elementInstanceMap.delete(this);
-            this.handleUnmount(this.getDisposeResult('destroy') || this.getDisposeResult('destory'));
-            if (elementInstanceMap.size === 0) {
-                releasePatches();
+            // keep-alive
+            if (this.getKeepAliveModeResult()) {
+                this.handleHiddenKeepAliveApp();
+            }
+            else {
+                elementInstanceMap.delete(this);
+                this.handleUnmount(this.getDestroyCompatibleResult(), () => {
+                    if (elementInstanceMap.size === 0) {
+                        releasePatches();
+                    }
+                });
             }
         }
         attributeChangedCallback(attr, _oldVal, newVal) {
@@ -2873,7 +2983,7 @@ function defineElement(tagName) {
             if (elementInstanceMap.set(this, true).size === 1) {
                 patchElementPrototypeMethods();
                 rejectMicroAppStyle();
-                replaseUnmountOfNestedApp();
+                releaseUnmountOfNestedApp();
                 listenUmountOfNestedApp();
             }
         }
@@ -2892,15 +3002,21 @@ function defineElement(tagName) {
             else if (this.ssrUrl) {
                 this.ssrUrl = '';
             }
-            const app = appInstanceMap.get(this.appName);
-            if (app) {
+            if (appInstanceMap.has(this.appName)) {
+                const app = appInstanceMap.get(this.appName);
                 const existAppUrl = app.ssrUrl || app.url;
                 const activeAppUrl = this.ssrUrl || this.appUrl;
-                if (existAppUrl === activeAppUrl && (app.isPrefetch ||
-                    app.getAppStatus() === appStatus.UNMOUNT)) {
+                // keep-alive don't care about ssrUrl
+                // Even if the keep-alive app is pushed into the background, it is still active and cannot be replaced. Otherwise, it is difficult for developers to troubleshoot in case of conflict and  will leave developers at a loss
+                if (app.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN &&
+                    app.url === this.appUrl) {
+                    this.handleShowKeepAliveApp(app);
+                }
+                else if (existAppUrl === activeAppUrl && (app.isPrefetch ||
+                    app.getAppState() === appStates.UNMOUNT)) {
                     this.handleAppMount(app);
                 }
-                else if (app.isPrefetch || app.getAppStatus() === appStatus.UNMOUNT) {
+                else if (app.isPrefetch || app.getAppState() === appStates.UNMOUNT) {
                     /**
                      * url is different & old app is unmounted or prefetch, create new app to replace old one
                      */
@@ -2908,7 +3024,56 @@ function defineElement(tagName) {
                     this.handleCreateApp();
                 }
                 else {
-                    logError(`an app named ${this.appName} already exists`, this.appName);
+                    logError(`app name conflict, an app named ${this.appName} is running`, this.appName);
+                }
+            }
+            else {
+                this.handleCreateApp();
+            }
+        }
+        // remount app or create app if attribute url or name change
+        actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp) {
+            var _a;
+            /**
+             * change ssrUrl in ssr mode
+             * do not add judgment of formatAttrUrl === this.appUrl
+             */
+            if (this.getDisposeResult('ssr')) {
+                this.ssrUrl = CompletionPath(globalEnv.rawWindow.location.pathname, formatAttrUrl);
+            }
+            else if (this.ssrUrl) {
+                this.ssrUrl = '';
+            }
+            this.appName = formatAttrName;
+            this.appUrl = formatAttrUrl;
+            ((_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this).innerHTML = '';
+            if (formatAttrName !== this.getAttribute('name')) {
+                this.setAttribute('name', this.appName);
+            }
+            /**
+             * when existApp not null: this.appName === existApp.name
+             * scene1: if formatAttrName and this.appName are equal: exitApp is the current app, the url must be different, existApp has been unmounted
+             * scene2: if formatAttrName and this.appName are different: existApp must be prefetch or unmounted, if url is equal, then just mount, if url is different, then create new app to replace existApp
+             * scene3: url is different but ssrUrl is equal
+             * scene4: url is equal but ssrUrl is different, if url is equal, name must different
+             * scene5: if existApp is KEEP_ALIVE_HIDDEN, name must different
+             */
+            if (existApp) {
+                if (existApp.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN) {
+                    if (existApp.url === this.appUrl) {
+                        this.handleShowKeepAliveApp(existApp);
+                    }
+                    else {
+                        // the hidden keep-alive app is still active
+                        logError(`app name conflict, an app named ${this.appName} is running`, this.appName);
+                    }
+                }
+                else if (existApp.url === this.appUrl && existApp.ssrUrl === this.ssrUrl) {
+                    // mount app
+                    this.handleAppMount(existApp);
+                }
+                else {
+                    this.handleCreateApp();
                 }
             }
             else {
@@ -2949,7 +3114,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,
@@ -2959,7 +3124,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);
@@ -2968,10 +3132,24 @@ function defineElement(tagName) {
          * unmount app
          * @param destroy delete cache resources when unmount
          */
-        handleUnmount(destroy) {
+        handleUnmount(destroy, unmountcb) {
+            const app = appInstanceMap.get(this.appName);
+            if (app &&
+                app.getAppState() !== appStates.UNMOUNT)
+                app.unmount(destroy, unmountcb);
+        }
+        // hidden app when disconnectedCallback called with keep-alive
+        handleHiddenKeepAliveApp() {
             const app = appInstanceMap.get(this.appName);
-            if (app && appStatus.UNMOUNT !== app.getAppStatus())
-                app.unmount(destroy);
+            if (app &&
+                app.getAppState() !== appStates.UNMOUNT &&
+                app.getKeepAliveState() !== keepAliveStates.KEEP_ALIVE_HIDDEN)
+                app.hiddenKeepAliveApp();
+        }
+        // show app when connectedCallback called with keep-alive
+        handleShowKeepAliveApp(app) {
+            // must be asnyc
+            defer(() => { var _a; return app.showKeepAliveApp((_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this); });
         }
         /**
          * Get configuration
@@ -2980,7 +3158,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
@@ -2991,6 +3189,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
          */
@@ -3040,13 +3248,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) {
@@ -3056,13 +3263,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);
@@ -3112,6 +3318,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);
@@ -3146,7 +3445,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);
@@ -3175,5 +3473,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