react-x11 2.45.0 → 2.45.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.45.0",
+  "version": "2.45.1",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "files": [

package/src/cocoa/glarea.js

@@ -11,7 +11,7 @@
 // What GlAreaNode needs from us is the child-"window" contract it already
 // speaks (src/glnodes.js): `createWindow({ parent, … })` answering an
 // object with `getContext('opengl', config)`, `setState(rect)`, `map()`,
-// `destroy()`, `requestAnimationFrame`. On X11 that child is a real X
+// `unmap()`, `destroy()`, `requestAnimationFrame`. On X11 that child is a real X
 // window stacked above the parent's drawing; here it is a sublayer of the
 // window's root layer with a high zPosition — the same "GL sits above the
 // 2D" semantics, by the same mechanism the platform gives us. The layer
@@ -153,6 +153,9 @@ export class CocoaGLArea {
       return layer;
     });
     this.rect = null;
+    // Ours to keep, because every `setState` writes the layer's whole prop
+    // set: a geometry change on a hidden surface must not show it again.
+    this._hidden = false;
     this.setState({
       x: options.x ?? 0,
       y: options.y ?? 0,
@@ -178,7 +181,7 @@ export class CocoaGLArea {
       // mirroring the layer is the flip, applied where the compositor is
       // already transforming instead of in anyone's shader.
       transform: { scaleY: -1 },
-      hidden: false,
+      hidden: this._hidden,
     });
     this._context?._resized(rect.width, rect.height);
   }
@@ -200,9 +203,22 @@ export class CocoaGLArea {
   }
 
   map() {
+    this._hidden = false;
     if (!this.destroyed) this._setLayerProps({ hidden: false });
   }
 
+  /**
+   * The other half of `map()`, which this surface went without: a layer is
+   * composited by the WindowServer rather than painted by the window, so a
+   * subtree going off the screen leaves it on screen over what replaced it.
+   * X11 and Wayland unmap the surface's window for this; here the layer's
+   * own `hidden` carries it.
+   */
+  unmap() {
+    this._hidden = true;
+    if (!this.destroyed) this._setLayerProps({ hidden: true });
+  }
+
   /**
    * Everything this layer is handed goes out with Core Animation's implicit
    * actions off. The layer is ours, not a presenter's, so no frame's

package/src/foreignnodes.js

@@ -488,18 +488,21 @@ export class ForeignNode extends Node {
     wnd.setBackgroundPixel(pixel);
   }
 
-  setHidden(hidden) {
-    super.setHidden(hidden);
+  /** The client's window is a window of the display system over this one,
+   *  so it follows the whole subtree's visibility — see
+   *  `GlAreaNode._syncSurfaceVisibility`, which answers the same call. */
+  _syncSurfaceVisibility() {
     this._syncMapped();
   }
 
-  /** The container follows `hidden`; the client follows the container,
-   * because an inferior of an unmapped window is not viewable however
-   * mapped it is itself. */
+  /** The container follows whether this subtree is on screen — this node's
+   * own `hidden` flag, or anything above it that took the subtree away; the
+   * client follows the container, because an inferior of an unmapped window
+   * is not viewable however mapped it is itself. */
   _syncMapped() {
     const wnd = this.socket?.window;
     if (!wnd) return;
-    if (this.hidden) wnd.unmap?.();
+    if (this._hiddenInTree()) wnd.unmap?.();
     else wnd.map?.();
   }
 

package/src/glnodes.js

