Add support for multiple formats

docs/CHANGELOG.md

@@ -10,6 +10,18 @@ nav_order: 5
 
 ## main
 
+* Add support for request formats.
+
+    *Joel Hawksley*
+
+* Add `rendered_json` test helper.
+
+    *Joel Hawksley*
+
+* Add `with_format` test helper.
+
+    *Joel Hawksley*
+
 ## 3.14.0
 
 * Defer to built-in caching for language environment setup, rather than manually using `actions/cache` in CI.

docs/guide/testing.md

@@ -135,6 +135,20 @@ def test_render_component_for_tablet
 end
 ```
 
+## Request formats
+
+Use the `with_format` helper to test specific request formats:
+
+```ruby
+def test_render_component_as_json
+  with_format :json do
+    render_inline(MultipleFormatsComponent.new)
+
+    assert_equal(rendered_json["hello"], "world")
+  end
+end
+```
+
 ## Configuring the controller used in tests
 
 Since 2.27.0

lib/view_component/base.rb

@@ -107,7 +107,7 @@ def render_in(view_context, &block)
 
       if render?
         # Avoid allocating new string when output_preamble and output_postamble are blank
-        rendered_template = safe_render_template_for(@__vc_variant).to_s
+        rendered_template = safe_render_template_for(@__vc_variant, request.present? ? request.format.to_sym : nil).to_s
 
         if output_preamble.blank? && output_postamble.blank?
           rendered_template
@@ -330,11 +330,11 @@ def maybe_escape_html(text)
       end
     end
 
-    def safe_render_template_for(variant)
+    def safe_render_template_for(variant, format = nil)
       if compiler.renders_template_for_variant?(variant)
-        render_template_for(variant)
+        render_template_for(variant, format)
       else
-        maybe_escape_html(render_template_for(variant)) do
+        maybe_escape_html(render_template_for(variant, format)) do
           Kernel.warn("WARNING: The #{self.class} component rendered HTML-unsafe output. The output will be automatically escaped, but you may want to investigate.")
         end
       end
@@ -519,12 +519,12 @@ def inherited(child)
         # meaning it will not be called for any children and thus not compile their templates.
         if !child.instance_methods(false).include?(:render_template_for) && !child.compiled?
           child.class_eval <<~RUBY, __FILE__, __LINE__ + 1
-            def render_template_for(variant = nil)
+            def render_template_for(variant = nil, format = nil)
               # Force compilation here so the compiler always redefines render_template_for.
               # This is mostly a safeguard to prevent infinite recursion.
               self.class.compile(raise_errors: true, force: true)
               # .compile replaces this method; call the new one
-              render_template_for(variant)
+              render_template_for(variant, format)
             end
           RUBY
         end

lib/view_component/compiler.rb

@@ -61,14 +61,14 @@ def call
 
           component_class.silence_redefinition_of_method("render_template_for")
           component_class.class_eval <<-RUBY, __FILE__, __LINE__ + 1
-          def render_template_for(variant = nil)
+          def render_template_for(variant = nil, format = nil)
             _call_#{safe_class_name}
           end
           RUBY
         end
       else
         templates.each do |template|
-          method_name = call_method_name(template[:variant])
+          method_name = call_method_name(template[:variant], template[:format])
           @variants_rendering_templates << template[:variant]
 
           redefinition_lock.synchronize do
@@ -106,28 +106,71 @@ def renders_template_for_variant?(variant)
     attr_reader :component_class, :redefinition_lock
 
     def define_render_template_for
-      variant_elsifs = variants.compact.uniq.map do |variant|
-        safe_name = "_call_variant_#{normalized_variant_name(variant)}_#{safe_class_name}"
+      branches = []
+      default_method_name = "_call_#{safe_class_name}"
+
+      templates.each do |template|
+        safe_name = +"_call"
+        variant_name = normalized_variant_name(template[:variant])
+        safe_name << "_#{variant_name}" if variant_name.present?
+        safe_name << "_#{template[:format]}" if template[:format].present? && template[:format] != :html
+        safe_name << "_#{safe_class_name}"
+
+        if safe_name == default_method_name
+          next
+        else
+          component_class.define_method(
+            safe_name,
+            component_class.instance_method(
+              call_method_name(template[:variant], template[:format])
+            )
+          )
+        end
+
+        format_conditional =
+          if template[:format] == :html
+            "(format == :html || format.nil?)"
+          else
+            "format == #{template[:format].inspect}"
+          end
+
+        variant_conditional =
+          if template[:variant].nil?
+            "variant.nil?"
+          else
+            "variant&.to_sym == :'#{template[:variant]}'"
+          end
+
+        branches << ["#{variant_conditional} && #{format_conditional}", safe_name]
+      end
+
+      variants_from_inline_calls(inline_calls).compact.uniq.each do |variant|
+        safe_name = "_call_#{normalized_variant_name(variant)}_#{safe_class_name}"
         component_class.define_method(safe_name, component_class.instance_method(call_method_name(variant)))
 
-        "elsif variant.to_sym == :'#{variant}'\n    #{safe_name}"
-      end.join("\n")
+        branches << ["variant&.to_sym == :'#{variant}'", safe_name]
+      end
+
+      component_class.define_method(:"#{default_method_name}", component_class.instance_method(:call))
 
-      component_class.define_method(:"_call_#{safe_class_name}", component_class.instance_method(:call))
+      # Just use default method name if no conditional branches or if there is a single
+      # conditional branch that just calls the default method_name
+      if branches.empty? || (branches.length == 1 && branches[0].last == default_method_name)
+        body = default_method_name
+      else
+        body = +""
 
-      body = <<-RUBY
-        if variant.nil?
-          _call_#{safe_class_name}
-        #{variant_elsifs}
-        else
-          _call_#{safe_class_name}
+        branches.each do |conditional, method_body|
+          body << "#{(!body.present?) ? "if" : "elsif"} #{conditional}\n  #{method_body}\n"
         end
-      RUBY
+
+        body << "else\n  #{default_method_name}\nend"
+      end
 
       redefinition_lock.synchronize do
         component_class.silence_redefinition_of_method(:render_template_for)
         component_class.class_eval <<-RUBY, __FILE__, __LINE__ + 1
-        def render_template_for(variant = nil)
+        def render_template_for(variant = nil, format = nil)
           #{body}
         end
         RUBY
@@ -147,7 +190,7 @@ def template_errors
             errors << "Couldn't find a template file or inline render method for #{component_class}."
           end
 
-          if templates.count { |template| template[:variant].nil? } > 1
+          if templates.map { |template| "#{template[:variant].inspect}_#{template[:format]}" }.tally.any? { |_, count| count > 1 }
             errors <<
               "More than one template found for #{component_class}. " \
               "There can only be one default template file per component."
@@ -213,6 +256,7 @@ def templates
             pieces = File.basename(path).split(".")
             memo << {
               path: path,
+              format: pieces[1..-2].join(".").split("+").first&.to_sym,
               variant: pieces[1..-2].join(".").split("+").second&.to_sym,
               handler: pieces.last
             }
@@ -239,6 +283,10 @@ def inline_calls_defined_on_self
       @inline_calls_defined_on_self ||= component_class.instance_methods(false).grep(/^call(_|$)/)
     end
 
+    def formats
+      @__vc_variants = (templates.map { |template| template[:format] }).compact.uniq
+    end
+
     def variants
       @__vc_variants = (
         templates.map { |template| template[:variant] } + variants_from_inline_calls(inline_calls)
@@ -283,12 +331,18 @@ def compile_template(template, handler)
       # :nocov:
     end
 
-    def call_method_name(variant)
-      if variant.present? && variants.include?(variant)
-        "call_#{normalized_variant_name(variant)}"
-      else
-        "call"
+    def call_method_name(variant, format = nil)
+      out = +"call"
+
+      if variant.present?
+        out << "_#{normalized_variant_name(variant)}"
       end
+
+      if format.present? && format != :html && formats.length > 1
+        out << "_#{format}"
+      end
+
+      out
     end
 
     def normalized_variant_name(variant)

lib/view_component/test_helpers.rb

@@ -63,6 +63,16 @@ def render_inline(component, **args, &block)
       Nokogiri::HTML.fragment(@rendered_content)
     end
 
+    # `JSON.parse`-d component output.
+    #
+    # ```ruby
+    # render_inline(MyJsonComponent.new)
+    # assert_equal(rendered_json["hello"], "world")
+    # ```
+    def rendered_json
+      JSON.parse(rendered_content)
+    end
+
     # Render a preview inline. Internally sets `page` to be a `Capybara::Node::Simple`,
     # allowing for Capybara assertions to be used:
     #
