out-of-band Reflex updates about stimulus_reflex HOT 3 CLOSED

I like the idea of supporting something like this in CableReady:

cable_ready[stream_name].refresh

That is smart enough to perform any of the following based on detected support.

• Trigger an implicit default StimulusReflex to morph the page and pick up latest changes
• Turbolinks visit to reload the page
• Reload the page via window.location

from stimulus_reflex.

Wow, that would be cool.

from stimulus_reflex.

Circling back on this, it seems like the pattern that works best is to use CableReady to broadcast a message to the client. This channel handler then initiates a SR stimulate() operation, refreshing the content. I've found that a good strategy is to create a Stimulus controller that is also an ActionCable channel consumer. Indeed, I don't actually have a channels folder as all of my channels are managed by Stimulus controllers, which can easily call StimulusReflex.

By way of example, here is a complete polymorphic comment system implemented via SR and CableReady:

class CommentChannel < ApplicationCable::Channel
  def subscribed
    stream_for params[:commentable_type].constantize.find(params[:commentable_id])
  end
end

import { Controller } from 'stimulus'
import StimulusReflex from 'stimulus_reflex'
import consumer from '../lib/consumer'

export default class extends Controller {
  static targets = ['comment']

  connect () {
    this.element[this.identifier] = this
    StimulusReflex.register(this)
    if (this.element.dataset.commentableId) {
      const controller = this
      consumer.subscriptions.create(
        {
          channel: 'CommentChannel',
          commentable_type: this.element.dataset.commentableType,
          commentable_id: this.element.dataset.commentableId
        },
        {
          received () {
            controller.stimulate('ApplicationReflex#refresh')
          }
        }
      )
    }
  }

  comment (e) {
    e.preventDefault()
    if (this.commentTarget.value.length)
      this.stimulate('CommentsReflex#comment', {
        class: this.element.dataset.commentableType,
        id: this.element.dataset.commentableId,
        body: this.commentTarget.value
      })
    this.commentTarget.value = ''
  }
}

class Comment < ApplicationRecord
  belongs_to :commentable, polymorphic: true, optional: true
  belongs_to :user

  after_save do
    CommentChannel.broadcast_to(commentable, {})
  end
end

class CommentsReflex < StimulusReflex::Reflex
  delegate :current_user, to: :connection

  def comment(payload)
    current_user.comments.create({
      body: payload["body"],
      commentable_type: payload["class"],
      commentable_id: payload["id"],
    })
  end
end

The after_save callback in the Events model could just as easily be an ActiveJob perform method.

Also, the ApplicationReflex#refresh is an empty method that simply forces a content refresh.

from stimulus_reflex.