Phlex adapter

vident-phlex ships Vident::Phlex::HTML, a base class that combines Phlex::HTML with Vident’s capabilities.

class CardComponent < Vident::Phlex::HTML
  prop :title, String

  def view_template
    root_element do |card|
      h2 { @title }
      yield card if block_given?
    end
  end
end

Helpers worth knowing

• root_element yields the component instance so you can call card.stimulus_target(:body), card.child_element(...), etc., from inside the template.
• child_element(:tag, stimulus_target: :name, class: "...") { … } renders a child tag with the right data-* attributes attached — the Phlex equivalent of writing data: greeter.stimulus_target(:name).to_h inline.
• vanish(&) consumes the outer block’s content so configuration-only child blocks (slot setters that mutate state but render nothing) don’t end up in the output.

Slot-like patterns

Phlex doesn’t have ViewComponent’s renders_one. The common pattern is a memoised method that doubles as the slot setter:

def trigger(**args)
  @trigger ||= GreeterButtonComponent.new(**args)
end

def view_template(&)
  vanish(&)                 # the outer block's content was just config
  root_element do |greeter|
    render @trigger if @trigger
  end
end

See PhlexGreeters::GreeterWithTriggerComponent in the dummy app for a worked example.

App layout

A typical Phlex app sets up an ApplicationView/ApplicationLayout pair and an ApplicationComponent that inherits from Vident::Phlex::HTML. That’s where you include things like Phlex::Rails::Helpers::Routes and optional development-only instrumentation:

module App
  class ApplicationComponent < ::Vident::Phlex::HTML
    include ::Phlex::Rails::Helpers::Routes

    if Rails.env.development?
      def before_template
        comment { "Before #{self.class.name}" }
        super
      end
    end
  end
end