react-x11 2.18.1 → 2.18.2

package/package.json

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

package/src/cocoa/app.js

@@ -85,6 +85,17 @@ const SCREEN_POLL_MS = 500;
 // have finished moving the window (`_recheckScreens`).
 const SCREEN_RECHECK_MS = 1000;
 
+/** One frame callback; a throw is reported, not allowed to end the tick. */
+function runFrame(entry, now) {
+  try {
+    entry.cb(now);
+  } catch (err) {
+    queueMicrotask(() => {
+      throw err;
+    });
+  }
+}
+
 export class CocoaApp {
   constructor(native, options = {}) {
     this._native = native;
@@ -92,7 +103,7 @@ export class CocoaApp {
     // CocoaWindow._key -> CocoaWindow: the number, or on a worker the handle
     this._windows = new Map();
     this._grabWindow = null;
-    this._rafQueue = []; // [{ cb, wnd }]
+    this._rafQueue = []; // [{ cb, wnd, surface }]
     // the app's own frame clock, for a frame no window owns (a pane's)
     this._rafLast = 0;
     // an explicit interval applies to every window; null means each
@@ -843,8 +854,8 @@ export class CocoaApp {
    * paced claim (src/pacing.js) land at its wait rather than at its wait
    * rounded up to the pump.
    */
-  _requestFrame(cb, wnd = null) {
-    this._rafQueue.push({ cb, wnd });
+  _requestFrame(cb, wnd = null, surface = false) {
+    this._rafQueue.push({ cb, wnd, surface });
     if ((this._pump || this._threaded) && this._rafQueue.length === 1) {
       const now = performance.now();
       this._armFrameTimer(Math.max(1, this._frameWait(wnd ?? this, now)), now);
@@ -947,6 +958,14 @@ export class CocoaApp {
     const queue = this._rafQueue;
     this._rafQueue = [];
     let soonest = Infinity;
+    // A `<glarea>`'s frames, due in this tick, run after every window's
+    // own: its children are laid out, painted and presented in the window's
+    // flush, so a GL frame drawn ahead of that flush reached the screen
+    // under the overlay of the frame before — for as long as the flush took,
+    // which is more than a display frame when the change costs layout
+    // (issue #641). The Wayland backend orders them the same way
+    // (`requestSurfaceFrame`).
+    const surfaces = [];
     for (const entry of queue) {
       // A window whose last flip has not reached its layer yet (threaded
       // mode's fence, `CocoaWindow.frameInFlight`) waits before
@@ -974,14 +993,10 @@ export class CocoaApp {
         this._rafQueue.push(entry);
         continue;
       }
-      try {
-        entry.cb(now);
-      } catch (err) {
-        queueMicrotask(() => {
-          throw err;
-        });
-      }
+      if (entry.surface) surfaces.push(entry);
+      else runFrame(entry, now);
     }
+    for (const entry of surfaces) runFrame(entry, now);
     this._armFrameTimer(soonest, now);
   }
 

package/src/cocoa/glarea.js

@@ -232,8 +232,9 @@ export class CocoaGLArea {
     for (const fn of this._listeners.get(name) ?? []) fn(ev);
   }
 
+  // on the owning window's clock, after its flush in the same tick (#641)
   requestAnimationFrame(cb) {
-    return this.parent.requestAnimationFrame(cb);
+    return this.parent.requestSurfaceFrame(cb);
   }
 
   /**

package/src/cocoa/panewindow.js

@@ -99,6 +99,11 @@ export class CocoaPaneWindow {
     return this.app._requestFrame(cb);
   }
 
+  /** A `<glarea>`'s frame, after this pane's own (`CocoaWindow`'s). */
+  requestSurfaceFrame(cb) {
+    return this.app._requestFrame(cb, null, true);
+  }
+
   /**
    * Whether the host may still be showing the frame before the last one —
    * the gate `flushPendingFrames` (src/frames.js) is written around: a

package/src/cocoa/window.js

@@ -915,6 +915,15 @@ export class CocoaWindow {
     return this.app._requestFrame(cb, this);
   }
 
+  /**
+   * A `<glarea>`'s frame: on this window's clock, and after this window's
+   * own frame in the tick that runs both, so the GL frame goes out after
+   * the overlay its children were painted on (src/cocoa/glarea.js).
+   */
+  requestSurfaceFrame(cb) {
+    return this.app._requestFrame(cb, this, true);
+  }
+
   /**
    * The earliest moment this window's clock will hand out another frame,
    * for a gate of `interval` ms — the display's period by default, which