@uniflowed/vite 0.13.0 → 0.14.0

package/index.js

@@ -175,6 +175,51 @@ const CLIENT_COMMONJS_DEPENDENCIES = Object.freeze([
  */
 const STYLE_PREFIX = "uf-style:";
 
+/**
+ * A reserved route file: `$page.js`, `$layout.jsx`, `$not-found.mdx`, …
+ *
+ * Built from `RESERVED` rather than written out. It used to be the literal
+ * `(page|layout|middleware|not-found)`, which is a fourth spelling of a grammar
+ * that already has three, and it was already missing `route` — so adding a
+ * route handler to a running dev server did not rebuild the table and the
+ * handler stayed invisible until a restart. A list that has to match another
+ * list has to be that list.
+ */
+const RESERVED_FILE = new RegExp(
+  `/(${Object.values(RESERVED)
+    .map((value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"))
+    .join("|")})(\\.[a-z]+)?\\.(js|jsx|mdx)$`,
+);
+
+/**
+ * What the dev server sends the browser when the URL on screen has to be
+ * rendered again rather than reloaded: a server component changed, or the
+ * route table did. `virtual:uf/client` listens for it and refreshes the router
+ * on screen, which keeps every client component's state; see
+ * `refreshForHotUpdate` in `@uniflowed/router`. Any other module can listen
+ * too, through `import.meta.hot.on("uf:refresh", …)`.
+ */
+const HOT_REFRESH = Object.freeze({ type: "custom", event: "uf:refresh", data: {} });
+
+/** Whether two action tables name the same actions, module by module. */
+function sameActions(previous, next) {
+  if (previous.size !== next.size) return false;
+  for (const [file, rows] of previous) {
+    const other = next.get(file);
+    if (other == null || other.length !== rows.length) return false;
+    for (let at = 0; at < rows.length; at += 1) {
+      if (rows[at].id !== other[at].id || rows[at].export !== other[at].export) return false;
+    }
+  }
+  return true;
+}
+
+/** Send `message` to the browser, through the client environment where there is one. */
+function sendToClient(devServer, message) {
+  const hot = devServer.environments?.client?.hot ?? devServer.ws;
+  hot.send(message);
+}
+
 /** The URL a NUL-prefixed module is served at in development. */
 export function devUrlFor(id) {
   return `/@id/__x00__${id}`;
@@ -390,6 +435,8 @@ function flowPlugin({
       {
         shipsPage: (route) => kept.has(route),
         relativeTo: root,
+        // Loaders a hot update can reach; see `routesModuleSource`.
+        hot: server != null && !isProduction,
       },
     );
   };
@@ -615,6 +662,7 @@ function flowPlugin({
         return flightClientSource(entryPath, {
           instrumentation: instrumentationFile(appRoot, true),
           strictMode: strictMode && !isProduction,
+          hot: server != null && !isProduction,
           navigation,
           staleTime,
           routing,
@@ -624,6 +672,7 @@ function flowPlugin({
         return clientModuleSource(entryPath, {
           instrumentation: instrumentationFile(appRoot, true),
           strictMode: strictMode && !isProduction,
+          hot: server != null && !isProduction,
           navigation,
           staleTime,
           mount,
@@ -789,7 +838,10 @@ function flowPlugin({
       const moduleSideEffects = styled ? true : undefined;
       if (!refresh) return { code: output, map, moduleSideEffects };
       const relative = path.relative(root, cleanId(id)).split(path.sep).join("/");
-      return { ...addRefreshWrapper(output, map, relative), moduleSideEffects };
+      // A route module under the router root is refreshed as one: its loader
+      // and metadata go to the router rather than forcing a reload.
+      const route = cleanId(id).startsWith(appRoot) && RESERVED_FILE.test(cleanId(id));
+      return { ...addRefreshWrapper(output, map, relative, { route }), moduleSideEffects };
     },
 
     buildEnd() {
@@ -847,9 +899,13 @@ function flowPlugin({
     },
 
     // An edit to a server component changes what the rsc graph renders and no
-    // module the browser holds, so Vite has nothing to tell the browser. It is
-    // reloaded, which renders the edit; an edit to a client module — which the
-    // rsc graph only holds references to — is left to Fast Refresh.
+    // module the browser holds, so Vite has nothing to tell the browser. It
+    // used to reload the document, which renders the edit and throws away every
+    // `useState` on the page. Now the browser is told `uf:refresh`, and the
+    // router on screen fetches the payload for its URL again — the same thing
+    // `router.refresh()` does — so the edit arrives as a React update and the
+    // client components under it keep their state. An edit to a client module,
+    // which the rsc graph only holds references to, is left to Fast Refresh.
     hotUpdate({ modules }) {
       if (flightState == null || server == null) return;
       if (this.environment?.name !== RSC_ENVIRONMENT) return;
@@ -857,7 +913,7 @@ function flowPlugin({
         const file = module.file ?? cleanId(module.id ?? "");
         return file !== "" && !flightState.clientModules.has(file);
       });
-      if (serverSide) server.environments.client.hot.send({ type: "full-reload", path: "*" });
+      if (serverSide) server.environments.client.hot.send(HOT_REFRESH);
     },
 
     configureServer(devServer) {
@@ -920,18 +976,30 @@ function flowPlugin({
 
       // A reserved file appearing or disappearing changes the route table,
       // which lives in a virtual module the watcher knows nothing about.
-      //
-      // Built from `RESERVED` rather than written out. It used to be the
-      // literal `(page|layout|middleware|not-found)`, which is a fourth
-      // spelling of a grammar that already has three, and it was already
-      // missing `route` — so adding a route handler to a running dev server
-      // did not rebuild the table and the handler stayed invisible until a
-      // restart. A list that has to match another list has to be that list.
-      const escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-      const stems = Object.values(RESERVED).map(escapeRegExp).join("|");
-      const reserved = new RegExp(`/(${stems})(\\.[a-z]+)?\\.(js|jsx|mdx)$`);
+      // The browser's copy of the route table, read before it is invalidated:
+      // an application rendered from its modules holds one, and
+      // `virtual:uf/client` accepts a new one in place. React Server
+      // Components keep theirs on the server.
+      const browserRouteTable = () =>
+        flightState == null ? devServer.moduleGraph.getModuleById(resolved(VIRTUAL.routes)) : null;
+      // Tell the browser its route table changed, without a reload either way.
+      // React Server Components render the table on the server, so the browser
+      // only has to ask for its URL again; an application rendered from its
+      // modules is sent the new table as a hot update. A browser that has not
+      // loaded the table yet has nothing to keep, and is reloaded.
+      const sendRouteTable = (clientTable) => {
+        if (flightState != null) {
+          sendToClient(devServer, HOT_REFRESH);
+        } else if (clientTable != null && typeof devServer.reloadModule === "function") {
+          devServer.reloadModule(clientTable).catch(() => {
+            sendToClient(devServer, { type: "full-reload", path: "*" });
+          });
+        } else {
+          sendToClient(devServer, { type: "full-reload", path: "*" });
+        }
+      };
       const onRouteFile = (file) => {
-        if (!reserved.test(file) || !file.startsWith(appRoot)) return;
+        if (!RESERVED_FILE.test(file) || !file.startsWith(appRoot)) return;
         // The rsc graph's table too, where the pages, the route handlers and
         // the middleware of an application React Server Components render
         // live (ubugeeei-prod/uf#1487).
@@ -939,13 +1007,14 @@ function flowPlugin({
           devServer.moduleGraph,
           devServer.environments?.[RSC_ENVIRONMENT]?.moduleGraph,
         ].filter((graph) => graph != null);
+        const clientTable = browserRouteTable();
         for (const graph of graphs) {
           for (const id of [VIRTUAL.routes, VIRTUAL.server, VIRTUAL.client]) {
             const module = graph.getModuleById(resolved(id));
             if (module) graph.invalidateModule(module);
           }
         }
-        devServer.ws.send({ type: "full-reload", path: "*" });
+        sendRouteTable(clientTable);
       };
       devServer.watcher.on("add", onRouteFile);
       devServer.watcher.on("unlink", onRouteFile);
@@ -976,6 +1045,7 @@ function flowPlugin({
             devServer.moduleGraph,
             devServer.environments?.[RSC_ENVIRONMENT]?.moduleGraph,
           ].filter((graph) => graph != null);
+          const clientTable = browserRouteTable();
           for (const graph of graphs) {
             invalidateActionModules(graph, previousActions);
             invalidateActionModules(graph, nextActions);
@@ -984,7 +1054,18 @@ function flowPlugin({
             const actions = graph.getModuleById(resolved(VIRTUAL.actions));
             if (actions) graph.invalidateModule(actions);
           }
-          devServer.ws.send({ type: "full-reload", path: "*" });
+          // A new or removed action changes the references the browser's
+          // modules were compiled with, and those are not modules a render can
+          // replace, so that is still a reload. Anything else the manifest says
+          // — which routes ship a page, which modules are client components —
+          // is the route table's business, and arrives the way a new route
+          // file does. `uf dev` rewrites the manifest whenever a route file
+          // comes or goes, so a reload here was a reload on every new page.
+          if (sameActions(previousActions, nextActions)) {
+            sendRouteTable(clientTable);
+          } else {
+            sendToClient(devServer, { type: "full-reload", path: "*" });
+          }
         };
         devServer.watcher.on("add", onManifest);
         devServer.watcher.on("change", onManifest);

package/internal/flight.js

@@ -718,10 +718,20 @@ export function flightClientSource(appEntry, options = {}) {
   // `app.rendering.staleTime`, in seconds, and nothing for the default `0`.
   const staleTime =
     options.staleTime > 0 ? `, staleTime: ${JSON.stringify(options.staleTime)}` : "";
-  return `import { hydrateFlight } from "@uniflowed/router/rsc/client";
+  // In development, the dev server's `uf:refresh` — a server component or the
+  // route table changed — renders the URL on screen again instead of reloading
+  // it. See `hotUpdate` in `../index.js`.
+  const hot =
+    options.hot === true
+      ? `if (import.meta.hot) {
+  import.meta.hot.on("uf:refresh", () => refreshForHotUpdate());
+}
+`
+      : "";
+  return `import { hydrateFlight${options.hot === true ? ", refreshForHotUpdate" : ""} } from "@uniflowed/router/rsc/client";
 import App from ${JSON.stringify(appEntry)};
 ${clientInstrumentationSource(options.instrumentation)}hydrateFlight({ App${strictMode}${navigation}${staleTime}${routing} });
-`;
+${hot}`;
 }
 
 /**

package/internal/refresh-runtime.js

@@ -599,7 +599,18 @@ const enqueueUpdate = debounce(async () => {
   performReactRefresh();
 }, 16);
 
-export function validateRefreshBoundaryAndEnqueueUpdate(id, prevExports, nextExports) {
+// `dataExports` is uf's: a route module (`$page.js`, `$layout.js`, …) exports
+// its `loader`, `metadata` and friends beside its component, and each of those
+// is a new identity after every edit. Plain Fast Refresh calls that an
+// incompatible export and reloads the page. The router re-reads them instead —
+// the wrapper hands it the next exports — so here they only have to exist on
+// both sides.
+export function validateRefreshBoundaryAndEnqueueUpdate(
+  id,
+  prevExports,
+  nextExports,
+  dataExports = false,
+) {
   const ignoredExports = window.__getReactRefreshIgnoredExports?.({ id }) ?? [];
   if (predicateOnExport(ignoredExports, prevExports, (key) => key in nextExports) !== true) {
     return "Could not Fast Refresh (export removed)";
@@ -616,13 +627,14 @@ export function validateRefreshBoundaryAndEnqueueUpdate(id, prevExports, nextExp
       hasExports = true;
       if (isLikelyComponentType(value)) return true;
       if (isCompoundComponent(value)) return true;
+      if (dataExports) return true;
       return prevExports[key] === nextExports[key];
     },
   );
   if (hasExports && allExportsAreComponentsOrUnchanged === true) {
     enqueueUpdate();
   } else {
-    return `Could not Fast Refresh ("${allExportsAreComponentsOrUnchanged}" export is incompatible). Learn more at __README_URL__#consistent-components-exports`;
+    return `Could not Fast Refresh ("${allExportsAreComponentsOrUnchanged}" export is incompatible). Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#consistent-components-exports`;
   }
 }
 

package/internal/refresh.js

@@ -12,6 +12,20 @@
 // * every module that registered a component gets a header that points
 //   `$RefreshReg$`/`$RefreshSig$` at this module and a footer that validates
 //   the boundary and enqueues the refresh on `import.meta.hot.accept`.
+//
+// Two additions of uf's own. Every evaluation of a component module is
+// published under its path in `window.__UF_LATEST_MODULES__`, so a Server
+// Components payload that names the module resolves to the newest one — the
+// one React has mounted — rather than to the first; see `latestModule` in
+// `@uniflowed/router/internal/flight-browser.js`.
+//
+// And a route module (`$page.js`, `$layout.js`, …) is
+// wrapped with `{ route: true }`. Its `loader`, `metadata` and the rest are not
+// components, so plain Fast Refresh would give up on the first edit and reload
+// the page, state and all. Here the component half is refreshed in place and
+// the next exports go to the router (`window.__UF_HOT_ROUTE__`, installed by
+// `@uniflowed/router` in development), which runs the route again with the new
+// loader over the components React kept.
 
 import { readFileSync } from "node:fs";
 import { fileURLToPath } from "node:url";
@@ -19,8 +33,19 @@ import { fileURLToPath } from "node:url";
 /** Public URL the refresh runtime is served from. */
 export const RUNTIME_PUBLIC_PATH = "/@react-refresh";
 
-/** The resolved id Vite hands back for the runtime. */
-export const RUNTIME_RESOLVED_ID = "\0uf:react-refresh";
+/**
+ * The resolved id Vite hands back for the runtime: the public path itself, as
+ * `@vitejs/plugin-react` does.
+ *
+ * It was `\0uf:react-refresh`, and that made Fast Refresh a no-op. The
+ * preamble in the document imports `/@react-refresh` by URL, while a component
+ * module's `import "/@react-refresh"` is rewritten by Vite to the URL of the id
+ * it resolved to — `/@id/__x00__uf:react-refresh`. Two URLs are two module
+ * instances to a browser, so the runtime the preamble hooked into React was
+ * not the runtime components registered with, and every edit was "hot
+ * updated" without React ever hearing of it. One id is one URL is one runtime.
+ */
+export const RUNTIME_RESOLVED_ID = RUNTIME_PUBLIC_PATH;
 
 const RUNTIME_SOURCE_PATH = fileURLToPath(new URL("./refresh-runtime.js", import.meta.url));
 
@@ -53,7 +78,8 @@ const REACT_CLASS_COMPONENT = /extends\s+(?:React\.)?(?:Pure)?Component/;
  * The source map is shifted by the number of lines prepended, which is what
  * keeps a stack trace pointing at the author's line.
  */
-export function addRefreshWrapper(code, map, id) {
+export function addRefreshWrapper(code, map, id, options = {}) {
+  const route = options.route === true;
   const hasRefresh = REFRESH_CONTENT.test(code);
   const onlyReactComponent = !hasRefresh && REACT_CLASS_COMPONENT.test(code);
   if (!hasRefresh && !onlyReactComponent) {
@@ -98,9 +124,23 @@ ${nextCode}
 if (import.meta.hot && !inWebWorker) {
   RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
     RefreshRuntime.registerExportsForReactRefresh(${JSON.stringify(id)}, currentExports);
+    (window.__UF_LATEST_MODULES__ ??= new Map()).set(new URL(import.meta.url).pathname, currentExports);
     import.meta.hot.accept((nextExports) => {
-      if (!nextExports) return;
-      const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(${JSON.stringify(id)}, currentExports, nextExports);
+      if (!nextExports) return;${
+        // First, and whether or not the boundary holds: the router answers
+        // this module's loader with these exports from now on, so a route
+        // table rebuilt after an invalidation still renders this instance and
+        // not a second copy of the module that React has never seen.
+        route
+          ? `
+      if (typeof window.__UF_HOT_ROUTE__ !== "function") {
+        import.meta.hot.invalidate("No router is mounted to run the route again");
+        return;
+      }
+      window.__UF_HOT_ROUTE__(${JSON.stringify(id)}, nextExports);`
+          : ""
+      }
+      const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(${JSON.stringify(id)}, currentExports, nextExports${route ? ", true" : ""});
       if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
     });
   });

package/internal/routes.js

@@ -1312,6 +1312,16 @@ export const VIRTUAL = Object.freeze({
  * relative to it. Diagnostics keep a path a person can act on — a shorter one
  * — and a deploy stops describing the machine it was built on.
  *
+ * # `hot`, and which module a loader loads
+ *
+ * A dev server's browser table passes `hot: true`, and every loader then
+ * carries `ufHotFile`: the module's path relative to the root, the same key the
+ * Fast Refresh wrapper hands the router when that module is replaced. It is
+ * how a hot update to `$page.js` reaches the route that loads it — the loader
+ * itself is a closure over a specifier, and asking it again returns the module
+ * the browser already evaluated. See "Hot updates" in
+ * `@uniflowed/router/internal/runtime.js`.
+ *
  * @param {{
  *   routes: Route[],
  *   handlers?: Handler[],
@@ -1322,11 +1332,13 @@ export const VIRTUAL = Object.freeze({
  * @param {{
  *   shipsPage?: (route: Route) => boolean,
  *   relativeTo?: string,
+ *   hot?: boolean,
  * }} [options]
  */
 export function routesModuleSource(table, options = {}) {
   const shipsPage = options.shipsPage ?? (() => true);
   const relativeTo = options.relativeTo ?? null;
+  const hot = options.hot === true && relativeTo != null;
   /**
    * A `file` as this table should state it.
    *
@@ -1342,6 +1354,19 @@ export function routesModuleSource(table, options = {}) {
     }
     return path.relative(relativeTo, file).split(path.sep).join("/");
   };
+  /** A lazy `import()` of `file`, tagged with its hot-update key under `hot`. */
+  const lazy = (file) =>
+    hot
+      ? `hotLoader(${JSON.stringify(displayFile(file))}, () => import(${JSON.stringify(file)}))`
+      : `() => import(${JSON.stringify(file)})`;
+  // Declared once at the top of a development table; see `hot` above.
+  // `hotFiles` is every key the table's loaders carry, so the router can tell
+  // a module that is still routed from one whose file was deleted.
+  const hotHeader = hot
+    ? [
+        "export const hotFiles = new Set();\nconst hotLoader = (ufHotFile, load) => {\n  hotFiles.add(ufHotFile);\n  load.ufHotFile = ufHotFile;\n  return load;\n};",
+      ]
+    : [];
   const layoutIds = new Map();
   const layoutImports = [];
   const layoutId = (file) => {
@@ -1349,7 +1374,7 @@ export function routesModuleSource(table, options = {}) {
     if (id === undefined) {
       id = `layout${layoutIds.size}`;
       layoutIds.set(file, id);
-      layoutImports.push(`const ${id} = () => import(${JSON.stringify(file)});`);
+      layoutImports.push(`const ${id} = ${lazy(file)};`);
     }
     return id;
   };
@@ -1372,7 +1397,7 @@ export function routesModuleSource(table, options = {}) {
     if (id === undefined) {
       id = `loading${loadingIds.size}`;
       loadingIds.set(file, id);
-      loadingImports.push(`const ${id} = () => import(${JSON.stringify(file)});`);
+      loadingImports.push(`const ${id} = ${lazy(file)};`);
     }
     return id;
   };
@@ -1389,7 +1414,7 @@ export function routesModuleSource(table, options = {}) {
     if (id === undefined) {
       id = `template${templateIds.size}`;
       templateIds.set(file, id);
-      templateImports.push(`const ${id} = () => import(${JSON.stringify(file)});`);
+      templateImports.push(`const ${id} = ${lazy(file)};`);
     }
     return id;
   };
@@ -1406,9 +1431,7 @@ export function routesModuleSource(table, options = {}) {
   const slotDefinitions = [];
   const slotFiles = new Set();
   const slotErrorBoundary = (boundary) =>
-    boundary == null
-      ? "null"
-      : `{ above: ${boundary.above}, module: () => import(${JSON.stringify(boundary.module)}) }`;
+    boundary == null ? "null" : `{ above: ${boundary.above}, module: ${lazy(boundary.module)} }`;
   // One route a slot may render, as source. The same shape for a slot's own
   // routes and for its interceptions, because an intercepting page is composed
   // exactly the way every other page in the slot is.
@@ -1423,7 +1446,7 @@ export function routesModuleSource(table, options = {}) {
       params: ${JSON.stringify(route.params)},
       mdx: ${route.mdx},
       file: ${JSON.stringify(displayFile(route.page))},
-      page: () => import(${JSON.stringify(route.page)}),
+      page: ${lazy(route.page)},
       layouts: [${route.layouts.map(layoutId).join(", ")}],
       loading: [${(route.loading ?? [])
         .map((boundary) => `{ above: ${boundary.above}, module: ${loadingId(boundary.module)} }`)
@@ -1454,7 +1477,7 @@ export function routesModuleSource(table, options = {}) {
     const fallback =
       slot.defaultPage == null
         ? "    defaultPage: null,"
-        : `    defaultPage: () => import(${JSON.stringify(slot.defaultPage)}),
+        : `    defaultPage: ${lazy(slot.defaultPage)},
     defaultFile: ${JSON.stringify(displayFile(slot.defaultPage))},`;
     // Only when there is one, so a slot that intercepts nothing is emitted byte
     // for byte the way it was before interception existed.
@@ -1504,7 +1527,7 @@ ${routes.join(",\n")}
     params: ${JSON.stringify(route.params)},
     mdx: ${route.mdx},
     file: ${JSON.stringify(displayFile(route.page))},
-    page: () => import(${JSON.stringify(route.page)}),
+    page: ${lazy(route.page)},
     layouts: [${layouts.join(", ")}],
     loading: [${loading.join(", ")}],
     templates: [${templates.join(", ")}],
@@ -1517,8 +1540,7 @@ ${routes.join(",\n")}
   // emits a loader, and a name for `file` rather than a path nothing wrote.
   // See the note in `scanRoutes` and ubugeeei-prod/uf#351.
   const SYNTHESISED = JSON.stringify("@uniflowed/router");
-  const boundaryModule = (file) =>
-    file == null ? "null" : `() => import(${JSON.stringify(file)})`;
+  const boundaryModule = (file) => (file == null ? "null" : `${lazy(file)}`);
   const boundaryFile = (file) => (file == null ? SYNTHESISED : JSON.stringify(displayFile(file)));
 
   // A list, because a not-found is a segment file: every directory may declare
@@ -1556,7 +1578,7 @@ ${routes.join(",\n")}
     path: ${JSON.stringify(handler.path)},
     params: ${JSON.stringify(handler.params)},
     file: ${JSON.stringify(displayFile(handler.module))},
-    load: () => import(${JSON.stringify(handler.module)}),
+    load: ${lazy(handler.module)},
   }`,
   );
 
@@ -1569,7 +1591,7 @@ ${routes.join(",\n")}
     (entry) => `  {
     path: ${JSON.stringify(entry.path)},
     file: ${JSON.stringify(displayFile(entry.module))},
-    load: () => import(${JSON.stringify(entry.module)}),
+    load: ${lazy(entry.module)},
   }`,
   );
 
@@ -1603,7 +1625,7 @@ ${routes.join(",\n")}
     }
   }
 
-  return `${[...styleOnlyImports, ...layoutImports, ...loadingImports, ...templateImports, ...slotDefinitions].join("\n")}
+  return `${[...hotHeader, ...styleOnlyImports, ...layoutImports, ...loadingImports, ...templateImports, ...slotDefinitions].join("\n")}
 export const routes = [
 ${entries.join(",\n")}
 ];
@@ -1705,6 +1727,7 @@ function slotModuleFiles(slots) {
  *   strictMode?: boolean,
  *   navigation?: "client" | "document",
  *   mount?: "hydrate" | "render",
+ *   hot?: boolean,
  * }} [options]
  */
 export function clientModuleSource(appEntry, options = {}) {
@@ -1715,11 +1738,34 @@ export function clientModuleSource(appEntry, options = {}) {
   // `app.rendering.staleTime`, in seconds, and nothing for the default `0`.
   const staleTime =
     options.staleTime > 0 ? `, staleTime: ${JSON.stringify(options.staleTime)}` : "";
-  return `import { ${mount} } from "@uniflowed/router/client";
+  // In development this entry is the application's hot-update boundary for
+  // the route table: a route file added or removed is a new
+  // `virtual:uf/routes`, accepted here and installed in place, and the dev
+  // server's `uf:refresh` renders the URL on screen again. Neither reloads the
+  // document, so no component on it loses its state. A route module's own
+  // edits reach the router through its Fast Refresh wrapper instead; see
+  // `internal/refresh.js`.
+  const hot =
+    options.hot === true
+      ? `if (import.meta.hot) {
+  acceptHotRouteModules();
+  import.meta.hot.on("uf:refresh", () => refreshForHotUpdate());
+  import.meta.hot.accept(${JSON.stringify(VIRTUAL.routes)}, (next) => {
+    if (next == null) import.meta.hot.invalidate("The route table could not be replaced");
+    else replaceRoutesForHotUpdate(next);
+  });
+}
+`
+      : "";
+  const imports =
+    options.hot === true
+      ? `${mount}, acceptHotRouteModules, refreshForHotUpdate, replaceRoutesForHotUpdate`
+      : mount;
+  return `import { ${imports} } from "@uniflowed/router/client";
 import { routes, notFound, errors } from ${JSON.stringify(VIRTUAL.routes)};
 import App from ${JSON.stringify(appEntry)};
 ${clientInstrumentationSource(options.instrumentation)}${mount}({ App, routes, notFound, errors${strictMode}${navigation}${staleTime}${routing} });
-`;
+${hot}`;
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/vite",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Vite, driven by uf.config.js: every Flow module through `uf transform`, MDX, the file-system router and static rendering as Vite plugins.",
   "type": "module",
   "license": "MIT",
@@ -36,10 +36,10 @@
     "@mdx-js/rollup": "^3.1.1",
     "@ox-content/napi": "3.2.11",
     "@shikijs/rehype": "^3.23.0",
-    "@uniflowed/host": "0.13.0",
-    "@uniflowed/router": "0.13.0",
-    "@uniflowed/server": "0.13.0",
-    "@uniflowed/validator": "0.13.0",
+    "@uniflowed/host": "0.14.0",
+    "@uniflowed/router": "0.14.0",
+    "@uniflowed/server": "0.14.0",
+    "@uniflowed/validator": "0.14.0",
     "babel-plugin-relay": "^21.0.1",
     "estree-util-value-to-estree": "^3.5.0",
     "remark-gfm": "^4.0.1",