PART 06

HMR

The WebSocket protocol, import.meta.hot, and HotChannel dispatching across environments.

6.1HMR Protocol: WebSocket CommunicationVite's hot module replacement works by exchanging messages between the client and server over WebSocket. This article dives deep into the HMR protocol — message format, connection setup, and reconnection mechanics.
6.2The `import.meta.hot` API: Complete GuideThe browser-side HMR API — the semantics of accept / dispose / invalidate / data, and how to implement precise HMR for custom file types instead of falling back to a full page reload.
6.3The `handleHotUpdate` HookThe server-side HMR hook — when a file changes, you can intercept and customize the HMR update logic. Implement precise hot updates for custom file types instead of being limited to a full page reload.
6.4HMR Under the Environment API (HotChannel)Vite 8's Environment API gives each environment its own independent HotChannel — the client uses WebSocket, SSR uses in-process messaging, and custom environments can define their own communication method.
6.5How Frameworks Implement HMRSource-level mechanics of React Fast Refresh (OXC implementation) and Vue HMR — how frameworks use Vite's HMR API to perform component-level hot updates without losing state.
6.6Hands-on: Implementing HMR for Custom File TypesBring together everything learned in the previous sections — implement full hot update support for a .yaml config file, including server-side handleHotUpdate logic and client-side import.meta.hot acceptance.