Module: Phlex::Reactive::Streamable

Extended by:
ActiveSupport::Concern
Defined in:
lib/phlex/reactive/streamable.rb

Overview

Streamable gives a self-contained Phlex component the ability to render ITSELF as a Turbo Stream and to broadcast itself over a stream. Every streamable component must implement ‘#id` returning a stable DOM id —that id is the Turbo Stream target, so you never hand-pick targets.

Class methods (use in controllers):

render turbo_stream: Counter.replace(counter)
render turbo_stream: [Row.append(target: "items", model: @item),
                      Totals.update(@order)]

Broadcast methods (use in models/jobs/actions):

Counter.broadcast_replace_to(counter, model: counter)
Row.broadcast_append_to(@list, target: "items", model: @item)

Convention: the ‘id` you set on the root element in `view_template` must equal what `#id` returns, so replace/broadcast_replace target it.

NOTE: we intentionally do NOT include Turbo::Streams::ActionHelper — it pulls in ActionView::Helpers::TagHelper, which overrides Phlex’s internal ‘tag` method and breaks rendering. We use Turbo::Streams::TagBuilder directly instead.

Instance Method Summary collapse

Instance Method Details

#id ⇒ Object

Required: the stable DOM id used as the Turbo Stream target. It MUST match the id set on the component’s root element in ‘view_template`.

Raises:

  • (NotImplementedError) 


132
133
134
 
# File 'lib/phlex/reactive/streamable.rb', line 132

def id
  raise NotImplementedError, "#{self.class} must implement #id for Turbo Stream targeting"
end

#to_stream_replace ⇒ Object

Render THIS already-built instance as a replace stream (used by the reactive action endpoint after an action mutated state).



138
139
140
 
# File 'lib/phlex/reactive/streamable.rb', line 138

def to_stream_replace
  self.class.turbo_stream_builder.replace(id, html: self.class.render_component(self))
end

#to_stream_update ⇒ Object 



142
143
144
 
# File 'lib/phlex/reactive/streamable.rb', line 142

def to_stream_update
  self.class.turbo_stream_builder.update(id, html: self.class.render_component(self))
end