@open-wxa/wxa-runner-core 0.9.0 → 0.10.1

package/dist/runtime/host.js

@@ -8,11 +8,15 @@
   var MINI_PROGRAM_ERROR = /^(\(in promise\) )?MiniProgramError\n/;
   var MODULE_URL = /\bhttps?:\/\/[^/\s]+\/__wxa__\/module\/([^?\s)]+?)(?:\?[^:\s)]*)?:(\d+):(\d+)/;
   var ConsoleForwarder = class {
-    /** @param pageOf 出错的页面路径，不知道时返回 undefined */
-    constructor(mode, send, pageOf) {
+    /**
+     * @param pageOf 出错的页面路径，不知道时返回 undefined
+     * @param hintsOf 附在报错后面的提示，帮开发者认出 wxa-runner 和真机不同造成的错误
+     */
+    constructor(mode, send, pageOf, hintsOf = () => []) {
       this.mode = mode;
       this.send = send;
       this.pageOf = pageOf;
+      this.hintsOf = hintsOf;
       this.recentErrors = /* @__PURE__ */ new Map();
     }
     /** 运行时错误：全局 error、未处理的 Promise 拒绝、基础库捕获的业务代码错误 */
@@ -20,8 +24,10 @@
       const frames = businessFrames(stack);
       if (!this.mode || this.isRepeated(`${kind}:${webviewId}:${message}
 ${frames}`)) return;
+      const hints = this.hintsOf(kind).map((hint) => `
+  \u63D0\u793A\uFF1A${hint}`).join("");
       this.post("error", `${this.origin(kind, webviewId)}\u62A5\u9519\uFF1A${message}${frames ? `
-${frames}` : ""}`);
+${frames}` : ""}${hints}`);
     }
     /** 运行时自己的提醒，如调用了未实现的 wx API */
     warn(text) {
@@ -1299,9 +1305,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 +2150,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 +2353,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);
@@ -2547,7 +2574,8 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       this.forwarder = new ConsoleForwarder(
         info.forwardConsole ?? false,
         sendReport,
-        (kind, webviewId) => kind === "service" ? this.currentPage()?.path : this.pages.get(webviewId)?.path
+        (kind, webviewId) => kind === "service" ? this.currentPage()?.path : this.pages.get(webviewId)?.path,
+        (kind) => this.launchHints(kind)
       );
       this.shell = new PhoneShell(root, info.device);
       this.tabPaths = new Set((info.wxConfig.tabBar?.list || []).map((item) => stripHtml(item.pagePath)));
@@ -2698,6 +2726,13 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       this.errors.push({ kind: "service", webviewId: 0, api, message });
       this.forwarder.warn(message);
     }
+    /**
+     * 逻辑层在首页创建前出错时的提示：onLaunch、启动阶段的接口回调里读 getCurrentPages()[0] 是常见原因，
+     * 而报错本身只说读不到某个属性。被拦截的请求立即返回，比真机更容易在首页创建前执行回调
+     */
+    launchHints(kind) {
+      return kind === "service" && !this.currentPage() ? ["\u51FA\u9519\u65F6\u9996\u9875\u8FD8\u6CA1\u521B\u5EFA\uFF0CgetCurrentPages() \u8FD4\u56DE\u7684\u662F\u7A7A\u6570\u7EC4"] : [];
+    }
     // ---------------------------------------------------------------------------
     // 路由
     // ---------------------------------------------------------------------------
@@ -2997,32 +3032,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");