@@ -155,6 +165,19 @@ def with_controller_class(klass)
       @vc_test_controller = old_controller
     end
 
+    # Set format of the current request
+    #
+    # ```ruby
+    # with_format(:json) do
+    #   render_inline(MyComponent.new)
+    # end
+    # ```
+    #
+    # @param format [Symbol] The format to be set for the provided block.
+    def with_format(format)
+      with_request_url("/", format: format) { yield }
+    end
+
     # Set the URL of the current request (such as when using request-dependent path helpers):
     #
     # ```ruby

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

@@ -0,0 +1 @@
+Hello, CSS!

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

@@ -0,0 +1 @@
+Hello, HTML!

test/sandbox/app/components/multiple_formats_component.json.jbuilder

@@ -0,0 +1 @@
+json.hello "world"

test/sandbox/app/components/multiple_formats_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class MultipleFormatsComponent < ViewComponent::Base
+end

test/sandbox/app/controllers/integration_examples_controller.rb

@@ -72,6 +72,10 @@ def unsafe_postamble_component
     render(UnsafePostambleComponent.new)
   end
 
+  def multiple_formats_component
+    render(MultipleFormatsComponent.new)
+  end
+
   def turbo_stream
     respond_to { |format| format.turbo_stream { render TurboStreamComponent.new } }
   end

