react-x11 2.15.3 → 2.16.0

package/src/cocoa/presenter.js

@@ -480,9 +480,21 @@ export function propBoxProps(node, app, scale, parentOrigin, order) {
     backgroundColor: colour(style.backgroundColor),
     borderWidth: border / scale,
     borderColor: colour(style.borderColor),
+    opacity: layerOpacity(style),
   };
 }
 
+/**
+ * `opacity` as a layer's own. On the layer presenter a node's children are
+ * its sublayers, so this fades the subtree with it; the bitmap paths draw
+ * the group themselves and never promote a faded box.
+ */
+export function layerOpacity(style) {
+  const value = style?.opacity;
+  if (typeof value !== 'number' || Number.isNaN(value)) return 1;
+  return Math.min(1, Math.max(0, value));
+}
+
 // --- animations the render server runs ---------------------------------------
 //
 // The node model keeps deciding what is animating and when it ends
@@ -586,6 +598,10 @@ export class LayerAnimations {
         opts.timing = EASING_CONTROL_POINTS[entry.easing];
         opts.repeat = Infinity;
         opts.autoreverse = entry.alternate;
+        // CA's two halves of one CSS delay: a begin time the layer waits
+        // for showing `from`, or a time offset that starts it that far in
+        if (entry.delay > 0) opts.delay = entry.delay / 1000;
+        else if (entry.delay < 0) opts.timeOffset = -entry.delay / 1000;
       } else if (map.colour) {
         // From where the pixels are — which is what "an interrupted
         // transition reverses from where it got to" means here. A colour
@@ -1112,6 +1128,7 @@ export class CocoaLayerPresenter {
       ],
       zPosition: order,
       hidden: Boolean(node.hidden),
+      opacity: layerOpacity(node.style),
       // the layer covers the ink bounds; clipping (if any) belongs to the
       // CONTENT box, which a raster self cannot express — scrolling
       // containers that also raster keep clipping via a child guard below

package/src/cocoa/promotion.js

@@ -154,6 +154,25 @@ function insideGlArea(node) {
   return false;
 }
 
+const faded = (style) => style?.opacity !== undefined && !(style.opacity >= 1);
+
+/**
+ * A box whose `opacity` is below 1, now or on its way there, is a group the
+ * bitmap composites (`NodePaint._paintGroup`) — the box and everything in it
+ * drawn once and faded as one. On a layer of its own the box and its content
+ * would be separate layers under the one opacity, fading one over the other,
+ * and an opacity the frame clock is still animating would never reach the
+ * layer at all.
+ */
+function fadesAsGroup(node) {
+  return (
+    faded(node.style) ||
+    faded(node._targetStyle) ||
+    Boolean(node._anim?.has('opacity')) ||
+    Boolean(node._loops?.some((loop) => loop.prop === 'opacity'))
+  );
+}
+
 /**
  * Can this node be a property box on a layer at all — the static half of
  * the answer, the same whatever the scene around it does: a plain box by
@@ -163,6 +182,7 @@ function insideGlArea(node) {
 function promotableNode(node) {
   if (node.destroyed || !plainBox(node)) return false;
   if (insideGlArea(node)) return false;
+  if (fadesAsGroup(node)) return false;
   if (!stylePaintsPlain(node, node._targetStyle ?? node.style)) return false;
   if (node.isScroller?.()) return false;
   return !paintsOutline(node);

package/src/cocoa/relaunch.js

@@ -181,11 +181,16 @@ export function relaunch(entry, native) {
   // the package's own would be a second one the bundler never emits. The
   // worker sets itself up when it imports react-x11 (`bootstrapWorker`,
   // src/bootstrap.js), recognising the shared state in its workerData.
-  // execArgv carries a loader like `--import tsx`, which is what lets the
-  // worker load a .jsx entry at all.
+  //
+  // No `execArgv`: a Worker given none inherits the node flags the process
+  // started with, and among them a loader like `--import tsx`, which is what
+  // lets the worker load a .jsx entry at all. Handed `process.execArgv`
+  // instead, it refuses the whole list over one V8 or process-wide flag —
+  // `--expose-gc`, `--max-old-space-size`, `--title` — which the worker
+  // would have had anyway, since those hold for every thread: it gets `gc`
+  // either way (measured, Node 20–26; Bun treats the two the same).
   new Worker(entry, {
     argv: process.argv.slice(2),
-    execArgv: process.execArgv,
     env: SHARE_ENV,
     workerData: { reactX11State: state.buffer },
   });

package/src/cocoa/symbols.js

@@ -0,0 +1,64 @@
+// SF Symbols for the Cocoa backend (#591): `app.symbols`, the provider
+// `<image src={{ symbol }}>` asks (src/symbols.js), over `@windowkit/appkit`'s
+// `symbolSize` and `ctxDrawSymbol` (0.12.0).
+//
+// A symbol is a template — its shape, in whatever colour it is drawn with —
+// so it is drawn the way a glyph run is: in the context's fill colour, through
+// its transform and clip. Sizes are points, which on this backend are logical
+// pixels.
+
+import { warnOnce } from '../symbols.js';
+
+export class CocoaSymbols {
+  constructor(native) {
+    this.native = native;
+    this.sizes = new Map(); // name and options -> { width, height } | null
+  }
+
+  /** Whether the bridge draws symbols at all. Without the verbs nothing is
+   *  shown and nothing else goes wrong, so development says so, once. */
+  _available() {
+    if (typeof this.native?.ctxDrawSymbol === 'function') return true;
+    warnOnce(
+      'react-x11: this @windowkit/appkit has no ctxDrawSymbol, so <image ' +
+        'src={{ symbol }}> shows nothing on the Cocoa backend. Update ' +
+        '@windowkit/appkit to the version react-x11 lists in its ' +
+        'optionalDependencies.',
+    );
+    return false;
+  }
+
+  size(name, options) {
+    if (!this._available()) return null;
+    const bridge = bridgeOptions(options);
+    const key = JSON.stringify([name, bridge]);
+    if (!this.sizes.has(key)) {
+      if (this.sizes.size > 512) this.sizes.clear();
+      this.sizes.set(key, this.native.symbolSize(name, bridge));
+    }
+    return this.sizes.get(key);
+  }
+
+  draw(ctx, name, rect, options) {
+    if (typeof ctx.drawSymbol !== 'function' || !this._available()) {
+      return false;
+    }
+    ctx.fillStyle = options.color;
+    return ctx.drawSymbol(
+      name,
+      rect.x,
+      rect.y,
+      rect.width,
+      rect.height,
+      bridgeOptions(options),
+    );
+  }
+}
+
+/** What the bridge is handed: the options it knows, and only those set. */
+const bridgeOptions = ({ pointSize, weight, scale, variableValue }) => ({
+  pointSize,
+  weight,
+  ...(scale === undefined ? {} : { scale }),
+  ...(variableValue === undefined ? {} : { variableValue }),
+});

