@micro-zoe/micro-app 0.6.1 → 0.8.0

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '0.6.1';
+const version = '0.8.0';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -41,6 +41,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;
 /**
  * format error log
  * @param msg message
@@ -230,6 +233,17 @@ let currentMicroAppName = null;
 function setCurrentAppName(appName) {
     currentMicroAppName = appName;
 }
+let isWaitingForReset = false;
+function throttleDeferForSetAppName(appName) {
+    if (!isWaitingForReset || currentMicroAppName !== appName) {
+        isWaitingForReset = true;
+        setCurrentAppName(appName);
+        defer(() => {
+            isWaitingForReset = false;
+            setCurrentAppName(null);
+        });
+    }
+}
 // get the currently running app.name
 function getCurrentAppName() {
     return currentMicroAppName;
@@ -238,10 +252,6 @@ function getCurrentAppName() {
 function removeDomScope() {
     setCurrentAppName(null);
 }
-// is safari browser
-function isSafari() {
-    return /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
-}
 /**
  * Create pure elements
  */
@@ -290,6 +300,12 @@ function isUniqueElement(key) {
 function getRootContainer(target) {
     return (isShadowRoot(target) ? target.host : target);
 }
+/**
+ * trim start & end
+ */
+function trim(str) {
+    return str ? str.replace(/^\s+|\s+$/g, '') : '';
+}
 
 var ObservedAttrName;
 (function (ObservedAttrName) {
@@ -326,6 +342,7 @@ var keepAliveStates;
     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';
 
 /**
  * fetch source of html, js, css
@@ -342,215 +359,355 @@ function fetchSource(url, appName = null, options = {}) {
     });
 }
 
-const globalEnv = {};
-function initGlobalEnv() {
-    if (isBrowser) {
-        /**
-         * save patch raw methods
-         * pay attention to this binding
-         */
-        const rawSetAttribute = Element.prototype.setAttribute;
-        const rawAppendChild = Element.prototype.appendChild;
-        const rawInsertBefore = Element.prototype.insertBefore;
-        const rawReplaceChild = Element.prototype.replaceChild;
-        const rawRemoveChild = Element.prototype.removeChild;
-        const rawAppend = Element.prototype.append;
-        const rawPrepend = Element.prototype.prepend;
-        const rawCloneNode = Element.prototype.cloneNode;
-        const rawCreateElement = Document.prototype.createElement;
-        const rawCreateElementNS = Document.prototype.createElementNS;
-        const rawCreateDocumentFragment = Document.prototype.createDocumentFragment;
-        const rawQuerySelector = Document.prototype.querySelector;
-        const rawQuerySelectorAll = Document.prototype.querySelectorAll;
-        const rawGetElementById = Document.prototype.getElementById;
-        const rawGetElementsByClassName = Document.prototype.getElementsByClassName;
-        const rawGetElementsByTagName = Document.prototype.getElementsByTagName;
-        const rawGetElementsByName = Document.prototype.getElementsByName;
-        const rawWindow = Function('return window')();
-        const rawDocument = Function('return document')();
-        const supportModuleScript = isSupportModuleScript();
-        const templateStyle = rawDocument.body.querySelector('#micro-app-template-style');
-        /**
-         * save effect raw methods
-         * pay attention to this binding, especially setInterval, setTimeout, clearInterval, clearTimeout
-         */
-        const rawWindowAddEventListener = rawWindow.addEventListener;
-        const rawWindowRemoveEventListener = rawWindow.removeEventListener;
-        const rawSetInterval = rawWindow.setInterval;
-        const rawSetTimeout = rawWindow.setTimeout;
-        const rawClearInterval = rawWindow.clearInterval;
-        const rawClearTimeout = rawWindow.clearTimeout;
-        const rawDocumentAddEventListener = rawDocument.addEventListener;
-        const rawDocumentRemoveEventListener = rawDocument.removeEventListener;
-        // mark current application as base application
-        window.__MICRO_APP_BASE_APPLICATION__ = true;
-        Object.assign(globalEnv, {
-            // source/patch
-            rawSetAttribute,
-            rawAppendChild,
-            rawInsertBefore,
-            rawReplaceChild,
-            rawRemoveChild,
-            rawAppend,
-            rawPrepend,
-            rawCloneNode,
-            rawCreateElement,
-            rawCreateElementNS,
-            rawCreateDocumentFragment,
-            rawQuerySelector,
-            rawQuerySelectorAll,
-            rawGetElementById,
-            rawGetElementsByClassName,
-            rawGetElementsByTagName,
-            rawGetElementsByName,
-            // common global vars
-            rawWindow,
-            rawDocument,
-            supportModuleScript,
-            templateStyle,
-            // sandbox/effect
-            rawWindowAddEventListener,
-            rawWindowRemoveEventListener,
-            rawSetInterval,
-            rawSetTimeout,
-            rawClearInterval,
-            rawClearTimeout,
-            rawDocumentAddEventListener,
-            rawDocumentRemoveEventListener,
-        });
-    }
-}
-
-// https://developer.mozilla.org/zh-CN/docs/Web/API/CSSRule
-var CSSRuleType;
-(function (CSSRuleType) {
-    CSSRuleType[CSSRuleType["STYLE_RULE"] = 1] = "STYLE_RULE";
-    CSSRuleType[CSSRuleType["MEDIA_RULE"] = 4] = "MEDIA_RULE";
-    CSSRuleType[CSSRuleType["SUPPORTS_RULE"] = 12] = "SUPPORTS_RULE";
-})(CSSRuleType || (CSSRuleType = {}));
-/**
- * Bind css scope
- * Special case:
- * 1. html-abc | abc-html
- * 2. html body.abc
- * 3. abchtml | htmlabc | abcbody | bodyabc
- * 4. html + body | html > body | html.body | html[name=xx] | body[name=xx]
- * 5. xxx, html xxx, body xxx
- *
- * TODO: BUG
-  .test-b {
-    border: 1px solid var(--color-a);
-    border-bottom-color: var(--color-b);
-  }
- */
-function scopedStyleRule(rule, prefix) {
-    const { selectorText, cssText } = rule;
-    if (/^((html[\s>~,]+body)|(html|body|:root))$/.test(selectorText)) {
-        return cssText.replace(/^((html[\s>~,]+body)|(html|body|:root))/, prefix);
-    }
-    else if (selectorText === '*') {
-        return cssText.replace('*', `${prefix} *`);
-    }
-    const builtInRootSelectorRE = /(^|\s+)((html[\s>~]+body)|(html|body|:root))(?=[\s>~]+|$)/;
-    return cssText.replace(/^[\s\S]+{/, (selectors) => {
-        return selectors.replace(/(^|,)([^,]+)/g, (all, $1, $2) => {
-            if (builtInRootSelectorRE.test($2)) {
-                // body[name=xx]|body.xx|body#xx etc. do not need to handle
-                return all.replace(builtInRootSelectorRE, prefix);
-            }
-            return `${$1} ${prefix} ${$2.replace(/^\s*/, '')}`;
-        });
-    });
+// common reg
+const rootSelectorREG = /(^|\s+)(html|:root)(?=[\s>~[.#:]+|$)/;
+const bodySelectorREG = /(^|\s+)((html[\s>~]+body)|body)(?=[\s>~[.#:]+|$)/;
+const cssUrlREG = /url\(["']?([^)"']+)["']?\)/gm;
+function parseError(msg, linkpath) {
+    msg = linkpath ? `${linkpath}:${msg}` : msg;
+    const err = new Error(msg);
+    err.reason = msg;
+    if (linkpath) {
+        err.filename = linkpath;
+    }
+    throw err;
 }
 /**
- * Complete static resource address
- * @param cssText css content
- * @param baseURI domain name
- * @param textContent origin content
- * @param linkpath link resource address, if it is the style converted from link, it will have linkpath
+ * Reference resources https://github.com/reworkcss/css
+ * CSSParser mainly deals with 3 scenes: styleRule, @, and comment
+ * And scopecss deals with 2 scenes: selector & url
+ * It can also disable scopecss with inline comments
  */
-function scopedHost(cssText, baseURI, textContent, linkpath) {
-    return cssText.replace(/url\(["']?([^)"']+)["']?\)/gm, (all, $1) => {
-        if (/^(data|blob):/.test($1)) {
-            return all;
-        }
-        else if (/^(https?:)?\/\//.test($1)) {
-            if (isSafari()) {
-                const purePath = $1.replace(/^https?:/, '');
-                if (textContent.indexOf(purePath) === -1) {
-                    $1 = $1.replace(window.location.origin, '');
-                }
-                else {
+class CSSParser {
+    constructor() {
+        this.cssText = ''; // css content
+        this.prefix = ''; // prefix as micro-app[name=xxx]
+        this.baseURI = ''; // domain name
+        this.linkpath = ''; // link resource address, if it is the style converted from link, it will have linkpath
+        this.result = ''; // parsed cssText
+        this.scopecssDisable = false; // use block comments /* scopecss-disable */ to disable scopecss in your file, and use /* scopecss-enable */ to enable scopecss
+        this.scopecssDisableSelectors = []; // disable or enable scopecss for specific selectors
+        this.scopecssDisableNextLine = false; // use block comments /* scopecss-disable-next-line */ to disable scopecss on a specific line
+        // https://developer.mozilla.org/en-US/docs/Web/API/CSSMediaRule
+        this.mediaRule = this.createMatcherForAtRuleWithChildRule(/^@media *([^{]+)/, 'media');
+        // https://developer.mozilla.org/en-US/docs/Web/API/CSSSupportsRule
+        this.supportsRule = this.createMatcherForAtRuleWithChildRule(/^@supports *([^{]+)/, 'supports');
+        this.documentRule = this.createMatcherForAtRuleWithChildRule(/^@([-\w]+)?document *([^{]+)/, 'document');
+        this.hostRule = this.createMatcherForAtRuleWithChildRule(/^@host\s*/, 'host');
+        // https://developer.mozilla.org/en-US/docs/Web/API/CSSImportRule
+        this.importRule = this.createMatcherForNoneBraceAtRule('import');
+        // Removed in most browsers
+        this.charsetRule = this.createMatcherForNoneBraceAtRule('charset');
+        // https://developer.mozilla.org/en-US/docs/Web/API/CSSNamespaceRule
+        this.namespaceRule = this.createMatcherForNoneBraceAtRule('namespace');
+    }
+    exec(cssText, prefix, baseURI, linkpath) {
+        this.cssText = cssText;
+        this.prefix = prefix;
+        this.baseURI = baseURI;
+        this.linkpath = linkpath || '';
+        this.matchRules();
+        return this.result;
+    }
+    reset() {
+        this.cssText = this.prefix = this.baseURI = this.linkpath = this.result = '';
+        this.scopecssDisable = this.scopecssDisableNextLine = false;
+        this.scopecssDisableSelectors = [];
+    }
+    // core action for match rules
+    matchRules() {
+        this.matchLeadingSpaces();
+        this.matchComments();
+        while (this.cssText.length &&
+            this.cssText.charAt(0) !== '}' &&
+            (this.matchAtRule() || this.matchStyleRule())) {
+            this.matchComments();
+        }
+    }
+    // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleRule
+    matchStyleRule() {
+        const selectorList = this.formatSelector();
+        // reset scopecssDisableNextLine
+        this.scopecssDisableNextLine = false;
+        if (!selectorList)
+            return parseError('selector missing', this.linkpath);
+        this.result += selectorList.join(', ');
+        this.matchComments();
+        this.styleDeclarations();
+        this.matchLeadingSpaces();
+        return true;
+    }
+    // https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration
+    styleDeclarations() {
+        if (!this.matchOpenBrace())
+            return parseError("Declaration missing '{'", this.linkpath);
+        this.matchComments();
+        while (this.styleDeclaration()) {
+            this.matchComments();
+        }
+        if (!this.matchCloseBrace())
+            return parseError("Declaration missing '}'", this.linkpath);
+        return true;
+    }
+    // match one styleDeclaration at a time
+    styleDeclaration() {
+        // css property
+        if (!this.commonMatch(/^(\*?[-#\/\*\\\w]+(\[[0-9a-z_-]+\])?)\s*/))
+            return false;
+        // match :
+        if (!this.commonMatch(/^:\s*/))
+            return parseError("property missing ':'", this.linkpath);
+        // match css value
+        const r = this.commonMatch(/^((?:'(?:\\'|.)*?'|"(?:\\"|.)*?"|\([^\)]*?\)|[^};])+)/, true);
+        let cssValue = r ? r[0] : '';
+        if (!this.scopecssDisableNextLine &&
+            (!this.scopecssDisable || this.scopecssDisableSelectors.length)) {
+            cssValue = cssValue.replace(cssUrlREG, (all, $1) => {
+                if (/^((data|blob):|#)/.test($1) || /^(https?:)?\/\//.test($1)) {
                     return all;
                 }
+                // ./a/b.png  ../a/b.png  a/b.png
+                if (/^((\.\.?\/)|[^/])/.test($1) && this.linkpath) {
+                    this.baseURI = getLinkFileDir(this.linkpath);
+                }
+                return `url("${CompletionPath($1, this.baseURI)}")`;
+            });
+        }
+        // reset scopecssDisableNextLine
+        this.scopecssDisableNextLine = false;
+        this.result += cssValue;
+        this.matchLeadingSpaces();
+        this.commonMatch(/^[;\s]*/);
+        return true;
+    }
+    formatSelector() {
+        const m = this.commonMatch(/^([^{]+)/, true);
+        if (!m)
+            return false;
+        return trim(m[0])
+            .replace(/\/\*([^*]|[\r\n]|(\*+([^*/]|[\r\n])))*\*\/+/g, '')
+            .replace(/"(?:\\"|[^"])*"|'(?:\\'|[^'])*'/g, (r) => {
+            return r.replace(/,/g, '\u200C');
+        })
+            .split(/\s*(?![^(]*\)),\s*/)
+            .map((s) => {
+            const selectorText = s.replace(/\u200C/g, ',');
+            if (this.scopecssDisableNextLine) {
+                return selectorText;
+            }
+            else if (this.scopecssDisable) {
+                if (!this.scopecssDisableSelectors.length ||
+                    this.scopecssDisableSelectors.includes(selectorText)) {
+                    return selectorText;
+                }
+            }
+            if (selectorText === '*') {
+                return this.prefix + ' *';
+            }
+            else if (bodySelectorREG.test(selectorText)) {
+                return selectorText.replace(bodySelectorREG, this.prefix + ' micro-app-body');
+            }
+            else if (rootSelectorREG.test(selectorText)) { // ignore root selector
+                return selectorText;
+            }
+            return this.prefix + ' ' + selectorText;
+        });
+    }
+    matchAtRule() {
+        if (this.cssText[0] !== '@')
+            return false;
+        // reset scopecssDisableNextLine
+        this.scopecssDisableNextLine = false;
+        return this.keyframesRule() ||
+            this.mediaRule() ||
+            this.custommediaRule() ||
+            this.supportsRule() ||
+            this.importRule() ||
+            this.charsetRule() ||
+            this.namespaceRule() ||
+            this.documentRule() ||
+            this.pageRule() ||
+            this.hostRule() ||
+            this.fontfaceRule();
+    }
+    // https://developer.mozilla.org/en-US/docs/Web/API/CSSKeyframesRule
+    keyframesRule() {
+        if (!this.commonMatch(/^@([-\w]+)?keyframes\s*/))
+            return false;
+        if (!this.commonMatch(/^([-\w]+)\s*/))
+            return parseError('@keyframes missing name', this.linkpath);
+        this.matchComments();
+        if (!this.matchOpenBrace())
+            return parseError("@keyframes missing '{'", this.linkpath);
+        this.matchComments();
+        while (this.keyframeRule()) {
+            this.matchComments();
+        }
+        if (!this.matchCloseBrace())
+            return parseError("@keyframes missing '}'", this.linkpath);
+        this.matchLeadingSpaces();
+        return true;
+    }
+    keyframeRule() {
+        let r;
+        const valList = [];
+        while (r = this.commonMatch(/^((\d+\.\d+|\.\d+|\d+)%?|[a-z]+)\s*/)) {
+            valList.push(r[1]);
+            this.commonMatch(/^,\s*/);
+        }
+        if (!valList.length)
+            return false;
+        this.styleDeclarations();
+        this.matchLeadingSpaces();
+        return true;
+    }
+    // https://github.com/postcss/postcss-custom-media
+    custommediaRule() {
+        if (!this.commonMatch(/^@custom-media\s+(--[^\s]+)\s*([^{;]+);/))
+            return false;
+        this.matchLeadingSpaces();
+        return true;
+    }
+    // https://developer.mozilla.org/en-US/docs/Web/API/CSSPageRule
+    pageRule() {
+        if (!this.commonMatch(/^@page */))
+            return false;
+        this.formatSelector();
+        // reset scopecssDisableNextLine
+        this.scopecssDisableNextLine = false;
+        return this.commonHandlerForAtRuleWithSelfRule('page');
+    }
+    // https://developer.mozilla.org/en-US/docs/Web/API/CSSFontFaceRule
+    fontfaceRule() {
+        if (!this.commonMatch(/^@font-face\s*/))
+            return false;
+        return this.commonHandlerForAtRuleWithSelfRule('font-face');
+    }
+    // common matcher for @media, @supports, @document, @host
+    createMatcherForAtRuleWithChildRule(reg, name) {
+        return () => {
+            if (!this.commonMatch(reg))
+                return false;
+            if (!this.matchOpenBrace())
+                return parseError(`@${name} missing '{'`, this.linkpath);
+            this.matchComments();
+            this.matchRules();
+            if (!this.matchCloseBrace())
+                return parseError(`@${name} missing '}'`, this.linkpath);
+            this.matchLeadingSpaces();
+            return true;
+        };
+    }
+    // common matcher for @import, @charset, @namespace
+    createMatcherForNoneBraceAtRule(name) {
+        const reg = new RegExp('^@' + name + '\\s*([^;]+);');
+        return () => {
+            if (!this.commonMatch(reg))
+                return false;
+            this.matchLeadingSpaces();
+            return false;
+        };
+    }
+    // common handler for @font-face, @page
+    commonHandlerForAtRuleWithSelfRule(name) {
+        if (!this.matchOpenBrace())
+            return parseError(`@${name} missing '{'`, this.linkpath);
+        this.matchComments();
+        while (this.styleDeclaration()) {
+            this.matchComments();
+        }
+        if (!this.matchCloseBrace())
+            return parseError(`@${name} missing '}'`, this.linkpath);
+        this.matchLeadingSpaces();
+        return true;
+    }
+    // match and slice comments
+    matchComments() {
+        while (this.matchComment())
+            ;
+    }
+    // css comment
+    matchComment() {
+        if (this.cssText.charAt(0) !== '/' || this.cssText.charAt(1) !== '*')
+            return false;
+        // reset scopecssDisableNextLine
+        this.scopecssDisableNextLine = false;
+        let i = 2;
+        while (this.cssText.charAt(i) !== '' && (this.cssText.charAt(i) !== '*' || this.cssText.charAt(i + 1) !== '/'))
+            ++i;
+        i += 2;
+        if (this.cssText.charAt(i - 1) === '') {
+            return parseError('End of comment missing', this.linkpath);
+        }
+        // get comment content
+        let commentText = this.cssText.slice(2, i - 2);
+        this.result += `/*${commentText}*/`;
+        commentText = trim(commentText.replace(/^\s*!/, ''));
+        // set ignore config
+        if (commentText === 'scopecss-disable-next-line') {
+            this.scopecssDisableNextLine = true;
+        }
+        else if (/^scopecss-disable/.test(commentText)) {
+            if (commentText === 'scopecss-disable') {
+                this.scopecssDisable = true;
             }
             else {
-                return all;
+                this.scopecssDisable = true;
+                const ignoreRules = commentText.replace('scopecss-disable', '').split(',');
+                ignoreRules.forEach((rule) => {
+                    this.scopecssDisableSelectors.push(trim(rule));
+                });
             }
         }
-        // ./a/b.png  ../a/b.png  a/b.png
-        if (/^((\.\.?\/)|[^/])/.test($1) && linkpath) {
-            baseURI = getLinkFileDir(linkpath);
+        else if (commentText === 'scopecss-enable') {
+            this.scopecssDisable = false;
+            this.scopecssDisableSelectors = [];
         }
-        return `url("${CompletionPath($1, baseURI)}")`;
-    });
-}
-// handle media and supports
-function scopedPackRule(rule, prefix, packName) {
-    const result = scopedRule(Array.from(rule.cssRules), prefix);
-    return `@${packName} ${rule.conditionText} {${result}}`;
-}
-/**
- * Process each cssrule
- * @param rules cssRule
- * @param prefix prefix as micro-app[name=xxx]
- */
-function scopedRule(rules, prefix) {
-    let result = '';
-    for (const rule of rules) {
-        switch (rule.type) {
-            case CSSRuleType.STYLE_RULE:
-                result += scopedStyleRule(rule, prefix);
-                break;
-            case CSSRuleType.MEDIA_RULE:
-                result += scopedPackRule(rule, prefix, 'media');
-                break;
-            case CSSRuleType.SUPPORTS_RULE:
-                result += scopedPackRule(rule, prefix, 'supports');
-                break;
-            default:
-                result += rule.cssText;
-                break;
-        }
-    }
-    return result.replace(/^\s+/, '');
+        this.cssText = this.cssText.slice(i);
+        this.matchLeadingSpaces();
+        return true;
+    }
+    commonMatch(reg, skip = false) {
+        const matchArray = reg.exec(this.cssText);
+        if (!matchArray)
+            return;
+        const matchStr = matchArray[0];
+        this.cssText = this.cssText.slice(matchStr.length);
+        if (!skip)
+            this.result += matchStr;
+        return matchArray;
+    }
+    matchOpenBrace() {
+        return this.commonMatch(/^{\s*/);
+    }
+    matchCloseBrace() {
+        return this.commonMatch(/^}/);
+    }
+    // match and slice the leading spaces
+    matchLeadingSpaces() {
+        this.commonMatch(/^\s*/);
+    }
 }
 /**
  * common method of bind CSS
  */
-function commonAction(templateStyle, styleElement, originContent, prefix, baseURI, linkpath) {
-    var _a, _b;
+function commonAction(styleElement, appName, prefix, baseURI, linkpath) {
     if (!styleElement.__MICRO_APP_HAS_SCOPED__) {
-        const rules = Array.from((_b = (_a = templateStyle.sheet) === null || _a === void 0 ? void 0 : _a.cssRules) !== null && _b !== void 0 ? _b : []);
-        let result = scopedHost(scopedRule(rules, prefix), baseURI, originContent, linkpath);
-        /**
-         * Solve the problem of missing content quotes in some Safari browsers
-         * docs: https://developer.mozilla.org/zh-CN/docs/Web/CSS/content
-         * If there are still problems, it is recommended to use the attr()
-         */
-        if (isSafari()) {
-            result = result.replace(/([;{]\s*content:\s*)([^\s"][^";}]*)/gm, (all, $1, $2) => {
-                if ($2 === 'none' ||
-                    /^(url\()|(counter\()|(attr\()|(open-quote)|(close-quote)/.test($2)) {
-                    return all;
-                }
-                return `${$1}"${$2}"`;
-            });
-        }
-        styleElement.textContent = result;
         styleElement.__MICRO_APP_HAS_SCOPED__ = true;
+        let result = null;
+        try {
+            result = parser.exec(styleElement.textContent, prefix, baseURI, linkpath);
+            parser.reset();
+        }
+        catch (e) {
+            parser.reset();
+            logError('CSSParser: An error occurred while parsing CSS', appName, e);
+        }
+        if (result)
+            styleElement.textContent = result;
     }
 }
+let parser;
 /**
  * scopedCSS
  * @param styleElement target style element
@@ -559,27 +716,18 @@ function commonAction(templateStyle, styleElement, originContent, prefix, baseUR
 function scopedCSS(styleElement, app) {
     if (app.scopecss) {
         const prefix = `${microApp.tagName}[name=${app.name}]`;
-        let templateStyle = globalEnv.templateStyle;
-        if (!templateStyle) {
-            globalEnv.templateStyle = templateStyle = pureCreateElement('style');
-            templateStyle.setAttribute('id', 'micro-app-template-style');
-            globalEnv.rawDocument.body.appendChild(templateStyle);
-            templateStyle.sheet.disabled = true;
-        }
+        if (!parser)
+            parser = new CSSParser();
         if (styleElement.textContent) {
-            templateStyle.textContent = styleElement.textContent;
-            commonAction(templateStyle, styleElement, styleElement.textContent, prefix, app.url, styleElement.__MICRO_APP_LINK_PATH__);
-            templateStyle.textContent = '';
+            commonAction(styleElement, app.name, prefix, app.url, styleElement.__MICRO_APP_LINK_PATH__);
         }
         else {
             const observer = new MutationObserver(function () {
-                var _a, _b;
                 observer.disconnect();
-                // styled-component will not be processed temporarily
-                if ((!styleElement.textContent && ((_b = (_a = styleElement.sheet) === null || _a === void 0 ? void 0 : _a.cssRules) === null || _b === void 0 ? void 0 : _b.length)) ||
-                    styleElement.hasAttribute('data-styled'))
-                    return;
-                commonAction(styleElement, styleElement, styleElement.textContent, prefix, app.url, styleElement.__MICRO_APP_LINK_PATH__);
+                // styled-component will be ignore
+                if (styleElement.textContent && !styleElement.hasAttribute('data-styled')) {
+                    commonAction(styleElement, app.name, prefix, app.url, styleElement.__MICRO_APP_LINK_PATH__);
+                }
             });
             observer.observe(styleElement, { childList: true });
         }
@@ -718,7 +866,12 @@ function fetchLinkSuccess(url, info, data, microAppHead, app) {
     styleLink.textContent = data;
     styleLink.__MICRO_APP_LINK_PATH__ = url;
     styleLink.setAttribute('data-origin-href', url);
-    microAppHead.replaceChild(scopedCSS(styleLink, app), info.placeholder);
+    if (info.placeholder.parentNode) {
+        info.placeholder.parentNode.replaceChild(scopedCSS(styleLink, app), info.placeholder);
+    }
+    else {
+        microAppHead.appendChild(scopedCSS(styleLink, app));
+    }
     info.placeholder = null;
     info.code = data;
 }
@@ -759,6 +912,95 @@ function foramtDynamicLink(url, info, app, originLink, replaceStyle) {
     });
 }
 
+const globalEnv = {};
+/**
+ * Note loop nesting
+ * Only prototype or unique values can be put here
+ */
+function initGlobalEnv() {
+    if (isBrowser) {
+        /**
+         * save patch raw methods
+         * pay attention to this binding
+         */
+        const rawSetAttribute = Element.prototype.setAttribute;
+        const rawAppendChild = Element.prototype.appendChild;
+        const rawInsertBefore = Element.prototype.insertBefore;
+        const rawReplaceChild = Element.prototype.replaceChild;
+        const rawRemoveChild = Element.prototype.removeChild;
+        const rawAppend = Element.prototype.append;
+        const rawPrepend = Element.prototype.prepend;
+        const rawCloneNode = Element.prototype.cloneNode;
+        const rawCreateElement = Document.prototype.createElement;
+        const rawCreateElementNS = Document.prototype.createElementNS;
+        const rawCreateDocumentFragment = Document.prototype.createDocumentFragment;
+        const rawQuerySelector = Document.prototype.querySelector;
+        const rawQuerySelectorAll = Document.prototype.querySelectorAll;
+        const rawGetElementById = Document.prototype.getElementById;
+        const rawGetElementsByClassName = Document.prototype.getElementsByClassName;
+        const rawGetElementsByTagName = Document.prototype.getElementsByTagName;
+        const rawGetElementsByName = Document.prototype.getElementsByName;
+        const ImageProxy = new Proxy(Image, {
+            construct(Target, args) {
+                const elementImage = new Target(...args);
+                elementImage.__MICRO_APP_NAME__ = getCurrentAppName();
+                return elementImage;
+            },
+        });
+        const rawWindow = Function('return window')();
+        const rawDocument = Function('return document')();
+        const supportModuleScript = isSupportModuleScript();
+        /**
+         * save effect raw methods
+         * pay attention to this binding, especially setInterval, setTimeout, clearInterval, clearTimeout
+         */
+        const rawWindowAddEventListener = rawWindow.addEventListener;
+        const rawWindowRemoveEventListener = rawWindow.removeEventListener;
+        const rawSetInterval = rawWindow.setInterval;
+        const rawSetTimeout = rawWindow.setTimeout;
+        const rawClearInterval = rawWindow.clearInterval;
+        const rawClearTimeout = rawWindow.clearTimeout;
+        const rawDocumentAddEventListener = rawDocument.addEventListener;
+        const rawDocumentRemoveEventListener = rawDocument.removeEventListener;
+        // mark current application as base application
+        window.__MICRO_APP_BASE_APPLICATION__ = true;
+        Object.assign(globalEnv, {
+            // source/patch
+            rawSetAttribute,
+            rawAppendChild,
+            rawInsertBefore,
+            rawReplaceChild,
+            rawRemoveChild,
+            rawAppend,
+            rawPrepend,
+            rawCloneNode,
+            rawCreateElement,
+            rawCreateElementNS,
+            rawCreateDocumentFragment,
+            rawQuerySelector,
+            rawQuerySelectorAll,
+            rawGetElementById,
+            rawGetElementsByClassName,
+            rawGetElementsByTagName,
+            rawGetElementsByName,
+            ImageProxy,
+            // common global vars
+            rawWindow,
+            rawDocument,
+            supportModuleScript,
+            // sandbox/effect
+            rawWindowAddEventListener,
+            rawWindowRemoveEventListener,
+            rawSetInterval,
+            rawSetTimeout,
+            rawClearInterval,
+            rawClearTimeout,
+            rawDocumentAddEventListener,
+            rawDocumentRemoveEventListener,
+        });
+    }
+}
+
 // Global scripts, reuse across apps
 const globalScripts = new Map();
 /**
@@ -909,17 +1151,21 @@ function execScripts(scriptList, app, initedHook) {
         }
     }
     if (deferScriptPromise.length) {
-        Promise.all(deferScriptPromise).then((res) => {
-            res.forEach((code, index) => {
-                const [url, info] = deferScriptInfo[index];
-                info.code = info.code || code;
-                runScript(url, app, info, false, initedHook);
-                !info.module && initedHook(false);
-            });
-            initedHook(isUndefined(initedHook.moduleCount));
-        }).catch((err) => {
+        promiseStream(deferScriptPromise, (res) => {
+            const info = deferScriptInfo[res.index][1];
+            info.code = info.code || res.data;
+        }, (err) => {
+            initedHook.errorCount = initedHook.errorCount ? ++initedHook.errorCount : 1;
             logError(err, app.name);
-            initedHook(true);
+        }, () => {
+            deferScriptInfo.forEach(([url, info]) => {
+                if (info.code) {
+                    runScript(url, app, info, false, initedHook);
+                    !info.module && initedHook(false);
+                }
+            });
+            initedHook(isUndefined(initedHook.moduleCount) ||
+                initedHook.errorCount === deferScriptPromise.length);
         });
     }
     else {
@@ -1054,7 +1300,7 @@ function bindScope(url, app, code, module) {
     }
     if (app.sandBox && !module) {
         globalEnv.rawWindow.__MICRO_APP_PROXY_WINDOW__ = app.sandBox.proxyWindow;
-        return `;(function(window, self){with(window){;${code}\n}}).call(window.__MICRO_APP_PROXY_WINDOW__, window.__MICRO_APP_PROXY_WINDOW__, window.__MICRO_APP_PROXY_WINDOW__);`;
+        return `;(function(proxyWindow){with(proxyWindow.__MICRO_APP_WINDOW__){(function(${globalKeyToBeCached}){;${code}\n}).call(proxyWindow,${globalKeyToBeCached})}})(window.__MICRO_APP_PROXY_WINDOW__);`;
     }
     return code;
 }
@@ -1473,46 +1719,41 @@ function rebuildDataCenterSnapshot(microAppEventCneter) {
     }
 }
 
-const boundedMap = new WeakMap();
+/* eslint-disable no-return-assign */
 function isBoundedFunction(value) {
-    if (boundedMap.has(value)) {
-        return boundedMap.get(value);
-    }
-    // bind function
-    const boundFunction = isBoundFunction(value);
-    boundedMap.set(value, boundFunction);
-    return boundFunction;
+    if (isBoolean(value.__MICRO_APP_ISBOUND_FUNCTION))
+        return value.__MICRO_APP_ISBOUND_FUNCTION;
+    return value.__MICRO_APP_ISBOUND_FUNCTION = isBoundFunction(value);
 }
-const constructorMap = new WeakMap();
 function isConstructor(value) {
-    if (constructorMap.has(value)) {
-        return constructorMap.get(value);
-    }
+    var _a;
+    if (isBoolean(value.__MICRO_APP_ISCONSTRUCTOR))
+        return value.__MICRO_APP_ISCONSTRUCTOR;
     const valueStr = value.toString();
-    const result = (value.prototype &&
-        value.prototype.constructor === value &&
+    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);
-    constructorMap.set(value, result);
-    return result;
+    return value.__MICRO_APP_ISCONSTRUCTOR = result;
 }
-const rawWindowMethodMap = new WeakMap();
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-function bindFunctionToRawWidow(rawWindow, value) {
-    if (rawWindowMethodMap.has(value)) {
-        return rawWindowMethodMap.get(value);
-    }
-    if (isFunction(value) && !isConstructor(value) && !isBoundedFunction(value)) {
+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);
         for (const key in value) {
             bindRawWindowValue[key] = value[key];
         }
-        if (value.hasOwnProperty('prototype') && !bindRawWindowValue.hasOwnProperty('prototype')) {
-            bindRawWindowValue.prototype = value.prototype;
+        if (value.hasOwnProperty('prototype')) {
+            rawDefineProperty(bindRawWindowValue, 'prototype', {
+                value: value.prototype,
+                configurable: true,
+                enumerable: false,
+                writable: true,
+            });
         }
-        rawWindowMethodMap.set(value, bindRawWindowValue);
-        return bindRawWindowValue;
+        return value.__MICRO_APP_BOUND_WINDOW_FUNCTION = bindRawWindowValue;
     }
     return value;
 }
@@ -1536,7 +1777,7 @@ function overwriteDocumentOnClick() {
             isFunction(f) && f.call(document, e);
         });
     }
-    Object.defineProperty(document, 'onclick', {
+    rawDefineProperty(document, 'onclick', {
         configurable: true,
         enumerable: true,
         get() {
@@ -1586,7 +1827,7 @@ function effectDocumentEvent() {
             else {
                 documentEventListenerMap.set(appName, new Map([[type, new Set([listener])]]));
             }
-            listener && (listener.__MICRO_MARK_OPTIONS__ = options);
+            listener && (listener.__MICRO_APP_MARK_OPTIONS__ = options);
         }
         rawDocumentAddEventListener.call(rawDocument, type, listener, options);
     };
@@ -1615,27 +1856,27 @@ const formatEventList = ['unmount', 'appstate-change'];
 /**
  * Format event name
  * @param type event name
- * @param microWindow micro window
+ * @param microAppWindow micro window
  */
-function formatEventType(type, microWindow) {
+function formatEventType(type, microAppWindow) {
     if (formatEventList.includes(type)) {
-        return `${type}-${microWindow.__MICRO_APP_NAME__}`;
+        return `${type}-${microAppWindow.__MICRO_APP_NAME__}`;
     }
     return type;
 }
 /**
  * Rewrite side-effect events
- * @param microWindow micro window
+ * @param microAppWindow micro window
  */
-function effect(microWindow) {
-    const appName = microWindow.__MICRO_APP_NAME__;
+function effect(microAppWindow) {
+    const appName = microAppWindow.__MICRO_APP_NAME__;
     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
-    microWindow.addEventListener = function (type, listener, options) {
-        type = formatEventType(type, microWindow);
+    microAppWindow.addEventListener = function (type, listener, options) {
+        type = formatEventType(type, microAppWindow);
         const listenerList = eventListenerMap.get(type);
         if (listenerList) {
             listenerList.add(listener);
@@ -1643,32 +1884,32 @@ function effect(microWindow) {
         else {
             eventListenerMap.set(type, new Set([listener]));
         }
-        listener && (listener.__MICRO_MARK_OPTIONS__ = options);
+        listener && (listener.__MICRO_APP_MARK_OPTIONS__ = options);
         rawWindowAddEventListener.call(rawWindow, type, listener, options);
     };
-    microWindow.removeEventListener = function (type, listener, options) {
-        type = formatEventType(type, microWindow);
+    microAppWindow.removeEventListener = function (type, listener, options) {
+        type = formatEventType(type, microAppWindow);
         const listenerList = eventListenerMap.get(type);
         if ((listenerList === null || listenerList === void 0 ? void 0 : listenerList.size) && listenerList.has(listener)) {
             listenerList.delete(listener);
         }
         rawWindowRemoveEventListener.call(rawWindow, type, listener, options);
     };
-    microWindow.setInterval = function (handler, timeout, ...args) {
+    microAppWindow.setInterval = function (handler, timeout, ...args) {
         const intervalId = rawSetInterval.call(rawWindow, handler, timeout, ...args);
         intervalIdMap.set(intervalId, { handler, timeout, args });
         return intervalId;
     };
-    microWindow.setTimeout = function (handler, timeout, ...args) {
+    microAppWindow.setTimeout = function (handler, timeout, ...args) {
         const timeoutId = rawSetTimeout.call(rawWindow, handler, timeout, ...args);
         timeoutIdMap.set(timeoutId, { handler, timeout, args });
         return timeoutId;
     };
-    microWindow.clearInterval = function (intervalId) {
+    microAppWindow.clearInterval = function (intervalId) {
         intervalIdMap.delete(intervalId);
         rawClearInterval.call(rawWindow, intervalId);
     };
-    microWindow.clearTimeout = function (timeoutId) {
+    microAppWindow.clearTimeout = function (timeoutId) {
         timeoutIdMap.delete(timeoutId);
         rawClearTimeout.call(rawWindow, timeoutId);
     };
@@ -1709,15 +1950,15 @@ function effect(microWindow) {
         // rebuild window event
         umdWindowListenerMap.forEach((listenerList, type) => {
             for (const listener of listenerList) {
-                microWindow.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_MARK_OPTIONS__);
+                microAppWindow.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
             }
         });
         // rebuild timer
         umdIntervalIdMap.forEach((info) => {
-            microWindow.setInterval(info.handler, info.timeout, ...info.args);
+            microAppWindow.setInterval(info.handler, info.timeout, ...info.args);
         });
         umdTimeoutIdMap.forEach((info) => {
-            microWindow.setTimeout(info.handler, info.timeout, ...info.args);
+            microAppWindow.setTimeout(info.handler, info.timeout, ...info.args);
         });
         // rebuild onclick event
         umdOnClickHandler && documentClickListMap.set(appName, umdOnClickHandler);
@@ -1725,7 +1966,7 @@ function effect(microWindow) {
         setCurrentAppName(appName);
         umdDocumentListenerMap.forEach((listenerList, type) => {
             for (const listener of listenerList) {
-                document.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_MARK_OPTIONS__);
+                document.addEventListener(type, listener, listener === null || listener === void 0 ? void 0 : listener.__MICRO_APP_MARK_OPTIONS__);
             }
         });
         setCurrentAppName(null);
@@ -1773,189 +2014,70 @@ function effect(microWindow) {
         releaseEffect,
     };
 }
-
-const ImageProxy = new Proxy(Image, {
-    construct(Target, args) {
-        const elementImage = new Target(...args);
-        elementImage.__MICRO_APP_NAME__ = getCurrentAppName();
-        return elementImage;
-    },
-});
+// window.addEventListener('mousedown', (e: Event) => {
+//   const targetNode = e.target
+//   const activeApps = getActiveApps(true)
+//   let isScopeOfMicroApp = false
+//   for (const appName of activeApps) {
+//     const app = appInstanceMap.get(appName)!
+//     if (targetNode instanceof Node && app.container!.contains(targetNode)) {
+//       isScopeOfMicroApp = true
+//       // console.log(111111, appName)
+//       setCurrentAppName(appName)
+//       break
+//     }
+//   }
+//   if (!isScopeOfMicroApp) {
+//     setCurrentAppName(null)
+//   }
+// }, false)
+// let isWaitingForMacroReset = false
+// window.addEventListener('mouseup', () => {
+//   if (!isWaitingForMacroReset && getCurrentAppName()) {
+//     isWaitingForMacroReset = true
+//     setTimeout(() => {
+//       setCurrentAppName(null)
+//       isWaitingForMacroReset = false
+//     })
+//   }
+// }, false)
 
 // Variables that can escape to rawWindow
 const staticEscapeProperties = [
     'System',
     '__cjsWrapper',
-    '__REACT_ERROR_OVERLAY_GLOBAL_HOOK__',
 ];
 // Variables that can only assigned to rawWindow
 const escapeSetterKeyList = [
     'location',
 ];
-const unscopables = {
-    undefined: true,
-    Array: true,
-    Object: true,
-    String: true,
-    Boolean: true,
-    Math: true,
-    Number: true,
-    Symbol: true,
-    parseFloat: true,
-    Float32Array: true,
-};
-/**
- * macro task to solve the rendering problem of vue3
- */
-let macroTimer;
-function macroTask(fn) {
-    macroTimer && clearTimeout(macroTimer);
-    macroTimer = setTimeout(fn, 0);
-}
+const globalPropertyList = ['window', 'self', 'globalThis'];
 class SandBox {
-    constructor(appName, url, macro) {
-        // Scoped global Properties(Properties that can only get and set in microWindow, will not escape to rawWindow)
+    constructor(appName, url) {
+        // Scoped global Properties(Properties that can only get and set in microAppWindow, will not escape to rawWindow)
         this.scopeProperties = ['webpackJsonp'];
         // Properties that can be escape to rawWindow
         this.escapeProperties = [];
-        // Properties newly added to microWindow
+        // 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.microWindow = {}; // Proxy target
-        const rawWindow = globalEnv.rawWindow;
-        const rawDocument = globalEnv.rawDocument;
-        const descriptorTargetMap = new Map();
-        const hasOwnProperty = (key) => this.microWindow.hasOwnProperty(key) || rawWindow.hasOwnProperty(key);
-        // get scopeProperties and escapeProperties from plugins
-        this.getScopeProperties(appName);
-        // inject global properties
-        this.inject(this.microWindow, appName, url);
-        // Rewrite global event listener & timeout
-        Object.assign(this, effect(this.microWindow));
-        this.proxyWindow = new Proxy(this.microWindow, {
-            get: (target, key) => {
-                if (key === Symbol.unscopables)
-                    return unscopables;
-                if (['window', 'self', 'globalThis'].includes(key)) {
-                    return this.proxyWindow;
-                }
-                if (key === 'top' || key === 'parent') {
-                    if (rawWindow === rawWindow.parent) { // not in iframe
-                        return this.proxyWindow;
-                    }
-                    return Reflect.get(rawWindow, key); // iframe
-                }
-                if (key === 'hasOwnProperty')
-                    return hasOwnProperty;
-                if (key === 'document' || key === 'eval' || key === 'Image') {
-                    if (this.active) {
-                        setCurrentAppName(appName);
-                        (macro ? macroTask : defer)(() => setCurrentAppName(null));
-                    }
-                    switch (key) {
-                        case 'document':
-                            return rawDocument;
-                        case 'eval':
-                            return eval;
-                        case 'Image':
-                            return ImageProxy;
-                    }
-                }
-                if (Reflect.has(target, key)) {
-                    return Reflect.get(target, key);
-                }
-                if (this.scopeProperties.includes(key) ||
-                    (isString(key) && /^__MICRO_APP_/.test(key))) {
-                    return Reflect.get(target, key);
-                }
-                const rawValue = Reflect.get(rawWindow, key);
-                return bindFunctionToRawWidow(rawWindow, rawValue);
-            },
-            set: (target, key, value) => {
-                if (this.active) {
-                    if (escapeSetterKeyList.includes(key)) {
-                        Reflect.set(rawWindow, key, value);
-                    }
-                    else if (!target.hasOwnProperty(key) &&
-                        rawWindow.hasOwnProperty(key) &&
-                        !this.scopeProperties.includes(key)) {
-                        const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
-                        const { writable, configurable, enumerable } = descriptor;
-                        if (writable) {
-                            Object.defineProperty(target, key, {
-                                configurable,
-                                enumerable,
-                                writable,
-                                value,
-                            });
-                            this.injectedKeys.add(key);
-                        }
-                    }
-                    else {
-                        Reflect.set(target, key, value);
-                        this.injectedKeys.add(key);
-                    }
-                    if ((this.escapeProperties.includes(key) ||
-                        (staticEscapeProperties.includes(key) && !Reflect.has(rawWindow, key))) &&
-                        !this.scopeProperties.includes(key)) {
-                        Reflect.set(rawWindow, key, value);
-                        this.escapeKeys.add(key);
-                    }
-                }
-                return true;
-            },
-            has: (target, key) => {
-                if (this.scopeProperties.includes(key))
-                    return key in target;
-                return key in unscopables || key in target || key in rawWindow;
-            },
-            // Object.getOwnPropertyDescriptor(window, key)
-            // TODO: use set
-            getOwnPropertyDescriptor: (target, key) => {
-                if (target.hasOwnProperty(key)) {
-                    descriptorTargetMap.set(key, 'target');
-                    return Object.getOwnPropertyDescriptor(target, key);
-                }
-                if (rawWindow.hasOwnProperty(key)) {
-                    // like console, alert ...
-                    descriptorTargetMap.set(key, 'rawWindow');
-                    const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
-                    if (descriptor && !descriptor.configurable) {
-                        descriptor.configurable = true;
-                    }
-                    return descriptor;
-                }
-                return undefined;
-            },
-            // Object.defineProperty(window, key, Descriptor)
-            defineProperty: (target, key, value) => {
-                const from = descriptorTargetMap.get(key);
-                if (from === 'rawWindow') {
-                    return Reflect.defineProperty(rawWindow, key, value);
-                }
-                return Reflect.defineProperty(target, key, value);
-            },
-            // Object.getOwnPropertyNames(window)
-            ownKeys: (target) => {
-                return unique(Reflect.ownKeys(rawWindow).concat(Reflect.ownKeys(target)));
-            },
-            deleteProperty: (target, key) => {
-                if (target.hasOwnProperty(key)) {
-                    this.injectedKeys.has(key) && this.injectedKeys.delete(key);
-                    this.escapeKeys.has(key) && Reflect.deleteProperty(rawWindow, key);
-                    return Reflect.deleteProperty(target, key);
-                }
-                return true;
-            },
-        });
+        this.escapeKeys = new Set();
+        // sandbox state
+        this.active = false;
+        this.microAppWindow = {}; // Proxy target
+        // get scopeProperties and escapeProperties from plugins
+        this.getScopeProperties(appName);
+        // create proxyWindow with Proxy(microAppWindow)
+        this.proxyWindow = this.createProxyWindow();
+        // 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.microWindow.__MICRO_APP_BASE_ROUTE__ = this.microWindow.__MICRO_APP_BASE_URL__ = baseroute;
+            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) {
@@ -1967,10 +2089,10 @@ class SandBox {
         if (this.active) {
             this.active = false;
             this.releaseEffect();
-            this.microWindow.microApp.clearDataListener();
-            this.microWindow.microApp.clearGlobalDataListener();
+            this.microAppWindow.microApp.clearDataListener();
+            this.microAppWindow.microApp.clearGlobalDataListener();
             this.injectedKeys.forEach((key) => {
-                Reflect.deleteProperty(this.microWindow, key);
+                Reflect.deleteProperty(this.microAppWindow, key);
             });
             this.injectedKeys.clear();
             this.escapeKeys.forEach((key) => {
@@ -1984,12 +2106,12 @@ class SandBox {
     }
     // record umd snapshot before the first execution of umdHookMount
     recordUmdSnapshot() {
-        this.microWindow.__MICRO_APP_UMD_MODE__ = true;
+        this.microAppWindow.__MICRO_APP_UMD_MODE__ = true;
         this.recordUmdEffect();
-        recordDataCenterSnapshot(this.microWindow.microApp);
+        recordDataCenterSnapshot(this.microAppWindow.microApp);
         this.recordUmdinjectedValues = new Map();
         this.injectedKeys.forEach((key) => {
-            this.recordUmdinjectedValues.set(key, Reflect.get(this.microWindow, key));
+            this.recordUmdinjectedValues.set(key, Reflect.get(this.microAppWindow, key));
         });
     }
     // rebuild umd snapshot before remount umd app
@@ -1998,7 +2120,7 @@ class SandBox {
             Reflect.set(this.proxyWindow, key, value);
         });
         this.rebuildUmdEffect();
-        rebuildDataCenterSnapshot(this.microWindow.microApp);
+        rebuildDataCenterSnapshot(this.microAppWindow.microApp);
     }
     /**
      * get scopeProperties and escapeProperties from plugins
@@ -2033,20 +2155,178 @@ class SandBox {
             }
         }
     }
+    // create proxyWindow with Proxy(microAppWindow)
+    createProxyWindow() {
+        const rawWindow = globalEnv.rawWindow;
+        const descriptorTargetMap = new Map();
+        // window.xxx will trigger proxy
+        return new Proxy(this.microAppWindow, {
+            get: (target, key) => {
+                if (Reflect.has(target, key) ||
+                    (isString(key) && /^__MICRO_APP_/.test(key)) ||
+                    this.scopeProperties.includes(key))
+                    return Reflect.get(target, key);
+                const rawValue = Reflect.get(rawWindow, key);
+                return isFunction(rawValue) ? bindFunctionToRawWindow(rawWindow, rawValue) : rawValue;
+            },
+            set: (target, key, value) => {
+                if (this.active) {
+                    if (escapeSetterKeyList.includes(key)) {
+                        Reflect.set(rawWindow, key, value);
+                    }
+                    else if (
+                    // target.hasOwnProperty has been rewritten
+                    !rawHasOwnProperty.call(target, key) &&
+                        rawHasOwnProperty.call(rawWindow, key) &&
+                        !this.scopeProperties.includes(key)) {
+                        const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
+                        const { configurable, enumerable, writable, set } = descriptor;
+                        // set value because it can be set
+                        rawDefineProperty(target, key, {
+                            value,
+                            configurable,
+                            enumerable,
+                            writable: writable !== null && writable !== void 0 ? writable : !!set,
+                        });
+                        this.injectedKeys.add(key);
+                    }
+                    else {
+                        Reflect.set(target, key, value);
+                        this.injectedKeys.add(key);
+                    }
+                    if ((this.escapeProperties.includes(key) ||
+                        (staticEscapeProperties.includes(key) && !Reflect.has(rawWindow, key))) &&
+                        !this.scopeProperties.includes(key)) {
+                        Reflect.set(rawWindow, key, value);
+                        this.escapeKeys.add(key);
+                    }
+                }
+                return true;
+            },
+            has: (target, key) => {
+                if (this.scopeProperties.includes(key))
+                    return key in target;
+                return key in target || key in rawWindow;
+            },
+            // Object.getOwnPropertyDescriptor(window, key)
+            getOwnPropertyDescriptor: (target, key) => {
+                if (rawHasOwnProperty.call(target, key)) {
+                    descriptorTargetMap.set(key, 'target');
+                    return Object.getOwnPropertyDescriptor(target, key);
+                }
+                if (rawHasOwnProperty.call(rawWindow, key)) {
+                    descriptorTargetMap.set(key, 'rawWindow');
+                    const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
+                    if (descriptor && !descriptor.configurable) {
+                        descriptor.configurable = true;
+                    }
+                    return descriptor;
+                }
+                return undefined;
+            },
+            // Object.defineProperty(window, key, Descriptor)
+            defineProperty: (target, key, value) => {
+                const from = descriptorTargetMap.get(key);
+                if (from === 'rawWindow') {
+                    return Reflect.defineProperty(rawWindow, key, value);
+                }
+                return Reflect.defineProperty(target, key, value);
+            },
+            // Object.getOwnPropertyNames(window)
+            ownKeys: (target) => {
+                return unique(Reflect.ownKeys(rawWindow).concat(Reflect.ownKeys(target)));
+            },
+            deleteProperty: (target, key) => {
+                if (rawHasOwnProperty.call(target, key)) {
+                    this.injectedKeys.has(key) && this.injectedKeys.delete(key);
+                    this.escapeKeys.has(key) && Reflect.deleteProperty(rawWindow, key);
+                    return Reflect.deleteProperty(target, key);
+                }
+                return true;
+            },
+        });
+    }
     /**
-     * inject global properties to microWindow
-     * @param microWindow micro window
+     * inject global properties to microAppWindow
+     * @param microAppWindow micro window
      * @param appName app name
      * @param url app url
      */
-    inject(microWindow, appName, url) {
-        microWindow.__MICRO_APP_ENVIRONMENT__ = true;
-        microWindow.__MICRO_APP_NAME__ = appName;
-        microWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
-        microWindow.microApp = new EventCenterForMicroApp(appName);
-        microWindow.rawWindow = globalEnv.rawWindow;
-        microWindow.rawDocument = globalEnv.rawDocument;
-        microWindow.removeDomScope = removeDomScope;
+    initMicroAppWindow(microAppWindow, appName, url) {
+        microAppWindow.__MICRO_APP_ENVIRONMENT__ = true;
+        microAppWindow.__MICRO_APP_NAME__ = appName;
+        microAppWindow.__MICRO_APP_PUBLIC_PATH__ = getEffectivePath(url);
+        microAppWindow.__MICRO_APP_WINDOW__ = microAppWindow;
+        microAppWindow.microApp = new EventCenterForMicroApp(appName);
+        microAppWindow.rawWindow = globalEnv.rawWindow;
+        microAppWindow.rawDocument = globalEnv.rawDocument;
+        microAppWindow.removeDomScope = removeDomScope;
+        microAppWindow.hasOwnProperty = (key) => rawHasOwnProperty.call(microAppWindow, key) || rawHasOwnProperty.call(globalEnv.rawWindow, key);
+        this.setMappingPropertiesWithRawDescriptor(microAppWindow);
+        this.setHijackProperties(microAppWindow, appName);
+    }
+    // properties associated with the native window
+    setMappingPropertiesWithRawDescriptor(microAppWindow) {
+        let topValue, parentValue;
+        const rawWindow = globalEnv.rawWindow;
+        if (rawWindow === rawWindow.parent) { // not in iframe
+            topValue = parentValue = this.proxyWindow;
+        }
+        else { // in iframe
+            topValue = rawWindow.top;
+            parentValue = rawWindow.parent;
+        }
+        rawDefineProperty(microAppWindow, 'top', this.createDescriptorFormicroAppWindow('top', topValue));
+        rawDefineProperty(microAppWindow, 'parent', this.createDescriptorFormicroAppWindow('parent', parentValue));
+        globalPropertyList.forEach((key) => {
+            rawDefineProperty(microAppWindow, key, this.createDescriptorFormicroAppWindow(key, this.proxyWindow));
+        });
+    }
+    createDescriptorFormicroAppWindow(key, value) {
+        const { configurable = true, enumerable = true, writable, set } = Object.getOwnPropertyDescriptor(globalEnv.rawWindow, key) || { writable: true };
+        const descriptor = {
+            value,
+            configurable,
+            enumerable,
+            writable: writable !== null && writable !== void 0 ? writable : !!set
+        };
+        return descriptor;
+    }
+    // set hijack Properties to microAppWindow
+    setHijackProperties(microAppWindow, appName) {
+        let modifiedEval, modifiedImage;
+        rawDefineProperties(microAppWindow, {
+            document: {
+                get() {
+                    throttleDeferForSetAppName(appName);
+                    return globalEnv.rawDocument;
+                },
+                configurable: false,
+                enumerable: true,
+            },
+            eval: {
+                get() {
+                    throttleDeferForSetAppName(appName);
+                    return modifiedEval || eval;
+                },
+                set: (value) => {
+                    modifiedEval = value;
+                },
+                configurable: true,
+                enumerable: false,
+            },
+            Image: {
+                get() {
+                    throttleDeferForSetAppName(appName);
+                    return modifiedImage || globalEnv.ImageProxy;
+                },
+                set: (value) => {
+                    modifiedImage = value;
+                },
+                configurable: true,
+                enumerable: false,
+            },
+        });
     }
 }
 SandBox.activeCount = 0; // number of active sandbox
@@ -2115,7 +2395,7 @@ function dispatchCustomEventToMicroApp(eventName, appName, detail = {}) {
 // micro app instances
 const appInstanceMap = new Map();
 class CreateApp {
-    constructor({ name, url, ssrUrl, container, inline, scopecss, useSandbox, macro, baseroute, }) {
+    constructor({ name, url, ssrUrl, container, inline, scopecss, useSandbox, baseroute, }) {
         this.state = appStates.NOT_LOADED;
         this.keepAliveState = null;
         this.keepAliveContainer = null;
@@ -2126,7 +2406,6 @@ class CreateApp {
         this.umdMode = false;
         this.isPrefetch = false;
         this.container = null;
-        this.macro = false;
         this.baseroute = '';
         this.sandBox = null;
         this.container = container !== null && container !== void 0 ? container : null;
@@ -2138,13 +2417,12 @@ class CreateApp {
         this.url = url;
         this.useSandbox = useSandbox;
         this.scopecss = this.useSandbox && scopecss;
-        this.macro = macro !== null && macro !== void 0 ? macro : false;
         this.source = {
             links: new Map(),
             scripts: new Map(),
         };
         this.loadSourceCode();
-        this.useSandbox && (this.sandBox = new SandBox(name, url, this.macro));
+        this.useSandbox && (this.sandBox = new SandBox(name, url));
     }
     // Load resources
     loadSourceCode() {
@@ -2312,7 +2590,7 @@ class CreateApp {
         var _a;
         (_a = this.sandBox) === null || _a === void 0 ? void 0 : _a.stop();
         if (destroy) {
-            this.actionsForCompletelyDestory();
+            this.actionsForCompletelyDestroy();
         }
         else if (this.umdMode && this.container.childElementCount) {
             cloneContainer(this.container, this.source.html, false);
@@ -2324,7 +2602,7 @@ class CreateApp {
         unmountcb && unmountcb();
     }
     // actions for completely destroy
-    actionsForCompletelyDestory() {
+    actionsForCompletelyDestroy() {
         if (!this.useSandbox && this.umdMode) {
             delete window[this.libraryName];
         }
@@ -2390,92 +2668,6 @@ class CreateApp {
         return {};
     }
 }
-// if app not prefetch & not unmount, then app is active
-function getActiveApps() {
-    const activeApps = [];
-    appInstanceMap.forEach((app, appName) => {
-        if (appStates.UNMOUNT !== app.getAppState() && !app.isPrefetch) {
-            activeApps.push(appName);
-        }
-    });
-    return activeApps;
-}
-// get all registered apps
-function getAllApps() {
-    return Array.from(appInstanceMap.keys());
-}
-/**
- * unmount app by appname
- * @param appName
- * @param options unmountAppParams
- * @returns Promise<void>
- */
-function unmountApp(appName, options) {
-    const app = appInstanceMap.get(formatAppName(appName));
-    return new Promise((reslove) => {
-        if (app) {
-            if (app.getAppState() === appStates.UNMOUNT || app.isPrefetch) {
-                if (options === null || options === void 0 ? void 0 : options.destroy) {
-                    app.actionsForCompletelyDestory();
-                }
-                reslove();
-            }
-            else if (app.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN) {
-                if (options === null || options === void 0 ? void 0 : options.destroy) {
-                    app.unmount(true, reslove);
-                }
-                else if (options === null || options === void 0 ? void 0 : options.clearAliveState) {
-                    app.unmount(false, reslove);
-                }
-                else {
-                    reslove();
-                }
-            }
-            else {
-                const container = getRootContainer(app.container);
-                const unmountHandler = () => {
-                    container.removeEventListener('unmount', unmountHandler);
-                    container.removeEventListener('afterhidden', afterhiddenHandler);
-                    reslove();
-                };
-                const afterhiddenHandler = () => {
-                    container.removeEventListener('unmount', unmountHandler);
-                    container.removeEventListener('afterhidden', afterhiddenHandler);
-                    reslove();
-                };
-                container.addEventListener('unmount', unmountHandler);
-                container.addEventListener('afterhidden', afterhiddenHandler);
-                if (options === null || options === void 0 ? void 0 : options.destroy) {
-                    let destroyAttrValue, destoryAttrValue;
-                    container.hasAttribute('destroy') && (destroyAttrValue = container.getAttribute('destroy'));
-                    container.hasAttribute('destory') && (destoryAttrValue = container.getAttribute('destory'));
-                    container.setAttribute('destroy', 'true');
-                    container.parentNode.removeChild(container);
-                    container.removeAttribute('destroy');
-                    typeof destroyAttrValue === 'string' && container.setAttribute('destroy', destroyAttrValue);
-                    typeof destoryAttrValue === 'string' && container.setAttribute('destory', destoryAttrValue);
-                }
-                else if ((options === null || options === void 0 ? void 0 : options.clearAliveState) && container.hasAttribute('keep-alive')) {
-                    const keepAliveAttrValue = container.getAttribute('keep-alive');
-                    container.removeAttribute('keep-alive');
-                    container.parentNode.removeChild(container);
-                    container.setAttribute('keep-alive', keepAliveAttrValue);
-                }
-                else {
-                    container.parentNode.removeChild(container);
-                }
-            }
-        }
-        else {
-            logWarn(`app ${appName} does not exist`);
-            reslove();
-        }
-    });
-}
-// unmount all apps in turn
-function unmountAllApps(options) {
-    return Array.from(appInstanceMap.keys()).reduce((pre, next) => pre.then(() => unmountApp(next, options)), Promise.resolve());
-}
 
 // Record element and map element
 const dynamicElementInMicroAppMap = new WeakMap();
@@ -2946,7 +3138,6 @@ function defineElement(tagName) {
         // inline: whether js runs in inline script mode, default is false
         // disableScopecss: whether disable css scoped, default is false
         // disableSandbox: whether disable sandbox, default is false
-        // macro: used to solve the async render problem of vue3, default is false
         // baseRoute: route prefix, default is ''
         // keep-alive: open keep-alive mode
         connectedCallback() {
@@ -3144,7 +3335,7 @@ function defineElement(tagName) {
              * fix of unmounted umd app with disableSandbox
              */
             if (appInstanceMap.has(this.appName)) {
-                appInstanceMap.get(this.appName).actionsForCompletelyDestory();
+                appInstanceMap.get(this.appName).actionsForCompletelyDestroy();
             }
             const instance = new CreateApp({
                 name: this.appName,
@@ -3154,7 +3345,6 @@ function defineElement(tagName) {
                 inline: this.getDisposeResult('inline'),
                 scopecss: !(this.getDisposeResult('disableScopecss') || this.getDisposeResult('shadowDOM')),
                 useSandbox: !this.getDisposeResult('disableSandbox'),
-                macro: this.getDisposeResult('macro'),
                 baseroute: this.getBaseRouteCompatible(),
             });
             appInstanceMap.set(this.appName, instance);
@@ -3279,13 +3469,12 @@ function filterPreFetchTarget(apps) {
  *    url: string,
  *    disableScopecss?: boolean,
  *    disableSandbox?: boolean,
- *    macro?: boolean,
  *  },
  *  ...
  * ])
  * Note:
  *  1: preFetch is asynchronous and is performed only when the browser is idle
- *  2: disableScopecss, disableSandbox, macro must be same with micro-app element, if conflict, the one who executes first shall prevail
+ *  2: disableScopecss, disableSandbox must be same with micro-app element, if conflict, the one who executes first shall prevail
  * @param apps micro apps
  */
 function preFetch(apps) {
@@ -3295,13 +3484,12 @@ function preFetch(apps) {
     requestIdleCallback(() => {
         isFunction(apps) && (apps = apps());
         filterPreFetchTarget(apps).forEach((item) => {
-            var _a, _b, _c;
+            var _a, _b;
             const app = new CreateApp({
                 name: item.name,
                 url: item.url,
                 scopecss: !((_a = item.disableScopecss) !== null && _a !== void 0 ? _a : microApp.disableScopecss),
                 useSandbox: !((_b = item.disableSandbox) !== null && _b !== void 0 ? _b : microApp.disableSandbox),
-                macro: (_c = item.macro) !== null && _c !== void 0 ? _c : microApp.macro,
             });
             app.isPrefetch = true;
             appInstanceMap.set(item.name, app);
@@ -3351,6 +3539,99 @@ function getGlobalAssets(assets) {
     }
 }
 
+/**
+ * if app not prefetch & not unmount, then app is active
+ * @param excludeHiddenApp exclude hidden keep-alive app
+ * @returns active apps
+ */
+function getActiveApps(excludeHiddenApp) {
+    const activeApps = [];
+    appInstanceMap.forEach((app, appName) => {
+        if (appStates.UNMOUNT !== app.getAppState() &&
+            !app.isPrefetch &&
+            (!excludeHiddenApp ||
+                keepAliveStates.KEEP_ALIVE_HIDDEN !== app.getKeepAliveState())) {
+            activeApps.push(appName);
+        }
+    });
+    return activeApps;
+}
+// get all registered apps
+function getAllApps() {
+    return Array.from(appInstanceMap.keys());
+}
+/**
+ * unmount app by appname
+ * @param appName
+ * @param options unmountAppParams
+ * @returns Promise<void>
+ */
+function unmountApp(appName, options) {
+    const app = appInstanceMap.get(formatAppName(appName));
+    return new Promise((reslove) => {
+        if (app) {
+            if (app.getAppState() === appStates.UNMOUNT || app.isPrefetch) {
+                if (options === null || options === void 0 ? void 0 : options.destroy) {
+                    app.actionsForCompletelyDestroy();
+                }
+                reslove();
+            }
+            else if (app.getKeepAliveState() === keepAliveStates.KEEP_ALIVE_HIDDEN) {
+                if (options === null || options === void 0 ? void 0 : options.destroy) {
+                    app.unmount(true, reslove);
+                }
+                else if (options === null || options === void 0 ? void 0 : options.clearAliveState) {
+                    app.unmount(false, reslove);
+                }
+                else {
+                    reslove();
+                }
+            }
+            else {
+                const container = getRootContainer(app.container);
+                const unmountHandler = () => {
+                    container.removeEventListener('unmount', unmountHandler);
+                    container.removeEventListener('afterhidden', afterhiddenHandler);
+                    reslove();
+                };
+                const afterhiddenHandler = () => {
+                    container.removeEventListener('unmount', unmountHandler);
+                    container.removeEventListener('afterhidden', afterhiddenHandler);
+                    reslove();
+                };
+                container.addEventListener('unmount', unmountHandler);
+                container.addEventListener('afterhidden', afterhiddenHandler);
+                if (options === null || options === void 0 ? void 0 : options.destroy) {
+                    let destroyAttrValue, destoryAttrValue;
+                    container.hasAttribute('destroy') && (destroyAttrValue = container.getAttribute('destroy'));
+                    container.hasAttribute('destory') && (destoryAttrValue = container.getAttribute('destory'));
+                    container.setAttribute('destroy', 'true');
+                    container.parentNode.removeChild(container);
+                    container.removeAttribute('destroy');
+                    typeof destroyAttrValue === 'string' && container.setAttribute('destroy', destroyAttrValue);
+                    typeof destoryAttrValue === 'string' && container.setAttribute('destory', destoryAttrValue);
+                }
+                else if ((options === null || options === void 0 ? void 0 : options.clearAliveState) && container.hasAttribute('keep-alive')) {
+                    const keepAliveAttrValue = container.getAttribute('keep-alive');
+                    container.removeAttribute('keep-alive');
+                    container.parentNode.removeChild(container);
+                    container.setAttribute('keep-alive', keepAliveAttrValue);
+                }
+                else {
+                    container.parentNode.removeChild(container);
+                }
+            }
+        }
+        else {
+            logWarn(`app ${appName} does not exist`);
+            reslove();
+        }
+    });
+}
+// unmount all apps in turn
+function unmountAllApps(options) {
+    return Array.from(appInstanceMap.keys()).reduce((pre, next) => pre.then(() => unmountApp(next, options)), Promise.resolve());
+}
 class MicroApp extends EventCenterForBaseApp {
     constructor() {
         super(...arguments);
@@ -3385,7 +3666,6 @@ class MicroApp extends EventCenterForBaseApp {
             this.inline = options.inline;
             this.disableScopecss = options.disableScopecss;
             this.disableSandbox = options.disableSandbox;
-            this.macro = options.macro;
             this.ssr = options.ssr;
             isFunction(options.fetch) && (this.fetch = options.fetch);
             isPlainObject(options.lifeCycles) && (this.lifeCycles = options.lifeCycles);
@@ -3414,5 +3694,5 @@ class MicroApp extends EventCenterForBaseApp {
 var microApp = new MicroApp();
 
 export default microApp;
-export { EventCenterForMicroApp, getActiveApps, getAllApps, preFetch, pureCreateElement, removeDomScope, unmountAllApps, unmountApp, version };
+export { EventCenterForMicroApp, MicroApp, getActiveApps, getAllApps, preFetch, pureCreateElement, removeDomScope, unmountAllApps, unmountApp, version };
 //# sourceMappingURL=index.esm.js.map