react-x11 2.49.0 → 2.51.0

package/src/nodes/styling.js

@@ -21,9 +21,85 @@ import {
   containerAnswers,
   resolveQueries,
 } from '../styles.js';
+import { readLength, UNIT_EM, UNIT_REM, UNIT_VIEWPORT } from '../shorthands.js';
+import { DEFAULT_TEXT_STYLE } from '../styles.js';
 import { CUSTOM_SEMANTIC_NAMES } from './kinds.js';
 import { DEV, shallowEqual } from './util.js';
 
+/**
+ * What a relative length on one node resolves against — `em`, `rem` and the
+ * viewport units (src/shorthands.js, `RELATIVE`) — in logical pixels, the
+ * unit everything an app writes is in. Lazy: a style written in pixels asks
+ * none of it, and pays one allocation. Each answer it gives is recorded in
+ * `deps`, which is how the node knows to resolve the style again when that
+ * answer moves (`_noteUnits`).
+ *
+ * `style` is the one being resolved, not the one in force: a `padding:
+ * '1em'` beside a `fontSize: '20px'` is 20, whichever the style had before.
+ */
+class Units {
+  constructor(node, style) {
+    this.node = node;
+    this.style = style;
+    this.deps = 0;
+    this.parentEmRead = undefined;
+    this.emRead = undefined;
+  }
+
+  /** The font size this node inherits — what `em` is on `fontSize`
+   *  itself, as in CSS. Device pixels down the cascade, at this node's
+   *  scale, so one divide brings it back. */
+  get parentEm() {
+    this.deps |= UNIT_EM;
+    if (this.parentEmRead === undefined) {
+      const node = this.node;
+      this.parentEmRead = node.inheritedTextStyle.size / (node.scale || 1);
+    }
+    return this.parentEmRead;
+  }
+
+  /** This node's own font size — its `fontSize`, read against what it
+   *  inherits where that is relative, or the inherited one. Depends on the
+   *  inheritance only when it reads it. */
+  get em() {
+    if (this.emRead === undefined) {
+      const size = this.style.fontSize;
+      let own;
+      if (size != null && size !== '') {
+        try {
+          own = readLength('fontSize', size, undefined, this);
+        } catch {
+          // the text inherits past a size it cannot read, and so does `em`
+        }
+      }
+      this.emRead = typeof own === 'number' && own >= 0 ? own : this.parentEm;
+    }
+    return this.emRead;
+  }
+
+  /** The palette's `fontSize`: the root font size here, the size every label
+   *  that names none of its own is set in. */
+  get rem() {
+    this.deps |= UNIT_REM;
+    return this.node.theme?.fontSize ?? DEFAULT_TEXT_STYLE.size;
+  }
+
+  /** The window this node is in, as a size query sees it. Before the window
+   *  has been laid out, the size it asked for, where it named one; the
+   *  size-query registry resolves the style again when the real one lands. */
+  get viewport() {
+    this.deps |= UNIT_VIEWPORT;
+    const node = this.node;
+    const root = node.root ?? (node.isWindow ? node : null);
+    if (root?.querySize) return root.querySize;
+    const props = root?.props;
+    return {
+      width: typeof props?.width === 'number' ? props.width : 0,
+      height: typeof props?.height === 'number' ? props.height : 0,
+    };
+  }
+}
+
 /**
  * A style property passed flat used to be silently dropped — it was neither
  * a layout prop, a paint prop nor an `on*` handler, so nothing looked at it
@@ -46,6 +122,9 @@ function assertNoFlatStyleProps(props, kind, semantic) {
 // style, and there is no element where a name means both.
 const NO_SEMANTIC_NAMES = new Set();
 
+/** What a style that read no relative length read: nothing. */
+const NO_UNITS = Object.freeze({ deps: 0, parentEmRead: undefined });
+
 /** A node's own style, installed onto `Node.prototype` by node.js. */
 export class NodeStyling {
   /**
@@ -81,15 +160,9 @@ export class NodeStyling {
     // window size queries fold into the base before state blocks, so a
     // `:hover` inside the wide layout still wins over the wide layout
     const kinds = queryKinds(this._baseStyle);
+    // whether a resize re-resolves this node is decided at the end, once the
+    // style has said whether it reads the window through a viewport unit
     const queried = (kinds & QUERY_SIZE) !== 0;
-    if (queried !== this._queried) {
-      this._queried = queried;
-      const root = this.root;
-      if (root?._sizeQueryNodes) {
-        if (queried) root._sizeQueryNodes.add(this);
-        else root._sizeQueryNodes.delete(this);
-      }
-    }
     // `@supports` blocks keep their own registry: what re-resolves them is
     // the server's answer changing, not a resize
     // Registered unconditionally rather than on change: a `<window>`'s own
@@ -166,20 +239,90 @@ export class NodeStyling {
       }
     }
     this._stateful = hasStateStyles(this._baseStyle);
+    const merged = this._stateful
+      ? resolveStyleStates(this._baseStyle, this.states)
+      : this._baseStyle;
     // The scale multiplies *after* every merge — state blocks, queries,
-    // the flex shorthand — so each of those keeps thinking in the logical
-    // pixels the app wrote, and device pixels exist only downstream of
-    // this line (src/scale.js).
-    return this._retarget(
-      scaleResolvedStyle(
-        resolveComputedStyle(
-          this._stateful
-            ? resolveStyleStates(this._baseStyle, this.states)
-            : this._baseStyle,
-        ),
-        this.scale,
-      ),
+    // the shorthands, the relative units — so each of those keeps thinking
+    // in the logical pixels the app wrote, and device pixels exist only
+    // downstream of this line (src/scale.js).
+    this._unitsNow = null;
+    const target = scaleResolvedStyle(
+      resolveComputedStyle(merged, this._unitsMaker()),
+      this.scale,
+    );
+    const units = this._unitsNow ?? NO_UNITS;
+    // what a loop's relative end reads (`_syncLoops`) is read through the
+    // same context, during the swap
+    // …and the basis is in place before the swap, which may walk the text
+    // cascade back through this node (`_emMoved`)
+    this._units = units;
+    this._noteUnits(units, queried, false);
+    const out = this._retarget(target);
+    this._units = null;
+    this._noteUnits(units, queried, true);
+    return out;
+  }
+
+  /**
+   * Record what this node's style read to resolve its relative lengths, and
+   * join or leave what moves each: the size-query registry for the window's
+   * size (a viewport unit asks the same question an `'@width'` block does,
+   * and is answered by the same re-resolution on a resize); the text cascade
+   * for the inherited font size (`_retext` walks it, and stops at a node
+   * whose resolution was never cached — so a node that reads it caches one);
+   * and the theme walk for the palette's (`_themeChanged`).
+   */
+  /** What makes this node's unit context, for `resolveComputedStyle` to
+   *  call only when a style has something to read; the one it made is
+   *  `_unitsNow`. Made once per node, rather than a context per style. */
+  _unitsMaker() {
+    return (this._makeUnits ??= (style) =>
+      (this._unitsNow = new Units(this, style)));
+  }
+
+  _noteUnits(units, sizeQueried, settled) {
+    this._unitDeps = units.deps;
+    this._emBasis = units.parentEmRead;
+    this._sizeQueried = sizeQueried;
+    const asks = sizeQueried || (units.deps & UNIT_VIEWPORT) !== 0;
+    if (asks !== this._queried) {
+      this._queried = asks;
+      const root = this.root;
+      if (root?._sizeQueryNodes) {
+        if (asks) root._sizeQueryNodes.add(this);
+        else root._sizeQueryNodes.delete(this);
+      }
+    }
+    // asked of the style the swap put in force, never the one before it
+    if (settled && units.deps & UNIT_EM && this._resolvedText === undefined) {
+      this.resolvedTextStyle();
+    }
+  }
+
+  /**
+   * Resolve the style again because something a relative length read moved
+   * — the font size this node inherits — with no commit to do it. The rest
+   * is the tail a re-resolution outside a commit always has
+   * (`_restyled`), plus the claim a commit would have made.
+   */
+  _unitsMoved() {
+    if (this.destroyed) return;
+    const before = this.style;
+    this._syncStyle(this.props);
+    const moved = this._restyled(
+      before,
+      'resolved against a font size that moved',
     );
+    if (moved) this._invalidateLayout('units');
+    else if (this.style !== before) this.root?.invalidate(false, this, 'units');
+  }
+
+  /** Whether the font size this node inherits is not the one its relative
+   *  lengths were resolved against. */
+  _emMoved() {
+    if (!(this._unitDeps & UNIT_EM)) return false;
+    return this.inheritedTextStyle.size / (this.scale || 1) !== this._emBasis;
   }
 
   /**
@@ -194,12 +337,24 @@ export class NodeStyling {
     // the node has a state block of its own (`_outlineExtent`)
     this._clearPaintBounds();
     if (!this._stateful || this.destroyed) return;
+    const merged = resolveStyleStates(this._baseStyle, this.states);
+    this._unitsNow = null;
     const next = scaleResolvedStyle(
-      resolveComputedStyle(resolveStyleStates(this._baseStyle, this.states)),
+      resolveComputedStyle(merged, this._unitsMaker()),
       this.scale,
     );
     if (shallowEqual(next, this._targetStyle)) return;
+    const units = this._unitsNow;
+    this._units = units;
     this._retarget(next);
+    this._units = null;
+    // a state block reads what the base did and may read more — a radius in
+    // `rem` on `:hover` — and a node keeps answering to all of it
+    if (units !== null) {
+      units.deps |= this._unitDeps;
+      units.parentEmRead ??= this._emBasis;
+      this._noteUnits(units, this._sizeQueried, true);
+    }
     // a state block may only set paint properties, so the node's own region
     // is the whole of what changed
     this.root?.invalidate(false, this, 'style-state');

package/src/nodes/window/capabilities.js

@@ -137,7 +137,7 @@ export class WindowCapabilities {
    * whatever it skipped would show the last frame's pixels.
    */
   _windowBackground() {
-    const own = this.style.backgroundColor;
+    const own = this.resolveColor(this.style.backgroundColor);
     if (isColor(own)) return own;
     const palette = this.theme.background;
     return isColor(palette) ? palette : 'white';

package/src/nodes/window/floors.js

@@ -233,24 +233,24 @@ export function collectFloorStale(node, stale, found, sweep) {
 }
 
 /**
- * Whether `node` is a box its content cannot size and its surroundings cannot
- * size either — an edge a floor measurement may stop at
+ * Whether `node` is a box its surroundings cannot size and nothing around it
+ * reads the size of — an edge a floor measurement may stop at
  * (`WindowNode._floorsScope`).
  *
- * Absolutely positioned, with a width and a height its style names as
- * numbers: it is out of its parent's flow, so nothing measured inside it
- * reaches anything above it (`contentSpan` skips it, and no floor is written
- * on it), and every pass lays it out at those numbers wherever it sits, so
- * what is inside it is measured the same in a pass over the window and in a
- * pass over it alone. Nothing in its own box resolves against its parent —
- * a percentage of padding would — and neither it nor its parent is a layout
- * host, whose children are measured tree by tree.
+ * Absolutely positioned, and the same size in every pass wherever it sits
+ * (`sizedAlike`): it is out of its parent's flow, so nothing measured inside
+ * it reaches anything above it (`contentSpan` skips it, and no floor is
+ * written on it), and what is inside it is measured the same in a pass over
+ * the window and in a pass over it alone. Nothing in its own box resolves
+ * against its parent — a percentage of padding would — and neither it nor
+ * its parent is a layout host, whose children are measured tree by tree.
  *
- * A card on a graph, a popover laid out inside the window, a sized overlay:
- * the boxes a change inside is most often confined to. An in-flow box with a
- * size of its own would do as well along its cross axis, but on its main
- * axis a flex line can grow it past its width or shrink it under a minimum
- * the author named, and that is a question about its siblings.
+ * A card on a graph, a popover laid out inside the window, a sized overlay,
+ * a badge or a label hung off a point: the boxes a change inside is most
+ * often confined to. An in-flow box with a size of its own would do as well
+ * along its cross axis, but on its main axis a flex line can grow it past
+ * its width or shrink it under a minimum the author named, and that is a
+ * question about its siblings.
  */
 export function isFloorBoundary(node) {
   const style = node.style;
@@ -259,18 +259,63 @@ export function isFloorBoundary(node) {
     !node.isWindow &&
     style.position === 'absolute' &&
     style.display !== 'none' &&
-    typeof style.width === 'number' &&
-    typeof style.height === 'number' &&
     typeof style.minWidth !== 'string' &&
     typeof style.minHeight !== 'string' &&
     typeof style.maxWidth !== 'string' &&
     typeof style.maxHeight !== 'string' &&
     !PADDINGS.some((key) => typeof style[key] === 'string') &&
     node._host === null &&
-    (node.parent?._host ?? null) === null
+    (node.parent?._host ?? null) === null &&
+    sizedAlike(node, 'width') &&
+    sizedAlike(node, 'height')
   );
 }
 
+/**
+ * Whether every pass lays this absolute box out at the same size along
+ * `axis`, whatever its containing block is offered: a number its style
+ * names, or the size of what is inside it.
+ *
+ * Yoga measures an absolute box that names no size at its content's
+ * max-content size, with no bound from the box it is placed in — down, and
+ * across under a row. Under a column it is offered the column's width to
+ * wrap in, and that is another number in each pass (none in the width
+ * pass, the real one in the heights'), so what is inside it would be
+ * measured at whatever width the pass gave it, and not at the one a pass
+ * over it alone does. Nor may anything else bound it on that axis: an edge
+ * pinned at both ends sizes it from its containing block, a ratio from the
+ * other axis, and a minimum or a maximum is applied after its content was
+ * measured — yoga lays out the height of a box held under a `maxWidth` at
+ * the width it had before it was held, and a box laid out alone at the
+ * width it was held to.
+ */
+function sizedAlike(node, axis) {
+  const style = node.style;
+  const across = axis === 'width';
+  const size = across ? style.width : style.height;
+  if (typeof size === 'number') return true;
+  if (size !== undefined && size !== 'auto') return false;
+  if (
+    (across ? style.minWidth : style.minHeight) !== undefined ||
+    (across ? style.maxWidth : style.maxHeight) !== undefined ||
+    style.aspectRatio !== undefined
+  ) {
+    return false;
+  }
+  // two insets across are both ends in one direction or the other
+  let insets = 0;
+  for (const key of across ? INSETS_ACROSS : INSETS_DOWN) {
+    if (style[key] !== undefined) insets++;
+  }
+  if (insets > 1) return false;
+  return (
+    !across || (node.parent != null && mainAxisOf(node.parent) === 'width')
+  );
+}
+
+const INSETS_ACROSS = ['left', 'right', 'start', 'end'];
+const INSETS_DOWN = ['top', 'bottom'];
+
 const PADDINGS = [
   'padding',
   'paddingTop',

package/src/nodes/window/size.js

@@ -2,7 +2,11 @@
 // floors, laying the root out, deferring floors during a live resize and
 // catching up after, and refitting the window to what it holds.
 
-import { exactLayoutConfig, measuringExactly } from '../../styles.js';
+import {
+  exactLayoutConfig,
+  measuringExactly,
+  setLayoutValue,
+} from '../../styles.js';
 import { availableArea } from '../../screens.js';
 import { Yoga } from '../../yoga.js';
 import {
@@ -185,7 +189,14 @@ export class WindowSize {
           this._floorsStale.add(boundary.parent);
         }
         // its children's floors are written from here; a sized box's own
-        // extent is its style's, and stands
+        // extent is its style's, and stands, and one its content sizes is
+        // measured with them (`_ownExtent`), or left unmeasured with them
+        if (typeof boundary.style.width !== 'number') {
+          boundary._floorW = undefined;
+        }
+        if (typeof boundary.style.height !== 'number') {
+          boundary._floorH = undefined;
+        }
         this._floorsStale.add(boundary);
         collectFloorStale(boundary, this._floorsStale, found, false);
       }
@@ -453,9 +464,10 @@ export class WindowSize {
   /**
    * One boundary's floors, measured with it laid out alone — the passes
    * `_measureContentSpans` runs over the whole tree, run over the box: its
-   * size is its style's in either, so the space everything inside it is
-   * laid out in is the same. `probe` is the height measurement's check for
-   * leaves whose width moved, stopped at the box, whose own extent stands.
+   * size is the same in either (`isFloorBoundary`), its style's or its
+   * content's, so the space everything inside it is laid out in is the
+   * same. `probe` is the height measurement's check for leaves whose width
+   * moved, stopped at the box, whose own extent stands.
    */
   _measureBoundary(boundary, axis, probe = false) {
     // on copies of its boxes (exactcopy.js): the tree's own are left as the
@@ -473,45 +485,108 @@ export class WindowSize {
     if (axis === 'width') {
       const shrunk = [];
       setMeasuringShrink(boundary, axis, shrunk);
-      // its own extent is its style's, so what it holds is read only where
-      // a floor is written from it, as down the window's columns
-      const read = NO_UNREAD_WIDTHS || this._readEveryWidth;
+      // nothing reads its own extent, so what it holds is read only where a
+      // floor is written from it, as down the window's columns — where its
+      // width is its style's: one that is its content's is as wide as the
+      // leaves in it, stretched or not, and a leaf left unshaped answers 0
+      const read =
+        NO_UNREAD_WIDTHS ||
+        this._readEveryWidth ||
+        typeof boundary.style.width !== 'number';
       const unread = [];
       if (!read) markUnreadLeaves(boundary, unread);
-      this._scopedFloorPasses += 1;
       try {
-        yoga.calculateLayout(undefined, undefined, dir);
+        this._layOutBoundary(boundary, undefined, dir);
       } finally {
         for (const leaf of unread) leaf._widthUnread = false;
       }
-      contentSpan(boundary, axis, null, this, read);
+      const span = contentSpan(boundary, axis, null, this, read);
+      if (typeof boundary.style.width !== 'number') {
+        this._ownExtent(boundary, axis, span);
+      }
       restoreShrink(shrunk);
       return;
     }
-    this._scopedFloorPasses += 1;
-    yoga.calculateLayout(undefined, undefined, dir);
+    this._layOutBoundary(boundary, undefined, dir);
     if (probe) {
       const hit = { marked: false, owed: false };
       probeHeightFloors(boundary, this, hit, boundary);
       if (hit.marked) {
         this._writeFloors('height');
-        this._scopedFloorPasses += 1;
-        yoga.calculateLayout(undefined, undefined, dir);
+        this._layOutBoundary(boundary, undefined, dir);
       }
     }
     const intrinsic = new Map();
     captureLeafHeights(boundary, intrinsic);
-    const frozen = [];
+    // …and the box's own, as the pass over the window pins it with
+    // everything else under a node being measured: one its content sizes
+    // would be measured again in the collapse, and a row that wraps take
+    // every item onto one line
+    const frozen = [boundary];
+    yoga.setWidth(yoga.getComputedWidth());
     freezeWidths(boundary, frozen);
     const shrunk = [];
     setMeasuringShrink(boundary, axis, shrunk);
-    this._scopedFloorPasses += 1;
-    yoga.calculateLayout(undefined, 0, dir);
-    contentSpan(boundary, axis, intrinsic, this);
+    this._layOutBoundary(boundary, 0, dir, true);
+    const span = contentSpan(boundary, axis, intrinsic, this);
+    if (typeof boundary.style.height !== 'number') {
+      this._ownExtent(boundary, axis, span);
+    }
     restoreWidths(frozen);
     restoreShrink(shrunk);
   }
 
+  /** A boundary its content sizes has an extent its content gives, as any
+   *  box does (`contentSpan`): nothing reads it, absolute as the box is, and
+   *  it is written here as the pass over the window would have written it,
+   *  rather than left at what the content measured before it changed. */
+  _ownExtent(boundary, axis, span) {
+    const yoga = boundary.yoga;
+    if (axis === 'width') {
+      boundary._floorW = declaresOwnMinimum(boundary, axis)
+        ? yoga.getComputedWidth()
+        : span;
+    } else {
+      boundary._floorH = declaresOwnMinimum(boundary, axis)
+        ? yoga.getComputedHeight()
+        : span;
+      boundary._floorAtW = yoga.getComputedWidth();
+    }
+    this._floorsMeasured += 1;
+  }
+
+  /**
+   * One pass over a boundary alone, laid out as yoga lays an absolute box
+   * out where it sits. A size its style names is the size it is laid out
+   * at. Along an axis it names none, it is measured at what its content
+   * asks for and laid out again at exactly that: the second pass is where a
+   * percentage inside it resolves, against the size the first one found,
+   * and squeezes what stands beside it — which a box laid out once, at no
+   * size, never does. `height` is what the pass offers down a box with a
+   * height of its own: 0 in the collapse. One as tall as its content is
+   * offered nothing in the collapse over the window either, since yoga
+   * bounds an absolute box by nothing down, and offered 0 here it would be
+   * squashed to its padding, and what gives way in it with it. `pinned`
+   * says its width is held where the last pass left it, as the collapse
+   * holds every width (`freezeWidths`).
+   */
+  _layOutBoundary(boundary, height, dir, pinned = false) {
+    const yoga = boundary.yoga;
+    const style = boundary.style;
+    const across = !pinned && typeof style.width !== 'number';
+    const down = typeof style.height !== 'number';
+    this._scopedFloorPasses += 1;
+    yoga.calculateLayout(undefined, down ? undefined : height, dir);
+    if (!across && !down) return;
+    // on the copy (`onExactCopy`), and taken off again for the next pass
+    if (across) yoga.setWidth(yoga.getComputedWidth());
+    if (down) yoga.setHeight(yoga.getComputedHeight());
+    this._scopedFloorPasses += 1;
+    yoga.calculateLayout(undefined, undefined, dir);
+    if (across) setLayoutValue(yoga, 'width', style.width);
+    if (down) setLayoutValue(yoga, 'height', style.height);
+  }
+
   /** The floors on the children of every node found stale, from the extents
    *  they carry — `writeFloors` for each. */
   _writeFloors(axis) {

package/src/refresh/loader.d.ts

@@ -35,3 +35,19 @@ export function createTransformer(options?: RefreshOptions): Promise<{
   matches(pathname: string): boolean;
   transform(source: string, filename: string): { code: string };
 }>;
+
+/** One hot module compiled: `error` is null when it compiled, and what the
+ * compiler threw when it did not. */
+export interface TransformEvent {
+  filename: string;
+  error: Error | null;
+}
+
+/**
+ * Called for every hot module the loader compiles. A save that does not
+ * compile is otherwise only printed — the app keeps running the module's last
+ * version — so this is how a host shows it. Returns an unsubscribe.
+ */
+export function onTransform(
+  listener: (event: TransformEvent) => void,
+): () => void;

package/src/refresh/loader.js

@@ -305,7 +305,8 @@ function buildTransformer({ babel, jsxTransform, refreshTransform }, options) {
     `const $RefreshSig$ = __ReactX11Refresh.createSignatureFunctionForTransform`,
     ...prelude,
   ];
-  // Stacks through hot modules are off by these lines; dev-only.
+  // One statement a line, above the module's own first line: the source map
+  // below starts that many lines down to match.
   const preludeSource = preludeLines.join(';\n') + ';';
 
   let lastModuleInfo = null;
@@ -320,7 +321,7 @@ function buildTransformer({ babel, jsxTransform, refreshTransform }, options) {
     },
     transform(source, filename) {
       lastModuleInfo = null;
-      const { code } = babel.transformSync(source, {
+      const { code, map } = babel.transformSync(source, {
         filename,
         babelrc: false,
         configFile: false,
@@ -331,7 +332,7 @@ function buildTransformer({ babel, jsxTransform, refreshTransform }, options) {
           guardPlugin,
         ],
         retainLines: true,
-        sourceMaps: 'inline',
+        sourceMaps: true,
       });
       const { opaque, names } = lastModuleInfo;
       const exportsArg =
@@ -339,13 +340,55 @@ function buildTransformer({ babel, jsxTransform, refreshTransform }, options) {
           ? 'null'
           : `{ ${names.map((n) => `${JSON.stringify(n)}: ${n}`).join(', ')} }`;
       const footer = `\n;import.meta.hot && __ReactX11Refresh.moduleReady(import.meta.hot, import.meta.url, ${exportsArg});`;
-      return { code: `${preludeSource}\n${code}${footer}` };
+      return {
+        code:
+          `${preludeSource}\n${code}${footer}\n` +
+          inlineSourceMap(map, preludeLines.length),
+      };
     },
   };
 }
 
+const transformListeners = new Set();
+
+/**
+ * Called for every hot module this loader compiles, with `{ filename, error }`
+ * — `error` null when it compiled. The seam a host needs for a save that does
+ * not compile: hot-module-replacement catches the error of a reload and only
+ * prints it, and the app keeps running the module's last version, so nothing
+ * else tells the host. `react-x11 dev` shows it in a window. Returns an
+ * unsubscribe.
+ */
+export function onTransform(listener) {
+  transformListeners.add(listener);
+  return () => transformListeners.delete(listener);
+}
+
+function reportTransform(event) {
+  for (const listener of [...transformListeners]) {
+    try {
+      listener(event);
+    } catch (err) {
+      console.error('react-x11/refresh: an onTransform listener threw', err);
+    }
+  }
+}
+
 let registered = false;
 
+/**
+ * Babel's map for a module, as the comment that carries it, moved `lines`
+ * down: babel describes its own output, and the prelude goes in above that.
+ * An empty line in a map's mappings is a `;`, so the shift is that many of
+ * them. hot-module-replacement, the layer above, composes this map into its
+ * own — which is what a stack trace through a hot module is read through.
+ */
+export function inlineSourceMap(map, lines) {
+  const shifted = { ...map, mappings: ';'.repeat(lines) + map.mappings };
+  const payload = Buffer.from(JSON.stringify(shifted)).toString('base64');
+  return `//# sourceMappingURL=data:application/json;charset=utf-8;base64,${payload}\n`;
+}
+
 /**
  * Which files stay out of the hot graph: every package in node_modules,
  * react-x11's own src/, and whatever the app's `ignore` names.
@@ -426,10 +469,17 @@ export async function registerRefresh(options = {}) {
       if (hotIgnore(filename)) {
         return nextLoad(url, context);
       }
-      const { code } = transformer.transform(
-        readFileSync(filename, 'utf8'),
-        filename,
-      );
+      let code;
+      try {
+        ({ code } = transformer.transform(
+          readFileSync(filename, 'utf8'),
+          filename,
+        ));
+      } catch (error) {
+        reportTransform({ filename, error });
+        throw error;
+      }
+      reportTransform({ filename, error: null });
       return { format: 'module', source: code, shortCircuit: true };
     },
   });