@open-wxa/wxa-runner-core 0.8.2 → 0.10.0

package/dist/runtime/host.js

@@ -1299,9 +1299,9 @@ ${frames}` : "");
   }
   function sleep(ms, signal) {
     return new Promise((resolve, reject) => {
-      if (signal?.aborted) return reject(signal.reason);
+      if (signal.aborted) return reject(signal.reason);
       const timer = setTimeout(resolve, ms);
-      signal?.addEventListener("abort", () => {
+      signal.addEventListener("abort", () => {
         clearTimeout(timer);
         reject(signal.reason);
       }, { once: true });
@@ -2144,6 +2144,29 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
     }
   };
 
+  // src/runtime/host/ui/tabBarView.ts
+  function tabBarView(config, selectedPath) {
+    return {
+      background: config.backgroundColor || "#f7f7f7",
+      borderTopColor: config.borderStyle === "white" ? "rgba(255,255,255,.3)" : "rgba(0,0,0,.1)",
+      items: config.list.map((item) => itemView(config, item, item.pagePath === selectedPath))
+    };
+  }
+  function itemView(config, item, selected) {
+    const icon = selected ? item.selectedIconPath || item.iconPath : item.iconPath;
+    return {
+      pagePath: item.pagePath,
+      selected,
+      color: selected ? config.selectedColor || "#07c160" : config.color || "#7a7e83",
+      icon: icon ? iconUrl(icon) : null,
+      text: item.text || "",
+      mark: item.mark || null
+    };
+  }
+  function iconUrl(path) {
+    return /^https?:\/\//.test(path) ? path : "/" + path.replace(/^\//, "");
+  }
+
   // src/runtime/host/ui/PhoneShell.ts
   var SCALE_STORAGE_KEY = "wxa-runner:scale";
   var MIN_SCALE = 0.5;
@@ -2324,29 +2347,27 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       const visible = this.tabBarVisible();
       this.tabBar.classList.toggle("is-hidden", !visible);
       if (!config || !visible) return;
-      this.tabBar.style.background = config.backgroundColor || "#f7f7f7";
-      this.tabBar.style.borderTopColor = config.borderStyle === "white" ? "rgba(255,255,255,.3)" : "rgba(0,0,0,.1)";
-      this.tabBar.innerHTML = "";
-      config.list.forEach((item, index) => {
-        const selected = item.pagePath === selectedPath;
-        const el = document.createElement("div");
-        el.className = "wxa-tabbar-item" + (selected ? " is-selected" : "");
-        el.dataset.pagePath = item.pagePath;
-        el.style.color = selected ? config.selectedColor || "#07c160" : config.color || "#7a7e83";
-        const icon = selected ? item.selectedIconPath || item.iconPath : item.iconPath;
-        const iconBox = element("span", "wxa-tabbar-icon");
-        if (icon) {
-          const img = document.createElement("img");
-          img.src = /^https?:\/\//.test(icon) ? icon : "/" + icon.replace(/^\//, "");
-          iconBox.appendChild(img);
-          el.appendChild(iconBox);
-        }
-        const text = element("span", "wxa-tabbar-text", item.text || "");
-        el.appendChild(text);
-        if (item.mark) (icon ? iconBox : text).appendChild(markElement(item.mark));
-        el.addEventListener("click", () => this.onTabTap(item.pagePath, index));
-        this.tabBar.appendChild(el);
-      });
+      const view = tabBarView(config, selectedPath);
+      this.tabBar.style.background = view.background;
+      this.tabBar.style.borderTopColor = view.borderTopColor;
+      this.tabBar.replaceChildren(...view.items.map((item, index) => this.tabBarItemElement(item, index)));
+    }
+    tabBarItemElement(item, index) {
+      const el = element("div", "wxa-tabbar-item" + (item.selected ? " is-selected" : ""));
+      el.dataset.pagePath = item.pagePath;
+      el.style.color = item.color;
+      const iconBox = element("span", "wxa-tabbar-icon");
+      if (item.icon) {
+        const img = document.createElement("img");
+        img.src = item.icon;
+        iconBox.appendChild(img);
+        el.appendChild(iconBox);
+      }
+      const text = element("span", "wxa-tabbar-text", item.text);
+      el.appendChild(text);
+      if (item.mark) (item.icon ? iconBox : text).appendChild(markElement(item.mark));
+      el.addEventListener("click", () => this.onTabTap(item.pagePath, index));
+      return el;
     }
     tabBarVisible() {
       return this.tabBarPath !== null && this.hasTabBar(this.tabBarPath);
@@ -2997,32 +3018,30 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
 
   // src/runtime/host/hmr.ts
   async function applyHotUpdate(host, update) {
-    const hasTemplates = update.templates.length > 0;
-    const hasStyles = update.styles.length > 0;
-    const v = `?v=${update.version}`;
-    const [pageStyles, pageTemplates, serviceTemplates, moduleScripts] = await Promise.all([
-      hasStyles ? fetchText(`/__wxa__/page-styles.js${v}`) : "",
-      hasTemplates ? fetchText(`/__wxa__/page-templates.js${v}`) : "",
-      hasTemplates ? fetchText(`/__wxa__/service-templates.js${v}`) : "",
-      Promise.all(update.scripts.map((id) => fetchText(`/__wxa__/module/${encodeURI(id)}.js${v}`)))
-    ]);
+    const code = await fetchHotCode(update);
     await host.enqueueRoute(async () => {
       const service = host.serviceWindow();
       if (!service?.__virtualDOM__?.updateWxAppCode) throw new Error("\u57FA\u7840\u5E93\u7684\u70ED\u66F4\u65B0\u5F00\u5173\u6CA1\u6709\u6253\u5F00");
-      if (hasStyles) {
-        for (const page of host.livePages()) {
-          if (page.win) updateStyles(page.win, pageStyles);
-        }
+      const pageWindows = host.livePages().flatMap((page) => page.win ? [page.win] : []);
+      if (code.pageStyles !== null) {
+        for (const win of pageWindows) updateStyles(win, code.pageStyles);
       }
-      if (hasTemplates) {
-        for (const page of host.livePages()) {
-          if (page.win) updateTemplates(page.win, pageTemplates, update.templates);
-        }
-        updateTemplates(service, serviceTemplates, update.templates);
+      if (code.templates) {
+        for (const win of pageWindows) updateTemplates(win, code.templates.page, update.templates);
+        updateTemplates(service, code.templates.service, update.templates);
       }
-      update.scripts.forEach((id, index) => updateScript(service, host, id, moduleScripts[index]));
+      update.scripts.forEach((id, index) => updateScript(service, host, id, code.scripts[index]));
     });
   }
+  async function fetchHotCode(update) {
+    const v = `?v=${update.version}`;
+    const [pageStyles, templates, scripts] = await Promise.all([
+      update.styles.length > 0 ? fetchText(`/__wxa__/page-styles.js${v}`) : null,
+      update.templates.length > 0 ? Promise.all([fetchText(`/__wxa__/page-templates.js${v}`), fetchText(`/__wxa__/service-templates.js${v}`)]).then(([page, service]) => ({ page, service })) : null,
+      Promise.all(update.scripts.map((id) => fetchText(`/__wxa__/module/${encodeURI(id)}.js${v}`)))
+    ]);
+    return { pageStyles, templates, scripts };
+  }
   function updateStyles(win, code) {
     const sheets = win.__styleSheetManager2__?._pathMap;
     if (!sheets) throw new Error("\u57FA\u7840\u5E93\u6CA1\u6709\u6837\u5F0F\u8868\u7BA1\u7406\u5668\uFF0C\u65E0\u6CD5\u70ED\u66FF\u6362\u6837\u5F0F");