stimulus-vite-helpers-2

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

This package is a fork of stimulus-vite-helpers, and will exist untill author accept my PR ElMassimo#11 🤠

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-2

Usage 🚀

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

import { Application } from 'stimulus'
import { loadControllers } from 'stimulus-vite-helpers-2'

const application = Application.start()
const controllers = import.meta.globEager('./**/*_controller.js')
loadControllers(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

loadControllers(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.