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

package/dist/runtime/host.js

@@ -1977,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) {
@@ -2157,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);
@@ -2475,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", () => {
@@ -2513,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;
@@ -2757,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>';
@@ -3013,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) {
@@ -3458,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;