react-x11 2.48.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/cli/index.js

@@ -0,0 +1,81 @@
+#!/usr/bin/env node
+// react-x11's command line, the `bin` of the package. One command so far:
+//
+//   react-x11 dev <file> [args…]   hot reload with nothing to set up (./dev.js)
+//
+// Arguments before the file belong to the command, and everything after it
+// to the app, which sees them in process.argv as `node <file> …args` would
+// have handed them over.
+import { readFileSync } from 'node:fs';
+import { DevError, runDev } from './dev.js';
+
+const USAGE = `Usage: react-x11 dev <file> [args…]
+
+Commands:
+  dev <file>     Run <file> with hot reload: saving it, or a .jsx module it
+                 imports, updates the running app in place. Its default
+                 export is mounted, inside a window of its own when it
+                 renders none; a file that mounts its own root runs as it is.
+                 Arguments after the file are the app's.
+
+Options:
+  -h, --help     Show this help.
+  -v, --version  Print react-x11's version.
+`;
+
+function version() {
+  const manifest = new URL('../../package.json', import.meta.url);
+  return JSON.parse(readFileSync(manifest, 'utf8')).version;
+}
+
+/** An exit code to finish with, or undefined while the app runs. */
+async function main([command, ...rest]) {
+  if (command === '-h' || command === '--help' || command === 'help') {
+    process.stdout.write(USAGE);
+    return 0;
+  }
+  if (command === '-v' || command === '--version') {
+    process.stdout.write(`${version()}\n`);
+    return 0;
+  }
+  if (command === undefined) {
+    process.stderr.write(USAGE);
+    return 2;
+  }
+  if (command !== 'dev') {
+    process.stderr.write(`react-x11: no command "${command}".\n\n${USAGE}`);
+    return 2;
+  }
+  const at = rest.findIndex((arg) => !arg.startsWith('-'));
+  const own = at === -1 ? rest : rest.slice(0, at);
+  if (own.includes('-h') || own.includes('--help')) {
+    process.stdout.write(USAGE);
+    return 0;
+  }
+  if (own.length > 0) {
+    process.stderr.write(
+      `react-x11 dev: no option ${own[0]} — options after the file are ` +
+        `the app's.\n\n${USAGE}`,
+    );
+    return 2;
+  }
+  if (at === -1) {
+    process.stderr.write(`react-x11 dev: which file?\n\n${USAGE}`);
+    return 2;
+  }
+  await runDev(rest[at], { args: rest.slice(at + 1) });
+  return undefined;
+}
+
+try {
+  const code = await main(process.argv.slice(2));
+  if (code !== undefined) process.exitCode = code;
+} catch (err) {
+  // A DevError is a sentence about the setup, and its stack is ours; any
+  // other throw came out of the app's own module, and its stack is the
+  // useful part.
+  console.error(
+    err instanceof DevError ? `react-x11 dev: ${err.message}` : err,
+  );
+  process.exitCode = 1;
+}

package/src/cocoa/app.js

@@ -178,7 +178,17 @@ export class CocoaApp {
     // policy goes first, through `initApp`'s option (bridge >= 0.5), and
     // only when the root asked for one: a bridge without the option, or a
     // fake, is left alone.
-    const policy = options.cocoa?.activationPolicy;
+    //
+    // A `<Frame>` pane asks for one without being told: 'prohibited'. Its
+    // pixels are the host's to show, it makes no NSWindow (`createWindow`)
+    // and it runs no NSApplication, so nothing of it may be an app the user
+    // sees — and launched Regular, the bridge's default, every pane was a
+    // `node` tile of its own in the Dock and in ⌘-Tab, one per tab of a
+    // browser. Prohibited rather than accessory because a pane must not be
+    // activated either: the host window has the focus and forwards it.
+    const pane = options.pane ?? process.env.REACT_X11_FRAME === '1';
+    const policy =
+      options.cocoa?.activationPolicy ?? (pane ? 'prohibited' : undefined);
     // Under the launcher (src/cocoa/main.js) the app launched before this
     // code ran, so the policy is a switch after the fact, and a Regular
     // launch has already registered its Dock tile. The bridge publishes
@@ -257,7 +267,6 @@ export class CocoaApp {
     // here then (src/cocoa/paneplayer.js); one that does not leaves a pane
     // refusing `src`, its poster shown and `onError` told.
     this._players = new Map();
-    const pane = options.pane ?? process.env.REACT_X11_FRAME === '1';
     if (canPlay(native) && !pane) {
       this.createPlayer = (src, options) => new CocoaPlayer(this, src, options);
     }
@@ -388,7 +397,7 @@ export class CocoaApp {
 
     // Frame-pane mode: this process renders a pane whose pixels a host
     // composites (REACT_X11_FRAME is what the Frame host sets on the fork).
-    this._paneMode = options.pane ?? process.env.REACT_X11_FRAME === '1';
+    this._paneMode = pane;
     this._paneSend = null;
     // the pane's own window, the one the host lays out and forwards to
     this._paneWindow = null;

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