@micro-zoe/micro-app 0.8.5 → 1.0.0-alpha.1

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '0.8.5';
+const version = '1.0.0-alpha.1';
 // 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,12 +92,22 @@ 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
  */
 function addProtocol(url) {
-    return url.startsWith('//') ? `${location.protocol}${url}` : url;
+    return url.startsWith('//') ? `${globalThis.location.protocol}${url}` : url;
 }
 /**
  * format 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,
@@ -176,24 +199,15 @@ function promiseStream(promiseList, successCb, errorCb, finallyCb) {
     promiseList.forEach((p, i) => {
         if (isPromise(p)) {
             p.then((res) => {
-                successCb({
-                    data: res,
-                    index: i,
-                });
+                successCb({ data: res, index: i });
                 isFinished();
             }).catch((err) => {
-                errorCb({
-                    error: err,
-                    index: i,
-                });
+                errorCb({ error: err, index: i });
                 isFinished();
             });
         }
         else {
-            successCb({
-                data: p,
-                index: i,
-            });
+            successCb({ data: p, index: i });
             isFinished();
         }
     });
@@ -306,6 +320,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 +421,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 +445,24 @@ 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';
+/**
+ * global key must be static key, they can not rewrite
+ * e.g.
+ * window.Promise = newValue
+ * new Promise ==> still get old value, not newValue, because they are cached by top function
+ * NOTE:
+ * 1. Do not add fetch, XMLHttpRequest, EventSource
+ */
+const globalKeyToBeCached = 'window,self,globalThis,Array,Object,String,Boolean,Math,Number,Symbol,Date,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';
 
 /**
  * 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)) {
@@ -900,6 +1014,64 @@ function formatDynamicLink(url, info, app, originLink, replaceStyle) {
     });
 }
 
+class Adapter {
+    constructor() {
+        // keys that can only assigned to rawWindow
+        this.escapeSetterKeyList = [
+            'location',
+        ];
+        // keys that can escape to rawWindow
+        this.staticEscapeProperties = [
+            'System',
+            '__cjsWrapper',
+        ];
+        // keys that scoped in child app
+        this.staticScopeProperties = [
+            'webpackJsonp',
+            'webpackHotUpdate',
+            'Vue',
+        ];
+        this.injectReactHRMProperty();
+    }
+    // TODO: __DEV__ process.env.NODE_ENV !== 'production'
+    // adapter for react
+    injectReactHRMProperty() {
+        if (process.env.NODE_ENV !== 'production') {
+            // react child in non-react env
+            this.staticEscapeProperties.push('__REACT_ERROR_OVERLAY_GLOBAL_HOOK__');
+            // in react parent
+            if (globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__) {
+                this.staticScopeProperties = this.staticScopeProperties.concat([
+                    '__REACT_ERROR_OVERLAY_GLOBAL_HOOK__',
+                    '__reactRefreshInjected',
+                ]);
+            }
+        }
+    }
+}
+// Fix conflict of babel-polyfill@6.x
+function fixBabelPolyfill6() {
+    if (globalEnv.rawWindow._babelPolyfill)
+        globalEnv.rawWindow._babelPolyfill = false;
+}
+/**
+ * Fix error of hot reload when parent&child created by create-react-app in development environment
+ * Issue: https://github.com/micro-zoe/micro-app/issues/382
+ */
+function fixReactHMRConflict(app) {
+    var _a;
+    if (process.env.NODE_ENV !== 'production') {
+        const rawReactErrorHook = globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__;
+        const childReactErrorHook = (_a = app.sandBox) === null || _a === void 0 ? void 0 : _a.proxyWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__;
+        if (rawReactErrorHook && childReactErrorHook) {
+            globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__ = childReactErrorHook;
+            defer(() => {
+                globalEnv.rawWindow.__REACT_ERROR_OVERLAY_GLOBAL_HOOK__ = rawReactErrorHook;
+            });
+        }
+    }
+}
+
 // Record element and map element
 const dynamicElementInMicroAppMap = new WeakMap();
 /**
@@ -974,51 +1146,55 @@ function handleNewNode(parent, child, app) {
  * @param passiveChild second param of insertBefore and replaceChild
  */
 function invokePrototypeMethod(app, rawMethod, parent, targetChild, passiveChild) {
+    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 (parent === document.head) {
-        const microAppHead = app.container.querySelector('micro-app-head');
+    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 && !microAppHead.contains(passiveChild)) {
-            return globalEnv.rawAppendChild.call(microAppHead, targetChild);
+        if (passiveChild && !hijackElement.contains(passiveChild)) {
+            return globalEnv.rawAppendChild.call(hijackElement, targetChild);
         }
-        else if (rawMethod === globalEnv.rawRemoveChild && !microAppHead.contains(targetChild)) {
+        else if (rawMethod === globalEnv.rawRemoveChild && !hijackElement.contains(targetChild)) {
             if (parent.contains(targetChild)) {
                 return rawMethod.call(parent, targetChild);
             }
             return targetChild;
         }
-        else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-            return rawMethod.call(microAppHead, targetChild);
+        // TODO: __DEV__
+        if (process.env.NODE_ENV !== 'production' &&
+            targetChild instanceof HTMLIFrameElement &&
+            rawMethod === globalEnv.rawAppendChild) {
+            fixReactHMRConflict(app);
         }
-        return rawMethod.call(microAppHead, targetChild, passiveChild);
+        return invokeRawMethod(rawMethod, hijackElement, targetChild, passiveChild);
     }
-    else if (parent === document.body) {
-        const microAppBody = app.container.querySelector('micro-app-body');
-        if (passiveChild && !microAppBody.contains(passiveChild)) {
-            return globalEnv.rawAppendChild.call(microAppBody, targetChild);
-        }
-        else if (rawMethod === globalEnv.rawRemoveChild && !microAppBody.contains(targetChild)) {
-            if (parent.contains(targetChild)) {
-                return rawMethod.call(parent, targetChild);
-            }
-            return targetChild;
-        }
-        else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-            return rawMethod.call(microAppBody, targetChild);
-        }
-        return rawMethod.call(microAppBody, targetChild, passiveChild);
+    return invokeRawMethod(rawMethod, parent, targetChild, passiveChild);
+}
+// 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');
     }
