@swiftbrowser/web 0.10.1 → 0.10.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.10.1",
+  "version": "0.10.3",
   "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/browserHistory.ts

@@ -34,6 +34,8 @@
  * the entry and, once its animation ends, hides the live page until a new
  * frame is committed, so a pop that finished animating by then would stay
  * under the snapshot for Safari's 3 s watchdog, taking the touches unseen.
+ * A push is made at the renderer's `sb:precommit`, before the pushed screen
+ * is laid out (see `sync`), and this module never forces a layout.
  */
 import type { Renderer } from './renderer';
 
@@ -50,10 +52,28 @@ interface HistoryState {
 const stateOf = (value: unknown): HistoryState | null => (typeof value === 'object' && value !== null && (value as HistoryState).sbHistory === true ? (value as HistoryState) : null);
 
 function shown(win: Window, el: HTMLElement): boolean {
-  if (el.hidden || el.getClientRects().length === 0) return false;
+  if (!el.isConnected) return false;
+  // Style only, never layout: a layout forced here before a push would hand
+  // Safari the pushed screen's size for the entry it covers (see `sync`).
+  for (let node: HTMLElement | null = el; node; node = node.parentElement) {
+    if (node.hidden || win.getComputedStyle(node).display === 'none') return false;
+  }
   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';
+
 /** How long a back the browser made waits for the app to pop a level before what it shows is recorded as it is. */
 const DISMISS_WAIT_MS = 1000;
 
@@ -66,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;
   /**
@@ -103,13 +125,15 @@ export class BrowserHistory {
     if (!current) this.win.history.replaceState({ ...(this.win.history.state ?? {}), ...this.entry(0, this.selection()) }, '');
     this.watchReplaceState();
     this.renderer.interaction.nativeBackGesture = true;
+    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
     // levels already shown are pushed here and the first commit settles the rest.
-    this.sync(true);
+    this.sync('enabling');
   }
 
   dispose(): void {
@@ -121,8 +145,10 @@ export class BrowserHistory {
     this.landingUrl = null;
     this.syncOnArrival = false;
     this.unwatchReplaceState();
+    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 });
   }
 
   /**
@@ -220,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)
@@ -236,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;
     }
@@ -292,15 +323,31 @@ export class BrowserHistory {
     }
   }
 
-  private readonly onCommit = (): void => this.sync();
+  private readonly onPreCommit = (): void => this.sync('precommit');
+  private readonly onCommit = (): void => this.sync('commit');
 
-  /** After a commit: new levels get entries; levels the app dismissed itself take the history back with them; a moved sidebar selection is an entry too. `enabling`: nothing is drawn yet, so no level is taken as dismissed. */
-  sync(enabling = false): void {
+  /**
+   * New levels get entries; levels the app dismissed itself take the history
+   * back with them; a moved sidebar selection is an entry too.
+   *
+   * The entries are pushed at the `precommit`, before the renderer lays the
+   * new screen out, and nothing else happens then: Safari sizes the entry
+   * being left from the page's last layout at the push (its snapshot's
+   * render tree size, more than half of which the page must have again
+   * before the snapshot comes down after a swipe back to it), so a push
+   * after that layout counted the pushed screen into the entry it covers,
+   * and a root lighter than the screen over it stayed under the snapshot
+   * until Safari's 3 s watchdog after every swipe back. The rest waits for
+   * the `commit`, when the pass is drawn. `enabling`: nothing is drawn yet,
+   * so no level is taken as dismissed.
+   */
+  sync(stage: SyncStage = 'commit'): void {
     if (!this.enabled) return;
+    const dismissing = this.dismissing;
+    if (stage === 'precommit' && dismissing) return;
     const depth = this.depth();
     const recorded = this.recorded();
     const selection = this.selection();
-    const dismissing = this.dismissing;
     if (dismissing) {
       // Dismissing for a `popstate`: the entry already names the target depth.
       if (depth > dismissing.target && performance.now() < dismissing.until) {
@@ -320,7 +367,7 @@ export class BrowserHistory {
       }
       for (let level = recorded + 1; level <= depth; level++) this.win.history.pushState(this.entry(level, selection), '');
     } else if (depth < recorded) {
-      if (enabling) return;
+      if (stage !== 'commit') return;
       // The app popped or dismissed on its own (back button, swipe, code): leave those entries.
       this.go(depth - recorded, depth);
     } else if (this.movingTo === null && selection !== this.recordedSelection()) {
@@ -336,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;
@@ -350,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

@@ -5,9 +5,11 @@
  * element tree as `LayoutNode`s; id 0 is the root container supplied by the
  * host page. Every op is applied to the DOM immediately; at `commit` the
  * layout engine (src/layout) computes a frame for every element and
- * `layoutDom.ts` positions the elements absolutely from it (a `sb:commit`
- * CustomEvent is dispatched on the root so tests and tooling can observe pass
- * boundaries). Animated passes are handed to the `Animator`.
+ * `layoutDom.ts` positions the elements absolutely from it (a `sb:precommit`
+ * CustomEvent is dispatched on the root once the pass's ops are applied and
+ * before that layout, and a `sb:commit` after it, so the browser history,
+ * tests and tooling can observe pass boundaries). Animated passes are handed
+ * to the `Animator`.
  *
  * Most kinds are a single DOM element whose children are the element's
  * children. Compound kinds (`navstack`, `navscreen`, `section`, `toggle`,
@@ -1062,6 +1064,10 @@ export class Renderer {
           this.passRootRect = null;
           this.preSnapshots.clear();
           this.preRects.clear();
+          // Before the layout that first holds this pass's new screens: a
+          // history entry pushed here (browserHistory.ts) is sized by Safari
+          // from the page's last layout, without them.
+          this.root.dispatchEvent(new CustomEvent('sb:precommit', { detail: { commits: this.commits + 1 } }));
           const changes = this.layout();
           this.animator.commitNextFrame(pass, op.animation, changes);
           this.commits += 1;
@@ -1304,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;
 
@@ -2215,7 +2239,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);
@@ -3024,8 +3049,10 @@ function afterAnimation(target: HTMLElement, expectedMs: number, done: () => voi
 
 function animatePush(screen: HTMLElement): void {
   screen.classList.remove('sb-navscreen--push');
-  // Force a style flush so re-adding the class restarts the animation.
-  void screen.offsetWidth;
+  // Flush the style (not the layout: a layout forced here, with the screen
+  // just inserted, would size the history entry it covers by it, see
+  // browserHistory.ts) so re-adding the class restarts the animation.
+  void getComputedStyle(screen).animationName;
   screen.classList.add('sb-navscreen--push');
   afterAnimation(screen, NAV_TRANSITION_MS, () => screen.classList.remove('sb-navscreen--push'));
 }
@@ -3035,6 +3062,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;