@blueking/bk-weweb 0.0.2-5.beta.1 → 0.0.2-5.beta.2

package/dist/index.esm.js

@@ -37,6 +37,7 @@ var AppState;
     AppState["UNSET"] = "UNSET";
 })(AppState || (AppState = {}));
 
+// 当前正在运行的app
 let currentRunningApp = null;
 function getCurrentRunningApp() {
     return currentRunningApp;
@@ -325,6 +326,11 @@ class Style {
         this.fromHtml = fromHtml;
         this.initial = initial ?? false;
     }
+    /**
+     * @param templateStyle 模板样式
+     * @param styleElement 样式node
+     * @param app 应用实例
+     */
     commonScoped(templateStyle, styleElement, app) {
         if (app.scopeCss && !(app.container instanceof ShadowRoot)) {
             const rules = Array.from(templateStyle.sheet?.cssRules ?? []);
@@ -361,6 +367,10 @@ class Style {
             delete styleElement.__BK_WEWEB_APP_KEY__;
         return styleElement;
     }
+    /**
+     * @param app 应用实例
+     * @returns 返回执行后的style标签
+     */
     async excuteCode(app) {
         app.registerRunningApp();
         let styleElement = this.createStyleElement();
@@ -577,21 +587,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;
@@ -673,12 +684,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();
@@ -686,6 +691,12 @@ class MicroInstanceModel {
         this.container.innerHTML = '';
         this.container = undefined;
     }
+    set status(v) {
+        this.state = v;
+    }
+    get status() {
+        return this.state;
+    }
 }
 
 /*
@@ -740,6 +751,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)
@@ -785,6 +801,7 @@ class Script {
         }
         return;
     }
+    // 内存脚本执行
     executeMemoryScript(app, scopedCode) {
         try {
             const isScopedLocation = app instanceof MicroAppModel && app.scopeLocation;
@@ -796,6 +813,7 @@ class Script {
             console.error(e);
         }
     }
+    // 脚本标签执行
     executeSourceScript(scriptElement, scopedCode) {
         if (this.isModule) {
             if (this.url?.match(/\.ts$/)) {
@@ -812,6 +830,7 @@ class Script {
         }
         this.url && scriptElement.setAttribute('origin-src', this.url);
     }
+    // 获取脚本内容
     async getCode(app) {
         if (this.code.length || !this.url) {
             return this.code;
@@ -835,6 +854,7 @@ class Script {
     setCode(code) {
         this.code = code;
     }
+    // 转换脚本内容
     transformCode(app) {
         if (app.sandBox) {
             if (app.showSourceCode || this.isModule) {
@@ -915,8 +935,13 @@ async function execAppScripts(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);
+    let i = 0;
+    while (i < commomList.length && commomList[i]) {
+        await commomList[i].excuteCode(app);
+        i++;
+    }
     // 保证同步脚本 和 module类型 最先执行
-    await Promise.all(commomList.map(script => script.excuteCode(app)));
+    // await Promise.all(commomList.map(script => script.excuteCode(app)));
     // 最后执行 defer 和 async 脚本
     const deferScriptList = [];
     const asyncScriptList = [];
@@ -1231,6 +1256,7 @@ 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();
 }
@@ -1260,6 +1286,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) {
@@ -1302,6 +1329,7 @@ function activated(appKey, container, callback) {
  * 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)) {
@@ -1403,6 +1431,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) {
@@ -2198,23 +2227,24 @@ class SandBox {
  * IN THE SOFTWARE.
  */
 const BLANK_ORIGN = 'about:blank';
+// bk-weweb 微应用模式
 class MicroAppModel {
-    state = AppState.UNSET;
-    container;
-    data;
-    iframe = null;
-    initSource;
-    isPreLoad = false;
-    keepAlive;
+    state = AppState.UNSET; // 状态
+    container; // 容器
+    data; // 数据
+    iframe = null; // scoped iframe
+    initSource; // 初始资源
+    isPreLoad = false; // 是否预加载
+    keepAlive; // 是否缓存
     mode = WewebMode.APP;
-    name;
-    sandBox;
-    scopeCss;
-    scopeJs;
-    scopeLocation;
-    showSourceCode;
-    source;
-    url;
+    name; // 名称
+    sandBox; // 沙箱
+    scopeCss; // 是否隔离样式
+    scopeJs; // 是否隔离js
+    scopeLocation; // 是否隔离location
+    showSourceCode; // 是否显示源码
+    source; // 入口资源
+    url; // url
     constructor(props) {
         this.name = props.id !== props.url ? props.id : random(5);
         this.mode = props.mode ?? WewebMode.APP;
@@ -2235,6 +2265,7 @@ class MicroAppModel {
             this.container.setAttribute(CSS_ATTRIBUTE_KEY, this.name);
         }
     }
+    // 激活
     activated(container, callback) {
         this.isPreLoad = false;
         this.state = AppState.ACTIVATED;
@@ -2252,6 +2283,7 @@ class MicroAppModel {
             callback?.(this);
         }
     }
+    // 创建隔离iframe
     createIframe() {
         return new Promise(resolve => {
             const iframe = document.createElement('iframe');
@@ -2699,11 +2731,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;
@@ -2712,6 +2745,7 @@ class AppCache {
             return app;
         return Array.from(this.cache.values()).find((item) => item.name === name);
     }
+    // 获取缓存app
     getBaseAppStyle(urlOrCode) {
         return this.baseSource.getStyle(urlOrCode);
     }
@@ -2790,6 +2824,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);
@@ -2806,6 +2846,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);
@@ -2829,6 +2875,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');
@@ -2863,9 +2913,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);
@@ -2873,6 +2934,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);
@@ -2906,6 +2973,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;
@@ -2957,6 +3027,7 @@ function collectBaseSource() {
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
+// mount
 function mount(appKey, container, callback) {
     const app = appCache.getApp(appKey);
     app &&
@@ -2991,6 +3062,7 @@ function mount(appKey, container, callback) {
  * CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
  * IN THE SOFTWARE.
  */
+// unload
 function unload(url) {
     appCache.deleteApp(url);
 }