@swiftbrowser/web 0.6.4 → 0.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@swiftbrowser/web",
-  "version": "0.6.4",
+  "version": "0.6.5",
   "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

@@ -469,6 +469,39 @@ export class Animator {
     this.playOwnFrames = options.playOwnFrames;
   }
 
+  /** Commits waiting for the next animation frame (`commitNextFrame`), in order. */
+  private pending: { pass: PassRecord; animation: Animation | undefined; frames: readonly FrameChange[] }[] = [];
+  private pendingFrame: number | null = null;
+
+  /**
+   * `commit` in the next animation frame's callback, before the frame
+   * paints. A commit reads what the pass just wrote (the updated elements'
+   * computed styles, the removed boxes' places): read in the pass, they
+   * make the browser lay its frames out once more; read in the frame's
+   * callback, they cost the frame its one layout and the tweens still start
+   * on it. In a hidden page nothing paints, so the commit runs now.
+   */
+  commitNextFrame(pass: PassRecord, animation: Animation | undefined, frames: readonly FrameChange[] = []): void {
+    if (typeof requestAnimationFrame !== 'function' || (typeof document !== 'undefined' && document.hidden)) {
+      this.flushCommits();
+      this.commit(pass, animation, frames);
+      return;
+    }
+    this.pending.push({ pass, animation, frames });
+    this.pendingFrame ??= requestAnimationFrame(() => this.flushCommits());
+  }
+
+  /** Run the commits waiting for the next frame now, in order. */
+  flushCommits(): void {
+    if (this.pendingFrame !== null) {
+      cancelAnimationFrame(this.pendingFrame);
+      this.pendingFrame = null;
+    }
+    const pending = this.pending;
+    this.pending = [];
+    for (const { pass, animation, frames } of pending) this.commit(pass, animation, frames);
+  }
+
   /** Computed values of the animated properties, or null when not rendered. */
   snapshot(el: HTMLElement): StyleSnapshot | null {
     if (!el.isConnected) return null;
@@ -558,14 +591,25 @@ export class Animator {
       return false;
     };
 
+    // The animation of the token root `el`, found `depth` levels up.
+    const rootAnimation = (el: HTMLElement, depth: number): Animation | undefined | false => {
+      // (below an item of a group the bar's own spring moves: not animated)
+      if (groupsOnly.has(el) && depth > 1) return false;
+      return tokenRoots.get(el) ?? { type: 'default' };
+    };
     const animationFor = (chain: Iterable<HTMLElement>): Animation | undefined | false => {
       let depth = 0;
       for (const el of chain) {
-        if (tokenRoots.has(el)) {
-          // (below an item of a group the bar's own spring moves: not animated)
-          if (groupsOnly.has(el) && depth > 1) return false;
-          return tokenRoots.get(el) ?? { type: 'default' };
-        }
+        if (tokenRoots.has(el)) return rootAnimation(el, depth);
+        depth++;
+      }
+      return commitAnimation ?? false;
+    };
+    // The same for an element in the page, up its ancestors (no chain built).
+    const animationAt = (el: HTMLElement): Animation | undefined | false => {
+      let depth = 0;
+      for (let node: HTMLElement | null = el; node; node = node.parentElement) {
+        if (tokenRoots.has(node)) return rootAnimation(node, depth);
         depth++;
       }
       return commitAnimation ?? false;
@@ -574,7 +618,7 @@ export class Animator {
     // Style changes.
     for (const [el, rec] of pass.updated) {
       if (!rec.before || !el.isConnected || hidden(el)) continue;
-      const animation = animationFor(ancestorsAndSelf(el));
+      const animation = animationAt(el);
       if (animation === false) continue;
       this.animateChanges(el, rec.before, animation);
     }
@@ -583,7 +627,7 @@ export class Animator {
     if (this.playOwnFrames) {
       for (const el of pass.updated.keys()) {
         if (!el.isConnected || hidden(el)) continue;
-        const animation = animationFor(ancestorsAndSelf(el));
+        const animation = animationAt(el);
         if (animation !== false) this.playOwnFrames(el, animation);
       }
     }
@@ -602,7 +646,7 @@ export class Animator {
         this.retargetFrame(change, null);
         continue;
       }
-      let animation = animationFor(ancestorsAndSelf(el));
+      let animation = animationAt(el);
       if (animation === false && change.kind === BAR_GLASS_KIND && glassScreens.has(el.parentElement)) {
         animation = TOOLBAR_ANIMATION;
       }
@@ -659,7 +703,7 @@ export class Animator {
       if (!el.isConnected || pass.updated.has(el)) continue;
       if (hasAncestorIn(el, pass.inserted) || hidden(el)) continue;
       if (this.selfAnimating.has(el.dataset['sbKind'] ?? '')) continue;
-      const animation = animationFor(ancestorsAndSelf(el));
+      const animation = animationAt(el);
       if (animation === false) continue;
       this.enter(el, transitionOf(el) ?? implicitTransitionOf(el), animation);
     }
@@ -667,7 +711,7 @@ export class Animator {
     // Content transitions: the old text leaves as the new one arrives.
     for (const change of pass.contentChanges) {
       if (!change.el.isConnected || hidden(change.el)) continue;
-      const animation = animationFor(ancestorsAndSelf(change.el));
+      const animation = animationAt(change.el);
       if (animation === false) continue;
       this.transitionContent(change, animation);
     }
@@ -999,10 +1043,6 @@ export function transitionOf(root: HTMLElement): Transition | undefined {
   return undefined;
 }
 
-function* ancestorsAndSelf(el: HTMLElement): Generator<HTMLElement> {
-  for (let node: HTMLElement | null = el; node; node = node.parentElement) yield node;
-}
-
 function hasAncestorIn(el: HTMLElement, set: ReadonlySet<HTMLElement>): boolean {
   for (let node = el.parentElement; node; node = node.parentElement) {
     if (set.has(node)) return true;

package/src/largeTitle.ts

@@ -20,7 +20,7 @@
 
 import type { Rect } from './layout';
 import { edgeStrength, setProperty, setValue } from './scrollEdge';
-import { runScrollSync, type ScrollSync } from './scrollSync';
+import { runScrollSync, scrollTopOf, type ScrollSync } from './scrollSync';
 
 /** The scroll offset past which the title has gone under the bar. */
 const COLLAPSE_OFFSET = 44;
@@ -109,7 +109,7 @@ export function syncScrollUnderBar(scroller: HTMLElement): void {
 /** The sync as a read (`scrollTop`) and the writes from it (scrollSync.ts). */
 function scrollUnderBarSync(scroller: HTMLElement): ScrollSync<number | null> {
   return {
-    measure: () => (scroller.dataset['sbUnderBar'] === undefined || !screenOf(scroller) ? null : scroller.scrollTop),
+    measure: () => (scroller.dataset['sbUnderBar'] === undefined || !screenOf(scroller) ? null : scrollTopOf(scroller)),
     apply: (offset) => {
       const screen = screenOf(scroller);
       if (offset === null || !screen) return;

package/src/layoutDom.ts

@@ -42,7 +42,7 @@ import { bitmapLaidOut } from './bitmaps';
 import { drawRichText } from './richText';
 import { bindScrollUnderBar, largeTitleOf, largeTitleScrolls } from './largeTitle';
 import { bindScrollEdgeBottom } from './scrollEdge';
-import { beginScrollSyncBatch, flushScrollSyncBatch } from './scrollSync';
+import { beginScrollSyncBatch, flushScrollSyncBatch, type ScrollExtent } from './scrollSync';
 import { BAR_GLASS_KIND, TOOLBAR_ANIMATION, TOOLBAR_TRANSITION, baseTiming, timingFor, transitionStart } from './animation';
 
 export interface LayoutDomContext {
@@ -696,19 +696,22 @@ function applyChrome(
     case 'list': {
       const content = el.querySelector<HTMLElement>(':scope > .sb-list-content');
       const size = result.contentSizes.get(node.id);
+      let extent: ScrollExtent | undefined;
       if (content && size) {
         content.style.width = `${size.width}px`;
         // Extra scrollable space at the end (the engine's frames are unchanged).
         content.style.height = `${size.height + bottomInset}px`;
+        extent = { content: size.height + bottomInset, viewport: frame.height };
       }
       bindScrollUnderBar(el, frame, chrome?.['topInset'], chrome?.['largeTitle']);
-      bindScrollEdgeBottom(el, chrome?.['bottomInset']);
+      bindScrollEdgeBottom(el, chrome?.['bottomInset'], extent);
       return;
     }
     case 'scrollview': {
       const content = el.querySelector<HTMLElement>(':scope > .sb-scroll-content');
       const size = result.contentSizes.get(node.id);
       const rect = chrome?.['content'];
+      let extent: ScrollExtent | undefined;
       if (content && size) {
         const s = content.style;
         const axes = String(node.props['axes'] ?? 'vertical');
@@ -726,9 +729,12 @@ function applyChrome(
         s.marginTop = `${rect ? rect.y - frame.y : 0}px`;
         el.style.scrollPaddingLeft = before ? `${before}px` : '';
         el.style.scrollPaddingRight = after ? `${after}px` : '';
+        if (axes !== 'horizontal') {
+          extent = { content: (rect ? rect.y - frame.y : 0) + size.height + bottomInset, viewport: frame.height };
+        }
       }
       bindScrollUnderBar(el, frame, chrome?.['topInset'], chrome?.['largeTitle']);
-      bindScrollEdgeBottom(el, String(node.props['axes'] ?? 'vertical') === 'horizontal' ? undefined : chrome?.['bottomInset']);
+      bindScrollEdgeBottom(el, String(node.props['axes'] ?? 'vertical') === 'horizontal' ? undefined : chrome?.['bottomInset'], extent);
       return;
     }
     case 'navscreen': {

package/src/renderer.ts

@@ -157,6 +157,7 @@ import { HoverTracker, applyPointerAndEffects, safeAreaOverlap } from './pointer
 import { colorMultiplyFilter } from './colorMultiply';
 import { largeTitleOf } from './largeTitle';
 import { applyEdgeEffect } from './scrollEdge';
+import { discardScrollOffsets, readScrollOffsets, trackScroller } from './scrollSync';
 import { DEFAULT_TYPE_SIZE, TEXT_STYLE_WEIGHT, resolveTextStyle, textStyleVar } from './typography';
 
 export type EventCallback = (event: RendererEvent) => void;
@@ -413,6 +414,8 @@ export class Renderer {
   private pendingMenu: { anchor: HTMLElement; id: ElementId; kind: 'menu' | 'contextmenu' } | null = null;
   /** Size last reported for every `geometry` element (whole px). */
   private readonly reportedGeometry = new Map<ElementId, { width: number; height: number; key: string }>();
+  /** The elements whose size is reported (`geometry`, or `reportsSize` props): what `collectGeometry` visits. */
+  private readonly geometryReporters = new Set<ElementId>();
   /** `geometry` and `layout` events collected by layout passes, sent once the ops are applied. */
   private pendingGeometry: (GeometryEvent | LayoutEvent)[] = [];
   /** Phase 6: dedupes `layout` events per element (src/layoutEvents.ts). */
@@ -938,11 +941,16 @@ export class Renderer {
 
   /** Apply a batch of ops in order. Throws `RendererError` on an invalid op. */
   applyOps(ops: readonly Op[]): void {
+    // The scroll views' offsets, read while nothing is waiting to be laid
+    // out: the pass's syncs use them (scrollSync.ts) instead of reading
+    // after its writes.
+    if (this.applying === 0 && ops.length > 0) readScrollOffsets();
     this.applying += 1;
     try {
       this.applyAll(ops);
     } finally {
       this.applying -= 1;
+      if (this.applying === 0) discardScrollOffsets();
     }
     // Geometry events go out after the whole batch (one batch per layout
     // pass); Swift's answer re-enters `applyOps` with the next pass.
@@ -986,7 +994,7 @@ export class Renderer {
           this.preSnapshots.clear();
           this.preRects.clear();
           const changes = this.layout();
-          this.animator.commit(pass, op.animation, changes);
+          this.animator.commitNextFrame(pass, op.animation, changes);
           this.commits += 1;
           this.syncFocus();
           this.performScrolls(op.animation != null);
@@ -1087,6 +1095,7 @@ export class Renderer {
     this.preRects.clear();
     this.closeMenu();
     this.reportedGeometry.clear();
+    this.geometryReporters.clear();
     this.layoutReporter.clear();
     this.pendingGeometry = [];
     refreshSheets(this.root);
@@ -1260,8 +1269,9 @@ export class Renderer {
    */
   private collectGeometry(result: LayoutResult, framesOnly = false): void {
     let rootRect: DOMRect | null = null;
-    for (const [id, node] of this.nodes) {
-      if (node.kind !== 'geometry' && node.props['reportsSize'] !== true) continue;
+    for (const id of this.geometryReporters) {
+      const node = this.nodes.get(id);
+      if (!node) continue;
       const reportsFrame = node.props['reportsFrame'] === true;
       if (framesOnly && !reportsFrame) continue;
       const frame = result.frames.get(id);
@@ -1522,8 +1532,10 @@ export class Renderer {
     el.dataset[KIND_ATTR] = kind;
     this.elements.set(id, el);
     this.nodes.set(id, { id, kind, props: asRecord(props), children: [] });
+    if (kind === 'geometry' || (props as { reportsSize?: unknown }).reportsSize === true) this.geometryReporters.add(id);
     applyProps(el, kind, props, this.assets);
     this.noteScroll(id, kind, props);
+    if (kind === 'list' || kind === 'scrollview') trackScroller(el);
     if (kind === 'lazyspacer') this.lazySpacers.add(id);
     if (kind === 'host') {
       this.hosts.add(id);
@@ -1647,8 +1659,11 @@ export class Renderer {
       // Another Swift view now reads this element's size (a `geometry`
       // element kept for a new page's reader): it knows no size yet, so the
       // next layout pass reports the size even when it is unchanged.
-      if ((kind === 'geometry' || next['reportsSize'] === true) && next['reader'] !== node.props['reader']) {
-        this.reportedGeometry.delete(id);
+      if (kind === 'geometry' || next['reportsSize'] === true) {
+        this.geometryReporters.add(id);
+        if (next['reader'] !== node.props['reader']) this.reportedGeometry.delete(id);
+      } else {
+        this.geometryReporters.delete(id);
       }
       node.props = next;
       // Phase 9: the next layout re-measures this subtree and its ancestors;
@@ -1883,6 +1898,7 @@ export class Renderer {
     this.boxes.delete(id);
     this.dirty.delete(id);
     this.reportedGeometry.delete(id);
+    this.geometryReporters.delete(id);
     this.layoutReporter.forget(id);
     const node = this.nodes.get(id);
     const parentId = this.parents.get(id);

package/src/scrollEdge.ts

@@ -17,7 +17,7 @@
 
 import type { EdgeEffectProps } from './protocol';
 import type { Rect } from './layout';
-import { runScrollSync, type ScrollSync } from './scrollSync';
+import { runScrollSync, scrollTopOf, type ScrollExtent, type ScrollSync } from './scrollSync';
 
 /**
  * How far content has to be under a bar for its edge effect to be at full
@@ -59,9 +59,10 @@ function ownerOf(scroller: HTMLElement): HTMLElement | null {
 
 /**
  * Called for every list and scroll view the layout reaches with the engine's
- * `bottomInset` rect (absent when no bar covers its bottom).
+ * `bottomInset` rect (absent when no bar covers its bottom) and the extent
+ * the pass gave it, so the sync needs no scroll metric the writes change.
  */
-export function bindScrollEdgeBottom(scroller: HTMLElement, covered: Rect | undefined): void {
+export function bindScrollEdgeBottom(scroller: HTMLElement, covered: Rect | undefined, extent?: ScrollExtent): void {
   const owner = ownerOf(scroller);
   if (covered === undefined || covered.height <= 0) {
     if (scroller.dataset['sbUnderBottom'] !== undefined) delete scroller.dataset['sbUnderBottom'];
@@ -74,20 +75,23 @@ export function bindScrollEdgeBottom(scroller: HTMLElement, covered: Rect | unde
     bound.add(scroller);
     scroller.addEventListener('scroll', () => syncScrollEdgeBottom(scroller), { passive: true });
   }
-  syncScrollEdgeBottom(scroller);
+  syncScrollEdgeBottom(scroller, extent);
 }
 
-export function syncScrollEdgeBottom(scroller: HTMLElement): void {
-  runScrollSync(scrollEdgeBottomSync(scroller));
+export function syncScrollEdgeBottom(scroller: HTMLElement, extent?: ScrollExtent): void {
+  runScrollSync(scrollEdgeBottomSync(scroller, extent));
 }
 
 /** The sync as a read (the scroll metrics) and the writes from it (scrollSync.ts). */
-function scrollEdgeBottomSync(scroller: HTMLElement): ScrollSync<number | null> {
+function scrollEdgeBottomSync(scroller: HTMLElement, extent: ScrollExtent | undefined): ScrollSync<number | null> {
+  // Content is under the bar until the end has scrolled clear of it (the
+  // inset is room past the content's end). From a layout pass the lengths
+  // are the pass's own; from a scroll event they are read.
+  const remaining = extent
+    ? () => Math.max(extent.content, extent.viewport) - extent.viewport - scrollTopOf(scroller)
+    : () => scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop;
   return {
-    // Content is under the bar until the end has scrolled clear of it (the
-    // inset is room past the content's end).
-    measure: () =>
-      scroller.dataset['sbUnderBottom'] === undefined || !ownerOf(scroller) ? null : scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop,
+    measure: () => (scroller.dataset['sbUnderBottom'] === undefined || !ownerOf(scroller) ? null : remaining()),
     apply: (remaining) => applyScrollEdgeBottom(scroller, remaining),
   };
 }

package/src/scrollSync.ts

@@ -1,12 +1,20 @@
 /**
- * Scroll-state syncs batched into one read phase.
+ * Scroll-state syncs batched into one read phase, before the pass writes.
  *
  * Binding a scroll view's under-bar and bottom-edge state (largeTitle.ts,
  * scrollEdge.ts) reads its scroll metrics and writes flags from them. Done
  * in the middle of a layout pass, each read follows DOM writes and forces
  * the browser to lay out again (six times on a split-view toggle with three
  * lists). While a batch is open the syncs are queued instead, and `flush`
- * measures all of them before applying any, so they share one layout.
+ * measures all of them before applying any.
+ *
+ * The one metric the pass cannot know, the scroll offset, is read for every
+ * scroll view when the batch opens, before any frame is written: a frame
+ * does not move the offset, so the read costs the layout of what the ops
+ * changed rather than of every frame the pass applied. (A pass that makes
+ * the content shorter than the offset has the browser clamp it afterwards,
+ * which fires `scroll`, and the sync on it catches up.) The extents the
+ * frames change are the pass's own numbers (`ScrollExtent`).
  */
 
 export interface ScrollSync<T> {
@@ -14,7 +22,46 @@ export interface ScrollSync<T> {
   apply(value: T): void;
 }
 
+/** A scroll view's content and viewport lengths on its axis, as the pass sets them. */
+export interface ScrollExtent {
+  content: number;
+  viewport: number;
+}
+
 let batch: ScrollSync<unknown>[] | null = null;
+const scrollers = new Set<HTMLElement>();
+let offsets: Map<HTMLElement, number> | null = null;
+
+/** Reads this scroll view's offset before each pass (a view made in a pass starts at 0). */
+export function trackScroller(scroller: HTMLElement): void {
+  scrollers.add(scroller);
+  if (offsets && !offsets.has(scroller)) offsets.set(scroller, 0);
+}
+
+/**
+ * Reads every tracked scroll view's offset: the renderer calls this before a
+ * pass's first op touches the page, where nothing is waiting to be laid out.
+ */
+export function readScrollOffsets(): void {
+  offsets = new Map();
+  for (const scroller of scrollers) {
+    if (!scroller.isConnected) {
+      scrollers.delete(scroller);
+      continue;
+    }
+    offsets.set(scroller, scroller.scrollTop);
+  }
+}
+
+/** Forgets the offsets read for a pass (a pass that did not lay out). */
+export function discardScrollOffsets(): void {
+  offsets = null;
+}
+
+/** The scroll offset read when the batch opened, else read now. */
+export function scrollTopOf(scroller: HTMLElement): number {
+  return offsets?.get(scroller) ?? scroller.scrollTop;
+}
 
 /** Run `sync` now, or queue it while a batch is open. */
 export function runScrollSync<T>(sync: ScrollSync<T>): void {
@@ -22,15 +69,21 @@ export function runScrollSync<T>(sync: ScrollSync<T>): void {
   else sync.apply(sync.measure());
 }
 
+/** Opens a batch, reading the offsets now unless the pass read them before its writes. */
 export function beginScrollSyncBatch(): void {
   batch ??= [];
+  if (!offsets) readScrollOffsets();
 }
 
 /** Measure every queued sync, then apply them all; closes the batch. */
 export function flushScrollSyncBatch(): void {
   const queued = batch;
   batch = null;
-  if (!queued) return;
+  if (!queued) {
+    discardScrollOffsets();
+    return;
+  }
   const values = queued.map((sync) => sync.measure());
+  discardScrollOffsets();
   queued.forEach((sync, i) => sync.apply(values[i]));
 }