react-x11 2.48.0 → 2.50.0

package/src/refresh/loader.js

@@ -31,11 +31,22 @@ import { markHotReloadSession } from '../registry.js';
 const RUNTIME_URL = new URL('./index.js', import.meta.url).href;
 const SRC_DIR = fileURLToPath(new URL('../', import.meta.url));
 
-const TOOLCHAIN = [
-  '@babel/core',
-  '@babel/plugin-transform-react-jsx',
-  'react-refresh',
-  'hot-module-replacement',
+/**
+ * The hot-reload toolchain: each specifier this loader imports, and the
+ * package it comes from. Optional peer dependencies, so `react-x11 dev`
+ * checks the same list before it starts (src/cli/dev.js).
+ */
+export const TOOLCHAIN = [
+  { specifier: '@babel/core', name: '@babel/core' },
+  {
+    specifier: '@babel/plugin-transform-react-jsx',
+    name: '@babel/plugin-transform-react-jsx',
+  },
+  { specifier: 'react-refresh/babel', name: 'react-refresh' },
+  {
+    specifier: 'hot-module-replacement/register',
+    name: 'hot-module-replacement',
+  },
 ];
 
 async function loadToolchain() {
@@ -54,13 +65,22 @@ async function loadToolchain() {
     '@babel/plugin-transform-react-jsx',
   );
   const refreshTransform = await load('react-refresh/babel', 'react-refresh');
+  // Resolved rather than imported: importing it registers its hooks, which
+  // has to wait until ours are in. Checked here all the same, so a missing
+  // one is this message and not a bare ERR_MODULE_NOT_FOUND after the
+  // babel hooks already went in.
+  try {
+    import.meta.resolve('hot-module-replacement/register');
+  } catch {
+    missing.push('hot-module-replacement');
+  }
   if (missing.length > 0) {
     throw new Error(
       `react-x11/refresh: the hot-reload toolchain is not installed ` +
         `(missing: ${missing.join(', ')}). It is a set of optional peer ` +
         `dependencies — an app that never hot-reloads does not carry them. ` +
         `Install them where the dev loop runs:\n\n` +
-        `  npm install --save-dev ${TOOLCHAIN.join(' ')}\n`,
+        `  npm install --save-dev ${TOOLCHAIN.map((t) => t.name).join(' ')}\n`,
     );
   }
   return {
@@ -285,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;
@@ -300,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,
@@ -311,7 +332,7 @@ function buildTransformer({ babel, jsxTransform, refreshTransform }, options) {
           guardPlugin,
         ],
         retainLines: true,
-        sourceMaps: 'inline',
+        sourceMaps: true,
       });
       const { opaque, names } = lastModuleInfo;
       const exportsArg =
@@ -319,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.
@@ -406,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 };
     },
   });

package/src/refresh/register.js

@@ -1,11 +1,14 @@
 // react-x11/refresh/register — hot reload with the defaults, for --import:
 //
-//   node --enable-source-maps --import react-x11/refresh/register app.jsx
+//   node --enable-source-maps --import react-x11/refresh/register main.jsx
 //
-// The app's entry needs no changes: the loader injects the runtime wiring
-// into every hot module, edits to components apply in place with hook
-// state intact, and `onReload` (from react-x11/refresh) is there when a
-// tool wants to observe the reloads. A tool that needs the seams —
+// The app writes no wiring of its own: the loader injects the runtime into
+// every hot module, edits to components apply in place with hook state
+// intact, and `onReload` (from react-x11/refresh) is there when a tool wants
+// to observe the reloads. What the app does owe is a split: main.jsx is
+// never watched — hot-module-replacement watches a module when another
+// imports it — so the components it mounts live in modules it imports, and
+// an app in one file never reloads. A tool that needs the seams —
 // extensions, ignore, an injected prelude — writes its own two-line
 // --import module calling registerRefresh(options) instead.
 import { registerRefresh } from './loader.js';