stimulus-vite-helpers

Helpers to easily load all your Stimulus controllers when using Vite.js

This plugin was extracted out of Jumpstart Rails with Vite.js, a starter template that you can use to start your next Rails app.

If you are looking for a simple way to integrate Vite.js in Rails, check out vite_rails.

If you would like to enable HMR for your Stimulus controllers, check out vite-plugin-stimulus-hmr.

Installation 💿

npx ni stimulus-vite-helpers

Usage 🚀

You can now register your Stimulus controllers using Vite's globEager and the registerControllers helper:

import { Application } from 'stimulus'
import { registerControllers } from 'stimulus-vite-helpers'

const application = Application.start()
const controllers = import.meta.globEager('./**/*_controller.js')
registerControllers(application, controllers)

If you are using controllers within view_component sidecar directories, the identifiers for these controllers might become lengthy and unclear

// app/components/ui/button_component/button_component_controller.js

//├ components
//│ └ ui/
//│   └ button_component/
//│     └ button_component_controller.js

//=> ui--button-component--button-component

Enabling the { nestedMode: true } flag removes the duplicated part of the controller identifier

registerControllers(application, controllers, { nestedMode: true });
// default
//=> ui--button-component--button-component

// reduced
//=> ui--button-component

For more information, check the Stimulus handbook.

Special Thanks

• Stimulus

License

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