@open-wxa/wxa-runner-core 0.12.3 → 0.13.0

package/dist/runtime/host.js

@@ -1,11 +1,52 @@
 "use strict";
 (() => {
-  // src/runtime/host/ConsoleForwarder.ts
+  // src/runtime/host/frameErrors.ts
   var DEDUPE_MS = 1e3;
+  var MINI_PROGRAM_ERROR = /^(\(in promise\) )?MiniProgramError\n/;
+  var STACK_FRAME = /^\s*at /;
+  function isErrorLike(value) {
+    return typeof value === "object" && value !== null && typeof value.message === "string";
+  }
+  function caughtError(value) {
+    if (isErrorLike(value) && MINI_PROGRAM_ERROR.test(value.message)) {
+      const ownStack = typeof value.stack === "string" && /^[^\n]*MiniProgramError\n/.test(value.stack);
+      return { message: value.message.replace(MINI_PROGRAM_ERROR, ""), stack: ownStack ? void 0 : value.stack };
+    }
+    if (typeof value === "string" && MINI_PROGRAM_ERROR.test(value)) {
+      const text = value.replace(MINI_PROGRAM_ERROR, "");
+      const firstFrame2 = text.search(/^\s*at /m);
+      const head = (firstFrame2 < 0 ? text : text.slice(0, firstFrame2)).replace(/\n$/, "");
+      const message = /^([\s\S]*)\n[^\n]*?: \1$/.exec(head)?.[1] ?? head;
+      return { message, stack: firstFrame2 < 0 ? void 0 : text.slice(firstFrame2) };
+    }
+    return null;
+  }
+  var RecentErrors = class {
+    constructor() {
+      this.recent = /* @__PURE__ */ new Map();
+    }
+    /**
+     * 比较栈里的各帧而不是整个栈：基础库打印成字符串时，栈开头的 `TypeError: …` 那行拆不出来。
+     * 不同位置抛出的同名错误帧不同，各记各的
+     */
+    isRepeated(kind, webviewId, message, stack) {
+      const frames = (stack || "").split("\n").filter((line) => STACK_FRAME.test(line)).map((line) => line.trim()).join("\n");
+      const key = `${kind}:${webviewId}:${message}
+${frames}`;
+      const now = Date.now();
+      for (const [recent, time] of this.recent) {
+        if (now - time >= DEDUPE_MS) this.recent.delete(recent);
+      }
+      if (this.recent.has(key)) return true;
+      this.recent.set(key, now);
+      return false;
+    }
+  };
+
+  // src/runtime/host/ConsoleForwarder.ts
   var MAX_ARG_LENGTH = 1e3;
   var MAX_TEXT_LENGTH = 8e3;
   var LAYERS = { service: "\u903B\u8F91\u5C42", webview: "\u6E32\u67D3\u5C42" };
-  var MINI_PROGRAM_ERROR = /^(\(in promise\) )?MiniProgramError\n/;
   var MODULE_URL = /\bhttps?:\/\/[^/\s]+\/__wxa__\/module\/([^?\s)]+?)(?:\?[^:\s)]*)?:(\d+):(\d+)/;
   var ConsoleForwarder = class {
     /**
@@ -17,13 +58,11 @@
       this.send = send;
       this.pageOf = pageOf;
       this.hintsOf = hintsOf;
-      this.recentErrors = /* @__PURE__ */ new Map();
     }