package/src/cocoa/threaded.js

@@ -188,10 +188,23 @@ export function fdStream(fd, write = fs.writeSync) {
 /**
  * Stdout and stderr on fds 1 and 2, and a console over them — the console
  * too, because Bun's writes past `process.stdout` altogether.
+ *
+ * A `Console` is only the writing half of the runtime's console. Node adds
+ * the inspector's methods on top — `timeStamp`, `profile`, `profileEnd`,
+ * `context`, `createTask` — and `console.Console`, so the new console takes
+ * whatever it lacks from the one it replaces, as it is. Code that loaded
+ * before this saw them: React's development reconciler asks once, as it
+ * loads, whether `console.timeStamp` is a function, and calls it on every
+ * render after, so a script importing `react-x11/test` ahead of `react-x11`
+ * threw `console.timeStamp is not a function` on its first render.
  */
-export function installStdio(proc = process, global = globalThis) {
-  const stdout = fdStream(1);
-  const stderr = fdStream(2);
+export function installStdio(
+  proc = process,
+  global = globalThis,
+  write = fs.writeSync,
+) {
+  const stdout = fdStream(1, write);
+  const stderr = fdStream(2, write);
   Object.defineProperty(proc, 'stdout', {
     configurable: true,
     get: () => stdout,
@@ -200,10 +213,17 @@ export function installStdio(proc = process, global = globalThis) {
     configurable: true,
     get: () => stderr,
   });
+  const runtime = global.console;
+  const ours = new Console({ stdout, stderr });
+  for (const key of Reflect.ownKeys(runtime)) {
+    if (key in ours) continue;
+    const desc = Object.getOwnPropertyDescriptor(runtime, key);
+    Object.defineProperty(ours, key, desc);
+  }
   Object.defineProperty(global, 'console', {
     configurable: true,
     writable: true,
-    value: new Console({ stdout, stderr }),
+    value: ours,
   });
 }