@@ -324,6 +324,9 @@ export class GlAreaNode extends Node {
     // same zPosition. The window's hit test reads the list in that order
     // (`EventManager._surfaceAt`).
     this._joinSurfaces();
+    // A surface created inside a subtree that is already hidden — a tab
+    // mounted behind the one on screen — must not come up over it.
+    this._syncSurfaceVisibility();
     this.gl = wnd.getContext('opengl', config);
     // A buffer freed by the display is a frame that can be drawn again — for
     // a frame that was waiting for one. The Cocoa surface and the CGL
@@ -725,8 +728,15 @@ export class GlAreaNode extends Node {
     this.requestFrame();
   }
 
-  setHidden(hidden) {
-    super.setHidden(hidden);
+  /**
+   * The surface is a window of the display system, so it goes when the
+   * subtree does — `display: 'none'` anywhere above it, or React's own
+   * `hidden` for `<Activity>`/`<Suspense>`, on this node or on an ancestor.
+   * `Node._syncSurfaces` calls this for every route; the panes the children
+   * are drawn on follow the same answer.
+   */
+  _syncSurfaceVisibility() {
+    const hidden = this._hiddenInTree();
     if (hidden) this.window?.unmap?.();
     else this.window?.map?.();
     this._overlay?.setHidden(hidden);

package/src/nodes/node.js

@@ -860,12 +860,31 @@ export class Node {
     // window rather than for this subtree — the set is the handful of nodes
     // that declare an `animation`, and each one answers for itself.
     if (this.root?._loopNodes?.size) this.root._refreshLoops();
+    // Same funnel, same reason, one layer down: a surface — a `<glarea>`'s GL
+    // child, an embedded client's window — is a real window of the display
+    // system stacked above everything this window paints, not pixels in its
+    // 2d context. Hiding a subtree takes away its layout and its paint, and
+    // reaches a surface inside it through neither: it would stay on screen,
+    // over whatever is shown in its place, which is what a tab that keeps its
+    // screens mounted does every time it switches.
+    this._syncSurfaces();
     const events = this._focusManager();
     if (!events) return;
     if (visible) events.subtreeRevealed(this);
     else events.subtreeHidden(this);
   }
 
+  /**
+   * Ask every surface in this subtree — this node included — whether it is
+   * still on screen, and map or unmap it to match. Walked rather than kept
+   * in a registry because the subtree whose visibility just changed is
+   * exactly the scope, and all but two elements answer nothing.
+   */
+  _syncSurfaces() {
+    this._syncSurfaceVisibility?.();
+    for (const child of this.children) child._syncSurfaces?.();
+  }
+
   /**
    * Focus this node, as clicking it would: the owning window's focus moves
    * here, `onBlur` fires on whatever had it, `onFocus` here. Also pulls the

package/src/testing/harness.js

@@ -559,32 +559,50 @@ function restoreFrameClock() {
 }
 
 /**
- * Retry `fn` until it stops throwing, flushing between attempts.
+ * Retry `fn` until it stops throwing, flushing between attempts, and resolve
+ * with what it returned once that is on screen.
  *
  * The tool for anything whose arrival is not a single deterministic step:
  * an async rich-content reflow, an image decode, a timer, or a repaint whose
- * cause travelled through the X connection and back. Each attempt is
- * preceded by an `act()`, so waiting also *advances* — this is not a sleep
- * with a condition on it.
+ * cause travelled through the X connection and back. Each retry is preceded
+ * by an `act()`, so waiting also *advances* — this is not a sleep with a
+ * condition on it.
  *
  * ```js
  * await waitFor(async () => {
  *   assert.notDeepStrictEqual(await pixelAt(ctx, x, y), before);
  * });
+ * const row = await waitFor(() => screen.getByText('notes.txt'));
+ * await userEvent.click(row);
  * ```
+ *
+ * **The attempt that passes is followed by an `act()` too.** What it found
+ * can have arrived in the sleep before it — an fs read, a timer — and that
+ * commits outside act, on React's own scheduler, while the frame that lays
+ * it out runs on the window's clock, which need not have ticked since.
+ * Without it, a node it returned could have no rect yet, and the click after
+ * it would throw `has no laid-out rect yet` (#904). It follows whichever
+ * attempt passed, the first included, since the commit can land before
+ * `waitFor` is called. And it has to come after the attempt: an `act()`
+ * before each one leaves the same gap in its own closing round trip, after
+ * the frame it ran.
  */
 export async function waitFor(fn, { timeout = 2000, interval = 10 } = {}) {
   const deadline = Date.now() + timeout;
   let last;
   for (;;) {
+    let found;
     try {
-      return await fn();
+      found = await fn();
     } catch (err) {
       last = err;
+      if (Date.now() >= deadline) throw last;
+      await act();
+      await new Promise((resolve) => setTimeout(resolve, interval));
+      continue;
     }
-    if (Date.now() >= deadline) throw last;
     await act();
-    await new Promise((resolve) => setTimeout(resolve, interval));
+    return found;
   }
 }
 

package/src/testing/index.d.ts

@@ -174,6 +174,13 @@ export interface A11ySpy {
   uninstall(): void;
 }
 
+/**
+ * Testing Library's four families over the retained node tree: `getBy*`
+ * (exactly one, or throw), `queryBy*` (one or null), `getAllBy*` (one or
+ * more), and `findBy*` — `getBy*` under {@link waitFor}, with its options and
+ * defaults, so it retries until the node appears and resolves once a frame
+ * has laid it out.
+ */
 export interface Queries {
   getByText(text: string | RegExp, options?: TextMatchOptions): DrawnNode;
   getAllByText(text: string | RegExp, options?: TextMatchOptions): DrawnNode[];
@@ -339,7 +346,16 @@ export function setAppearance(values: PinnedAppearance): Promise<void>;
 /** Drain in-flight requests on a connection. */
 export function settle(app: NtkApp, roundTrips?: number): Promise<void>;
 
-/** Retry until it stops throwing, `act`-ing between attempts. */
+/**
+ * Retry until it stops throwing, `act`-ing between attempts — and once more
+ * after the attempt that passed, so what it resolves with is on screen: a
+ * node it found has been laid out, and a click on it lands.
+ *
+ * ```ts
+ * const row = await waitFor(() => screen.getByText('notes.txt'));
+ * await userEvent.click(row);
+ * ```
+ */
 export function waitFor<T>(
   fn: () => T | Promise<T>,
   options?: WaitOptions,

package/src/testing/queries.js

@@ -12,13 +12,13 @@
 //   getBy*    exactly one, or throw
 //   queryBy*  one or null, never throws — the way to assert absence
 //   getAllBy* one or more, or throw
-//   findBy*   getBy*, retried until it appears or the timeout expires
+//   findBy*   getBy* under waitFor: retried until it appears or the timeout
+//             expires, and laid out by the time it resolves
 
 import { queryAllByComponent, componentInventory } from './components.js';
+import { waitFor } from './harness.js';
 import { roleNameOf } from '../a11y.js';
 
-const DEFAULT_TIMEOUT = 1000;
-
 /** Depth-first, in paint order, including `<popup>` subtrees. */
 function walk(node, visit) {
   if (!node || node.destroyed) return;
@@ -97,20 +97,6 @@ function one(root, found, what, printTree = inventory) {
   );
 }
 
-async function retry(fn, { timeout = DEFAULT_TIMEOUT, interval = 20 } = {}) {
-  const deadline = Date.now() + timeout;
-  let last;
-  for (;;) {
-    try {
-      return fn();
-    } catch (err) {
-      last = err;
-      if (Date.now() >= deadline) throw last;
-      await new Promise((r) => setTimeout(r, interval));
-    }
-  }
-}
-
 /**
  * The queries, bound to a subtree. `within(node)` is this with a different
  * root; `screen` is this bound to whatever `renderX11` mounted last.
@@ -199,9 +185,12 @@ export function within(root) {
       if (found.length > 1) return one(root, found, label(args[0]));
       return found[0] ?? null;
     };
+    // Through waitFor rather than a loop of its own: what this resolves with
+    // has to be laid out, or a click on it throws, and waitFor is what runs
+    // the frame before resolving
     q[`find${suffix}`] = (...args) => {
       const options = args.length > 1 ? args[args.length - 1] : undefined;
-      return retry(() => q[`get${suffix}`](...args), options);
+      return waitFor(() => q[`get${suffix}`](...args), options);
     };
   }
   return q;