@pitlane/dev 0.1.1 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,56 @@
 # @pitlane/dev
 
+## 0.3.0
+
+Dev-time hot module replacement.
+
+- Component HMR: component and `clientEntry()` exports hot-swap in place
+  during `vite dev`, preserving live island state, via the `remix/ui-hmr`
+  browser and server transforms. Both named-function and arrow forms work —
+  arrow-form component/`clientEntry()` exports are normalized to named
+  function expressions before instrumentation, so idiomatic Remix code
+  hot-swaps with no source changes.
+- Server-data HMR: editing a server-only module re-fetches the current page
+  through the app's fetch handler and reconciles the new server-rendered HTML
+  into the DOM, keeping hydrated island state — the Remix 3 analog of React
+  Router's loader/action revalidation, driven through the frame runtime. A
+  changed file the client graph serves as a script is left to component HMR
+  instead. Only `js` client modules count as client-served: plugins that scan
+  sources for their own purposes register non-script nodes for ordinary server
+  files (Tailwind's content scanner, for one), which previously classified
+  every server module as client-owned and silenced server-data HMR for the
+  whole app.
+- Revalidating is one line in the document, `<HMR />` from the new `pitlane:dev`
+  module. It is a hydrated island, so it holds a component handle and
+  revalidates with `handle.frames.top.reload()`; `remix/ui` hands the top frame
+  to components only, so nothing the plugin injects could reach it. A frame
+  reload produces no history entry and fires no `navigate` event, which leaves
+  apps that intercept navigation themselves working unchanged. Needs no
+  environment guard: in a build, and in apps with no client runtime to hydrate
+  it, the specifier resolves to a component that renders nothing and carries no
+  client code. Types come with `@pitlane/dev/assets`.
+- Revalidation waits a beat after a server change before refetching, so it
+  cannot reach the fetch handler while the server entry is still half-applied
+  (which served a dev error page on slower runtimes like workerd), and a burst
+  of saves coalesces into one refetch.
+- `@pitlane/dev/runtime` imports now inline this package's real runtime module
+  rather than a hand-written copy of `mergeAssets`, so every export stays in
+  one place. What that module imports is bundled too, which keeps the built
+  server free of any dev-dependency import.
+
+## 0.2.0
+
+Target Remix `3.0.0-beta.10`.
+
+- Raised the `remix` peer dependency to `^3.0.0-beta.10` (from
+  `^3.0.0-beta.5`). Remix beta.6 removed the legacy package-aligned `remix/*`
+  import aliases, so beta.5 and earlier are no longer supported.
+- `run()` from `remix/ui` now ships a default frame resolver and takes
+  `(src, options)`, so the documented `app/entry.browser.ts` no longer needs a
+  hand-written `resolveFrame`. The plugin itself is unchanged.
+- Tested against Vite 8.1 (Rolldown), Vite+ 0.2 (`vp`), and
+  `remix@3.0.0-beta.10`.
+
 ## 0.1.1
 
 No changes to the plugin. First release published through the tokenless

package/README.md

@@ -12,7 +12,7 @@ npm install --save-dev @pitlane/dev
 vp add -D @pitlane/dev
 ```
 
-Requires `remix@^3.0.0-beta.5` and `vite@>=7` as peers. v0.1.0 is tested against **Vite 8.1** (Rolldown), **Vite+ 0.2** (`vp`), and `remix@3.0.0-beta.5` — the [templates](https://github.com/pitlane-tools/templates) are the continuously tested reference.
+Requires `remix@^3.0.0-beta.10` and `vite@>=7` as peers. Tested against **Vite 8.1** (Rolldown), **Vite+ 0.2** (`vp`), and `remix@3.0.0-beta.10` — the [templates](https://github.com/pitlane-tools/templates) are the continuously tested reference.
 
 ## Quick start
 
@@ -65,17 +65,50 @@ run({
         let mod = await import(/* @vite-ignore */ moduleUrl);
         return mod[exportName];
     },
-    async resolveFrame(src, signal) {
-        let response = await fetch(src, { headers: { accept: "text/html" }, signal });
-        return response.body ?? (await response.text());
-    },
 });
 ```
 
 `vite dev` serves the app through your router. `vite build` produces `dist/ssr` and `dist/client`. `vite preview` serves the production build through the same fetch handler production runs.
 
-> [!NOTE]
-> Dev updates are coarse-grained today: the server entry is re-imported per request, and client edits trigger a page refresh. Remix UI's first-class HMR runtime is in progress upstream ([remix-run/remix#11515](https://github.com/remix-run/remix/pull/11515)) — we're tracking it, and `@pitlane/dev` will ship the companion transform once it lands so components hot-swap in place.
+## Hot module replacement
+
+`vite dev` hot-updates both halves of a Remix app in place, keeping live client state. Full details, including which edits preserve state and which remount, are in the [HMR guide](https://pitlane.tools/guides/hmr).
+
+**Components.** Editing a component swaps its new code in without remounting, so hydrated `clientEntry()` islands keep their state (open menus, form input, counters). This runs the [`remix/ui-hmr`](https://github.com/remix-run/remix/tree/main/packages/ui-hmr) transforms during dev. Both authoring styles hot-swap, because `@pitlane/dev` normalizes arrow-form component and `clientEntry()` exports to named functions before instrumenting them:
+
+```tsx
+// All of these hot-swap in place, preserving live state:
+export const Counter = clientEntry(import.meta.url, handle => {
+    /* ... */
+});
+export const Toggle = clientEntry(import.meta.url, function Toggle(handle) {
+    /* ... */
+});
+export const Card = handle => () => <div />;
+export function Panel(handle) {
+    /* ... */
+}
+```
+
+Only named (PascalCase) component exports in `.tsx`/`.jsx` files whose setup returns a render function are instrumented; other exports are left untouched. Editing the render function keeps live state. Editing the setup scope above the `return` remounts the component, so its state resets.
+
+**Server data.** Editing a server-only module (the document, a middleware, a route handler, any module the client never imports) re-fetches the current page through your fetch handler and reconciles the new server-rendered HTML into the DOM. Hydrated island state survives, so you see fresh server output without a full-page reload. This is the Remix 3 analog of React Router's loader/action revalidation, driven through the frame runtime rather than a client data router.
+
+It needs one line in your document:
+
+```tsx
+import { HMR } from "pitlane:dev";
+
+// ...
+<body>
+    <HMR />
+    {/* ... */}
+</body>;
+```
+
+`<HMR />` is a hydrated island, so it has a component handle, and it revalidates with `handle.frames.top.reload()`. Remix hands the top frame to components only, which is why this is a component rather than something the plugin injects. Reloading the frame produces no history entry and fires no `navigate` event, so apps that intercept navigation themselves work unchanged.
+
+Leave it unguarded: in a production build the specifier resolves to a component that renders nothing and carries no client code. Apps with `clientEntry: false` have nothing to hydrate it, so it stays inert there too. See the [HMR guide](https://pitlane.tools/guides/hmr).
 
 ## Options
 
@@ -88,11 +121,11 @@ remix({
 });
 ```
 
-| Option               | Type              | Default               | Purpose                                                                                                                         |
-| -------------------- | ----------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
-| `clientEntry`        | `string \| false` | `"app/entry.browser"` | Client entry module. Pass `false` for fully server-rendered apps with no hydration.                                             |
-| `serverEntry`        | `string`          | `"app/entry.server"`  | Server entry module, built as `dist/ssr/index.js`.                                                                              |
-| `serverEnvironments` | `string[]`        | `["ssr"]`             | Environment names the `clientEntry()` transform treats as "server".                                                             |
+| Option               | Type              | Default               | Purpose                                                                                                                                                           |
+| -------------------- | ----------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `clientEntry`        | `string \| false` | `"app/entry.browser"` | Client entry module. Pass `false` for fully server-rendered apps with no hydration.                                                                               |
+| `serverEntry`        | `string`          | `"app/entry.server"`  | Server entry module, built as `dist/ssr/index.js`.                                                                                                                |
+| `serverEnvironments` | `string[]`        | `["ssr"]`             | Environment names the `clientEntry()` transform treats as "server".                                                                                               |
 | `serverHandler`      | `boolean`         | `true`                | Serve dev requests through your server entry. Set `false` when `@cloudflare/vite-plugin`, `@netlify/vite-plugin`, or `nitro/vite` owns dev-time request handling. |
 
 ## The server entry contract
@@ -169,7 +202,14 @@ import { clientEntry, on } from "remix/ui";
 export const Counter = clientEntry(import.meta.url, handle => {
     let count = 0;
     return () => (
-        <button mix={[on("click", () => { count++; handle.update(); })]}>
+        <button
+            mix={[
+                on("click", () => {
+                    count++;
+                    handle.update();
+                }),
+            ]}
+        >
             Count: <span>{count}</span>
         </button>
     );
@@ -282,12 +322,12 @@ dist/
 
 ## Compatibility
 
-| Dependency | Tested against |
-| ---------- | -------------- |
-| `vite`     | 8.1.5          |
-| `vite-plus`| 0.2.6          |
-| `remix`    | 3.0.0-beta.5   |
-| Node       | 24 LTS, 25     |
+| Dependency  | Tested against |
+| ----------- | -------------- |
+| `vite`      | 8.1.5          |
+| `vite-plus` | 0.2.6          |
+| `remix`     | 3.0.0-beta.10  |
+| Node        | 24 LTS, 25     |
 
 Remix 3 is in beta; each `@pitlane/dev` release records the exact beta it was verified against. Rolldown is not required — the transform runs identically on generic Vite and Vite+.
 
@@ -299,7 +339,7 @@ Remix 3 is in beta; each `@pitlane/dev` release records the exact beta it was ve
 // package.json
 {
     "devDependencies": { "vite": "npm:@voidzero-dev/vite-plus-core@latest" },
-    "pnpm": { "overrides": { "vite": "npm:@voidzero-dev/vite-plus-core@latest" } }
+    "pnpm": { "overrides": { "vite": "npm:@voidzero-dev/vite-plus-core@latest" } },
 }
 ```
 

package/dist/assets.d.mts

@@ -1,7 +1,8 @@
 /**
- * Type declarations for Pitlane's `?assets=` import convention.
+ * Type declarations for Pitlane's `?assets=` import convention and the
+ * `pitlane:dev` module.
  *
- * Add to an app's tsconfig to type `?assets=` imports:
+ * Add to an app's tsconfig to type both:
  *
  * ```jsonc
  * { "compilerOptions": { "types": ["@pitlane/dev/assets"] } }
@@ -26,3 +27,20 @@ declare module "*?assets=ssr" {
     const assets: import("@pitlane/dev/runtime").ImportedAssets;
     export default assets;
 }
+
+declare module "pitlane:dev" {
+    /**
+     * Revalidates the page when a server-only module changes during `vite dev`,
+     * keeping hydrated island state. Render it once, anywhere in the document:
+     *
+     * ```tsx
+     * import { HMR } from "pitlane:dev";
+     * // ...
+     * <HMR />
+     * ```
+     *
+     * Renders nothing, and carries no client code in a production build, so it
+     * needs no environment guard.
+     */
+    export const HMR: () => () => null;
+}

package/dist/index.d.mts

@@ -41,6 +41,13 @@ interface RemixPluginOptions {
  * `clientEntry(import.meta.url, …)` hydration transform, dev serving through
  * the app's fetch handler, and a preview server for the production build.
  *
+ * During `vite dev` it also installs hot module replacement: component edits
+ * swap in place through the `remix/ui-hmr` transforms, and edits to modules the
+ * browser never loads refetch the current page through the app's fetch handler,
+ * keeping hydrated island state. Both are dev-only. The second half needs the
+ * app to render `<HMR />` from the `pitlane:dev` module, which resolves to an
+ * inert component in a build and when `clientEntry` is `false`.
+ *
  * Platform-agnostic by design: deploy targets compose alongside it in the
  * plugin array (`@cloudflare/vite-plugin`, `@netlify/vite-plugin`,
  * `nitro/vite`), or the built fetch handler runs directly on Node, Bun, and

package/dist/index.mjs

@@ -1,9 +1,10 @@
-import { mergeAssets } from "./runtime.mjs";
 import fullstack from "@hiogawa/vite-plugin-fullstack";
 import * as fs from "node:fs";
 import * as path from "node:path";
+import * as url from "node:url";
 import MagicString from "magic-string";
 import { parseSync } from "oxc-parser";
+import { transformComponentsForBrowser, transformComponentsForServer } from "remix/ui-hmr";
 //#region src/build.ts
 function isFullstackBuilder(builder) {
 	return "writeAssetsManifest" in builder && typeof builder.writeAssetsManifest === "function";
@@ -189,7 +190,7 @@ function build({ clientEntry, serverEntry }) {
 						rollupOptions: { input: hasUserClientInput ? void 0 : clientEntry || void 0 }
 					} } },
 					ssr: {
-						resolve: { noExternal: [/^@pitlane\/dev(\/|$)/] },
+						resolve: { noExternal: [/^@pitlane\/dev(\/|$)/, /^@hiogawa\/vite-plugin-fullstack(\/|$)/] },
 						build: {
 							outDir: "dist/ssr",
 							rollupOptions: { input: hasUserServerInput ? void 0 : { index: serverEntry } }
@@ -201,12 +202,18 @@ function build({ clientEntry, serverEntry }) {
 	};
 }
 const RUNTIME_MODULE_ID = "\0pitlane:runtime";
+const RUNTIME_MODULE_FILTER = new RegExp(`^${RUNTIME_MODULE_ID}$`);
 /**
 * Resolves `@pitlane/dev/runtime` imports to an inlined copy of the
 * implementation. The package is a dev dependency: built output must never
 * import it at runtime (pruned containers, Deno import maps, serverless
 * bundles), and dependency-externalization behavior varies across cores and
 * orchestrators — inlining by construction removes the variable.
+*
+* The virtual module re-exports this package's own runtime file by absolute
+* path, so the bundler inlines it and every export stays in one place. Emitting
+* hand-written source here instead would drift from the real module the moment
+* it gained an export.
 */
 function runtimeInline() {
 	return {
@@ -219,13 +226,298 @@ function runtimeInline() {
 			}
 		},
 		load: {
-			filter: { id: /^\0pitlane:runtime$/ },
+			filter: { id: RUNTIME_MODULE_FILTER },
 			handler(id) {
-				if (id === RUNTIME_MODULE_ID) return `export const mergeAssets = ${mergeAssets.toString()};\n`;
+				if (id === RUNTIME_MODULE_ID) return `export * from ${JSON.stringify(runtimeImplementationPath())};\n`;
 			}
 		}
 	};
 }
+/**
+* Absolute path to this package's runtime module. Sits beside the built plugin
+* as `runtime.mjs` in an installed package, and beside the source as
+* `runtime.ts` when the repo's own fixtures load the plugin from `src`.
+*/
+function runtimeImplementationPath() {
+	let here = path.dirname(url.fileURLToPath(import.meta.url));
+	for (let name of ["runtime.mjs", "runtime.ts"]) {
+		let candidate = path.join(here, name);
+		if (fs.existsSync(candidate)) return candidate;
+	}
+	throw new Error(`@pitlane/dev: runtime module not found next to ${here}`);
+}
+//#endregion
+//#region src/hmr-protocol.ts
+/**
+* The dev-only contract between the `serverDataHmr` plugin and the island that
+* revalidates. Shared so the two cannot drift apart.
+*/
+/** Custom Vite HMR event that asks the browser to revalidate server-rendered data. */
+const SERVER_UPDATE_EVENT = "pitlane:server-update";
+//#endregion
+//#region src/hmr-component.ts
+/** Public specifier apps import the dev HMR component from. */
+const PUBLIC_ID = "pitlane:dev";
+const ISLAND_ID = `\0${PUBLIC_ID}`;
+const INERT_ID = `\0${PUBLIC_ID}?inert`;
+/**
+* The `clientEntry()` transform asks a module for its own client URL through
+* `?assets=client` on its resolved id. This module answers for itself.
+*/
+const ISLAND_ASSETS_ID = `${ISLAND_ID}?assets=client`;
+const RESOLVED_ISLAND_ASSETS_ID = `\0${PUBLIC_ID}?island-assets`;
+/**
+* Serves the `<HMR />` component apps render in their document, which drives
+* server-data revalidation.
+*
+* The specifier is an indirection the plugin repoints by mode. During `vite dev`
+* it is a hydrated island whose handle reaches the top frame. In a build, and in
+* apps with no client runtime to hydrate it, it is a component that renders
+* nothing, so `<HMR />` can stay in the document unconditionally and cost
+* nothing in production.
+*
+* Kept virtual rather than shipped as a file on disk: a file inside the package
+* resolves outside the app's root, and the dev server hands out a `file://` URL
+* for those, which a browser refuses to import.
+*/
+function hmrComponent(clientEntry) {
+	return {
+		name: "pitlane-remix-hmr-component",
+		enforce: "pre",
+		resolveId(id) {
+			if (id === ISLAND_ASSETS_ID) return RESOLVED_ISLAND_ASSETS_ID;
+			if (id !== PUBLIC_ID) return;
+			if (this.environment.mode === "build" || clientEntry === false) return INERT_ID;
+			return ISLAND_ID;
+		},
+		load(id) {
+			if (id === INERT_ID) return INERT_SOURCE;
+			if (id === ISLAND_ID) return ISLAND_SOURCE;
+			if (id === RESOLVED_ISLAND_ASSETS_ID) return islandAssetsSource(this.environment.config.base);
+		}
+	};
+}
+/** A component that renders nothing and carries no client code. */
+const INERT_SOURCE = `export const HMR = () => () => null;\n`;
+/**
+* The island. Revalidates by reloading its top frame, which refetches the page
+* through the app's fetch handler and reconciles it, with no navigation
+* involved. Overlapping revalidations collapse into one follow-up.
+*
+* Renders nothing: it contributes markup only as the hydration marker Remix
+* emits around it, which is what gives it a handle in the browser.
+*/
+const ISLAND_SOURCE = `import { clientEntry } from "remix/ui";
+
+export const HMR = clientEntry(import.meta.url, function HMR(handle) {
+    if (import.meta.hot) {
+        let inFlight = false;
+        let queued = false;
+
+        let revalidate = async () => {
+            if (inFlight) {
+                queued = true;
+                return;
+            }
+            inFlight = true;
+            try {
+                await handle.frames.top.reload();
+            } finally {
+                inFlight = false;
+            }
+            if (queued) {
+                queued = false;
+                await revalidate();
+            }
+        };
+
+        import.meta.hot.on(${JSON.stringify(SERVER_UPDATE_EVENT)}, () => void revalidate());
+    }
+
+    return () => null;
+});
+`;
+/**
+* The island's own `?assets=client` answer: the dev-server URL for a virtual
+* module, which is what the server writes into the hydration marker for the
+* browser to import.
+*/
+function islandAssetsSource(base) {
+	let url = `${base.endsWith("/") ? base : `${base}/`}@id/__x00__${PUBLIC_ID}`;
+	return `export default { entry: ${JSON.stringify(url)}, js: [], css: [] };\n`;
+}
+//#endregion
+//#region src/hmr.ts
+/**
+* Component modules Remix authors as `.tsx`/`.jsx`. The `remix/ui-hmr` transform
+* self-guards (it returns the source unchanged when a module holds no
+* `function`-form component or `clientEntry`), so this filter only trims the
+* common non-candidates — non-JSX source, query variants like `?assets=`, and
+* dependencies — before the parse cost.
+*/
+const COMPONENT_ID_FILTER = /\.[jt]sx$/;
+/**
+* How long to wait after a server module changes before asking the browser to
+* revalidate. Vite applies the update to the server environment on its own
+* schedule; revalidating in the same tick can reach the fetch handler while the
+* server entry is still half-applied, which serves a dev error page instead of
+* the new content. The delay also coalesces bursts of saves into one refetch.
+*/
+const SERVER_UPDATE_SETTLE_MS = 50;
+/**
+* Instruments Remix UI components and `clientEntry()` exports with the
+* `remix/ui-hmr` transforms so component edits hot-swap in place while
+* preserving live component state.
+*
+* `ui-hmr` only recognizes named-function component forms, so arrow-form
+* exports (`export const Name = clientEntry(url, (handle) => …)` and
+* `export const Name = (handle) => …`) are first normalized to named function
+* expressions — the idiomatic Remix authoring style then hot-swaps without any
+* source changes. The normalization is discarded when `ui-hmr` does not
+* instrument the module, so non-component arrows are never rewritten.
+*
+* The browser transform runs in the client environment and the server transform
+* in the server environment(s); both emit the standard `import.meta.hot.accept()`
+* protocol that Vite's own HMR runtime drives.
+*
+* Dev-only: production builds never carry the wrapper indirection or the runtime
+* imports.
+*/
+function componentHmr(serverEnvironments) {
+	return {
+		name: "pitlane-remix-component-hmr",
+		apply: "serve",
+		transform: {
+			filter: { id: {
+				include: COMPONENT_ID_FILTER,
+				exclude: /\/node_modules\//
+			} },
+			handler(code, id) {
+				let source = normalizeArrowComponents(code, id) ?? code;
+				let result = serverEnvironments.has(this.environment.name) ? transformComponentsForServer(source, {
+					importSource: "remix",
+					moduleUrl: id,
+					sourceMap: true
+				}) : transformComponentsForBrowser(source, {
+					importSource: "remix",
+					moduleUrl: id,
+					sourceMap: true
+				});
+				if (!result.transformed) return;
+				return {
+					code: result.code,
+					map: result.map
+				};
+			}
+		}
+	};
+}
+/**
+* Server-data HMR, broadcast half: when a server-only module changes, tell the
+* browser to revalidate its server-rendered content. The `<HMR />` component
+* from the `pitlane:dev` module receives the event and reloads the top frame,
+* which refetches the page through the app's fetch handler and reconciles it,
+* keeping hydrated island state. This is the Remix 3 analog of React Router's
+* loader/action revalidation.
+*
+* A file counts as server-only when the client graph does not serve it as a
+* script; those are left to the client component-HMR boundary, so a
+* `function`-form component edit still hot-swaps instantly instead of triggering
+* a network reload. Only `js` client modules count: plugins that scan sources
+* for other reasons (Tailwind's content scanner, for one) register `asset` nodes
+* for ordinary server files, and treating those as client modules would silently
+* disable server-data HMR for the whole app.
+*
+* Dev-only. An app that never renders `<HMR />` simply has no listener, so the
+* event is inert.
+*/
+function serverDataHmr(serverEnvironments) {
+	let pending;
+	return {
+		name: "pitlane-remix-server-data-hmr",
+		apply: "serve",
+		hotUpdate({ file, server }) {
+			if (!serverEnvironments.has(this.environment.name)) return;
+			if (!/\.[jt]sx?$/.test(file)) return;
+			if ([...(server.environments.client?.moduleGraph)?.getModulesByFile(file) ?? []].some((module) => module.type === "js")) return;
+			clearTimeout(pending);
+			pending = setTimeout(() => {
+				pending = void 0;
+				server.hot.send({
+					type: "custom",
+					event: SERVER_UPDATE_EVENT
+				});
+			}, SERVER_UPDATE_SETTLE_MS);
+			pending.unref?.();
+		}
+	};
+}
+/**
+* Rewrites arrow-form component and `clientEntry()` exports to named function
+* expressions so `remix/ui-hmr` can instrument them. Returns the rewritten
+* source, or `undefined` when nothing qualified.
+*
+* Handles the two idiomatic Remix arrow forms:
+*
+* - `export const Name = clientEntry(url, (handle) => …)`
+* - `export const Name = (handle) => () => <jsx/>`
+*
+* Both become `export const Name = clientEntry(url, function Name(handle) { … })`
+* / `export const Name = function Name(handle) { … }`, which is behavior-
+* identical for component setup functions (they never rely on a lexical `this`
+* or `arguments`).
+*/
+function normalizeArrowComponents(code, id) {
+	if (!code.includes("=>")) return;
+	let program = parseSync(id, code).program;
+	let rewritten;
+	for (let node of program.body) {
+		if (node.type !== "ExportNamedDeclaration") continue;
+		if (node.declaration?.type !== "VariableDeclaration") continue;
+		for (let declarator of node.declaration.declarations) {
+			if (declarator.id.type !== "Identifier") continue;
+			if (!isPascalCase(declarator.id.name)) continue;
+			if (!declarator.init) continue;
+			let arrow = getNormalizableArrow(declarator.init);
+			if (!arrow) continue;
+			rewritten ??= new MagicString(code);
+			let params = getParamsSource(code, arrow);
+			let bodySource = code.slice(arrow.body.start, arrow.body.end);
+			let block = arrow.body.type === "BlockStatement" ? bodySource : `{ return ${bodySource} }`;
+			let asyncPrefix = arrow.async ? "async " : "";
+			rewritten.overwrite(arrow.start, arrow.end, `${asyncPrefix}function ${declarator.id.name}${params} ${block}`);
+		}
+	}
+	return rewritten?.toString();
+}
+/**
+* Returns the arrow function to normalize for a component export initializer:
+* the setup argument of a `clientEntry()` call, or a bare arrow component whose
+* body returns a render function. Anything else yields `undefined`.
+*/
+function getNormalizableArrow(init) {
+	if (init.type === "CallExpression" && init.callee.type === "Identifier" && init.callee.name === "clientEntry") {
+		let setup = init.arguments[1];
+		return setup?.type === "ArrowFunctionExpression" ? setup : void 0;
+	}
+	if (init.type === "ArrowFunctionExpression" && returnsRenderFunction(init)) return init;
+}
+/** A Remix component setup returns a render function; that is the HMR signal. */
+function returnsRenderFunction(arrow) {
+	let body = arrow.body;
+	if (body.type === "ArrowFunctionExpression" || body.type === "FunctionExpression") return true;
+	if (body.type === "BlockStatement") return body.body.some((statement) => statement.type === "ReturnStatement" && (statement.argument?.type === "ArrowFunctionExpression" || statement.argument?.type === "FunctionExpression"));
+	return false;
+}
+/** Source of the arrow's parameter list, always parenthesized. */
+function getParamsSource(code, arrow) {
+	let params = arrow.params;
+	if (params.length === 0) return "()";
+	return `(${code.slice(params[0].start, params[params.length - 1].end)})`;
+}
+function isPascalCase(name) {
+	return /^[A-Z]/.test(name);
+}
 //#endregion
 //#region src/preview.ts
 function isFetchHandler(value) {
@@ -344,6 +636,13 @@ function findClientEntryCalls(program) {
 * `clientEntry(import.meta.url, …)` hydration transform, dev serving through
 * the app's fetch handler, and a preview server for the production build.
 *
+* During `vite dev` it also installs hot module replacement: component edits
+* swap in place through the `remix/ui-hmr` transforms, and edits to modules the
+* browser never loads refetch the current page through the app's fetch handler,
+* keeping hydrated island state. Both are dev-only. The second half needs the
+* app to render `<HMR />` from the `pitlane:dev` module, which resolves to an
+* inert component in a build and when `clientEntry` is `false`.
+*
 * Platform-agnostic by design: deploy targets compose alongside it in the
 * plugin array (`@cloudflare/vite-plugin`, `@netlify/vite-plugin`,
 * `nitro/vite`), or the built fetch handler runs directly on Node, Bun, and
@@ -351,6 +650,7 @@ function findClientEntryCalls(program) {
 */
 function remix(options = {}) {
 	let { clientEntry = "app/entry.browser", serverEntry = "app/entry.server", serverEnvironments = ["ssr"], serverHandler = true } = options;
+	let serverEnvironmentSet = new Set(serverEnvironments);
 	return [
 		fullstack({
 			serverEnvironments,
@@ -365,7 +665,10 @@ function remix(options = {}) {
 		preview(),
 		suppressAbortErrors(),
 		normalizeWriteHead(),
-		clientEntryTransform(new Set(serverEnvironments))
+		componentHmr(serverEnvironmentSet),
+		hmrComponent(clientEntry),
+		clientEntryTransform(serverEnvironmentSet),
+		serverDataHmr(serverEnvironmentSet)
 	];
 }
 /**

package/package.json

@@ -1,7 +1,13 @@
 {
     "name": "@pitlane/dev",
-    "version": "0.1.1",
-    "description": "remix() \u2014 the Remix 3 Vite plugin: build orchestration, clientEntry() hydration transform, dev server, and preview for any Vite or Vite+ project.",
+    "version": "0.3.0",
+    "description": "remix() — the Remix 3 Vite plugin: build orchestration, clientEntry() hydration transform, dev server with component and server-data HMR, and preview for any Vite or Vite+ project.",
+    "keywords": [
+        "pitlane",
+        "remix",
+        "vite",
+        "vite-plugin"
+    ],
     "homepage": "https://pitlane.tools/package/dev/",
     "bugs": {
         "url": "https://github.com/pitlane-tools/pitlane/issues"
@@ -13,12 +19,6 @@
         "url": "git+https://github.com/pitlane-tools/pitlane.git",
         "directory": "packages/dev"
     },
-    "keywords": [
-        "remix",
-        "vite",
-        "vite-plugin",
-        "pitlane"
-    ],
     "files": [
         "dist",
         "CHANGELOG.md"
@@ -46,19 +46,20 @@
         "magic-string": "^0.30.21",
         "oxc-parser": "^0.141.0"
     },
-    "peerDependencies": {
-        "remix": "^3.0.0-beta.5",
-        "vite": ">=7.0.0"
-    },
     "devDependencies": {
         "@cloudflare/vite-plugin": "^1.31.0",
         "@types/node": "^25.5.0",
-        "remix": "3.0.0-beta.5",
+        "playwright": "1.61.1",
+        "remix": "3.0.0-beta.10",
         "typescript": "^7.0.2",
         "vite": "^8.1.5",
         "vite-plus": "^0.2.6",
         "wrangler": "^4.114.0"
     },
+    "peerDependencies": {
+        "remix": "^3.0.0-beta.10",
+        "vite": ">=7.0.0"
+    },
     "engines": {
         "node": "^20.19.0 || >=22.12.0"
     }