From f9f9fe4ea994f226d9ce34446e319b9bbef736bd Mon Sep 17 00:00:00 2001
From: Brenley Dueck <brenleydueck@gmail.com>
Date: Fri, 13 Nov 2026 21:13:35 -0600
Subject: [PATCH 1/2] Give each .rx module its own stylesheet; find a cold
 dependency's program

Under vite dev, a <style> edit in a non-entry module never reached the page, because the program's whole stylesheet came only on the entry and the plugin recompiles CSS per file. Under Vitest's fsModuleCache, a cached entry left builds empty, so the next changed dependency threw "no program built so far contains it".
---
 compiler/src/app.rs    |  4 +--
 compiler/src/emit.rs   |  7 +++++-
 compiler/test/vite.mjs | 44 ++++++++++++++++++++++++++++++++-
 compiler/vite.mjs      | 55 +++++++++++++++++++++++++++++++++---------
 4 files changed, 95 insertions(+), 15 deletions(-)

diff --git a/compiler/src/app.rs b/compiler/src/app.rs
index ca1f7cd4..f014d014 100644
--- a/compiler/src/app.rs
+++ b/compiler/src/app.rs
@@ -23,7 +23,7 @@ pub fn target(name: &str) -> Target {
     }
 }
 
-/// `{entry, css, modules: {path: {code, map}}}`, or `{diagnostics: [...]}` / `{error}`. `entry` is an absolute path.
+/// `{entry, css, modules: {path: {code, map, css}}}` (the program's stylesheet, and each module's own), or `{diagnostics: [...]}` / `{error}`. `entry` is an absolute path.
 /// `spa`: a client-only build, checked under 08 CN-3d.
 pub fn app(entry: &str, target: Target, module_name: &str, spa: bool) -> Value {
     // module keys are POSIX paths (`modules::join_path`); Windows takes `D:/a/b.rx` as it takes `D:\a\b.rx`
@@ -49,7 +49,7 @@ pub fn app(entry: &str, target: Target, module_name: &str, spa: bool) -> Value {
             let path = &out.paths[name];
             let text = read_disk(path).unwrap_or_default();
             let l = lower_view(module, path, target, module_name, Some((path, &text))).map_err(|e| json!({ "error": e }))?;
-            modules.insert(path.clone(), json!({ "code": l.code, "map": l.map }));
+            modules.insert(path.clone(), json!({ "code": l.code, "map": l.map, "css": out.module_css[name] }));
         }
         Ok(json!({ "entry": set.entry, "css": out.css, "modules": modules }))
     })()
diff --git a/compiler/src/emit.rs b/compiler/src/emit.rs
index ffc44a3e..1338360a 100644
--- a/compiler/src/emit.rs
+++ b/compiler/src/emit.rs
@@ -180,6 +180,8 @@ pub struct Compiled {
     pub entry: String,
     /// CSS-4: the modules' stylesheets, beside their JavaScript
     pub css: String,
+    /// CSS-4: each module's own stylesheet, by its output name
+    pub module_css: IndexMap<String, String>,
 }
 
 /// 09 MO-1: one ES module per `.rx` module. A dependency's module is a factory over the app (`__rt.module` runs it once per
@@ -197,8 +199,10 @@ pub fn compile_linked(set: &ModuleSet, extra: &[Vec<Stmt>], by_source: bool) ->
     g.by_source = by_source;
     let mut files = IndexMap::new();
     let mut paths = IndexMap::new();
+    let mut module_css = IndexMap::new();
     for path in &set.order {
         let p = &set.programs[path];
+        let css0 = g.css.len();
         g.begin_module(path, &p.decls);
         let mut deps: Vec<&str> = vec![];
         for d in &p.decls {
@@ -232,10 +236,11 @@ pub fn compile_linked(set: &ModuleSet, extra: &[Vec<Stmt>], by_source: bool) ->
             fbody.append(&mut inner);
             body.push(S::ExportDefault(Func { name: Some("module".into()), params: vec![P::Id("__rt".into())], directives: vec![], body: fbody, is_async: false, generator: false }));
         }
+        module_css.insert(g.out(path), g.css[css0..].join("\n"));
         files.insert(g.out(path), body);
         paths.insert(g.out(path), path.clone());
     }
-    Ok(Compiled { files, paths, entry: g.out(&set.entry), css: g.css.join("\n") })
+    Ok(Compiled { files, paths, entry: g.out(&set.entry), css: g.css.join("\n"), module_css })
 }
 
 struct Gen<'p> {