test/sandbox/config/routes.rb

@@ -32,6 +32,7 @@
   get :unsafe_component, to: "integration_examples#unsafe_component"
   get :unsafe_preamble_component, to: "integration_examples#unsafe_preamble_component"
   get :unsafe_postamble_component, to: "integration_examples#unsafe_postamble_component"
+  get :multiple_formats_component, to: "integration_examples#multiple_formats_component"
   post :create, to: "integration_examples#create"
 
   constraints(lambda { |request| request.env["warden"].authenticate! }) do

test/sandbox/test/integration_test.rb

@@ -769,4 +769,22 @@ def test_unsafe_postamble_component
       "Rendering UnsafePostambleComponent did not emit an HTML safety warning"
     )
   end
+
+  def test_renders_multiple_format_component_as_html
+    get "/multiple_formats_component"
+
+    assert_includes response.body, "Hello, HTML!"
+  end
+
+  def test_renders_multiple_format_component_as_json
+    get "/multiple_formats_component.json"
+
+    assert_equal response.body, "{\"hello\":\"world\"}"
+  end
+
+  def test_renders_multiple_format_component_as_css
+    get "/multiple_formats_component.css"
+
+    assert_includes response.body, "Hello, CSS!"
+  end
 end

test/sandbox/test/rendering_test.rb

@@ -151,7 +151,7 @@ def test_renders_haml_template
   end
 
   def test_render_jbuilder_template
-    with_request_url("/", format: :json) do
+    with_format(:json) do
       render_inline(JbuilderComponent.new(message: "bar")) { "foo" }
     end
 
@@ -1195,4 +1195,12 @@ def test_use_helpers_macros_with_named_prefix
 
     assert_selector ".helper__named-prefix-message", text: "Hello macro named prefix helper method"
   end
+
+  def test_with_format
+    with_format(:json) do
+      render_inline(MultipleFormatsComponent.new)
+
+      assert_equal(rendered_json["hello"], "world")
+    end
+  end
 end