@unseal-ai/vite-plugin-hmr-gate

A Vite development-server plugin that buffers file watcher events until an external process releases them. It prevents HMR from reacting to incomplete multi-file writes, then refreshes the preview once the batch is ready.

Install

npm install -D @unseal-ai/vite-plugin-hmr-gate

Usage

Enable the gate with HMR_GATE=1 and add the plugin to vite.config.ts.

import { defineConfig } from "vite";
import { hmrGate } from "@unseal-ai/vite-plugin-hmr-gate";

export default defineConfig({
  plugins: [
    hmrGate({
      // Optional path fragments to let through without buffering.
      passthrough: ["/.generated/"],
    }),
  ],
});

When HMR_GATE is unset, the plugin is a no-op and Vite uses its normal HMR behavior.

Endpoints

• POST /__hmr_flush releases every buffered event, invalidates Vite's module graph, replays the watcher events, and sends one full reload. The response is { flushed, count }.
• GET /__hmr_status returns the buffered events as { gated, pending, count }.

Behavior

• Buffers change, add, and unlink events.
• Bypasses node_modules/.vite by default. Use passthrough to add paths.
• Keeps each event type once per file until flush.
• Drops a change when the file returns to its last flushed content.
• Restores Vite's original watcher emitter when the dev server closes.