@swiftbrowser/web 0.10.2 → 0.10.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.10.2",
+  "version": "0.10.4",
   "type": "module",
   "description": "SwiftBrowser web renderer and dev server: applies render ops from a Swift/Wasm app to the DOM inside an iPhone frame.",
   "repository": {

package/src/animation.ts

@@ -961,12 +961,36 @@ export class Animator {
     el.animate([from, to], { ...timing, fill: 'backwards' });
   }
 
+  /** The exit clones playing, each with the element it left (its parent at removal): `dropExitClonesIn`. */
+  private readonly exitClones = new Map<HTMLElement, HTMLElement>();
+
+  /**
+   * Drops the exit clones of elements that left `container` or anything in
+   * it: a clone stands in for content of a container that is now going
+   * itself, and would play on over whatever takes the container's place. A
+   * screen that swaps its content for a placeholder a commit before it is
+   * popped (a split view's detail as its selection clears) left its bar
+   * group's clone fading over the uncovered screen's bar. (A clone not built
+   * yet, its pass still waiting for the frame, is refused in `exit`.)
+   */
+  dropExitClonesIn(container: HTMLElement): void {
+    for (const [clone, owner] of this.exitClones) {
+      if (owner !== container && !container.contains(owner)) continue;
+      this.exitClones.delete(clone);
+      for (const animation of clone.getAnimations()) animation.cancel();
+      clone.remove();
+    }
+  }
+
   /**
    * Re-insert a visual clone of a removed element at its old position and
    * play its transition backwards; the clone is dropped when done.
    */
   exit(rec: RemovedRecord, animation: Animation | undefined): HTMLElement | null {
     const parent = rec.ancestors[0] ?? null;
+    // The element it left has gone itself since (a later pass in the same
+    // task popped the screen): nothing is left to leave from.
+    if (parent && !parent.isConnected) return null;
     const end = transitionStart(rec.transition ?? implicitTransitionOf(rec.el, parent), true);
     if (isIdentity(end) || !rec.rect) return null;
     const clone = ghostClone(rec.el);
@@ -999,7 +1023,11 @@ export class Animator {
     }
     const timing = baseTiming(timingFor(animation));
     const anim = clone.animate([from, to], { ...timing, fill: 'forwards' });
-    const done = (): void => clone.remove();
+    if (parent) this.exitClones.set(clone, parent);
+    const done = (): void => {
+      this.exitClones.delete(clone);
+      clone.remove();
+    };
     anim.finished.then(done, done);
     window.setTimeout(done, timing.duration + timing.delay + 100);
     return clone;

package/src/browserHistory.ts

@@ -61,6 +61,16 @@ function shown(win: Window, el: HTMLElement): boolean {
   return win.getComputedStyle(el).visibility !== 'hidden';
 }
 
+/**
+ * A back the browser makes after a touch this close to a side of the page is
+ * its edge swipe (Safari's, Android's back gesture), which has animated the
+ * pop already: the renderer then does not slide the screen out again. The
+ * browser's back button sends no touch to the page, so its pop slides.
+ */
+const SWIPE_EDGE_PX = 44;
+/** How long after such a touch a back still counts as the swipe it started. */
+const SWIPE_TOUCH_MS = 2000;
+
 /** When `sync` runs: the renderer's `sb:precommit` (the pass's ops applied, not yet laid out), its `sb:commit`, or `enable`. */
 export type SyncStage = 'precommit' | 'commit' | 'enabling';
 
@@ -76,7 +86,9 @@ export class BrowserHistory {
    * split view clears its sidebar selection first, and the detail goes on
    * the next), so a commit that still shows the level is not a new one.
    */
-  private dismissing: { target: number; from: number; until: number } | null = null;
+  private dismissing: { target: number; from: number; until: number; instant: boolean } | null = null;
+  /** When a touch last began at a side of the page (`SWIPE_EDGE_PX`): the start of the browser's edge swipe. */
+  private lastEdgeTouch = Number.NEGATIVE_INFINITY;
   /** `popstate` events to ignore: the ones our own `history.go` causes. */
   private ignorePops = 0;
   /**
@@ -116,6 +128,7 @@ export class BrowserHistory {
     this.root.addEventListener('sb:precommit', this.onPreCommit);
     this.root.addEventListener('sb:commit', this.onCommit);
     this.win.addEventListener('popstate', this.onPopState);
+    this.win.addEventListener('touchstart', this.onTouchStart, { capture: true, passive: true });
     // Enabled before the first commit (a mount, or a remount such as React's
     // StrictMode makes in development) the screen is not drawn yet: fewer
     // levels than the entry records is not the app popping, so only the
@@ -135,6 +148,7 @@ export class BrowserHistory {
     this.root.removeEventListener('sb:precommit', this.onPreCommit);
     this.root.removeEventListener('sb:commit', this.onCommit);
     this.win.removeEventListener('popstate', this.onPopState);
+    this.win.removeEventListener('touchstart', this.onTouchStart, { capture: true });
   }
 
   /**
@@ -232,11 +246,15 @@ export class BrowserHistory {
     if (!dismissing) return;
     dismissing.from = depth;
     dismissing.until = performance.now() + DISMISS_WAIT_MS;
-    if (!this.dismissOne()) this.dismissing = null;
+    if (!this.dismissOne(dismissing.instant)) this.dismissing = null;
   }
 
-  /** Asks the app to dismiss one level: the top sheet when nothing is pushed inside it, else the deepest visible stack's top screen. */
-  private dismissOne(): boolean {
+  /**
+   * Asks the app to dismiss one level: the top sheet when nothing is pushed
+   * inside it, else the deepest visible stack's top screen. `instant`: the
+   * browser has animated the pop (its swipe), so the renderer does not.
+   */
+  private dismissOne(instant: boolean): boolean {
     const sheets = this.sheets();
     const top = sheets.at(-1) ?? this.root;
     const stacks = this.stacks(top)
@@ -248,6 +266,7 @@ export class BrowserHistory {
       const screen = this.topScreen(deepest.stack);
       const id = Number(screen?.dataset['sbId']);
       if (!Number.isInteger(id)) return false;
+      if (instant) this.renderer.popWithoutAnimation(id);
       this.renderer.tap(id); // what the back button sends
       return true;
     }
@@ -364,6 +383,12 @@ export class BrowserHistory {
     this.restoringSelection = false;
   }
 
+  private readonly onTouchStart = (event: TouchEvent): void => {
+    const touch = event.touches[0];
+    if (!touch) return;
+    if (touch.clientX <= SWIPE_EDGE_PX || touch.clientX >= this.win.innerWidth - SWIPE_EDGE_PX) this.lastEdgeTouch = performance.now();
+  };
+
   private readonly onPopState = (event: PopStateEvent): void => {
     if (this.ignorePops > 0) {
       this.ignorePops -= 1;
@@ -378,8 +403,10 @@ export class BrowserHistory {
     // A move the browser makes replaces any back still in progress.
     this.dismissing = null;
     if (target.sbDepth < depth) {
-      // Back: dismiss one level now, the rest as each pop lands.
-      this.dismissing = { target: target.sbDepth, from: depth, until: 0 };
+      // Back: dismiss one level now, the rest as each pop lands. After a
+      // touch at a side of the page it is the browser's swipe, animated already.
+      const instant = performance.now() - this.lastEdgeTouch < SWIPE_TOUCH_MS;
+      this.dismissing = { target: target.sbDepth, from: depth, until: 0, instant };
       this.dismissFrom(depth);
     } else if (target.sbDepth > depth) {
       // Forward: a screen cannot be re-pushed; return to the entry that matches.

package/src/renderer.ts

@@ -1310,6 +1310,24 @@ export class Renderer {
     this.onEvent({ type: 'tap', id });
   }
 
+  /**
+   * Screens the browser's own history move pops (`popWithoutAnimation`):
+   * the browser has animated the pop already, so the renderer does not.
+   */
+  private instantPops = new Set<ElementId>();
+
+  /**
+   * The next removal of screen `id` is a pop the browser has already shown
+   * (its back swipe or button, `browserHistory.ts`): the screen goes without
+   * the slide, and the screen it uncovers takes its place at once rather
+   * than sliding back, so the pop does not play a second time.
+   */
+  popWithoutAnimation(id: ElementId): void {
+    this.instantPops.add(id);
+    // A pop the app refused leaves nothing to skip for long.
+    window.setTimeout(() => this.instantPops.delete(id), NAV_TRANSITION_MS * 5);
+  }
+
   /** The repaint keep-alive (`keepRepainting`): its box, timer and deadline while it runs. */
   private repaintKeepAlive: { el: HTMLElement; timer: number; until: number; on: boolean } | null = null;
 
@@ -2213,6 +2231,8 @@ export class Renderer {
     const el = this.elements.get(id);
     if (!el) throw new RendererError(`Cannot remove unknown element ${id}`, op);
     const parent = el.parentElement;
+    // Clones of what left this subtree earlier (a bar group's, src/animation.ts) go with it.
+    this.animator.dropExitClonesIn(el);
     const stack = parent?.classList.contains('sb-navstack-screens')
       ? parent.parentElement
       : null;
@@ -2221,7 +2241,8 @@ export class Renderer {
       // screen (`--sb-nav-from`), and the screen below is handed back to the
       // stylesheet so it finishes its slide to 0 as the new top screen.
       this.interaction.screenRemoved(el);
-      animatePop(stack, el);
+      if (this.instantPops.delete(id)) settleWithoutTransition(stack);
+      else animatePop(stack, el);
     }
     const isSheet = el.classList.contains('sb-sheet');
     if (isSheet && parent) animateSheetOut(parent, el);
@@ -3043,6 +3064,16 @@ function animatePush(screen: HTMLElement): void {
  * visual clone (stripped of element ids so it is invisible to the renderer)
  * slides away on top of the stack and is dropped afterwards.
  */
+/**
+ * A pop the browser has already animated: the stack's screens take their new
+ * places without a transition (styles.css, `data-sb-instant`) for the frames
+ * the change lands in.
+ */
+function settleWithoutTransition(stack: HTMLElement): void {
+  stack.dataset['sbInstant'] = '';
+  requestAnimationFrame(() => requestAnimationFrame(() => delete stack.dataset['sbInstant']));
+}
+
 function animatePop(stack: HTMLElement, screen: HTMLElement): void {
   const clone = ghostClone(screen);
   clone.removeAttribute('inert');

package/src/styles.css

@@ -1065,6 +1065,13 @@ svg[data-sb-symbol="progress.indicator"] > line:nth-child(8) { animation-delay:
   animation: sb-nav-push 0.4s var(--sb-nav-easing) both;
 }
 
+/* A pop the browser has animated already (its back swipe, renderer.ts
+   popWithoutAnimation): the uncovered screen takes its place at once. */
+.sb-navstack[data-sb-instant] > .sb-slot > .sb-navscreen,
+.sb-navstack[data-sb-instant] > .sb-slot > .sb-navscreen::after {
+  transition: none !important;
+}
+
 .sb-navstack > .sb-navscreen--pop {
   z-index: 2;
   pointer-events: none;