https://github.com/elmassimo/vite-plugin-stimulus-hmr
⚡️ HMR for Stimulus controllers in Vite.js
https://github.com/elmassimo/vite-plugin-stimulus-hmr
Last synced: 11 months ago
JSON representation
⚡️ HMR for Stimulus controllers in Vite.js
- Host: GitHub
- URL: https://github.com/elmassimo/vite-plugin-stimulus-hmr
- Owner: ElMassimo
- License: mit
- Created: 2021-02-15T16:25:18.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-11-16T20:27:21.000Z (over 2 years ago)
- Last Synced: 2024-12-21T17:38:47.431Z (over 1 year ago)
- Language: TypeScript
- Size: 312 KB
- Stars: 54
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
vite-plugin-stimulus-hmr
HMR for Stimulus controllers in Vite.js
[vite_rails]: https://github.com/ElMassimo/vite_ruby/tree/main/vite_rails
[vite_ruby]: https://github.com/ElMassimo/vite_ruby/tree/main/vite_ruby
[glob]: https://vitejs.dev/guide/features.html#glob-import
[jumpstart]: https://github.com/ElMassimo/jumpstart-vite
[stimulus handbook]: https://stimulus.hotwire.dev/handbook/installing
[stimulus]: https://github.com/hotwired/stimulus
[vite_rails]: https://vite-rails.netlify.app
[vite]: http://vitejs.dev/
[idempotent]: https://turbo.hotwire.dev/handbook/building#making-transformations-idempotent
[HMR]: https://vitejs.dev/guide/features.html#hot-module-replacement
This plugin for [Vite.js][vite] 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 `connect`ed with the updated code.
## Installation 💿
HMR comes installed by default in [Jumpstart Rails with Vite.js][jumpstart],
a starter template that you can use to start your next Rails app.
If installing manually:
```bash
npx ni vite-plugin-stimulus-hmr
```
## Usage 🚀
Add it to your plugins in `vite.config.js`
```ts
// 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:
```js
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](https://opensource.org/licenses/MIT).