@swiftbrowser/web 0.10.0 → 0.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "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,14 +52,31 @@ 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';
 }
 
+/** 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;
+
 export class BrowserHistory {
   private readonly win: Window;
-  /** Levels the latest `popstate` still asks to dismiss, one commit at a time. */
-  private pendingPops = 0;
+  /**
+   * A back the browser made, while the app pops to it: the depth the entry
+   * names, the depth the latest dismissal started from, and until when the
+   * app's pop is waited for. A pop can take more than one commit (a compact
+   * 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;
   /** `popstate` events to ignore: the ones our own `history.go` causes. */
   private ignorePops = 0;
   /**
@@ -94,13 +113,14 @@ 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);
     // 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 {
@@ -112,6 +132,7 @@ 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);
   }
@@ -205,6 +226,15 @@ export class BrowserHistory {
     return top ? Number(top.dataset['sbDepth'] ?? '0') || 0 : 0;
   }
 
+  /** Dismisses the level above `depth` for the back in progress, and waits for the app's pop. */
+  private dismissFrom(depth: number): void {
+    const dismissing = this.dismissing;
+    if (!dismissing) return;
+    dismissing.from = depth;
+    dismissing.until = performance.now() + DISMISS_WAIT_MS;
+    if (!this.dismissOne()) 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 {
     const sheets = this.sheets();
@@ -274,21 +304,40 @@ 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();
-    if (this.pendingPops > 0) {
+    if (dismissing) {
       // Dismissing for a `popstate`: the entry already names the target depth.
-      if (depth > recorded) {
-        if (!this.dismissOne()) this.pendingPops = 0;
-        else this.pendingPops -= 1;
-      } else this.pendingPops = 0;
-      return;
+      if (depth > dismissing.target && performance.now() < dismissing.until) {
+        // The latest dismissal landed: the next level. Otherwise the app has not popped yet.
+        if (depth < dismissing.from) this.dismissFrom(depth);
+        return;
+      }
+      // Arrived, or the app kept the level (it is then recorded as any other).
+      this.dismissing = null;
     }
     if (depth > recorded) {
       // Under our own pending `go`, a push would land relative to wherever the browser is when it runs (and
@@ -299,7 +348,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()) {
@@ -326,11 +375,12 @@ export class BrowserHistory {
     // The browser moved on its own (a swipe, a button): keep painting past its transition.
     this.renderer.keepRepainting();
     const depth = this.depth();
+    // 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 commit lands.
-      this.pendingPops = depth - target.sbDepth;
-      if (!this.dismissOne()) this.pendingPops = 0;
-      else this.pendingPops -= 1;
+      // Back: dismiss one level now, the rest as each pop lands.
+      this.dismissing = { target: target.sbDepth, from: depth, until: 0 };
+      this.dismissFrom(depth);
     } else if (target.sbDepth > depth) {
       // Forward: a screen cannot be re-pushed; return to the entry that matches.
       this.go(depth - target.sbDepth, depth);

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;
@@ -3024,8 +3030,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'));
 }