StimulusReflex::Element and StimulusReflex Targets

[Matt-Yorkley]

Feature

Description

Finishes off the proposed StimulusReflex Element and Stimulusreflex Targets features previously started in #489 and #490.

Adds named element (the element which called the reflex) and definable targets a little bit like the Targets API in Stimulus, which can be interacted with in reflexes by applying (chainable) cable_ready operations which can omit the selector argument, eg:

# app/reflexes/example_reflex.rb

def promote_user
  user_target.add_css_class(name: "special").dispatch_event(name: "promoted", detail: { type: "boss" })
  
  if comment_targets.count > 5
    status_target.add_css_class(name: "wired")
  else
    status_target.add_css_class(name: "tired")
  end
  
  feedback_targets.remove if params[:remove_negative_feedback]
 
  morph :nothing 
end

def spicy_enumerable_examples
   # Set a class on the last comment target on the current page
  comment_targets.last.add_css_class(name: "newest-comment")
  
  # Conditionally set an attribute across multiple targets based on each element's class
  checkbox_targets.each do |checkbox|
    checkbox.set_attribute(name: "disabled") if checkbox.class.include?("naughty")
  end
  
  morph :nothing
end

The above examples are all converted automatically into valid cable_ready operations against single or multiple targets (collections of targets with the same name), and broadcast at the end of the reflex.

Defining targets and scoping targets

By default a reflex will not send targets data from the client side. Targets can be sent by setting the data-include-targets property (any truthy value) or targets can be restricted to elements within the parent controller by setting data-include-targets="controller", eg:

# Single target
<div data-reflex-target="post">Post</div>

# Multiple targets (collection)
<div data-reflex-target="comment">Comment 1</div>
<div data-reflex-target="comment">Comment 2</div>

# Call reflex with no targets data
<button data-reflex="click->ExampleReflex#test" />No targets</button>

# Call reflex with all targets on the current page
<button data-reflex="click->ExampleReflex#test" data-include-targets="" />All targets</button>

# Call a controller action that uses stimulate(), only include targets in the parent controller's scope
<div data-reflex-target="example">Not included</div>

<div data-controller="test" data-include-targets="controller">
  <div data-reflex-target="example">Included</div>
  <button data-action="test#method_with_stimulate">Scoped targets only</button>
</div>

Checklist

• My code follows the style guidelines of this project
• Checks (StandardRB & Prettier-Standard) are passing

[netlify]

✅ Deploy Preview for stimulusreflex ready!

Name	Link
🔨 Latest commit	4ab5b60
🔍 Latest deploy log	https://app.netlify.com/sites/stimulusreflex/deploys/65db56630a41100008866605
😎 Deploy Preview	https://deploy-preview-687--stimulusreflex.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.