react-x11 2.49.0 → 2.50.0

package/src/cli/errorwindow.js

@@ -0,0 +1,368 @@
+// The window `react-x11 dev` shows an error in: what was thrown, the source
+// around where, and the frames of the stack, each of which opens its line in
+// the editor (src/editor.js, the one click-to-component uses).
+//
+// Two kinds of error reach it. A **render** error takes the app's tree down —
+// React unmounts a root whose render threw and nothing caught — so this
+// window stands in for the app until the next save mounts it again. A
+// **compile** error is a save that did not compile: the app keeps running the
+// module's last version, and this window opens beside it until a save
+// compiles.
+//
+// Everything the window says comes out of `describeError`, which is pure, so
+// the tests can read it without rendering anything.
+import { readFileSync } from 'node:fs';
+import { relative } from 'node:path';
+import React from 'react';
+import { editorName, openInEditor, stackFrames } from '../editor.js';
+
+const h = React.createElement;
+
+/** Lines of source shown above and below the one that threw. */
+const CONTEXT_ABOVE = 3;
+const CONTEXT_BELOW = 2;
+
+function firstLine(text) {
+  const at = text.indexOf('\n');
+  return at === -1 ? text : text.slice(0, at);
+}
+
+/**
+ * The source lines around `line` (1-based) of `file`: `{ number, text, at }`
+ * each, `at` marking the one that threw. Null when the file cannot be read.
+ */
+function excerptOf(file, line) {
+  let source;
+  try {
+    source = readFileSync(file, 'utf8');
+  } catch {
+    return null;
+  }
+  const lines = source.split('\n');
+  if (line < 1 || line > lines.length) return null;
+  const from = Math.max(1, line - CONTEXT_ABOVE);
+  const to = Math.min(lines.length, line + CONTEXT_BELOW);
+  const excerpt = [];
+  for (let number = from; number <= to; number++) {
+    excerpt.push({
+      number,
+      // a tab is as wide as its font says, and two spaces is what an editor
+      // with a two-space indent shows
+      text: lines[number - 1].replace(/\t/g, '  ').replace(/\r$/, ''),
+      at: number === line,
+    });
+  }
+  return excerpt;
+}
+
+/**
+ * Everything the window says about one failure, as data.
+ *
+ * `failure` is `{ kind, error, filename?, componentStack? }`: `kind` is
+ * `'render'` or `'compile'`, `filename` the module that did not compile, and
+ * `componentStack` what React handed `onUncaughtError`.
+ */
+export function describeError(failure, cwd = process.cwd()) {
+  const { kind, error, filename = null, componentStack = '' } = failure;
+  const rel = (file) => relative(cwd, file) || file;
+  const message = String(error?.message ?? error);
+  const name = error?.name && error.name !== 'Error' ? error.name : 'Error';
+
+  let heading;
+  let detail = '';
+  let location = null;
+  if (kind === 'compile') {
+    // babel says `<file>: <what> (<line>:<column>)` and then draws a frame;
+    // the window draws its own from `loc`, when there is one
+    let what = firstLine(message);
+    if (filename && what.startsWith(`${filename}: `)) {
+      what = what.slice(filename.length + 2);
+    }
+    what = what.replace(/ \(\d+:\d+\)$/, '');
+    heading = `${name}: ${what}`;
+    if (filename && error?.loc?.line) {
+      location = {
+        file: filename,
+        line: error.loc.line,
+        column: (error.loc.column ?? 0) + 1,
+      };
+    } else {
+      detail = message.slice(firstLine(message).length).replace(/^\n+/, '');
+    }
+  } else {
+    heading = `${name}: ${firstLine(message)}`;
+    detail = message.slice(firstLine(message).length).replace(/^\n+/, '');
+  }
+
+  // A compile error's stack is the compiler's: where in babel the parse
+  // gave up, which says nothing about the app.
+  const all = kind === 'compile' ? [] : stackFrames(error?.stack);
+  const shown = all.filter((frame) => !frame.internal);
+  if (!location) {
+    const own = shown.find((frame) => !frame.installed) ?? shown[0];
+    if (own) {
+      location = { file: own.file, line: own.line, column: own.column };
+    }
+  }
+
+  // React's component stack, innermost first: `at Broken (…)`. Host
+  // elements are in it too; the breadcrumb is the components.
+  const components = [];
+  for (const text of String(componentStack).split('\n')) {
+    const match = text.match(/^\s*at ([A-Z][\w$.]*)/);
+    if (match) components.push(match[1]);
+  }
+
+  return {
+    kind,
+    heading,
+    detail,
+    location: location && {
+      ...location,
+      where: `${rel(location.file)}:${location.line}:${location.column}`,
+    },
+    excerpt: location ? excerptOf(location.file, location.line) : null,
+    frames: shown.map((frame) => ({
+      label: frame.functionName ?? '(anonymous)',
+      where: `${rel(frame.file)}:${frame.line}:${frame.column}`,
+      file: frame.file,
+      line: frame.line,
+      column: frame.column,
+      own: !frame.installed,
+    })),
+    hidden: all.length - shown.length,
+    components: components.reverse(),
+  };
+}
+
+const mono = { fontFamily: '$monoFamily', fontSize: 12 };
+
+/**
+ * A row that opens a source line: drawn pressed on the press and hovered
+ * under the pointer, because a click that opens another application takes a
+ * moment to show anything of its own.
+ */
+function SourceLink({ target, children }) {
+  const open = () => openInEditor(target);
+  return h(
+    'box',
+    {
+      focusable: true,
+      role: 'link',
+      onClick: open,
+      onKeyDown: (ev) => {
+        if (ev.key === 'Enter') open();
+      },
+      style: {
+        flexDirection: 'row',
+        gap: 10,
+        paddingTop: 3,
+        paddingBottom: 3,
+        paddingStart: 6,
+        paddingEnd: 6,
+        borderRadius: '$radiusSmall',
+        cursor: 'pointer',
+        ':hover': { backgroundColor: '$surfaceHover' },
+        ':active': { backgroundColor: '$surfaceActive' },
+      },
+    },
+    children,
+  );
+}
+
+function Excerpt({ excerpt, column }) {
+  const width = String(excerpt[excerpt.length - 1].number).length;
+  const rows = [];
+  for (const { number, text, at } of excerpt) {
+    rows.push(
+      h(
+        'box',
+        { key: number, style: { flexDirection: 'row' } },
+        h(
+          'text',
+          {
+            style: {
+              ...mono,
+              color: at ? '$danger' : '$textMuted',
+              textWrap: 'nowrap',
+            },
+          },
+          `${at ? '>' : ' '} ${String(number).padStart(width)} │ `,
+        ),
+        h(
+          'text',
+          {
+            style: {
+              ...mono,
+              color: at ? '$text' : '$textMuted',
+              textWrap: 'nowrap',
+              flexShrink: 1,
+            },
+          },
+          text || ' ',
+        ),
+      ),
+    );
+    if (at && column > 0) {
+      rows.push(
+        h(
+          'text',
+          {
+            key: 'caret',
+            style: { ...mono, color: '$danger', textWrap: 'nowrap' },
+          },
+          `${' '.repeat(width + 5 + column - 1)}^`,
+        ),
+      );
+    }
+  }
+  return h(
+    'box',
+    {
+      style: {
+        backgroundColor: '$surfaceHover',
+        borderRadius: '$radius',
+        paddingTop: 10,
+        paddingBottom: 10,
+        paddingStart: 12,
+        paddingEnd: 12,
+        overflow: 'hidden',
+      },
+    },
+    rows,
+  );
+}
+
+/**
+ * The window itself. `onCloseRequest` is the host's to give: without one,
+ * closing the only window there is ends the app, as closing an app's primary
+ * window does.
+ */
+export function ErrorWindow({ failure, title, onCloseRequest }) {
+  const info = describeError(failure);
+  const muted = { color: '$textMuted', fontSize: 12 };
+  const editor = editorName();
+  const children = [
+    h(
+      'text',
+      { key: 'kind', style: { ...muted, fontWeight: 600 } },
+      info.kind === 'compile'
+        ? 'This save did not compile. The app keeps running the last version that did.'
+        : 'The app threw while rendering, and React took its tree down.',
+    ),
+    h(
+      'text',
+      {
+        key: 'heading',
+        style: { color: '$danger', fontSize: 16, fontWeight: 600 },
+      },
+      info.heading,
+    ),
+  ];
+  if (info.components.length > 0) {
+    children.push(
+      h(
+        'text',
+        { key: 'components', style: muted },
+        info.components.join(' › '),
+      ),
+    );
+  }
+  if (info.detail) {
+    children.push(
+      h(
+        'text',
+        { key: 'detail', style: { ...mono, color: '$text' } },
+        info.detail,
+      ),
+    );
+  }
+  if (info.location) {
+    children.push(
+      h(
+        'box',
+        { key: 'source', style: { gap: 6 } },
+        h(
+          SourceLink,
+          { target: info.location },
+          h(
+            'text',
+            { style: { ...mono, color: '$link' } },
+            info.location.where,
+          ),
+        ),
+        info.excerpt
+          ? h(Excerpt, { excerpt: info.excerpt, column: info.location.column })
+          : null,
+      ),
+    );
+  }
+  if (info.frames.length > 0) {
+    children.push(
+      h(
+        'box',
+        { key: 'frames', style: { gap: 1 } },
+        h(
+          'text',
+          { style: { ...muted, fontWeight: 600, marginBottom: 4 } },
+          'Stack',
+        ),
+        info.frames.map((frame, i) =>
+          h(
+            SourceLink,
+            { key: i, target: frame },
+            h(
+              'text',
+              {
+                style: {
+                  ...mono,
+                  color: frame.own ? '$text' : '$textMuted',
+                  fontWeight: frame.own ? 600 : 400,
+                },
+              },
+              frame.label,
+            ),
+            h(
+              'text',
+              { style: { ...mono, color: '$textMuted', flexShrink: 1 } },
+              frame.where,
+            ),
+          ),
+        ),
+        info.hidden > 0
+          ? h(
+              'text',
+              { style: { ...muted, marginTop: 4, marginLeft: 6 } },
+              `${info.hidden} more ${info.hidden === 1 ? 'frame' : 'frames'} in React, Node and react-x11, not shown.`,
+            )
+          : null,
+      ),
+    );
+  }
+  children.push(
+    h(
+      'text',
+      { key: 'footer', style: { ...muted, marginTop: 4 } },
+      (info.kind === 'compile'
+        ? 'Fix it and save: this window goes once the file compiles. '
+        : 'Fix it and save: the app is mounted again on the next reload. ') +
+        `Click a line to open it in ${editor}` +
+        (process.env.REACT_X11_EDITOR
+          ? '.'
+          : '; REACT_X11_EDITOR names another editor.'),
+    ),
+  );
+
+  return h(
+    'window',
+    { title, width: 760, minHeight: 240, onCloseRequest },
+    h(
+      'box',
+      {
+        selectable: true,
+        style: { flexGrow: 1, padding: 20, gap: 14, overflow: 'scroll' },
+      },
+      children,
+    ),
+  );
+}