-    else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
+    if (node === document.body) {
+        return (_b = app === null || app === void 0 ? void 0 : app.container) === null || _b === void 0 ? void 0 : _b.querySelector('micro-app-body');
+    }
+    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;
@@ -1106,27 +1282,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
@@ -1134,7 +1289,8 @@ function patchElementPrototypeMethods() {
  */
 function markElement(element) {
     const appName = getCurrentAppName();
-    appName && (element.__MICRO_APP_NAME__ = appName);
+    if (appName)
+        element.__MICRO_APP_NAME__ = appName;
     return element;
 }
 // methods of document
@@ -1155,27 +1311,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;
@@ -1243,10 +1401,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;
@@ -1293,7 +1450,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;
@@ -1307,27 +1463,6 @@ function rejectMicroAppStyle() {
     }
 }
 
-function unmountNestedApp() {
-    releaseUnmountOfNestedApp();
-    appInstanceMap.forEach(app => {
-        // @ts-ignore
-        app.container && getRootContainer(app.container).disconnectedCallback();
-    });
-    !window.__MICRO_APP_UMD_MODE__ && appInstanceMap.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
@@ -1347,7 +1482,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;
@@ -1381,7 +1515,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,
@@ -1391,7 +1525,6 @@ function initGlobalEnv() {
             rawAppend,
             rawPrepend,
             rawCloneNode,
-            // rawGetBoundingClientRect,
             rawCreateElement,
             rawCreateElementNS,
             rawCreateDocumentFragment,
@@ -1418,8 +1551,6 @@ function initGlobalEnv() {
         });
         // global effect
         rejectMicroAppStyle();
-        releaseUnmountOfNestedApp();
-        listenUmountOfNestedApp();
     }
 }
 
@@ -2140,6 +2271,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__))
@@ -2179,6 +2332,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;
@@ -2272,32 +2440,18 @@ 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
  */
-function effect(microAppWindow) {
-    const appName = microAppWindow.__MICRO_APP_NAME__;
+function effect(appName, microAppWindow) {
     const eventListenerMap = new Map();
     const intervalIdMap = new Map();
     const timeoutIdMap = new Map();
     const { rawWindow, rawDocument, rawWindowAddEventListener, rawWindowRemoveEventListener, rawSetInterval, rawSetTimeout, rawClearInterval, rawClearTimeout, rawDocumentRemoveEventListener, } = globalEnv;
     // listener may be null, e.g test-passive
     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);
@@ -2309,7 +2463,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);
@@ -2436,125 +2590,1015 @@ 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];
         }
