ElMassimo/vite-plugin-stimulus-hmr

vite-plugin-stimulus-hmr

HMR for Stimulus controllers in Vite.js

This plugin for Vite.js provides HMR for Stimulus controllers, allowing you to tweak your code without having to wait for the page to refresh.

Demo 🎥

Changes to Stimulus controllers don't require a full page refresh.

The modified controller will be re-registered, so existing instances of it will disconnect, and new instances will be created and connected with the updated code.

Installation 💿

HMR comes installed by default in Jumpstart Rails with Vite.js, a starter template that you can use to start your next Rails app.

If installing manually:

npx ni vite-plugin-stimulus-hmr

Usage 🚀

Add it to your plugins in vite.config.js

// vite.config.js
import StimulusHMR from 'vite-plugin-stimulus-hmr' 

export default {
  plugins: [
    StimulusHMR(),
  ],
};

You should now enjoy HMR for your Stimulus controllers! 🚀

How does it work? 🤔

In order to simplify integration, the plugin will try to automatically detect when you define your Stimulus app, as in:

const app = Application.start()

It will then detect any controller files using the Stimulus conventions, and inject an HMR accept call that re-registers the updated controller.

Just as when you use Turbolinks, it's important that your controllers are idempotent.

License

This library is available as open source under the terms of the MIT License.