package/src/cocoa/presenter.js

@@ -502,7 +502,9 @@ export function propBoxProps(node, app, scale, parentOrigin, order) {
   const style = node.style ?? {};
   const border = typeof style.borderWidth === 'number' ? style.borderWidth : 0;
   const colour = (value) =>
-    value ? (app._parseColor(String(value)) ?? [0, 0, 0, 0]) : [0, 0, 0, 0];
+    value
+      ? (app._parseColor(String(node.resolveColor(value))) ?? [0, 0, 0, 0])
+      : [0, 0, 0, 0];
   return {
     frame: [
       (abs.x - parentOrigin.x) / scale,

package/src/cocoa/promotion.js

@@ -42,7 +42,7 @@ import { now } from '../nodes/animation.js';
 import { BoxNode } from '../nodes/box.js';
 import { addDamageRect, damageToPaint } from '../nodes/damage.js';
 import { intersectRects } from '../nodes/rects.js';
-import { resolveBorderWidths } from '../styles.js';
+import { radiusOf, resolveBorderWidths } from '../styles.js';
 import {
   LayerAnimations,
   RASTER_PAD,
@@ -841,7 +841,7 @@ export class CocoaPromotion {
         cut &&
         !parent.isWindow &&
         parent.clipsChildren?.() &&
-        !(parent.style?.borderRadius > 0)
+        !(radiusOf(parent.style, parent.abs) > 0)
       ) {
         const inner = insetRect(parent.abs, borderReach(parent));
         // a clip with round corners cut again is no one box's shape: the
@@ -872,13 +872,15 @@ export class CocoaPromotion {
         !cut.clip &&
         !parent.isWindow &&
         parent.clipsChildren?.() &&
-        typeof parent.style?.borderRadius === 'number' &&
-        parent.style.borderRadius > 0 &&
-        !containsRect(insetRect(parent.abs, parent.style.borderRadius), bounds)
+        radiusOf(parent.style, parent.abs) > 0 &&
+        !containsRect(
+          insetRect(parent.abs, radiusOf(parent.style, parent.abs)),
+          bounds,
+        )
       ) {
         const border = borderReach(parent);
         cut.clip = insetRect(parent.abs, border);
-        cut.radius = Math.max(0, parent.style.borderRadius - border);
+        cut.radius = Math.max(0, radiusOf(parent.style, parent.abs) - border);
         roundCut = true;
         bounds = intersectRects(bounds, cut.clip);
         if (!bounds) {
@@ -906,11 +908,8 @@ export class CocoaPromotion {
             return false;
         }
         if (parent.clipsChildren?.() && !roundCut) {
-          const radius = parent.style?.borderRadius;
-          const clip =
-            typeof radius === 'number' && radius > 0
-              ? insetRect(parent.abs, radius)
-              : parent.abs;
+          const radius = radiusOf(parent.style, parent.abs);
+          const clip = radius > 0 ? insetRect(parent.abs, radius) : parent.abs;
           if (!containsRect(clip, bounds)) return false;
         }
       }

package/src/cocoa/relaunch.js

@@ -22,6 +22,8 @@
 // name: it runs before the entry is even loaded, and skips the checks.
 import fs from 'node:fs';
 import { createRequire } from 'node:module';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { isMainThread, SHARE_ENV, Worker } from 'node:worker_threads';
 
 import { loadNative } from './native.js';
@@ -156,6 +158,15 @@ const ENTRY_POINT = new Set([
 // ts-node/esm`, `--experimental-loader ./hooks.mjs`.
 const LOADER_FLAG = /^--(?:import|loader|experimental-loader)(?:=|$)/;
 
+// The module Bun runs an entry from (`startedRunning`): one it writes
+// itself, which imports the entry (measured, Bun 1.4).
+const BUN_MAIN = 'bun:main';
+
+// What Bun parses an entry as, by its extension: a .ts file may hold a
+// `<T>x` cast, which TSX reads as an element, and JSX is allowed in a .js
+// file, where the JSX reader takes any script a plain one would.
+const SCAN_LOADER = { '.tsx': 'tsx', '.ts': 'ts', '.mts': 'ts', '.cts': 'ts' };
+
 /**
  * Why this import should not move the app onto a worker, or null when it
  * should. A pure answer over what the process says about itself, so that
@@ -278,14 +289,14 @@ function compiledExecutable(bun) {
  * and later evaluate an `import()` the entry makes before the loop's first
  * turn, so an app that made one moved and ran its entry twice.
  *
- * Bun reports 1 there from the first line; what tells in Bun is the entry's
- * record in the module cache, which is there once the entry has been
- * evaluated and absent while its imports are (measured, Bun 1.4).
+ * Bun reports no loop there, its `nodeTiming` a stand-in at 1 once
+ * `node:perf_hooks` is loaded, and leaves no frame below a module it
+ * evaluates, so it is read its own way (`bunStartedRunning`).
  */
 function startedRunning(bun, moduleUrl, entry) {
   if (!bun) return !evaluatedFromEntryPoint();
   try {
-    return Boolean(createRequire(moduleUrl).cache?.[entry]?.loaded);
+    return bunStartedRunning(bun, moduleUrl, entry);
   } catch {
     return false;
   }
@@ -293,13 +304,106 @@ function startedRunning(bun, moduleUrl, entry) {
 
 /** Whether this stack, async frames and all, comes from `ENTRY_POINT`. */
 function evaluatedFromEntryPoint() {
+  const sites = callSites();
+  if (!sites) return false;
+  for (const site of sites) {
+    const file = site.getFileName() ?? '';
+    if (ENTRY_POINT.has(file)) return true;
+    // the app's own code awaits this import, so it has run already
+    if (site.isAsync() && !file.startsWith('node:')) return false;
+  }
+  return false;
+}
+
+/**
+ * `startedRunning` in Bun, read from three things it shows of the entry's
+ * run (each measured, Bun 1.4).
+ *
+ * Its module registry. Bun runs the entry from a module it writes itself,
+ * `bun:main`, which imports it, and `require.cache` lists an ES module once
+ * it has been evaluated: `bun:main` is there once the entry has finished,
+ * top-level awaits and all, and an import made after that is late. Before
+ * then the entry's own record says nothing either way. Bun marks a CommonJS
+ * module `loaded` before its body runs, which read as late from a CommonJS
+ * entry's first line, so it never moved; and an ES module has no record
+ * until it is evaluated, which read as not started for an entry awaiting
+ * its `import()` of react-x11, so it moved and ran a second time on the
+ * worker.
+ *
+ * The stack. Bun's loader evaluates an ES module's imports with no frame
+ * below the module, so a frame below react-x11 is code that loaded it
+ * synchronously. A CommonJS entry is in `require.cache` from its first line,
+ * and on its first run its own wrapper is the outermost frame. Bun runs the
+ * nextTicks and microtasks that first run queues before it evaluates
+ * `bun:main`: a callback there in another module reads as late, and one in
+ * the entry itself as its first run, unless in strict code it ends by
+ * returning its `require()`, which JavaScriptCore makes a tail call that
+ * leaves it no frame. For an ES module entry, a frame below react-x11 is a
+ * CommonJS module the entry imports, on its first run, or a `require()` in
+ * a module's body, and a bundle carries react-x11 inside the entry itself:
+ * each of them the start.
+ *
+ * The entry's static imports. An ES module's body runs once every module it
+ * imports statically has been evaluated: while one has not, the entry has
+ * not run a line and react-x11 is part of its graph, an `import()` that one
+ * of those modules awaits included; once all have, the entry's body is
+ * running or waiting on a top-level await, and asked for react-x11 itself.
+ * Read with Bun's own scanner and resolver, and what they cannot answer
+ * throws, which reads as the start.
+ */
+function bunStartedRunning(bun, moduleUrl, entry) {
+  const cache = createRequire(entry).cache;
+  // the entry has finished
+  if (BUN_MAIN in cache) return true;
+  const outer = outermostFile();
+  // a CommonJS entry: late unless on its first run
+  if (entry in cache) return outer !== undefined && outer !== entry;
+  let own = null;
+  try {
+    own = fileURLToPath(moduleUrl);
+  } catch {
+    // a CommonJS bundle has no import.meta.url
+  }
+  // react-x11 inside the entry, or loaded by code below it on the stack
+  if (own === entry || (outer !== undefined && outer !== own)) return false;
+  // reached by an import: late once the entry's body has started
+  const { imports } = new bun.Transpiler({
+    loader: SCAN_LOADER[path.extname(entry)] ?? 'jsx',
+  }).scan(fs.readFileSync(entry, 'utf8'));
+  const dir = path.dirname(entry);
+  return imports.every(
+    ({ kind, path: specifier }) =>
+      kind !== 'import-statement' || bun.resolveSync(specifier, dir) in cache,
+  );
+}
+
+/**
+ * The file of the outermost frame on this stack that is not native code,
+ * or undefined where the stack cannot be read.
+ */
+function outermostFile() {
+  const sites = callSites();
+  if (!sites) return undefined;
+  for (let i = sites.length - 1; i >= 0; i--) {
+    if (!sites[i].isNative()) return sites[i].getFileName() ?? undefined;
+  }
+  return undefined;
+}
+
+/**
+ * This stack as call sites, every frame of it, or null where it cannot be
+ * read as call sites — an `Error` the app has frozen, say. Raises the stack
+ * trace limit and sets a formatter for as long as it takes, and puts back
+ * the app's own.
+ */
+function callSites() {
   const { prepareStackTrace, stackTraceLimit } = Error;
   let sites;
   try {
     // Reflect.set: an Error the app has frozen is not a reason to throw
     // from its import of react-x11
     Reflect.set(Error, 'stackTraceLimit', Infinity);
-    Reflect.set(Error, 'prepareStackTrace', (_, callSites) => callSites);
+    Reflect.set(Error, 'prepareStackTrace', (_, frames) => frames);
     const held = {};
     Error.captureStackTrace(held);
     sites = held.stack;
@@ -307,14 +411,7 @@ function evaluatedFromEntryPoint() {
     Reflect.set(Error, 'prepareStackTrace', prepareStackTrace);
     Reflect.set(Error, 'stackTraceLimit', stackTraceLimit);
   }
-  if (!Array.isArray(sites)) return false;
-  for (const site of sites) {
-    const file = site.getFileName() ?? '';
-    if (ENTRY_POINT.has(file)) return true;
-    // the app's own code awaits this import, so it has run already
-    if (site.isAsync() && !file.startsWith('node:')) return false;
-  }
-  return false;
+  return Array.isArray(sites) ? sites : null;
 }
 
 /**

package/src/currentcolor.js

@@ -0,0 +1,28 @@
+// CSS's `currentColor`: the colour keyword that is not a colour yet.
+//
+// A leaf, like decorations.js, because every layer that reads a colour asks
+// about it — the grammar (styles.js, shorthands.js, decorations.js) to let
+// it through, and the paint (nodes/boxpaint.js and every backend's reader
+// of a style colour) to resolve it.
+//
+// It stays the keyword in `node.style` — CSS's computed value — and becomes
+// a colour only where something is about to paint it, against the node's
+// resolved ink (`Node.resolveColor`). Resolving it once in the style funnel
+// instead would bake the ink into the style object, which no inherited
+// change reaches: a `:hover { color }` on a row moves the ink of every node
+// under it without restyling any of them.
+
+/** `currentColor`, spelled any way CSS accepts — its keywords are ASCII
+ *  case-insensitive — and with the whitespace a style value may carry. */
+const KEYWORD = /^\s*currentcolor\s*$/i;
+const MENTION = /currentcolor/i;
+
+/** Whether `value` is the keyword. Asked per colour per paint, so a value
+ *  too short to be it is answered without the match. */
+export const isCurrentColor = (value) =>
+  typeof value === 'string' && value.length >= 12 && KEYWORD.test(value);
+
+/** Whether a value made of several — a gradient, a shadow list — names the
+ *  keyword anywhere in it. */
+export const mentionsCurrentColor = (value) =>
+  typeof value === 'string' && value.length >= 12 && MENTION.test(value);