@micro-zoe/micro-app 0.8.6 → 1.0.0-alpha.0

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '0.8.6';
+const version = '1.0.0-alpha.0';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -7,10 +7,24 @@ const globalThis = (typeof global !== 'undefined')
     : ((typeof window !== 'undefined')
         ? window
         : ((typeof self !== 'undefined') ? self : Function('return this')()));
+const noop = () => { };
+const noopFalse = () => false;
+// Array.isArray
+const isArray = Array.isArray;
+// Object.assign
+const assign = Object.assign;
+// Object prototype methods
+const rawDefineProperty = Object.defineProperty;
+const rawDefineProperties = Object.defineProperties;
+const rawHasOwnProperty = Object.prototype.hasOwnProperty;
 // is Undefined
 function isUndefined(target) {
     return target === undefined;
 }
+// is Null
+function isNull(target) {
+    return target === null;
+}
 // is String
 function isString(target) {
     return typeof target === 'string';
@@ -23,8 +37,6 @@ function isBoolean(target) {
 function isFunction(target) {
     return typeof target === 'function';
 }
-// is Array
-const isArray = Array.isArray;
 // is PlainObject
 function isPlainObject(target) {
     return toString.call(target) === '[object Object]';
@@ -41,9 +53,9 @@ function isBoundFunction(target) {
 function isShadowRoot(target) {
     return typeof ShadowRoot !== 'undefined' && target instanceof ShadowRoot;
 }
-const rawDefineProperty = Object.defineProperty;
-const rawDefineProperties = Object.defineProperties;
-const rawHasOwnProperty = Object.prototype.hasOwnProperty;
+function isURL(target) {
+    return target instanceof URL;
+}
 /**
  * format error log
  * @param msg message
@@ -80,6 +92,16 @@ function logWarn(msg, appName = null, ...rest) {
 function defer(fn, ...args) {
     Promise.resolve().then(fn.bind(null, ...args));
 }
+/**
+ * create URL as MicroLocation
+ */
+const createURL = (function () {
+    class Location extends URL {
+    }
+    return (path, base) => {
+        return (base ? new Location('' + path, base) : new Location('' + path));
+    };
+})();
 /**
  * Add address protocol
  * @param url address
@@ -97,7 +119,7 @@ function formatAppURL(url, appName = null) {
     if (!isString(url) || !url)
         return '';
     try {
-        const { origin, pathname, search } = new URL(addProtocol(url));
+        const { origin, pathname, search } = createURL(addProtocol(url));
         // If it ends with .html/.node/.php/.net/.etc, don’t need to add /
         if (/\.(\w+)$/.test(pathname)) {
             return `${origin}${pathname}${search}`;
@@ -118,6 +140,7 @@ function formatAppURL(url, appName = null) {
  * 3. event_center -> EventCenterForBaseApp -> all methods
  * 4. preFetch
  * 5. plugins
+ * 6. router api (push, replace)
  */
 function formatAppName(name) {
     if (!isString(name) || !name)
@@ -129,7 +152,7 @@ function formatAppName(name) {
  * @param url app.url
  */
 function getEffectivePath(url) {
-    const { origin, pathname } = new URL(url);
+    const { origin, pathname } = createURL(url);
     if (/\.(\w+)$/.test(pathname)) {
         const fullPath = `${origin}${pathname}`;
         const pathArr = fullPath.split('/');
@@ -148,7 +171,7 @@ function CompletionPath(path, baseURI) {
         /^((((ht|f)tps?)|file):)?\/\//.test(path) ||
         /^(data|blob):/.test(path))
         return path;
-    return new URL(path, getEffectivePath(addProtocol(baseURI))).toString();
+    return createURL(path, getEffectivePath(addProtocol(baseURI))).toString();
 }
 /**
  * Get the folder where the link resource is located,
@@ -306,6 +329,98 @@ function trim(str) {
 function isFireFox() {
     return navigator.userAgent.indexOf('Firefox') > -1;
 }
+/**
+ * Transforms a queryString into object.
+ * @param search - search string to parse
+ * @returns a query object
+ */
+function parseQuery(search) {
+    const result = {};
+    const queryList = search.split('&');
+    // we will not decode the key/value to ensure that the values are consistent when update URL
+    for (const queryItem of queryList) {
+        const eqPos = queryItem.indexOf('=');
+        const key = eqPos < 0 ? queryItem : queryItem.slice(0, eqPos);
+        const value = eqPos < 0 ? null : queryItem.slice(eqPos + 1);
+        if (key in result) {
+            let currentValue = result[key];
+            if (!isArray(currentValue)) {
+                currentValue = result[key] = [currentValue];
+            }
+            currentValue.push(value);
+        }
+        else {
+            result[key] = value;
+        }
+    }
+    return result;
+}
+/**
+ * Transforms an object to query string
+ * @param queryObject - query object to stringify
+ * @returns query string without the leading `?`
+ */
+function stringifyQuery(queryObject) {
+    let result = '';
+    for (const key in queryObject) {
+        const value = queryObject[key];
+        if (isNull(value)) {
+            result += (result.length ? '&' : '') + key;
+        }
+        else {
+            const valueList = isArray(value) ? value : [value];
+            valueList.forEach(value => {
+                if (!isUndefined(value)) {
+                    result += (result.length ? '&' : '') + key;
+                    if (!isNull(value))
+                        result += '=' + value;
+                }
+            });
+        }
+    }
+    return result;
+}
+/**
+ * Register or unregister callback/guard with Set
+ */
+function useSetRecord() {
+    const handlers = new Set();
+    function add(handler) {
+        handlers.add(handler);
+        return () => {
+            if (handlers.has(handler))
+                return handlers.delete(handler);
+            return false;
+        };
+    }
+    return {
+        add,
+        list: () => handlers,
+    };
+}
+/**
+ * record data with Map
+ */
+function useMapRecord() {
+    const data = new Map();
+    function add(key, value) {
+        data.set(key, value);
+        return () => {
+            if (data.has(key))
+                return data.delete(key);
+            return false;
+        };
+    }
+    return {
+        add,
+        get: (key) => data.get(key),
+        delete: (key) => {
+            if (data.has(key))
+                return data.delete(key);
+            return false;
+        }
+    };
+}
 
 var ObservedAttrName;
 (function (ObservedAttrName) {
@@ -315,13 +430,13 @@ var ObservedAttrName;
 // app status
 var appStates;
 (function (appStates) {
-    appStates["NOT_LOADED"] = "NOT_LOADED";
-    appStates["LOADING_SOURCE_CODE"] = "LOADING_SOURCE_CODE";
-    appStates["LOAD_SOURCE_FINISHED"] = "LOAD_SOURCE_FINISHED";
-    appStates["LOAD_SOURCE_ERROR"] = "LOAD_SOURCE_ERROR";
-    appStates["MOUNTING"] = "MOUNTING";
-    appStates["MOUNTED"] = "MOUNTED";
-    appStates["UNMOUNT"] = "UNMOUNT";
+    appStates["CREATED"] = "created";
+    appStates["LOADING"] = "loading";
+    appStates["LOADED"] = "loaded";
+    appStates["LOAD_FAILED"] = "load_failed";
+    appStates["MOUNTING"] = "mounting";
+    appStates["MOUNTED"] = "mounted";
+    appStates["UNMOUNT"] = "unmount";
 })(appStates || (appStates = {}));
 // lifecycles
 var lifeCycles;
@@ -339,16 +454,16 @@ var lifeCycles;
 // keep-alive status
 var keepAliveStates;
 (function (keepAliveStates) {
-    keepAliveStates["KEEP_ALIVE_SHOW"] = "KEEP_ALIVE_SHOW";
-    keepAliveStates["KEEP_ALIVE_HIDDEN"] = "KEEP_ALIVE_HIDDEN";
+    keepAliveStates["KEEP_ALIVE_SHOW"] = "keep_alive_show";
+    keepAliveStates["KEEP_ALIVE_HIDDEN"] = "keep_alive_hidden";
 })(keepAliveStates || (keepAliveStates = {}));
-const globalKeyToBeCached = 'window,self,globalThis,Array,Object,String,Boolean,Math,Number,Symbol,Date,Promise,Function,Proxy,WeakMap,WeakSet,Set,Map,Reflect,Element,Node,Document,RegExp,Error,TypeError,JSON,isNaN,parseFloat,parseInt,performance,console,decodeURI,encodeURI,decodeURIComponent,encodeURIComponent,location,navigator,undefined';
+const globalKeyToBeCached = 'window,self,globalThis,Array,Object,String,Boolean,Math,Number,Symbol,Date,Promise,Function,Proxy,WeakMap,WeakSet,Set,Map,Reflect,Element,Node,Document,RegExp,Error,TypeError,JSON,isNaN,parseFloat,parseInt,performance,console,decodeURI,encodeURI,decodeURIComponent,encodeURIComponent,navigator,undefined,location,history,EventSource,fetch,XMLHttpRequest';
 
 /**
  * fetch source of html, js, css
  * @param url source path
  * @param appName app name
- * @param config config of fetch
+ * @param config fetch options
  */
 function fetchSource(url, appName = null, options = {}) {
     if (isFunction(microApp.fetch)) {
@@ -359,66 +474,6 @@ function fetchSource(url, appName = null, options = {}) {
     });
 }
 
-class HTMLLoader {
-    static getInstance() {
-        if (!this.instance) {
-            this.instance = new HTMLLoader();
-        }
-        return this.instance;
-    }
-    /**
-     * run logic of load and format html
-     * @param successCb success callback
-     * @param errorCb error callback, type: (err: Error, meetFetchErr: boolean) => void
-     */
-    run(app, successCb) {
-        const appName = app.name;
-        const htmlUrl = app.ssrUrl || app.url;
-        fetchSource(htmlUrl, appName, { cache: 'no-cache' }).then((htmlStr) => {
-            if (!htmlStr) {
-                const msg = 'html is empty, please check in detail';
-                app.onerror(new Error(msg));
-                return logError(msg, appName);
-            }
-            htmlStr = this.formatHTML(htmlUrl, htmlStr, appName);
-            successCb(htmlStr, app);
-        }).catch((e) => {
-            logError(`Failed to fetch data from ${app.url}, micro-app stop rendering`, appName, e);
-            app.onLoadError(e);
-        });
-    }
-    formatHTML(htmlUrl, htmlStr, appName) {
-        return this.processHtml(htmlUrl, htmlStr, appName, microApp.plugins)
-            .replace(/<head[^>]*>[\s\S]*?<\/head>/i, (match) => {
-            return match
-                .replace(/<head/i, '<micro-app-head')
-                .replace(/<\/head>/i, '</micro-app-head>');
-        })
-            .replace(/<body[^>]*>[\s\S]*?<\/body>/i, (match) => {
-            return match
-                .replace(/<body/i, '<micro-app-body')
-                .replace(/<\/body>/i, '</micro-app-body>');
-        });
-    }
-    processHtml(url, code, appName, plugins) {
-        var _a;
-        if (!plugins)
-            return code;
-        const mergedPlugins = [];
-        plugins.global && mergedPlugins.push(...plugins.global);
-        ((_a = plugins.modules) === null || _a === void 0 ? void 0 : _a[appName]) && mergedPlugins.push(...plugins.modules[appName]);
-        if (mergedPlugins.length > 0) {
-            return mergedPlugins.reduce((preCode, plugin) => {
-                if (isPlainObject(plugin) && isFunction(plugin.processHtml)) {
-                    return plugin.processHtml(preCode, url, plugin.options);
-                }
-                return preCode;
-            }, code);
-        }
-        return code;
-    }
-}
-
 // common reg
 const rootSelectorREG = /(^|\s+)(html|:root)(?=[\s>~[.#:]+|$)/;
 const bodySelectorREG = /(^|\s+)((html[\s>~]+body)|body)(?=[\s>~[.#:]+|$)/;
@@ -981,12 +1036,12 @@ function handleNewNode(parent, child, app) {
         return child;
     }
     else if (child instanceof HTMLLinkElement) {
-        if (child.hasAttribute('exclude') || checkExcludeUrl(child.getAttribute('href'), app.name)) {
+        if (child.hasAttribute('exclude')) {
             const linkReplaceComment = document.createComment('link element with exclude attribute ignored by micro-app');
             dynamicElementInMicroAppMap.set(child, linkReplaceComment);
             return linkReplaceComment;
         }
-        else if (child.hasAttribute('ignore') || checkIgnoreUrl(child.getAttribute('href'), app.name)) {
+        else if (child.hasAttribute('ignore')) {
             return child;
         }
         const { url, info, replaceComment } = extractLinkFromHtml(child, parent, app, true);
@@ -1034,39 +1089,31 @@ function handleNewNode(parent, child, app) {
  * @param passiveChild second param of insertBefore and replaceChild
  */
 function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild) {
-    const container = getContainer(parent, app);
+    const hijackElement = getHijackElement(parent, app);
     /**
      * If passiveChild is not the child node, insertBefore replaceChild will have a problem, at this time, it will be degraded to appendChild
      * E.g: document.head.insertBefore(targetChild, document.head.childNodes[0])
      */
-    if (container) {
+    if (hijackElement) {
         /**
          * 1. If passiveChild exists, it must be insertBefore or replaceChild
          * 2. When removeChild, targetChild may not be in microAppHead or head
          */
-        if (passiveChild && !container.contains(passiveChild)) {
-            return globalEnv.rawAppendChild.call(container, targetChild);
+        if (passiveChild && !hijackElement.contains(passiveChild)) {
+            return globalEnv.rawAppendChild.call(hijackElement, targetChild);
         }
-        else if (rawMethod === globalEnv.rawRemoveChild && !container.contains(targetChild)) {
+        else if (rawMethod === globalEnv.rawRemoveChild && !hijackElement.contains(targetChild)) {
             if (parent.contains(targetChild)) {
                 return rawMethod.call(parent, targetChild);
             }
             return targetChild;
         }
-        return invokeRawMethod(rawMethod, container, targetChild, passiveChild);
+        return invokeRawMethod(rawMethod, hijackElement, targetChild, passiveChild);
     }
     return invokeRawMethod(rawMethod, parent, targetChild, passiveChild);
 }
-function invokeRawMethod(rawMethod, parent, targetChild, passiveChild) {
-    if (isPendMethod(rawMethod)) {
-        return rawMethod.call(parent, targetChild);
-    }
-    return rawMethod.call(parent, targetChild, passiveChild);
-}
-function isPendMethod(method) {
-    return method === globalEnv.rawAppend || method === globalEnv.rawPrepend;
-}
-function getContainer(node, app) {
+// head/body map to micro-app-head/micro-app-body
+function getHijackElement(node, app) {
     var _a, _b;
     if (node === document.head) {
         return (_a = app === null || app === void 0 ? void 0 : app.container) === null || _a === void 0 ? void 0 : _a.querySelector('micro-app-head');
@@ -1076,6 +1123,15 @@ function getContainer(node, app) {
     }
     return null;
 }
+function invokeRawMethod(rawMethod, parent, targetChild, passiveChild) {
+    if (isPendMethod(rawMethod)) {
+        return rawMethod.call(parent, targetChild);
+    }
+    return rawMethod.call(parent, targetChild, passiveChild);
+}
+function isPendMethod(method) {
+    return method === globalEnv.rawAppend || method === globalEnv.rawPrepend;
+}
 // Get the map element
 function getMappingNode(node) {
     var _a;
@@ -1163,27 +1219,6 @@ function patchElementPrototypeMethods() {
         this.__MICRO_APP_NAME__ && (clonedNode.__MICRO_APP_NAME__ = this.__MICRO_APP_NAME__);
         return clonedNode;
     };
-    // patch getBoundingClientRect
-    // TODO: scenes test
-    // Element.prototype.getBoundingClientRect = function getBoundingClientRect () {
-    //   const rawRect: DOMRect = globalEnv.rawGetBoundingClientRect.call(this)
-    //   if (this.__MICRO_APP_NAME__) {
-    //     const app = appInstanceMap.get(this.__MICRO_APP_NAME__)
-    //     if (!app?.container) {
-    //       return rawRect
-    //     }
-    //     const appBody = app.container.querySelector('micro-app-body')
-    //     const appBodyRect: DOMRect = globalEnv.rawGetBoundingClientRect.call(appBody)
-    //     const computedRect: DOMRect = new DOMRect(
-    //       rawRect.x - appBodyRect.x,
-    //       rawRect.y - appBodyRect.y,
-    //       rawRect.width,
-    //       rawRect.height,
-    //     )
-    //     return computedRect
-    //   }
-    //   return rawRect
-    // }
 }
 /**
  * Mark the newly created element in the micro application
@@ -1213,27 +1248,29 @@ function patchDocument() {
     };
     // query element👇
     function querySelector(selectors) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const appName = getCurrentAppName();
         if (!appName ||
+            !((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container) ||
             !selectors ||
             isUniqueElement(selectors) ||
             // see https://github.com/micro-zoe/micro-app/issues/56
             rawDocument !== this) {
             return globalEnv.rawQuerySelector.call(this, selectors);
         }
-        return (_c = (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container) === null || _b === void 0 ? void 0 : _b.querySelector(selectors)) !== null && _c !== void 0 ? _c : null;
+        return (_d = (_c = (_b = appInstanceMap.get(appName)) === null || _b === void 0 ? void 0 : _b.container) === null || _c === void 0 ? void 0 : _c.querySelector(selectors)) !== null && _d !== void 0 ? _d : null;
     }
     function querySelectorAll(selectors) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         const appName = getCurrentAppName();
         if (!appName ||
+            !((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container) ||
             !selectors ||
             isUniqueElement(selectors) ||
             rawDocument !== this) {
             return globalEnv.rawQuerySelectorAll.call(this, selectors);
         }
-        return (_c = (_b = (_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container) === null || _b === void 0 ? void 0 : _b.querySelectorAll(selectors)) !== null && _c !== void 0 ? _c : [];
+        return (_d = (_c = (_b = appInstanceMap.get(appName)) === null || _b === void 0 ? void 0 : _b.container) === null || _c === void 0 ? void 0 : _c.querySelectorAll(selectors)) !== null && _d !== void 0 ? _d : [];
     }
     Document.prototype.querySelector = querySelector;
     Document.prototype.querySelectorAll = querySelectorAll;
@@ -1301,10 +1338,9 @@ function patchSetAttribute() {
         if (/^micro-app(-\S+)?/i.test(this.tagName) && key === 'data') {
             if (isPlainObject(value)) {
                 const cloneValue = {};
-                Object.getOwnPropertyNames(value).forEach((propertyKey) => {
-                    if (!(isString(propertyKey) && propertyKey.indexOf('__') === 0)) {
-                        // @ts-ignore
-                        cloneValue[propertyKey] = value[propertyKey];
+                Object.getOwnPropertyNames(value).forEach((key) => {
+                    if (!(isString(key) && key.indexOf('__') === 0)) {
+                        cloneValue[key] = value[key];
                     }
                 });
                 this.data = cloneValue;
@@ -1351,7 +1387,6 @@ function releasePatches() {
     Element.prototype.append = globalEnv.rawAppend;
     Element.prototype.prepend = globalEnv.rawPrepend;
     Element.prototype.cloneNode = globalEnv.rawCloneNode;
-    // Element.prototype.getBoundingClientRect = globalEnv.rawGetBoundingClientRect
 }
 // Set the style of micro-app-head and micro-app-body
 let hasRejectMicroAppStyle = false;
@@ -1365,53 +1400,6 @@ function rejectMicroAppStyle() {
     }
 }
 
-// 管理 app 的单例
-class AppManager {
-    constructor() {
-        // Todo: appInstanceMap 由 AppManager 来创建，不再由 create_app 管理
-        this.appInstanceMap = appInstanceMap;
-    }
-    static getInstance() {
-        if (!this.instance) {
-            this.instance = new AppManager();
-        }
-        return this.instance;
-    }
-    get(appName) {
-        return this.appInstanceMap.get(appName);
-    }
-    set(appName, app) {
-        this.appInstanceMap.set(appName, app);
-    }
-    getAll() {
-        return Array.from(this.appInstanceMap.values());
-    }
-    clear() {
-        this.appInstanceMap.clear();
-    }
-}
-
-function unmountNestedApp() {
-    releaseUnmountOfNestedApp();
-    AppManager.getInstance().getAll().forEach(app => {
-        // @ts-ignore
-        app.container && getRootContainer(app.container).disconnectedCallback();
-    });
-    !window.__MICRO_APP_UMD_MODE__ && AppManager.getInstance().clear();
-}
-// if micro-app run in micro application, delete all next generation application when unmount event received
-function listenUmountOfNestedApp() {
-    if (window.__MICRO_APP_ENVIRONMENT__) {
-        window.addEventListener('unmount', unmountNestedApp, false);
-    }
-}
-// release listener
-function releaseUnmountOfNestedApp() {
-    if (window.__MICRO_APP_ENVIRONMENT__) {
-        window.removeEventListener('unmount', unmountNestedApp, false);
-    }
-}
-
 const globalEnv = {};
 /**
  * Note loop nesting
@@ -1431,7 +1419,6 @@ function initGlobalEnv() {
         const rawAppend = Element.prototype.append;
         const rawPrepend = Element.prototype.prepend;
         const rawCloneNode = Element.prototype.cloneNode;
-        // const rawGetBoundingClientRect = Element.prototype.getBoundingClientRect
         const rawCreateElement = Document.prototype.createElement;
         const rawCreateElementNS = Document.prototype.createElementNS;
         const rawCreateDocumentFragment = Document.prototype.createDocumentFragment;
@@ -1465,7 +1452,7 @@ function initGlobalEnv() {
         const rawDocumentRemoveEventListener = rawDocument.removeEventListener;
         // mark current application as base application
         window.__MICRO_APP_BASE_APPLICATION__ = true;
-        Object.assign(globalEnv, {
+        assign(globalEnv, {
             // source/patch
             rawSetAttribute,
             rawAppendChild,
@@ -1475,7 +1462,6 @@ function initGlobalEnv() {
             rawAppend,
             rawPrepend,
             rawCloneNode,
-            // rawGetBoundingClientRect,
             rawCreateElement,
             rawCreateElementNS,
             rawCreateDocumentFragment,
@@ -1502,8 +1488,6 @@ function initGlobalEnv() {
         });
         // global effect
         rejectMicroAppStyle();
-        releaseUnmountOfNestedApp();
-        listenUmountOfNestedApp();
     }
 }
 
@@ -1519,14 +1503,11 @@ const globalScripts = new Map();
 function extractScriptElement(script, parent, app, isDynamic = false) {
     let replaceComment = null;
     let src = script.getAttribute('src');
-    if (src) {
-        src = CompletionPath(src, app.url);
-    }
-    if (script.hasAttribute('exclude') || checkExcludeUrl(src, app.name)) {
+    if (script.hasAttribute('exclude')) {
         replaceComment = document.createComment('script element with exclude attribute removed by micro-app');
     }
     else if ((script.type && !['text/javascript', 'text/ecmascript', 'application/javascript', 'application/ecmascript', 'module'].includes(script.type)) ||
-        script.hasAttribute('ignore') || checkIgnoreUrl(src, app.name)) {
+        script.hasAttribute('ignore')) {
         return null;
     }
     else if ((globalEnv.supportModuleScript && script.noModule) ||
@@ -1534,6 +1515,7 @@ function extractScriptElement(script, parent, app, isDynamic = false) {
         replaceComment = document.createComment(`${script.noModule ? 'noModule' : 'module'} script ignored by micro-app`);
     }
     else if (src) { // remote script
+        src = CompletionPath(src, app.url);
         const info = {
             code: '',
             isExternal: true,
@@ -1583,46 +1565,6 @@ function extractScriptElement(script, parent, app, isDynamic = false) {
         return parent.replaceChild(replaceComment, script);
     }
 }
-/**
- * get assets plugins
- * @param appName app name
- */
-function getAssetsPlugins(appName) {
-    var _a, _b, _c;
-    const globalPlugins = ((_a = microApp.plugins) === null || _a === void 0 ? void 0 : _a.global) || [];
-    const modulePlugins = ((_c = (_b = microApp.plugins) === null || _b === void 0 ? void 0 : _b.modules) === null || _c === void 0 ? void 0 : _c[appName]) || [];
-    return [...globalPlugins, ...modulePlugins];
-}
-/**
- * whether the url needs to be excluded
- * @param url css or js link
- * @param plugins microApp plugins
- */
-function checkExcludeUrl(url, appName) {
-    if (!url)
-        return false;
-    const plugins = getAssetsPlugins(appName) || [];
-    return plugins.some(plugin => {
-        if (!plugin.excludeChecker)
-            return false;
-        return plugin.excludeChecker(url);
-    });
-}
-/**
- * whether the url needs to be ignore
- * @param url css or js link
- * @param plugins microApp plugins
- */
-function checkIgnoreUrl(url, appName) {
-    if (!url)
-        return false;
-    const plugins = getAssetsPlugins(appName) || [];
-    return plugins.some(plugin => {
-        if (!plugin.ignoreChecker)
-            return false;
-        return plugin.ignoreChecker(url);
-    });
-}
 /**
  *  Get remote resources of script
  * @param wrapElement htmlDom
@@ -1899,10 +1841,10 @@ function flatChildren(parent, app, microAppHead) {
     });
     for (const dom of children) {
         if (dom instanceof HTMLLinkElement) {
-            if (dom.hasAttribute('exclude') || checkExcludeUrl(dom.getAttribute('href'), app.name)) {
+            if (dom.hasAttribute('exclude')) {
                 parent.replaceChild(document.createComment('link element with exclude attribute ignored by micro-app'), dom);
             }
-            else if (!(dom.hasAttribute('ignore') || checkIgnoreUrl(dom.getAttribute('href'), app.name))) {
+            else if (!dom.hasAttribute('ignore')) {
                 extractLinkFromHtml(dom, parent, app);
             }
             else if (dom.hasAttribute('href')) {
@@ -1956,6 +1898,34 @@ function extractSourceDom(htmlStr, app) {
         app.onLoad(wrapElement);
     }
 }
+/**
+ * Get and format html
+ * @param app app
+ */
+function extractHtml(app) {
+    fetchSource(app.ssrUrl || app.url, app.name, { cache: 'no-cache' }).then((htmlStr) => {
+        if (!htmlStr) {
+            const msg = 'html is empty, please check in detail';
+            app.onerror(new Error(msg));
+            return logError(msg, app.name);
+        }
+        htmlStr = htmlStr
+            .replace(/<head[^>]*>[\s\S]*?<\/head>/i, (match) => {
+            return match
+                .replace(/<head/i, '<micro-app-head')
+                .replace(/<\/head>/i, '</micro-app-head>');
+        })
+            .replace(/<body[^>]*>[\s\S]*?<\/body>/i, (match) => {
+            return match
+                .replace(/<body/i, '<micro-app-body')
+                .replace(/<\/body>/i, '</micro-app-body>');
+        });
+        extractSourceDom(htmlStr, app);
+    }).catch((e) => {
+        logError(`Failed to fetch data from ${app.url}, micro-app stop rendering`, app.name, e);
+        app.onLoadError(e);
+    });
+}
 
 class EventCenter {
     constructor() {
@@ -2238,6 +2208,28 @@ function rebuildDataCenterSnapshot(microAppEventCenter) {
     }
 }
 
+function unmountNestedApp() {
+    appInstanceMap.forEach(app => {
+        // @ts-ignore
+        app.container && getRootContainer(app.container).disconnectedCallback();
+    });
+    !window.__MICRO_APP_UMD_MODE__ && appInstanceMap.clear();
+}
+// release listener
+function releaseUnmountOfNestedApp() {
+    if (window.__MICRO_APP_ENVIRONMENT__) {
+        window.removeEventListener('unmount', unmountNestedApp, false);
+    }
+}
+// if micro-app run in micro application, delete all next generation application when unmount event received
+// unmount event will auto release by sandbox
+function listenUmountOfNestedApp() {
+    if (window.__MICRO_APP_ENVIRONMENT__) {
+        releaseUnmountOfNestedApp();
+        window.addEventListener('unmount', unmountNestedApp, false);
+    }
+}
+
 /* eslint-disable no-return-assign */
 function isBoundedFunction(value) {
     if (isBoolean(value.__MICRO_APP_IS_BOUND_FUNCTION__))
@@ -2277,6 +2269,21 @@ function bindFunctionToRawWindow(rawWindow, value) {
     return value;
 }
 
+// this events should be sent to the specified app
+const formatEventList = ['unmount', 'appstate-change'];
+/**
+ * Format event name
+ * @param eventName event name
+ * @param appName app name
+ */
+function formatEventName$1(eventName, appName) {
+    var _a;
+    if (formatEventList.includes(eventName) ||
+        ((eventName === 'popstate' || eventName === 'hashchange') && ((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.useMemoryRouter))) {
+        return `${eventName}-${appName}`;
+    }
+    return eventName;
+}
 // document.onclick binding list, the binding function of each application is unique
 const documentClickListMap = new Map();
 let hasRewriteDocumentOnClick = false;
@@ -2370,19 +2377,6 @@ function releaseEffectDocumentEvent() {
     document.addEventListener = globalEnv.rawDocumentAddEventListener;
     document.removeEventListener = globalEnv.rawDocumentRemoveEventListener;
 }
-// this events should be sent to the specified app
-const formatEventList = ['unmount', 'appstate-change'];
-/**
- * Format event name
- * @param type event name
- * @param microAppWindow micro window
- */
-function formatEventType(type, microAppWindow) {
-    if (formatEventList.includes(type)) {
-        return `${type}-${microAppWindow.__MICRO_APP_NAME__}`;
-    }
-    return type;
-}
 /**
  * Rewrite side-effect events
  * @param microAppWindow micro window
@@ -2395,7 +2389,7 @@ function effect(microAppWindow) {
     const { rawWindow, rawDocument, rawWindowAddEventListener, rawWindowRemoveEventListener, rawSetInterval, rawSetTimeout, rawClearInterval, rawClearTimeout, rawDocumentRemoveEventListener, } = globalEnv;
     // listener may be null, e.g test-passive
     microAppWindow.addEventListener = function (type, listener, options) {
-        type = formatEventType(type, microAppWindow);
+        type = formatEventName$1(type, appName);
         const listenerList = eventListenerMap.get(type);
         if (listenerList) {
             listenerList.add(listener);
@@ -2407,7 +2401,7 @@ function effect(microAppWindow) {
         rawWindowAddEventListener.call(rawWindow, type, listener, options);
     };
     microAppWindow.removeEventListener = function (type, listener, options) {
-        type = formatEventType(type, microAppWindow);
+        type = formatEventName$1(type, appName);
         const listenerList = eventListenerMap.get(type);
         if ((listenerList === null || listenerList === void 0 ? void 0 : listenerList.size) && listenerList.has(listener)) {
             listenerList.delete(listener);
@@ -2534,71 +2528,866 @@ function effect(microAppWindow) {
     };
 }
 
-// Variables that can escape to rawWindow
-const staticEscapeProperties = [
-    'System',
-    '__cjsWrapper',
-];
-// Variables that can only assigned to rawWindow
-const escapeSetterKeyList = [
-    'location',
-];
-const globalPropertyList = ['window', 'self', 'globalThis'];
-class SandBox {
-    constructor(appName, url) {
-        /**
-         * Scoped global Properties(Properties that can only get and set in microAppWindow, will not escape to rawWindow)
-         * https://github.com/micro-zoe/micro-app/issues/234
-         */
-        this.scopeProperties = ['webpackJsonp', 'Vue'];
-        // Properties that can be escape to rawWindow
-        this.escapeProperties = [];
-        // Properties newly added to microAppWindow
-        this.injectedKeys = new Set();
-        // Properties escape to rawWindow, cleared when unmount
-        this.escapeKeys = new Set();
-        // sandbox state
-        this.active = false;
-        this.microAppWindow = {}; // Proxy target
-        // get scopeProperties and escapeProperties from plugins
-        this.getSpecialProperties(appName);
-        // create proxyWindow with Proxy(microAppWindow)
-        this.proxyWindow = this.createProxyWindow(appName);
-        // inject global properties
-        this.initMicroAppWindow(this.microAppWindow, appName, url);
-        // Rewrite global event listener & timeout
-        Object.assign(this, effect(this.microAppWindow));
-    }
-    start(baseRoute) {
-        if (!this.active) {
-            this.active = true;
-            this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseRoute;
-            // BUG FIX: bable-polyfill@6.x
-            globalEnv.rawWindow._babelPolyfill && (globalEnv.rawWindow._babelPolyfill = false);
-            if (++SandBox.activeCount === 1) {
-                effectDocumentEvent();
-                patchElementPrototypeMethods();
-            }
+// set micro app state to origin state
+function setMicroState(appName, rawState, microState) {
+    const additionalState = {
+        microAppState: assign({}, rawState === null || rawState === void 0 ? void 0 : rawState.microAppState, {
+            [appName]: microState
+        })
+    };
+    // create new state object
+    return assign({}, rawState, additionalState);
+}
+// 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;
         }
     }
-    stop() {
-        if (this.active) {
-            this.active = false;
-            this.releaseEffect();
-            this.microAppWindow.microApp.clearDataListener();
-            this.microAppWindow.microApp.clearGlobalDataListener();
-            this.injectedKeys.forEach((key) => {
-                Reflect.deleteProperty(this.microAppWindow, key);
-            });
-            this.injectedKeys.clear();
-            this.escapeKeys.forEach((key) => {
-                Reflect.deleteProperty(globalEnv.rawWindow, key);
-            });
-            this.escapeKeys.clear();
-            if (--SandBox.activeCount === 0) {
+    // 生成新的state对象
+    return assign({}, rawState);
+}
+// get micro app state form origin state
+function getMicroState(appName, state) {
+    var _a;
+    return ((_a = state === null || state === void 0 ? void 0 : state.microAppState) === null || _a === void 0 ? void 0 : _a[appName]) || null;
+}
+const ENC_AD_RE = /&/g; // %M1
+const ENC_EQ_RE = /=/g; // %M2
+const DEC_AD_RE = /%M1/g; // &
+const DEC_EQ_RE = /%M2/g; // =
+function encodeMicroPath(path) {
+    return encodeURIComponent(commonDecode(path).replace(ENC_AD_RE, '%M1').replace(ENC_EQ_RE, '%M2'));
+}
+function decodeMicroPath(path) {
+    return commonDecode(path).replace(DEC_AD_RE, '&').replace(DEC_EQ_RE, '=');
+}
+function commonDecode(path) {
+    try {
+        const decPath = decodeURIComponent(path);
+        if (path === decPath || DEC_AD_RE.test(decPath) || DEC_EQ_RE.test(decPath))
+            return decPath;
+        return commonDecode(decPath);
+    }
+    catch (_a) {
+        return path;
+    }
+}
+// 格式化query参数key，防止与原有参数的冲突
+function formatQueryAppName(appName) {
+    return `app-${appName}`;
+}
+// 根据浏览器url参数，获取当前子应用的path
+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;
+}
+// 将name=encodeUrl地址插入到浏览器url上
+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);
+    let isAttach2Hash = false; // 基座是否是hash模式，这个其实也不准，只是表示参数加到了hash上
+    // hash存在且search不存在，则认为是hash路由
+    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;
+        }
+        else {
+            queryObject.searchQuery = {
+                [formatQueryAppName(appName)]: encodedMicroPath
+            };
+        }
+        search = '?' + stringifyQuery(queryObject.searchQuery);
+    }
+    return {
+        fullPath: pathname + search + hash,
+        isAttach2Hash,
+    };
+}
+// 将name=encodeUrl的参数从浏览器url上删除
+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 : '';
+    }
+    return {
+        fullPath: pathname + search + hash,
+        isAttach2Hash,
+    };
+}
+/**
+ * 根据location获取query对象
+ */
+function getQueryObjectFromURL(search, hash) {
+    const queryObject = {};
+    if (search !== '' && search !== '?') {
+        queryObject.searchQuery = parseQuery(search.slice(1));
+    }
+    if (hash.includes('?')) {
+        queryObject.hashQuery = parseQuery(hash.slice(hash.indexOf('?') + 1));
+    }
+    return queryObject;
+}
+/**
+ * get microApp path from browser URL without hash
+ */
+function getNoHashMicroPathFromURL(appName, baseUrl) {
+    const microPath = getMicroPathFromURL(appName);
+    if (!microPath)
+        return '';
+    const formatLocation = createURL(microPath, baseUrl);
+    return formatLocation.origin + formatLocation.pathname + formatLocation.search;
+}
+
+/**
+ * dispatch PopStateEvent & HashChangeEvent to child app
+ * each child app will listen for popstate event when sandbox start
+ * and release it when sandbox stop
+ * @param appName app name
+ * @returns release callback
+ */
+function addHistoryListener(appName) {
+    const rawWindow = globalEnv.rawWindow;
+    // handle popstate event and distribute to child app
+    const popStateHandler = (e) => {
+        // exclude hidden keep-alive app
+        if (getActiveApps(true).includes(appName) && !e.onlyForBrowser) {
+            const microPath = getMicroPathFromURL(appName);
+            const app = appInstanceMap.get(appName);
+            const proxyWindow = app.sandBox.proxyWindow;
+            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, proxyWindow.location);
+                isHashChange = proxyWindow.location.hash !== oldHash;
+            }
+            // dispatch formatted popStateEvent to child
+            dispatchPopStateEventToMicroApp(appName, proxyWindow, rawWindow.history.state);
+            // dispatch formatted hashChangeEvent to child when hash change
+            if (isHashChange)
+                dispatchHashChangeEventToMicroApp(appName, proxyWindow, oldHref);
+            // clear element scope before trigger event of next app
+            removeDomScope();
+        }
+    };
+    rawWindow.addEventListener('popstate', popStateHandler);
+    return () => {
+        rawWindow.removeEventListener('popstate', popStateHandler);
+    };
+}
+/**
+ * dispatch formatted popstate event to microApp
+ * @param appName app name
+ * @param proxyWindow sandbox window
+ * @param eventState history.state
+ */
+function dispatchPopStateEventToMicroApp(appName, proxyWindow, eventState) {
+    // create PopStateEvent named popstate-appName with sub app state
+    const newPopStateEvent = new PopStateEvent(formatEventName$1('popstate', appName), { state: getMicroState(appName, eventState) });
+    globalEnv.rawWindow.dispatchEvent(newPopStateEvent);
+    // call function window.onpopstate if it exists
+    typeof proxyWindow.onpopstate === 'function' && proxyWindow.onpopstate(newPopStateEvent);
+}
+/**
+ * dispatch formatted hashchange event to microApp
+ * @param appName app name
+ * @param proxyWindow sandbox window
+ * @param oldHref old href
+ */
+function dispatchHashChangeEventToMicroApp(appName, proxyWindow, oldHref) {
+    const newHashChangeEvent = new HashChangeEvent(formatEventName$1('hashchange', appName), {
+        newURL: proxyWindow.location.href,
+        oldURL: oldHref,
+    });
+    globalEnv.rawWindow.dispatchEvent(newHashChangeEvent);
+    // call function window.onhashchange if it exists
+    typeof proxyWindow.onhashchange === 'function' && proxyWindow.onhashchange(newHashChangeEvent);
+}
+/**
+ * dispatch native PopStateEvent, simulate location behavior
+ * @param onlyForBrowser only dispatch PopStateEvent to browser
+ */
+function dispatchNativePopStateEvent(onlyForBrowser) {
+    const event = new PopStateEvent('popstate', { state: null });
+    if (onlyForBrowser)
+        event.onlyForBrowser = true;
+    globalEnv.rawWindow.dispatchEvent(event);
+}
+/**
+ * dispatch hashchange event to browser
+ * @param oldHref old href of rawWindow.location
+ */
+function dispatchNativeHashChangeEvent(oldHref) {
+    const newHashChangeEvent = new HashChangeEvent('hashchange', {
+        newURL: globalEnv.rawWindow.location.href,
+        oldURL: oldHref,
+    });
+    globalEnv.rawWindow.dispatchEvent(newHashChangeEvent);
+}
+/**
+ * dispatch popstate & hashchange event to browser
+ * @param onlyForBrowser only dispatch event to browser
+ * @param oldHref old href of rawWindow.location
+ */
+function dispatchNativeEvent(onlyForBrowser, oldHref) {
+    // clear element scope before dispatch global event
+    removeDomScope();
+    dispatchNativePopStateEvent(onlyForBrowser);
+    if (oldHref) {
+        dispatchNativeHashChangeEvent(oldHref);
+    }
+}
+
+/**
+ * create proxyHistory for microApp
+ * MDN https://developer.mozilla.org/en-US/docs/Web/API/History
+ * @param appName app name
+ * @param microLocation microApp location
+ */
+function createMicroHistory(appName, microLocation) {
+    const rawHistory = globalEnv.rawWindow.history;
+    function getMicroHistoryMethod(methodName) {
+        return function (...rests) {
+            if ((methodName === 'pushState' || methodName === 'replaceState') &&
+                (isString(rests[2]) || isURL(rests[2]))) {
+                const targetLocation = createURL(rests[2], microLocation.href);
+                if (targetLocation.origin === microLocation.origin) {
+                    navigateWithNativeEvent(methodName, setMicroPathToURL(appName, targetLocation), true, setMicroState(appName, rawHistory.state, rests[0]), rests[1]);
+                    const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
+                    if (targetFullPath !== microLocation.fullPath) {
+                        updateMicroLocation(appName, targetFullPath, microLocation);
+                    }
+                }
+                else {
+                    rawHistory[methodName].apply(rawHistory, rests);
+                }
+            }
+            else {
+                rawHistory[methodName].apply(rawHistory, rests);
+            }
+        };
+    }
+    return new Proxy(rawHistory, {
+        get(target, key) {
+            if (key === 'state') {
+                return getMicroState(appName, rawHistory.state);
+            }
+            else if (isFunction(Reflect.get(target, key))) {
+                return getMicroHistoryMethod(key);
+            }
+            return Reflect.get(target, key);
+        },
+        set(target, key, value) {
+            return Reflect.set(target, key, value);
+        }
+    });
+}
+/**
+ * navigate to new path base on native method of history
+ * @param methodName pushState/replaceState
+ * @param fullPath full path
+ * @param state history.state, default is null
+ * @param title history.title, default is ''
+ */
+function nativeHistoryNavigate(methodName, fullPath, state = null, title = '') {
+    globalEnv.rawWindow.history[methodName](state, title, fullPath);
+}
+/**
+ * Navigate to new path, and dispatch native popStateEvent/hashChangeEvent to browser
+ * Use scenes:
+ * 1. mount/unmount through updateBrowserURL with limited popstateEvent
+ * 2. proxyHistory.pushState/replaceState with limited popstateEvent
+ * 3. api microApp.router.push/replace
+ * 4. proxyLocation.hash = xxx
+ * @param methodName pushState/replaceState
+ * @param result result of add/remove microApp path on browser url
+ * @param onlyForBrowser only dispatch event to browser
+ * @param state history.state, not required
+ * @param title history.title, not required
+ */
+function navigateWithNativeEvent(methodName, result, onlyForBrowser, state, title) {
+    const rawLocation = globalEnv.rawWindow.location;
+    const oldFullPath = rawLocation.pathname + rawLocation.search + rawLocation.hash;
+    const oldHref = result.isAttach2Hash && oldFullPath !== result.fullPath ? rawLocation.href : null;
+    // navigate with native history method
+    nativeHistoryNavigate(methodName, result.fullPath, state, title);
+    if (oldFullPath !== result.fullPath)
+        dispatchNativeEvent(onlyForBrowser, oldHref);
+}
+/**
+ * update browser url when mount/unmount/hidden/show
+ * @param result result of add/remove microApp path on browser url
+ * @param state history.state
+ */
+function updateBrowserURL(result, state) {
+    navigateWithNativeEvent('replaceState', result, true, state);
+}
+/**
+ * When path is same, keep the microAppState in history.state
+ * Fix bug of missing microAppState in next.js & angular
+ * @param method history.pushState/replaceState
+ */
+function patchHistoryState(method) {
+    const rawWindow = globalEnv.rawWindow;
+    return function (...rests) {
+        var _a;
+        if (((_a = rawWindow.history.state) === null || _a === void 0 ? void 0 : _a.microAppState) &&
+            (!isPlainObject(rests[0]) || !rests[0].microAppState) &&
+            (isString(rests[2]) || isURL(rests[2]))) {
+            const currentHref = rawWindow.location.href;
+            const targetLocation = createURL(rests[2], currentHref);
+            if (targetLocation.href === currentHref) {
+                rests[0] = assign({}, rests[0], {
+                    microAppState: rawWindow.history.state.microAppState,
+                });
+            }
+        }
+        method.apply(rawWindow.history, rests);
+    };
+}
+let isReWriteHistoryState = false;
+/**
+ * rewrite history.pushState/replaceState
+ * used to fix the problem that the microAppState maybe missing when mainApp navigate to same path
+ * e.g: when nextjs, angular receive popstate event, they will use history.replaceState to update browser url with a new state object
+ */
+function rewriteHistoryState() {
+    // filter nest app
+    if (!isReWriteHistoryState && !window.__MICRO_APP_ENVIRONMENT__) {
+        isReWriteHistoryState = true;
+        const rawWindow = globalEnv.rawWindow;
+        rawWindow.history.pushState = patchHistoryState(rawWindow.history.pushState);
+        rawWindow.history.replaceState = patchHistoryState(rawWindow.history.replaceState);
+    }
+}
+
+function createRouterApi() {
+    /**
+     * common handler for router.push/router.replace method
+     * @param appName app name
+     * @param methodName replaceState/pushState
+     * @param targetLocation target location
+     * @param state to.state
+     */
+    function navigateWithRawHistory(appName, methodName, targetLocation, state) {
+        navigateWithNativeEvent(methodName, setMicroPathToURL(appName, targetLocation), false, setMicroState(appName, globalEnv.rawWindow.history.state, state !== null && state !== void 0 ? state : null));
+        // clear element scope after navigate
+        removeDomScope();
+    }
+    /**
+     * create method of router.push/replace
+     * NOTE:
+     * 1. The same fullPath will be blocked
+     * 2. name & path is required
+     * 3. path is fullPath except for the domain (the domain can be taken, but not valid)
+     * @param replace use router.replace?
+     */
+    function createNavigationMethod(replace) {
+        return function (to) {
+            const appName = formatAppName(to.name);
+            // console.log(3333333, appInstanceMap.get(appName))
+            if (appName && isString(to.path)) {
+                const app = appInstanceMap.get(appName);
+                if (app && !app.sandBox)
+                    return logError(`navigation failed, sandBox of app ${appName} is closed`);
+                // active apps, include hidden keep-alive app
+                if (getActiveApps().includes(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
+                    const targetFullPath = targetLocation.pathname + targetLocation.search + targetLocation.hash;
+                    if (microLocation.fullPath !== targetFullPath || getMicroPathFromURL(appName) !== targetFullPath) {
+                        const methodName = (replace && to.replace !== false) || to.replace === true ? 'replaceState' : 'pushState';
+                        navigateWithRawHistory(appName, methodName, targetLocation, to.state);
+                    }
+                }
+                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);
+                    }
+                }
+            }
+            else {
+                logError(`navigation failed, name & path are required when use router.${replace ? 'replace' : 'push'}`);
+            }
+        };
+    }
+    // create method of router.go/back/forward
+    function createRawHistoryMethod(methodName) {
+        return function (...rests) {
+            return globalEnv.rawWindow.history[methodName](...rests);
+        };
+    }
+    const beforeGuards = useSetRecord();
+    const afterGuards = useSetRecord();
+    /**
+     * run all of beforeEach/afterEach guards
+     * NOTE:
+     * 1. Modify browser url first, and then run guards,
+     *    consistent with the browser forward & back button
+     * 2. Note the element binding
+     * @param appName app name
+     * @param to target location
+     * @param from old location
+     * @param guards guards list
+     */
+    function runGuards(appName, to, from, guards) {
+        // clear element scope before execute function of parent
+        removeDomScope();
+        for (const guard of guards) {
+            if (isFunction(guard)) {
+                guard(appName, to, from);
+            }
+            else if (isPlainObject(guard) && isFunction(guard[appName])) {
+                guard[appName](to, from);
+            }
+        }
+    }
+    /**
+     * global hook for router
+     * update router information base on microLocation
+     * @param appName app name
+     * @param microLocation location of microApp
+     */
+    function executeNavigationGuard(appName, to, from) {
+        router.current.set(appName, to);
+        runGuards(appName, to, from, beforeGuards.list());
+        requestIdleCallback(() => {
+            runGuards(appName, to, from, afterGuards.list());
+        });
+    }
+    function clearRouterWhenUnmount(appName) {
+        router.current.delete(appName);
+    }
+    // defaultPage data
+    const defaultPageRecord = useMapRecord();
+    /**
+     * defaultPage只在子应用初始化时生效，且优先级比浏览器上的子应用路由地址低
+     * @param appName app name
+     * @param path page path
+     */
+    function setDefaultPage(appName, path) {
+        appName = formatAppName(appName);
+        if (!appName)
+            return noopFalse;
+        return defaultPageRecord.add(appName, path);
+    }
+    function removeDefaultPage(appName) {
+        appName = formatAppName(appName);
+        if (!appName)
+            return false;
+        return defaultPageRecord.delete(appName);
+    }
+    // Router API for developer
+    const router = {
+        current: new Map(),
+        encode: encodeMicroPath,
+        decode: decodeMicroPath,
+        push: createNavigationMethod(false),
+        replace: createNavigationMethod(true),
+        go: createRawHistoryMethod('go'),
+        back: createRawHistoryMethod('back'),
+        forward: createRawHistoryMethod('forward'),
+        beforeEach: beforeGuards.add,
+        afterEach: afterGuards.add,
+        // attachToURL: 将指定的子应用路由信息添加到浏览器地址上
+        // attachAllToURL: 将所有正在运行的子应用路由信息添加到浏览器地址上
+        setDefaultPage,
+        removeDefaultPage,
+        getDefaultPage: defaultPageRecord.get,
+    };
+    return {
+        router,
+        executeNavigationGuard,
+        clearRouterWhenUnmount,
+    };
+}
+const { router, executeNavigationGuard, clearRouterWhenUnmount, } = createRouterApi();
+
+const shadowLocationKeys = ['href', 'pathname', 'search', 'hash'];
+// origin is readonly, so we ignore when updateMicroLocation
+const locationKeys = [...shadowLocationKeys, 'host', 'hostname', 'port', 'protocol', 'search'];
+// origin, fullPath is necessary for guardLocation
+const guardLocationKeys = [...locationKeys, 'origin', 'fullPath'];
+/**
+ * create guardLocation by microLocation, used for router guard
+ */
+function createGuardLocation(appName, microLocation) {
+    const guardLocation = assign({ name: appName }, microLocation);
+    // The prototype values on the URL needs to be manually transferred
+    for (const key of guardLocationKeys)
+        guardLocation[key] = microLocation[key];
+    return guardLocation;
+}
+// for updateBrowserURLWithLocation when initial
+function autoTriggerNavigationGuard(appName, microLocation) {
+    executeNavigationGuard(appName, createGuardLocation(appName, microLocation), createGuardLocation(appName, microLocation));
+}
+/**
+ * The following scenes will trigger location update:
+ * 1. pushState/replaceState
+ * 2. popStateEvent
+ * 3. query on browser url when init sub app
+ * 4. set defaultPage when when init sub app
+ * NOTE:
+ * 1. update browser URL first, and then update microLocation
+ * 2. the same fullPath will not trigger router guards
+ * @param appName app name
+ * @param path target path
+ * @param base base url
+ * @param microLocation micro app location
+ * @param type auto prevent
+ */
+function updateMicroLocation(appName, path, microLocation, type) {
+    const newLocation = createURL(path, microLocation.href);
+    // record old values of microLocation to `from`
+    const from = createGuardLocation(appName, microLocation);
+    for (const key of locationKeys) {
+        if (shadowLocationKeys.includes(key)) {
+            // reference of shadowLocation
+            microLocation.shadowLocation[key] = newLocation[key];
+        }
+        else {
+            // @ts-ignore reference of microLocation
+            microLocation[key] = newLocation[key];
+        }
+    }
+    // update latest values of microLocation to `to`
+    const to = createGuardLocation(appName, microLocation);
+    // The hook called only when fullPath changed
+    if (type === 'auto' || (from.fullPath !== to.fullPath && type !== 'prevent')) {
+        executeNavigationGuard(appName, to, from);
+    }
+}
+/**
+ * Create location for microApp, each microApp has only one location object, it is a reference type
+ * MDN https://developer.mozilla.org/en-US/docs/Web/API/Location
+ * @param appName app name
+ * @param url app url
+ */
+function createMicroLocation(appName, url) {
+    const rawWindow = globalEnv.rawWindow;
+    const rawLocation = rawWindow.location;
+    // microLocation is the location of child app, it is globally unique
+    const microLocation = createURL(url);
+    // shadowLocation is the current location information (href, pathname, search, hash)
+    const shadowLocation = {
+        href: microLocation.href,
+        pathname: microLocation.pathname,
+        search: microLocation.search,
+        hash: microLocation.hash,
+    };
+    /**
+     * Common handler for href, assign, replace
+     * It is mainly used to deal with special scenes about hash
+     * @param value target path
+     * @param methodName pushState/replaceState
+     * @returns origin value or formatted value
+     */
+    const commonHandler = (value, methodName) => {
+        const targetLocation = createURL(value, microLocation.href);
+        // Even if the origin is the same, developers still have the possibility of want to jump to a new page
+        if (targetLocation.origin === microLocation.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 === shadowLocation.pathname &&
+                targetLocation.search === shadowLocation.search) {
+                let oldHref = null;
+                if (targetLocation.hash !== shadowLocation.hash) {
+                    if (setMicroPathResult.isAttach2Hash)
+                        oldHref = rawLocation.href;
+                    nativeHistoryNavigate(methodName, setMicroPathResult.fullPath);
+                }
+                if (targetLocation.hash) {
+                    dispatchNativeEvent(false, oldHref);
+                }
+                else {
+                    rawLocation.reload();
+                }
+                return void 0;
+                /**
+                 * when baseApp is hash router, address change of child can not reload browser
+                 * so we imitate behavior of browser (reload)
+                 */
+            }
+            else if (setMicroPathResult.isAttach2Hash) {
+                nativeHistoryNavigate(methodName, setMicroPathResult.fullPath);
+                rawLocation.reload();
+                return void 0;
+            }
+            value = setMicroPathResult.fullPath;
+        }
+        return value;
+    };
+    /**
+     * create location PropertyDescriptor (href, pathname, search, hash)
+     * @param key property name
+     * @param setter setter of location property
+     */
+    function createPropertyDescriptor(getter, setter) {
+        return {
+            enumerable: true,
+            configurable: true,
+            get: getter,
+            set: setter,
+        };
+    }
+    /**
+     * common handler for location.pathname & location.search
+     * @param targetPath target fullPath
+     * @param key pathname/search
+     */
+    function handleForPathNameAndSearch(targetPath, key) {
+        const targetLocation = createURL(targetPath, url);
+        // When the browser url has a hash value, the same pathname/search will not refresh browser
+        if (targetLocation[key] === shadowLocation[key] && shadowLocation.hash) {
+            // The href has not changed, not need to dispatch hashchange event
+            dispatchNativeEvent(false);
+        }
+        else {
+            /**
+             * When the value is the same, no new route stack will be added
+             * Special scenes such as:
+             * pathname: /path ==> /path#hash, /path ==> /path?query
+             * search: ?query ==> ?query#hash
+             */
+            nativeHistoryNavigate(targetLocation[key] === shadowLocation[key] ? 'replaceState' : 'pushState', setMicroPathToURL(appName, targetLocation).fullPath);
+            rawLocation.reload();
+        }
+    }
+    /**
+     * Special processing for four keys: href, pathname, search and hash
+     * They take values from shadowLocation, and require special operations when assigning values
+     */
+    rawDefineProperties(microLocation, {
+        href: createPropertyDescriptor(() => shadowLocation.href, (value) => {
+            const targetPath = commonHandler(value, 'pushState');
+            if (targetPath)
+                rawLocation.href = targetPath;
+        }),
+        pathname: createPropertyDescriptor(() => shadowLocation.pathname, (value) => {
+            const targetPath = ('/' + value).replace(/^\/+/, '/') + shadowLocation.search + shadowLocation.hash;
+            handleForPathNameAndSearch(targetPath, 'pathname');
+        }),
+        search: createPropertyDescriptor(() => shadowLocation.search, (value) => {
+            const targetPath = shadowLocation.pathname + ('?' + value).replace(/^\?+/, '?') + shadowLocation.hash;
+            handleForPathNameAndSearch(targetPath, 'search');
+        }),
+        hash: createPropertyDescriptor(() => shadowLocation.hash, (value) => {
+            const targetPath = shadowLocation.pathname + shadowLocation.search + ('#' + value).replace(/^#+/, '#');
+            const targetLocation = createURL(targetPath, url);
+            // The same hash will not trigger popStateEvent
+            if (targetLocation.hash !== shadowLocation.hash) {
+                navigateWithNativeEvent('pushState', setMicroPathToURL(appName, targetLocation), false);
+            }
+        }),
+        fullPath: createPropertyDescriptor(() => shadowLocation.pathname + shadowLocation.search + shadowLocation.hash, noop),
+    });
+    const createLocationMethod = (locationMethodName) => {
+        return function (value) {
+            const targetPath = commonHandler(value, locationMethodName === 'assign' ? 'pushState' : 'replaceState');
+            if (targetPath)
+                rawLocation[locationMethodName](targetPath);
+        };
+    };
+    return assign(microLocation, {
+        assign: createLocationMethod('assign'),
+        replace: createLocationMethod('replace'),
+        reload: (forcedReload) => rawLocation.reload(forcedReload),
+        shadowLocation,
+    });
+}
+
+/**
+ * The router system has two operations: read and write
+ * Read through location and write through history & location
+ * @param appName app name
+ * @param url app url
+ * @returns MicroRouter
+ */
+function createMicroRouter(appName, url) {
+    rewriteHistoryState();
+    const microLocation = createMicroLocation(appName, url);
+    return {
+        microLocation,
+        microHistory: createMicroHistory(appName, microLocation),
+    };
+}
+// 当沙箱执行start, 或者隐藏的keep-alive应用重新渲染时时才根据浏览器url更新location 或者 将参数更新到url上
+function initRouteStateWithURL(appName, microLocation, defaultPage) {
+    const microPath = getMicroPathFromURL(appName);
+    if (microPath) {
+        updateMicroLocation(appName, microPath, microLocation, 'auto');
+    }
+    else {
+        updateBrowserURLWithLocation(appName, microLocation, defaultPage);
+    }
+}
+/**
+ * initialize browser information according to microLocation
+ * called on sandbox.start or reshow of keep-alive app
+ */
+function updateBrowserURLWithLocation(appName, microLocation, defaultPage) {
+    // update microLocation with defaultPage
+    if (defaultPage)
+        updateMicroLocation(appName, defaultPage, microLocation, 'prevent');
+    // attach microApp route info to browser URL
+    updateBrowserURL(setMicroPathToURL(appName, microLocation), setMicroState(appName, globalEnv.rawWindow.history.state, null));
+    // trigger guards after change browser URL
+    autoTriggerNavigationGuard(appName, microLocation);
+}
+/**
+ * In any case, microPath & microState will be removed from browser, but location will be initialized only when keep-router-state is false
+ * @param appName app name
+ * @param url app url
+ * @param microLocation location of microApp
+ * @param keepRouteState keep-router-state is only used to control whether to clear the location of microApp
+ */
+function clearRouteStateFromURL(appName, url, microLocation, keepRouteState) {
+    if (!keepRouteState) {
+        const { pathname, search, hash } = createURL(url);
+        updateMicroLocation(appName, pathname + search + hash, microLocation, 'prevent');
+    }
+    removeStateAndPathFromBrowser(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) {
+    updateBrowserURL(removeMicroPathFromURL(appName), removeMicroState(appName, globalEnv.rawWindow.history.state));
+}
+
+// Variables that can escape to rawWindow
+const staticEscapeProperties = [
+    '__REACT_ERROR_OVERLAY_GLOBAL_HOOK__',
+    'System',
+    '__cjsWrapper',
+];
+// Variables that can only assigned to rawWindow
+const escapeSetterKeyList = [
+    'location',
+];
+const globalPropertyList = ['window', 'self', 'globalThis'];
+class SandBox {
+    constructor(appName, url, useMemoryRouter = true) {
+        /**
+         * Scoped global Properties(Properties that can only get and set in microAppWindow, will not escape to rawWindow)
+         * https://github.com/micro-zoe/micro-app/issues/234
+         */
+        this.scopeProperties = ['webpackJsonp', 'Vue'];
+        // Properties that can be escape to rawWindow
+        this.escapeProperties = [];
+        // Properties newly added to microAppWindow
+        this.injectedKeys = new Set();
+        // Properties escape to rawWindow, cleared when unmount
+        this.escapeKeys = new Set();
+        // sandbox state
+        this.active = false;
+        this.microAppWindow = {}; // Proxy target
+        // get scopeProperties and escapeProperties from plugins
+        this.getSpecialProperties(appName);
+        // create proxyWindow with Proxy(microAppWindow)
+        this.proxyWindow = this.createProxyWindow(appName);
+        // inject global properties
+        this.initMicroAppWindow(this.microAppWindow, appName, url, useMemoryRouter);
+        // Rewrite global event listener & timeout
+        assign(this, effect(this.microAppWindow));
+    }
+    start(baseRoute, useMemoryRouter = true, defaultPage = '') {
+        if (!this.active) {
+            this.active = true;
+            if (useMemoryRouter) {
+                this.initRouteState(defaultPage);
+                // unique listener of popstate event for sub app
+                this.removeHistoryListener = addHistoryListener(this.proxyWindow.__MICRO_APP_NAME__);
+            }
+            else {
+                this.microAppWindow.__MICRO_APP_BASE_ROUTE__ = this.microAppWindow.__MICRO_APP_BASE_URL__ = baseRoute;
+            }
+            if (++SandBox.activeCount === 1) {
+                effectDocumentEvent();
+                patchElementPrototypeMethods();
+                listenUmountOfNestedApp();
+            }
+            // BUG FIX: bable-polyfill@6.x
+            globalEnv.rawWindow._babelPolyfill && (globalEnv.rawWindow._babelPolyfill = false);
+        }
+    }
+    stop(keepRouteState = false) {
+        if (this.active) {
+            this.releaseEffect();
+            this.microAppWindow.microApp.clearDataListener();
+            this.microAppWindow.microApp.clearGlobalDataListener();
+            this.injectedKeys.forEach((key) => {
+                Reflect.deleteProperty(this.microAppWindow, key);
+            });
+            this.injectedKeys.clear();
+            this.escapeKeys.forEach((key) => {
+                Reflect.deleteProperty(globalEnv.rawWindow, key);
+            });
+            this.escapeKeys.clear();
+            if (this.removeHistoryListener) {
+                this.clearRouteState(keepRouteState);
+                // release listener of popstate
+                this.removeHistoryListener();
+            }
+            if (--SandBox.activeCount === 0) {
                 releaseEffectDocumentEvent();
                 releasePatches();
             }
+            this.active = false;
         }
     }
     // record umd snapshot before the first execution of umdHookMount
@@ -2743,20 +3532,25 @@ class SandBox {
      * @param appName app name
      * @param url app url
      */
-    initMicroAppWindow(microAppWindow, appName, url) {
+    initMicroAppWindow(microAppWindow, appName, url, useMemoryRouter) {
         microAppWindow.__MICRO_APP_ENVIRONMENT__ = true;
         microAppWindow.__MICRO_APP_NAME__ = appName;
+        microAppWindow.__MICRO_APP_URL__ = url;
         microAppWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
         microAppWindow.__MICRO_APP_WINDOW__ = microAppWindow;
-        microAppWindow.microApp = Object.assign(new EventCenterForMicroApp(appName), {
+        microAppWindow.microApp = assign(new EventCenterForMicroApp(appName), {
             removeDomScope,
             pureCreateElement,
+            router,
         });
         microAppWindow.rawWindow = globalEnv.rawWindow;
         microAppWindow.rawDocument = globalEnv.rawDocument;
         microAppWindow.hasOwnProperty = (key) => rawHasOwnProperty.call(microAppWindow, key) || rawHasOwnProperty.call(globalEnv.rawWindow, key);
         this.setMappingPropertiesWithRawDescriptor(microAppWindow);
         this.setHijackProperties(microAppWindow, appName);
+        // this.patchHijackRequest(microAppWindow, appName, url)
+        if (useMemoryRouter)
+            this.setRouterApi(microAppWindow, appName, url);
     }
     // properties associated with the native window
     setMappingPropertiesWithRawDescriptor(microAppWindow) {
@@ -2790,14 +3584,16 @@ class SandBox {
         let modifiedEval, modifiedImage;
         rawDefineProperties(microAppWindow, {
             document: {
+                configurable: false,
+                enumerable: true,
                 get() {
                     throttleDeferForSetAppName(appName);
                     return globalEnv.rawDocument;
                 },
-                configurable: false,
-                enumerable: true,
             },
             eval: {
+                configurable: true,
+                enumerable: false,
                 get() {
                     throttleDeferForSetAppName(appName);
                     return modifiedEval || eval;
@@ -2805,10 +3601,10 @@ class SandBox {
                 set: (value) => {
                     modifiedEval = value;
                 },
-                configurable: true,
-                enumerable: false,
             },
             Image: {
+                configurable: true,
+                enumerable: false,
                 get() {
                     throttleDeferForSetAppName(appName);
                     return modifiedImage || globalEnv.ImageProxy;
@@ -2816,11 +3612,101 @@ class SandBox {
                 set: (value) => {
                     modifiedImage = value;
                 },
+            },
+        });
+    }
+    // private patchHijackRequest (microAppWindow: microAppWindowType, appName: string, url: string) {
+    //   let modifiedImage: unknown
+    //   function EventSource (...rests: any[]) {
+    //     console.log(appName + ' EventSource', rests)
+    //     if (typeof rests[0] === 'string') {
+    //       rests[0] = (new URL(rests[0], url)).toString()
+    //     }
+    //     return new globalEnv.rawWindow.EventSource(...rests)
+    //   }
+    //   function patchFetch (...rests: any[]) {
+    //     console.log(appName + ' fetch', rests)
+    //     if (typeof rests[0] === 'string') {
+    //       rests[0] = (new URL(rests[0], url)).toString()
+    //     }
+    //     return globalEnv.rawWindow.fetch(...rests)
+    //   }
+    //   const rawXMLHttpRequest = globalEnv.rawWindow.XMLHttpRequest
+    //   class XMLHttpRequest extends rawXMLHttpRequest {
+    //     open (method: string, reqUrl: string) {
+    //       console.log(appName + ' XMLHttpRequest', method, reqUrl)
+    //       reqUrl = (new URL(reqUrl, url)).toString()
+    //       super.open(method, reqUrl)
+    //     }
+    //   }
+    //   rawDefineProperties(microAppWindow, {
+    //     EventSource: {
+    //       configurable: true,
+    //       enumerable: true,
+    //       get () {
+    //         return EventSource
+    //       },
+    //       set: (value) => {
+    //         modifiedImage = value
+    //       },
+    //     },
+    //     fetch: {
+    //       configurable: true,
+    //       enumerable: true,
+    //       get () {
+    //         return patchFetch
+    //       },
+    //       set: (value) => {
+    //         modifiedImage = value
+    //       },
+    //     },
+    //     XMLHttpRequest: {
+    //       configurable: true,
+    //       enumerable: true,
+    //       get () {
+    //         return XMLHttpRequest
+    //       },
+    //       set: (value) => {
+    //         modifiedImage = value
+    //       },
+    //     },
+    //   })
+    // }
+    // set location & history for memory router
+    setRouterApi(microAppWindow, appName, url) {
+        const { microLocation, microHistory } = createMicroRouter(appName, url);
+        rawDefineProperties(microAppWindow, {
+            location: {
+                configurable: false,
+                enumerable: true,
+                get() {
+                    return microLocation;
+                },
+                set: (value) => {
+                    globalEnv.rawWindow.location = value;
+                },
+            },
+            history: {
                 configurable: true,
-                enumerable: false,
+                enumerable: true,
+                get() {
+                    return microHistory;
+                },
             },
         });
     }
+    initRouteState(defaultPage) {
+        initRouteStateWithURL(this.proxyWindow.__MICRO_APP_NAME__, this.proxyWindow.location, defaultPage);
+    }
+    clearRouteState(keepRouteState) {
+        clearRouteStateFromURL(this.proxyWindow.__MICRO_APP_NAME__, this.proxyWindow.__MICRO_APP_URL__, this.proxyWindow.location, keepRouteState);
+    }
+    setRouteInfoForKeepAliveApp() {
+        updateBrowserURLWithLocation(this.proxyWindow.__MICRO_APP_NAME__, this.proxyWindow.location);
+    }
+    removeRouteInfoForKeepAliveApp() {
+        removeStateAndPathFromBrowser(this.proxyWindow.__MICRO_APP_NAME__);
+    }
 }
 SandBox.activeCount = 0; // number of active sandbox
 
@@ -2854,7 +3740,7 @@ function dispatchLifecyclesEvent(element, appName, lifecycleName, error) {
     element = getRootContainer(element);
     // clear dom scope before dispatch lifeCycles event to base app, especially mounted & unmount
     removeDomScope();
-    const detail = Object.assign({
+    const detail = assign({
         name: appName,
         container: element,
     }, error && {
@@ -2879,7 +3765,7 @@ function dispatchLifecyclesEvent(element, appName, lifecycleName, error) {
  * @param detail event detail
  */
 function dispatchCustomEventToMicroApp(eventName, appName, detail = {}) {
-    const event = new CustomEvent(`${eventName}-${appName}`, {
+    const event = new CustomEvent(formatEventName$1(eventName, appName), {
         detail,
     });
     window.dispatchEvent(event);
@@ -2888,8 +3774,8 @@ function dispatchCustomEventToMicroApp(eventName, appName, detail = {}) {
 // micro app instances
 const appInstanceMap = new Map();
 class CreateApp {
-    constructor({ name, url, ssrUrl, container, inline, scopecss, useSandbox, baseroute, }) {
-        this.state = appStates.NOT_LOADED;
+    constructor({ name, url, ssrUrl, container, inline, scopecss, useSandbox, useMemoryRouter, baseroute, keepRouteState, defaultPage, }) {
+        this.state = appStates.CREATED;
         this.keepAliveState = null;
         this.keepAliveContainer = null;
         this.loadSourceLevel = 0;
@@ -2900,28 +3786,30 @@ class CreateApp {
         this.isPrefetch = false;
         this.prefetchResolve = null;
         this.container = null;
-        this.baseroute = '';
         this.sandBox = null;
         this.container = container !== null && container !== void 0 ? container : null;
         this.inline = inline !== null && inline !== void 0 ? inline : false;
         this.baseroute = baseroute !== null && baseroute !== void 0 ? baseroute : '';
+        this.keepRouteState = keepRouteState !== null && keepRouteState !== void 0 ? keepRouteState : false;
         this.ssrUrl = ssrUrl !== null && ssrUrl !== void 0 ? ssrUrl : '';
         // optional during init👆
         this.name = name;
         this.url = url;
         this.useSandbox = useSandbox;
         this.scopecss = this.useSandbox && scopecss;
+        this.useMemoryRouter = this.useSandbox && useMemoryRouter;
+        this.defaultPage = defaultPage !== null && defaultPage !== void 0 ? defaultPage : '';
         this.source = {
             links: new Map(),
             scripts: new Map(),
         };
         this.loadSourceCode();
-        this.useSandbox && (this.sandBox = new SandBox(name, url));
+        this.useSandbox && (this.sandBox = new SandBox(name, url, this.useMemoryRouter));
     }
     // Load resources
     loadSourceCode() {
-        this.state = appStates.LOADING_SOURCE_CODE;
-        HTMLLoader.getInstance().run(this, extractSourceDom);
+        this.state = appStates.LOADING;
+        extractHtml(this);
     }
     /**
      * When resource is loaded, mount app if it is not prefetch or unmount
@@ -2935,7 +3823,7 @@ class CreateApp {
                 this.prefetchResolve = null;
             }
             else if (appStates.UNMOUNT !== this.state) {
-                this.state = appStates.LOAD_SOURCE_FINISHED;
+                this.state = appStates.LOADED;
                 this.mount();
             }
         }
@@ -2952,7 +3840,7 @@ class CreateApp {
         }
         if (appStates.UNMOUNT !== this.state) {
             this.onerror(e);
-            this.state = appStates.LOAD_SOURCE_ERROR;
+            this.state = appStates.LOAD_FAILED;
         }
     }
     /**
@@ -2960,22 +3848,26 @@ class CreateApp {
      * @param container app container
      * @param inline js runs in inline mode
      * @param baseroute route prefix, default is ''
+     * @param keepRouteState keep route state when unmount, default is false
      */
-    mount(container, inline, baseroute) {
+    mount(container, inline, baseroute, keepRouteState, defaultPage) {
         var _a, _b, _c;
-        if (isBoolean(inline) && inline !== this.inline) {
+        if (isBoolean(inline))
             this.inline = inline;
-        }
+        // keepRouteState effective on unmount
+        if (isBoolean(keepRouteState))
+            this.keepRouteState = keepRouteState;
         this.container = (_a = this.container) !== null && _a !== void 0 ? _a : container;
         this.baseroute = baseroute !== null && baseroute !== void 0 ? baseroute : this.baseroute;
+        this.defaultPage = defaultPage !== null && defaultPage !== void 0 ? defaultPage : this.defaultPage;
         if (this.loadSourceLevel !== 2) {
-            this.state = appStates.LOADING_SOURCE_CODE;
+            this.state = appStates.LOADING;
             return;
         }
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.BEFOREMOUNT);
         this.state = appStates.MOUNTING;
         cloneContainer(this.source.html, this.container, !this.umdMode);
-        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.start(this.baseroute);
+        (_b = this.sandBox) === null || _b === void 0 ? void 0 : _b.start(this.baseroute, this.useMemoryRouter, this.defaultPage);
         let umdHookMountResult; // result of mount function
         if (!this.umdMode) {
             let hasDispatchMountedEvent = false;
@@ -3040,11 +3932,12 @@ class CreateApp {
     }
     /**
      * unmount app
+     * NOTE: Do not add any params on account of unmountApp
      * @param destroy completely destroy, delete cache resources
      * @param unmountcb callback of unmount
      */
     unmount(destroy, unmountcb) {
-        if (this.state === appStates.LOAD_SOURCE_ERROR) {
+        if (this.state === appStates.LOAD_FAILED) {
             destroy = true;
         }
         this.state = appStates.UNMOUNT;
@@ -3098,7 +3991,7 @@ class CreateApp {
             cloneContainer(this.container, this.source.html, false);
         }
         // this.container maybe contains micro-app element, stop sandbox should exec after cloneContainer
-        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.stop();
+        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.stop(this.keepRouteState && !destroy);
         if (!getActiveApps().length) {
             releasePatchSetAttribute();
         }
@@ -3117,34 +4010,40 @@ class CreateApp {
     }
     // hidden app when disconnectedCallback called with keep-alive
     hiddenKeepAliveApp() {
+        var _a;
         const oldContainer = this.container;
         cloneContainer(this.container, this.keepAliveContainer ? this.keepAliveContainer : (this.keepAliveContainer = document.createElement('div')), false);
         this.container = this.keepAliveContainer;
         this.keepAliveState = keepAliveStates.KEEP_ALIVE_HIDDEN;
         // event should dispatch before clone node
-        // dispatch afterhidden event to micro-app
+        // dispatch afterHidden event to micro-app
         dispatchCustomEventToMicroApp('appstate-change', this.name, {
             appState: 'afterhidden',
         });
-        // dispatch afterhidden event to base app
+        // dispatch afterHidden event to base app
         dispatchLifecyclesEvent(oldContainer, this.name, lifeCycles.AFTERHIDDEN);
+        // called after lifeCyclesEvent
+        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.removeRouteInfoForKeepAliveApp();
     }
     // show app when connectedCallback called with keep-alive
     showKeepAliveApp(container) {
-        // dispatch beforeshow event to micro-app
+        var _a;
+        // dispatch beforeShow event to micro-app
         dispatchCustomEventToMicroApp('appstate-change', this.name, {
             appState: 'beforeshow',
         });
-        // dispatch beforeshow event to base app
+        // dispatch beforeShow event to base app
         dispatchLifecyclesEvent(container, this.name, lifeCycles.BEFORESHOW);
         cloneContainer(this.container, container, false);
         this.container = container;
         this.keepAliveState = keepAliveStates.KEEP_ALIVE_SHOW;
-        // dispatch aftershow event to micro-app
+        // called before lifeCyclesEvent
+        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.setRouteInfoForKeepAliveApp();
+        // dispatch afterShow event to micro-app
         dispatchCustomEventToMicroApp('appstate-change', this.name, {
             appState: 'aftershow',
         });
-        // dispatch aftershow event to base app
+        // dispatch afterShow event to base app
         dispatchLifecyclesEvent(this.container, this.name, lifeCycles.AFTERSHOW);
     }
     /**
@@ -3252,12 +4151,17 @@ function defineElement(tagName) {
         }
         disconnectedCallback() {
             this.hasConnected = false;
-            // keep-alive
-            if (this.getKeepAliveModeResult()) {
-                this.handleHiddenKeepAliveApp();
-            }
-            else {
-                this.handleUnmount(this.getDestroyCompatibleResult());
+            const app = appInstanceMap.get(this.appName);
+            if (app &&
+                app.getAppState() !== appStates.UNMOUNT &&
+                app.getKeepAliveState() !== keepAliveStates.KEEP_ALIVE_HIDDEN) {
+                // keep-alive
+                if (this.getKeepAliveModeResult()) {
+                    this.handleHiddenKeepAliveApp();
+                }
+                else {
+                    this.handleUnmount(this.getDestroyCompatibleResult());
+                }
             }
         }
         attributeChangedCallback(attr, _oldVal, newVal) {
@@ -3305,12 +4209,7 @@ function defineElement(tagName) {
             if (this.getDisposeResult('shadowDOM') && !this.shadowRoot && isFunction(this.attachShadow)) {
                 this.attachShadow({ mode: 'open' });
             }
-            if (this.getDisposeResult('ssr')) {
-                this.ssrUrl = CompletionPath(globalEnv.rawWindow.location.pathname, this.appUrl);
-            }
-            else if (this.ssrUrl) {
-                this.ssrUrl = '';
-            }
+            this.updateSsrUrl(this.appUrl);
             if (appInstanceMap.has(this.appName)) {
                 const app = appInstanceMap.get(this.appName);
                 const existAppUrl = app.ssrUrl || app.url;
@@ -3344,15 +4243,9 @@ function defineElement(tagName) {
         actionsForAttributeChange(formatAttrName, formatAttrUrl, existApp) {
             var _a;
             /**
-             * change ssrUrl in ssr mode
              * do not add judgment of formatAttrUrl === this.appUrl
              */
-            if (this.getDisposeResult('ssr')) {
-                this.ssrUrl = CompletionPath(globalEnv.rawWindow.location.pathname, formatAttrUrl);
-            }
-            else if (this.ssrUrl) {
-                this.ssrUrl = '';
-            }
+            this.updateSsrUrl(formatAttrUrl);
             this.appName = formatAttrName;
             this.appUrl = formatAttrUrl;
             ((_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this).innerHTML = '';
@@ -3412,14 +4305,14 @@ function defineElement(tagName) {
             app.isPrefetch = false;
             defer(() => {
                 var _a;
-                return app.mount((_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this, this.getDisposeResult('inline'), this.getBaseRouteCompatible());
+                return app.mount((_a = this.shadowRoot) !== null && _a !== void 0 ? _a : this, this.getDisposeResult('inline'), this.getBaseRouteCompatible(), this.getDisposeResult('keep-router-state'), this.getDefaultPageValue());
             });
         }
         // create app instance
         handleCreateApp() {
             var _a;
             /**
-             * actions for destory old app
+             * actions for destroy old app
              * fix of unmounted umd app with disableSandbox
              */
             if (appInstanceMap.has(this.appName)) {
@@ -3433,7 +4326,10 @@ function defineElement(tagName) {
                 inline: this.getDisposeResult('inline'),
                 scopecss: !(this.getDisposeResult('disableScopecss') || this.getDisposeResult('shadowDOM')),
                 useSandbox: !this.getDisposeResult('disableSandbox'),
+                useMemoryRouter: !this.getDisposeResult('disable-memory-router'),
                 baseroute: this.getBaseRouteCompatible(),
+                keepRouteState: this.getDisposeResult('keep-router-state'),
+                defaultPage: this.getDefaultPageValue(),
             });
             appInstanceMap.set(this.appName, instance);
         }
@@ -3441,11 +4337,12 @@ function defineElement(tagName) {
          * unmount app
          * @param destroy delete cache resources when unmount
          */
-        handleUnmount(destroy, unmountcb) {
+        handleUnmount(destroy, unmountCb) {
             const app = appInstanceMap.get(this.appName);
             if (app &&
-                app.getAppState() !== appStates.UNMOUNT)
-                app.unmount(destroy, unmountcb);
+                app.getAppState() !== appStates.UNMOUNT) {
+                app.unmount(destroy, unmountCb);
+            }
         }
         // hidden app when disconnectedCallback called with keep-alive
         handleHiddenKeepAliveApp() {
@@ -3508,6 +4405,37 @@ function defineElement(tagName) {
         getKeepAliveModeResult() {
             return this.getDisposeResult('keep-alive') && !this.getDestroyCompatibleResult();
         }
+        /**
+         * change ssrUrl in ssr mode
+         */
+        updateSsrUrl(baseUrl) {
+            if (this.getDisposeResult('ssr')) {
+                if (this.getDisposeResult('disable-memory-router')) {
+                    const rawLocation = globalEnv.rawWindow.location;
+                    this.ssrUrl = CompletionPath(rawLocation.pathname + rawLocation.search, baseUrl);
+                }
+                else {
+                    // get path from browser URL
+                    let targetPath = getNoHashMicroPathFromURL(this.appName, baseUrl);
+                    const defaultPagePath = this.getDefaultPageValue();
+                    if (!targetPath && defaultPagePath) {
+                        const targetLocation = createURL(defaultPagePath, baseUrl);
+                        targetPath = targetLocation.origin + targetLocation.pathname + targetLocation.search;
+                    }
+                    this.ssrUrl = targetPath;
+                }
+            }
+            else if (this.ssrUrl) {
+                this.ssrUrl = '';
+            }
+        }
+        /**
+         * get config of default page
+         */
+        getDefaultPageValue() {
+            var _a, _b, _c;
+            return (_c = (_b = (_a = router.getDefaultPage(this.appName)) !== null && _a !== void 0 ? _a : this.getAttribute('default-page')) !== null && _b !== void 0 ? _b : this.getAttribute('defaultPage')) !== null && _c !== void 0 ? _c : '';
+        }
         /**
          * Data from the base application
          */
@@ -3542,12 +4470,13 @@ function defineElement(tagName) {
  *    url: string,
  *    disableScopecss?: boolean,
  *    disableSandbox?: boolean,
+ *    disableMemoryRouter?: boolean,
  *  },
  *  ...
  * ])
  * Note:
  *  1: preFetch is asynchronous and is performed only when the browser is idle
- *  2: disableScopecss, disableSandbox must be same with micro-app element, if conflict, the one who executes first shall prevail
+ *  2: disableScopecss, disableSandbox, disableMemoryRouter must be same with micro-app element, if conflict, the one who executes first shall prevail
  * @param apps micro apps
  */
 function preFetch(apps) {
@@ -3565,7 +4494,7 @@ function preFetch(apps) {
 function preFetchInSerial(prefetchApp) {
     return new Promise((resolve) => {
         requestIdleCallback(() => {
-            var _a, _b;
+            var _a, _b, _c;
             if (isPlainObject(prefetchApp) && navigator.onLine) {
                 prefetchApp.name = formatAppName(prefetchApp.name);
                 prefetchApp.url = formatAppURL(prefetchApp.url, prefetchApp.name);
@@ -3575,6 +4504,7 @@ function preFetchInSerial(prefetchApp) {
                         url: prefetchApp.url,
                         scopecss: !((_a = prefetchApp.disableScopecss) !== null && _a !== void 0 ? _a : microApp.disableScopecss),
                         useSandbox: !((_b = prefetchApp.disableSandbox) !== null && _b !== void 0 ? _b : microApp.disableSandbox),
+                        useMemoryRouter: !((_c = prefetchApp.disableMemoryRouter) !== null && _c !== void 0 ? _c : microApp.disableMemoryRouter),
                     });
                     app.isPrefetch = true;
                     app.prefetchResolve = resolve;
@@ -3643,7 +4573,7 @@ function getAllApps() {
 /**
  * unmount app by appName
  * @param appName
- * @param options unmountAppParams
+ * @param options unmountAppOptions
  * @returns Promise<void>
  */
 function unmountApp(appName, options) {
@@ -3717,6 +4647,7 @@ class MicroApp extends EventCenterForBaseApp {
         super(...arguments);
         this.tagName = 'micro-app';
         this.preFetch = preFetch;
+        this.router = router;
     }
     start(options) {
         if (!isBrowser || !window.customElements) {
@@ -3746,6 +4677,7 @@ class MicroApp extends EventCenterForBaseApp {
             this.inline = options.inline;
             this.disableScopecss = options.disableScopecss;
             this.disableSandbox = options.disableSandbox;
+            this.disableMemoryRouter = options.disableMemoryRouter;
             this.ssr = options.ssr;
             isFunction(options.fetch) && (this.fetch = options.fetch);
             isPlainObject(options.lifeCycles) && (this.lifeCycles = options.lifeCycles);