@micro-zoe/micro-app 1.0.0-beta.2 → 1.0.0-beta.4

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-beta.2';
+const version = '1.0.0-beta.4';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -356,7 +356,7 @@ function pureCreateElement(tagName, options) {
  * @param target Accept cloned elements
  * @param deep deep clone or transfer dom
  */
-function cloneContainer(origin, target, deep) {
+function cloneContainer(target, origin, deep) {
     target.innerHTML = '';
     if (deep) {
         // TODO: ShadowRoot兼容，ShadowRoot不能直接使用cloneNode
@@ -562,7 +562,6 @@ var appStates;
 (function (appStates) {
     appStates["CREATED"] = "created";
     appStates["LOADING"] = "loading";
-    appStates["LOADED"] = "loaded";
     appStates["LOAD_FAILED"] = "load_failed";
     appStates["MOUNTING"] = "mounting";
     appStates["MOUNTED"] = "mounted";
@@ -1501,7 +1500,7 @@ function execScripts(app, initHook) {
         // Notice the second render
         if (appSpaceData.defer || appSpaceData.async) {
             // TODO: defer和module彻底分开，不要混在一起
-            if (scriptInfo.isExternal && !scriptInfo.code && !(app.iframe && appSpaceData.module)) {
+            if (scriptInfo.isExternal && !scriptInfo.code && !isTypeModule(app, scriptInfo)) {
                 deferScriptPromise.push(fetchSource(address, app.name));
             }
             else {
@@ -1585,9 +1584,19 @@ function runScript(address, app, scriptInfo, callback, replaceElement) {
             appSpaceData.sandboxType = sandboxType;
             appSpaceData.parsedFunction = null;
         }
+        /**
+         * TODO: 优化逻辑
+         * 是否是内联模式应该由外部传入，这样自外而内更加统一，逻辑更加清晰
+         */
         if (isInlineMode(app, scriptInfo)) {
             const scriptElement = replaceElement || pureCreateElement('script');
             runCode2InlineScript(address, appSpaceData.parsedCode, isTypeModule(app, scriptInfo), scriptElement, appSpaceData.attrs, callback);
+            /**
+             * TODO: 优化逻辑
+             * replaceElement不存在说明是初始化执行，需要主动插入script
+             * 但这里的逻辑不清晰，应该明确声明是什么环境下才需要主动插入，而不是用replaceElement间接判断
+             * replaceElement还有可能是注释类型(一定是在后台执行)，这里的判断都是间接判断，不够直观
+             */
             if (!replaceElement) {
                 // TEST IGNORE
                 const parent = app.iframe ? app.sandBox.microBody : app.querySelector('micro-app-body');
@@ -1623,7 +1632,7 @@ function runDynamicRemoteScript(address, app, scriptInfo, originScript) {
         runScript(address, app, scriptInfo, dispatchScriptOnLoadEvent, replaceElement);
         !isTypeModule(app, scriptInfo) && dispatchScriptOnLoadEvent();
     };
-    if (scriptInfo.code || (app.iframe && scriptInfo.appSpace[app.name].module)) {
+    if (scriptInfo.code || isTypeModule(app, scriptInfo)) {
         defer(runDynamicScript);
     }
     else {
@@ -2172,14 +2181,21 @@ function patchElementAndDocument() {
         }
         return globalEnv.rawRemoveChild.call(this, oldChild);
     };
+    /**
+     * The insertAdjacentElement method of the Element interface inserts a given element node at a given position relative to the element it is invoked upon.
+     * NOTE:
+     *  1. parameter 2 of insertAdjacentElement must type 'Element'
+     */
     rawRootElement.prototype.insertAdjacentElement = function (where, element) {
         var _a;
-        if (element === null || element === void 0 ? void 0 : element.__MICRO_APP_NAME__) {
+        if ((element === null || element === void 0 ? void 0 : element.__MICRO_APP_NAME__) && isElement(element)) {
             const app = appInstanceMap.get(element.__MICRO_APP_NAME__);
             if (app === null || app === void 0 ? void 0 : app.container) {
-                element = handleNewNode(element, app);
-                const realParent = (_a = getHijackParent(this, element, app)) !== null && _a !== void 0 ? _a : this;
-                return globalEnv.rawInsertAdjacentElement.call(realParent, where, element);
+                const processedEle = handleNewNode(element, app);
+                if (!isElement(processedEle))
+                    return element;
+                const realParent = (_a = getHijackParent(this, processedEle, app)) !== null && _a !== void 0 ? _a : this;
+                return globalEnv.rawInsertAdjacentElement.call(realParent, where, processedEle);
             }
         }
         return globalEnv.rawInsertAdjacentElement.call(this, where, element);
@@ -3294,8 +3310,12 @@ class EventCenterForMicroApp extends EventCenterForGlobal {
  * @param microAppEventCenter instance of EventCenterForMicroApp
  */
 function recordDataCenterSnapshot(microAppEventCenter) {
-    if (microAppEventCenter && !microAppEventCenter.umdDataListeners) {
-        microAppEventCenter.umdDataListeners = { global: new Set(), normal: new Set() };
+    var _a, _b;
+    if (microAppEventCenter) {
+        microAppEventCenter.umdDataListeners = {
+            global: new Set((_a = microAppEventCenter.umdDataListeners) === null || _a === void 0 ? void 0 : _a.global),
+            normal: new Set((_b = microAppEventCenter.umdDataListeners) === null || _b === void 0 ? void 0 : _b.normal),
+        };
         const globalEventInfo = eventCenter.eventList.get('global');
         if (globalEventInfo) {
             for (const cb of globalEventInfo.callbacks) {
@@ -3306,7 +3326,9 @@ function recordDataCenterSnapshot(microAppEventCenter) {
         }
         const subAppEventInfo = eventCenter.eventList.get(createEventName(microAppEventCenter.appName, true));
         if (subAppEventInfo) {
-            microAppEventCenter.umdDataListeners.normal = new Set(subAppEventInfo.callbacks);
+            for (const cb of subAppEventInfo.callbacks) {
+                microAppEventCenter.umdDataListeners.normal.add(cb);
+            }
         }
     }
 }
@@ -3331,7 +3353,7 @@ function rebuildDataCenterSnapshot(microAppEventCenter) {
  * @param microAppEventCenter instance of EventCenterForMicroApp
  */
 function resetDataCenterSnapshot(microAppEventCenter) {
-    delete microAppEventCenter.umdDataListeners;
+    microAppEventCenter === null || microAppEventCenter === void 0 ? true : delete microAppEventCenter.umdDataListeners;
 }
 
 // 管理 app 的单例
@@ -3473,19 +3495,23 @@ function createProxyDocument(appName, sandbox) {
      *  3. prerender/keep-alive(default, umd): not clear timers, record & rebuild events
      */
     const record = () => {
-        // record onclick handler
-        sstOnClickHandler = sstOnClickHandler || onClickHandler;
+        /**
+         * record onclick handler
+         * onClickHandler maybe set again after prerender/keep-alive app hidden
+         */
+        sstOnClickHandler = onClickHandler || sstOnClickHandler;
         // record document event
         eventListenerMap.forEach((listenerList, type) => {
             if (listenerList.size) {
-                sstEventListenerMap.set(type, new Set(listenerList));
+                const cacheList = sstEventListenerMap.get(type) || [];
+                sstEventListenerMap.set(type, new Set([...cacheList, ...listenerList]));
             }
         });
     };
     // rebuild event and timer before remount app
     const rebuild = () => {
         // rebuild onclick event
-        if (sstOnClickHandler)
+        if (sstOnClickHandler && !onClickHandler)
             proxyDocument.onclick = sstOnClickHandler;
         // rebuild document event
         sstEventListenerMap.forEach((listenerList, type) => {
@@ -3500,8 +3526,8 @@ function createProxyDocument(appName, sandbox) {
         // Clear the function bound by micro app through document.onclick
         if (isFunction(onClickHandler)) {
             rawRemoveEventListener.call(rawDocument, 'click', onClickHandler);
-            onClickHandler = null;
         }
+        onClickHandler = null;
         // Clear document binding event
         if (eventListenerMap.size) {
             eventListenerMap.forEach((listenerList, type) => {
@@ -3631,7 +3657,8 @@ function patchWindowEffect(appName, microAppWindow) {
         // record window event
         eventListenerMap.forEach((listenerList, type) => {
             if (listenerList.size) {
-                sstEventListenerMap.set(type, new Set(listenerList));
+                const cacheList = sstEventListenerMap.get(type) || [];
+                sstEventListenerMap.set(type, new Set([...cacheList, ...listenerList]));
             }
         });
     };
@@ -3678,31 +3705,41 @@ function patchWindowEffect(appName, microAppWindow) {
 
 // set micro app state to origin state
 function setMicroState(appName, microState) {
-    const rawState = globalEnv.rawWindow.history.state;
-    const additionalState = {
-        microAppState: assign({}, rawState === null || rawState === void 0 ? void 0 : rawState.microAppState, {
-            [appName]: microState
-        })
-    };
-    // create new state object
-    return assign({}, rawState, additionalState);
+    if (isMemoryRouterEnabled(appName)) {
+        const rawState = globalEnv.rawWindow.history.state;
+        const additionalState = {
+            microAppState: assign({}, rawState === null || rawState === void 0 ? void 0 : rawState.microAppState, {
+                [appName]: microState
+            })
+        };
+        // create new state object
+        return assign({}, rawState, additionalState);
+    }
+    return microState;
 }
 // delete micro app state form origin state
 function removeMicroState(appName, rawState) {
-    if (isPlainObject(rawState === null || rawState === void 0 ? void 0 : rawState.microAppState)) {
-        if (!isUndefined(rawState.microAppState[appName])) {
-            delete rawState.microAppState[appName];
-        }
-        if (!Object.keys(rawState.microAppState).length) {
-            delete rawState.microAppState;
+    if (isMemoryRouterEnabled(appName)) {
+        if (isPlainObject(rawState === null || rawState === void 0 ? void 0 : rawState.microAppState)) {
+            if (!isUndefined(rawState.microAppState[appName])) {
+                delete rawState.microAppState[appName];
+            }
+            if (!Object.keys(rawState.microAppState).length) {
+                delete rawState.microAppState;
+            }
         }
+        return assign({}, rawState);
     }
-    return assign({}, rawState);
+    return rawState;
 }
 // get micro app state form origin state
 function getMicroState(appName) {
-    var _a, _b;
-    return ((_b = (_a = globalEnv.rawWindow.history.state) === null || _a === void 0 ? void 0 : _a.microAppState) === null || _b === void 0 ? void 0 : _b[appName]) || null;
+    var _a;
+    const rawState = globalEnv.rawWindow.history.state;
+    if (isMemoryRouterEnabled(appName)) {
+        return ((_a = rawState === null || rawState === void 0 ? void 0 : rawState.microAppState) === null || _a === void 0 ? void 0 : _a[appName]) || null;
+    }
+    return rawState;
 }
 const ENC_AD_RE = /&/g; // %M1
 const ENC_EQ_RE = /=/g; // %M2
@@ -3740,53 +3777,61 @@ function formatQueryAppName(appName) {
 function getMicroPathFromURL(appName) {
     var _a, _b;
     const rawLocation = globalEnv.rawWindow.location;
-    const queryObject = getQueryObjectFromURL(rawLocation.search, rawLocation.hash);
-    const microPath = ((_a = queryObject.hashQuery) === null || _a === void 0 ? void 0 : _a[formatQueryAppName(appName)]) || ((_b = queryObject.searchQuery) === null || _b === void 0 ? void 0 : _b[formatQueryAppName(appName)]);
-    return isString(microPath) ? decodeMicroPath(microPath) : null;
+    if (isMemoryRouterEnabled(appName)) {
+        const queryObject = getQueryObjectFromURL(rawLocation.search, rawLocation.hash);
+        const microPath = ((_a = queryObject.hashQuery) === null || _a === void 0 ? void 0 : _a[formatQueryAppName(appName)]) || ((_b = queryObject.searchQuery) === null || _b === void 0 ? void 0 : _b[formatQueryAppName(appName)]);
+        return isString(microPath) ? decodeMicroPath(microPath) : null;
+    }
+    return rawLocation.pathname + rawLocation.search + rawLocation.hash;
 }
 /**
  * Attach child app fullPath to browser url
  * @param appName app.name
- * @param microLocation location of child app
+ * @param targetLocation location of child app or rawLocation of window
  */
-function setMicroPathToURL(appName, microLocation) {
-    let { pathname, search, hash } = globalEnv.rawWindow.location;
-    const queryObject = getQueryObjectFromURL(search, hash);
-    const encodedMicroPath = encodeMicroPath(microLocation.pathname +
-        microLocation.search +
-        microLocation.hash);
-    /**
-     * Is parent is hash router
-     * In fact, this is not true. It just means that the parameter is added to the hash
-     */
+function setMicroPathToURL(appName, targetLocation) {
+    const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
     let isAttach2Hash = false;
-    // If hash exists and search does not exist, it is considered as a hash route
-    if (hash && !search) {
-        isAttach2Hash = true;
-        if (queryObject.hashQuery) {
-            queryObject.hashQuery[formatQueryAppName(appName)] = encodedMicroPath;
-        }
-        else {
-            queryObject.hashQuery = {
-                [formatQueryAppName(appName)]: encodedMicroPath
-            };
-        }
-        const baseHash = hash.includes('?') ? hash.slice(0, hash.indexOf('?') + 1) : hash + '?';
-        hash = baseHash + stringifyQuery(queryObject.hashQuery);
-    }
-    else {
-        if (queryObject.searchQuery) {
-            queryObject.searchQuery[formatQueryAppName(appName)] = encodedMicroPath;
+    if (isMemoryRouterEnabled(appName)) {
+        let { pathname, search, hash } = globalEnv.rawWindow.location;
+        const queryObject = getQueryObjectFromURL(search, hash);
+        const encodedMicroPath = encodeMicroPath(targetFullPath);
+        /**
+         * Is parent is hash router
+         * In fact, this is not true. It just means that the parameter is added to the hash
+         */
+        // If hash exists and search does not exist, it is considered as a hash route
+        if (hash && !search) {
+            isAttach2Hash = true;
+            if (queryObject.hashQuery) {
+                queryObject.hashQuery[formatQueryAppName(appName)] = encodedMicroPath;
+            }
+            else {
+                queryObject.hashQuery = {
+                    [formatQueryAppName(appName)]: encodedMicroPath
+                };
+            }
+            const baseHash = hash.includes('?') ? hash.slice(0, hash.indexOf('?') + 1) : hash + '?';
+            hash = baseHash + stringifyQuery(queryObject.hashQuery);
         }
         else {
-            queryObject.searchQuery = {
-                [formatQueryAppName(appName)]: encodedMicroPath
-            };
+            if (queryObject.searchQuery) {
+                queryObject.searchQuery[formatQueryAppName(appName)] = encodedMicroPath;
+            }
+            else {
+                queryObject.searchQuery = {
+                    [formatQueryAppName(appName)]: encodedMicroPath
+                };
+            }
+            search = '?' + stringifyQuery(queryObject.searchQuery);
         }
-        search = '?' + stringifyQuery(queryObject.searchQuery);
+        return {
+            fullPath: pathname + search + hash,
+            isAttach2Hash,
+        };
     }
     return {
-        fullPath: pathname + search + hash,
+        fullPath: targetFullPath,
         isAttach2Hash,
     };
 }
@@ -3798,18 +3843,20 @@ function setMicroPathToURL(appName, microLocation) {
 function removeMicroPathFromURL(appName, targetLocation) {
     var _a, _b, _c, _d;
     let { pathname, search, hash } = targetLocation || globalEnv.rawWindow.location;
-    const queryObject = getQueryObjectFromURL(search, hash);
     let isAttach2Hash = false;
-    if ((_a = queryObject.hashQuery) === null || _a === void 0 ? void 0 : _a[formatQueryAppName(appName)]) {
-        isAttach2Hash = true;
-        (_b = queryObject.hashQuery) === null || _b === void 0 ? true : delete _b[formatQueryAppName(appName)];
-        const hashQueryStr = stringifyQuery(queryObject.hashQuery);
-        hash = hash.slice(0, hash.indexOf('?') + Number(Boolean(hashQueryStr))) + hashQueryStr;
-    }
-    else if ((_c = queryObject.searchQuery) === null || _c === void 0 ? void 0 : _c[formatQueryAppName(appName)]) {
-        (_d = queryObject.searchQuery) === null || _d === void 0 ? true : delete _d[formatQueryAppName(appName)];
-        const searchQueryStr = stringifyQuery(queryObject.searchQuery);
-        search = searchQueryStr ? '?' + searchQueryStr : '';
+    if (isMemoryRouterEnabled(appName)) {
+        const queryObject = getQueryObjectFromURL(search, hash);
+        if ((_a = queryObject.hashQuery) === null || _a === void 0 ? void 0 : _a[formatQueryAppName(appName)]) {
+            isAttach2Hash = true;
+            (_b = queryObject.hashQuery) === null || _b === void 0 ? true : delete _b[formatQueryAppName(appName)];
+            const hashQueryStr = stringifyQuery(queryObject.hashQuery);
+            hash = hash.slice(0, hash.indexOf('?') + Number(Boolean(hashQueryStr))) + hashQueryStr;
+        }
+        else if ((_c = queryObject.searchQuery) === null || _c === void 0 ? void 0 : _c[formatQueryAppName(appName)]) {
+            (_d = queryObject.searchQuery) === null || _d === void 0 ? true : delete _d[formatQueryAppName(appName)];
+            const searchQueryStr = stringifyQuery(queryObject.searchQuery);
+            search = searchQueryStr ? '?' + searchQueryStr : '';
+        }
     }
     return {
         fullPath: pathname + search + hash,
@@ -3849,8 +3896,24 @@ function getNoHashMicroPathFromURL(appName, baseUrl) {
  */
 function isEffectiveApp(appName) {
     const app = appInstanceMap.get(appName);
+    /**
+     * !!(app && !app.isPrefetch && !app.isHidden())
+     * 隐藏的keep-alive应用暂时不作为无效应用，原因如下
+     * 1、隐藏后才执行去除浏览器上的微应用的路由信息的操作，导致微应用的路由信息无法去除
+     * 2、如果保持隐藏应用内部正常跳转，阻止同步路由信息到浏览器，这样理论上是好的，但是对于location跳转改如何处理？location跳转是基于修改浏览器地址后发送popstate事件实现的，所以应该是在隐藏后不支持通过location进行跳转
+     */
     return !!(app && !app.isPrefetch);
 }
+/**
+ * Determine whether the app has enabled memory-router
+ * NOTE:
+ *  1. if sandbox disabled, memory-router is disabled
+ *  2. if app not exist, memory-router is disabled
+ */
+function isMemoryRouterEnabled(appName) {
+    const app = appInstanceMap.get(appName);
+    return !!(app && app.sandBox && app.useMemoryRouter);
+}
 
 /**
  * dispatch PopStateEvent & HashChangeEvent to child app
@@ -3872,26 +3935,7 @@ function addHistoryListener(appName) {
             excludePreRender: true,
         }).includes(appName) &&
             !e.onlyForBrowser) {
-            const microPath = getMicroPathFromURL(appName);
-            const app = appInstanceMap.get(appName);
-            const proxyWindow = app.sandBox.proxyWindow;
-            const microAppWindow = app.sandBox.microAppWindow;
-            let isHashChange = false;
-            // for hashChangeEvent
-            const oldHref = proxyWindow.location.href;
-            // Do not attach micro state to url when microPath is empty
-            if (microPath) {
-                const oldHash = proxyWindow.location.hash;
-                updateMicroLocation(appName, microPath, microAppWindow.location);
-                isHashChange = proxyWindow.location.hash !== oldHash;
-            }
-            // dispatch formatted popStateEvent to child
-            dispatchPopStateEventToMicroApp(appName, proxyWindow, microAppWindow);
-            // dispatch formatted hashChangeEvent to child when hash change
-            if (isHashChange)
-                dispatchHashChangeEventToMicroApp(appName, proxyWindow, microAppWindow, oldHref);
-            // clear element scope before trigger event of next app
-            removeDomScope();
+            updateMicroLocationWithEvent(appName, getMicroPathFromURL(appName));
         }
     };
     rawWindow.addEventListener('popstate', popStateHandler);
@@ -3899,6 +3943,35 @@ function addHistoryListener(appName) {
         rawWindow.removeEventListener('popstate', popStateHandler);
     };
 }
+/**
+ * Effect: use to trigger child app jump
+ * Actions:
+ *  1. update microLocation with target path
+ *  2. dispatch popStateEvent & hashChangeEvent
+ * @param appName app name
+ * @param targetFullPath target path of child app
+ */
+function updateMicroLocationWithEvent(appName, targetFullPath) {
+    const app = appInstanceMap.get(appName);
+    const proxyWindow = app.sandBox.proxyWindow;
+    const microAppWindow = app.sandBox.microAppWindow;
+    let isHashChange = false;
+    // for hashChangeEvent
+    const oldHref = proxyWindow.location.href;
+    // Do not attach micro state to url when targetFullPath is empty
+    if (targetFullPath) {
+        const oldHash = proxyWindow.location.hash;
+        updateMicroLocation(appName, targetFullPath, microAppWindow.location);
+        isHashChange = proxyWindow.location.hash !== oldHash;
+    }
+    // dispatch formatted popStateEvent to child
+    dispatchPopStateEventToMicroApp(appName, proxyWindow, microAppWindow);
+    // dispatch formatted hashChangeEvent to child when hash change
+    if (isHashChange)
+        dispatchHashChangeEventToMicroApp(appName, proxyWindow, microAppWindow, oldHref);
+    // clear element scope before trigger event of next app
+    removeDomScope();
+}
 /**
  * dispatch formatted popstate event to microApp
  * @param appName app name
@@ -4061,6 +4134,8 @@ function nativeHistoryNavigate(appName, methodName, fullPath, state = null, titl
  * 2. proxyHistory.pushState/replaceState with limited popstateEvent
  * 3. api microApp.router.push/replace
  * 4. proxyLocation.hash = xxx
+ * NOTE:
+ *  1. hidden keep-alive app can jump internally, but will not synchronize to browser
  * @param appName app.name
  * @param methodName pushState/replaceState
  * @param result result of add/remove microApp path on browser url
@@ -4076,8 +4151,10 @@ function navigateWithNativeEvent(appName, methodName, result, onlyForBrowser, st
         const oldHref = result.isAttach2Hash && oldFullPath !== result.fullPath ? rawLocation.href : null;
         // navigate with native history method
         nativeHistoryNavigate(appName, methodName, result.fullPath, state, title);
-        if (oldFullPath !== result.fullPath)
+        // TODO: 如果所有模式统一发送popstate事件，则isMemoryRouterEnabled(appName)要去掉
+        if (oldFullPath !== result.fullPath && isMemoryRouterEnabled(appName)) {
             dispatchNativeEvent(appName, onlyForBrowser, oldHref);
+        }
     }
 }
 /**
@@ -4122,8 +4199,8 @@ function reWriteHistoryMethod(method) {
             excludeHiddenApp: true,
             excludePreRender: true,
         }).forEach(appName => {
-            const app = appInstanceMap.get(appName);
-            if (app.sandBox && app.useMemoryRouter && !getMicroPathFromURL(appName)) {
+            if (isMemoryRouterEnabled(appName) && !getMicroPathFromURL(appName)) {
+                const app = appInstanceMap.get(appName);
                 attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
             }
         });
@@ -4172,12 +4249,14 @@ function createRouterApi() {
         return function (to) {
             const appName = formatAppName(to.name);
             if (appName && isString(to.path)) {
-                const app = appInstanceMap.get(appName);
-                if (app && (!app.sandBox || !app.useMemoryRouter)) {
-                    return logError(`navigation failed, memory router of app ${appName} is closed`);
-                }
-                // active apps, include hidden keep-alive app
-                if (getActiveApps({ excludePreRender: true }).includes(appName)) {
+                /**
+                 * active apps, exclude prerender app or hidden keep-alive app
+                 * NOTE:
+                 *  1. prerender app or hidden keep-alive app clear and record popstate event, so we cannot control app jump through the API
+                 *  2. disable memory-router
+                 */
+                if (getActiveApps({ excludeHiddenApp: true, excludePreRender: true }).includes(appName)) {
+                    const app = appInstanceMap.get(appName);
                     const microLocation = app.sandBox.proxyWindow.location;
                     const targetLocation = createURL(to.path, microLocation.href);
                     // Only get path data, even if the origin is different from microApp
@@ -4186,20 +4265,48 @@ function createRouterApi() {
                     if (currentFullPath !== targetFullPath || getMicroPathFromURL(appName) !== targetFullPath) {
                         const methodName = (replace && to.replace !== false) || to.replace === true ? 'replaceState' : 'pushState';
                         navigateWithRawHistory(appName, methodName, targetLocation, to.state);
+                        /**
+                         * TODO:
+                         *  1. 关闭虚拟路由的跳转地址不同：baseRoute + 子应用地址，文档中要说明
+                         *  2. 关闭虚拟路由时跳转方式不同：1、基座跳转但不发送popstate事件 2、控制子应用更新location，内部发送popstate事件。
+                         * 补充：
+                         *  核心思路：减小对基座的影响(就是子应用跳转不向基座发送popstate事件，其他操作一致)，但这是必要的吗，只是多了一个触发popstate的操作
+                         *  未来的思路有两种：
+                         *    1、减少对基座的影响，主要是解决vue循环刷新的问题
+                         *    2、全局发送popstate事件，解决主、子都是vue3的冲突问题
+                         *  两者选一个吧，如果选2，则下面这两行代码可以去掉
+                         *  要不这样吧，history和search模式采用2，这样可以解决vue3的问题，custom采用1，避免vue循环刷新的问题，这样在用户出现问题时各有解决方案。但反过来说，每种方案又分别导致另外的问题，不统一，导致复杂度增高
+                         *  如果关闭虚拟路由，同时发送popstate事件还是无法解决vue3的问题(毕竟history.state理论上还是会冲突)，那么就没必要发送popstate事件了。
+                         * 。。。。先这样吧
+                         */
+                        if (!isMemoryRouterEnabled(appName)) {
+                            updateMicroLocationWithEvent(appName, targetFullPath);
+                        }
                     }
                 }
                 else {
-                    /**
-                     * app not exit or unmounted, update browser URL with replaceState
-                     * use base app location.origin as baseURL
-                     */
-                    const rawLocation = globalEnv.rawWindow.location;
-                    const targetLocation = createURL(to.path, rawLocation.origin);
-                    const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
-                    if (getMicroPathFromURL(appName) !== targetFullPath) {
-                        navigateWithRawHistory(appName, to.replace === false ? 'pushState' : 'replaceState', targetLocation, to.state);
-                    }
+                    logWarn('navigation failed, app does not exist or is inactive');
                 }
+                // /**
+                //  * app not exit or unmounted, update browser URL with replaceState
+                //  * use base app location.origin as baseURL
+                //  * 应用不存在或已卸载，依然使用replaceState来更新浏览器地址 -- 不合理
+                //  */
+                // /**
+                //  * TODO: 应用还没渲染或已经卸载最好不要支持跳转了，我知道这是因为解决一些特殊场景，但这么做是非常反直觉的
+                //  * 并且在新版本中有多种路由模式，如果应用不存在，我们根本无法知道是哪种模式，那么这里的操作就无意义了。
+                //  */
+                // const rawLocation = globalEnv.rawWindow.location
+                // const targetLocation = createURL(to.path, rawLocation.origin)
+                // const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash
+                // if (getMicroPathFromURL(appName) !== targetFullPath) {
+                //   navigateWithRawHistory(
+                //     appName,
+                //     to.replace === false ? 'pushState' : 'replaceState',
+                //     targetLocation,
+                //     to.state,
+                //   )
+                // }
             }
             else {
                 logError(`navigation failed, name & path are required when use router.${replace ? 'replace' : 'push'}`);
@@ -4259,8 +4366,8 @@ function createRouterApi() {
      * 2. useMemoryRouter is false
      */
     function commonHandlerForAttachToURL(appName) {
-        const app = appInstanceMap.get(appName);
-        if (app.sandBox && app.useMemoryRouter) {
+        if (isMemoryRouterEnabled(appName)) {
+            const app = appInstanceMap.get(appName);
             attachRouteToBrowserURL(appName, setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, getMicroState(appName)));
         }
     }
@@ -4512,37 +4619,40 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
         // Even if the origin is the same, developers still have the possibility of want to jump to a new page
         if (targetLocation.origin === proxyLocation.origin) {
             const setMicroPathResult = setMicroPathToURL(appName, targetLocation);
-            /**
-             * change hash with location.href will not trigger the browser reload
-             * so we use pushState & reload to imitate href behavior
-             * NOTE:
-             *    1. if child app only change hash, it should not trigger browser reload
-             *    2. if address is same and has hash, it should not add route stack
-             */
-            if (targetLocation.pathname === proxyLocation.pathname &&
-                targetLocation.search === proxyLocation.search) {
-                let oldHref = null;
-                if (targetLocation.hash !== proxyLocation.hash) {
-                    if (setMicroPathResult.isAttach2Hash)
-                        oldHref = rawLocation.href;
-                    nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath);
-                }
-                if (targetLocation.hash) {
-                    dispatchNativeEvent(appName, false, oldHref);
+            // if disable memory-router, navigate directly through rawLocation
+            if (isMemoryRouterEnabled(appName)) {
+                /**
+                 * change hash with location.href will not trigger the browser reload
+                 * so we use pushState & reload to imitate href behavior
+                 * NOTE:
+                 *    1. if child app only change hash, it should not trigger browser reload
+                 *    2. if address is same and has hash, it should not add route stack
+                 */
+                if (targetLocation.pathname === proxyLocation.pathname &&
+                    targetLocation.search === proxyLocation.search) {
+                    let oldHref = null;
+                    if (targetLocation.hash !== proxyLocation.hash) {
+                        if (setMicroPathResult.isAttach2Hash)
+                            oldHref = rawLocation.href;
+                        nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath);
+                    }
+                    if (targetLocation.hash) {
+                        dispatchNativeEvent(appName, false, oldHref);
+                    }
+                    else {
+                        reload();
+                    }
+                    return void 0;
+                    /**
+                     * when baseApp is hash router, address change of child can not reload browser
+                     * so we imitate behavior of browser (reload) manually
+                     */
                 }
-                else {
+                else if (setMicroPathResult.isAttach2Hash) {
+                    nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath);
                     reload();
+                    return void 0;
                 }
-                return void 0;
-                /**
-                 * when baseApp is hash router, address change of child can not reload browser
-                 * so we imitate behavior of browser (reload) manually
-                 */
-            }
-            else if (setMicroPathResult.isAttach2Hash) {
-                nativeHistoryNavigate(appName, methodName, setMicroPathResult.fullPath);
-                reload();
-                return void 0;
             }
             return setMicroPathResult.fullPath;
         }
@@ -4634,19 +4744,34 @@ function createMicroLocation(appName, url, microAppWindow, childStaticLocation,
                     }
                 }
                 else if (key === 'pathname') {
-                    const targetPath = ('/' + value).replace(/^\/+/, '/') + proxyLocation.search + proxyLocation.hash;
-                    handleForPathNameAndSearch(targetPath, 'pathname');
+                    if (isMemoryRouterEnabled(appName)) {
+                        const targetPath = ('/' + value).replace(/^\/+/, '/') + proxyLocation.search + proxyLocation.hash;
+                        handleForPathNameAndSearch(targetPath, 'pathname');
+                    }
+                    else {
+                        rawLocation.pathname = value;
+                    }
                 }
                 else if (key === 'search') {
-                    const targetPath = proxyLocation.pathname + ('?' + value).replace(/^\?+/, '?') + proxyLocation.hash;
-                    handleForPathNameAndSearch(targetPath, 'search');
+                    if (isMemoryRouterEnabled(appName)) {
+                        const targetPath = proxyLocation.pathname + ('?' + value).replace(/^\?+/, '?') + proxyLocation.hash;
+                        handleForPathNameAndSearch(targetPath, 'search');
+                    }
+                    else {
+                        rawLocation.search = value;
+                    }
                 }
                 else if (key === 'hash') {
-                    const targetPath = proxyLocation.pathname + proxyLocation.search + ('#' + value).replace(/^#+/, '#');
-                    const targetLocation = createURL(targetPath, url);
-                    // The same hash will not trigger popStateEvent
-                    if (targetLocation.hash !== proxyLocation.hash) {
-                        navigateWithNativeEvent(appName, 'pushState', setMicroPathToURL(appName, targetLocation), false);
+                    if (isMemoryRouterEnabled(appName)) {
+                        const targetPath = proxyLocation.pathname + proxyLocation.search + ('#' + value).replace(/^#+/, '#');
+                        const targetLocation = createURL(targetPath, url);
+                        // The same hash will not trigger popStateEvent
+                        if (targetLocation.hash !== proxyLocation.hash) {
+                            navigateWithNativeEvent(appName, 'pushState', setMicroPathToURL(appName, targetLocation), false);
+                        }
+                    }
+                    else {
+                        rawLocation.hash = value;
                     }
                 }
                 else {
@@ -4691,6 +4816,7 @@ function updateMicroLocation(appName, path, microLocation, type) {
     var _a;
     // record old values of microLocation to `from`
     const from = createGuardLocation(appName, microLocation);
+    // if is iframeSandbox, microLocation muse be rawLocation of iframe, not proxyLocation
     const newLocation = createURL(path, microLocation.href);
     if (isIframeSandbox(appName)) {
         const microAppWindow = appInstanceMap.get(appName).sandBox.microAppWindow;
@@ -4709,6 +4835,15 @@ function updateMicroLocation(appName, path, microLocation, type) {
     }
 }
 
+/**
+ * TODO: 关于关闭虚拟路由系统的临时笔记
+ * 1. with沙箱关闭虚拟路由最好和iframe保持一致
+ * 2. default-page无法使用，但是用基座的地址可以实现一样的效果
+ * 3. keep-router-state功能失效，因为始终为true
+ * 4. 基座控制子应用跳转地址改变，正确的值为：baseRoute + 子应用地址，这要在文档中说明，否则很容易出错，确实也很难理解
+ * 5. 是否需要发送popstate事件，为了减小对基座的影响，现在不发送
+ * 6. 关闭后导致的vue3路由冲突问题需要在文档中明确指出(2处：在关闭虚拟路由系统的配置那里着重说明，在vue常见问题中说明)
+ */
 /**
  * The router system has two operations: read and write
  * Read through location and write through history & location
@@ -4740,7 +4875,9 @@ function initRouteStateWithURL(appName, microLocation, defaultPage) {
 }
 /**
  * initialize browser information according to microLocation
- * called on sandbox.start or reshow of keep-alive app
+ * Scenes:
+ *  1. sandbox.start
+ *  2. reshow of keep-alive app
  */
 function updateBrowserURLWithLocation(appName, microLocation, defaultPage) {
     // update microLocation with defaultPage
@@ -4763,14 +4900,14 @@ function clearRouteStateFromURL(appName, url, microLocation, keepRouteState) {
         const { pathname, search, hash } = createURL(url);
         updateMicroLocation(appName, pathname + search + hash, microLocation, 'prevent');
     }
-    removeStateAndPathFromBrowser(appName);
+    removePathFromBrowser(appName);
     clearRouterWhenUnmount(appName);
 }
 /**
  * remove microState from history.state and remove microPath from browserURL
  * called on sandbox.stop or hidden of keep-alive app
  */
-function removeStateAndPathFromBrowser(appName) {
+function removePathFromBrowser(appName) {
     attachRouteToBrowserURL(appName, removeMicroPathFromURL(appName), removeMicroState(appName, globalEnv.rawWindow.history.state));
 }
 
@@ -4914,6 +5051,7 @@ class WithSandBox {
         if (this.active)
             return;
         this.active = true;
+        // TODO: with沙箱关闭虚拟路由保持和iframe一致
         if (useMemoryRouter) {
             if (isUndefined(this.microAppWindow.location)) {
                 this.setMicroAppRouter(this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.__MICRO_APP_URL__, this.microAppWindow);
@@ -4950,16 +5088,18 @@ class WithSandBox {
      * @param keepRouteState prevent reset route
      * @param destroy completely destroy, delete cache resources
      * @param clearData clear data from base app
+     * @param useMemoryRouter use virtual router
      */
-    stop({ umdMode, keepRouteState, destroy, clearData, }) {
+    stop({ umdMode, keepRouteState, destroy, clearData, useMemoryRouter, }) {
+        var _a;
         if (!this.active)
             return;
         this.recordAndReleaseEffect({ umdMode, clearData, destroy }, !umdMode || destroy);
-        if (this.removeHistoryListener) {
+        if (useMemoryRouter) {
             this.clearRouteState(keepRouteState);
-            // release listener of popstate
-            this.removeHistoryListener();
         }
+        // release listener of popstate for child app
+        (_a = this.removeHistoryListener) === null || _a === void 0 ? void 0 : _a.call(this);
         /**
          * NOTE:
          *  1. injectedKeys and escapeKeys must be placed at the back
@@ -5401,7 +5541,7 @@ class WithSandBox {
         updateBrowserURLWithLocation(this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.location);
     }
     removeRouteInfoForKeepAliveApp() {
-        removeStateAndPathFromBrowser(this.microAppWindow.__MICRO_APP_NAME__);
+        removePathFromBrowser(this.microAppWindow.__MICRO_APP_NAME__);
     }
     /**
      * Format all html elements when init
@@ -5551,7 +5691,8 @@ function patchWindowEffect$1(microAppWindow) {
         // record window event
         eventListenerMap.forEach((listenerList, type) => {
             if (listenerList.size) {
-                sstEventListenerMap.set(type, new Set(listenerList));
+                const cacheList = sstEventListenerMap.get(type) || [];
+                sstEventListenerMap.set(type, new Set([...cacheList, ...listenerList]));
             }
         });
     };
@@ -5839,19 +5980,23 @@ function patchDocumentEffect(appName, microAppWindow) {
      *  3. after init prerender app
      */
     const record = () => {
-        // record onclick handler
-        sstOnClickHandler = sstOnClickHandler || onClickHandler;
+        /**
+         * record onclick handler
+         * onClickHandler maybe set again after prerender/keep-alive app hidden
+         */
+        sstOnClickHandler = onClickHandler || sstOnClickHandler;
         // record document event
         eventListenerMap.forEach((listenerList, type) => {
             if (listenerList.size) {
-                sstEventListenerMap.set(type, new Set(listenerList));
+                const cacheList = sstEventListenerMap.get(type) || [];
+                sstEventListenerMap.set(type, new Set([...cacheList, ...listenerList]));
             }
         });
     };
     // rebuild event and timer before remount app
     const rebuild = () => {
         // rebuild onclick event
-        if (sstOnClickHandler)
+        if (sstOnClickHandler && !onClickHandler)
             microDocument.onclick = sstOnClickHandler;
         sstEventListenerMap.forEach((listenerList, type) => {
             for (const listener of listenerList) {
@@ -5864,8 +6009,8 @@ function patchDocumentEffect(appName, microAppWindow) {
         // Clear the function bound by micro app through document.onclick
         if (isFunction(onClickHandler)) {
             rawRemoveEventListener.call(rawDocument, 'click', onClickHandler);
-            onClickHandler = null;
         }
+        onClickHandler = null;
         // Clear document binding event
         if (eventListenerMap.size) {
             eventListenerMap.forEach((listenerList, type) => {
@@ -6174,14 +6319,29 @@ class IframeSandbox {
         if (this.active)
             return;
         this.active = true;
-        // TODO: 虚拟路由升级
-        // eslint-disable-next-line
-        if (useMemoryRouter || true) {
-            this.initRouteState(defaultPage);
-            // unique listener of popstate event for sub app
-            this.removeHistoryListener = addHistoryListener(this.microAppWindow.__MICRO_APP_NAME__);
-        }
-        else {
+        /**
+         * Sync router info to iframe when exec sandbox.start with disable or enable memory-router
+         * e.g.:
+         *  vue-router@4.x get target path by remove the base section from rawLocation.pathname
+         *  code: window.location.pathname.slice(base.length) || '/'; (base is baseroute)
+         * NOTE:
+         *  1. iframe router and browser router are separated, we should update iframe router manually
+         *  2. withSandbox location is browser location when disable memory-router, so no need to do anything
+         */
+        /**
+         * TODO:
+         * 做一些记录：
+         * 1. iframe关闭虚拟路由系统后，default-page无法使用，推荐用户直接使用浏览器地址控制首页渲染
+         *    补充：keep-router-state 也无法配置，因为keep-router-state一定为true。
+         * 2. 导航拦截、current.route 可以正常使用
+         * 3. 可以正常控制子应用跳转，方式还是自上而下(也可以是子应用内部跳转，这种方式更好一点，减小对基座的影响，不会导致vue的循环刷新)
+         * 4. 关闭虚拟路由以后会对应 route-mode='custom' 模式，包括with沙箱也会这么做
+         * 5. 关闭虚拟路由是指尽可能模式没有虚拟路由的情况，子应用直接获取浏览器location和history，控制浏览器跳转
+         */
+        this.initRouteState(defaultPage);
+        // unique listener of popstate event for child app
+        this.removeHistoryListener = addHistoryListener(this.microAppWindow.__MICRO_APP_NAME__);
+        if (!useMemoryRouter) {
             this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseroute;
         }
         /**
@@ -6197,15 +6357,15 @@ class IframeSandbox {
         }
         if (++IframeSandbox.activeCount === 1) ;
     }
-    stop({ umdMode, keepRouteState, destroy, clearData, }) {
+    stop({ umdMode, keepRouteState, destroy, clearData, useMemoryRouter, }) {
+        var _a;
         if (!this.active)
             return;
         this.recordAndReleaseEffect({ clearData }, !umdMode || destroy);
-        if (this.removeHistoryListener) {
-            this.clearRouteState(keepRouteState);
-            // release listener of popstate
-            this.removeHistoryListener();
-        }
+        // if keep-route-state is true or disable memory-router, preserve microLocation state
+        this.clearRouteState(keepRouteState || !useMemoryRouter);
+        // release listener of popstate for child app
+        (_a = this.removeHistoryListener) === null || _a === void 0 ? void 0 : _a.call(this);
         if (!umdMode || destroy) {
             this.deleteIframeElement();
             this.escapeKeys.forEach((key) => {
@@ -6275,8 +6435,9 @@ class IframeSandbox {
      *  2. unmount prerender app manually
      */
     resetEffectSnapshot() {
-        this.windowEffect.reset();
-        this.documentEffect.reset();
+        var _a, _b;
+        (_a = this.windowEffect) === null || _a === void 0 ? void 0 : _a.reset();
+        (_b = this.documentEffect) === null || _b === void 0 ? void 0 : _b.reset();
         resetDataCenterSnapshot(this.microAppWindow.microApp);
     }
     /**
@@ -6287,14 +6448,16 @@ class IframeSandbox {
      * 3. after init prerender app
      */
     recordEffectSnapshot() {
-        this.windowEffect.record();
-        this.documentEffect.record();
+        var _a, _b;
+        (_a = this.windowEffect) === null || _a === void 0 ? void 0 : _a.record();
+        (_b = this.documentEffect) === null || _b === void 0 ? void 0 : _b.record();
         recordDataCenterSnapshot(this.microAppWindow.microApp);
     }
     // rebuild umd snapshot before remount umd app
     rebuildEffectSnapshot() {
-        this.windowEffect.rebuild();
-        this.documentEffect.rebuild();
+        var _a, _b;
+        (_a = this.windowEffect) === null || _a === void 0 ? void 0 : _a.rebuild();
+        (_b = this.documentEffect) === null || _b === void 0 ? void 0 : _b.rebuild();
         rebuildDataCenterSnapshot(this.microAppWindow.microApp);
     }
     /**
@@ -6308,14 +6471,14 @@ class IframeSandbox {
      * @param keepAlive is keep-alive app
      */
     releaseGlobalEffect({ clearData = false }) {
-        var _a, _b, _c;
-        this.windowEffect.release();
-        this.documentEffect.release();
-        (_a = this.microAppWindow.microApp) === null || _a === void 0 ? void 0 : _a.clearDataListener();
-        (_b = this.microAppWindow.microApp) === null || _b === void 0 ? void 0 : _b.clearGlobalDataListener();
+        var _a, _b, _c, _d, _e;
+        (_a = this.windowEffect) === null || _a === void 0 ? void 0 : _a.release();
+        (_b = this.documentEffect) === null || _b === void 0 ? void 0 : _b.release();
+        (_c = this.microAppWindow.microApp) === null || _c === void 0 ? void 0 : _c.clearDataListener();
+        (_d = this.microAppWindow.microApp) === null || _d === void 0 ? void 0 : _d.clearGlobalDataListener();
         if (clearData) {
             microApp.clearData(this.microAppWindow.__MICRO_APP_NAME__);
-            (_c = this.microAppWindow.microApp) === null || _c === void 0 ? void 0 : _c.clearData();
+            (_e = this.microAppWindow.microApp) === null || _e === void 0 ? void 0 : _e.clearData();
         }
     }
     // set __MICRO_APP_PRE_RENDER__ state
@@ -6445,7 +6608,7 @@ class IframeSandbox {
         updateBrowserURLWithLocation(this.microAppWindow.__MICRO_APP_NAME__, this.microAppWindow.location);
     }
     removeRouteInfoForKeepAliveApp() {
-        removeStateAndPathFromBrowser(this.microAppWindow.__MICRO_APP_NAME__);
+        removePathFromBrowser(this.microAppWindow.__MICRO_APP_NAME__);
     }
     /**
      * Format all html elements when init
@@ -6570,9 +6733,14 @@ class CreateApp {
         var _a;
         if (++this.loadSourceLevel === 2) {
             this.source.html = html;
-            this.setAppState(appStates.LOADED);
-            if (!this.isPrefetch && appStates.UNMOUNT !== this.state) {
+            if (!this.isPrefetch && !this.isUnmounted()) {
                 getRootContainer(this.container).mount(this);
+                // Abandonment plan
+                // if (this.isHidden()) {
+                //   getRootContainer(this.container!).unmount()
+                // } else if (!this.isUnmounted()) {
+                //   getRootContainer(this.container!).mount(this)
+                // }
             }
             else if (this.isPrerender) {
                 /**
@@ -6613,7 +6781,7 @@ class CreateApp {
      */
     onLoadError(e) {
         this.loadSourceLevel = -1;
-        if (appStates.UNMOUNT !== this.state) {
+        if (!this.isUnmounted()) {
             this.onerror(e);
             this.setAppState(appStates.LOAD_FAILED);
         }
@@ -6667,7 +6835,7 @@ class CreateApp {
                  */
                 (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.rebuildEffectSnapshot();
                 // current this.container is <div prerender='true'></div>
-                cloneContainer(this.container, container, false);
+                cloneContainer(container, this.container, false);
                 /**
                  * set this.container to <micro-app></micro-app>
                  * NOTE:
@@ -6698,7 +6866,7 @@ class CreateApp {
                 }
                 this.setAppState(appStates.MOUNTING);
                 // TODO: 将所有cloneContainer中的'as Element'去掉，兼容shadowRoot的场景
-                cloneContainer(this.source.html, this.container, !this.umdMode);
+                cloneContainer(this.container, this.source.html, !this.umdMode);
                 (_e = this.sandBox) === null || _e === void 0 ? void 0 : _e.start({
                     umdMode: this.umdMode,
                     baseroute,
@@ -6778,13 +6946,28 @@ class CreateApp {
      * dispatch mounted event when app run finished
      */
     dispatchMountedEvent() {
-        if (appStates.UNMOUNT !== this.state) {
+        var _a;
+        if (!this.isUnmounted()) {
             this.setAppState(appStates.MOUNTED);
             // call window.onmount of child app
             execMicroAppGlobalHook(this.getMicroAppGlobalHook(microGlobalEvent.ONMOUNT), this.name, microGlobalEvent.ONMOUNT, microApp.getData(this.name, true));
             // dispatch event mounted to parent
             dispatchLifecyclesEvent(this.container, this.name, lifeCycles.MOUNTED);
+            /**
+             * Hidden Keep-alive app during resource loading, render normally to ensure their liveliness (running in the background) characteristics.
+             * Actions:
+             *  1. Record & release all global events after mount
+             */
+            if (this.isHidden()) {
+                (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.recordAndReleaseEffect({ keepAlive: true });
+            }
         }
+        /**
+         * TODO: 这里增加一个处理，如果渲染完成时已经卸载，则进行一些操作
+         * 如果是默认模式：删除所有事件和定时器
+         * 如果是umd模式：重新记录和清空事件
+         * 补充：非必需，优先级低
+         */
     }
     /**
      * unmount app
@@ -6853,7 +7036,7 @@ class CreateApp {
     actionsForUnmount({ destroy, clearData, keepRouteState, unmountcb, }) {
         var _a;
         if (this.umdMode && this.container && !destroy) {
-            cloneContainer(this.container, this.source.html, false);
+            cloneContainer(this.source.html, this.container, false);
         }
         /**
          * this.container maybe contains micro-app element, stop sandbox should exec after cloneContainer
@@ -6866,6 +7049,7 @@ class CreateApp {
             keepRouteState: keepRouteState && !destroy,
             destroy,
             clearData: clearData || destroy,
+            useMemoryRouter: this.useMemoryRouter,
         });
         // dispatch unmount event to base app
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.UNMOUNT);
@@ -6909,7 +7093,6 @@ class CreateApp {
             // called after lifeCyclesEvent
             (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.removeRouteInfoForKeepAliveApp();
         }
-        this.container = cloneContainer(this.container, pureCreateElement('div'), false);
         (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.recordAndReleaseEffect({ keepAlive: true });
         callback === null || callback === void 0 ? void 0 : callback();
     }
@@ -6924,7 +7107,13 @@ class CreateApp {
         // dispatch beforeShow event to base app
         dispatchLifecyclesEvent(container, this.name, lifeCycles.BEFORESHOW);
         this.setKeepAliveState(keepAliveStates.KEEP_ALIVE_SHOW);
-        this.container = cloneContainer(this.container, container, false);
+        this.container = cloneContainer(container, this.container, false);
+        /**
+         * TODO:
+         * 1. iframe沙箱在关闭虚拟路由系统时，重新展示时不更新浏览器地址，这样和with沙箱保持一致。
+         *    但是iframe是可以做到重新展示时更新浏览器地址的，这里临时不支持，等待后续with沙箱也支持的时候再优化
+         *    只需要去除 if (this.useMemoryRouter) 的判断即可
+         */
         if (this.useMemoryRouter) {
             // called before lifeCyclesEvent
             (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.setRouteInfoForKeepAliveApp();
@@ -6975,10 +7164,18 @@ class CreateApp {
     getKeepAliveState() {
         return this.keepAliveState;
     }
+    // is app unmounted
+    isUnmounted() {
+        return appStates.UNMOUNT === this.state;
+    }
+    // is app already hidden
+    isHidden() {
+        return keepAliveStates.KEEP_ALIVE_HIDDEN === this.keepAliveState;
+    }
     // get umd library, if it not exist, return empty object
     getUmdLibraryHooks() {
         // after execScripts, the app maybe unmounted
-        if (appStates.UNMOUNT !== this.state && this.sandBox) {
+        if (!this.isUnmounted() && this.sandBox) {
             const libraryName = getRootContainer(this.container).getAttribute('library') || `micro-app-${this.name}`;
             const proxyWindow = this.sandBox.proxyWindow;
             // compatible with pre versions
@@ -7041,16 +7238,14 @@ function defineElement(tagName) {
                      * If oldApp exist & appName is different, determine whether oldApp is running
                      */
                     if (formatAttrName !== this.appName && oldApp) {
-                        if (oldApp.getAppState() !== appStates.UNMOUNT &&
-                            oldApp.getKeepAliveState() !== keepAliveStates.KEEP_ALIVE_HIDDEN &&
-                            !oldApp.isPrefetch) {
+                        if (!oldApp.isUnmounted() && !oldApp.isHidden() && !oldApp.isPrefetch) {
                             this.setAttribute('name', this.appName);
                             return logError(`app name conflict, an app named ${formatAttrName} is running`);
                         }
                     }
                     if (formatAttrName !== this.appName || formatAttrUrl !== this.appUrl) {
                         if (formatAttrName === this.appName) {
-                            this.handleUnmount(true, () => {
+                            this.unmount(true, () => {
                                 this.actionsForAttributeChange(formatAttrName, formatAttrUrl, oldApp);
                             });
                         }
@@ -7059,7 +7254,7 @@ function defineElement(tagName) {
                             this.actionsForAttributeChange(formatAttrName, formatAttrUrl, oldApp);
                         }
                         else {
-                            this.handleUnmount(this.getDestroyCompatibleResult(), () => {
+                            this.unmount(false, () => {
                                 this.actionsForAttributeChange(formatAttrName, formatAttrUrl, oldApp);
                             });
                         }
@@ -7131,15 +7326,13 @@ function defineElement(tagName) {
          */
         handleDisconnected(destroy = false, callback) {
             const app = appInstanceMap.get(this.appName);
-            if (app &&
-                app.getAppState() !== appStates.UNMOUNT &&
-                app.getKeepAliveState() !== keepAliveStates.KEEP_ALIVE_HIDDEN) {
+            if (app && !app.isUnmounted() && !app.isHidden()) {
                 // keep-alive
                 if (this.getKeepAliveModeResult() && !destroy) {
                     this.handleHiddenKeepAliveApp(callback);
                 }
                 else {
-                    this.handleUnmount(destroy || this.getDestroyCompatibleResult(), callback);
+                    this.unmount(destroy, callback);
                 }
             }
         }
@@ -7199,16 +7392,16 @@ function defineElement(tagName) {
                  * 2. 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
                  * 3. When scopecss, useSandbox of prefetch app different from target app, delete prefetch app and create new one
                  */
-                if (oldApp.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN &&
+                if (oldApp.isHidden() &&
                     oldApp.url === this.appUrl) {
                     this.handleShowKeepAliveApp(oldApp);
                 }
-                else if (oldAppUrl === targetUrl && (oldApp.getAppState() === appStates.UNMOUNT ||
+                else if (oldAppUrl === targetUrl && (oldApp.isUnmounted() ||
                     (oldApp.isPrefetch &&
                         this.sameCoreOptions(oldApp)))) {
-                    this.handleAppMount(oldApp);
+                    this.handleMount(oldApp);
                 }
-                else if (oldApp.isPrefetch || oldApp.getAppState() === appStates.UNMOUNT) {
+                else if (oldApp.isPrefetch || oldApp.isUnmounted()) {
                     if ((process.env.NODE_ENV !== 'production') && this.sameCoreOptions(oldApp)) {
                         /**
                          * url is different & old app is unmounted or prefetch, create new app to replace old one
@@ -7247,7 +7440,7 @@ function defineElement(tagName) {
              * scene5: if oldApp is KEEP_ALIVE_HIDDEN, name must different
              */
             if (oldApp) {
-                if (oldApp.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN) {
+                if (oldApp.isHidden()) {
                     if (oldApp.url === this.appUrl) {
                         this.handleShowKeepAliveApp(oldApp);
                     }
@@ -7262,7 +7455,7 @@ function defineElement(tagName) {
                      * 推荐：if (
                      *  oldApp.url === this.appUrl &&
                      *  oldApp.ssrUrl === this.ssrUrl && (
-                     *    oldApp.getAppState() === appStates.UNMOUNT ||
+                     *    oldApp.isUnmounted() ||
                      *    (oldApp.isPrefetch && this.sameCoreOptions(oldApp))
                      *  )
                      * )
@@ -7270,7 +7463,7 @@ function defineElement(tagName) {
                 }
                 else if (oldApp.url === this.appUrl && oldApp.ssrUrl === this.ssrUrl) {
                     // mount app
-                    this.handleAppMount(oldApp);
+                    this.handleMount(oldApp);
                 }
                 else {
                     this.handleCreateApp();
@@ -7317,7 +7510,7 @@ function defineElement(tagName) {
             const oldApp = appInstanceMap.get(this.appName);
             if (oldApp) {
                 if (oldApp.isPrerender) {
-                    this.handleUnmount(true, createAppInstance);
+                    this.unmount(true, createAppInstance);
                 }
                 else {
                     oldApp.actionsForCompletelyDestroy();
@@ -7335,7 +7528,7 @@ function defineElement(tagName) {
          * 2. is remount in another container ?
          * 3. is remount with change properties of the container ?
          */
-        handleAppMount(app) {
+        handleMount(app) {
             app.isPrefetch = false;
             // TODO: Can defer be removed?
             defer(() => this.mount(app));
@@ -7358,13 +7551,13 @@ function defineElement(tagName) {
         /**
          * unmount app
          * @param destroy delete cache resources when unmount
+         * @param unmountcb callback
          */
-        handleUnmount(destroy, unmountcb) {
+        unmount(destroy, unmountcb) {
             const app = appInstanceMap.get(this.appName);
-            if (app &&
-                app.getAppState() !== appStates.UNMOUNT) {
+            if (app && !app.isUnmounted()) {
                 app.unmount({
-                    destroy,
+                    destroy: destroy || this.getDestroyCompatibleResult(),
                     clearData: this.getDisposeResult('clear-data'),
                     keepRouteState: this.getDisposeResult('keep-router-state'),
                     unmountcb,
@@ -7374,9 +7567,7 @@ function defineElement(tagName) {
         // hidden app when disconnectedCallback called with keep-alive
         handleHiddenKeepAliveApp(callback) {
             const app = appInstanceMap.get(this.appName);
-            if (app &&
-                app.getAppState() !== appStates.UNMOUNT &&
-                app.getKeepAliveState() !== keepAliveStates.KEEP_ALIVE_HIDDEN) {
+            if (app && !app.isUnmounted() && !app.isHidden()) {
                 app.hiddenKeepAliveApp(callback);
             }
         }
@@ -7674,10 +7865,10 @@ function fetchGlobalResources(resources, suffix, sourceHandler) {
 function getActiveApps({ excludeHiddenApp = false, excludePreRender = false, } = {}) {
     const activeApps = [];
     appInstanceMap.forEach((app, appName) => {
-        if (appStates.UNMOUNT !== app.getAppState() &&
+        if (!app.isUnmounted() &&
             (!app.isPrefetch || (app.isPrerender && !excludePreRender)) &&
             (!excludeHiddenApp ||
-                keepAliveStates.KEEP_ALIVE_HIDDEN !== app.getKeepAliveState())) {
+                !app.isHidden())) {
             activeApps.push(appName);
         }
     });
@@ -7697,7 +7888,7 @@ function unmountApp(appName, options) {
     const app = appInstanceMap.get(formatAppName(appName));
     return new Promise((resolve) => {
         if (app) {
-            if (app.getAppState() === appStates.UNMOUNT || app.isPrefetch) {
+            if (app.isUnmounted() || app.isPrefetch) {
                 if (app.isPrerender) {
                     app.unmount({
                         destroy: !!(options === null || options === void 0 ? void 0 : options.destroy),
@@ -7712,7 +7903,7 @@ function unmountApp(appName, options) {
                     resolve(true);
                 }
             }
-            else if (app.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN) {
+            else if (app.isHidden()) {
                 if (options === null || options === void 0 ? void 0 : options.destroy) {
                     app.unmount({
                         destroy: true,