@swiftbrowser/web 0.10.1 → 0.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.10.1",
+  "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,10 +52,18 @@ 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;
 
@@ -103,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 {
@@ -121,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);
   }
@@ -292,15 +304,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 +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()) {

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'));
 }