Wrap a slot in a block

[jasonbouffard]

class ListComponent < ViewComponent::Base
  renders_one :header
  renders_many :rows

  erb_template <<~ERB
    <div class="list-component">
      <h2><%= header %></h2>

      <% rows.each do |row| %>
        <div class="divider"></div>
        <%= row %>
      <% end %>
    </div>
  ERB
end

Take the above component. Does anyone have any suggestions on how to implement if a caller would like to wrap the rows slot(s) in a form element? The below will not work, but it is the idea I am shooting for. A typical ListComponent caller would not need a form wrapper.

<%= render ListComponent.new do |component| %>
  <% component.with_header do %>
    Hi Everybody!
  <% end %>

  <% form_with url: "/" do |form| %>
    <% [1, 2, 3].each do |i|  %>
      <% component.with_row do %>
        <%= render partial: "partial", local_variables: {item: i, form: form} %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Almost like this: https://github.com/palkan/view_component-contrib?tab=readme-ov-file#wrapped-components
Except for slots.

This is close: #1126 (comment)
But not quite what I am looking for.

[joelhawksley]

@jasonbouffard forgive me if I'm misunderstanding your question, but I believe that you need to treat the with_row call as simply a setter. Here is how I would do it:

<% form_with url: "/" do |form| %>
  <%= render ListComponent.new(form: form) do |component| %>
    <% component.with_header do %>
      Hi Everybody!
    <% end %>
    
    <% [1, 2, 3].each do |i|  %>
      <% component.with_row do %>
        <%= render partial: "partial", local_variables: {item: i, form: form} %>
      <% end %>
    <% end %>
  <% end %>
<% end %>