@micro-zoe/micro-app 0.6.0 → 0.6.1

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '0.6.0';
+const version = '0.6.1';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -350,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;
@@ -392,6 +393,7 @@ function initGlobalEnv() {
             rawRemoveChild,
             rawAppend,
             rawPrepend,
+            rawCloneNode,
             rawCreateElement,
             rawCreateElementNS,
             rawCreateDocumentFragment,
@@ -1190,307 +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;
-}
-// 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));
-                }
-            });
-        }
-    };
-    // 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();
@@ -1728,50 +1429,359 @@ class EventCenterForMicroApp extends EventCenterForGlobal {
                 detail: {
                     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);
+                }
+            }
         }
-    }
-    /**
-     * clear all listeners
-     */
-    clearDataListener() {
-        eventCenter.off(formatEventName(this.appName, true));
-    }
+        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'];
 /**
- * Record UMD function before exec umdHookMount
- * @param microAppEventCneter
+ * Format event name
+ * @param type event name
+ * @param microWindow micro window
  */
-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);
+function formatEventType(type, microWindow) {
+    if (formatEventList.includes(type)) {
+        return `${type}-${microWindow.__MICRO_APP_NAME__}`;
     }
+    return type;
 }
 /**
- * Rebind the UMD function of the record before remount
- * @param microAppEventCneter instance of EventCenterForMicroApp
+ * Rewrite side-effect events
+ * @param microWindow micro window
  */
-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__);
-    }
+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,
+    };
 }
 
+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',
@@ -1840,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));
@@ -1850,6 +1860,8 @@ class SandBox {
                             return rawDocument;
                         case 'eval':
                             return eval;
+                        case 'Image':
+                            return ImageProxy;
                     }
                 }
                 if (Reflect.has(target, key)) {
@@ -2039,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() {
@@ -2078,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])) {
@@ -2298,8 +2310,6 @@ class CreateApp {
      */
     actionsForUnmount(destroy, unmountcb) {
         var _a;
-        // dispatch unmount event to base app
-        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.UNMOUNT);
         (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.stop();
         if (destroy) {
             this.actionsForCompletelyDestory();
@@ -2307,6 +2317,8 @@ class CreateApp {
         else if (this.umdMode && this.container.childElementCount) {
             cloneContainer(this.container, this.source.html, false);
         }
+        // dispatch unmount event to base app
+        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.UNMOUNT);
         this.container.innerHTML = '';
         this.container = null;
         unmountcb && unmountcb();
@@ -2320,6 +2332,9 @@ class CreateApp {
     }
     // hidden app when disconnectedCallback called with keep-alive
     hiddenKeepAliveApp() {
+        const oldContainer = this.container;
+        cloneContainer(this.container, this.keepAliveContainer ? this.keepAliveContainer : (this.keepAliveContainer = document.createElement('div')), false);
+        this.container = this.keepAliveContainer;
         this.keepAliveState = keepAliveStates.KEEP_ALIVE_HIDDEN;
         // event should dispatch before clone node
         // dispatch afterhidden event to micro-app
@@ -2327,9 +2342,7 @@ class CreateApp {
             appState: 'afterhidden',
         });
         // dispatch afterhidden event to base app
-        dispatchLifecyclesEvent(this.container, this.name, lifeCycles.AFTERHIDDEN);
-        cloneContainer(this.container, this.keepAliveContainer ? this.keepAliveContainer : (this.keepAliveContainer = document.createElement('div')), false);
-        this.container = this.keepAliveContainer;
+        dispatchLifecyclesEvent(oldContainer, this.name, lifeCycles.AFTERHIDDEN);
     }
     // show app when connectedCallback called with keep-alive
     showKeepAliveApp(container) {
@@ -2391,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();
@@ -2585,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) {
@@ -2610,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) {
@@ -2620,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
@@ -2738,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;
@@ -2823,12 +2915,12 @@ function defineElement(tagName) {
                                 this.actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp);
                             });
                         }
-                        else if (this.getDisposeResult('keep-alive')) {
+                        else if (this.getKeepAliveModeResult()) {
                             this.handleHiddenKeepAliveApp();
                             this.actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp);
                         }
                         else {
-                            this.handleUnmount(this.getDisposeResult('destroy') || this.getDisposeResult('destory'), () => {
+                            this.handleUnmount(this.getDestroyCompatibleResult(), () => {
                                 this.actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp);
                             });
                         }
@@ -2856,7 +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, keep-alive has priority over destroy
+        // keep-alive: open keep-alive mode
         connectedCallback() {
             this.hasConnected = true;
             if (!elementInstanceMap.has(this)) {
@@ -2867,13 +2959,13 @@ function defineElement(tagName) {
         }
         disconnectedCallback() {
             this.hasConnected = false;
-            // keep-alive has priority over destroy
-            if (this.getDisposeResult('keep-alive')) {
+            // keep-alive
+            if (this.getKeepAliveModeResult()) {
                 this.handleHiddenKeepAliveApp();
             }
             else {
                 elementInstanceMap.delete(this);
-                this.handleUnmount(this.getDisposeResult('destroy') || this.getDisposeResult('destory'), () => {
+                this.handleUnmount(this.getDestroyCompatibleResult(), () => {
                     if (elementInstanceMap.size === 0) {
                         releasePatches();
                     }
@@ -3097,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
@@ -3108,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
          */
@@ -3292,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