@micro-zoe/micro-app 1.0.0-beta.3 → 1.0.0-beta.5

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-beta.3';
+const version = '1.0.0-beta.5';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -1668,21 +1668,33 @@ function runDynamicInlineScript(address, app, scriptInfo) {
  */
 function runCode2InlineScript(address, code, module, scriptElement, attrs, callback) {
     if (module) {
-        // module script is async, transform it to a blob for subsequent operations
+        globalEnv.rawSetAttribute.call(scriptElement, 'type', 'module');
         if (isInlineScript(address)) {
-            const blob = new Blob([code], { type: 'text/javascript' });
-            scriptElement.src = URL.createObjectURL(blob);
+            /**
+             * inline module script cannot convert to blob mode
+             * Issue: https://github.com/micro-zoe/micro-app/issues/805
+             */
+            scriptElement.textContent = code;
         }
         else {
             scriptElement.src = address;
         }
-        globalEnv.rawSetAttribute.call(scriptElement, 'type', 'module');
         if (callback) {
-            callback.moduleCount && callback.moduleCount--;
+            const onloadHandler = () => {
+                callback.moduleCount && callback.moduleCount--;
+                callback(callback.moduleCount === 0);
+            };
             /**
-             * module script will execute onload method only after it insert to document/iframe
+             * NOTE:
+             *  1. module script will execute onload method only after it insert to document/iframe
+             *  2. we can't know when the inline module script onload, and we use defer to simulate, this maybe cause some problems
              */
-            scriptElement.onload = callback.bind(scriptElement, callback.moduleCount === 0);
+            if (isInlineScript(address)) {
+                defer(onloadHandler);
+            }
+            else {
+                scriptElement.onload = onloadHandler;
+            }
         }
     }
     else {
@@ -2354,6 +2366,10 @@ function patchDocument() {
     //   const element = globalEnv.rawCreateTextNode.call(getBindTarget(this), data)
     //   return markElement(element)
     // }
+    rawRootDocument.prototype.createComment = function createComment(data) {
+        const element = globalEnv.rawCreateComment.call(getBindTarget(this), data);
+        return markElement(element);
+    };
     // query element👇
     function querySelector(selectors) {
         var _a, _b;
@@ -2478,8 +2494,6 @@ function rejectMicroAppStyle() {
 }
 
 const globalEnv = {
-    // mark current application as base application
-    __MICRO_APP_BASE_APPLICATION__: true,
     // active sandbox count
     activeSandbox: 0,
 };
@@ -2514,6 +2528,7 @@ function initGlobalEnv() {
         const rawCreateElementNS = rawRootDocument.prototype.createElementNS;
         const rawCreateDocumentFragment = rawRootDocument.prototype.createDocumentFragment;
         const rawCreateTextNode = rawRootDocument.prototype.createTextNode;
+        const rawCreateComment = rawRootDocument.prototype.createComment;
         const rawQuerySelector = rawRootDocument.prototype.querySelector;
         const rawQuerySelectorAll = rawRootDocument.prototype.querySelectorAll;
         const rawGetElementById = rawRootDocument.prototype.getElementById;
@@ -2541,6 +2556,8 @@ function initGlobalEnv() {
         const rawReplaceState = rawWindow.history.replaceState;
         const rawAddEventListener = rawRootEventTarget.prototype.addEventListener;
         const rawRemoveEventListener = rawRootEventTarget.prototype.removeEventListener;
+        // mark current application as base application
+        window.__MICRO_APP_BASE_APPLICATION__ = true;
         assign(globalEnv, {
             supportModuleScript: isSupportModuleScript(),
             // common global vars
@@ -2567,6 +2584,7 @@ function initGlobalEnv() {
             rawCreateElementNS,
             rawCreateDocumentFragment,
             rawCreateTextNode,
+            rawCreateComment,
             rawQuerySelector,
             rawQuerySelectorAll,
             rawGetElementById,
@@ -3705,31 +3723,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
@@ -3767,53 +3795,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,
     };
 }
@@ -3825,18 +3861,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,
@@ -3876,7 +3914,23 @@ function getNoHashMicroPathFromURL(appName, baseUrl) {
  */
 function isEffectiveApp(appName) {
     const app = appInstanceMap.get(appName);
-    return !!(app && !app.isPrefetch && !app.isHidden());
+    /**
+     * !!(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);
 }
 
 /**
@@ -3899,26 +3953,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);
@@ -3926,6 +3961,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
@@ -4088,6 +4152,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
@@ -4103,8 +4169,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);
+        }
     }
 }
 /**
@@ -4149,8 +4217,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)));
             }
         });
@@ -4199,12 +4267,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
@@ -4213,20 +4283,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'}`);
@@ -4286,8 +4384,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)));
         }
     }
@@ -4539,37 +4637,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;
         }
@@ -4661,19 +4762,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 {
@@ -4718,6 +4834,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;
@@ -4736,6 +4853,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
@@ -4767,7 +4893,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
@@ -4790,14 +4918,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));
 }
 
@@ -4941,6 +5069,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);
@@ -4977,16 +5106,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
@@ -5428,7 +5559,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
@@ -5628,6 +5759,7 @@ function patchDocumentPrototype(appName, microAppWindow) {
     const microDocument = microAppWindow.document;
     const rawMicroCreateElement = microRootDocument.prototype.createElement;
     const rawMicroCreateTextNode = microRootDocument.prototype.createTextNode;
+    const rawMicroCreateComment = microRootDocument.prototype.createComment;
     const rawMicroQuerySelector = microRootDocument.prototype.querySelector;
     const rawMicroQuerySelectorAll = microRootDocument.prototype.querySelectorAll;
     const rawMicroGetElementById = microRootDocument.prototype.getElementById;
@@ -5642,6 +5774,10 @@ function patchDocumentPrototype(appName, microAppWindow) {
         const element = rawMicroCreateTextNode.call(this, data);
         return updateElementInfo(element, appName);
     };
+    microRootDocument.prototype.createComment = function createComment(data) {
+        const element = rawMicroCreateComment.call(this, data);
+        return updateElementInfo(element, appName);
+    };
     function getDefaultRawTarget(target) {
         return microDocument !== target ? target : rawDocument;
     }
@@ -6206,12 +6342,29 @@ class IframeSandbox {
         if (this.active)
             return;
         this.active = true;
-        if (useMemoryRouter) {
-            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;
         }
         /**
@@ -6227,15 +6380,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) => {
@@ -6409,6 +6562,7 @@ class IframeSandbox {
     }
     createProxyWindow(microAppWindow) {
         const rawWindow = globalEnv.rawWindow;
+        const customProperties = [];
         return new Proxy(microAppWindow, {
             get: (target, key) => {
                 if (key === 'location') {
@@ -6417,6 +6571,9 @@ class IframeSandbox {
                 if (globalPropertyList.includes(key.toString())) {
                     return this.proxyWindow;
                 }
+                if (customProperties.includes(key)) {
+                    return Reflect.get(target, key);
+                }
                 return bindFunctionToRawTarget(Reflect.get(target, key), target);
             },
             set: (target, key, value) => {
@@ -6428,6 +6585,9 @@ class IframeSandbox {
                 if (key === 'location') {
                     return Reflect.set(rawWindow, key, value);
                 }
+                if (!Reflect.has(target, key)) {
+                    customProperties.push(key);
+                }
                 Reflect.set(target, key, value);
                 if (this.escapeProperties.includes(key)) {
                     !Reflect.has(rawWindow, key) && this.escapeKeys.add(key);
@@ -6478,7 +6638,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
@@ -6605,12 +6765,6 @@ class CreateApp {
             this.source.html = html;
             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) {
                 /**
@@ -6678,8 +6832,7 @@ class CreateApp {
             // mount before prerender exec mount (loading source), set isPrerender to false
             this.isPrerender = false;
             // reset app state to LOADING
-            this.setAppState(appStates.LOADING);
-            return;
+            return this.setAppState(appStates.LOADING);
         }
         this.createSandbox();
         const nextAction = () => {
@@ -6726,7 +6879,6 @@ class CreateApp {
                 this.fiber = fiber;
                 // use in sandbox/effect
                 this.useMemoryRouter = useMemoryRouter;
-                // this.hiddenRouter = hiddenRouter ?? this.hiddenRouter
                 const dispatchBeforeMount = () => dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
                 if (this.isPrerender) {
                     ((_d = this.preRenderEvents) !== null && _d !== void 0 ? _d : (this.preRenderEvents = [])).push(dispatchBeforeMount);
@@ -6832,6 +6984,12 @@ class CreateApp {
                 (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.recordAndReleaseEffect({ keepAlive: true });
             }
         }
+        /**
+         * TODO: 这里增加一个处理，如果渲染完成时已经卸载，则进行一些操作
+         * 如果是默认模式：删除所有事件和定时器
+         * 如果是umd模式：重新记录和清空事件
+         * 补充：非必需，优先级低
+         */
     }
     /**
      * unmount app
@@ -6913,6 +7071,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);
@@ -6956,7 +7115,16 @@ class CreateApp {
             // called after lifeCyclesEvent
             (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.removeRouteInfoForKeepAliveApp();
         }
-        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.recordAndReleaseEffect({ keepAlive: true });
+        /**
+         * Hidden app before the resources are loaded, then unmount the app
+         */
+        if (this.loadSourceLevel !== 2) {
+            getRootContainer(this.container).unmount();
+        }
+        else {
+            this.container = cloneContainer(pureCreateElement('div'), this.container, false);
+            (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.recordAndReleaseEffect({ keepAlive: true });
+        }
         callback === null || callback === void 0 ? void 0 : callback();
     }
     // show app when connectedCallback called with keep-alive
@@ -6971,6 +7139,12 @@ class CreateApp {
         dispatchLifecyclesEvent(container, this.name, lifeCycles.BEFORESHOW);
         this.setKeepAliveState(keepAliveStates.KEEP_ALIVE_SHOW);
         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();