@micro-zoe/micro-app 0.5.1 → 0.6.1

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '0.5.1';
+const version = '0.6.1';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -297,16 +297,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 +315,17 @@ 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 = {}));
 
 /**
  * fetch source of html, js, css
@@ -340,12 +350,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;
@@ -382,6 +393,7 @@ function initGlobalEnv() {
             rawRemoveChild,
             rawAppend,
             rawPrepend,
+            rawCloneNode,
             rawCreateElement,
             rawCreateElementNS,
             rawCreateDocumentFragment,
@@ -1180,305 +1192,6 @@ 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);
-    }
-    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;
-        }
-        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);
-        });
-    }
-    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);
-            }
-            else {
-                documentClickListMap.set('base', f);
-            }
-            if (!hasDocumentClickInited && isFunction(f)) {
-                hasDocumentClickInited = true;
-                globalEnv.rawDocumentAddEventListener.call(globalEnv.rawDocument, 'click', onClickHandler, false);
-            }
-        }
-    });
-    rawOnClick && (document.onclick = rawOnClick);
-}
-/**
- * The document event is globally, we need to clear these event bindings when micro application unmounted
- */
-const documentEventListenerMap = new Map();
-function effectDocumentEvent() {
-    const { rawDocument, rawDocumentAddEventListener, rawDocumentRemoveEventListener, } = globalEnv;
-    !hasRewriteDocumentOnClick && overwriteDocumentOnClick();
-    document.addEventListener = function (type, listener, options) {
-        var _a;
-        const appName = getCurrentAppName();
-        /**
-         * ignore bound function of document event in umd mode, used to solve problem of react global events
-         */
-        if (appName && !(((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.umdMode) && isBoundFunction(listener))) {
-            const appListenersMap = documentEventListenerMap.get(appName);
-            if (appListenersMap) {
-                const appListenerList = appListenersMap.get(type);
-                if (appListenerList) {
-                    appListenerList.add(listener);
-                }
-                else {
-                    appListenersMap.set(type, new Set([listener]));
-                }
-            }
-            else {
-                documentEventListenerMap.set(appName, new Map([[type, new Set([listener])]]));
-            }
-            listener && (listener.__MICRO_MARK_OPTIONS__ = options);
-        }
-        rawDocumentAddEventListener.call(rawDocument, type, listener, options);
-    };
-    document.removeEventListener = function (type, listener, options) {
-        var _a;
-        const appName = getCurrentAppName();
-        if (appName && !(((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.umdMode) && isBoundFunction(listener))) {
-            const appListenersMap = documentEventListenerMap.get(appName);
-            if (appListenersMap) {
-                const appListenerList = appListenersMap.get(type);
-                if ((appListenerList === null || appListenerList === void 0 ? void 0 : appListenerList.size) && appListenerList.has(listener)) {
-                    appListenerList.delete(listener);
-                }
-            }
-        }
-        rawDocumentRemoveEventListener.call(rawDocument, type, listener, options);
-    };
-}
-// Clear the document event agent
-function releaseEffectDocumentEvent() {
-    document.addEventListener = globalEnv.rawDocumentAddEventListener;
-    document.removeEventListener = globalEnv.rawDocumentRemoveEventListener;
-}
-/**
- * Format event name
- * @param type event name
- * @param microWindow micro window
- */
-function formatEventType(type, microWindow) {
-    if (type === 'unmount') {
-        return `unmount-${microWindow.__MICRO_APP_NAME__}`;
-    }
-    return type;
-}
-/**
- * Rewrite side-effect events
- * @param microWindow micro window
- */
-function effect(microWindow) {
-    const appName = microWindow.__MICRO_APP_NAME__;
-    const eventListenerMap = new Map();
-    const intervalIdMap = new Map();
-    const timeoutIdMap = new Map();
-    const { rawWindow, rawDocument, rawWindowAddEventListener, rawWindowRemoveEventListener, rawSetInterval, rawSetTimeout, rawClearInterval, rawClearTimeout, rawDocumentRemoveEventListener, } = globalEnv;
-    // listener may be null, e.g test-passive
-    microWindow.addEventListener = function (type, listener, options) {
-        type = formatEventType(type, microWindow);
-        const listenerList = eventListenerMap.get(type);
-        if (listenerList) {
-            listenerList.add(listener);
-        }
-        else {
-            eventListenerMap.set(type, new Set([listener]));
-        }
-        listener && (listener.__MICRO_MARK_OPTIONS__ = options);
-        rawWindowAddEventListener.call(rawWindow, type, listener, options);
-    };
-    microWindow.removeEventListener = function (type, listener, options) {
-        type = formatEventType(type, microWindow);
-        const listenerList = eventListenerMap.get(type);
-        if ((listenerList === null || listenerList === void 0 ? void 0 : listenerList.size) && listenerList.has(listener)) {
-            listenerList.delete(listener);
-        }
-        rawWindowRemoveEventListener.call(rawWindow, type, listener, options);
-    };
-    microWindow.setInterval = function (handler, timeout, ...args) {
-        const intervalId = rawSetInterval.call(rawWindow, handler, timeout, ...args);
-        intervalIdMap.set(intervalId, { handler, timeout, args });
-        return intervalId;
-    };
-    microWindow.setTimeout = function (handler, timeout, ...args) {
-        const timeoutId = rawSetTimeout.call(rawWindow, handler, timeout, ...args);
-        timeoutIdMap.set(timeoutId, { handler, timeout, args });
-        return timeoutId;
-    };
-    microWindow.clearInterval = function (intervalId) {
-        intervalIdMap.delete(intervalId);
-        rawClearInterval.call(rawWindow, intervalId);
-    };
-    microWindow.clearTimeout = function (timeoutId) {
-        timeoutIdMap.delete(timeoutId);
-        rawClearTimeout.call(rawWindow, timeoutId);
-    };
-    const umdWindowListenerMap = new Map();
-    const umdDocumentListenerMap = new Map();
-    let umdIntervalIdMap = new Map();
-    let umdTimeoutIdMap = new Map();
-    let umdOnClickHandler;
-    // record event and timer before exec umdMountHook
-    const recordUmdEffect = () => {
-        // record window event
-        eventListenerMap.forEach((listenerList, type) => {
-            if (listenerList.size) {
-                umdWindowListenerMap.set(type, new Set(listenerList));
-            }
-        });
-        // record timers
-        if (intervalIdMap.size) {
-            umdIntervalIdMap = new Map(intervalIdMap);
-        }
-        if (timeoutIdMap.size) {
-            umdTimeoutIdMap = new Map(timeoutIdMap);
-        }
-        // record onclick handler
-        umdOnClickHandler = documentClickListMap.get(appName);
-        // record document event
-        const documentAppListenersMap = documentEventListenerMap.get(appName);
-        if (documentAppListenersMap) {
-            documentAppListenersMap.forEach((listenerList, type) => {
-                if (listenerList.size) {
-                    umdDocumentListenerMap.set(type, new Set(listenerList));
-                }
-            });
-        }
-    };
-    // rebuild event and timer before remount umd app
-    const rebuildUmdEffect = () => {
-        // rebuild window event
-        umdWindowListenerMap.forEach((listenerList, type) => {
-            for (const listener of listenerList) {
-                microWindow.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_MARK_OPTIONS__);
-            }
-        });
-        // rebuild timer
-        umdIntervalIdMap.forEach((info) => {
-            microWindow.setInterval(info.handler, info.timeout, ...info.args);
-        });
-        umdTimeoutIdMap.forEach((info) => {
-            microWindow.setTimeout(info.handler, info.timeout, ...info.args);
-        });
-        // rebuild onclick event
-        umdOnClickHandler && documentClickListMap.set(appName, umdOnClickHandler);
-        // rebuild document event
-        setCurrentAppName(appName);
-        umdDocumentListenerMap.forEach((listenerList, type) => {
-            for (const listener of listenerList) {
-                document.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_MARK_OPTIONS__);
-            }
-        });
-        setCurrentAppName(null);
-    };
-    // release all event listener & interval & timeout when unmount app
-    const releaseEffect = () => {
-        // Clear window binding events
-        if (eventListenerMap.size) {
-            eventListenerMap.forEach((listenerList, type) => {
-                for (const listener of listenerList) {
-                    rawWindowRemoveEventListener.call(rawWindow, type, listener);
-                }
-            });
-            eventListenerMap.clear();
-        }
-        // Clear timers
-        if (intervalIdMap.size) {
-            intervalIdMap.forEach((_, intervalId) => {
-                rawClearInterval.call(rawWindow, intervalId);
-            });
-            intervalIdMap.clear();
-        }
-        if (timeoutIdMap.size) {
-            timeoutIdMap.forEach((_, timeoutId) => {
-                rawClearTimeout.call(rawWindow, timeoutId);
-            });
-            timeoutIdMap.clear();
-        }
-        // Clear the function bound by micro application through document.onclick
-        documentClickListMap.delete(appName);
-        // Clear document binding event
-        const documentAppListenersMap = documentEventListenerMap.get(appName);
-        if (documentAppListenersMap) {
-            documentAppListenersMap.forEach((listenerList, type) => {
-                for (const listener of listenerList) {
-                    rawDocumentRemoveEventListener.call(rawDocument, type, listener);
-                }
-            });
-            documentAppListenersMap.clear();
-        }
-    };
-    return {
-        recordUmdEffect,
-        rebuildUmdEffect,
-        releaseEffect,
-    };
-}
-
 class EventCenter {
     constructor() {
         this.eventList = new Map();
@@ -1717,49 +1430,358 @@ class EventCenterForMicroApp extends EventCenterForGlobal {
                     data,
                 }
             });
