@blueking/bk-weweb 0.0.23 → 0.0.26

package/dist/collect-source.js

@@ -37,6 +37,7 @@ var AppState;
     AppState["UNSET"] = "UNSET";
 })(AppState || (AppState = {}));
 
+// 当前正在运行的app
 let currentRunningApp = null;
 function getCurrentRunningApp() {
     return currentRunningApp;
@@ -44,12 +45,6 @@ function getCurrentRunningApp() {
 function setCurrentRunningApp(appInstance) {
     currentRunningApp = appInstance;
 }
-const SCOPED_CSS_STYLE_ID = 'SCOPED_CSS_STYLE_ID';
-const templateStyle = document.createElement('style');
-templateStyle.setAttribute('id', SCOPED_CSS_STYLE_ID);
-document.body.appendChild(templateStyle);
-templateStyle.sheet.disabled = true;
-const disabledStyleDom = templateStyle;
 const windowNativeFuncMap = new Map();
 /**
  * 收集原生window方法
@@ -164,122 +159,6 @@ const isJsonpUrl = (url) => {
     return !pathname.match(/\.js$/);
 };
 
-const { document: document$1 } = window;
-const { createElement, getElementById, getElementsByClassName, getElementsByName, getElementsByTagName, querySelector, querySelectorAll, } = Document.prototype;
-const { querySelector: bodyQuerySelector } = HTMLBodyElement.prototype;
-const SPECIAL_ELEMENT_TAG = ['body', 'html', 'head'];
-let hasRewrite$1 = false;
-function rewriteDocumentPrototypeMethods() {
-    if (hasRewrite$1)
-        return;
-    hasRewrite$1 = true;
-    Document.prototype.createElement = function (tagName, options) {
-        const element = createElement.call(this, tagName, options);
-        const app = getCurrentRunningApp();
-        // img.src = 'xxx' iframe.src = 'xxx' 均不能在setAttributes上监听 但是这里所有的src都是 全地址 无法判断是否需要添加子应用域名
-        // if (tagName.toLocaleLowerCase() === 'img') {
-        //   const observer = new MutationObserver((list, observer) =>  {
-        //     observer.disconnect();
-        //     const url = new URL((element as HTMLImageElement).src)
-        //     (element as HTMLImageElement).src = `${}`
-        //   });
-        //   observer.observe(element, { attributeFilter: ['src'], subtree: false, childList: false });
-        // }
-        if (app)
-            element.__BK_WEWEB_APP_KEY__ = app.appCacheKey;
-        return element;
-    };
-    /**
-     * 查询选择器的新方法
-     * @param selectors 选择器字符串
-     * @returns 匹配的元素或 null
-     */
-    function querySelectorNew(selectors) {
-        const app = getCurrentRunningApp();
-        // 如果选择器是特殊元素标签
-        if (SPECIAL_ELEMENT_TAG.includes(selectors)) {
-            // 如果当前应用程序容器是 ShadowRoot 类型
-            if (app?.container instanceof ShadowRoot) {
-                return app?.container;
-            }
-            if (this instanceof HTMLBodyElement)
-                return bodyQuerySelector.call(this, selectors);
-            // 否则调用原始的 querySelector 方法
-            return querySelector.call(this, selectors);
-        }
-        // 如果没有当前应用程序或选择器为空或文档不是当前文档
-        if (!app || !selectors || ![document$1, document$1.body].includes(this)) {
-            if (this instanceof HTMLBodyElement)
-                return bodyQuerySelector.call(this, selectors);
-            // 调用原始的 querySelector 方法
-            return querySelector.call(this, selectors);
-        }
-        // 返回当前应用程序容器中匹配选择器的元素，如果没有匹配的元素则返回 null
-        return app?.container?.querySelector(selectors) ?? null;
-    }
-    /**
-     * 重写了 Document 类的 querySelectorAll 方法
-     * @param selectors - 要查询的选择器
-     * @returns 匹配到的元素列表或空数组
-     */
-    function querySelectorAllNew(selectors) {
-        const app = getCurrentRunningApp();
-        // 如果选择器是特殊元素标签，则返回容器元素或调用原生 querySelector 方法
-        if (SPECIAL_ELEMENT_TAG.includes(selectors)) {
-            if (app?.container instanceof ShadowRoot) {
-                return app?.container;
-            }
-            return querySelector.call(this, selectors);
-        }
-        // 如果没有运行中的应用程序、选择器为空或文档不是当前文档，则调用原生 querySelectorAll 方法
-        if (!app || !selectors || document$1 !== this) {
-            return querySelectorAll.call(this, selectors);
-        }
-        // 返回运行中应用程序的容器元素中匹配到的元素列表或空数组
-        return app?.container?.querySelectorAll(selectors) ?? [];
-    }
-    Document.prototype.querySelector = querySelectorNew;
-    Document.prototype.querySelectorAll = querySelectorAllNew;
-    HTMLBodyElement.prototype.querySelector = querySelectorNew;
-    Document.prototype.getElementById = function getElementByIdNew(key) {
-        return getCurrentRunningApp() ? querySelectorNew.call(this, `#${key}`) : getElementById.call(this, key);
-    };
-    Document.prototype.getElementsByClassName = function (key) {
-        return getCurrentRunningApp() ? querySelectorAllNew.call(this, `.${key}`) : getElementsByClassName.call(this, key);
-    };
-    // eslint-disable-next-line max-len
-    Document.prototype.getElementsByTagName = function (key) {
-        const app = getCurrentRunningApp();
-        if (!app || SPECIAL_ELEMENT_TAG.includes(key) || (!app?.showSourceCode && key.toLocaleLowerCase() === 'script')) {
-            return getElementsByTagName.call(this, key);
-        }
-        return querySelectorAllNew.call(this, key);
-    };
-    Document.prototype.getElementsByName = function (key) {
-        return getCurrentRunningApp() ? querySelectorAllNew.call(this, `[name=${key}]`) : getElementsByName.call(this, key);
-    };
-}
-function resetDocumentPrototypeMethods() {
-    Document.prototype.createElement = createElement;
-    Document.prototype.querySelector = querySelector;
-    HTMLBodyElement.prototype.querySelector = bodyQuerySelector;
-    Document.prototype.querySelectorAll = querySelectorAll;
-    Document.prototype.getElementById = getElementById;
-    Document.prototype.getElementsByClassName = getElementsByClassName;
-    Document.prototype.getElementsByTagName = getElementsByTagName;
-    Document.prototype.getElementsByName = getElementsByName;
-    hasRewrite$1 = false;
-}
-// vue3.3之后会换成document 这些需要初始化调用的app
-function createRewriteDocument(rawDocument, app) {
-    return Object.defineProperty(rawDocument, 'createElement', {
-        get() {
-            app?.registerRunningApp();
-            return Document.prototype.createElement;
-        },
-    });
-}
-
 /*
  * Tencent is pleased to support the open source community by making
  * 蓝鲸智云PaaS平台 (BlueKing PaaS) available.
@@ -350,6 +229,42 @@ function dispatchLinkOrScriptError(element) {
     element.dispatchEvent(event);
 }
 
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台 (BlueKing PaaS) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台 (BlueKing PaaS) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台 (BlueKing PaaS):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
+// deactivated
+function deactivated(appKey) {
+    const app = appCache.getApp(appKey);
+    if (app && [AppState.ACTIVATED, AppState.MOUNTED].includes(app.status)) {
+        app.keepAlive ? app.deactivated() : app.unmount();
+    }
+    if (!appCache.hasActiveApp) {
+        resetBodyAndHeaderMethods();
+    }
+}
+
 /*
  * Tencent is pleased to support the open source community by making
  * 蓝鲸智云PaaS平台 (BlueKing PaaS) available.
@@ -441,6 +356,7 @@ function loadInstance(props) {
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
+// unmount
 function unmount(appKey) {
     const app = appCache.getApp(appKey);
     if (app && app.status !== AppState.UNMOUNT) {
@@ -448,43 +364,6 @@ function unmount(appKey) {
     }
     if (!appCache.hasActiveApp) {
         resetBodyAndHeaderMethods();
-        resetDocumentPrototypeMethods();
-    }
-}
-
-/*
- * Tencent is pleased to support the open source community by making
- * 蓝鲸智云PaaS平台 (BlueKing PaaS) available.
- *
- * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * 蓝鲸智云PaaS平台 (BlueKing PaaS) is licensed under the MIT License.
- *
- * License for 蓝鲸智云PaaS平台 (BlueKing PaaS):
- *
- * ---------------------------------------------------
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
- * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
- * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
- * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
- * the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
- * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
- * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
- * IN THE SOFTWARE.
- */
-function deactivated(appKey) {
-    const app = appCache.getApp(appKey);
-    if (app && [AppState.ACTIVATED, AppState.MOUNTED].includes(app.status)) {
-        app.keepAlive ? app.deactivated() : app.unmount();
-    }
-    if (!appCache.hasActiveApp) {
-        resetBodyAndHeaderMethods();
-        resetDocumentPrototypeMethods();
     }
 }
 
@@ -675,7 +554,6 @@ function fetchSource(url, options = {}) {
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
-/* eslint-disable no-param-reassign */
 class Style {
     code = '';
     fromHtml;
@@ -694,9 +572,15 @@ class Style {
         this.fromHtml = fromHtml;
         this.initial = initial ?? false;
     }
-    commonScoped(templateStyle, styleElement, app) {
+    /**
+     * @param styleElement 样式node
+     * @param app 应用实例
+     */
+    commonScoped(styleElement, app) {
         if (app.scopeCss && !(app.container instanceof ShadowRoot)) {
-            const rules = Array.from(templateStyle.sheet?.cssRules ?? []);
+            const cssStyleSheet = new CSSStyleSheet({ disabled: true });
+            cssStyleSheet.replaceSync(styleElement.textContent || this.code);
+            const rules = Array.from(cssStyleSheet?.cssRules ?? []);
             const cssPrefix = `#${app.name}`;
             const scopedCss = this.scopeRule(rules, cssPrefix);
             const cssText = this.resetUrlHost(scopedCss, app.url, this.url);
@@ -704,7 +588,7 @@ class Style {
             this.scopedCode = cssText;
         }
         else {
-            const cssText = this.resetUrlHost(styleElement.textContent || templateStyle.textContent || '', app.url, this.url);
+            const cssText = this.resetUrlHost(styleElement.textContent || this.code || '', app.url, this.url);
             // fix https://bugs.chromium.org/p/chromium/issues/detail?id=336876
             if (cssText && app.container instanceof ShadowRoot) {
                 let fontContent = '';
@@ -730,6 +614,10 @@ class Style {
             delete styleElement.__BK_WEWEB_APP_KEY__;
         return styleElement;
     }
+    /**
+     * @param app 应用实例
+     * @returns 返回执行后的style标签
+     */
     async excuteCode(app) {
         app.registerRunningApp();
         let styleElement = this.createStyleElement();
@@ -837,11 +725,9 @@ class Style {
         const container = needKeepAlive ? document.head : app.container;
         try {
             if (this.code) {
-                disabledStyleDom.textContent = styleElement.textContent || this.code;
-                this.commonScoped(disabledStyleDom, styleElement, app);
+                this.commonScoped(styleElement, app);
                 container?.prepend(styleElement);
                 linkElement && dispatchLinkOrScriptLoad(linkElement);
-                disabledStyleDom.textContent = '';
             }
             else if (linkElement.getAttribute('href')) {
                 this.url = fillUpPath(linkElement.getAttribute('href'), app.url);
@@ -885,9 +771,7 @@ class Style {
             }
             if (this.linkedBaseStyle(styleElement, app))
                 return styleElement;
-            disabledStyleDom.textContent = this.code;
-            this.commonScoped(disabledStyleDom, styleElement, app);
-            disabledStyleDom.textContent = '';
+            this.commonScoped(styleElement, app);
         }
         else {
             const observer = new MutationObserver(() => {
@@ -895,7 +779,7 @@ class Style {
                     return;
                 observer.disconnect();
                 if (!this.linkedBaseStyle(styleElement, app)) {
-                    this.commonScoped(styleElement, styleElement, app);
+                    this.commonScoped(styleElement, app);
                 }
             });
             observer.observe(styleElement, { attributes: false, characterData: true, childList: true, subtree: true });
@@ -946,21 +830,22 @@ async function excuteAppStyles(app, container) {
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
+// bk-kweweb 微模块模式
 class MicroInstanceModel {
-    state = AppState.UNSET;
-    appCacheKey;
-    container;
-    data;
-    initSource;
-    isPreLoad = false;
-    keepAlive;
-    name;
-    sandBox;
-    scopeCss = true;
-    scopeJs = false;
-    showSourceCode = true;
-    source;
-    url;
+    state = AppState.UNSET; // 当前实例状态
+    appCacheKey; // 缓存key
+    container; // 容器
+    data; // 数据
+    initSource; // 初始资源
+    isPreLoad = false; // 是否预加载
+    keepAlive; // 是否缓存
+    name; // 名称
+    sandBox; // 沙箱
+    scopeCss = true; // 是否隔离样式
+    scopeJs = false; // 是否隔离js
+    showSourceCode = true; // 是否显示源码
+    source; // 入口资源
+    url; // url
     constructor(props) {
         this.name = props.id !== props.url ? props.id : random(5);
         this.appCacheKey = props.id || this.name;
@@ -1042,12 +927,6 @@ class MicroInstanceModel {
             await this.source.importEntery(this);
         }
     }
-    set status(v) {
-        this.state = v;
-    }
-    get status() {
-        return this.state;
-    }
     unmount(needDestroy) {
         this.state = AppState.UNMOUNT;
         this.sandBox?.deactivated();
@@ -1055,6 +934,12 @@ class MicroInstanceModel {
         this.container.innerHTML = '';
         this.container = undefined;
     }
+    set status(v) {
+        this.state = v;
+    }
+    get status() {
+        return this.state;
+    }
 }
 
 /*
@@ -1082,9 +967,6 @@ class MicroInstanceModel {
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
-/* eslint-disable no-restricted-syntax */
-/* eslint-disable no-prototype-builtins */
-/* eslint-disable no-param-reassign */
 let firstGlobalProp;
 let secondGlobalProp;
 let lastGlobalProp;
@@ -1109,6 +991,11 @@ class Script {
         this.fromHtml = fromHtml ?? false;
         this.initial = initial ?? false;
     }
+    /**
+     * @param app 应用
+     * @param needRelaceScriptElement 是否需要替换script标签
+     * @returns 返回执行后的script标签或注释
+     */
     async excuteCode(app, needRelaceScriptElement = false) {
         try {
             if (!this.code)
@@ -1154,26 +1041,27 @@ class Script {
         }
         return;
     }
+    // 内存脚本执行
     executeMemoryScript(app, scopedCode) {
         try {
             const isScopedLocation = app instanceof MicroAppModel && app.scopeLocation;
             app.registerRunningApp();
-            // eslint-disable-next-line no-new-func
             new Function('window', 'location', 'history', scopedCode)(app.sandBox.proxyWindow, isScopedLocation ? app.iframe.contentWindow.location : window.location, isScopedLocation ? app.iframe.contentWindow.history : window.history);
         }
         catch (e) {
             console.error(e);
         }
     }
+    // 脚本标签执行
     executeSourceScript(scriptElement, scopedCode) {
         if (this.isModule) {
-            if (this.url?.match(/\.ts$/)) {
-                scriptElement.src = this.url;
-            }
-            else {
-                const blob = new Blob([scopedCode], { type: 'text/javascript' });
-                scriptElement.src = URL.createObjectURL(blob);
-            }
+            scriptElement.src = this.url + '?key=' + Date.now();
+            // if (this.url?.match(/\.ts$/)) {
+            //   // scriptElement.src = this.url + '?key=' + Date.now()!;
+            // } else {
+            //   // const blob = new Blob([this.code], { type: 'text/javascript' });
+            //   // scriptElement.src = URL.createObjectURL(blob);
+            // }
             scriptElement.setAttribute('type', 'module');
         }
         else {
@@ -1181,6 +1069,7 @@ class Script {
         }
         this.url && scriptElement.setAttribute('origin-src', this.url);
     }
+    // 获取脚本内容
     async getCode(app) {
         if (this.code.length || !this.url) {
             return this.code;
@@ -1204,9 +1093,15 @@ class Script {
     setCode(code) {
         this.code = code;
     }
+    // 转换脚本内容
     transformCode(app) {
         if (app.sandBox) {
-            if (app.showSourceCode || this.isModule) {
+            if (this.isModule) {
+                return ` with(window.${app.sandBox.windowSymbolKey}){
+          ;${this.code}\n
+        }`;
+            }
+            if (app.showSourceCode) {
                 return `;(function(window, self){
           with(window){
             ;${this.code}\n
@@ -1277,14 +1172,15 @@ function noteGlobalProps(global) {
 }
 // app初始化dom 脚本执行
 async function execAppScripts(app) {
-    const appInitialScriptList = Array.from(app.source.scripts.values()).filter(script => script.initial);
-    // 初始化脚本最先执行
-    if (appInitialScriptList.length) {
-        await Promise.all(appInitialScriptList.map(script => script.excuteCode(app)));
-    }
-    const appScriptList = Array.from(app.source.scripts.values()).filter(script => script.fromHtml && !script.initial);
+    // const appInitialScriptList = Array.from(app.source!.scripts.values()).filter(script => script.initial);
+    // // 初始化脚本最先执行
+    // if (appInitialScriptList.length) {
+    //   await Promise.all(appInitialScriptList.map(script => script.excuteCode(app)));
+    // }
+    const appScriptList = Array.from(app.source.scripts.values()).filter(script => script.fromHtml || script.initial);
     const commomList = appScriptList.filter(script => (!script.async && !script.defer) || script.isModule);
     // 保证同步脚本 和 module类型 最先执行
+    await Promise.all(commomList.map(script => script.getCode(app)));
     await Promise.all(commomList.map(script => script.excuteCode(app)));
     // 最后执行 defer 和 async 脚本
     const deferScriptList = [];
@@ -1600,9 +1496,9 @@ function resetBodyAndHeaderMethods() {
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
+// before load
 function beforeLoad() {
     rewriteBodyAndHeaderMethods();
-    rewriteDocumentPrototypeMethods();
 }
 
 /*
@@ -1630,6 +1526,7 @@ function beforeLoad() {
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
+// 激活应用
 function activated(appKey, container, callback) {
     const app = appCache.getApp(appKey);
     if (app?.status === AppState.DEACTIVATED && app.keepAlive) {
@@ -1647,6 +1544,8 @@ function activated(appKey, container, callback) {
     }
 }
 
+/* eslint-disable @typescript-eslint/member-ordering */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /*
  * Tencent is pleased to support the open source community by making
  * 蓝鲸智云PaaS平台 (BlueKing PaaS) available.
@@ -1693,7 +1592,9 @@ class BkWewebElement extends HTMLElement {
         return [WewebCustomAttrs.url];
     }
     getBooleanAttr(name) {
-        return this.hasAttribute(name) ? this.getAttribute(name) !== 'false' : undefined;
+        return this.hasAttribute(name) || this.hasAttribute(name.replace(/([A-Z])/g, `-$1`).toLocaleLowerCase())
+            ? this.getAttribute(name) !== 'false'
+            : undefined;
     }
     async handleAttributeChanged() {
         if (!this.appKey)
@@ -1708,6 +1609,29 @@ class BkWewebElement extends HTMLElement {
         }
         await load(this.appProps);
     }
+    attributeChangedCallback(attr, _oldVal, newVal) {
+        if (attr !== WewebCustomAttrs.url || this[attr] === newVal || !this.connected)
+            return;
+        this.appUrl = newVal;
+        const cacheApp = appCache.getApp(this.appKey);
+        (this.connected || cacheApp) && this.handleAttributeChanged();
+    }
+    async connectedCallback() {
+        if (this.getBooleanAttr(WewebCustomAttrs.setShodowDom) && !this.shadowRoot) {
+            this.attachShadow({ delegatesFocus: false, mode: 'open' });
+        }
+        await load(this.appProps);
+        activated(this.appKey, this.shadowRoot ?? this);
+        this.connected = true;
+    }
+    disconnectedCallback() {
+        this.connected = false;
+        if (this.appProps.keepAlive) {
+            deactivated(this.appKey);
+        }
+        else
+            unmount(this.appKey);
+    }
     get appData() {
         if (this.hasAttribute(WewebCustomAttrs.data)) {
             try {
@@ -1748,29 +1672,6 @@ class BkWewebElement extends HTMLElement {
             url: this.getAttribute(WewebCustomAttrs.url),
         };
     }
-    attributeChangedCallback(attr, _oldVal, newVal) {
-        if (attr !== WewebCustomAttrs.url || this[attr] === newVal || !this.connected)
-            return;
-        this.appUrl = newVal;
-        const cacheApp = appCache.getApp(this.appKey);
-        (this.connected || cacheApp) && this.handleAttributeChanged();
-    }
-    async connectedCallback() {
-        if (this.getBooleanAttr(WewebCustomAttrs.setShodowDom) && !this.shadowRoot) {
-            this.attachShadow({ delegatesFocus: false, mode: 'open' });
-        }
-        await load(this.appProps);
-        activated(this.appKey, this.shadowRoot ?? this);
-        this.connected = true;
-    }
-    disconnectedCallback() {
-        this.connected = false;
-        if (this.appProps.keepAlive) {
-            deactivated(this.appKey);
-        }
-        else
-            unmount(this.appKey);
-    }
 }
 
 var WewebMode;
@@ -1806,8 +1707,8 @@ var WewebMode;
  * IN THE SOFTWARE.
  */
 const WINDOW_WHITE_LIST = [
-    'System',
-    '__cjsWrapper',
+    'System', // SystemJS
+    '__cjsWrapper', // SystemJS CommonJS wrapper
     process.env.NODE_ENV !== 'production' ? '__REACT_DEVTOOLS_GLOBAL_HOOK__' : '',
 ];
 // 一定需要在子应用自身上下文获取的属性名
@@ -1819,6 +1720,11 @@ const BK_WEWEB_INJECT_KEY_LIST = [
 const WINDOW_ALIAS_LIST = ['window', 'self', 'globalThis'];
 // 设置了scopedLocation 后需要监听属性名
 const BK_WEWEB_LOCATION_KEY_LIST = ['location', 'history'];
+const COMMON_MICRO_APP_WINDOE_KEY_MAP = {
+    __bk_pop_manager: true,
+    __bk_zIndex_manager: true,
+    i18n: true,
+};
 const DEV_MICRO_APP_WINDOE_KEY_MAP = process.env.NODE_ENV !== 'production'
     ? {
         __DEV__: true,
@@ -1828,16 +1734,185 @@ const DEV_MICRO_APP_WINDOE_KEY_MAP = process.env.NODE_ENV !== 'production'
         __VUE_I18N_FULL_INSTALL__: true,
         __VUE_I18N_LEGACY_API__: true,
         __VUE_OPTIONS_API__: true,
-        __bk_pop_manager: true,
-        __bk_zIndex_manager: true,
         '__core-js_shared__': true,
-        i18n: true,
         webpackChunkapm: true,
         webpackChunkpc: true,
         webpackChunktrace: true,
         webpackJsonp: true,
+        ...COMMON_MICRO_APP_WINDOE_KEY_MAP,
     }
-    : {};
+    : COMMON_MICRO_APP_WINDOE_KEY_MAP;
+
+const SPECIAL_ELEMENT_TAG = ['body', 'html', 'head'];
+/**
+ * 创建代理的document
+ * @param rawDocument 原始document
+ * @param app 应用实例
+ * @returns 代理的document
+ */
+const createProxyDocument = (rawDocument, app) => {
+    const fakeDocument = {};
+    function shadowRootInsertAdjacentHTML(where, domString) {
+        const temporaryContainer = document.createElement('div');
+        temporaryContainer.innerHTML = domString;
+        const elements = Array.from(temporaryContainer.childNodes);
+        const shadow = app.container;
+        switch (where) {
+            case 'beforebegin':
+                elements.forEach(el => shadow.host.parentNode?.insertBefore(el, shadow.host));
+                break;
+            case 'afterbegin':
+                elements.reverse().forEach(el => shadow.insertBefore(el, shadow.firstChild));
+                break;
+            case 'beforeend':
+                elements.forEach(el => shadow.appendChild(el));
+                break;
+            case 'afterend':
+                elements.forEach(el => shadow.host.parentNode?.insertBefore(el, shadow.host.nextSibling));
+                break;
+        }
+    }
+    const proxyBody = new Proxy({}, {
+        get(_, key) {
+            // ShadowRoot 处理逻辑简化
+            if (app.container instanceof ShadowRoot) {
+                if (key === 'insertAdjacentHTML') {
+                    // shadowRoot 中没有 insertAdjacentHTML
+                    return shadowRootInsertAdjacentHTML.bind(app.container);
+                }
+                const value = app.container[key];
+                if (typeof value === 'function') {
+                    return value.bind(app.container);
+                }
+                if (value !== undefined) {
+                    return value;
+                }
+            }
+            // 直接返回 rawDocument.body 的属性或绑定函数
+            const value = Reflect.get(rawDocument.body, key);
+            return typeof value === 'function' ? value.bind(rawDocument.body) : value;
+        },
+        set(_, key, value) {
+            // ShadowRoot 处理逻辑简化
+            if (app.container instanceof ShadowRoot) {
+                app.container[key] = value;
+                return true;
+            }
+            // 直接设置 rawDocument.body 的属性
+            Reflect.set(rawDocument.body, key, value);
+            return true;
+        },
+    });
+    /**
+     * @param tagName 标签名
+     * @param options 选项
+     * @returns
+     */
+    function createElement(tagName, options) {
+        const element = rawDocument.createElement(tagName, options);
+        // img.src = 'xxx' iframe.src = 'xxx' 均不能在setAttributes上监听 但是这里所有的src都是 全地址 无法判断是否需要添加子应用域名
+        // if (tagName.toLocaleLowerCase() === 'img') {
+        //   const observer = new MutationObserver((list, observer) =>  {
+        //     observer.disconnect();
+        //     const url = new URL((element as HTMLImageElement).src)
+        //     (element as HTMLImageElement).src = `${}`
+        //   });
+        //   observer.observe(element, { attributeFilter: ['src'], subtree: false, childList: false });
+        // }
+        element.__BK_WEWEB_APP_KEY__ = app.appCacheKey;
+        return element;
+    }
+    /**
+     * 查询选择器的新方法
+     * @param selectors 选择器字符串
+     * @returns 匹配的元素或 null
+     */
+    function querySelectorNew(selectors) {
+        if (selectors === proxyBody) {
+            return app.container instanceof ShadowRoot ? app.container : rawDocument.body;
+        }
+        // 如果选择器是特殊元素标签
+        if (SPECIAL_ELEMENT_TAG.includes(selectors)) {
+            // 如果当前应用程序容器是 ShadowRoot 类型
+            if (app?.container instanceof ShadowRoot) {
+                return app?.container;
+            }
+            // 否则调用原始的 querySelector 方法
+            return rawDocument.querySelector.call(this, selectors);
+        }
+        // 返回当前应用程序容器中匹配选择器的元素，如果没有匹配的元素则返回 null
+        try {
+            return app?.container?.querySelector(selectors) ?? null;
+        }
+        catch {
+            return null;
+        }
+    }
+    /**
+     * 重写了 Document 类的 querySelectorAll 方法
+     * @param selectors - 要查询的选择器
+     * @returns 匹配到的元素列表或空数组
+     */
+    function querySelectorAllNew(selectors) {
+        // 如果选择器是特殊元素标签，则返回容器元素或调用原生 querySelector 方法
+        if (SPECIAL_ELEMENT_TAG.includes(selectors)) {
+            if (app?.container instanceof ShadowRoot) {
+                return app?.container;
+            }
+            return rawDocument.querySelector(selectors);
+        }
+        // 返回运行中应用程序的容器元素中匹配到的元素列表或空数组
+        return app?.container?.querySelectorAll(selectors) ?? [];
+    }
+    function getElementByIdNew(key) {
+        return querySelectorNew.call(rawDocument, `#${key}`);
+    }
+    function getElementsByClassName(key) {
+        return querySelectorAllNew(`.${key}`);
+    }
+    function getElementsByTagName(key) {
+        if (SPECIAL_ELEMENT_TAG.includes(key) || (!app?.showSourceCode && key.toLocaleLowerCase() === 'script')) {
+            return rawDocument.getElementsByTagName(key);
+        }
+        return querySelectorAllNew(key);
+    }
+    function getElementsByNameNew(key) {
+        return querySelectorAllNew(`[name=${key}]`);
+    }
+    return new Proxy(fakeDocument, {
+        get(_, key) {
+            if (key === 'createElement') {
+                return createElement.bind(rawDocument);
+            }
+            if (key === 'querySelector') {
+                return querySelectorNew.bind(rawDocument);
+            }
+            if (key === 'querySelectorAll') {
+                return querySelectorAllNew.bind(rawDocument);
+            }
+            if (key === 'getElementById') {
+                return getElementByIdNew.bind(rawDocument);
+            }
+            if (key === 'getElementsByClassName') {
+                return getElementsByClassName.bind(rawDocument);
+            }
+            if (key === 'getElementsByTagName') {
+                return getElementsByTagName.bind(rawDocument);
+            }
+            if (key === 'getElementsByName') {
+                return getElementsByNameNew.bind(rawDocument);
+            }
+            if (key === 'body') {
+                return proxyBody;
+            }
+            const result = Reflect.get(rawDocument, key);
+            if (typeof result === 'function') {
+                return result.bind(rawDocument);
+            }
+            return result;
+        },
+    });
+};
 
 /*
  * Tencent is pleased to support the open source community by making
@@ -1934,8 +2009,6 @@ function rewriteDocumentAndBodyEvent() {
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
-/* eslint-disable max-len */
-/* eslint-disable no-prototype-builtins */
 // 正则表达式，用于匹配类定义
 const CLASS_REGEX = /^class\b/;
 // 正则表达式，用于匹配以大写字母开头的函数定义
@@ -2009,6 +2082,31 @@ function bindFunctionToRawWindow(rawWindow, value) {
     return value;
 }
 
+/*
+ * Tencent is pleased to support the open source community by making
+ * 蓝鲸智云PaaS平台 (BlueKing PaaS) available.
+ *
+ * Copyright (C) 2021 THL A29 Limited, a Tencent company.  All rights reserved.
+ *
+ * 蓝鲸智云PaaS平台 (BlueKing PaaS) is licensed under the MIT License.
+ *
+ * License for 蓝鲸智云PaaS平台 (BlueKing PaaS):
+ *
+ * ---------------------------------------------------
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+ * documentation files (the "Software"), to deal in the Software without restriction, including without limitation
+ * the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
+ * to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial portions of
+ * the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
+ * THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+ * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+ * IN THE SOFTWARE.
+ */
 // rewrite window funtion like settimeout setinterval ...
 function rewriteWindowFunction(fakeWindow) {
     const windowEventLisenerMap = new Map();
@@ -2083,9 +2181,6 @@ function rewriteWindowFunction(fakeWindow) {
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
-/* eslint-disable no-new-func */
-/* eslint-disable no-param-reassign */
-/* eslint-disable no-prototype-builtins */
 class SandBox {
     app;
     active = false;
@@ -2093,7 +2188,8 @@ class SandBox {
     resetDocumentAndBodyEvent;
     resetWindowFunction;
     sameRawWindowKeySet = new Set();
-    fakeWindow = {};
+    fakeWindow;
+    proxyDocument;
     proxyWindow;
     rawDocument;
     rawWindow;
@@ -2102,13 +2198,15 @@ class SandBox {
         this.app = app;
         const windowDescriptorSet = new Set();
         const rawWindow = window;
-        const rawDocument = createRewriteDocument(document, this.app);
-        this.fakeWindow.__POWERED_BY_BK_WEWEB__ = true;
-        this.fakeWindow.__BK_WEWEB_APP_KEY__ = app.appCacheKey;
         this.rawWindow = rawWindow;
-        this.rawDocument = rawDocument;
-        this.fakeWindow.rawWindow = rawWindow;
-        this.fakeWindow.rawDocument = rawDocument;
+        this.rawDocument = createProxyDocument(document, app);
+        const fakeWindow = Object.create({});
+        fakeWindow.__BK_WEWEB_APP_KEY__ = app.appCacheKey;
+        fakeWindow.__POWERED_BY_BK_WEWEB__ = true;
+        fakeWindow.rawDocument = document;
+        fakeWindow.rawWindow = rawWindow;
+        fakeWindow.__proto__ = Window;
+        this.fakeWindow = fakeWindow;
         const { resetWindowFunction } = rewriteWindowFunction(this.fakeWindow);
         this.resetWindowFunction = resetWindowFunction;
         this.windowSymbolKey = `__${(app.name || app.appCacheKey).replace(/(-|,|:|~|'|")/gim, '_')}_${random(10)}__`;
@@ -2137,11 +2235,10 @@ class SandBox {
                     return this.proxyWindow;
                 if (key === 'document') {
                     app.registerRunningApp();
-                    return rawDocument;
+                    return this.rawDocument;
                 }
                 if (key === 'eval') {
                     app.registerRunningApp();
-                    // eslint-disable-next-line no-eval
                     return eval;
                 }
                 if (BK_WEWEB_LOCATION_KEY_LIST.includes(key) &&
@@ -2158,6 +2255,14 @@ class SandBox {
                     }
                     return Reflect.get(rawWindow, key); // iframe
                 }
+                if (key === 'getComputedStyle') {
+                    return (element, pseudoElt) => {
+                        if (element instanceof Element) {
+                            return rawWindow.getComputedStyle(element, pseudoElt);
+                        }
+                        return rawWindow.getComputedStyle(document.body, pseudoElt);
+                    };
+                }
                 if (Reflect.has(target, key) || BK_WEWEB_INJECT_KEY_LIST.includes(key))
                     return Reflect.get(target, key);
                 const rawValue = Reflect.get(rawWindow, key);
@@ -2234,6 +2339,7 @@ class SandBox {
     activeated(data) {
         if (!this.active) {
             this.active = true;
+            this.rawDocument = createProxyDocument(document, this.app);
             this.fakeWindow.__BK_WEWEB_DATA__ = data ?? {};
             const { resetDocumentAndBodyEvent } = rewriteDocumentAndBodyEvent();
             this.resetDocumentAndBodyEvent = resetDocumentAndBodyEvent;
@@ -2280,23 +2386,25 @@ class SandBox {
  * IN THE SOFTWARE.
  */
 const BLANK_ORIGN = 'about:blank';
+// bk-weweb 微应用模式
 class MicroAppModel {
-    state = AppState.UNSET;
-    container;
-    data;
-    iframe = null;
-    initSource;
-    isPreLoad = false;
+    state = AppState.UNSET; // 状态
+    container; // 容器
+    data; // 数据
+    iframe = null; // scoped iframe
+    initSource; // 初始资源
+    isModuleApp = false; // 是否预加载
+    isPreLoad = false; // 是否缓存
     keepAlive;
-    mode = WewebMode.APP;
-    name;
-    sandBox;
-    scopeCss;
-    scopeJs;
-    scopeLocation;
-    showSourceCode;
-    source;
-    url;
+    mode = WewebMode.APP; // 名称
+    name; // 沙箱
+    sandBox; // 是否隔离样式
+    scopeCss; // 是否隔离js
+    scopeJs; // 是否隔离location
+    scopeLocation; // 是否显示源码
+    showSourceCode; // 入口资源
+    source; // url
+    url; // 是否是esm应用
     constructor(props) {
         this.name = props.id !== props.url ? props.id : random(5);
         this.mode = props.mode ?? WewebMode.APP;
@@ -2317,26 +2425,35 @@ class MicroAppModel {
             this.container.setAttribute(CSS_ATTRIBUTE_KEY, this.name);
         }
     }
+    // 激活
     activated(container, callback) {
         this.isPreLoad = false;
         this.state = AppState.ACTIVATED;
+        const app = this;
         if (container && this.container) {
             if (container instanceof Element)
                 container.setAttribute(CSS_ATTRIBUTE_KEY, this.name);
             const fragment = document.createDocumentFragment();
             Array.from(this.container.childNodes).forEach((node) => {
+                node.__BK_WEWEB_APP_KEY__ = this.appCacheKey;
+                Object.defineProperties(node, {
+                    ownerDocument: {
+                        get() {
+                            return app.sandBox?.rawDocument;
+                        },
+                    },
+                });
                 fragment.appendChild(node);
             });
             container.innerHTML = '';
             container.appendChild(fragment);
             this.container = container;
+            this.initShadowRootContainer();
             this.sandBox?.activeated(this.data);
             callback?.(this);
         }
     }
-    get appCacheKey() {
-        return this.url;
-    }
+    // 创建隔离iframe
     createIframe() {
         return new Promise(resolve => {
             const iframe = document.createElement('iframe');
@@ -2365,16 +2482,38 @@ class MicroAppModel {
         this.state = AppState.DEACTIVATED;
         this.sandBox?.deactivated();
     }
+    initShadowRootContainer() {
+        if (this.container instanceof ShadowRoot) {
+            // inject echarts in shadowRoot
+            Object.defineProperties(this.container, {
+                getBoundingClientRect: {
+                    get() {
+                        return this.host.getBoundingClientRect;
+                    },
+                },
+            });
+        }
+    }
     mount(container, callback) {
         this.isPreLoad = false;
         this.container = container ?? this.container;
+        this.initShadowRootContainer();
         this.state = AppState.MOUNTING;
+        const app = this;
         if (this.container) {
             if (this.container instanceof Element)
                 this.container.setAttribute(CSS_ATTRIBUTE_KEY, this.name);
             const clonedNode = this.source.html.cloneNode(true);
             const fragment = document.createDocumentFragment();
             Array.from(clonedNode.childNodes).forEach((node) => {
+                node.__BK_WEWEB_APP_KEY__ = this.appCacheKey;
+                Object.defineProperties(node, {
+                    ownerDocument: {
+                        get() {
+                            return app.sandBox?.rawDocument;
+                        },
+                    },
+                });
                 fragment.appendChild(node);
             });
             this.container.innerHTML = '';
@@ -2402,7 +2541,7 @@ class MicroAppModel {
     async start() {
         if (!this.source || [AppState.ERROR, AppState.UNSET].includes(this.status)) {
             this.state = AppState.LOADING;
-            if (this.scopeLocation) {
+            if (this.scopeLocation || this.isModuleApp) {
                 const iframe = await this.createIframe();
                 this.iframe = iframe;
             }
@@ -2410,12 +2549,6 @@ class MicroAppModel {
             await this.source.importEntery(this);
         }
     }
-    get status() {
-        return this.state;
-    }
-    set status(v) {
-        this.state = v;
-    }
     unmount(needDestroy = false) {
         this.state = AppState.UNMOUNT;
         this.sandBox?.deactivated();
@@ -2423,6 +2556,15 @@ class MicroAppModel {
         this.container.innerHTML = '';
         this.container = undefined;
     }
+    get appCacheKey() {
+        return this.url;
+    }
+    get status() {
+        return this.state;
+    }
+    set status(v) {
+        this.state = v;
+    }
 }
 
 /*
@@ -2509,7 +2651,7 @@ class EntrySource {
     }
     collectScript(script, parent, needReplaceELement = false) {
         if (script.hasAttribute('ignore') ||
-            isJsonpUrl(script.getAttribute('src')) ||
+            (script.type !== 'module' && isJsonpUrl(script.getAttribute('src'))) ||
             (script.hasAttribute('type') && !SCRIPT_TYPE_NAMES.includes(script.type))) {
             return;
         }
@@ -2542,9 +2684,11 @@ class EntrySource {
             const nonceStr = randomUrl();
             const scriptInstance = new Script({
                 async: false,
+                // code: script.textContent.replace(/var\s+(\w+)=/gm, `window.$1 = `),
                 code: script.textContent,
                 defer: script.type === 'module',
                 fromHtml: !needReplaceELement,
+                initial: false,
                 isModule: script.type === 'module',
                 url: nonceStr,
             });
@@ -2558,36 +2702,64 @@ class EntrySource {
         }
         return { replace: script };
     }
-    collectScriptAndStyle(parent, app) {
-        const children = Array.from(parent.children);
-        children.length &&
-            children.forEach(child => {
-                this.collectScriptAndStyle(child, app);
-            });
-        children?.forEach(dom => {
-            if (dom instanceof HTMLLinkElement) {
-                this.collectLink(dom, parent);
-            }
-            else if (dom instanceof HTMLStyleElement) {
-                if (!dom.hasAttribute('exclude') && !dom.hasAttribute('ignore')) {
-                    this.styles.set(randomUrl(), new Style({
-                        code: dom.textContent || '',
-                        fromHtml: true,
-                        url: '',
-                    }));
-                    dom.remove();
-                }
-            }
-            else if (dom instanceof HTMLScriptElement) {
-                this.collectScript(dom, parent);
-            }
-            else if (dom instanceof HTMLMetaElement || dom instanceof HTMLTitleElement) {
-                parent.removeChild(dom);
+    collectScriptAndStyle(parent) {
+        const links = Array.from(parent.querySelectorAll('link'));
+        links?.forEach(link => {
+            this.collectLink(link, link.parentElement);
+        });
+        const styles = Array.from(parent.querySelectorAll('style'));
+        styles?.forEach(style => {
+            if (!style.hasAttribute('exclude') && !style.hasAttribute('ignore')) {
+                this.styles.set(randomUrl(), new Style({
+                    code: style.textContent || '',
+                    fromHtml: true,
+                    url: '',
+                }));
+                style.remove();
             }
-            else if (dom instanceof HTMLImageElement && dom.hasAttribute('src')) {
-                dom.setAttribute('src', fillUpPath(dom.getAttribute('src'), this.url));
+        });
+        const scripts = Array.from(parent.querySelectorAll('script'));
+        scripts?.forEach(script => {
+            this.collectScript(script, script.parentElement);
+        });
+        const metas = Array.from(parent.querySelectorAll('meta'));
+        metas?.forEach(meta => {
+            meta.parentElement.removeChild(meta);
+        });
+        const imgs = Array.from(parent.querySelectorAll('img'));
+        imgs?.forEach(img => {
+            if (img.hasAttribute('src')) {
+                img.setAttribute('src', fillUpPath(img.getAttribute('src'), this.url));
             }
         });
+        // const children = Array.from(parent.children);
+        // children?.forEach(dom => {
+        //   if (dom instanceof HTMLLinkElement) {
+        //     this.collectLink(dom, parent);
+        //   } else if (dom instanceof HTMLStyleElement) {
+        //     if (!dom.hasAttribute('exclude') && !dom.hasAttribute('ignore')) {
+        //       this.styles.set(
+        //         randomUrl(),
+        //         new Style({
+        //           code: dom.textContent || '',
+        //           fromHtml: true,
+        //           url: '',
+        //         }),
+        //       );
+        //       dom.remove();
+        //     }
+        //   } else if (dom instanceof HTMLScriptElement) {
+        //     this.collectScript(dom, parent);
+        //   } else if (dom instanceof HTMLMetaElement || dom instanceof HTMLTitleElement) {
+        //     parent.removeChild(dom);
+        //   } else if (dom instanceof HTMLImageElement && dom.hasAttribute('src')) {
+        //     dom.setAttribute('src', fillUpPath(dom.getAttribute('src')!, this.url));
+        //   }
+        // });
+        // children.length &&
+        //   children.forEach(child => {
+        //     this.collectScriptAndStyle(child as HTMLElement, app);
+        //   });
     }
     getScript(url) {
         return this.scripts.get(url);
@@ -2625,7 +2797,7 @@ class EntrySource {
         if (wrapElement.__BK_WEWEB_APP_KEY__)
             delete wrapElement.__BK_WEWEB_APP_KEY__;
         wrapElement.innerHTML = htmlStr.replace(/<\/?head>/gim, '').replace(/<\/?body>/i, '');
-        this.collectScriptAndStyle(wrapElement, app);
+        this.collectScriptAndStyle(wrapElement);
         await excuteAppStyles(app, wrapElement);
         this.html = wrapElement;
     }
@@ -2688,11 +2860,12 @@ class AppCache {
     constructor() {
         this.cache = new Map();
         this.baseSource = new EntrySource(location.href);
-        // this.baseApp = new
     }
+    // 删除缓存
     deleteApp(url) {
         this.cache.delete(url);
     }
+    // 获取缓存app
     getApp(name) {
         if (!name)
             return undefined;
@@ -2701,6 +2874,7 @@ class AppCache {
             return app;
         return Array.from(this.cache.values()).find((item) => item.name === name);
     }
+    // 获取缓存app
     getBaseAppStyle(urlOrCode) {
         return this.baseSource.getStyle(urlOrCode);
     }
@@ -2733,9 +2907,6 @@ class AppCache {
         });
         return style;
     }
-    get hasActiveApp() {
-        return Array.from(this.cache.values()).some((app) => app.status !== AppState.UNMOUNT);
-    }
     setApp(app) {
         this.cache.set(app.appCacheKey, app);
     }
@@ -2745,6 +2916,9 @@ class AppCache {
     setBaseAppStyle(url, style) {
         this.baseSource.setStyle(url, style);
     }
+    get hasActiveApp() {
+        return Array.from(this.cache.values()).some((app) => app.status !== AppState.UNMOUNT);
+    }
 }
 const appCache = new AppCache();
 // 注册全局获取缓存app 或者 instance
@@ -2779,6 +2953,12 @@ window.__getAppOrInstance__ = function (id) {
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
+/**
+ * @param url 资源地址
+ * @param style 样式实例
+ * @param originLink 原始link标签
+ * @returns 返回替换的style标签
+ */
 function getStyleSource(url, style, originLink) {
     const replaceStyle = document.createElement('style');
     setMarkElement(replaceStyle);
@@ -2795,6 +2975,12 @@ function getStyleSource(url, style, originLink) {
     });
     return replaceStyle;
 }
+/**
+ * @param url 资源地址
+ * @param script 脚本实例
+ * @param originScript 原始script标签
+ * @returns 返回替换的script标签
+ */
 function getScriptSource(url, script, originScript) {
     const replaceScript = document.createElement('script');
     setMarkElement(replaceScript);
@@ -2818,6 +3004,10 @@ function getScriptSource(url, script, originScript) {
     });
     return replaceScript;
 }
+/**
+ * @param child link或者script标签
+ * @returns 返回替换的link或者script标签
+ */
 function createNewNode(child) {
     if (child instanceof HTMLLinkElement) {
         const rel = child.getAttribute('rel');
@@ -2852,9 +3042,20 @@ function createNewNode(child) {
     }
     return child;
 }
+/**
+ * @param node 节点
+ * @returns 返回是否是link或者script标签
+ */
 function isLinkOrScript(node) {
     return node instanceof HTMLLinkElement || node instanceof HTMLScriptElement;
 }
+/**
+ * @param parent 父节点
+ * @param newChild 新节点
+ * @param passiveChild 被动节点
+ * @param rawMethod 原始方法
+ * @returns 返回原始方法的执行结果
+ */
 function baseElementInertHandle(parent, newChild, passiveChild, rawMethod) {
     if (isLinkOrScript(newChild)) {
         const targetChild = createNewNode(newChild);
@@ -2862,6 +3063,12 @@ function baseElementInertHandle(parent, newChild, passiveChild, rawMethod) {
     }
     return rawMethod.call(parent, newChild, passiveChild);
 }
+/**
+ * @param parent 父节点
+ * @param newChild 新节点
+ * @param rawMethod 原始方法
+ * @returns 返回原始方法的执行结果
+ */
 function baseElementAppendHandle(parent, newChild, rawMethod) {
     if (isLinkOrScript(newChild)) {
         const targetChild = createNewNode(newChild);
@@ -2895,6 +3102,9 @@ function baseElementAppendHandle(parent, newChild, rawMethod) {
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
+/**
+ * 收集主应用的资源
+ */
 function collectBaseSource() {
     const rawBodyAppendChild = HTMLBodyElement.prototype.appendChild;
     const rawHeadAppendChild = HTMLHeadElement.prototype.appendChild;