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

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '1.0.0-alpha.1';
+const version = '1.0.0-alpha.2';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -41,6 +41,10 @@ function isFunction(target) {
 function isPlainObject(target) {
     return toString.call(target) === '[object Object]';
 }
+// is Object
+function isObject(target) {
+    return typeof target === 'object';
+}
 // is Promise
 function isPromise(target) {
     return toString.call(target) === '[object Promise]';
@@ -49,6 +53,18 @@ function isPromise(target) {
 function isBoundFunction(target) {
     return isFunction(target) && target.name.indexOf('bound ') === 0 && !target.hasOwnProperty('prototype');
 }
+// is constructor function
+function isConstructor(target) {
+    var _a;
+    if (isFunction(target)) {
+        const targetStr = target.toString();
+        return (((_a = target.prototype) === null || _a === void 0 ? void 0 : _a.constructor) === target &&
+            Object.getOwnPropertyNames(target.prototype).length > 1) ||
+            /^function\s+[A-Z]/.test(targetStr) ||
+            /^class\s+/.test(targetStr);
+    }
+    return false;
+}
 // is ShadowRoot
 function isShadowRoot(target) {
     return typeof ShadowRoot !== 'undefined' && target instanceof ShadowRoot;
@@ -270,6 +286,7 @@ function pureCreateElement(tagName, options) {
     const element = document.createElement(tagName, options);
     if (element.__MICRO_APP_NAME__)
         delete element.__MICRO_APP_NAME__;
+    element.__PURE_ELEMENT__ = true;
     return element;
 }
 /**
@@ -465,10 +482,18 @@ const globalKeyToBeCached = 'window,self,globalThis,Array,Object,String,Boolean,
  * @param config fetch options
  */
 function fetchSource(url, appName = null, options = {}) {
+    /**
+     * When child navigate to new async page, click event will scope dom to child and then fetch new source
+     * this may cause error when fetch rewrite by baseApp
+     * e.g.
+     * baseApp: <script crossorigin src="https://sgm-static.jd.com/sgm-2.8.0.js" name="SGMH5" sid="6f88a6e4ba4b4ae5acef2ec22c075085" appKey="jdb-adminb2b-pc"></script>
+     */
+    removeDomScope();
     if (isFunction(microApp.fetch)) {
         return microApp.fetch(url, options, appName);
     }
-    return fetch(url, options).then((res) => {
+    // Don’t use globalEnv.rawWindow.fetch, will cause sgm-2.8.0.js throw error in nest app
+    return window.fetch(url, options).then((res) => {
         return res.text();
     });
 }
@@ -551,7 +576,7 @@ class CSSParser {
         return true;
     }
     formatSelector(skip) {
-        const m = this.commonMatch(/^([^{]+)/, skip);
+        const m = this.commonMatch(/^[^{]+/, skip);
         if (!m)
             return false;
         return m[0].replace(/(^|,[\n\s]*)([^,]+)/g, (_, separator, selector) => {
@@ -631,7 +656,7 @@ class CSSParser {
     keyframesRule() {
         if (!this.commonMatch(/^@([-\w]+)?keyframes\s*/))
             return false;
-        if (!this.commonMatch(/^([-\w]+)\s*/))
+        if (!this.commonMatch(/^[^{]+/))
             return parseError('@keyframes missing name', this.linkPath);
         this.matchComments();
         if (!this.matchOpenBrace())
@@ -783,7 +808,7 @@ class CSSParser {
     }
     // splice string
     recordResult(strFragment) {
-        // Firefox is slow when string contain special characters, see https://github.com/micro-zoe/micro-app/issues/256
+        // Firefox performance degradation when string contain special characters, see https://github.com/micro-zoe/micro-app/issues/256
         if (isFireFox()) {
             this.result += encodeURIComponent(strFragment);
         }
@@ -1071,6 +1096,27 @@ function fixReactHMRConflict(app) {
         }
     }
 }
+/**
+ * reDefine parentNode of html
+ * Scenes:
+ *  1. element-ui popover.js
+ *     if (html.parentNode === document) ...
+ */
+function throttleDeferForParentNode(proxyDocument) {
+    const html = globalEnv.rawDocument.firstElementChild;
+    if (html && html.parentNode !== proxyDocument) {
+        setRootParentNode(html, proxyDocument);
+        defer(() => {
+            setRootParentNode(html, globalEnv.rawDocument);
+        });
+    }
+}
+function setRootParentNode(root, value) {
+    Object.defineProperty(root, 'parentNode', {
+        value,
+        configurable: true,
+    });
+}
 
 // Record element and map element
 const dynamicElementInMicroAppMap = new WeakMap();
@@ -1208,20 +1254,35 @@ function getMappingNode(node) {
  * @param rawMethod method
  */
 function commonElementHandler(parent, newChild, passiveChild, rawMethod) {
-    if (newChild === null || newChild === void 0 ? void 0 : newChild.__MICRO_APP_NAME__) {
+    const currentAppName = getCurrentAppName();
+    if (newChild instanceof Node &&
+        (newChild.__MICRO_APP_NAME__ ||
+            (currentAppName && !newChild.__PURE_ELEMENT__))) {
+        newChild.__MICRO_APP_NAME__ = newChild.__MICRO_APP_NAME__ || currentAppName;
         const app = appInstanceMap.get(newChild.__MICRO_APP_NAME__);
         if (app === null || app === void 0 ? void 0 : app.container) {
+            if (newChild instanceof Element) {
+                if (/^(img|script)$/i.test(newChild.tagName)) {
+                    if (newChild.hasAttribute('src')) {
+                        globalEnv.rawSetAttribute.call(newChild, 'src', CompletionPath(newChild.getAttribute('src'), app.url));
+                    }
+                    if (newChild.hasAttribute('srcset')) {
+                        globalEnv.rawSetAttribute.call(newChild, 'srcset', CompletionPath(newChild.getAttribute('srcset'), app.url));
+                    }
+                }
+                else if (/^link$/i.test(newChild.tagName) && newChild.hasAttribute('href')) {
+                    globalEnv.rawSetAttribute.call(newChild, 'href', CompletionPath(newChild.getAttribute('href'), app.url));
+                }
+            }
             return invokePrototypeMethod(app, rawMethod, parent, handleNewNode(parent, newChild, app), passiveChild && getMappingNode(passiveChild));
         }
         else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
             return rawMethod.call(parent, newChild);
         }
-        return rawMethod.call(parent, newChild, passiveChild);
     }
     else if (rawMethod === globalEnv.rawAppend || rawMethod === globalEnv.rawPrepend) {
-        const appName = getCurrentAppName();
-        if (!(newChild instanceof Node) && appName) {
-            const app = appInstanceMap.get(appName);
+        if (!(newChild instanceof Node) && currentAppName) {
+            const app = appInstanceMap.get(currentAppName);
             if (app === null || app === void 0 ? void 0 : app.container) {
                 if (parent === document.head) {
                     return rawMethod.call(app.container.querySelector('micro-app-head'), newChild);
@@ -1267,12 +1328,18 @@ function patchElementPrototypeMethods() {
     };
     // prototype methods of delete element👇
     Element.prototype.removeChild = function removeChild(oldChild) {
+        var _a;
         if (oldChild === null || oldChild === void 0 ? void 0 : oldChild.__MICRO_APP_NAME__) {
             const app = appInstanceMap.get(oldChild.__MICRO_APP_NAME__);
             if (app === null || app === void 0 ? void 0 : app.container) {
                 return invokePrototypeMethod(app, globalEnv.rawRemoveChild, this, getMappingNode(oldChild));
             }
-            return globalEnv.rawRemoveChild.call(this, oldChild);
+            try {
+                return globalEnv.rawRemoveChild.call(this, oldChild);
+            }
+            catch (_b) {
+                return (_a = oldChild === null || oldChild === void 0 ? void 0 : oldChild.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(oldChild);
+            }
         }
         return globalEnv.rawRemoveChild.call(this, oldChild);
     };
@@ -1288,9 +1355,9 @@ function patchElementPrototypeMethods() {
  * @param element new element
  */
 function markElement(element) {
-    const appName = getCurrentAppName();
-    if (appName)
-        element.__MICRO_APP_NAME__ = appName;
+    const currentAppName = getCurrentAppName();
+    if (currentAppName)
+        element.__MICRO_APP_NAME__ = currentAppName;
     return element;
 }
 // methods of document
@@ -1312,28 +1379,28 @@ function patchDocument() {
     // query element👇
     function querySelector(selectors) {
         var _a, _b, _c, _d;
-        const appName = getCurrentAppName();
-        if (!appName ||
-            !((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container) ||
+        const currentAppName = getCurrentAppName();
+        if (!currentAppName ||
+            !((_a = appInstanceMap.get(currentAppName)) === 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 (_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;
+        return (_d = (_c = (_b = appInstanceMap.get(currentAppName)) === 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, _d;
-        const appName = getCurrentAppName();
-        if (!appName ||
-            !((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.container) ||
+        const currentAppName = getCurrentAppName();
+        if (!currentAppName ||
+            !((_a = appInstanceMap.get(currentAppName)) === null || _a === void 0 ? void 0 : _a.container) ||
             !selectors ||
             isUniqueElement(selectors) ||
             rawDocument !== this) {
             return globalEnv.rawQuerySelectorAll.call(this, selectors);
         }
-        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 : [];
+        return (_d = (_c = (_b = appInstanceMap.get(currentAppName)) === 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;
@@ -1361,11 +1428,11 @@ function patchDocument() {
     };
     Document.prototype.getElementsByTagName = function getElementsByTagName(key) {
         var _a;
-        const appName = getCurrentAppName();
-        if (!appName ||
+        const currentAppName = getCurrentAppName();
+        if (!currentAppName ||
             isUniqueElement(key) ||
             isInvalidQuerySelectorKey(key) ||
-            (!((_a = appInstanceMap.get(appName)) === null || _a === void 0 ? void 0 : _a.inline) && /^script$/i.test(key))) {
+            (!((_a = appInstanceMap.get(currentAppName)) === null || _a === void 0 ? void 0 : _a.inline) && /^script$/i.test(key))) {
             return globalEnv.rawGetElementsByTagName.call(this, key);
         }
         try {
@@ -1401,9 +1468,9 @@ function patchSetAttribute() {
         if (/^micro-app(-\S+)?/i.test(this.tagName) && key === 'data') {
             if (isPlainObject(value)) {
                 const cloneValue = {};
-                Object.getOwnPropertyNames(value).forEach((key) => {
-                    if (!(isString(key) && key.indexOf('__') === 0)) {
-                        cloneValue[key] = value[key];
+                Object.getOwnPropertyNames(value).forEach((ownKey) => {
+                    if (!(isString(ownKey) && ownKey.indexOf('__') === 0)) {
+                        cloneValue[ownKey] = value[ownKey];
                     }
                 });
                 this.data = cloneValue;
@@ -1412,14 +1479,15 @@ function patchSetAttribute() {
                 logWarn('property data must be an object', this.getAttribute('name'));
             }
         }
-        else if ((((key === 'src' || key === 'srcset') && /^(img|script)$/i.test(this.tagName)) ||
-            (key === 'href' && /^link$/i.test(this.tagName))) &&
-            this.__MICRO_APP_NAME__ &&
-            appInstanceMap.has(this.__MICRO_APP_NAME__)) {
-            const app = appInstanceMap.get(this.__MICRO_APP_NAME__);
-            globalEnv.rawSetAttribute.call(this, key, CompletionPath(value, app.url));
-        }
         else {
+            const appName = this.__MICRO_APP_NAME__ || getCurrentAppName();
+            if (appName &&
+                appInstanceMap.has(appName) &&
+                (((key === 'src' || key === 'srcset') && /^(img|script)$/i.test(this.tagName)) ||
+                    (key === 'href' && /^link$/i.test(this.tagName)))) {
+                const app = appInstanceMap.get(appName);
+                value = CompletionPath(value, app.url);
+            }
             globalEnv.rawSetAttribute.call(this, key, value);
         }
     };
@@ -2286,7 +2354,7 @@ function releaseUnmountOfNestedApp() {
 }
 // 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() {
+function initEnvOfNestedApp() {
     if (window.__MICRO_APP_ENVIRONMENT__) {
         releaseUnmountOfNestedApp();
         window.addEventListener('unmount', unmountNestedApp, false);
@@ -2299,35 +2367,30 @@ function isBoundedFunction(value) {
         return value.__MICRO_APP_IS_BOUND_FUNCTION__;
     return value.__MICRO_APP_IS_BOUND_FUNCTION__ = isBoundFunction(value);
 }
-function isConstructor(value) {
-    var _a;
+function isConstructorFunction(value) {
     if (isBoolean(value.__MICRO_APP_IS_CONSTRUCTOR__))
         return value.__MICRO_APP_IS_CONSTRUCTOR__;
-    const valueStr = value.toString();
-    const result = (((_a = value.prototype) === null || _a === void 0 ? void 0 : _a.constructor) === value &&
-        Object.getOwnPropertyNames(value.prototype).length > 1) ||
-        /^function\s+[A-Z]/.test(valueStr) ||
-        /^class\s+/.test(valueStr);
-    return value.__MICRO_APP_IS_CONSTRUCTOR__ = result;
+    return value.__MICRO_APP_IS_CONSTRUCTOR__ = isConstructor(value);
 }
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-function bindFunctionToRawWindow(rawWindow, value) {
-    if (value.__MICRO_APP_BOUND_WINDOW_FUNCTION__)
-        return value.__MICRO_APP_BOUND_WINDOW_FUNCTION__;
-    if (!isConstructor(value) && !isBoundedFunction(value)) {
-        const bindRawWindowValue = value.bind(rawWindow);
+function bindFunctionToRawObject(rawObject, value, key = 'WINDOW') {
+    const cacheKey = `__MICRO_APP_BOUND_${key}_FUNCTION__`;
+    if (value[cacheKey])
+        return value[cacheKey];
+    if (!isConstructorFunction(value) && !isBoundedFunction(value)) {
+        const bindRawObjectValue = value.bind(rawObject);
         for (const key in value) {
-            bindRawWindowValue[key] = value[key];
+            bindRawObjectValue[key] = value[key];
         }
         if (value.hasOwnProperty('prototype')) {
-            rawDefineProperty(bindRawWindowValue, 'prototype', {
+            rawDefineProperty(bindRawObjectValue, 'prototype', {
                 value: value.prototype,
                 configurable: true,
                 enumerable: false,
                 writable: true,
             });
         }
-        return value.__MICRO_APP_BOUND_WINDOW_FUNCTION__ = bindRawWindowValue;
+        return value[cacheKey] = bindRawObjectValue;
     }
     return value;
 }
@@ -2746,7 +2809,10 @@ function addHistoryListener(appName) {
     const rawWindow = globalEnv.rawWindow;
     // handle popstate event and distribute to child app
     const popStateHandler = (e) => {
-        // exclude hidden keep-alive app
+        /**
+         * 1. unmount app & hidden keep-alive app will not receive popstate event
+         * 2. filter out onlyForBrowser
+         */
         if (getActiveApps(true).includes(appName) && !e.onlyForBrowser) {
             const microPath = getMicroPathFromURL(appName);
             const app = appInstanceMap.get(appName);
@@ -2847,8 +2913,7 @@ 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]))) {
+            if (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]);
@@ -2866,18 +2931,21 @@ function createMicroHistory(appName, microLocation) {
             }
         };
     }
+    const pushState = getMicroHistoryMethod('pushState');
+    const replaceState = getMicroHistoryMethod('replaceState');
     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);
+            else if (key === 'pushState') {
+                return pushState;
             }
-            return Reflect.get(target, key);
-        },
-        set(target, key, value) {
-            return Reflect.set(target, key, value);
+            else if (key === 'replaceState') {
+                return replaceState;
+            }
+            const rawValue = Reflect.get(target, key);
+            return isFunction(rawValue) ? bindFunctionToRawObject(target, rawValue, 'HISTORY') : rawValue;
         }
     });
 }
@@ -2894,7 +2962,7 @@ function nativeHistoryNavigate(methodName, fullPath, state = null, title = '') {
 /**
  * Navigate to new path, and dispatch native popStateEvent/hashChangeEvent to browser
  * Use scenes:
- * 1. mount/unmount through updateBrowserURL with limited popstateEvent
+ * 1. mount/unmount through attachRouteToBrowserURL with limited popstateEvent
  * 2. proxyHistory.pushState/replaceState with limited popstateEvent
  * 3. api microApp.router.push/replace
  * 4. proxyLocation.hash = xxx
@@ -2914,11 +2982,12 @@ function navigateWithNativeEvent(methodName, result, onlyForBrowser, state, titl
         dispatchNativeEvent(onlyForBrowser, oldHref);
 }
 /**
- * update browser url when mount/unmount/hidden/show
+ * update browser url when mount/unmount/hidden/show/attachToURL/attachAllToURL
+ * just attach microRoute info to browser, dispatch event to base app(exclude child)
  * @param result result of add/remove microApp path on browser url
  * @param state history.state
  */
-function updateBrowserURL(result, state) {
+function attachRouteToBrowserURL(result, state) {
     navigateWithNativeEvent('replaceState', result, true, state);
 }
 /**
@@ -2984,11 +3053,11 @@ function createRouterApi() {
     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`);
+                if (app && (!app.sandBox || !app.useMemoryRouter)) {
+                    return logError(`navigation failed, memory router of app ${appName} is closed`);
+                }
                 // active apps, include hidden keep-alive app
                 if (getActiveApps().includes(appName)) {
                     const microLocation = app.sandBox.proxyWindow.location;
@@ -3065,43 +3134,95 @@ function createRouterApi() {
     function clearRouterWhenUnmount(appName) {
         router.current.delete(appName);
     }
-    // defaultPage data
-    const defaultPageRecord = useMapRecord();
     /**
-     * defaultPage只在子应用初始化时生效，且优先级比浏览器上的子应用路由地址低
+     * NOTE:
+     * 1. sandbox not open
+     * 2. useMemoryRouter is false
+     */
+    function commonHandlerForAttachToURL(appName) {
+        const app = appInstanceMap.get(appName);
+        if (app.sandBox && app.useMemoryRouter) {
+            attachRouteToBrowserURL(setMicroPathToURL(appName, app.sandBox.proxyWindow.location), setMicroState(appName, globalEnv.rawWindow.history.state, null));
+        }
+    }
+    /**
+     * Attach specified active app router info to browser url
      * @param appName app name
-     * @param path page path
      */
-    function setDefaultPage(appName, path) {
+    function attachToURL(appName) {
         appName = formatAppName(appName);
-        if (!appName)
-            return noopFalse;
-        return defaultPageRecord.add(appName, path);
+        if (appName && getActiveApps().includes(appName)) {
+            commonHandlerForAttachToURL(appName);
+        }
     }
-    function removeDefaultPage(appName) {
-        appName = formatAppName(appName);
-        if (!appName)
-            return false;
-        return defaultPageRecord.delete(appName);
+    /**
+     * Attach all active app router info to browser url
+     */
+    function attachAllToURL() {
+        getActiveApps().forEach(appName => commonHandlerForAttachToURL(appName));
+    }
+    function createDefaultPageApi() {
+        // defaultPage data
+        const defaultPageRecord = useMapRecord();
+        /**
+         * defaultPage only effect when mount, and has lower priority than query on browser url
+         * @param appName app name
+         * @param path page path
+         */
+        function setDefaultPage(appName, path) {
+            appName = formatAppName(appName);
+            if (!appName || !path) {
+                if (process.env.NODE_ENV !== 'production') {
+                    if (!appName) {
+                        logWarn(`setDefaultPage: invalid appName "${appName}"`);
+                    }
+                    else {
+                        logWarn('setDefaultPage: path is required');
+                    }
+                }
+                return noopFalse;
+            }
+            return defaultPageRecord.add(appName, path);
+        }
+        function removeDefaultPage(appName) {
+            appName = formatAppName(appName);
+            if (!appName)
+                return false;
+            return defaultPageRecord.delete(appName);
+        }
+        return {
+            setDefaultPage,
+            removeDefaultPage,
+            getDefaultPage: defaultPageRecord.get,
+        };
+    }
+    function createBaseRouterApi() {
+        /**
+         * Record base app router, let child app control base app navigation
+         */
+        let baseRouterProxy = null;
+        function setBaseAppRouter(baseRouter) {
+            if (isObject(baseRouter)) {
+                baseRouterProxy = new Proxy(baseRouter, {
+                    get(target, key) {
+                        removeDomScope();
+                        const rawValue = Reflect.get(target, key);
+                        return isFunction(rawValue) ? bindFunctionToRawObject(target, rawValue, 'BASEROUTER') : rawValue;
+                    }
+                });
+            }
+            else if (process.env.NODE_ENV !== 'production') {
+                logWarn('setBaseAppRouter: Invalid base router');
+            }
+        }
+        return {
+            setBaseAppRouter,
+            getBaseAppRouter: () => baseRouterProxy,
+        };
     }
     // 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,
-    };
+    const router = Object.assign(Object.assign({ 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 }, createDefaultPageApi()), createBaseRouterApi());
     return {
         router,
         executeNavigationGuard,
@@ -3115,56 +3236,6 @@ const shadowLocationKeys = ['href', 'pathname', 'search', 'hash'];
 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
@@ -3309,6 +3380,56 @@ function createMicroLocation(appName, url) {
         shadowLocation,
     });
 }
+/**
+ * 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);
+    }
+}
 
 /**
  * The router system has two operations: read and write
@@ -3344,7 +3465,7 @@ function updateBrowserURLWithLocation(appName, microLocation, 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));
+    attachRouteToBrowserURL(setMicroPathToURL(appName, microLocation), setMicroState(appName, globalEnv.rawWindow.history.state, null));
     // trigger guards after change browser URL
     autoTriggerNavigationGuard(appName, microLocation);
 }
@@ -3368,7 +3489,7 @@ function clearRouteStateFromURL(appName, url, microLocation, keepRouteState) {
  * called on sandbox.stop or hidden of keep-alive app
  */
 function removeStateAndPathFromBrowser(appName) {
-    updateBrowserURL(removeMicroPathFromURL(appName), removeMicroState(appName, globalEnv.rawWindow.history.state));
+    attachRouteToBrowserURL(removeMicroPathFromURL(appName), removeMicroState(appName, globalEnv.rawWindow.history.state));
 }
 
 /**
@@ -3380,13 +3501,21 @@ function removeStateAndPathFromBrowser(appName) {
  * @param target proxy target
  */
 function createMicroFetch(url, target) {
-    if (!isUndefined(target) && !isFunction(target))
-        return target;
-    const rawFetch = target || globalEnv.rawWindow.fetch;
+    const rawFetch = !isUndefined(target) ? target : globalEnv.rawWindow.fetch;
+    if (!isFunction(rawFetch))
+        return rawFetch;
     return function microFetch(input, init, ...rests) {
         if (isString(input) || isURL(input)) {
             input = createURL(input, url).toString();
         }
+        /**
+         * When fetch rewrite by baseApp, domScope still active when exec rawWindow.fetch
+         * If baseApp operate dom in fetch, it will cause error
+         * The same for XMLHttpRequest, EventSource
+         * e.g.
+         * baseApp: <script crossorigin src="https://sgm-static.jd.com/sgm-2.8.0.js" name="SGMH5" sid="6f88a6e4ba4b4ae5acef2ec22c075085" appKey="jdb-adminb2b-pc"></script>
+         */
+        removeDomScope();
         return rawFetch.call(globalEnv.rawWindow, input, init, ...rests);
     };
 }
@@ -3397,14 +3526,15 @@ function createMicroFetch(url, target) {
  * @param target proxy target
  */
 function createMicroXMLHttpRequest(url, target) {
-    if (!isUndefined(target) && !isFunction(target))
-        return target;
-    const rawXMLHttpRequest = target || globalEnv.rawWindow.XMLHttpRequest;
+    const rawXMLHttpRequest = !isUndefined(target) ? target : globalEnv.rawWindow.XMLHttpRequest;
+    if (!isConstructor(rawXMLHttpRequest))
+        return rawXMLHttpRequest;
     return class MicroXMLHttpRequest extends rawXMLHttpRequest {
         open(method, reqUrl, ...rests) {
             if ((isString(reqUrl) && !/^f(ile|tp):\/\//.test(reqUrl)) || isURL(reqUrl)) {
                 reqUrl = createURL(reqUrl, url).toString();
             }
+            removeDomScope();
             super.open(method, reqUrl, ...rests);
         }
     };
@@ -3420,14 +3550,15 @@ function useMicroEventSource() {
      * @param target proxy target
      */
     function createMicroEventSource(appName, url, target) {
-        if (!isUndefined(target) && !isFunction(target))
-            return target;
-        const rawEventSource = target || globalEnv.rawWindow.EventSource;
+        const rawEventSource = !isUndefined(target) ? target : globalEnv.rawWindow.EventSource;
+        if (!isConstructor(rawEventSource))
+            return rawEventSource;
         return class MicroEventSource extends rawEventSource {
             constructor(eventSourceUrl, eventSourceInitDict, ...rests) {
                 if (isString(eventSourceUrl) || isURL(eventSourceUrl)) {
                     eventSourceUrl = createURL(eventSourceUrl, url).toString();
                 }
+                removeDomScope();
                 super(eventSourceUrl, eventSourceInitDict, ...rests);
                 if (eventSourceMap) {
                     const eventSourceList = eventSourceMap.get(appName);
@@ -3508,7 +3639,7 @@ class SandBox {
             if (++SandBox.activeCount === 1) {
                 effectDocumentEvent();
                 patchElementPrototypeMethods();
-                listenUmountOfNestedApp();
+                initEnvOfNestedApp();
             }
             fixBabelPolyfill6();
         }
@@ -3604,7 +3735,7 @@ class SandBox {
                     this.scopeProperties.includes(key))
                     return Reflect.get(target, key);
                 const rawValue = Reflect.get(rawWindow, key);
-                return isFunction(rawValue) ? bindFunctionToRawWindow(rawWindow, rawValue) : rawValue;
+                return isFunction(rawValue) ? bindFunctionToRawObject(rawWindow, rawValue) : rawValue;
             },
             set: (target, key, value) => {
                 if (this.active) {
@@ -3704,20 +3835,22 @@ class SandBox {
             pureCreateElement,
             router,
         });
+        this.setProxyDocument(microAppWindow, appName);
         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);
+    setProxyDocument(microAppWindow, appName) {
+        const proxyDocument = this.createProxyDocument(appName);
+        rawDefineProperty(microAppWindow, 'document', {
+            configurable: false,
+            enumerable: true,
+            get() {
+                throttleDeferForSetAppName(appName);
+                // return globalEnv.rawDocument
+                return proxyDocument;
+            },
+        });
     }
     // properties associated with the native window
     setMappingPropertiesWithRawDescriptor(microAppWindow) {
@@ -3746,18 +3879,21 @@ class SandBox {
         };
         return descriptor;
     }
+    /**
+     * 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.setHijackProperty(microAppWindow, appName);
+        this.patchRequestApi(microAppWindow, appName, url);
+    }
     // set hijack Properties to microAppWindow
-    setHijackProperties(microAppWindow, appName) {
+    setHijackProperty(microAppWindow, appName) {
         let modifiedEval, modifiedImage;
         rawDefineProperties(microAppWindow, {
-            document: {
-                configurable: true,
-                enumerable: true,
-                get() {
-                    throttleDeferForSetAppName(appName);
-                    return globalEnv.rawDocument;
-                },
-            },
             eval: {
                 configurable: true,
                 enumerable: false,
@@ -3783,7 +3919,7 @@ class SandBox {
         });
     }
     // rewrite fetch, XMLHttpRequest, EventSource
-    patchHijackRequest(microAppWindow, appName, url) {
+    patchRequestApi(microAppWindow, appName, url) {
         let microFetch = createMicroFetch(url);
         let microXMLHttpRequest = createMicroXMLHttpRequest(url);
         let microEventSource = createMicroEventSource(appName, url);
@@ -3855,6 +3991,24 @@ class SandBox {
     removeRouteInfoForKeepAliveApp() {
         removeStateAndPathFromBrowser(this.proxyWindow.__MICRO_APP_NAME__);
     }
+    createProxyDocument(appName) {
+        const createElement = function (tagName, options) {
+            const element = globalEnv.rawCreateElement.call(globalEnv.rawDocument, tagName, options);
+            element.__MICRO_APP_NAME__ = appName;
+            return element;
+        };
+        const proxyDocument = new Proxy(globalEnv.rawDocument, {
+            get(target, key) {
+                throttleDeferForSetAppName(appName);
+                throttleDeferForParentNode(proxyDocument);
+                if (key === 'createElement')
+                    return createElement;
+                const rawValue = Reflect.get(target, key);
+                return isFunction(rawValue) ? bindFunctionToRawObject(target, rawValue, 'DOCUMENT') : rawValue;
+            },
+        });
+        return proxyDocument;
+    }
 }
 SandBox.activeCount = 0; // number of active sandbox
 
@@ -4563,7 +4717,7 @@ function defineElement(tagName) {
          */
         updateSsrUrl(baseUrl) {
             if (this.getDisposeResult('ssr')) {
-                if (this.getDisposeResult('disable-memory-router')) {
+                if (this.getDisposeResult('disable-memory-router') || this.getDisposeResult('disableSandbox')) {
                     const rawLocation = globalEnv.rawWindow.location;
                     this.ssrUrl = CompletionPath(rawLocation.pathname + rawLocation.search, baseUrl);
                 }