@swiftbrowser/web 0.10.3 → 0.10.4

package/package.json

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

@@ -2231,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;