react-x11 2.49.0 → 2.50.0

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