-    /** 运行时错误：全局 error、未处理的 Promise 拒绝、基础库捕获的业务代码错误 */
+    /** 运行时错误：全局 error、未处理的 Promise 拒绝、基础库捕获的业务代码错误。两路报来的同一个错误由宿主去重（见 frameErrors.ts） */
     error(kind, webviewId, message, stack) {
+      if (!this.mode) return;
       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 ? `
@@ -33,14 +72,9 @@ ${frames}` : ""}${hints}`);
     warn(text) {
       if (this.mode) this.post("warn", text);
     }
-    /** iframe 里的 console.warn / console.error；基础库捕获业务代码错误后打印的 console.error 按报错转发 */
+    /** iframe 里的 console.warn / console.error；基础库捕获业务代码错误后打印的不经过这里，按报错转发 */
     console(kind, webviewId, level, args) {
-      const thrown = level === "error" ? miniProgramError(args[0]) : null;
-      if (thrown) {
-        this.error(kind, webviewId, thrown.message, thrown.stack);
-      } else if (this.mode === "all") {
-        this.post(level, `${this.origin(kind, webviewId)} console.${level}\uFF1A${args.map(formatArg).join(" ")}`);
-      }
+      if (this.mode === "all") this.post(level, `${this.origin(kind, webviewId)} console.${level}\uFF1A${args.map(formatArg).join(" ")}`);
     }
     post(level, text) {
       this.send({ type: "console", level, text: text.length > MAX_TEXT_LENGTH ? `${text.slice(0, MAX_TEXT_LENGTH)}\u2026` : text });
@@ -49,33 +83,7 @@ ${frames}` : ""}${hints}`);
       const page = this.pageOf(kind, webviewId);
       return page ? `${LAYERS[kind]}\uFF08${page}\uFF09` : LAYERS[kind];
     }
-    /** @param key 来源、错误信息和业务代码的帧：两路报来的同一个错误相同，不同位置抛出的同名错误不同 */
-    isRepeated(key) {
-      const now = Date.now();
-      for (const [recent, time] of this.recentErrors) {
-        if (now - time >= DEDUPE_MS) this.recentErrors.delete(recent);
-      }
-      if (this.recentErrors.has(key)) return true;
-      this.recentErrors.set(key, now);
-      return false;
-    }
   };
-  function isErrorLike(value) {
-    return typeof value === "object" && value !== null && typeof value.message === "string";
-  }
-  function miniProgramError(value) {
-    if (isErrorLike(value) && MINI_PROGRAM_ERROR.test(value.message)) {
-      return { message: value.message.replace(MINI_PROGRAM_ERROR, ""), stack: value.stack };
-    }
-    if (typeof value === "string" && MINI_PROGRAM_ERROR.test(value)) {
-      const text = value.replace(MINI_PROGRAM_ERROR, "");
-      const firstFrame2 = text.search(/^\s*at /m);
-      const head = (firstFrame2 < 0 ? text : text.slice(0, firstFrame2)).replace(/\n$/, "");
-      const message = /^([\s\S]*)\n[^\n]*?: \1$/.exec(head)?.[1] ?? head;
-      return { message, stack: firstFrame2 < 0 ? void 0 : text.slice(firstFrame2) };
-    }
-    return null;
-  }
   function businessFrames(stack) {
     return (stack || "").split("\n").filter((line) => /^\s*at /.test(line) && MODULE_URL.test(line)).map((line) => `    ${line.trim().replace(MODULE_URL, "$1:$2:$3")}`).join("\n");
   }
@@ -106,7 +114,6 @@ ${frames}` : "");
     "systemLog",
     "traceEvent",
     "getPermissionBytes",
-    "getABTestConfig",
     "initRenderDone",
     "saveInitialRenderingCache",
     "setKeyValue",
@@ -627,6 +634,7 @@ ${frames}` : "");
 
   // src/runtime/host/api/misc.ts
   var SERVICE_MARKET = "webapi_servicemarket_jsapi_comm";
+  var CLOUD = "qbase_commapi";
   function createMiscApis(appid, options) {
     const viaDevtools = async (api, url, json) => {
       try {
@@ -636,6 +644,14 @@ ${frames}` : "");
         throw error;
       }
     };
