Allow arguments to be passed to content areas #285

lib/view_component/base.rb

@@ -118,11 +118,11 @@ def with(area, content = nil, &block)
         raise ArgumentError.new "Unknown content_area '#{area}' - expected one of '#{content_areas}'"
       end
 
-      if block_given?
-        content = view_context.capture(&block)
+      define_singleton_method(area) do |*args|
+        block = ->() { content } unless block_given?
+        view_context.capture(*args, &block)
       end
 
-      instance_variable_set("@#{area}".to_sym, content)
       nil
     end
 
@@ -236,7 +236,7 @@ def with_content_areas(*areas)
         if areas.include?(:content)
           raise ArgumentError.new ":content is a reserved content area name. Please use another name, such as ':body'"
         end
-        attr_reader *areas
+        attr_reader *areas # provide a default implementation for all areas. Will be redifined by calls to .with.
         self.content_areas = areas
       end
 

test/app/components/form_component.html.erb

@@ -0,0 +1,13 @@
+<div class="post_form">
+  <%= form_for post do |post_form| %>
+    <div class="header">
+      <%= header %>
+    </div>
+    <div class="body">
+      <%= body(post_form) %>
+    </div>
+    <div class="footer">
+      <%= footer(post_form) %>
+    </div>
+  <% end %>
+</div>

test/app/components/form_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class FormComponent < ViewComponent::Base
+  with_content_areas :header, :body, :footer
+
+  def post
+    @post ||= Post.new(title: "Check It Out")
+  end
+end

test/config/routes.rb

@@ -12,4 +12,5 @@
   get :controller_inline, to: "integration_examples#controller_inline"
   get :controller_inline_baseline, to: "integration_examples#controller_inline_baseline"
   get :controller_to_string, to: "integration_examples#controller_to_string"
+  resources :posts
 end

test/view_component/view_component_test.rb

@@ -176,17 +176,6 @@ def test_renders_content_areas_template_replaces_content
     assert_selector(".footer", text: "Bye!")
   end
 
-  def test_renders_content_areas_template_can_wrap_render_arguments
-    render_inline(ContentAreasComponent.new(title: "Hello!", footer: "Bye!")) do |component|
-      component.with(:title) { "<strong>#{component.title}</strong>".html_safe }
-      component.with(:body) { "Have a nice day." }
-    end
-
-    assert_selector(".title strong", text: "Hello!")
-    assert_selector(".body", text: "Have a nice day.")
-    assert_selector(".footer", text: "Bye!")
-  end
-
   def test_renders_content_areas_template_raise_with_unknown_content_areas
     exception = assert_raises ArgumentError do
       render_inline(ContentAreasComponent.new(footer: "Bye!")) do |component|
@@ -504,6 +493,24 @@ def test_render_single_item_from_collection
     assert_selector("p", text: "On sale", count: 1)
   end
 
+  def test_content_area_named_attributes
+    render_inline(FormComponent.new) do |component|
+      component.with(:header) do ||
+        "Form Header: #{component.post.title}"
+      end
+      component.with(:body) do |form|
+        form.text_field :title
+      end
+      component.with(:footer) do |form|
+        form.submit "Save"
+      end
+    end
+
+    assert_selector(".header", text: "Form Header: Check It Out")
+    assert_selector(".body input[name='post[title]'][value='Check It Out']")
+    assert_selector(".footer input[value='Save']")
+  end
+
   private
 
   def modify_file(file, content)