Add support for multiple templates.

Co-authored-by: Rob Sterner <[email protected]>

docs/CHANGELOG.md

@@ -113,6 +113,10 @@ title: Changelog
 
     *Joel Hawksley*
 
+* Add support for multiple templates.
+
+    *Rob Sterner*, *Joel Hawksley*
+
 ## 2.36.0
 
 * Add `slot_type` helper method.

docs/guide/templates.md

@@ -92,3 +92,36 @@ Component subclasses inherit the parent component's template if they don't defin
 class MyLinkComponent < LinkComponent
 end
 ```
+
+#### Multiple templates
+
+ViewComponents can render multiple templates defined in the sidecar directory:
+
+```
+app/components
+├── ...
+├── test_component.rb
+├── test_component
+|   ├── list.html.erb
+|   └── summary.html.erb
+├── ...
+```
+
+Templates are compiled to methods in the format `call_#{template_basename}`, which can then be called in the component.
+
+```ruby
+class TestComponent < ViewComponent::Base
+  def initialize(mode:)
+    @mode = mode
+  end
+
+  def call
+    case @mode
+    when :list
+      call_list
+    when :summary
+      call_summary
+    end
+  end
+end
+```

lib/view_component/base.rb

@@ -331,7 +331,7 @@ def _sidecar_files(extensions)
         # view files in the same directory as the component
         sidecar_files = Dir["#{directory}/#{component_name}.*{#{extensions}}"]
 
-        sidecar_directory_files = Dir["#{directory}/#{component_name}/#{filename}.*{#{extensions}}"]
+        sidecar_directory_files = Dir["#{directory}/#{component_name}/*.*{#{extensions}}"]
 
         (sidecar_files - [source_location] + sidecar_directory_files + nested_component_files).uniq
       end

lib/view_component/compiler.rb

@@ -43,7 +43,18 @@ def compile(raise_errors: false)
       templates.each do |template|
         # Remove existing compiled template methods,
         # as Ruby warns when redefining a method.
-        method_name = call_method_name(template[:variant])
+        pieces = File.basename(template[:path]).split(".")
+
+        method_name =
+          # If the template matches the name of the component,
+          # set the method name with call_method_name
+          if pieces.first == component_class.name.demodulize.underscore
+            call_method_name(template[:variant])
+          # Otherwise, append the name of the template to
+          # call_method_name
+          else
+            "#{call_method_name(template[:variant])}_#{pieces.first.to_sym}"
+          end
 
         if component_class.instance_methods.include?(method_name.to_sym)
           component_class.send(:undef_method, method_name.to_sym)
@@ -98,7 +109,14 @@ def template_errors
             errors << "Could not find a template file or inline render method for #{component_class}."
           end
 
-          if templates.count { |template| template[:variant].nil? } > 1
+          # Ensure that template base names are unique
+          # for each variant
+          unique_templates =
+            templates.map do |template|
+              template[:base_name] + template[:variant].to_s
+            end
+
+          if unique_templates.length != unique_templates.uniq.length
             errors <<
               "More than one template found for #{component_class}. " \
               "There can only be one default template file per component."
@@ -118,7 +136,14 @@ def template_errors
               "There can only be one template file per variant."
           end
 
-          if templates.find { |template| template[:variant].nil? } && inline_calls_defined_on_self.include?(:call)
+          default_template_exists =
+            templates.find do |template|
+              pieces = File.basename(template[:path]).split(".")
+
+              template[:variant].nil? && pieces.first == component_class.name.demodulize.underscore
+            end
+
+          if default_template_exists && inline_calls_defined_on_self.include?(:call)
             errors <<
               "Template file and inline render method found for #{component_class}. " \
               "There can only be a template file or inline render method per component."
@@ -151,6 +176,7 @@ def templates
             pieces = File.basename(path).split(".")
             memo << {
               path: path,
+              base_name: path.split(File::SEPARATOR).last.split(".").first,
               variant: pieces.second.split("+").second&.to_sym,
               handler: pieces.last
             }

test/sandbox/app/components/multiple_templates_component.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+class MultipleTemplatesComponent < ViewComponent::Base
+  def initialize(mode:)
+    @mode = mode
+
+    @items = ["Apple", "Banana", "Pear"]
+  end
+
+  def call
+    case @mode
+    when :list
+      call_list
+    when :summary
+      call_summary
+    end
+  end
+end

test/sandbox/app/components/multiple_templates_component/list.html.erb

@@ -0,0 +1,5 @@
+<ul>
+  <% @items.each do |item| %>
+    <li><%= item %></li>
+  <% end %>
+</ul>

test/sandbox/app/components/multiple_templates_component/summary.html.erb

@@ -0,0 +1 @@
+<div>The items are: <%= @items.to_sentence %></div>

test/view_component/view_component_test.rb

@@ -776,6 +776,18 @@ def test_collection_component_with_trailing_comma_attr_reader
     assert_match(/ProductReaderOopsComponent initializer is empty or invalid/, exception.message)
   end
 
+  def test_render_multiple_templates
+    render_inline(MultipleTemplatesComponent.new(mode: :list))
+
+    assert_selector("li", text: "Apple")
+    assert_selector("li", text: "Banana")
+    assert_selector("li", text: "Pear")
+
+    render_inline(MultipleTemplatesComponent.new(mode: :summary))
+
+    assert_selector("div", text: "Apple, Banana, and Pear")
+  end
+
   def test_renders_component_using_rails_config
     render_inline(RailsConfigComponent.new)
 
@@ -888,4 +900,17 @@ def test_output_postamble
 
     assert_text("Hello, World!")
   end
+
+  private
+
+  def modify_file(file, content)
+    filename = Rails.root.join(file)
+    old_content = File.read(filename)
+    begin
+      File.open(filename, "wb+") { |f| f.write(content) }
+      yield
+    ensure
+      File.open(filename, "wb+") { |f| f.write(old_content) }
+    end
+  end
 end