+    let cloudWarned = false;
+    const cloudUnavailable = (api, operation) => {
+      if (!cloudWarned) {
+        cloudWarned = true;
+        console.warn("[wxa-runner] \u4E91\u5F00\u53D1\uFF08wx.cloud\uFF09\u5728\u6D4F\u89C8\u5668\u8FD0\u884C\u65F6\u4E0D\u53EF\u7528\uFF0C\u8C03\u7528\u4F1A\u5931\u8D25");
+      }
+      return fail(api, `wxa-runner \u4E0D\u652F\u6301\u4E91\u5F00\u53D1\uFF08${operation ?? "unknown"}\uFF09`);
+    };
     return {
       // canvas 导出图片、拍照、录像的结果都经过这里
       base64ToTempFilePath: async (args) => {
@@ -652,11 +668,14 @@ ${frames}` : "");
             (error) => serviceMarketFail(error.message)
           );
         }
+        if (args.data?.api_name === CLOUD) return cloudUnavailable(api, args.data.data?.qbase_api_name);
         if (args.data?.api_name === "webapi_getwxanetwork") return bizDomainUnavailable(api);
         if (args.data?.api_name === "webapi_getwxauserprivacyauthinfo") return ok(api, { data: { data: JSON.stringify(PRIVACY_AUTH_INFO) } });
-        return ok(api);
+        return ok(api, { data: {} });
       },
       getAppContact: (args, { api }) => args.keyPath === "WxaAppInfo.Network.BizDomain" ? bizDomainUnavailable(api) : ok(api),
+      // 基础库内部的实验开关。不在实验里时原生返回空字符串；没有 testConfig 时 3.3.4 读它的 length 报错
+      getABTestConfig: (_args, { api }) => ok(api, { testConfig: "" }),
       // 插件：基础库启动时校验插件、取插件信息，插件里的网络请求要等拿到这两样才发出。插件代码也只在 --devtools-login 时下载
       ...options?.devtoolsLogin ? {
         verifyPlugin: (async (args, { api }) => ok(api, await viaDevtools(api, "/__wxa__/api/verify-plugin", { data: args.data }))),
@@ -1958,7 +1977,7 @@ ${frames}` : "");
     if (warnedOrigins.has(url.origin)) return;
     warnedOrigins.add(url.origin);
     console.warn(
-      `[wxa-runner] web-view \u52A0\u8F7D\u7684 ${url.origin} \u4E0E\u6A21\u62DF\u5668\uFF08${location.origin}\uFF09\u4E0D\u662F\u540C\u4E00\u4E2A\u7AD9\u70B9\uFF0C\u6D4F\u89C8\u5668\u6309\u8DE8\u7AD9\u5D4C\u5165\u5904\u7406\uFF0C\u7F51\u9875\u7684 Cookie \u53EF\u80FD\u4E0D\u751F\u6548\uFF08\u5FAE\u4FE1\u91CC\u7684\u5C0F\u7A0B\u5E8F\u6CA1\u6709\u8FD9\u4E2A\u95EE\u9898\uFF09\u3002\u9700\u8981 Cookie \u65F6\u8BA9\u7F51\u9875\u5728\u65B0\u7A97\u53E3\u6253\u5F00\uFF1A\u547D\u4EE4\u884C\u52A0 --webview-window\uFF0CPlaywright \u7528 test.use({ wxaWebView: 'window' })`
+      `[wxa-runner] web-view \u52A0\u8F7D\u7684 ${url.origin} \u4E0E\u6A21\u62DF\u5668\uFF08${location.origin}\uFF09\u4E0D\u662F\u540C\u4E00\u4E2A\u7AD9\u70B9\uFF0C\u6D4F\u89C8\u5668\u6309\u8DE8\u7AD9\u5D4C\u5165\u5904\u7406\uFF0C\u7F51\u9875\u7684 Cookie \u53EF\u80FD\u4E0D\u751F\u6548\uFF08\u5FAE\u4FE1\u91CC\u7684\u5C0F\u7A0B\u5E8F\u6CA1\u6709\u8FD9\u4E2A\u95EE\u9898\uFF09\u3002\u9700\u8981 Cookie \u65F6\u8BA9\u7F51\u9875\u5728\u65B0\u7A97\u53E3\u6253\u5F00\uFF1A\u914D\u7F6E\u6587\u4EF6 wxa.config.ts \u91CC\u5199 webViewWindow: true\uFF0CPlaywright \u7528 test.use({ wxaWebView: 'window' })`
     );
   }
   function readableUrl(frame) {
@@ -2138,6 +2157,49 @@ ${frames}` : "");
     return navigator.userActivation?.isActive ?? true;
   }
 
+  // src/runtime/host/ui/pageTransition.ts
+  var DURATION = 300;
+  function canAnimatePageTransition(frame) {
+    return frame.isConnected && !document.hidden && !window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+  async function animatePageTransition(previous, current, direction) {
+    const viewport = current.parentElement;
+    const body = current.contentDocument?.body;
+    if (!viewport || previous.parentElement !== viewport || !body) return;
+    const { visibility, zIndex } = previous.style;
+    const outgoing = previous.contentDocument?.documentElement ?? previous;
+    const wasInert = outgoing.inert;
+    const shield = body.ownerDocument.createElement("div");
+    shield.className = "wxa-page-transition-shield";
+    shield.setAttribute("aria-hidden", "true");
+    shield.style.cssText = "position: fixed; inset: 0; z-index: 2147483647; pointer-events: auto; background: transparent;";
+    const sliding = direction === "push" ? current : previous;
+    const transform = direction === "push" ? ["translateX(100%)", "translateX(0)"] : ["translateX(0)", "translateX(100%)"];
+    let animation;
+    let timer;
+    try {
+      outgoing.inert = true;
+      body.append(shield);
+      previous.style.visibility = "visible";
+      if (direction === "pop") previous.style.zIndex = "2";
+      animation = sliding.animate({ transform }, { duration: DURATION, easing: "ease", fill: "both" });
+      await Promise.race([
+        animation.finished.catch(() => void 0),
+        // 切到后台后，浏览器可能暂停动画，路由队列仍需继续。
+        new Promise((resolve) => {
+          timer = setTimeout(resolve, DURATION + 60);
+        })
+      ]);
+    } finally {
+      clearTimeout(timer);
+      animation?.cancel();
+      previous.style.visibility = visibility;
+      previous.style.zIndex = zIndex;
+      outgoing.inert = wasInert;
+      shield.remove();
+    }
+  }
+
   // src/runtime/host/ui/dom.ts
   function element(tag, className, text) {
     const el = document.createElement(tag);
@@ -2456,6 +2518,7 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       this.pages = root.querySelector(".wxa-pages");
       this.tabBar = root.querySelector(".wxa-tabbar");
       this.overlay = root.querySelector(".wxa-overlay");
+      guardOverlayTouchClicks(this.overlay);
       this.routeLabel = root.querySelector(".wxa-route");
       root.querySelector(".wxa-reload").addEventListener("click", () => location.reload());
       this.scaleButton.addEventListener("click", () => {
@@ -2494,6 +2557,18 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
     onBack(handler) {
       this.backButton.addEventListener("click", handler);
     }
+    async transitionPages(previous, current, direction) {
+      const navWasInert = this.navBar.inert;
+      const tabsWereInert = this.tabBar.inert;
+      this.navBar.inert = true;
+      this.tabBar.inert = true;
+      try {
+        await animatePageTransition(previous, current, direction);
+      } finally {
+        this.navBar.inert = navWasInert;
+        this.tabBar.inert = tabsWereInert;
+      }
+    }
     setTabBar(config, onTap) {
       this.tabBarConfig = config && config.list?.length && !config.custom ? config : null;
       this.onTabTap = onTap;
@@ -2738,6 +2813,24 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
   function maskElement(dim) {
     return element("div", "wxa-mask" + (dim ? " is-dim" : ""));
   }
+  function guardOverlayTouchClicks(overlay) {
+    let press;
+    overlay.addEventListener("pointerdown", (event) => {
+      press = event.pointerType === "touch" && event.target instanceof Node ? { id: event.pointerId, target: event.target } : void 0;
+    }, true);
+    overlay.addEventListener("pointercancel", (event) => {
+      if (press?.id === event.pointerId) press = void 0;
+    }, true);
+    overlay.addEventListener("click", (event) => {
+      if (event.pointerType !== "touch") return;
+      if (press?.id === event.pointerId) {
+        const start = press;
+        press = void 0;
+        if (event.target instanceof Node && event.target.contains(start.target)) return;
+      }
+      event.stopPropagation();
+    }, true);
+  }
   var BACK_ICON = '<svg width="12" height="20" viewBox="0 0 12 20"><path d="M10 2 2 10l8 8" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>';
   var MORE_ICON = '<svg width="22" height="8" viewBox="0 0 22 8" fill="currentColor"><circle cx="3.5" cy="4" r="2.3"/><circle cx="11" cy="4" r="3.3"/><circle cx="18.5" cy="4" r="2.3"/></svg>';
   var CLOSE_ICON = '<svg width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8.2" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="10" cy="10" r="3.4" fill="currentColor"/></svg>';
@@ -2760,6 +2853,7 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
     constructor(info, root, sendReport = () => void 0) {
       this.info = info;
       this.errors = [];
+      this.recentErrors = new RecentErrors();
       /** 小程序发出的 wx.request */
       this.requests = new RequestLog();
       this.api = new ApiRegistry((context) => this.reportUnimplemented(context));
@@ -2917,14 +3011,20 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
         message: err ? err.message : String(error),
         stack: typeof err?.stack === "string" ? err.stack : void 0
       };
-      this.errors.push(report);
-      this.forwarder.error(kind, webviewId, report.message, report.stack);
+      this.recordError(report);
     }
     get forwardConsole() {
       return this.forwarder.mode;
     }
     reportConsole(kind, webviewId, level, args) {
-      this.forwarder.console(kind, webviewId, level, args);
+      const caught = level === "error" ? caughtError(args[0]) : null;
+      if (caught) this.recordError({ kind, webviewId, ...caught });
+      else this.forwarder.console(kind, webviewId, level, args);
+    }
+    recordError(report) {
+      if (this.recentErrors.isRepeated(report.kind, report.webviewId, report.message, report.stack)) return;
+      this.errors.push(report);
+      this.forwarder.error(report.kind, report.webviewId, report.message, report.stack);
     }
     /**
      * 只记录逻辑层的公开 wx API 和 FileSystemManager 方法，每个原生接口一次。
@@ -2987,20 +3087,35 @@ html, body { margin: 0; height: 100%; background: radial-gradient(120% 80% at 50
       this.stack.reset(page);
       this.activate(page, "appLaunch");
     }
-    async navigateTo(url) {
+    async navigateTo(url, { animate = true } = {}) {
       if (!this.stack.canPush()) return fail("navigateTo", "webview count limit exceed");
       const { path, query } = this.resolveUrl(url);
       if (this.tabPaths.has(path)) return fail("navigateTo", "can not navigateTo a tabbar page");
       if (!this.hasPage(path)) return fail("navigateTo", `page "${path}" is not found`);
       const page = await this.openPage(path, query);
+      const previous = this.currentPage();
       this.stack.push(page);
       this.activate(page, "navigateTo");
+      if (animate && this.info.pageTransition && previous && canAnimatePageTransition(previous.frame)) {
+        await this.shell.transitionPages(previous.frame, page.frame, "push");
+      }
       return ok("navigateTo", { webviewId: page.id });
     }
     async navigateBack(delta) {
       if (this.stack.size <= 1) return fail("navigateBack", "cannot navigate back at first page.");
-      this.stack.pop(delta).forEach((page) => this.closePage(page));
-      this.activate(this.currentPage(), "navigateBack");
+      const popped = this.stack.pop(delta);
+      const outgoing = popped[0];
+      const animate = this.info.pageTransition && outgoing && canAnimatePageTransition(outgoing.frame);
+      for (const page of popped) {
+        if (!animate || page !== outgoing) this.closePage(page);
+      }
+      const target = this.currentPage();
+      try {
+        this.activate(target, "navigateBack");
+        if (animate) await this.shell.transitionPages(outgoing.frame, target.frame, "pop");
+      } finally {
+        if (animate) this.closePage(outgoing);
+      }
       return ok("navigateBack");
     }
     async redirectTo(url) {
@@ -3432,7 +3547,7 @@ ${script}
         await host.enqueueRoute(async () => {
           for (const { path, query } of this.saved.slice(1)) {
             const search = new URLSearchParams(query).toString();
-            const result = await host.navigateTo(search ? `${path}?${search}` : path);
+            const result = await host.navigateTo(search ? `${path}?${search}` : path, { animate: false });
             if (!String(result.errMsg).endsWith(":ok")) {
               console.warn(`[wxa-runner] \u6062\u590D\u9875\u9762\u6808\u65F6\u6253\u4E0D\u5F00 ${path}\uFF1A${result.errMsg}`);
               return;