react-x11 2.49.0 → 2.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-x11",
-  "version": "2.49.0",
+  "version": "2.50.0",
   "description": "react renderer with X11 as a target",
   "main": "./src/index.js",
   "bin": {
@@ -121,7 +121,7 @@
   "peerDependencies": {
     "@babel/core": "^8.0.0",
     "@babel/plugin-transform-react-jsx": "^8.0.0",
-    "hot-module-replacement": "^4.0.1",
+    "hot-module-replacement": "^4.0.2",
     "react": "^19.3.0",
     "react-refresh": "^0.19.0"
   },
@@ -153,7 +153,7 @@
     "eslint": "^9.32.0",
     "eslint-plugin-react": "^7.37.5",
     "globals": "^17.8.0",
-    "hot-module-replacement": "^4.0.1",
+    "hot-module-replacement": "^4.0.2",
     "katex": "^0.19.0",
     "prettier": "^3.6.0",
     "react": "^19.3.0",

package/src/ClickToComponent.js

@@ -10,40 +10,9 @@
 // loader both enable) has already rewritten that Error's stack to point at
 // original source — we only have to parse the stack text and skip the
 // frames inside React/the reconciler itself.
-import { spawn } from 'node:child_process';
-import { dirname, sep } from 'node:path';
-import { fileURLToPath } from 'node:url';
 import { setClickToComponentHandler } from './events.js';
 import { selectInDevTools } from './DevToolsIntegration.js';
-
-const STACK_FRAME = /^\s*at\s+(?:(.+?)\s+\()?(.+?):(\d+):(\d+)\)?\s*$/;
-
-// The frames to walk past before the JSX call site itself: React captures
-// the Error inside `jsxDEV`/`createElement`, and an element created by this
-// renderer (or by node internals) is never what a click means. `SELF_DIR` is
-// whichever copy of react-x11 is running — the repo's own `src/` for the
-// examples and tests, an installed `node_modules/react-x11/src` for an app.
-//
-// Everything *else* in `node_modules` is deliberately not skipped here: a
-// frame inside an installed package is a real call site, it is just not one
-// in the application's source, and telling the two apart is what lets
-// `resolveOwnedLocation` climb to the owner that is. Skipping every
-// `node_modules` frame instead would walk straight past the library
-// component and land on whatever application frame happens to be deeper in
-// the render stack — usually the `render()` call at startup, which looks
-// like an answer and isn't.
-const REACT_RUNTIME =
-  /[\\/]node_modules[\\/](react|react-dom|react-reconciler|scheduler)[\\/]/;
-const SELF_DIR = dirname(fileURLToPath(import.meta.url)) + sep;
-
-function isInternalFrame(file) {
-  return (
-    file.startsWith('node:') ||
-    file === '<anonymous>' ||
-    file.startsWith(SELF_DIR) ||
-    REACT_RUNTIME.test(file)
-  );
-}
+import { openInEditor, stackFrames } from './editor.js';
 
 /** The first stack frame outside React/the reconciler/node internals — the
  * JSX call site for whatever element this Error was captured at, wherever it
@@ -52,25 +21,16 @@ function isInternalFrame(file) {
  * Exported because `react-x11/test`'s `sourceOf` answers the same question
  * for a test that a click answers for an editor. */
 export function resolveLocation(debugStack) {
-  const stack = debugStack?.stack;
-  if (!stack) return null;
-  for (const line of stack.split('\n').slice(1)) {
-    const match = line.match(STACK_FRAME);
-    if (!match) continue;
-    const [, functionName, rawFile, lineStr, columnStr] = match;
-    const file = rawFile.startsWith('file://')
-      ? fileURLToPath(rawFile)
-      : rawFile;
-    if (isInternalFrame(file)) continue;
-    return {
-      functionName,
-      file,
-      line: Number(lineStr),
-      column: Number(columnStr),
-      installed: file.includes(`${sep}node_modules${sep}`),
-    };
-  }
-  return null;
+  const frame = stackFrames(debugStack?.stack).find((f) => !f.internal);
+  if (!frame) return null;
+  const { functionName, file, line, column, installed } = frame;
+  return {
+    functionName: functionName ?? undefined,
+    file,
+    line,
+    column,
+    installed,
+  };
 }
 
 /** The nearest source location a click can mean: the clicked element's own
@@ -132,87 +92,6 @@ function logOwnerChain(fiber) {
   }
 }
 
-// GUI editors: navigate their registered URI scheme (same idea as
-// https://github.com/sidorares/show-component, minus the browser) instead of
-// spawning their CLI shim. The CLI wrapper (e.g. `cursor -g ...`) round-trips
-// through a shell script that re-detects and re-execs the real app, which is
-// visibly slower than the OS handing the URL straight to the already-running
-// instance via Launch Services (macOS) / xdg-open (Linux).
-const EDITOR_SCHEMES = {
-  cursor: 'cursor',
-  code: 'vscode',
-  vscode: 'vscode',
-  'code-insiders': 'vscode-insiders',
-  'vscode-insiders': 'vscode-insiders',
-  windsurf: 'windsurf',
-};
-
-// Terminal editors have no URI scheme to navigate — spawn them directly.
-const EDITOR_CLI = {
-  vim: (file, line, column) => [
-    'vim',
-    [`+call cursor(${line},${column})`, file],
-  ],
-  nvim: (file, line, column) => [
-    'nvim',
-    [`+call cursor(${line},${column})`, file],
-  ],
-};
-
-const OPEN_URI_COMMAND = process.platform === 'darwin' ? 'open' : 'xdg-open';
-
-function editorUri(scheme, file, line, column) {
-  return `${scheme}://file${encodeURI(file)}:${line}:${column}`;
-}
-
-function openInEditor({ file, line, column }) {
-  const name = process.env.REACT_X11_EDITOR || 'cursor';
-  let bin, args;
-  if (EDITOR_CLI[name]) {
-    [bin, args] = EDITOR_CLI[name](file, line, column);
-  } else {
-    // an unrecognized name is assumed to be a URI scheme itself, so any
-    // editor that registers one works without a matching entry above
-    const scheme = EDITOR_SCHEMES[name] || name;
-    bin = OPEN_URI_COMMAND;
-    args = [editorUri(scheme, file, line, column)];
-  }
-  // stderr is kept (rather than the whole stdio ignored) for one reason:
-  // `open`/`xdg-open` exit non-zero and print *there* when nothing claims
-  // the scheme — an editor that isn't installed, or one whose URL handler
-  // was never registered. Swallowing that is what makes click-to-component
-  // look like it only logs: the location resolves, the console line prints,
-  // and the editor silently never opens.
-  const child = spawn(bin, args, {
-    detached: true,
-    stdio: ['ignore', 'ignore', 'pipe'],
-  });
-  let stderr = '';
-  // ...and unref'd, so keeping it does not keep the process alive: a pipe is
-  // a ref'd handle, and an editor that outlives the app it was launched from
-  // is the normal case, not a reason to hold the event loop open.
-  child.stderr.unref();
-  child.stderr.on('data', (chunk) => {
-    stderr += chunk;
-  });
-  child.on('error', (err) => {
-    console.warn(
-      `react-x11: click-to-component could not launch "${bin}" (${err.code ?? err.message}). ` +
-        'Set REACT_X11_EDITOR to your editor CLI (cursor, code, code-insiders, windsurf, vim, nvim).',
-    );
-  });
-  child.on('exit', (code) => {
-    if (!code) return;
-    console.warn(
-      `react-x11: click-to-component — \`${bin} ${args.join(' ')}\` exited ${code}. ` +
-        (stderr.trim() ? `${stderr.trim()} ` : '') +
-        `Set REACT_X11_EDITOR to the editor you actually use (currently "${name}"; ` +
-        'cursor, code, code-insiders, windsurf, vim, nvim, or any registered URI scheme).',
-    );
-  });
-  child.unref();
-}
-
 /** Briefly tint the clicked node so there is visual confirmation of what was
  * resolved, reusing the same overlay the DevTools hover highlight paints. */
 function flashHighlight(node) {

package/src/cli/dev.js

@@ -125,7 +125,7 @@ export async function runDev(file, options = {}) {
   // Before anything below loads: a module's source maps are read when it
   // loads, and only once this is on.
   process.setSourceMapsEnabled(true);
-  const { registerRefresh } = await import('../refresh/loader.js');
+  const { onTransform, registerRefresh } = await import('../refresh/loader.js');
   await registerRefresh();
   // The runtime patches React DevTools' global hook and then hands the
   // renderer to it, which has to happen before the first root commits.
@@ -135,6 +135,7 @@ export async function runDev(file, options = {}) {
   const ReactX11 = await import('../index.js');
   const { NOT_IN_WINDOW } = await import('../errors.js');
   const { liveApps } = await import('../trace-registry.js');
+  const { ErrorWindow, describeError } = await import('./errorwindow.js');
 
   // What `node file.jsx …args` would hand the app.
   process.argv = [process.argv[0], path, ...args];
@@ -210,19 +211,55 @@ export async function runDev(file, options = {}) {
   const title = `${basename(path)} — react-x11 dev`;
   let wrapped = false;
   let mixedNoted = false;
+  // What the error window shows: a render error took the app's tree down,
+  // and the app stays down until the next reload tries it again; a compile
+  // error is a save that did not compile, beside an app still running the
+  // module's last version. Both at once shows the compile error, which is
+  // the newer news.
+  let renderFailure = null;
+  let compileFailure = null;
+  // Set when a reload starts while a render error is showing: that reload is
+  // the one to try the app again on. Not the reload that threw — react-refresh
+  // calls the reload listeners in the same batch as the render that failed,
+  // and retrying there would only throw it a second time.
+  let retry = false;
   let root = null;
+  // Two children, always in these places: an error window opening or
+  // closing beside the app is then a sibling coming and going, and the app's
+  // state is untouched by it.
   const tree = () => {
     const app = React.createElement(App);
-    return wrapped
-      ? React.createElement('window', { ...DEV_WINDOW, title }, app)
-      : app;
+    const failure = compileFailure ?? renderFailure;
+    return React.createElement(
+      React.Fragment,
+      null,
+      renderFailure
+        ? null
+        : wrapped
+          ? React.createElement('window', { ...DEV_WINDOW, title }, app)
+          : app,
+      failure
+        ? React.createElement(ErrorWindow, {
+            failure,
+            title: `${basename(failure.filename ?? path)} — error`,
+            // Beside a running app it is a second window, whose closing is
+            // ours to answer: it goes until the next error. Standing in for
+            // the app it is the only one, and closing it ends the app.
+            onCloseRequest: renderFailure
+              ? undefined
+              : () => {
+                  compileFailure = null;
+                  render();
+                },
+          })
+        : null,
+    );
   };
   const render = () => root.render(tree());
-  const mounted = () => (root.app._rootChildren ?? []).length > 0;
 
   root = await (createRoot ?? ReactX11.createRoot)({
     onUncaughtError(error, info) {
-      if (error?.code === NOT_IN_WINDOW && !wrapped) {
+      if (error?.code === NOT_IN_WINDOW && !wrapped && !renderFailure) {
         wrapped = true;
         log(
           `${name} renders no <window>, so it is shown in one of react-x11 ` +
@@ -241,27 +278,65 @@ export async function runDev(file, options = {}) {
         );
         return;
       }
-      console.error(
-        'react-x11 dev: uncaught error' + (info?.componentStack ?? ''),
+      console.error(error);
+      const chain = describeError({
+        kind: 'render',
         error,
+        componentStack: info?.componentStack,
+      }).components;
+      // Already showing one: this came out of the error window itself, or
+      // the tree failed again before a reload — the terminal has it, and a
+      // window answering its own failure by mounting itself again would
+      // never stop.
+      if (renderFailure) return;
+      log(
+        (chain.length > 0 ? `thrown rendering ${chain.join(' › ')}. ` : '') +
+          `Fix it and save: ${name} is mounted again on the next reload.`,
       );
-      setImmediate(() => {
-        if (!mounted()) {
-          log(`fix it and save: ${name} is mounted again on the next reload.`);
-        }
-      });
+      renderFailure = {
+        kind: 'render',
+        error,
+        componentStack: info?.componentStack,
+      };
+      setImmediate(render);
     },
   });
 
-  // After a reload has re-rendered the edited components: take the dev
+  // A save that does not compile: the reload library prints it and keeps the
+  // module's last version, so this is the only place it can be shown. Before
+  // the mount, the import of the file itself throws, and the bin prints it.
+  //
+  // Every reload compiles at least the module it stops at, so this is also
+  // where a reload is first seen.
+  onTransform(({ filename, error }) => {
+    if (error) {
+      compileFailure = { kind: 'compile', error, filename };
+      setImmediate(render);
+      return;
+    }
+    if (renderFailure) retry = true;
+    if (compileFailure?.filename === filename) {
+      compileFailure = null;
+      setImmediate(render);
+    }
+  });
+
+  // After a reload: try an app an error took down again, and take the dev
   // window away from a tree that now brings its own. The other direction
   // needs nothing here — a tree that lost its window throws NOT_IN_WINDOW,
-  // and the handler above wraps it — and neither does a tree an error took
-  // down: react-refresh keeps the roots that failed, and renders them again
-  // on the next reload itself.
+  // and the handler above wraps it.
   const settle = () => {
-    if (!wrapped || !mounted()) return;
-    const { windows, drawn } = rootContent(root.app._rootChildren[0]);
+    if (renderFailure) {
+      if (!retry) return;
+      retry = false;
+      renderFailure = null;
+      render();
+      return;
+    }
+    if (!wrapped) return;
+    const devWindow = (root.app._rootChildren ?? [])[0];
+    if (!devWindow) return;
+    const { windows, drawn } = rootContent(devWindow);
     if (windows > 0 && drawn === 0) {
       wrapped = false;
       mixedNoted = false;