-    }
-    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) {
-                releaseEffectDocumentEvent();
-                releasePatches();
-            }
+        if (!Object.keys(rawState.microAppState).length) {
+            delete rawState.microAppState;
         }
     }
-    // record umd snapshot before the first execution of umdHookMount
-    recordUmdSnapshot() {
-        this.microAppWindow.__MICRO_APP_UMD_MODE__ = true;
-        this.recordUmdEffect();
-        recordDataCenterSnapshot(this.microAppWindow.microApp);
-        this.recordUmdInjectedValues = new Map();
-        this.injectedKeys.forEach((key) => {
-            this.recordUmdInjectedValues.set(key, Reflect.get(this.microAppWindow, key));
-        });
+    // 生成新的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);
     }
-    // rebuild umd snapshot before remount umd app
-    rebuildUmdSnapshot() {
-        this.recordUmdInjectedValues.forEach((value, key) => {
-            Reflect.set(this.proxyWindow, key, value);
-        });
-        this.rebuildUmdEffect();
-        rebuildDataCenterSnapshot(this.microAppWindow.microApp);
+    catch (_a) {
+        return path;
     }
-    /**
-     * get scopeProperties and escapeProperties from plugins
-     * @param appName app name
-     */
-    getSpecialProperties(appName) {
-        var _a;
-        if (!isPlainObject(microApp.plugins))
-            return;
-        this.commonActionForSpecialProperties(microApp.plugins.global);
-        this.commonActionForSpecialProperties((_a = microApp.plugins.modules) === null || _a === void 0 ? void 0 : _a[appName]);
+}
+// 格式化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);
     }