diff --git a/compiler/test/vite.mjs b/compiler/test/vite.mjs
index 44454d53..05af552e 100644
--- a/compiler/test/vite.mjs
+++ b/compiler/test/vite.mjs
@@ -118,9 +118,51 @@ if (!filter || "shared".includes(filter)) {   // two programs on one page, shari
 if (!filter || "todo".includes(filter)) {   // the dev server: modules transformed on request
   const dir = project("todo-dev", "todo.rx");
   const server = await vite.createServer(config(dir, "todo.rx")); await server.listen(0);
-  await drive("todo (dev)", `http://127.0.0.1:${server.httpServer.address().port}/`, todo);
+  await drive("todo (dev)", server.resolvedUrls.local[0], todo);
   await server.close();
 }
+if (!filter || "styles".includes(filter)) {   // CSS-4 under the dev server: a dependency's <style> edit reaches the page
+  const dir = project("styles-dev", "styled/main.rx");
+  mkdirSync(path.join(dir, "src/styled"));
+  writeFileSync(path.join(dir, "src/styled/main.rx"), `import { Badge } from "./badge.rx"\n\nexport default component Main() {\n  <main><Badge /></main>\n}\n`);
+  const badge = path.join(dir, "src/styled/badge.rx");
+  const style = color => `export component Badge() {\n  <style>\n    .badge { color: ${color} }\n  </style>\n  <p class="badge">badge</p>\n}\n`;
+  writeFileSync(badge, style("rgb(0, 0, 255)"));
+  const server = await vite.createServer(config(dir, "styled/main.rx")); await server.listen(0);
+  const url = server.resolvedUrls.local[0];
+  const color = page => page.$eval(".badge", e => getComputedStyle(e).color);
+  const until = async (page, want, what) => {
+    for (let i = 0; i < 40 && await color(page).catch(() => "") !== want; i++) await page.waitForTimeout(100);
+    const got = await color(page).catch(e => e.message.split("\n")[0]); if (got !== want) throw new Error(`${what}: color ${got}, not ${want}`);
+  };
+  await drive("styles (dev)", url, async page => {
+    await until(page, "rgb(0, 0, 255)", "first load");
+    writeFileSync(badge, style("rgb(255, 0, 0)"));
+    await until(page, "rgb(255, 0, 0)", "after the edit");
+    await page.reload(); await until(page, "rgb(255, 0, 0)", "after a reload");
+    const fresh = await browser.newPage();
+    try { await fresh.goto(url); await until(fresh, "rgb(255, 0, 0)", "in a new page"); } finally { await fresh.close(); }
+  });
+  await server.close();
+}
+if (!filter || "cold".includes(filter)) {   // a dependency asked for before its entry, as Vitest's `fsModuleCache` leaves it
+  const { default: rx } = await import(pathToFileURL(path.join(pkg, "vite.mjs")).href);
+  const root = project("cold", "shop/main.rx"), catalog = path.join(root, "src/shop/catalog.rx");
+  const ctx = (id, moduleId) => ({ id, moduleId, root, ssr: false, solid: { generate: "dom", hydratable: false }, addWatchFile() {} });
+  try {
+    // a commented-out import is not an edge: read as one, it would make main.rx look imported and leave no entry
+    writeFileSync(catalog, readFileSync(catalog, "utf8") + `\n// import { x } from "./main.rx"\n`);
+    const warm = rx(); warm.compile("", ctx(path.join(root, "src/shop/main.rx"), path.join(root, "src/shop/main.rx")));
+    const want = warm.compile("", ctx(catalog, `${catalog}?rx-dep`)).code;
+    const got = rx().compile("", ctx(catalog, `${catalog}?rx-dep`)).code;
+    if (got !== want) throw new Error("the dependency compiled cold differs from the one compiled after its entry");
+    writeFileSync(catalog, readFileSync(catalog, "utf8") + "\nexport bad = missingName\n");
+    let report = "";
+    try { rx().compile("", ctx(catalog, `${catalog}?rx-dep`)); } catch (e) { report = e.message; }
+    if (!/catalog\.rx:\d+(:\d+)?: error /.test(report)) throw new Error(`a cold dependency that does not compile reports ${JSON.stringify(report.slice(0, 200))}`);
+    pass++; console.log("✓ cold dependency: compiled from the program that holds it, or that program's diagnostics");
+  } catch (e) { fail++; console.log(`✗ cold dependency: ${e.message.split("\n")[0]}`); }
+}
 await browser.close();
 console.log(`\n${pass} pass, ${fail} fail (vite ${vite.version}, @solidjs/vite-plugin ${JSON.parse(readFileSync(path.join(pluginDir, "package.json"), "utf8")).version})`);
 process.exit(fail ? 1 : 0);
diff --git a/compiler/vite.mjs b/compiler/vite.mjs
index d65161b4..ed6f0275 100644
--- a/compiler/vite.mjs
+++ b/compiler/vite.mjs
@@ -3,8 +3,8 @@
 // names it explicitly.
 //
 // The crate (its Node-API build, `src/node.rs`: what `rxc app` does) already hands each module to Solid's compiler
-// (spec/11 CP-1), so a `.rx` module comes back as Solid's output for the environment's `generate`, with its source map onto the `.rx` and, on a
-// program's entry, the program's stylesheet. Solid's plugin then takes it the way it takes lowered `.tsrx`: primitive
+// (spec/11 CP-1), so a `.rx` module comes back as Solid's output for the environment's `generate`, with its source map onto the `.rx` and
+// its own stylesheet. Solid's plugin then takes it the way it takes lowered `.tsrx`: primitive
 // names, `lazy()`, the HMR refresh pass, server functions (12 SF-7a), the stylesheet as a CSS module.
 //
 // Entries find themselves. JavaScript imports only a program's entry (its default export mounts the app); an `.rx`
@@ -13,7 +13,7 @@
 // changes. The crate's output imports its dependencies as `./x.rx?rx-dep`, and a dependency is served from the build
 // of a program that contains it. A module several programs share is one module: its instance is keyed by its factory
 // (11 CP-4b `module`), not by its place in a program.
-import { existsSync, statSync } from "node:fs";
+import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
 import { createRequire } from "node:module";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
@@ -35,6 +35,29 @@ const isDep = moduleId => new URLSearchParams(moduleId.split("?")[1] ?? "").has(
 // `import __m0 from "./catalog.rx";` → `"./catalog.rx?rx-dep"` (one line each: the module's map is by line, CP-1c)
 const tagDeps = code => code.replace(/^(import \w+ from ")(\.{1,2}\/[^"?]*\.rx)(";?)$/gm, `$1$2?${DEP}$3`);
 
+const RX_IMPORT = /^import\b[^"']*?\bfrom\s+(["'])(\.{1,2}\/[^"'?]*\.rx)\1/gm;
+/** The `.rx` files under `root` from which `file` is reached by imports: first those no other `.rx` file imports. */
+function entriesOf(file, root) {
+  const importers = new Map();
+  const walk = dir => {
+    for (const e of readdirSync(dir, { withFileTypes: true })) {
+      if (e.name === "node_modules" || e.name.startsWith(".")) continue;
+      const p = path.join(dir, e.name);
+      if (e.isDirectory()) walk(p);
+      else if (e.name.endsWith(".rx")) for (const [, , spec] of readFileSync(p, "utf8").matchAll(RX_IMPORT)) {
+        const dep = path.resolve(path.dirname(p), spec);
+        importers.set(dep, [...(importers.get(dep) ?? []), p]);
+      }
+    }
+  };
+  walk(root);
+  const seen = new Set([file]);
+  for (const f of seen) for (const i of importers.get(f) ?? []) seen.add(i);
+  seen.delete(file);
+  const top = f => !importers.has(f);
+  return [...seen].sort().sort((a, b) => top(b) - top(a));
+}
+
 /** @returns {import("@solidjs/vite-plugin").Frontend} */
 export default function rx() {
   const builds = new Map();   // entry\0target\0moduleName\0spa → { entry, target, moduleName, spa, out, stamps }
@@ -50,28 +73,38 @@ export default function rx() {
     builds.set(key, b);
     return b;
   }
+  const built = (file, target, moduleName, spa) =>
+    [...builds.values()].filter(b => b.target === target && b.moduleName === moduleName && b.spa === spa && b.out.modules?.[file]);
   /** A dependency: from a build of a program that has it, rebuilt if that program changed. */
-  function containing(file, target, moduleName, spa) {
-    const has = [...builds.values()].filter(b => b.target === target && b.moduleName === moduleName && b.spa === spa && b.out.modules?.[file]);
+  function containing(file, target, moduleName, spa, root) {
+    const has = built(file, target, moduleName, spa);
     const b = has.find(fresh) ?? has[0];
-    if (!b) throw new Error(`${file} is imported as an .rx dependency, but no program built so far contains it`);
-    return build(b.entry, target, moduleName, spa);
+    if (b) return build(b.entry, target, moduleName, spa);
+    // the entry's compile was skipped (Vitest's `fsModuleCache` served it), so find the program from the files
+    let failed;
+    for (const entry of entriesOf(file, root)) {
+      const found = build(entry, target, moduleName, spa);
+      if (found.out.modules?.[file]) return found;
+      if (!failed && found.out.diagnostics) failed = found;   // the program holds it but does not compile: report why
+    }
+    if (failed) return failed;
+    throw new Error(`${file} is imported as an .rx dependency, but no program under ${root} contains it`);
   }
   return {
-    compile(_source, { id, moduleId, solid, addWatchFile }) {
+    compile(_source, { id, moduleId, root, solid, addWatchFile }) {
       const file = path.resolve(id);
       const target = solid.generate === "ssr" ? "ssr" : solid.generate === "universal" ? "universal" : "dom";
       const moduleName = solid.moduleName ?? "@solidjs/web";
       // 08 CN-3d: a client-only build (no SSR, nothing hydrates) has nothing to show on a first load nothing holds
       const spa = target === "dom" && solid.hydratable === false;
       const dep = isDep(moduleId);
-      const { entry, out } = dep ? containing(file, target, moduleName, spa) : build(file, target, moduleName, spa);
+      const { out } = dep ? containing(file, target, moduleName, spa, path.resolve(root ?? process.cwd())) : build(file, target, moduleName, spa);
       if (out.diagnostics) throw new Error(report(out.diagnostics));
       if (out.error) throw new Error(out.error);
       const m = out.modules[file];
       for (const p of Object.keys(out.modules)) if (p !== file) addWatchFile(p);
-      // CSS-4: the program's stylesheet, linked once, from its entry
-      return { code: tagDeps(m.code), map: m.map, css: !dep && file === entry ? out.css : "" };
+      // CSS-4: each module links its own stylesheet, so a module several programs share links it once
+      return { code: tagDeps(m.code), map: m.map, css: m.css ?? "" };
     },
   };
 }

From d5171e91ae39a937520802e092653c819d859152 Mon Sep 17 00:00:00 2001
From: Brenley Dueck <brenleydueck@gmail.com>
Date: Fri, 13 Nov 2026 21:36:22 -0600
Subject: [PATCH 2/2] feat(vite): hot-swap a dependency's components under vite
 dev

A dependency compiles to a factory over the app, so Solid's refresh pass finds no component to swap, and the entry's watch on every module of its program reloads the page on any edit. The front end now wraps the factory with the runtime's new hot entry, which re-runs a new version against the same app with its module-level calls answered from the first run, and its hotUpdate leaves the entry out when no other module compiles differently and the text outside the components' bodies is unchanged.
---
 CHANGELOG.md           |   7 +++
 compiler/README.md     |  10 +++-
 compiler/src/app.rs    |   2 +-
 compiler/src/emit.rs   |  50 ++++++++++++++++++-
 compiler/test/vite.mjs |  66 +++++++++++++++++++++++-
 compiler/vite.mjs      |  56 +++++++++++++++++++--
 ref/compile/rt-hot.ts  | 111 +++++++++++++++++++++++++++++++++++++++++
 runtime/build.mjs      |   6 +--
 runtime/package.json   |   4 ++
 9 files changed, 300 insertions(+), 12 deletions(-)
 create mode 100644 ref/compile/rt-hot.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 72ea93c6..a2fb8a8b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,13 @@
 
 ## Unreleased
 
+**New**
+
+- Under `vite dev`, an edit inside a dependency's components re-renders them in place instead of reloading the page:
+  the module's top-level sources and every other component's state are kept. An edit to the module's top level or to
+  an entry still reloads. The runtime's new `@reactivescript/runtime/hot` entry does the swap; it needs a
+  `@solidjs/vite-plugin` with the front end's `hotUpdate` hook.
+
 **Fixed**
 
 - `affects` on a keyed or structured source that takes a guess threw `INVALID_AFFECTS_TARGET` in a dev build, so the
diff --git a/compiler/README.md b/compiler/README.md
index 17769fb8..94a2bdd8 100644
--- a/compiler/README.md
+++ b/compiler/README.md
@@ -88,8 +88,14 @@ What happens to a `.rx` module in Vite:
 The app mounts a program with `createApp` from `@reactivescript/runtime`
 (`../runtime`, CP-4a), as the examples do.
 
-Not yet: hot updates of `.rx` modules are untested; server rendering in Vite
-needs a request-scoped app for server functions to run in.
+Hot updates: with a Solid plugin that has the front end's `hotUpdate` hook,
+an edit inside a dependency's components (markup, logic, `<style>`) swaps
+them in place through `@reactivescript/runtime/hot`, keeping the module's
+sources and every other component's state. An edit to a module's top level,
+or to an entry, reloads the page.
+
+Not yet: server rendering in Vite needs a request-scoped app for server
+functions to run in.
 
 ### Releasing
 
diff --git a/compiler/src/app.rs b/compiler/src/app.rs
index f014d014..7e1958a5 100644
--- a/compiler/src/app.rs
+++ b/compiler/src/app.rs
@@ -49,7 +49,7 @@ pub fn app(entry: &str, target: Target, module_name: &str, spa: bool) -> Value {
             let path = &out.paths[name];
             let text = read_disk(path).unwrap_or_default();
             let l = lower_view(module, path, target, module_name, Some((path, &text))).map_err(|e| json!({ "error": e }))?;
-            modules.insert(path.clone(), json!({ "code": l.code, "map": l.map, "css": out.module_css[name] }));
+            modules.insert(path.clone(), json!({ "code": l.code, "map": l.map, "css": out.module_css[name], "hot": out.module_hot.get(name).map(|(c, top)| json!({ "components": c, "top": top })) }));
         }
         Ok(json!({ "entry": set.entry, "css": out.css, "modules": modules }))
     })()
diff --git a/compiler/src/emit.rs b/compiler/src/emit.rs
index 1338360a..59a7e9e9 100644
--- a/compiler/src/emit.rs
+++ b/compiler/src/emit.rs
@@ -182,6 +182,9 @@ pub struct Compiled {
     pub css: String,
     /// CSS-4: each module's own stylesheet, by its output name
     pub module_css: IndexMap<String, String>,
+    /// a dependency's exported components and a fingerprint of the rest of its text, by output name: a dev server swaps the
+    /// components when the fingerprint holds
+    pub module_hot: IndexMap<String, (Vec<String>, String)>,
 }
 
 /// 09 MO-1: one ES module per `.rx` module. A dependency's module is a factory over the app (`__rt.module` runs it once per
@@ -200,6 +203,7 @@ pub fn compile_linked(set: &ModuleSet, extra: &[Vec<Stmt>], by_source: bool) ->
     let mut files = IndexMap::new();
     let mut paths = IndexMap::new();
     let mut module_css = IndexMap::new();
+    let mut module_hot = IndexMap::new();
     for path in &set.order {
         let p = &set.programs[path];
         let css0 = g.css.len();
@@ -234,13 +238,57 @@ pub fn compile_linked(set: &ModuleSet, extra: &[Vec<Stmt>], by_source: bool) ->
             body.append(&mut g.top);
             let mut fbody = vec![konst("__B", dot(id("__rt"), "B"))];
             fbody.append(&mut inner);
+            if let Some(shape) = hot_shape(p, set.sources.get(path).map(String::as_str).unwrap_or("")) {
+                module_hot.insert(g.out(path), shape);
+            }
             body.push(S::ExportDefault(Func { name: Some("module".into()), params: vec![P::Id("__rt".into())], directives: vec![], body: fbody, is_async: false, generator: false }));
         }
         module_css.insert(g.out(path), g.css[css0..].join("\n"));
         files.insert(g.out(path), body);
         paths.insert(g.out(path), path.clone());
     }
-    Ok(Compiled { files, paths, entry: g.out(&set.entry), css: g.css.join("\n"), module_css })
+    Ok(Compiled { files, paths, entry: g.out(&set.entry), css: g.css.join("\n"), module_css, module_hot })
+}
+
+/// A dependency's exported components, and a hash of its text outside their bodies (each component's header stays in it);
+/// `None` when that text names a JS import or calls an `.rx` one, which a replay would call again outside its record.
+fn hot_shape(p: &Program, text: &str) -> Option<(Vec<String>, String)> {
+    use std::hash::{Hash, Hasher};
+    let names = |js: bool| -> Vec<String> {
+        p.decls.iter().filter_map(|d| match d { Decl::Import { resolved, names, .. } if resolved.is_none() == js => Some(names), _ => None }).flatten().map(|n| regex::escape(&n.alias)).collect()
+    };
+    let (js, rx) = (names(true), names(false));
+    let mut alts = vec![];
+    if !js.is_empty() {
+        alts.push(format!(r"\b(?:{})\b", js.join("|")));
+    }
+    if !rx.is_empty() {
+        alts.push(format!(r"\b(?:{})\s*\(", rx.join("|")));
+    }
+    let word = (!alts.is_empty()).then(|| regex::Regex::new(&alts.join("|")).ok()).flatten();
+    let mut h = std::collections::hash_map::DefaultHasher::new();
+    let mut components = vec![];
+    for d in &p.decls {
+        let span = d.span();
+        let (start, end) = (span.start as usize, span.end as usize);
+        let own = text.get(start..end).unwrap_or("");
+        match d {
+            Decl::Component { name, props, props_type, exported, is_default, .. } => {
+                (name, props, props_type, exported, is_default).hash(&mut h);
+                if *exported {
+                    components.push(name.clone());
+                }
+            }
+            Decl::Import { .. } => own.hash(&mut h),
+            _ => {
+                if word.as_ref().is_some_and(|w| w.is_match(own)) {
+                    return None;
+                }
+                own.hash(&mut h);
+            }
+        }
+    }
+    Some((components, format!("{:016x}", h.finish())))
 }
 
 struct Gen<'p> {
