Slots

[stephannv]

I was thinking if a Slot API for Phlex is a wanted feature. References:

• https://viewcomponent.org/guide/slots.html
• https://vuejs.org/guide/components/slots.html#named-slots

Phlex deferred render is powerful and phlexible, but sometimes we want a rigid structure for our components and we end up writing the same code structure multiple times. So I created a custom module to register slot and I was thinking if it could fit on Phlex or it should be a separated gem.

I was experimenting with some ideas and I could do something like this:

class PostsComponent < Phlex::HTML
  slot :header, PostsHeaderComponent # will render one slot using PostsHeaderComponent
  slots :post, PostComponent # will render many slots using PostComponent
  slot :footer # slot to pass any content
  
  def view_template
    if header_slot? # predicate method to check if header slot was given
      render header_slot # acessor for header slot
    end
    
    if post_slots? # predicate method to check if there are any post slots
      div id: "posts" do
        post_slots.each do |slot| # accessor for post slots list
          render slot
        end 
      end
    end
    
    footer do
      render footer_slot
    end if footer_slot?
  end
end

Using this component:

render PostsComponent.new do |c|
  c.with_header(size: "lg") { "My posts" } # `with_{slot_name}` to set slot content
  
  @posts.each do |post|
    c.with_post(post: post) # `with_{slot_name}` for mutiple slots can be called multiple times
  end
  
  c.with_footer do
    a { "Load more posts" }
  end
end

Things I didn't think yet:

• Custom blocks (eg. slot :button, ->(&content) { render(ButtonComponent.new(color: primary, size: :lg), &content) }
• Polymorphic slots (eg. slot :avatar, icon: IconComponent, image: ImageComponent)

If this is a wanted feature, I could open a PR to discuss the implementation.

[stephannv]

I created Phlex::Slotable:

class MyComponent < Phlex::HTML
  include Phlex::Slotable
  
  # Generic slot
  slot :content
  
  # Component slot
  slot :header, Header  

  # Slot collection
  slot :item, Item, collection: true
  
  # Lambda slot
  slot :footer, ->(**html_options, &content) { footer(**html_options, &content) }
  
  # Polymorphic slot
  slot :avatar, types: { icon: Icon, image: Image }
  
  def template
    render content_slot if content_slot?

    render header_slot if header_slot?

    render item_slots.each { |s| render s } if item_slots?

    render footer_slot if footer_slot?

    render avatar_slot if avatar_slot?
  end
end

MyComponent.new.call do |c|
  c.with_content { "Generic slot" }
  
  c.with_header(size: :lg) { "Component slot" }
  
  c.with_item(href: "/a") { "Item A" }
  c.with_item(href: "/a") { "Item A" }
  
  c.with_footer(class: "bg-red") { "Lambda slot" }
  
  if image_url
    c.with_image_avatar(src: image_url)
  else
    c.with_icon_avatar(name: :user)
  end
end

The code powering this is here: https://github.com/stephannv/phlex-slotable/blob/main/lib/phlex/slotable.rb

I'm welcoming suggestions =).

If you think this can be useful for phlex repo/org, let me know.