feat: Limit templates to defined file extension

docs/guide/templates.md

@@ -192,3 +192,15 @@ class MyComponent < ViewComponent::Base
   strip_trailing_whitespace(false)
 end
 ```
+
+## Setting template file extension
+
+Sometimes a component will warrant the use of multiple file types for a single template handler. An example would be ERB handled files for both HTML and CSS. By default ViewComponent will return a "More than one template found for" error. To avoid this set the `VC_TEMPLATE_EXTENSION` constant in your component to the file extension of the template you wish your component to use.
+
+```ruby
+class MyComponent < ViewComponent::Base
+  VC_TEMPLATE_EXTENSION = 'html'
+
+  ...
+end
+``` 

lib/view_component/base.rb

@@ -445,6 +445,19 @@ class << self
       # @private
       attr_accessor :source_location, :virtual_path
 
+      # If the component class sets the template extension, use it
+      #
+      # A component overrides the global default by setting the
+      # VC_TEMPLATE_EXTENSION constant of the component class
+      #
+      def template_ext
+        if const_defined?(:VC_TEMPLATE_EXTENSION)
+          return self::VC_TEMPLATE_EXTENSION
+        end
+
+        template_extension
+      end
+
       # Find sidecar files for the given extensions.
       #
       # The provided array of extensions is expected to contain
@@ -462,6 +475,13 @@ def sidecar_files(extensions)
         filename = File.basename(source_location, ".rb")
         component_name = name.demodulize.underscore
 
+        # Limit template type if set in component configuration
+        component_template_extension_glob = ""
+
+        unless template_ext.nil?
+          component_template_extension_glob = ".*{#{template_ext}}"
+        end
+
         # Add support for nested components defined in the same file.
         #
         # for example
@@ -474,15 +494,15 @@ def sidecar_files(extensions)
         # Without this, `MyOtherComponent` will not look for `my_component/my_other_component.html.erb`
         nested_component_files =
           if name.include?("::") && component_name != filename
-            Dir["#{directory}/#{filename}/#{component_name}.*{#{extensions}}"]
+            Dir["#{directory}/#{filename}/#{component_name}#{component_template_extension_glob}.*{#{extensions}}"]
           else
             []
           end
 
         # view files in the same directory as the component
-        sidecar_files = Dir["#{directory}/#{component_name}.*{#{extensions}}"]
+        sidecar_files = Dir["#{directory}/#{component_name}#{component_template_extension_glob}.*{#{extensions}}"]
 
-        sidecar_directory_files = Dir["#{directory}/#{component_name}/#{filename}.*{#{extensions}}"]
+        sidecar_directory_files = Dir["#{directory}/#{component_name}/#{filename}#{component_template_extension_glob}.*{#{extensions}}"]
 
         (sidecar_files - [source_location] + sidecar_directory_files + nested_component_files).uniq
       end

lib/view_component/config.rb

@@ -25,7 +25,8 @@ def defaults
           preview_paths: default_preview_paths,
           test_controller: "ApplicationController",
           default_preview_layout: nil,
-          capture_compatibility_patch_enabled: false
+          capture_compatibility_patch_enabled: false,
+          template_extension: nil
         })
       end
 
@@ -154,6 +155,11 @@ def defaults
       # previews.
       # Defaults to `false`.
 
+      # @!attribute template_extension
+      # @return [String]
+      # Define which file extension is to be used as the template.
+      # Defaults to `nil`.
+
       def default_preview_paths
         return [] unless defined?(Rails.root) && Dir.exist?("#{Rails.root}/test/components/previews")
 

test/sandbox/app/components/template_extension_defined_component.css.erb

@@ -0,0 +1,3 @@
+.custom-selector {
+  background-image: url(<%=asset_path"background_test.png"%>);
+}

test/sandbox/app/components/template_extension_defined_component.html.erb

@@ -0,0 +1,4 @@
+<div>
+  <%= content %>
+  <%= @message %>
+</div>

test/sandbox/app/components/template_extension_defined_component.rb

@@ -0,0 +1,9 @@
+# frozen_string_literal: true
+
+class TemplateExtensionDefinedComponent < ViewComponent::Base
+  VC_TEMPLATE_EXTENSION = "html"
+
+  def initialize(message:)
+    @message = message
+  end
+end

test/sandbox/test/rendering_test.rb

@@ -1113,4 +1113,11 @@ def test_use_helper
     render_inline(UseHelpersComponent.new)
     assert_selector ".helper__message", text: "Hello helper method"
   end
+
+  def test_renders_when_more_than_one_handler_file_exists_but_template_extension_has_been_defined
+    render_inline(TemplateExtensionDefinedComponent.new(message: "bar")) { "foo" }
+
+    assert_text("foo")
+    assert_text("bar")
+  end
 end