@micro-zoe/micro-app 0.7.1 → 0.8.0

package/lib/index.esm.js

@@ -1,4 +1,4 @@
-const version = '0.7.1';
+const version = '0.8.0';
 // do not use isUndefined
 const isBrowser = typeof window !== 'undefined';
 // do not use isUndefined
@@ -252,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
  */
@@ -304,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) {
@@ -357,221 +359,355 @@ function fetchSource(url, appName = null, options = {}) {
     });
 }
 
-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();
-        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,
-            ImageProxy,
-            // common global vars
-            rawWindow,
-            rawDocument,
-            supportModuleScript,
-            templateStyle,
-            // sandbox/effect
-            rawWindowAddEventListener,
-            rawWindowRemoveEventListener,
-            rawSetInterval,
-            rawSetTimeout,
-            rawClearInterval,
-            rawClearTimeout,
-            rawDocumentAddEventListener,
-            rawDocumentRemoveEventListener,
-        });
-    }
-}
-
-/**
- * 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) {
-        // https://developer.mozilla.org/zh-CN/docs/Web/API/CSSRule
-        switch (rule.constructor.name) {
-            case 'CSSStyleRule':
-                result += scopedStyleRule(rule, prefix);
-                break;
-            case 'CSSMediaRule':
-                result += scopedPackRule(rule, prefix, 'media');
-                break;
-            case 'CSSSupportsRule':
-                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
@@ -580,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 });
         }
@@ -785,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();
 /**