@blueking/bk-weweb 0.0.35-beta.1 → 0.0.35-beta.2

package/dist/index.esm.js

@@ -119,10 +119,11 @@ var WewebMode = /* @__PURE__ */ ((WewebMode2) => {
 // src/typings/sandbox.ts
 var WINDOW_WHITE_LIST = [
   "System",
-  // SystemJS
+  // SystemJS 模块加载器
   "__cjsWrapper",
-  // SystemJS CommonJS wrapper
-  false ? "__REACT_DEVTOOLS_GLOBAL_HOOK__" : ""
+  // SystemJS CommonJS 包装器
+  // 开发环境下允许 React DevTools
+  ...false ? ["__REACT_DEVTOOLS_GLOBAL_HOOK__"] : []
 ];
 var BK_WEWEB_INJECT_KEY_LIST = [
   "__POWERED_BY_BK_WEWEB__",
@@ -137,18 +138,25 @@ var COMMON_MICRO_APP_WINDOW_KEY_MAP = {
   i18n: true
 };
 var DEV_MICRO_APP_WINDOW_KEY_MAP = false ? {
+  // 开发环境标识
   __DEV__: true,
+  // Vue DevTools 相关
   __VUE_DEVTOOLS_GLOBAL_HOOK__: true,
   __VUE_DEVTOOLS_HOOK_REPLAY__: true,
   __VUE_DEVTOOLS_PLUGINS__: true,
+  // Vue I18n 相关
   __VUE_I18N_FULL_INSTALL__: true,
   __VUE_I18N_LEGACY_API__: true,
+  // Vue 配置相关
   __VUE_OPTIONS_API__: true,
+  // Core-js 相关
   "__core-js_shared__": true,
+  // Webpack 相关
   webpackChunkapm: true,
   webpackChunkpc: true,
   webpackChunktrace: true,
   webpackJsonp: true,
+  // 包含通用配置
   ...COMMON_MICRO_APP_WINDOW_KEY_MAP
 } : COMMON_MICRO_APP_WINDOW_KEY_MAP;
 
@@ -198,10 +206,10 @@ var isJsonpUrl = (url) => {
 };
 
 // src/context/document.ts
-var SPECIAL_ELEMENT_TAG = ["body", "html", "head"];
-var createProxyDocument = (rawDocument, app) => {
-  const fakeDocument = {};
-  function shadowRootInsertAdjacentHTML(where, domString) {
+var SPECIAL_ELEMENT_TAGS = ["body", "html", "head"];
+var APP_KEY_PROPERTY = "__BK_WEWEB_APP_KEY__";
+function createShadowRootInsertAdjacentHTML(app) {
+  return function shadowRootInsertAdjacentHTML(where, domString) {
     const temporaryContainer = document.createElement("div");
     temporaryContainer.innerHTML = domString;
     const elements = Array.from(temporaryContainer.childNodes);
@@ -228,16 +236,18 @@ var createProxyDocument = (rawDocument, app) => {
         }
         break;
     }
-  }
-  const proxyBody = new Proxy(
+  };
+}
+function createProxyBody(rawDocument, app) {
+  return new Proxy(
     {},
     {
       get(_, key) {
         if (app.container instanceof ShadowRoot) {
           if (key === "insertAdjacentHTML") {
-            return shadowRootInsertAdjacentHTML.bind(app.container);
+            return createShadowRootInsertAdjacentHTML(app);
           }
-          const value2 = app.container[key];
+          const value2 = Reflect.get(app.container, key);
           if (typeof value2 === "function") {
             return value2.bind(app.container);
           }
@@ -250,7 +260,7 @@ var createProxyDocument = (rawDocument, app) => {
       },
       set(_, key, value) {
         if (app.container instanceof ShadowRoot) {
-          app.container[key] = value;
+          Reflect.set(app.container, key, value);
           return true;
         }
         Reflect.set(rawDocument.body, key, value);
@@ -258,60 +268,102 @@ var createProxyDocument = (rawDocument, app) => {
       }
     }
   );
-  function createElement(tagName, options) {
+}
+function createElementWithAppKey(rawDocument, app) {
+  return function createElement(tagName, options) {
     const element = rawDocument.createElement(tagName, options);
-    element.__BK_WEWEB_APP_KEY__ = app.appCacheKey;
+    element[APP_KEY_PROPERTY] = app.appCacheKey;
     return element;
+  };
+}
+function isSpecialElementTag(selector) {
+  return SPECIAL_ELEMENT_TAGS.includes(selector);
+}
+function safeQuerySelector(container, selector) {
+  try {
+    return container?.querySelector(selector) ?? null;
+  } catch {
+    return null;
+  }
+}
+function safeQuerySelectorAll(container, selector) {
+  try {
+    return container?.querySelectorAll(selector) ?? [];
+  } catch {
+    return [];
   }
-  function querySelectorNew(selectors) {
+}
+function createProxyQuerySelector(rawDocument, app, proxyBody) {
+  return function querySelectorNew(selectors) {
     if (selectors === proxyBody) {
       return app.container instanceof ShadowRoot ? app.container : rawDocument.body;
     }
-    if (SPECIAL_ELEMENT_TAG.includes(selectors)) {
+    if (isSpecialElementTag(selectors)) {
       if (app?.container instanceof ShadowRoot) {
         return app?.container;
       }
       return rawDocument.querySelector.call(this, selectors);
     }
-    try {
-      return app?.container?.querySelector(selectors) ?? null;
-    } catch {
-      return null;
-    }
-  }
-  function querySelectorAllNew(selectors) {
-    if (SPECIAL_ELEMENT_TAG.includes(selectors)) {
+    return safeQuerySelector(app?.container, selectors);
+  };
+}
+function createProxyQuerySelectorAll(rawDocument, app) {
+  return function querySelectorAllNew(selectors) {
+    if (isSpecialElementTag(selectors)) {
       if (app?.container instanceof ShadowRoot) {
-        return app?.container;
+        return [app?.container];
       }
-      return rawDocument.querySelector(selectors);
+      const result = rawDocument.querySelector(selectors);
+      return result ? [result] : [];
     }
-    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 safeQuerySelectorAll(app?.container, selectors);
+  };
+}
+function createProxyGetElementById(rawDocument, querySelector) {
+  return function getElementByIdNew(id) {
+    return querySelector.call(rawDocument, `#${id}`);
+  };
+}
+function createProxyGetElementsByClassName(querySelectorAll) {
+  return function getElementsByClassName(className) {
+    return querySelectorAll(`.${className}`);
+  };
+}
+function createProxyGetElementsByTagName(rawDocument, app, querySelectorAll) {
+  return function getElementsByTagName(tagName) {
+    if (isSpecialElementTag(tagName) || !app?.showSourceCode && tagName.toLowerCase() === "script") {
+      return rawDocument.getElementsByTagName(tagName);
     }
-    return querySelectorAllNew(key);
-  }
-  function getElementsByNameNew(key) {
-    return querySelectorAllNew(`[name=${key}]`);
-  }
-  const methodMap = {
+    return querySelectorAll(tagName);
+  };
+}
+function createProxyGetElementsByName(querySelectorAll) {
+  return function getElementsByNameNew(name) {
+    return querySelectorAll(`[name="${name}"]`);
+  };
+}
+function createProxyMethodMap(rawDocument, app, proxyBody) {
+  const createElement = createElementWithAppKey(rawDocument, app);
+  const querySelector = createProxyQuerySelector(rawDocument, app, proxyBody);
+  const querySelectorAll = createProxyQuerySelectorAll(rawDocument, app);
+  const getElementById = createProxyGetElementById(rawDocument, querySelector);
+  const getElementsByClassName = createProxyGetElementsByClassName(querySelectorAll);
+  const getElementsByTagName = createProxyGetElementsByTagName(rawDocument, app, querySelectorAll);
+  const getElementsByName = createProxyGetElementsByName(querySelectorAll);
+  return {
     createElement: createElement.bind(rawDocument),
-    querySelector: querySelectorNew.bind(rawDocument),
-    querySelectorAll: querySelectorAllNew.bind(rawDocument),
-    getElementById: getElementByIdNew.bind(rawDocument),
+    querySelector: querySelector.bind(rawDocument),
+    querySelectorAll: querySelectorAll.bind(rawDocument),
+    getElementById: getElementById.bind(rawDocument),
     getElementsByClassName: getElementsByClassName.bind(rawDocument),
     getElementsByTagName: getElementsByTagName.bind(rawDocument),
-    getElementsByName: getElementsByNameNew.bind(rawDocument)
+    getElementsByName: getElementsByName.bind(rawDocument)
   };
+}
+var createProxyDocument = (rawDocument, app) => {
+  const fakeDocument = {};
+  const proxyBody = createProxyBody(rawDocument, app);
+  const methodMap = createProxyMethodMap(rawDocument, app, proxyBody);
   return new Proxy(fakeDocument, {
     get(_, key) {
       if (key === "body") {
@@ -473,6 +525,11 @@ function rewriteWindowFunction(fakeWindow) {
 
 // src/context/sandbox.ts
 var SandBox = class {
+  /**
+   * 构造函数
+   * @description 初始化沙箱环境，创建代理对象和隔离机制
+   * @param app - 关联的微应用实例
+   */
   constructor(app) {
     this.app = app;
     const windowDescriptorSet = /* @__PURE__ */ new Set();
@@ -488,63 +545,30 @@ var SandBox = class {
     this.fakeWindow = fakeWindow;
     const { resetWindowFunction } = rewriteWindowFunction(this.fakeWindow);
     this.resetWindowFunction = resetWindowFunction;
-    this.windowSymbolKey = `__${(app.name || app.appCacheKey).replace(/(-|,|:|~|'|")/gim, "_")}_${random(
-      10
-    )}__`;
+    const appIdentifier = (app.name || app.appCacheKey).replace(/[-,:~'"]/g, "_");
+    this.windowSymbolKey = `__${appIdentifier}_${random(10)}__`;
     this.proxyWindow = new Proxy(this.fakeWindow, {
-      // 定义属性
       defineProperty: (target, key, value) => {
         if (windowDescriptorSet.has(key)) {
           return Reflect.defineProperty(rawWindow, key, value);
         }
         return Reflect.defineProperty(target, key, value);
       },
-      // 删除属性
       deleteProperty: (target, key) => {
         if (Object.hasOwn(target, key)) {
-          this.sameRawWindowKeySet.has(key) && this.sameRawWindowKeySet.delete(key);
-          this.inRawWindowKeySet.has(key) && Reflect.deleteProperty(rawWindow, key);
+          if (this.sameRawWindowKeySet.has(key)) {
+            this.sameRawWindowKeySet.delete(key);
+          }
+          if (this.inRawWindowKeySet.has(key)) {
+            Reflect.deleteProperty(rawWindow, key);
+          }
           return Reflect.deleteProperty(target, key);
         }
         return true;
       },
-      // 获取属性
       get: (target, key) => {
-        if (key === Symbol.unscopables || windowNativeFuncMap.has(key)) return rawWindow[key];
-        if (DEV_MICRO_APP_WINDOW_KEY_MAP[key]) return this.fakeWindow[key];
-        if (WINDOW_ALIAS_LIST.includes(key)) return this.proxyWindow;
-        if (key === "document") {
-          app.registerRunningApp();
-          return this.rawDocument;
-        }
-        if (key === "eval") {
-          app.registerRunningApp();
-          return eval;
-        }
-        if (BK_WEWEB_LOCATION_KEY_LIST.includes(key) && this.app instanceof MicroAppModel && this.app.iframe && this.app.scopeLocation) {
-          return this.app.iframe.contentWindow?.[key];
-        }
-        if (key === "hasOwnProperty")
-          return (key2) => Object.hasOwn(this.fakeWindow, key2) || Object.hasOwn(rawWindow, key2);
-        if (key === "top" || key === "parent") {
-          if (rawWindow === rawWindow.parent) {
-            return this.proxyWindow;
-          }
-          return Reflect.get(rawWindow, key);
-        }
-        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);
-        return bindFunctionToRawWindow(rawWindow, rawValue);
+        return this.handleProxyGet(target, key, rawWindow);
       },
-      // 获取属性描述符
       getOwnPropertyDescriptor: (target, key) => {
         if (Object.hasOwn(target, key)) {
           return Object.getOwnPropertyDescriptor(target, key);
@@ -559,69 +583,197 @@ var SandBox = class {
         }
         return void 0;
       },
-      // 检查属性是否存在
       has: (target, key) => windowNativeFuncMap.has(key) || key in target || key in rawWindow,
-      // 获取所有属性名
       ownKeys: (target) => Array.from(new Set(Reflect.ownKeys(rawWindow).concat(Reflect.ownKeys(target)))),
-      // 设置属性
       set: (target, key, value) => {
-        if (this.active) {
-          if (BK_WEWEB_LOCATION_KEY_LIST.includes(key) && this.app instanceof MicroAppModel && this.app.iframe && this.app.scopeLocation) {
-            return Reflect.set(this.app.iframe.contentWindow, key, value);
-          }
-          if (key === "location") {
-            Reflect.set(rawWindow, key, value);
-          } else if (!Object.hasOwn(target, key) && Object.hasOwn(rawWindow, key) && !BK_WEWEB_INJECT_KEY_LIST.includes(key)) {
-            const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
-            const { configurable, enumerable, writable } = descriptor;
-            if (writable) {
-              Object.defineProperty(target, key, {
-                configurable,
-                enumerable,
-                value,
-                writable
-              });
-              this.sameRawWindowKeySet.add(key);
-            }
-          } else {
-            Reflect.set(target, key, value);
-            this.sameRawWindowKeySet.add(key);
-          }
-          if (WINDOW_WHITE_LIST.includes(key) && !Reflect.has(rawWindow, key) && !BK_WEWEB_INJECT_KEY_LIST.includes(key)) {
-            Reflect.set(rawWindow, key, value);
-            this.inRawWindowKeySet.add(key);
-          }
-        }
-        return true;
+        return this.handleProxySet(target, key, value, rawWindow);
       }
     });
     rawWindow[this.windowSymbolKey] = this.proxyWindow;
   }
-  // 沙箱激活状态
+  /** 沙箱激活状态标识 */
   active = false;
-  // 记录在原始window上新增的属性
+  /** 记录在原始 window 上新增的属性键集合 */
   inRawWindowKeySet = /* @__PURE__ */ new Set();
-  // 重置文档和body事件的函数
+  /** 重置文档和 body 事件的函数 */
   resetDocumentAndBodyEvent;
-  // 重置window函数的方法
+  /** 重置 window 函数的方法 */
   resetWindowFunction;
-  // 记录与原始window相同的属性
+  /** 记录与原始 window 相同的属性键集合 */
   sameRawWindowKeySet = /* @__PURE__ */ new Set();
-  // 伪造的window对象
+  /** 伪造的 window 对象 */
   fakeWindow;
-  // 代理的document对象
+  /** 代理的 document 对象 */
   proxyDocument;
-  // 代理的window对象
+  /** 代理的 window 对象 */
   proxyWindow;
-  // 原始document对象
+  /** 原始 document 对象 */
   rawDocument;
-  // 原始window对象
+  /** 原始 window 对象 */
   rawWindow;
-  // window上的唯一标识key
+  /** 在 window 上的唯一标识键 */
   windowSymbolKey;
+  /**
+   * 处理代理对象的 get 操作
+   * @description 统一处理代理对象属性获取的复杂逻辑
+   * @param target - 目标对象
+   * @param key - 属性键
+   * @param rawWindow - 原始 window 对象
+   * @returns unknown - 属性值
+   * @private
+   */
+  handleProxyGet(target, key, rawWindow) {
+    if (key === Symbol.unscopables || windowNativeFuncMap.has(key)) {
+      return rawWindow[key];
+    }
+    if (DEV_MICRO_APP_WINDOW_KEY_MAP[key]) {
+      return this.fakeWindow[key];
+    }
+    if (WINDOW_ALIAS_LIST.includes(key)) {
+      return this.proxyWindow;
+    }
+    if (key === "document") {
+      this.app.registerRunningApp();
+      return this.rawDocument;
+    }
+    if (key === "eval") {
+      this.app.registerRunningApp();
+      return eval;
+    }
+    if (this.shouldUseIframeLocation(key)) {
+      if (this.app instanceof MicroAppModel && this.app.iframe?.contentWindow) {
+        return this.app.iframe.contentWindow[key];
+      }
+      return void 0;
+    }
+    if (key === "hasOwnProperty") {
+      return (checkKey) => Object.hasOwn(this.fakeWindow, checkKey) || Object.hasOwn(rawWindow, checkKey);
+    }
+    if (key === "top" || key === "parent") {
+      if (rawWindow === rawWindow.parent) {
+        return this.proxyWindow;
+      }
+      return Reflect.get(rawWindow, key);
+    }
+    if (key === "getComputedStyle") {
+      return this.createGetComputedStyleProxy(rawWindow);
+    }
+    if (Reflect.has(target, key) || BK_WEWEB_INJECT_KEY_LIST.includes(key)) {
+      return Reflect.get(target, key);
+    }
+    const rawValue = Reflect.get(rawWindow, key);
+    return bindFunctionToRawWindow(rawWindow, rawValue);
+  }
+  /**
+   * 处理代理对象的 set 操作
+   * @description 统一处理代理对象属性设置的复杂逻辑
+   * @param target - 目标对象
+   * @param key - 属性键
+   * @param value - 属性值
+   * @param rawWindow - 原始 window 对象
+   * @returns boolean - 设置是否成功
+   * @private
+   */
+  handleProxySet(target, key, value, rawWindow) {
+    if (!this.active) {
+      return true;
+    }
+    if (this.shouldUseIframeLocation(key)) {
+      const iframe = this.app instanceof MicroAppModel ? this.app.iframe : null;
+      return iframe?.contentWindow ? Reflect.set(iframe.contentWindow, key, value) : true;
+    }
+    if (key === "location") {
+      Reflect.set(rawWindow, key, value);
+    } else if (this.shouldSetOnTarget(target, key, rawWindow)) {
+      this.setPropertyOnTarget(target, key, value, rawWindow);
+    } else {
+      Reflect.set(target, key, value);
+      this.sameRawWindowKeySet.add(key);
+    }
+    this.handleWhiteListProperty(key, value, rawWindow);
+    return true;
+  }
+  /**
+   * 判断是否应该使用 iframe 的 location
+   * @description 检查是否在 iframe 模式下访问 location 相关属性
+   * @param key - 属性键
+   * @returns boolean - 是否使用 iframe location
+   * @private
+   */
+  shouldUseIframeLocation(key) {
+    return !!(BK_WEWEB_LOCATION_KEY_LIST.includes(key) && this.app instanceof MicroAppModel && this.app.iframe && this.app.scopeLocation);
+  }
+  /**
+   * 创建 getComputedStyle 方法的代理
+   * @description 为 getComputedStyle 方法创建安全的代理实现
+   * @param rawWindow - 原始 window 对象
+   * @returns Function - 代理后的 getComputedStyle 方法
+   * @private
+   */
+  createGetComputedStyleProxy(rawWindow) {
+    return (element, pseudoElt) => {
+      if (element instanceof Element) {
+        return rawWindow.getComputedStyle(element, pseudoElt);
+      }
+      return rawWindow.getComputedStyle(document.body, pseudoElt);
+    };
+  }
+  /**
+   * 判断是否应该在目标对象上设置属性
+   * @description 检查属性设置的逻辑条件
+   * @param target - 目标对象
+   * @param key - 属性键
+   * @param rawWindow - 原始 window 对象
+   * @returns boolean - 是否在目标对象上设置
+   * @private
+   */
+  shouldSetOnTarget(target, key, rawWindow) {
+    return !Object.hasOwn(target, key) && Object.hasOwn(rawWindow, key) && !BK_WEWEB_INJECT_KEY_LIST.includes(key);
+  }
+  /**
+   * 在目标对象上设置属性
+   * @description 安全地在目标对象上设置属性，保持描述符特性
+   * @param target - 目标对象
+   * @param key - 属性键
+   * @param value - 属性值
+   * @param rawWindow - 原始 window 对象
+   * @private
+   */
+  setPropertyOnTarget(target, key, value, rawWindow) {
+    const descriptor = Object.getOwnPropertyDescriptor(rawWindow, key);
+    if (!descriptor) {
+      return;
+    }
+    const { configurable, enumerable, writable } = descriptor;
+    if (writable) {
+      Object.defineProperty(target, key, {
+        configurable,
+        enumerable,
+        value,
+        writable
+      });
+      this.sameRawWindowKeySet.add(key);
+    }
+  }
+  /**
+   * 处理白名单属性
+   * @description 处理需要在原始 window 上设置的白名单属性
+   * @param key - 属性键
+   * @param value - 属性值
+   * @param rawWindow - 原始 window 对象
+   * @private
+   */
+  handleWhiteListProperty(key, value, rawWindow) {
+    if (WINDOW_WHITE_LIST.includes(key) && !Reflect.has(rawWindow, key) && !BK_WEWEB_INJECT_KEY_LIST.includes(key)) {
+      Reflect.set(rawWindow, key, value);
+      this.inRawWindowKeySet.add(key);
+    }
+  }
   /**
    * 激活沙箱
-   * @param data 传递给沙箱的数据
+   * @description 启动沙箱环境，初始化代理对象和事件处理
+   * @param data - 传递给沙箱的数据（可选）
+   * @returns void
    */
   activated(data) {
     if (!this.active) {
@@ -633,7 +785,9 @@ var SandBox = class {
     }
   }
   /**
-   * 停用沙箱，清理所有副作用
+   * 停用沙箱
+   * @description 关闭沙箱环境，清理所有副作用和修改
+   * @returns void
    */
   deactivated() {
     if (!this.active) return;
@@ -2320,37 +2474,79 @@ var EntrySource = class {
 
 // src/cache/app-cache.ts
 var AppCache = class {
-  // todo 主应用共享资源包
+  /** 基础资源源，用于主应用共享资源包 */
   baseSource;
+  /** 应用实例缓存映射表 */
   cache;
+  /**
+   * 构造函数
+   * @description 初始化应用缓存管理器
+   */
   constructor() {
     this.cache = /* @__PURE__ */ new Map();
     this.baseSource = new EntrySource(location.href);
   }
-  // 删除缓存
-  deleteApp(url) {
-    this.cache.delete(url);
+  /**
+   * 设置应用实例到缓存
+   * @description 将应用实例添加到缓存中，使用应用的缓存键作为标识
+   * @param app - 要缓存的应用实例
+   * @returns void
+   */
+  setApp(app) {
+    this.cache.set(app.appCacheKey, app);
   }
-  // 获取缓存app
+  /**
+   * 获取缓存的应用实例
+   * @description 根据名称或ID获取已缓存的应用实例
+   * @param name - 应用名称或ID，为空时返回 undefined
+   * @returns BaseModel | undefined - 应用实例或 undefined
+   */
   getApp(name) {
     if (!name) return void 0;
     const app = this.cache.get(name);
     if (app) return app;
     return Array.from(this.cache.values()).find((item) => item.name === name);
   }
-  // 获取缓存app
-  getBaseAppStyle(urlOrCode) {
-    return this.baseSource.getStyle(urlOrCode);
+  /**
+   * 删除缓存的应用实例
+   * @description 从缓存中移除指定URL的应用实例
+   * @param url - 要删除的应用URL标识
+   * @returns void
+   */
+  deleteApp(url) {
+    this.cache.delete(url);
   }
+  /**
+   * 获取缓存的HTML内容
+   * @description 根据URL获取已缓存的HTML内容
+   * @param url - 应用的URL
+   * @returns string - HTML内容，未找到时返回空字符串
+   */
   getCacheHtml(url) {
     const list = Array.from(this.cache.values());
     const app = list.find((item) => item.url === url);
     if (app) return app.source?.rawHtml || "";
     return "";
   }
+  /**
+   * 设置基础应用脚本
+   * @description 将脚本添加到基础资源源中，供多个应用共享
+   * @param url - 脚本的URL
+   * @param script - 脚本实例
+   * @returns void
+   */
+  setBaseAppScript(url, script) {
+    this.baseSource.setScript(url, script);
+  }
+  /**
+   * 获取缓存的脚本资源
+   * @description 从基础资源源或应用缓存中获取脚本资源
+   * @param url - 脚本的URL
+   * @returns Script | undefined - 脚本实例或 undefined
+   */
   getCacheScript(url) {
     let script = this.baseSource.getScript(url);
-    if (script) return;
+    if (script) return script;
     const list = Array.from(this.cache.values());
     list.some((app) => {
       script = app.source?.getScript(url);
@@ -2358,9 +2554,34 @@ var AppCache = class {
     });
     return script;
   }
+  /**
+   * 设置基础应用样式
+   * @description 将样式添加到基础资源源中，供多个应用共享
+   * @param url - 样式的URL
+   * @param style - 样式实例
+   * @returns void
+   */
+  setBaseAppStyle(url, style) {
+    this.baseSource.setStyle(url, style);
+  }
+  /**
+   * 获取基础应用样式
+   * @description 从基础资源源中获取样式资源
+   * @param urlOrCode - 样式的URL或代码
+   * @returns Style | undefined - 样式实例或 undefined
+   */
+  getBaseAppStyle(urlOrCode) {
+    return this.baseSource.getStyle(urlOrCode);
+  }
+  /**
+   * 获取缓存的样式资源
+   * @description 从基础资源源或应用缓存中获取样式资源
+   * @param url - 样式的URL
+   * @returns Style | undefined - 样式实例或 undefined
+   */
   getCacheStyle(url) {
     let style = this.baseSource.getStyle(url);
-    if (style) return;
+    if (style) return style;
     const list = Array.from(this.cache.values());
     list.some((app) => {
       style = app.source?.getStyle(url);
@@ -2368,15 +2589,11 @@ var AppCache = class {
     });
     return style;
   }
-  setApp(app) {
-    this.cache.set(app.appCacheKey, app);
-  }
-  setBaseAppScript(url, script) {
-    this.baseSource.setScript(url, script);
-  }
-  setBaseAppStyle(url, style) {
-    this.baseSource.setStyle(url, style);
-  }
+  /**
+   * 检查是否存在活跃的应用
+   * @description 判断当前是否有处于非卸载状态的应用实例
+   * @returns boolean - 存在活跃应用时返回 true
+   */
   get hasActiveApp() {
     return Array.from(this.cache.values()).some((app) => app.status !== AppState.UNMOUNT);
   }
@@ -2396,8 +2613,8 @@ function getStyleSource(url, style, originLink) {
     appCache.setBaseAppStyle(url, style);
     replaceStyle.textContent = data;
     dispatchLinkOrScriptLoad(originLink);
-  }).catch((err) => {
-    console.error(err);
+  }).catch((error) => {
+    console.error("Failed to load style resource:", error);
     dispatchLinkOrScriptError(originLink);
   });
   return replaceStyle;
@@ -2412,59 +2629,67 @@ function getScriptSource(url, script, originScript) {
       if (!url.startsWith("inline-")) {
         originScript.setAttribute("origin-src", url);
       }
-    } catch (e) {
-      console.error(e, url);
+    } catch (error) {
+      console.error("Failed to set script content:", error, url);
     }
     dispatchLinkOrScriptLoad(originScript);
-  }).catch((err) => {
-    console.error(err);
+  }).catch((error) => {
+    console.error("Failed to load script resource:", error);
     dispatchLinkOrScriptError(originScript);
   });
   return replaceScript;
 }
+function processLinkElement(linkElement) {
+  const rel = linkElement.getAttribute("rel");
+  let href = linkElement.getAttribute("href");
+  if (rel === "stylesheet" && href) {
+    href = fillUpPath(href, location.origin);
+    const replaceStyle = document.createElement("style");
+    const styleInstance = new Style({
+      code: "",
+      fromHtml: false,
+      url: href
+    });
+    getStyleSource(href, styleInstance, linkElement);
+    return replaceStyle;
+  }
+  return linkElement;
+}
+function processScriptElement(scriptElement) {
+  let src = scriptElement.getAttribute("src");
+  if (src && scriptElement.type !== "module") {
+    src = fillUpPath(src, location.origin);
+    const script = new Script({
+      async: scriptElement.hasAttribute("async"),
+      code: "",
+      defer: scriptElement.defer || scriptElement.type === "module",
+      fromHtml: false,
+      isModule: false
+    });
+    appCache.setBaseAppScript(src, script);
+    const replaceElement = getScriptSource(src, script, scriptElement);
+    return replaceElement || scriptElement;
+  }
+  return scriptElement;
+}
 function createNewNode(child) {
   if (child instanceof HTMLLinkElement) {
-    const rel = child.getAttribute("rel");
-    let href = child.getAttribute("href");
-    if (rel === "stylesheet" && href) {
-      href = fillUpPath(href, location.origin);
-      const replaceStyle = document.createElement("style");
-      const styleInstance = new Style({
-        code: "",
-        fromHtml: false,
-        url: href
-      });
-      getStyleSource(href, styleInstance, child);
-      return replaceStyle;
-    }
+    return processLinkElement(child);
   }
   if (child instanceof HTMLScriptElement) {
-    let src = child.getAttribute("src");
-    if (src && child.type !== "module") {
-      src = fillUpPath(src, location.origin);
-      const script = new Script({
-        async: child.hasAttribute("async"),
-        code: "",
-        defer: child.defer || child.type === "module",
-        fromHtml: false,
-        isModule: false
-      });
-      appCache.setBaseAppScript(src, script);
-      const replaceElement = getScriptSource(src, script, child);
-      return replaceElement || child;
-    }
+    return processScriptElement(child);
   }
   return child;
 }
 function isLinkOrScript(node) {
   return node instanceof HTMLLinkElement || node instanceof HTMLScriptElement;
 }
-function baseElementInertHandle(parent, newChild, passiveChild, rawMethod) {
+function baseElementInertHandle(parent, newChild, referenceChild, rawMethod) {
   if (isLinkOrScript(newChild)) {
     const targetChild = createNewNode(newChild);
-    return rawMethod.call(parent, targetChild, passiveChild);
+    return rawMethod.call(parent, targetChild, referenceChild);
   }
-  return rawMethod.call(parent, newChild, passiveChild);
+  return rawMethod.call(parent, newChild, referenceChild);
 }
 function baseElementAppendHandle(parent, newChild, rawMethod) {
   if (isLinkOrScript(newChild)) {
@@ -2475,10 +2700,15 @@ function baseElementAppendHandle(parent, newChild, rawMethod) {
 }
 
 // src/base-app/collect-source.ts
-function collectBaseSource() {
-  const rawBodyAppendChild = HTMLBodyElement.prototype.appendChild;
-  const rawHeadAppendChild = HTMLHeadElement.prototype.appendChild;
-  const rawHeadInsertBefore = HTMLHeadElement.prototype.appendChild;
+function cacheOriginalDOMMethods() {
+  return {
+    rawBodyAppendChild: HTMLBodyElement.prototype.appendChild,
+    rawHeadAppendChild: HTMLHeadElement.prototype.appendChild,
+    rawHeadInsertBefore: HTMLHeadElement.prototype.insertBefore
+  };
+}
+function overrideDOMMethods(originalMethods) {
+  const { rawBodyAppendChild, rawHeadAppendChild, rawHeadInsertBefore } = originalMethods;
   HTMLBodyElement.prototype.appendChild = function(newChild) {
     return baseElementAppendHandle(this, newChild, rawBodyAppendChild);
   };
@@ -2488,22 +2718,39 @@ function collectBaseSource() {
   HTMLHeadElement.prototype.insertBefore = function(newChild, refChild) {
     return baseElementInertHandle(this, newChild, refChild, rawHeadInsertBefore);
   };
-  window.addEventListener("load", () => {
-    const nodeList = document.head.querySelectorAll("style");
-    for (const node of Array.from(nodeList)) {
-      node.textContent && appCache.setBaseAppStyle(
-        randomUrl(),
-        new Style({
-          code: node.textContent,
+}
+function collectExistingStyles() {
+  const styleNodes = document.head.querySelectorAll("style");
+  for (const styleNode of Array.from(styleNodes)) {
+    const textContent = styleNode.textContent;
+    if (textContent) {
+      try {
+        const style = new Style({
+          code: textContent,
           fromHtml: false,
           url: ""
-        })
-      );
+        });
+        appCache.setBaseAppStyle(randomUrl(), style);
+      } catch (error) {
+        console.warn("Failed to collect style element:", error);
+      }
     }
-  });
+  }
+}
+function setupLoadEventListener() {
+  window.addEventListener("load", collectExistingStyles);
+}
+function collectBaseSource() {
+  const originalMethods = cacheOriginalDOMMethods();
+  overrideDOMMethods(originalMethods);
+  setupLoadEventListener();
 }
 
 // src/context/element.ts
+var RESOURCE_ATTRIBUTES = ["src", "srcset"];
+var LINK_ATTRIBUTES = ["href"];
+var RESOURCE_TAG_NAMES = ["IMG", "SCRIPT"];
+var LINK_TAG_NAMES = ["LINK"];
 var { setAttribute } = Element.prototype;
 var {
   append,
@@ -2518,47 +2765,84 @@ var {
 } = HTMLHeadElement.prototype;
 var rawHead = document.head;
 var hasRewrite = false;
-function rewriteBodyAndHeaderMethods() {
-  if (hasRewrite) return;
-  hasRewrite = true;
-  Element.prototype.setAttribute = function(key, value) {
-    const tagName = this.tagName.toLocaleUpperCase();
-    if ((["src", "srcset"].includes(key) && ["IMG", "SCRIPT"].includes(tagName) || key === "href" && ["LINK"].includes(tagName)) && this.__BK_WEWEB_APP_KEY__ && appCache.getApp(this.__BK_WEWEB_APP_KEY__ || "")) {
-      setAttribute.call(this, key, fillUpPath(value, appCache.getApp(this.__BK_WEWEB_APP_KEY__).url));
-    } else {
-      setAttribute.call(this, key, value);
+function shouldProcessResourcePath(key, tagName) {
+  const upperTagName = tagName.toUpperCase();
+  return RESOURCE_ATTRIBUTES.includes(key) && RESOURCE_TAG_NAMES.includes(upperTagName) || LINK_ATTRIBUTES.includes(key) && LINK_TAG_NAMES.includes(upperTagName);
+}
+function getElementApp(element) {
+  if (!element.__BK_WEWEB_APP_KEY__) {
+    return null;
+  }
+  return appCache.getApp(element.__BK_WEWEB_APP_KEY__);
+}
+function createOverriddenSetAttribute() {
+  return function(key, value) {
+    const tagName = this.tagName.toUpperCase();
+    if (shouldProcessResourcePath(key, tagName) && this.__BK_WEWEB_APP_KEY__) {
+      const app = getElementApp(this);
+      if (app) {
+        setAttribute.call(this, key, fillUpPath(value, app.url));
+        return;
+      }
     }
+    setAttribute.call(this, key, value);
   };
-  HTMLBodyElement.prototype.appendChild = function appendChildNew(newChild) {
-    if (newChild.__KEEP_ALIVE__ && isSpecialElement(newChild)) return headAppendChild.call(rawHead, newChild);
+}
+function handleKeepAliveElement(newChild) {
+  if (newChild.__KEEP_ALIVE__ && isSpecialElement(newChild)) {
+    return headAppendChild.call(rawHead, newChild);
+  }
+  return null;
+}
+function createOverriddenAppendChild() {
+  return function(newChild) {
+    const keepAliveResult = handleKeepAliveElement(newChild);
+    if (keepAliveResult) {
+      return keepAliveResult;
+    }
     return elementAppendHandler(this, newChild, bodyAppendChild2);
   };
-  HTMLBodyElement.prototype.append = function(...nodes) {
+}
+function createOverriddenAppend() {
+  return function(...nodes) {
     nodes.forEach((node) => {
-      if (node.__KEEP_ALIVE__ && isSpecialElement(node)) {
-        return headAppendChild.call(rawHead, node);
+      const keepAliveResult = handleKeepAliveElement(node);
+      if (keepAliveResult) {
+        return;
       }
       elementAppendHandler(this, node, bodyAppendChild2);
     });
   };
-  HTMLHeadElement.prototype.appendChild = HTMLBodyElement.prototype.appendChild;
-  HTMLHeadElement.prototype.insertBefore = function(newChild, refChild) {
-    return elementInsertHandler(this, newChild, refChild, headInsertBefore);
-  };
-  HTMLBodyElement.prototype.insertBefore = function(newChild, refChild) {
+}
+function createOverriddenInsertBefore() {
+  return function(newChild, refChild) {
     return elementInsertHandler(this, newChild, refChild, headInsertBefore);
   };
-  HTMLBodyElement.prototype.removeChild = function removeChildNew(oldChild) {
-    const app = appCache.getApp(oldChild.__BK_WEWEB_APP_KEY__);
+}
+function createOverriddenRemoveChild() {
+  return function(oldChild) {
+    const app = oldChild.__BK_WEWEB_APP_KEY__ ? appCache.getApp(oldChild.__BK_WEWEB_APP_KEY__) : null;
     if (app?.container?.contains(oldChild)) {
-      const node = bodyRemoveChild.call(app.container, oldChild);
-      return node;
+      return bodyRemoveChild.call(app.container, oldChild);
     }
     if (this.contains(oldChild)) {
       return bodyRemoveChild.call(this, oldChild);
     }
     return oldChild;
   };
+}
+function rewriteBodyAndHeaderMethods() {
+  if (hasRewrite) {
+    return;
+  }
+  hasRewrite = true;
+  Element.prototype.setAttribute = createOverriddenSetAttribute();
+  HTMLBodyElement.prototype.appendChild = createOverriddenAppendChild();
+  HTMLBodyElement.prototype.append = createOverriddenAppend();
+  HTMLBodyElement.prototype.insertBefore = createOverriddenInsertBefore();
+  HTMLBodyElement.prototype.removeChild = createOverriddenRemoveChild();
+  HTMLHeadElement.prototype.appendChild = HTMLBodyElement.prototype.appendChild;
+  HTMLHeadElement.prototype.insertBefore = createOverriddenInsertBefore();
   HTMLHeadElement.prototype.removeChild = HTMLBodyElement.prototype.removeChild;
 }
 function resetBodyAndHeaderMethods() {
@@ -2587,8 +2871,8 @@ function activated(appKey, container, callback) {
       beforeLoad();
       app.activated(container, callback);
     });
-  } else {
-    app && nextTask(() => {
+  } else if (app) {
+    nextTask(() => {
       beforeLoad();
       app.mount(container, callback);
     });
@@ -2596,9 +2880,10 @@ function activated(appKey, container, callback) {
 }
 
 // src/lifecycle/deactivated.ts
+var DEACTIVATABLE_STATES = [AppState.ACTIVATED, AppState.MOUNTED];
 function deactivated(appKey) {
   const app = appCache.getApp(appKey);
-  if (app && [AppState.ACTIVATED, AppState.MOUNTED].some((status) => status === app.status)) {
+  if (app && DEACTIVATABLE_STATES.some((status) => status === app.status)) {
     app.keepAlive ? app.deactivated() : app.unmount();
   }
   if (!appCache.hasActiveApp) {
@@ -2607,9 +2892,12 @@ function deactivated(appKey) {
 }
 
 // src/lifecycle/load.ts
+var STATUS_CHECK_INTERVAL = 300;
 async function load(props) {
   beforeLoad();
-  if (props.mode === "js" /* INSTANCE */) return await loadInstance(props);
+  if (props.mode === "js" /* INSTANCE */) {
+    return await loadInstance(props);
+  }
   return await loadApp(props);
 }
 async function loadApp(props) {
@@ -2638,7 +2926,7 @@ function loadInstance(props) {
           resolve(instance);
           clearInterval(timer);
         }
-      }, 300);
+      }, STATUS_CHECK_INTERVAL);
       return;
     }
     resolve(instance);
@@ -2658,14 +2946,35 @@ function unmount(appKey) {
 
 // src/component/web-component.ts
 var BkWewebElement = class extends HTMLElement {
+  /** 应用 URL 缓存 */
   appUrl = "";
+  /** 组件连接状态标识 */
   connected = false;
+  /**
+   * 观察的属性列表
+   * @description 定义需要监听变化的属性名称列表
+   * @returns string[] - 属性名称数组
+   */
   static get observedAttributes() {
     return ["url" /* url */];
   }
+  /**
+   * 获取布尔类型属性值
+   * @description 解析布尔类型的自定义属性，支持驼峰和短横线命名
+   * @param name - 属性名称
+   * @returns boolean | undefined - 属性值或 undefined
+   * @private
+   */
   getBooleanAttr(name) {
-    return this.hasAttribute(name) || this.hasAttribute(name.replace(/([A-Z])/g, "-$1").toLocaleLowerCase()) ? this.getAttribute(name) !== "false" : void 0;
+    const hasAttr = this.hasAttribute(name) || this.hasAttribute(name.replace(/([A-Z])/g, "-$1").toLocaleLowerCase());
+    return hasAttr ? this.getAttribute(name) !== "false" : void 0;
   }
+  /**
+   * 处理属性变化的内部逻辑
+   * @description 当属性发生变化时执行的处理逻辑
+   * @returns Promise<void>
+   * @private
+   */
   async handleAttributeChanged() {
     if (!this.appKey) return;
     if (this.getBooleanAttr("setShodowDom" /* setShodowDom */)) {
@@ -2678,12 +2987,27 @@ var BkWewebElement = class extends HTMLElement {
     }
     await load(this.appProps);
   }
+  /**
+   * 属性变化回调
+   * @description 当观察的属性发生变化时触发
+   * @param attr - 变化的属性名
+   * @param _oldVal - 旧值（未使用）
+   * @param newVal - 新值
+   * @returns void
+   */
   attributeChangedCallback(attr, _oldVal, newVal) {
     if (attr !== "url" /* url */ || this[attr] === newVal || !this.connected) return;
     this.appUrl = newVal;
     const cacheApp = appCache.getApp(this.appKey);
-    (this.connected || cacheApp) && this.handleAttributeChanged();
+    if (this.connected || cacheApp) {
+      this.handleAttributeChanged();
+    }
   }
+  /**
+   * 组件连接到 DOM 时的回调
+   * @description 当自定义元素被插入到 DOM 时触发
+   * @returns Promise<void>
+   */
   async connectedCallback() {
     if (this.getBooleanAttr("setShodowDom" /* setShodowDom */) && !this.shadowRoot) {
       this.attachShadow({ delegatesFocus: false, mode: "open" });
@@ -2692,12 +3016,24 @@ var BkWewebElement = class extends HTMLElement {
     activated(this.appKey, this.shadowRoot ?? this);
     this.connected = true;
   }
+  /**
+   * 组件从 DOM 断开时的回调
+   * @description 当自定义元素从 DOM 中移除时触发
+   * @returns void
+   */
   disconnectedCallback() {
     this.connected = false;
     if (this.appProps.keepAlive) {
       deactivated(this.appKey);
-    } else unmount(this.appKey);
+    } else {
+      unmount(this.appKey);
+    }
   }
+  /**
+   * 获取应用数据
+   * @description 解析 data 属性中的 JSON 数据
+   * @returns Record<string, unknown> - 应用数据对象
+   */
   get appData() {
     if (this.hasAttribute("data" /* data */)) {
       try {
@@ -2707,35 +3043,44 @@ var BkWewebElement = class extends HTMLElement {
     }
     return {};
   }
-  // 考虑到js模式下 需要js bundle的复用性 需用户设置id属性 如果单实例下则可以不用配置
+  /**
+   * 获取应用标识符
+   * @description 优先使用 id 属性，其次使用 url 属性作为应用标识
+   * 考虑到 JS 模式下需要 JS bundle 的复用性，需用户设置 id 属性
+   * 如果是单实例应用则可以不用配置 id
+   * @returns string | null - 应用标识符或 null
+   */
   get appKey() {
     return this.getAttribute("id" /* id */) || this.getAttribute("url" /* url */);
   }
+  /**
+   * 获取应用配置属性
+   * @description 根据模式返回相应的应用配置对象
+   * @returns IAppModelProps | IJsModelProps - 应用配置对象
+   */
   get appProps() {
+    const commonProps = {
+      container: this.shadowRoot ?? this,
+      data: this.appData,
+      id: this.appKey,
+      keepAlive: this.getBooleanAttr("keepAlive" /* keepAlive */),
+      showSourceCode: this.getBooleanAttr("showSourceCode" /* showSourceCode */),
+      url: this.getAttribute("url" /* url */)
+    };
     if (this.getAttribute("mode") === "js" /* INSTANCE */) {
       return {
-        container: this.shadowRoot ?? this,
-        data: this.appData,
-        id: this.appKey,
-        keepAlive: this.getBooleanAttr("keepAlive" /* keepAlive */),
+        ...commonProps,
         mode: "js" /* INSTANCE */,
         scopeCss: this.getBooleanAttr("scopeCss" /* scopeCss */) && !this.getBooleanAttr("setShodowDom" /* setShodowDom */),
-        scopeJs: this.getBooleanAttr("scopeJs" /* scopeJs */),
-        showSourceCode: this.getBooleanAttr("showSourceCode" /* showSourceCode */),
-        url: this.getAttribute("url" /* url */)
+        scopeJs: this.getBooleanAttr("scopeJs" /* scopeJs */)
       };
     }
     return {
-      container: this.shadowRoot ?? this,
-      data: this.appData,
-      id: this.appKey,
-      keepAlive: this.getBooleanAttr("keepAlive" /* keepAlive */),
+      ...commonProps,
       mode: "app" /* APP */,
       scopeCss: !this.getBooleanAttr("setShodowDom" /* setShodowDom */),
       scopeJs: !this.getBooleanAttr("scopeJs" /* scopeJs */),
-      scopeLocation: this.getBooleanAttr("scopeLocation" /* scopeLocation */),
-      showSourceCode: this.getBooleanAttr("showSourceCode" /* showSourceCode */),
-      url: this.getAttribute("url" /* url */)
+      scopeLocation: this.getBooleanAttr("scopeLocation" /* scopeLocation */)
     };
   }
 };
@@ -2743,10 +3088,12 @@ var BkWewebElement = class extends HTMLElement {
 // src/lifecycle/mount.ts
 function mount(appKey, container, callback) {
   const app = appCache.getApp(appKey);
-  app && nextTask(() => {
-    beforeLoad();
-    app.mount(container, callback);
-  });
+  if (app) {
+    nextTask(() => {
+      beforeLoad();
+      app.mount(container, callback);
+    });
+  }
 }
 
 // src/lifecycle/unload.ts