diff --git a/compiler/test/vite.mjs b/compiler/test/vite.mjs
index 05af552e..75290e69 100644
--- a/compiler/test/vite.mjs
+++ b/compiler/test/vite.mjs
@@ -53,7 +53,8 @@ function project(name, entry) {
   return dir;
 }
 const config = (dir, entry) => ({
-  root: dir, configFile: false, logLevel: "warn", clearScreen: false,
+  // a cache per project: the default, under the nearest package.json, would serve one run's runtime to the next
+  root: dir, cacheDir: path.join(dir, ".vite"), configFile: false, logLevel: "warn", clearScreen: false,
   plugins: [solid()],
   server: { fs: { allow: [repo, path.dirname(deps), path.resolve(repo, "../solid-next"), pluginDir] } },
   build: { outDir: "dist", sourcemap: true, emptyOutDir: true },
@@ -145,6 +146,69 @@ if (!filter || "styles".includes(filter)) {   // CSS-4 under the dev server: a d
   });
   await server.close();
 }
+if (!filter || "hot".includes(filter)) {   // a dependency's component edit swaps in place; a top-level or entry edit reloads
+  const dir = project("hot-dev", "hot/main.rx");
+  mkdirSync(path.join(dir, "src/hot"));
+  const main = path.join(dir, "src/hot/main.rx"), panel = path.join(dir, "src/hot/panel.rx");
+  writeFileSync(main, `import { Panel } from "./panel.rx"\nimport { Other } from "./other.rx"\nimport { Tick } from "./tick.rx"\n\nexport default component Main() {\n  <main><Panel /><Other /><Tick /></main>\n}\n`);
+  writeFileSync(path.join(dir, "src/hot/other.rx"), `export component Other() {\n  source n := 0\n  <button class="other" onClick={() => { n := n + 1 }}>other {n}</button>\n}\n`);
+  // a top level that calls into JS: a replay would call it again, so its module always reloads
+  const tick = path.join(dir, "src/hot/tick.rx");
+  writeFileSync(path.join(dir, "src/hot/clock.mjs"), `export const now = () => "one";\n`);
+  writeFileSync(tick, `import pure { now } from "./clock"\n\nfirst = now()\n\nexport component Tick() {\n  <p class="tick">{first}</p>\n}\n`);
+  const lib = path.join(dir, "src/hot/lib.mjs");
+  writeFileSync(lib, `export const word = () => "one";\n`);
+  const source = ({ top = "", label = "total", color = "rgb(0, 0, 255)", step = 1 } = {}) =>
+    `import pure { word } from "./lib"\n\n${top}source total := 0\n\nexport component Panel() {\n  said = word()\n  <style>\n    .panel { color: ${color} }\n  </style>\n  <button class="panel" onClick={() => { total := total + ${step} }}>${label} {total}</button>\n  <p class="said">{said}</p>\n}\n`;
+  writeFileSync(panel, source());
+  const server = await vite.createServer(config(dir, "hot/main.rx")); await server.listen(0);
+  await drive("hot (dev)", server.resolvedUrls.local[0], async page => {
+    const seen = async () => ({
+      panel: (await page.textContent(".panel").catch(() => "")).trim(), other: (await page.textContent(".other").catch(() => "")).trim(),
+      color: await page.$eval(".panel", e => getComputedStyle(e).color).catch(() => ""), kept: await page.evaluate(() => window.__kept === 1).catch(() => false),
+      said: (await page.textContent(".said").catch(() => "")).trim(),
+    });
+    const until = async (what, want) => {
+      let got;
+      for (let i = 0; i < 50; i++) { got = await seen(); if (Object.entries(want).every(([k, v]) => got[k] === v)) return; await page.waitForTimeout(100); }
+      throw new Error(`${what}: ${JSON.stringify(got)}, not ${JSON.stringify(want)}`);
+    };
+    for (let i = 0; i < 3; i++) await page.click(".panel");
+    for (let i = 0; i < 2; i++) await page.click(".other");
+    await page.evaluate(() => { window.__kept = 1; });
+    await until("before the edits", { panel: "total 3", other: "other 2" });
+    // the module-level source and the other module's component state survive; the page is not reloaded
+    writeFileSync(panel, source({ label: "sum" }));
+    await until("after a markup edit", { panel: "sum 3", other: "other 2", kept: true });
+    writeFileSync(panel, source({ label: "sum", color: "rgb(255, 0, 0)" }));
+    await until("after a <style> edit", { color: "rgb(255, 0, 0)", panel: "sum 3", other: "other 2", kept: true });
+    writeFileSync(panel, source({ label: "plus", color: "rgb(255, 0, 0)", step: 10 }));
+    await until("after a logic edit", { panel: "plus 3", kept: true });
+    await page.click(".panel"); await until("the new handler", { panel: "plus 13", other: "other 2", kept: true });
+    // a JS module the dependency imports changed: what its top level read from it may be stale, so the page reloads
+    writeFileSync(lib, `export const word = () => "two";\n`);
+    await until("after an import's edit", { said: "two", panel: "plus 0", kept: false });
+    await page.evaluate(() => { window.__kept = 1; }); await page.click(".other");
+    writeFileSync(tick, readFileSync(tick, "utf8").replace('class="tick"', 'class="tick edited"'));
+    await until("after an edit to a module whose top level calls JS", { other: "other 0", kept: false });
+    await page.evaluate(() => { window.__kept = 1; });
+    // the module's top level changed: a reload, with the module's new state
+    writeFileSync(panel, source({ top: "base = 1\n", label: "plus", color: "rgb(255, 0, 0)" }));
+    await until("after a top-level edit", { panel: "plus 0", other: "other 0", kept: false });
+    await page.evaluate(() => { window.__kept = 1; }); await page.click(".other");
+    writeFileSync(main, readFileSync(main, "utf8").replace("<main>", `<main class="edited">`));
+    await until("after an entry edit", { other: "other 0", kept: false });
+    if (!await page.$("main.edited")) throw new Error("the entry's edit did not reach the page");
+    // a dependency that stops compiling, then compiles again, swaps as before
+    writeFileSync(panel, source({ label: "plus" }) + "\nexport bad = missingName\n"); await page.waitForTimeout(800);
+    writeFileSync(panel, source({ label: "back" }));
+    await until("after the fix", { panel: "back 0" });
+    await page.evaluate(() => { window.__kept = 1; }); await page.click(".panel");
+    writeFileSync(panel, source({ label: "again" }));
+    await until("after an edit that follows a failed compile", { panel: "again 1", kept: true });
+  });
+  await server.close();
+}
 if (!filter || "cold".includes(filter)) {   // a dependency asked for before its entry, as Vitest's `fsModuleCache` leaves it
   const { default: rx } = await import(pathToFileURL(path.join(pkg, "vite.mjs")).href);
   const root = project("cold", "shop/main.rx"), catalog = path.join(root, "src/shop/catalog.rx");
diff --git a/compiler/vite.mjs b/compiler/vite.mjs
index ed6f0275..ee5fe089 100644
--- a/compiler/vite.mjs
+++ b/compiler/vite.mjs
@@ -13,6 +13,7 @@
 // changes. The crate's output imports its dependencies as `./x.rx?rx-dep`, and a dependency is served from the build
 // of a program that contains it. A module several programs share is one module: its instance is keyed by its factory
 // (11 CP-4b `module`), not by its place in a program.
+import { createHash } from "node:crypto";
 import { existsSync, readdirSync, readFileSync, statSync } from "node:fs";
 import { createRequire } from "node:module";
 import path from "node:path";
@@ -58,6 +59,31 @@ function entriesOf(file, root) {
   return [...seen].sort().sort((a, b) => top(b) - top(a));
 }
 
+/** A dependency's factory, wrapped for hot updates (the runtime's `hot` entry); lines are only added after the module's. */
+function hotFooter(code, hot) {
+  // the code's own hash: a version re-run for an import's change, with its own code unchanged, reloads
+  const meta = { ...hot, code: createHash("sha1").update(code).digest("hex").slice(0, 16) };
+  const wrapped = code.replace(/^export default function module\(__rt\)/m, "function module(__rt)");
+  if (wrapped === code) return code;
+  return `${wrapped}
+import { hotModule as __rxHotModule } from "@reactivescript/runtime/hot";
+const __rxHot = __rxHotModule(import.meta.hot, module, ${JSON.stringify(meta)});
+export default __rxHot.factory;
+if (import.meta.hot) import.meta.hot.accept(__rxHot.accept);
+`;
+}
+
+const hasHotRuntime = new Map();
+/** Whether the project's `@reactivescript/runtime` has the `hot` entry the footer imports (0.3.1 and older do not). */
+function hotRuntime(root) {
+  if (!hasHotRuntime.has(root)) {
+    let ok = true;
+    try { createRequire(path.join(root, "package.json")).resolve("@reactivescript/runtime/hot"); } catch { ok = false; }
+    hasHotRuntime.set(root, ok);
+  }
+  return hasHotRuntime.get(root);
+}
+
 /** @returns {import("@solidjs/vite-plugin").Frontend} */
 export default function rx() {
   const builds = new Map();   // entry\0target\0moduleName\0spa → { entry, target, moduleName, spa, out, stamps }
@@ -69,10 +95,13 @@ export default function rx() {
     const out = JSON.parse(app(entry, target, moduleName, spa));
     if (out.modules) out.modules = Object.fromEntries(Object.entries(out.modules).map(([p, m]) => [path.resolve(p), m]));
     const files = out.modules ? Object.keys(out.modules) : out.diagnostics ? [...new Set([entry, ...out.diagnostics.map(d => d.file)])] : [entry];
+    if (out.modules) for (const f of files) if (f !== path.resolve(entry)) dependencies.add(f);
     const b = { entry, target, moduleName, spa, out, stamps: new Map(files.map(f => [f, mtime(f)])) };
     builds.set(key, b);
     return b;
   }
+  const restyling = new Set();   // dependencies whose stylesheet the plugin is about to ask for, after hotUpdate
+  const dependencies = new Set();   // every file a program built so far held as a dependency, kept when its program fails
   const built = (file, target, moduleName, spa) =>
     [...builds.values()].filter(b => b.target === target && b.moduleName === moduleName && b.spa === spa && b.out.modules?.[file]);
   /** A dependency: from a build of a program that has it, rebuilt if that program changed. */
@@ -91,20 +120,39 @@ export default function rx() {
     throw new Error(`${file} is imported as an .rx dependency, but no program under ${root} contains it`);
   }
   return {
-    compile(_source, { id, moduleId, root, solid, addWatchFile }) {
+    // A dependency hot-swaps (rt-hot.ts) when no other module of any program that holds it compiles differently and its
+    // text outside its components' bodies is unchanged; then the entry, which watches every module of its program, is left
+    // out of the update, so the page keeps its state. Otherwise Vite's list stands, and the entry reloads the page.
+    hotUpdate({ file, modules }) {
+      file = path.resolve(file);
+      // the plugin compiles the changed file next, by its path alone, for its stylesheet
+      if (dependencies.has(file)) restyling.add(file);
+      const holding = [...builds.values()].filter(b => b.out.modules?.[file]);
+      if (!holding.length) return;
+      for (const b of holding) {
+        const before = b.out, after = build(b.entry, b.target, b.moduleName, b.spa).out;
+        const was = before.modules[file].hot, now = after.modules?.[file]?.hot;
+        if (!was || !now || was.top !== now.top || was.components.join() !== now.components.join()) return;
+        const paths = new Set([...Object.keys(before.modules), ...Object.keys(after.modules)]);
+        for (const p of paths) if (p !== file && before.modules[p]?.code !== after.modules[p]?.code) return;
+      }
+      return modules.filter(m => isDep(m.id ?? m.url ?? ""));
+    },
+    compile(_source, { id, moduleId, root, solid, addWatchFile, hot }) {
       const file = path.resolve(id);
       const target = solid.generate === "ssr" ? "ssr" : solid.generate === "universal" ? "universal" : "dom";
       const moduleName = solid.moduleName ?? "@solidjs/web";
       // 08 CN-3d: a client-only build (no SSR, nothing hydrates) has nothing to show on a first load nothing holds
       const spa = target === "dom" && solid.hydratable === false;
-      const dep = isDep(moduleId);
-      const { out } = dep ? containing(file, target, moduleName, spa, path.resolve(root ?? process.cwd())) : build(file, target, moduleName, spa);
+      const dep = isDep(moduleId) || restyling.delete(file);
+      const projectRoot = path.resolve(root ?? process.cwd());
+      const { out } = dep ? containing(file, target, moduleName, spa, projectRoot) : build(file, target, moduleName, spa);
       if (out.diagnostics) throw new Error(report(out.diagnostics));
       if (out.error) throw new Error(out.error);
       const m = out.modules[file];
       for (const p of Object.keys(out.modules)) if (p !== file) addWatchFile(p);
       // CSS-4: each module links its own stylesheet, so a module several programs share links it once
-      return { code: tagDeps(m.code), map: m.map, css: m.css ?? "" };
+      return { code: dep && hot && m.hot && hotRuntime(projectRoot) ? hotFooter(tagDeps(m.code), m.hot) : tagDeps(m.code), map: m.map, css: m.css ?? "" };
     },
   };
 }
diff --git a/ref/compile/rt-hot.ts b/ref/compile/rt-hot.ts
new file mode 100644
index 00000000..65cf0817
--- /dev/null
+++ b/ref/compile/rt-hot.ts
@@ -0,0 +1,111 @@
+// Hot updates for a dependency under a dev server (the `@reactivescript/runtime/hot` entry, which the Vite front end
+// imports in dev client builds only). A dependency's module is a factory over the app (09 MO-1b, 11 CP-4b `module`), so
+// Solid's refresh pass finds no component at its top level to swap. This wraps the factory: its exported components
+// go out as Solid's refresh proxies, and the module-level calls the factory made on `__rt` are recorded. A new version
+// whose text outside its components' bodies is unchanged runs against the same app with each of those calls answered
+// from the record, so it creates no module-level state (the instance stays the one MO-1b promises) and its components
+// close over the first instance's sources; the proxies then render them in place. Anything else reloads the page.
+import { $$component, $$registry, type Registry } from "solid-js/refresh";
+import { resetErrorHalt, sharedConfig } from "solid-js";
+
+export interface HotMeta { components: string[]; top: string; code: string }
+interface ViteHot { data: Record<string, any>; invalidate(message?: string): void }
+type Factory = (rt: any) => Record<string, unknown>;
+type Call = { key: PropertyKey; sig: string; result: unknown };
+
+interface Instance { rt: object; calls: Call[]; exports: Record<string, unknown>; registry: Registry }
+interface State { factory: Factory; meta: HotMeta; instances: Instance[]; next?: { factory: Factory; meta: HotMeta } }
+
+const MISMATCH = Symbol("rx-hot-mismatch");
+
+/** A call's arguments with functions left out: a component's edit can change how a module-level source is made. */
+function signature(args: unknown[]) {
+  try { return JSON.stringify(args, (_, v) => typeof v === "function" ? "ƒ" : typeof v === "symbol" ? String(v) : v) ?? ""; }
+  catch { return "?"; }
+}
+
+/** `__rt` as the factory sees it: while `session.mode` is "record", each call it makes (not the calls those make) is
+ *  kept; while "replay", each is answered from `session.calls` in turn, and a call that differs throws `MISMATCH`. */
+function tap(rt: any, session: { mode: "record" | "replay" | "live"; calls: Call[]; at: number; depth: number }) {
+  return new Proxy(rt, {
+    get(target, key) {
+      const v = target[key];
+      if (typeof v !== "function" || session.mode === "live") return v;
+      return (...args: unknown[]) => {
+        if (session.depth > 0) return v.apply(target, args);
+        const sig = signature(args);
+        if (session.mode === "replay") {
+          const c = session.calls[session.at++];
+          if (!c || c.key !== key || c.sig !== sig) throw MISMATCH;
+          return c.result;
+        }
+        session.depth++;
+        try {
+          const result = v.apply(target, args);
+          session.calls.push({ key, sig, result });
+          return result;
+        } finally { session.depth--; }
+      };
+    },
+  });
+}
+
+function run(rt: object, factory: Factory, replay?: Call[]) {
+  const session = { mode: replay ? "replay" as const : "record" as const, calls: replay ?? [], at: 0, depth: 0 };
+  try {
+    const exports = factory(tap(rt, session));
+    if (replay && session.at !== replay.length) throw MISMATCH;
+    return { exports, calls: session.calls };
+  } finally { (session as { mode: string }).mode = "live"; }
+}
+
+const same = (a: HotMeta, b: HotMeta) => a.top === b.top && a.components.length === b.components.length && a.components.every((c, i) => c === b.components[i]);
+
+/** The module's factory as importers call it, and what its `import.meta.hot.accept` callback runs. */
+export function hotModule(hot: ViteHot | undefined, factory: Factory, meta: HotMeta) {
+  if (!hot) return { factory, accept() {} };
+  const state: State = hot.data.rx ??= { factory, meta, instances: [] };
+  if (state.instances.length || state.meta !== meta) state.next = { factory, meta };
+  const wrapped: Factory = rt => {
+    // MO-1b: an importer that loads this version later still gets the app's one instance
+    const had = state.instances.find(i => i.rt === rt);
+    if (had) return had.exports;
+    // an app mounted after an update takes the version the others now run
+    const { exports, calls } = run(rt, state.factory);
+    const registry = $$registry();
+    const out = { ...exports };
+    for (const c of state.meta.components) if (typeof out[c] === "function") out[c] = $$component(registry, c, out[c] as any);
+    state.instances.push({ rt, calls, exports: out, registry });
+    return out;
+  };
+  return {
+    factory: wrapped,
+    accept(mod: unknown) {
+      const next = state.next;
+      state.next = undefined;
+      if (!mod || !next) return hot.invalidate();
+      const apply = () => {
+        // the same code re-run means an import changed, which the recorded top level may have read
+        if (next.meta.code === state.meta.code) return hot.invalidate("[reactivescript] an import of the module changed");
+        if (!same(state.meta, next.meta)) return hot.invalidate("[reactivescript] the module's top level changed");
+        const swaps: [Instance, Record<string, unknown>][] = [];
+        for (const inst of state.instances) {
+          try { swaps.push([inst, run(inst.rt, next.factory, inst.calls).exports]); }
+          catch (e) {
+            if (e !== MISMATCH) console.error(e);
+            return hot.invalidate(e === MISMATCH ? "[reactivescript] the module's top level changed" : "[reactivescript] the new version threw");
+          }
+        }
+        state.factory = next.factory;
+        state.meta = next.meta;
+        // an earlier version that threw while rendering halted the scheduler; the swap would not run
+        resetErrorHalt();
+        for (const [inst, exports] of swaps) for (const c of next.meta.components) {
+          const fresh = exports[c];
+          if (typeof fresh === "function") inst.registry.components.get(c)?.update(() => fresh as any);
+        }
+      };
+      if (sharedConfig.isHydrationInProgress?.()) sharedConfig.onHydrationEnd(apply); else apply();
+    },
+  };
+}
diff --git a/runtime/build.mjs b/runtime/build.mjs
index f771654c..a0b0b601 100644
--- a/runtime/build.mjs
+++ b/runtime/build.mjs
@@ -12,7 +12,7 @@ const here = path.dirname(fileURLToPath(import.meta.url));
 const src = path.resolve(here, "../ref/compile");
 const dist = path.join(here, "dist");
 rmSync(dist, { recursive: true, force: true }); mkdirSync(dist);
-for (const [from, to] of [["rt-web.ts", "web"], ["rt-server.ts", "server"]]) {
+for (const [from, to] of [["rt-web.ts", "web"], ["rt-server.ts", "server"], ["rt-hot.ts", "hot"]]) {
   await build({ entryPoints: [path.join(src, from)], outfile: path.join(dist, `${to}.js`), format: "esm", platform: "neutral", target: "es2022", bundle: true, packages: "external", logLevel: "warning" });
 }
 // declarations, unchecked: the runtime uses Solid internals its types leave out (createErrorBoundary, sharedConfig,
@@ -21,8 +21,8 @@ const tsc = createRequire(import.meta.url).resolve("typescript/bin/tsc");
 const config = path.join(here, ".tsconfig.build.json");
 writeFileSync(config, JSON.stringify({
   compilerOptions: { declaration: true, emitDeclarationOnly: true, outDir: "dist/types", rootDir: src, module: "nodenext", moduleResolution: "nodenext", target: "es2022", skipLibCheck: true, allowImportingTsExtensions: true, noCheck: true, paths: { "*": ["./node_modules/*"] } },
-  files: [path.join(src, "rt-web.ts"), path.join(src, "rt-server.ts")],
+  files: [path.join(src, "rt-web.ts"), path.join(src, "rt-server.ts"), path.join(src, "rt-hot.ts")],
 }));
 try { execFileSync(process.execPath, [tsc, "-p", config], { stdio: "inherit", cwd: here }); }
 finally { rmSync(config); }
-for (const [from, to] of [["rt-web", "web"], ["rt-server", "server"]]) writeFileSync(path.join(dist, `${to}.d.ts`), `export * from "./types/${from}.js";\n`);
+for (const [from, to] of [["rt-web", "web"], ["rt-server", "server"], ["rt-hot", "hot"]]) writeFileSync(path.join(dist, `${to}.d.ts`), `export * from "./types/${from}.js";\n`);
diff --git a/runtime/package.json b/runtime/package.json
index 735d8360..77cbec7f 100644
--- a/runtime/package.json
+++ b/runtime/package.json
@@ -38,6 +38,10 @@
     "./server": {
       "types": "./dist/server.d.ts",
       "default": "./dist/server.js"
+    },
+    "./hot": {
+      "types": "./dist/hot.d.ts",
+      "default": "./dist/hot.js"
     }
   },
   "files": [