Allow assigning a spacer component between items in a rendered collection

docs/CHANGELOG.md

@@ -10,6 +10,10 @@ nav_order: 5
 
 ## main
 
+* Allow rendering `with_collection` to accept an optional `spacer_component` to be rendered between each item.
+
+    *Nick Coyne*
+
 ## 3.19.0
 
 * Relax Active Support version constraint in gemspec.

docs/guide/collections.md

@@ -110,3 +110,17 @@ class ProductComponent < ViewComponent::Base
   end
 end
 ```
+
+## Spacer Components
+
+Since 3.20.0
+{: .label }
+
+You can also specify a component instance to be rendered between instances of the main component by using the :spacer_component option:
+
+```erb
+<%= render(ProductComponent.with_collection(@products, spacer_component: SpacerComponent.new)) %>
+
+```
+
+ViewComponent will render the SpacerComponent component between each pair of ProductComponent components.

lib/view_component/base.rb

@@ -509,9 +509,10 @@ def sidecar_files(extensions)
       # ```
       #
       # @param collection [Enumerable] A list of items to pass the ViewComponent one at a time.
+      # @param spacer_component [ViewComponent::Base] A spacer component instance to be rendered.
       # @param args [Arguments] Arguments to pass to the ViewComponent every time.
-      def with_collection(collection, **args)
-        Collection.new(self, collection, **args)
+      def with_collection(collection, spacer_component: nil, **args)
+        Collection.new(self, collection, spacer_component, **args)
       end
 
       # @private

lib/view_component/collection.rb

@@ -19,7 +19,7 @@ def render_in(view_context, &block)
       components.map do |component|
         component.set_original_view_context(__vc_original_view_context)
         component.render_in(view_context, &block)
-      end.join.html_safe
+      end.join(rendered_spacer(view_context)).html_safe
     end
 
     def components
@@ -48,9 +48,10 @@ def format
 
     private
 
-    def initialize(component, object, **options)
+    def initialize(component, object, spacer_component, **options)
       @component = component
       @collection = collection_variable(object || [])
+      @spacer_component = spacer_component
       @options = options
     end
 
@@ -69,5 +70,14 @@ def component_options(item, iterator)
 
       @options.merge(item_options)
     end
+
+    def rendered_spacer(view_context)
+      if @spacer_component
+        @spacer_component.set_original_view_context(__vc_original_view_context)
+        @spacer_component.render_in(view_context)
+      else
+        ""
+      end
+    end
   end
 end

test/sandbox/test/collection_test.rb

@@ -16,6 +16,12 @@ def call
       end
     end
 
+    class SpacerComponent < ViewComponent::Base
+      def call
+        "<hr>".html_safe
+      end
+    end
+
     def setup
       @products = [OpenStruct.new(name: "Radio clock"), OpenStruct.new(name: "Mints")]
       @collection = ProductComponent.with_collection(@products, notice: "secondhand")
@@ -35,5 +41,10 @@ def test_supports_components_with_keyword_args
       assert_selector("*[data-name='#{@products.first.name}']", text: @products.first.name)
       assert_selector("*[data-name='#{@products.last.name}']", text: @products.last.name)
     end
+
+    def test_supports_collection_with_spacer_component
+      render_inline(ProductComponent.with_collection(@products, spacer_component: SpacerComponent.new))
+      assert_selector("hr", count: 1)
+    end
   end
 end