-            getRootContainer(app.container).dispatchEvent(event);
+            getRootContainer(app.container).dispatchEvent(event);
+        }
+    }
+    /**
+     * clear all listeners
+     */
+    clearDataListener() {
+        eventCenter.off(formatEventName(this.appName, true));
+    }
+}
+/**
+ * Record UMD function before exec umdHookMount
+ * @param microAppEventCneter
+ */
+function recordDataCenterSnapshot(microAppEventCneter) {
+    const appName = microAppEventCneter.appName;
+    microAppEventCneter.umdDataListeners = { global: new Set(), normal: new Set() };
+    const globalEventInfo = eventCenter.eventList.get('global');
+    if (globalEventInfo) {
+        for (const cb of globalEventInfo.callbacks) {
+            if (appName === cb.__APP_NAME__) {
+                microAppEventCneter.umdDataListeners.global.add(cb);
+            }
+        }
+    }
+    const subAppEventInfo = eventCenter.eventList.get(formatEventName(appName, true));
+    if (subAppEventInfo) {
+        microAppEventCneter.umdDataListeners.normal = new Set(subAppEventInfo.callbacks);
+    }
+}
+/**
+ * Rebind the UMD function of the record before remount
+ * @param microAppEventCneter instance of EventCenterForMicroApp
+ */
+function rebuildDataCenterSnapshot(microAppEventCneter) {
+    for (const cb of microAppEventCneter.umdDataListeners.global) {
+        microAppEventCneter.addGlobalDataListener(cb, cb.__AUTO_TRIGGER__);
+    }
+    for (const cb of microAppEventCneter.umdDataListeners.normal) {
+        microAppEventCneter.addDataListener(cb, cb.__AUTO_TRIGGER__);
+    }
+}
+
+const 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);
+    }
+    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;
+        }
+        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);
+        });
+    }
+    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);
+            }
+            else {
+                documentClickListMap.set('base', f);
+            }
+            if (!hasDocumentClickInited && isFunction(f)) {
+                hasDocumentClickInited = true;
+                globalEnv.rawDocumentAddEventListener.call(globalEnv.rawDocument, 'click', onClickHandler, false);
+            }
+        }
+    });
+    rawOnClick && (document.onclick = rawOnClick);
+}
+/**
+ * The document event is globally, we need to clear these event bindings when micro application unmounted
+ */
+const documentEventListenerMap = new Map();
+function effectDocumentEvent() {
+    const { rawDocument, rawDocumentAddEventListener, rawDocumentRemoveEventListener, } = globalEnv;
+    !hasRewriteDocumentOnClick && overwriteDocumentOnClick();
+    document.addEventListener = function (type, listener, options) {
+        var _a;
+        const appName = getCurrentAppName();
+        /**
+         * ignore bound function of document event in umd mode, used to solve problem of react global events
+         */
+        if (appName && !(((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.umdMode) && isBoundFunction(listener))) {
+            const appListenersMap = documentEventListenerMap.get(appName);
+            if (appListenersMap) {
+                const appListenerList = appListenersMap.get(type);
+                if (appListenerList) {
+                    appListenerList.add(listener);
+                }
+                else {
+                    appListenersMap.set(type, new Set([listener]));
+                }
+            }
+            else {
+                documentEventListenerMap.set(appName, new Map([[type, new Set([listener])]]));
+            }
+            listener && (listener.__MICRO_MARK_OPTIONS__ = options);
+        }
+        rawDocumentAddEventListener.call(rawDocument, type, listener, options);
+    };
+    document.removeEventListener = function (type, listener, options) {
+        var _a;
+        const appName = getCurrentAppName();
+        if (appName && !(((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.umdMode) && isBoundFunction(listener))) {
+            const appListenersMap = documentEventListenerMap.get(appName);
+            if (appListenersMap) {
+                const appListenerList = appListenersMap.get(type);
+                if ((appListenerList === null || appListenerList === void 0 ? void 0 : appListenerList.size) && appListenerList.has(listener)) {
+                    appListenerList.delete(listener);
+                }
+            }
+        }
+        rawDocumentRemoveEventListener.call(rawDocument, type, listener, options);
+    };
+}
+// Clear the document event agent
+function releaseEffectDocumentEvent() {
+    document.addEventListener = globalEnv.rawDocumentAddEventListener;
+    document.removeEventListener = globalEnv.rawDocumentRemoveEventListener;
+}
+// this events should be sent to the specified app
+const formatEventList = ['unmount', 'appstate-change'];
+/**
+ * Format event name
+ * @param type event name
+ * @param microWindow micro window
+ */
+function formatEventType(type, microWindow) {
+    if (formatEventList.includes(type)) {
+        return `${type}-${microWindow.__MICRO_APP_NAME__}`;
+    }
+    return type;
+}
+/**
+ * Rewrite side-effect events
+ * @param microWindow micro window
+ */
+function effect(microWindow) {
+    const appName = microWindow.__MICRO_APP_NAME__;
+    const eventListenerMap = new Map();
+    const intervalIdMap = new Map();
+    const timeoutIdMap = new Map();
+    const { rawWindow, rawDocument, rawWindowAddEventListener, rawWindowRemoveEventListener, rawSetInterval, rawSetTimeout, rawClearInterval, rawClearTimeout, rawDocumentRemoveEventListener, } = globalEnv;
+    // listener may be null, e.g test-passive
+    microWindow.addEventListener = function (type, listener, options) {
+        type = formatEventType(type, microWindow);
+        const listenerList = eventListenerMap.get(type);
+        if (listenerList) {
+            listenerList.add(listener);
+        }
+        else {
+            eventListenerMap.set(type, new Set([listener]));
+        }
+        listener && (listener.__MICRO_MARK_OPTIONS__ = options);
+        rawWindowAddEventListener.call(rawWindow, type, listener, options);
+    };
+    microWindow.removeEventListener = function (type, listener, options) {
+        type = formatEventType(type, microWindow);
+        const listenerList = eventListenerMap.get(type);
+        if ((listenerList === null || listenerList === void 0 ? void 0 : listenerList.size) && listenerList.has(listener)) {
+            listenerList.delete(listener);
+        }
+        rawWindowRemoveEventListener.call(rawWindow, type, listener, options);
+    };
+    microWindow.setInterval = function (handler, timeout, ...args) {
+        const intervalId = rawSetInterval.call(rawWindow, handler, timeout, ...args);
+        intervalIdMap.set(intervalId, { handler, timeout, args });
+        return intervalId;
+    };
+    microWindow.setTimeout = function (handler, timeout, ...args) {
+        const timeoutId = rawSetTimeout.call(rawWindow, handler, timeout, ...args);
+        timeoutIdMap.set(timeoutId, { handler, timeout, args });
+        return timeoutId;
+    };
+    microWindow.clearInterval = function (intervalId) {
+        intervalIdMap.delete(intervalId);
+        rawClearInterval.call(rawWindow, intervalId);
+    };
+    microWindow.clearTimeout = function (timeoutId) {
+        timeoutIdMap.delete(timeoutId);
+        rawClearTimeout.call(rawWindow, timeoutId);
+    };
+    const umdWindowListenerMap = new Map();
+    const umdDocumentListenerMap = new Map();
+    let umdIntervalIdMap = new Map();
+    let umdTimeoutIdMap = new Map();
+    let umdOnClickHandler;
+    // record event and timer before exec umdMountHook
+    const recordUmdEffect = () => {
+        // record window event
+        eventListenerMap.forEach((listenerList, type) => {
+            if (listenerList.size) {
+                umdWindowListenerMap.set(type, new Set(listenerList));
+            }
+        });
+        // record timers
+        if (intervalIdMap.size) {
+            umdIntervalIdMap = new Map(intervalIdMap);
+        }
+        if (timeoutIdMap.size) {
+            umdTimeoutIdMap = new Map(timeoutIdMap);
+        }
+        // record onclick handler
+        umdOnClickHandler = documentClickListMap.get(appName);
+        // record document event
+        const documentAppListenersMap = documentEventListenerMap.get(appName);
+        if (documentAppListenersMap) {
+            documentAppListenersMap.forEach((listenerList, type) => {
+                if (listenerList.size) {
+                    umdDocumentListenerMap.set(type, new Set(listenerList));
+                }
+            });
         }
-    }
-    /**
-     * clear all listeners
-     */
-    clearDataListener() {
-        eventCenter.off(formatEventName(this.appName, true));
-    }
-}
-/**
- * Record UMD function before exec umdHookMount
- * @param microAppEventCneter
- */
-function recordDataCenterSnapshot(microAppEventCneter) {
-    const appName = microAppEventCneter.appName;
-    microAppEventCneter.umdDataListeners = { global: new Set(), normal: new Set() };
-    const globalEventInfo = eventCenter.eventList.get('global');
-    if (globalEventInfo) {
-        for (const cb of globalEventInfo.callbacks) {
-            if (appName === cb.__APP_NAME__) {
-                microAppEventCneter.umdDataListeners.global.add(cb);
+    };
+    // 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();
         }
-    }
-    const subAppEventInfo = eventCenter.eventList.get(formatEventName(appName, true));
-    if (subAppEventInfo) {
-        microAppEventCneter.umdDataListeners.normal = new Set(subAppEventInfo.callbacks);
-    }
-}
-/**
- * Rebind the UMD function of the record before remount
- * @param microAppEventCneter instance of EventCenterForMicroApp
- */
-function rebuildDataCenterSnapshot(microAppEventCneter) {
-    for (const cb of microAppEventCneter.umdDataListeners.global) {
-        microAppEventCneter.addGlobalDataListener(cb, cb.__AUTO_TRIGGER__);
-    }
-    for (const cb of microAppEventCneter.umdDataListeners.normal) {
-        microAppEventCneter.addDataListener(cb, cb.__AUTO_TRIGGER__);
-    }
+        // 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,
+    };
 }
 
+const ImageProxy = new Proxy(Image, {
+    construct(Target, args) {
+        const elementImage = new Target(...args);
+        elementImage.__MICRO_APP_NAME__ = getCurrentAppName();
+        return elementImage;
+    },
+});
+
 // Variables that can escape to rawWindow
 const staticEscapeProperties = [
     'System',
@@ -1828,7 +1850,7 @@ class SandBox {
                 }
                 if (key === 'hasOwnProperty')
                     return hasOwnProperty;
-                if (key === 'document' || key === 'eval') {
+                if (key === 'document' || key === 'eval' || key === 'Image') {
                     if (this.active) {
                         setCurrentAppName(appName);
                         (macro ? macroTask : defer)(() => setCurrentAppName(null));
@@ -1838,6 +1860,8 @@ class SandBox {
                             return rawDocument;
                         case 'eval':
                             return eval;
+                        case 'Image':
+                            return ImageProxy;
                     }
                 }
                 if (Reflect.has(target, key)) {
@@ -1888,12 +1912,15 @@ class SandBox {
                     return key in target;
                 return key in unscopables || key in target || key in rawWindow;
             },
+            // Object.getOwnPropertyDescriptor(window, key)
+            // TODO: use set
             getOwnPropertyDescriptor: (target, key) => {
                 if (target.hasOwnProperty(key)) {
                     descriptorTargetMap.set(key, 'target');
                     return Object.getOwnPropertyDescriptor(target, key);
                 }
                 if (rawWindow.hasOwnProperty(key)) {
+                    // like console, alert ...
                     descriptorTargetMap.set(key, 'rawWindow');
                     const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
                     if (descriptor && !descriptor.configurable) {
@@ -1903,6 +1930,7 @@ class SandBox {
                 }
                 return undefined;
             },
+            // Object.defineProperty(window, key, Descriptor)
             defineProperty: (target, key, value) => {
                 const from = descriptorTargetMap.get(key);
                 if (from === 'rawWindow') {
@@ -1910,11 +1938,13 @@ class SandBox {
                 }
                 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);
                 }
@@ -2021,7 +2051,7 @@ class SandBox {
 }
 SandBox.activeCount = 0; // number of active sandbox
 
-function eventHandler$1(event, element) {
+function formatEventInfo(event, element) {
     Object.defineProperties(event, {
         currentTarget: {
             get() {
@@ -2060,7 +2090,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])) {
@@ -2070,11 +2100,15 @@ 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);
 }
 
@@ -2082,7 +2116,9 @@ function dispatchUnmountToMicroApp(appName) {
 const appInstanceMap = new Map();
 class CreateApp {
     constructor({ name, url, ssrUrl, container, inline, scopecss, useSandbox, macro, baseroute, }) {
-        this.status = appStatus.NOT_LOADED;
+        this.state = appStates.NOT_LOADED;
+        this.keepAliveState = null;
+        this.keepAliveContainer = null;
         this.loadSourceLevel = 0;
         this.umdHookMount = null;
         this.umdHookUnmount = null;
@@ -2112,7 +2148,7 @@ class CreateApp {
     }
     // Load resources
     loadSourceCode() {
-        this.status = appStatus.LOADING_SOURCE_CODE;
+        this.state = appStates.LOADING_SOURCE_CODE;
         extractHtml(this);
     }
     /**
@@ -2121,9 +2157,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();
         }
     }
@@ -2133,9 +2169,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;
         }
     }
     /**
@@ -2152,11 +2188,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
@@ -2216,20 +2252,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;
         /**
@@ -2245,42 +2284,44 @@ 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();
         }
         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() {
@@ -2289,6 +2330,38 @@ class CreateApp {
         }
         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
@@ -2296,15 +2369,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
@@ -2317,7 +2394,7 @@ class CreateApp {
 function getActiveApps() {
     const activeApps = [];
     appInstanceMap.forEach((app, appName) => {
-        if (appStatus.UNMOUNT !== app.getAppStatus() && !app.isPrefetch) {
+        if (appStates.UNMOUNT !== app.getAppState() && !app.isPrefetch) {
             activeApps.push(appName);
         }
     });
@@ -2327,6 +2404,78 @@ function getActiveApps() {
 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.actionsForCompletelyDestory();
+                }
+                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());
+}
 
 // Record element and map element
 const dynamicElementInMicroAppMap = new WeakMap();
@@ -2521,13 +2670,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) {
@@ -2546,7 +2695,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) {
@@ -2556,6 +2705,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
@@ -2674,12 +2829,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;
@@ -2694,7 +2850,7 @@ function rejectMicroAppStyle() {
 }
 
 function unmountNestedApp() {
-    replaseUnmountOfNestedApp();
+    releaseUnmountOfNestedApp();
     appInstanceMap.forEach(app => {
         // @ts-ignore
         app.container && getRootContainer(app.container).disconnectedCallback();
@@ -2712,7 +2868,7 @@ function listenUmountOfNestedApp() {
     }
 }
 // release listener
-function replaseUnmountOfNestedApp() {
+function releaseUnmountOfNestedApp() {
     if (window.__MICRO_APP_ENVIRONMENT__) {
         window.removeEventListener('unmount', unmountNestedApp, false);
     }
@@ -2739,7 +2895,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);
@@ -2747,44 +2902,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);
+                            });
                         }
                     }
                 }
@@ -2810,6 +2948,7 @@ function defineElement(tagName) {
         // 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)) {
@@ -2820,10 +2959,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) {
@@ -2867,7 +3013,7 @@ function defineElement(tagName) {
             if (elementInstanceMap.set(this, true).size === 1) {
                 patchElementPrototypeMethods();
                 rejectMicroAppStyle();
-                replaseUnmountOfNestedApp();
+                releaseUnmountOfNestedApp();
                 listenUmountOfNestedApp();
             }
         }
@@ -2886,15 +3032,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
                      */
@@ -2902,7 +3054,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 {
@@ -2962,10 +3163,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
@@ -2974,7 +3189,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
@@ -2985,6 +3220,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
          */
@@ -3141,6 +3386,7 @@ class MicroApp extends EventCenterForBaseApp {
             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);
             // load app assets when browser is idle
@@ -3168,5 +3414,5 @@ class MicroApp extends EventCenterForBaseApp {
 var microApp = new MicroApp();
 
 export default microApp;
-export { EventCenterForMicroApp, getActiveApps, getAllApps, preFetch, pureCreateElement, removeDomScope, version };
+export { EventCenterForMicroApp, getActiveApps, getAllApps, preFetch, pureCreateElement, removeDomScope, unmountAllApps, unmountApp, version };
 //# sourceMappingURL=index.esm.js.map