react-x11 2.15.2 → 2.16.0

package/src/cocoa/fonts.js

@@ -462,11 +462,31 @@ export class CocoaFace {
   }
 }
 
+/**
+ * The features a letter-spaced span is set with: CSS's rule, and ntk's, that
+ * the optional ligatures come off where letters are spaced — an `fi` drawn as
+ * one glyph cannot open in its middle — unless the style names them.
+ */
+const OPTIONAL_LIGATURES_OFF = Object.freeze({
+  liga: 0,
+  clig: 0,
+  dlig: 0,
+  hlig: 0,
+});
+function spacedFeatures(features, spacing) {
+  if (!spacing) return features;
+  return features
+    ? { ...OPTIONAL_LIGATURES_OFF, ...features }
+    : OPTIONAL_LIGATURES_OFF;
+}
+
 export class CocoaFontManager {
   /** @param native the @windowkit/appkit module; the tests hand in a fake */
   constructor(native = loadNative()) {
     this._native = native;
     this._fonts = new Map(); // family|weight|italic|size -> handle
+    // handle -> features key -> the handle with those features set
+    this._featured = new WeakMap();
     this._faces = new Map(); // family|weight|italic -> face wrapper
     this._registered = new Map(); // lowercase family -> [{cg, weight, italic}]
     this._byKey = new Map(); // ntk Font key -> { cg } | { ps }
@@ -585,6 +605,52 @@ export class CocoaFontManager {
     return handle;
   }
 
+  /**
+   * `handle` with OpenType features set — `fontApplyFeatures`, which
+   * `@windowkit/appkit` has from 0.11.0 — for the resolved `features` a
+   * style hands the engines, tag → value. Kept per handle, so a paragraph
+   * laid out every repaint asks the bridge for a featured font once. A
+   * bridge without the verb gets the handle back as it was
+   * (`_textAdjustments`).
+   */
+  _withFeatures(handle, features) {
+    if (!handle || !features || !this._textAdjustments()) return handle;
+    let perHandle = this._featured.get(handle);
+    if (!perHandle) this._featured.set(handle, (perHandle = new Map()));
+    const key = JSON.stringify(features);
+    let featured = perHandle.get(key);
+    if (!featured) {
+      featured = this._native.fontApplyFeatures(handle, features);
+      perHandle.set(key, featured);
+    }
+    return featured;
+  }
+
+  /**
+   * Whether the bridge sets features and letter spacing at all. Both arrived
+   * in one `@windowkit/appkit` release, `fontApplyFeatures` with the span's
+   * `letterSpacing`; an older bridge takes the span option and ignores it,
+   * so the verb is what answers for both.
+   *
+   * Without them the text draws as the face has it — digits proportional,
+   * letters unspaced — and nothing else goes wrong. But a style that asked
+   * for either and got nothing is a question with no thread to pull, so
+   * development says so, once.
+   */
+  _textAdjustments() {
+    if (typeof this._native.fontApplyFeatures === 'function') return true;
+    if (process.env.NODE_ENV !== 'production' && !this._warnedAdjustments) {
+      this._warnedAdjustments = true;
+      console.warn(
+        'react-x11: this @windowkit/appkit has no fontApplyFeatures, so ' +
+          'letterSpacing, fontVariantNumeric and fontFeatureSettings do ' +
+          'nothing on the Cocoa backend. Update @windowkit/appkit to the ' +
+          'version react-x11 lists in its optionalDependencies.',
+      );
+    }
+    return false;
+  }
+
   _withVariations(handle, variations) {
     if (
       variations &&
@@ -882,6 +948,8 @@ export class CocoaFontManager {
         sp.color ?? base.color ?? null,
         sp.variations ?? base.variations ?? null,
         (sp.font ?? base.font)?.key ?? null,
+        sp.features ?? base.features ?? null,
+        sp.letterSpacing ?? base.letterSpacing ?? 0,
       ]),
       options.maxWidth,
       options.align,
@@ -926,12 +994,22 @@ export class CocoaFontManager {
         ),
         variations,
       );
+      // Letter spacing is the typesetter's kerning attribute, and it turns
+      // the optional ligatures off the way ntk does, so the two engines
+      // agree on what a spaced word is made of (#588).
+      let spacing = span.letterSpacing ?? base.letterSpacing ?? 0;
+      if (spacing && !this._textAdjustments()) spacing = 0;
+      handle = this._withFeatures(
+        handle,
+        spacedFeatures(span.features ?? base.features, spacing),
+      );
       const color = span.color ?? base.color;
       if (color == null) contextInk = true;
       nativeSpans.push({
         text: t,
         font: handle,
         ...(color == null ? {} : { color: parseColor(color) }),
+        ...(spacing ? { letterSpacing: spacing } : {}),
       });
     }
     // A width offer of zero is a question, not a degenerate layout: yoga

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,
   });
 }