-    // common action for global plugins and module plugins
-    commonActionForSpecialProperties(plugins) {
-        if (isArray(plugins)) {
-            for (const plugin of plugins) {
-                if (isPlainObject(plugin)) {
-                    if (isArray(plugin.scopeProperties)) {
-                        this.scopeProperties = this.scopeProperties.concat(plugin.scopeProperties);
-                    }
-                    if (isArray(plugin.escapeProperties)) {
-                        this.escapeProperties = this.escapeProperties.concat(plugin.escapeProperties);
-                    }
-                }
-            }
+    else {
+        if (queryObject.searchQuery) {
+            queryObject.searchQuery[formatQueryAppName(appName)] = encodedMicroPath;
+        }
+        else {
+            queryObject.searchQuery = {
+                [formatQueryAppName(appName)]: encodedMicroPath
+            };
         }
+        search = '?' + stringifyQuery(queryObject.searchQuery);
     }
-    // create proxyWindow with Proxy(microAppWindow)
-    createProxyWindow(appName) {
-        const rawWindow = globalEnv.rawWindow;
-        const descriptorTargetMap = new Map();
-        // window.xxx will trigger proxy
-        return new Proxy(this.microAppWindow, {
-            get: (target, key) => {
-                throttleDeferForSetAppName(appName);
+    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));
+}
+
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/API/fetch
+ * Promise<Response> fetch(input[, init])
+ * input: string/Request
+ * init?: object
+ * @param url app url
+ * @param target proxy target
+ */
+function createMicroFetch(url, target) {
+    if (!isUndefined(target) && !isFunction(target))
+        return target;
+    const rawFetch = target || globalEnv.rawWindow.fetch;
+    return function microFetch(input, init, ...rests) {
+        if (isString(input) || isURL(input)) {
+            input = createURL(input, url).toString();
+        }
+        return rawFetch.call(globalEnv.rawWindow, input, init, ...rests);
+    };
+}
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
+ * https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest
+ * @param url app url
+ * @param target proxy target
+ */
+function createMicroXMLHttpRequest(url, target) {
+    if (!isUndefined(target) && !isFunction(target))
+        return target;
+    const rawXMLHttpRequest = target || globalEnv.rawWindow.XMLHttpRequest;
+    return class MicroXMLHttpRequest extends rawXMLHttpRequest {
+        open(method, reqUrl, ...rests) {
+            if ((isString(reqUrl) && !/^f(ile|tp):\/\//.test(reqUrl)) || isURL(reqUrl)) {
+                reqUrl = createURL(reqUrl, url).toString();
+            }
+            super.open(method, reqUrl, ...rests);
+        }
+    };
+}
+function useMicroEventSource() {
+    let eventSourceMap;
+    /**
+     * https://developer.mozilla.org/en-US/docs/Web/API/EventSource
+     * pc = new EventSource(url[, configuration])
+     * url: string/Request
+     * configuration?: object
+     * @param url app url
+     * @param target proxy target
+     */
+    function createMicroEventSource(appName, url, target) {
+        if (!isUndefined(target) && !isFunction(target))
+            return target;
+        const rawEventSource = target || globalEnv.rawWindow.EventSource;
+        return class MicroEventSource extends rawEventSource {
+            constructor(eventSourceUrl, eventSourceInitDict, ...rests) {
+                if (isString(eventSourceUrl) || isURL(eventSourceUrl)) {
+                    eventSourceUrl = createURL(eventSourceUrl, url).toString();
+                }
+                super(eventSourceUrl, eventSourceInitDict, ...rests);
+                if (eventSourceMap) {
+                    const eventSourceList = eventSourceMap.get(appName);
+                    if (eventSourceList) {
+                        eventSourceList.add(this);
+                    }
+                    else {
+                        eventSourceMap.set(appName, new Set([this]));
+                    }
+                }
+                else {
+                    eventSourceMap = new Map([[appName, new Set([this])]]);
+                }
+            }
+            close() {
+                var _a;
+                super.close();
+                (_a = eventSourceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.delete(this);
+            }
+        };
+    }
+    function clearMicroEventSource(appName) {
+        const eventSourceList = eventSourceMap === null || eventSourceMap === void 0 ? void 0 : eventSourceMap.get(appName);
+        if (eventSourceList === null || eventSourceList === void 0 ? void 0 : eventSourceList.size) {
+            eventSourceList.forEach(item => {
+                item.close();
+            });
+            eventSourceList.clear();
+        }
+    }
+    return {
+        createMicroEventSource,
+        clearMicroEventSource,
+    };
+}
+
+const { createMicroEventSource, clearMicroEventSource } = useMicroEventSource();
+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)
+         * Fix https://github.com/micro-zoe/micro-app/issues/234
+         */
+        this.scopeProperties = [];
+        // 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
+        this.adapter = new Adapter();
+        // get scopeProperties and escapeProperties from plugins
+        this.getSpecialProperties(appName);
+        // create proxyWindow with Proxy(microAppWindow)
+        this.proxyWindow = this.createProxyWindow(appName);
+        // Rewrite global event listener & timeout
+        assign(this, effect(appName, this.microAppWindow));
+        // inject global properties
+        this.initStaticGlobalKeys(this.microAppWindow, appName, url, useMemoryRouter);
+    }
+    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;
+            }
+            // prevent the key deleted during sandBox.stop after rewrite
+            this.initGlobalKeysWhenStart(this.microAppWindow, this.proxyWindow.__MICRO_APP_NAME__, this.proxyWindow.__MICRO_APP_URL__);
+            if (++SandBox.activeCount === 1) {
+                effectDocumentEvent();
+                patchElementPrototypeMethods();
+                listenUmountOfNestedApp();
+            }
+            fixBabelPolyfill6();
+        }
+    }
+    stop(keepRouteState, clearEventSource) {
+        if (this.active) {
+            this.releaseEffect();
+            this.microAppWindow.microApp.clearDataListener();
+            this.microAppWindow.microApp.clearGlobalDataListener();
+            if (this.removeHistoryListener) {
+                this.clearRouteState(keepRouteState);
+                // release listener of popstate
+                this.removeHistoryListener();
+            }
+            if (clearEventSource) {
+                clearMicroEventSource(this.proxyWindow.__MICRO_APP_NAME__);
+            }
+            /**
+             * NOTE:
+             *  1. injectedKeys and escapeKeys must be placed at the back
+             *  2. if key in initial microAppWindow, and then rewrite, this key will be delete from microAppWindow when stop, and lost when restart
+             */
+            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) {
+                releaseEffectDocumentEvent();
+                releasePatches();
+            }
+            this.active = false;
+        }
+    }
+    // record umd snapshot before the first execution of umdHookMount
+    recordUmdSnapshot() {
+        this.microAppWindow.__MICRO_APP_UMD_MODE__ = true;
+        this.recordUmdEffect();
+        recordDataCenterSnapshot(this.microAppWindow.microApp);
+        this.recordUmdInjectedValues = new Map();
+        this.injectedKeys.forEach((key) => {
+            this.recordUmdInjectedValues.set(key, Reflect.get(this.microAppWindow, key));
+        });
+    }
+    // rebuild umd snapshot before remount umd app
+    rebuildUmdSnapshot() {
+        this.recordUmdInjectedValues.forEach((value, key) => {
+            Reflect.set(this.proxyWindow, key, value);
+        });
+        this.rebuildUmdEffect();
+        rebuildDataCenterSnapshot(this.microAppWindow.microApp);
+    }
+    /**
+     * get scopeProperties and escapeProperties from plugins & adapter
+     * @param appName app name
+     */
+    getSpecialProperties(appName) {
+        var _a;
+        this.scopeProperties = this.scopeProperties.concat(this.adapter.staticScopeProperties);
+        if (isPlainObject(microApp.plugins)) {
+            this.commonActionForSpecialProperties(microApp.plugins.global);
+            this.commonActionForSpecialProperties((_a = microApp.plugins.modules) === null || _a === void 0 ? void 0 : _a[appName]);
+        }
+    }
+    // common action for global plugins and module plugins
+    commonActionForSpecialProperties(plugins) {
+        if (isArray(plugins)) {
+            for (const plugin of plugins) {
+                if (isPlainObject(plugin)) {
+                    if (isArray(plugin.scopeProperties)) {
+                        this.scopeProperties = this.scopeProperties.concat(plugin.scopeProperties);
+                    }
+                    if (isArray(plugin.escapeProperties)) {
+                        this.escapeProperties = this.escapeProperties.concat(plugin.escapeProperties);
+                    }
+                }
+            }
+        }
+    }
+    // create proxyWindow with Proxy(microAppWindow)
+    createProxyWindow(appName) {
+        const rawWindow = globalEnv.rawWindow;
+        const descriptorTargetMap = new Map();
+        // window.xxx will trigger proxy
+        return new Proxy(this.microAppWindow, {
+            get: (target, key) => {
+                throttleDeferForSetAppName(appName);
                 if (Reflect.has(target, key) ||
                     (isString(key) && /^__MICRO_APP_/.test(key)) ||
                     this.scopeProperties.includes(key))
@@ -2564,7 +3608,7 @@ class SandBox {
             },
             set: (target, key, value) => {
                 if (this.active) {
-                    if (escapeSetterKeyList.includes(key)) {
+                    if (this.adapter.escapeSetterKeyList.includes(key)) {
                         Reflect.set(rawWindow, key, value);
                     }
                     else if (
@@ -2588,7 +3632,8 @@ class SandBox {
                         this.injectedKeys.add(key);
                     }
                     if ((this.escapeProperties.includes(key) ||
-                        (staticEscapeProperties.includes(key) && !Reflect.has(rawWindow, key))) &&
+                        (this.adapter.staticEscapeProperties.includes(key) &&
+                            !Reflect.has(rawWindow, key))) &&
                         !this.scopeProperties.includes(key)) {
                         Reflect.set(rawWindow, key, value);
                         this.escapeKeys.add(key);
@@ -2644,21 +3689,35 @@ class SandBox {
      * @param microAppWindow micro window
      * @param appName app name
      * @param url app url
+     * @param useMemoryRouter whether use memory router
      */
-    initMicroAppWindow(microAppWindow, appName, url) {
+    initStaticGlobalKeys(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.rawWindow = globalEnv.rawWindow;
+        microAppWindow.rawDocument = globalEnv.rawDocument;
+        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);
+        if (useMemoryRouter)
+            this.setMicroAppRouter(microAppWindow, appName, url);
+    }
+    /**
+     * init global properties of microAppWindow when exec sandBox.start
+     * @param microAppWindow micro window
+     * @param appName app name
+     * @param url app url
+     */
+    initGlobalKeysWhenStart(microAppWindow, appName, url) {
+        microAppWindow.hasOwnProperty = (key) => rawHasOwnProperty.call(microAppWindow, key) || rawHasOwnProperty.call(globalEnv.rawWindow, key);
         this.setHijackProperties(microAppWindow, appName);
+        this.patchHijackRequest(microAppWindow, appName, url);
     }
     // properties associated with the native window
     setMappingPropertiesWithRawDescriptor(microAppWindow) {
@@ -2692,14 +3751,16 @@ class SandBox {
         let modifiedEval, modifiedImage;
         rawDefineProperties(microAppWindow, {
             document: {
+                configurable: true,
+                enumerable: true,
                 get() {
                     throttleDeferForSetAppName(appName);
                     return globalEnv.rawDocument;
                 },
-                configurable: false,
-                enumerable: true,
             },
             eval: {
+                configurable: true,
+                enumerable: false,
                 get() {
                     throttleDeferForSetAppName(appName);
                     return modifiedEval || eval;
@@ -2707,10 +3768,10 @@ class SandBox {
                 set: (value) => {
                     modifiedEval = value;
                 },
-                configurable: true,
-                enumerable: false,
             },
             Image: {
+                configurable: true,
+                enumerable: false,
                 get() {
                     throttleDeferForSetAppName(appName);
                     return modifiedImage || globalEnv.ImageProxy;
@@ -2718,11 +3779,82 @@ class SandBox {
                 set: (value) => {
                     modifiedImage = value;
                 },
+            },
+        });
+    }
+    // rewrite fetch, XMLHttpRequest, EventSource
+    patchHijackRequest(microAppWindow, appName, url) {
+        let microFetch = createMicroFetch(url);
+        let microXMLHttpRequest = createMicroXMLHttpRequest(url);
+        let microEventSource = createMicroEventSource(appName, url);
+        rawDefineProperties(microAppWindow, {
+            fetch: {
                 configurable: true,
-                enumerable: false,
+                enumerable: true,
+                get() {
+                    return microFetch;
+                },
+                set(value) {
+                    microFetch = createMicroFetch(url, value);
+                },
+            },
+            XMLHttpRequest: {
+                configurable: true,
+                enumerable: true,
+                get() {
+                    return microXMLHttpRequest;
+                },
+                set(value) {
+                    microXMLHttpRequest = createMicroXMLHttpRequest(url, value);
+                },
+            },
+            EventSource: {
+                configurable: true,
+                enumerable: true,
+                get() {
+                    return microEventSource;
+                },
+                set(value) {
+                    microEventSource = createMicroEventSource(appName, url, value);
+                },
+            },
+        });
+    }
+    // set location & history for memory router
+    setMicroAppRouter(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: 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
 
@@ -2756,7 +3888,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 && {
@@ -2781,7 +3913,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);
@@ -2790,8 +3922,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;
@@ -2802,27 +3934,29 @@ 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;
+        this.state = appStates.LOADING;
         extractHtml(this);
     }
     /**
@@ -2837,7 +3971,7 @@ class CreateApp {
                 this.prefetchResolve = null;
             }
             else if (appStates.UNMOUNT !== this.state) {
-                this.state = appStates.LOAD_SOURCE_FINISHED;
+                this.state = appStates.LOADED;
                 this.mount();
             }
         }
@@ -2854,7 +3988,7 @@ class CreateApp {
         }
         if (appStates.UNMOUNT !== this.state) {
             this.onerror(e);
-            this.state = appStates.LOAD_SOURCE_ERROR;
+            this.state = appStates.LOAD_FAILED;
         }
     }
     /**
@@ -2862,22 +3996,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;
@@ -2942,11 +4080,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;
@@ -2999,8 +4138,13 @@ class CreateApp {
         else if (this.umdMode && this.container.childElementCount) {
             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();
+        /**
+         * this.container maybe contains micro-app element, stop sandbox should exec after cloneContainer
+         * NOTE:
+         * 1. if destroy is true, clear route state
+         * 2. umd mode and keep-alive will not clear EventSource
+         */
+        (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.stop(this.keepRouteState && !destroy, !this.umdMode || destroy);
         if (!getActiveApps().length) {
             releasePatchSetAttribute();
         }
@@ -3019,34 +4163,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);
     }
     /**
@@ -3154,12 +4304,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) {
@@ -3207,12 +4362,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;
@@ -3246,15 +4396,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 = '';
@@ -3314,14 +4458,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)) {
@@ -3335,7 +4479,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);
         }
@@ -3343,11 +4490,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() {
@@ -3410,6 +4558,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
          */
@@ -3444,12 +4623,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) {
@@ -3467,7 +4647,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);
@@ -3477,6 +4657,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;
@@ -3545,7 +4726,7 @@ function getAllApps() {
 /**
  * unmount app by appName
  * @param appName
- * @param options unmountAppParams
+ * @param options unmountAppOptions
  * @returns Promise<void>
  */
 function unmountApp(appName, options) {
@@ -3619,6 +4800,7 @@ class MicroApp extends EventCenterForBaseApp {
         super(...arguments);
         this.tagName = 'micro-app';
         this.preFetch = preFetch;
+        this.router = router;
     }
     start(options) {
         if (!isBrowser || !window.customElements) {
@@ -3648,6 +4830,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);