HasStimulusAttrs
A Ruby DSL for managing Stimulus.js data attributes in component-based architectures.
Built on has_dom_attrs
and stimulus_helpers
.
Installation
bundle add has_stimulus_attrs
Usage
Include HasStimulusAttrs
in your class and define a controller_name
class method:
class ModalComponent
include HasStimulusAttrs
def self.controller_name
"modal-component"
end
end
controller_name
can also be defined in a base class and dynamically resolved:
class ApplicationComponent
include HasStimulusAttrs
def self.controller_name
self.name.underscore.dasherize
end
end
class DetailsComponent < ApplicationComponent
end
DetailsComponent.controller_name
# => "details-component"
Use the DSL methods to define Stimulus attributes:
class ModalComponent < ApplicationComponent
# Controller
has_stimulus_controller # sets the "controller" data attribute using :controller_name by default
has_stimulus_controller "click-outside"
has_stimulus_controller "scroll-lock", if: :open? # conditionally add the controller
has_stimulus_controller "scroll-lock", unless: :closed? # conditionally add the controller
# Action
has_stimulus_action "click", "onClick"
has_stimulus_action "click", "onClick", if: :open?
# Class
has_stimulus_class "open", "modal--open"
has_stimulus_class "width", -> { "modal--#{width}" } # resolve the class name dynamically
# Outlet
has_stimulus_outlet "outlet", ".selector"
# Param
has_stimulus_param :id, 123
has_stimulus_param :id, -> { id }
# Target
has_stimulus_target "target"
has_stimulus_target "target", controller: "other-controller"
# Value
has_stimulus_value "id", 123
has_stimulus_value "id", -> { id }
has_stimulus_value "id", -> { id }, controller: "other-controller"
end
Development
bin/setup # Install dependencies
bin/console # Interactive prompt
Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/tomasc/has_stimulus_attrs.