Add first class component cache

docs/CHANGELOG.md

@@ -50,15 +50,15 @@ nav_order: 6
 
     *Reegan Viljoen*
 
-* Add HomeStyler AI to list of companies using ViewComponent.
+* Add experimental support for caching.
 
-    *JP Balarini*
+    *Reegan Viljoen*
 
 ## 3.21.0
 
 * Updates testing docs to include an example of how to use with RSpec.
 
-    *Rylan Bowers*
+    *Rylanview_cache Bowers*
 
 * Add `--skip-suffix` option to component generator.
 

docs/guide/caching.md

@@ -0,0 +1,42 @@
+---
+layout: default
+title: Caching
+parent: How-to guide
+---
+
+# Caching
+
+Experimental
+{: .label }
+
+Components can implement caching by marking the depndencies that a digest can be built om using the cache_on macro, like so:
+
+```ruby
+class CacheComponent < ViewComponent::Base
+  include ViewComponent::Cacheable
+
+  cache_on :foo, :bar
+  attr_reader :foo, :bar
+
+  def initialize(foo:, bar:)
+    @foo = foo
+    @bar = bar
+  end
+end
+```
+
+```erb
+<p><%= view_cache_dependencies %></p>
+
+<p><%= Time.zone.now %>"></p>
+<p><%= "#{foo} #{bar}" %></p>
+```
+
+will result in:
+
+```html
+<p>foo-bar</p>
+
+<p>2025-03-27 16:46:10 UTC</p>
+<p> foo bar</p>
+```

lib/view_component/base.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require "action_view"
+require "view_component/cacheable"
 require "active_support/configurable"
 require "view_component/collection"
 require "view_component/compile_cache"
@@ -113,12 +114,10 @@ def render_in(view_context, &block)
 
       if render?
         rendered_template = render_template_for(@__vc_variant, __vc_request&.format&.to_sym).to_s
-
-        # Avoid allocating new string when output_preamble and output_postamble are blank
-        if output_preamble.blank? && output_postamble.blank?
-          rendered_template
+        if respond_to?(:__vc_render_cacheable)
+          __vc_render_cacheable(rendered_template)
         else
-          safe_output_preamble + rendered_template + safe_output_postamble
+          __vc_render_template(rendered_template)
         end
       else
         ""
@@ -273,6 +272,18 @@ def view_cache_dependencies
       []
     end
 
+    # For handling the output_preamble and output_postamble
+    #
+    # @private
+    def __vc_render_template(rendered_template)
+      # Avoid allocating new string when output_preamble and output_postamble are blank
+      if output_preamble.blank? && output_postamble.blank?
+        rendered_template
+      else
+        safe_output_preamble + rendered_template + safe_output_postamble
+      end
+    end
+
     # For caching, such as #cache_if
     #
     # @private
@@ -295,6 +306,13 @@ def __vc_request
       @__vc_request ||= controller.request if controller.respond_to?(:request)
     end
 
+    # Fo use in caching
+    #
+    # @private
+    def __vc_format
+      __vc_request&.format&.to_sym
+    end
+
     # The content passed to the component instance as a block.
     #
     # @return [String]

lib/view_component/cacheable.rb

@@ -0,0 +1,44 @@
+# frozen_string_literal: true
+
+module ViewComponent::Cacheable
+  extend ActiveSupport::Concern
+
+  included do
+    class_attribute :__vc_cache_dependencies, default: [:format, :__vc_format]
+
+    # For caching, such as #cache_if
+    #
+    # @private
+    def view_cache_dependencies
+      return if __vc_cache_dependencies.blank? || __vc_cache_dependencies.none? || __vc_cache_dependencies.nil?
+
+      __vc_cache_dependencies.filter_map { |dep| send(dep) }.join("-")
+    end
+
+    # Render component from cache if possible
+    #
+    # @private
+    def __vc_render_cacheable(rendered_template)
+      if __vc_cache_dependencies != [:format, :__vc_format]
+        Rails.cache.fetch(view_cache_dependencies) do
+          __vc_render_template(rendered_template)
+        end
+      else
+        __vc_render_template(rendered_template)
+      end
+    end
+  end
+
+  class_methods do
+    # For caching the component
+    def cache_on(*args)
+      __vc_cache_dependencies.push(*args)
+    end
+
+    def inherited(child)
+      child.__vc_cache_dependencies = __vc_cache_dependencies.dup
+
+      super
+    end
+  end
+end

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

@@ -0,0 +1,2 @@
+<p class='cache-component__cache-key'><%= view_cache_dependencies %></p>
+<p class='cache-component__cache-message' data-time=data-time="<%= Time.zone.now %>"><%= "#{foo} #{bar}" %></p>

test/sandbox/app/components/cache_component.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class CacheComponent < ViewComponent::Base
+  include ViewComponent::Cacheable
+
+  cache_on :foo, :bar
+
+  attr_reader :foo, :bar
+
+  def initialize(foo:, bar:)
+    @foo = foo
+    @bar = bar
+  end
+end

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

@@ -0,0 +1,3 @@
+<p class='cache-component__cache-key'><%= view_cache_dependencies %></p>
+
+<p class='cache-component__cache-message' data-time=data-time="<%= Time.zone.now %>"><%= "#{foo} #{bar}" %></p>

test/sandbox/app/components/inherited_cache_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class InheritedCacheComponent < CacheComponent
+  def initialize(foo:, bar:)
+    super
+  end
+end

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

@@ -0,0 +1,3 @@
+<p class='cache-component__cache-key'><%= view_cache_dependencies %></p>
+
+<p class='cache-component__cache-message' data-time=data-time="<%= Time.zone.now %>"><%= "#{foo} #{bar}" %></p>

test/sandbox/app/components/no_cache_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class NoCacheComponent < ViewComponent::Base
+  include ViewComponent::Cacheable
+
+  attr_reader :foo, :bar
+
+  def initialize(foo:, bar:)
+    @foo = foo
+    @bar = bar
+  end
+end

test/sandbox/app/controllers/integration_examples_controller.rb

@@ -11,6 +11,12 @@ def controller_inline
     render(ControllerInlineComponent.new(message: "bar"))
   end
 
+  def controller_inline_cached
+    foo = params[:foo] || "foo"
+    bar = params[:bar] || "bar"
+    render(CacheComponent.new(foo: foo, bar: bar))
+  end
+
   def controller_inline_with_block
     render(ControllerInlineWithBlockComponent.new(message: "bar").tap do |c|
       c.with_slot(name: "baz")

test/sandbox/config/routes.rb

@@ -11,6 +11,7 @@
   get :inline_products, to: "integration_examples#inline_products"
   get :cached, to: "integration_examples#cached"
   get :render_check, to: "integration_examples#render_check"
+  get :controller_inline_cached, to: "integration_examples#controller_inline_cached"
   get :controller_inline, to: "integration_examples#controller_inline"
   get :controller_inline_with_block, to: "integration_examples#controller_inline_with_block"
   get :controller_inline_baseline, to: "integration_examples#controller_inline_baseline"

test/sandbox/test/rendering_test.rb

@@ -16,7 +16,7 @@ def test_render_inline_allocations
     MyComponent.ensure_compiled
 
     allocations = (Rails.version.to_f >= 8.0) ?
-      {"3.5.0" => 121, "3.4.2" => 125, "3.3.7" => 137} :
+      {"3.5.0" => 119, "3.4.2" => 125, "3.3.7" => 138} :
       {"3.3.7" => 128, "3.3.0" => 140, "3.2.8" => 126, "3.1.7" => 126, "3.0.7" => 135}
 
     assert_allocations(**allocations) do
@@ -1255,4 +1255,30 @@ def test_render_anonymous_component_without_template
       render_inline(mock_component.new)
     end
   end
+
+  def test_cache_component
+    component = CacheComponent.new(foo: "foo", bar: "bar")
+    render_inline(component)
+
+    assert_selector(".cache-component__cache-key", text: component.view_cache_dependencies)
+    assert_selector(".cache-component__cache-message", text: "foo bar")
+
+    render_inline(CacheComponent.new(foo: "foo", bar: "bar"))
+
+    assert_selector(".cache-component__cache-key", text: component.view_cache_dependencies)
+
+    new_component = CacheComponent.new(foo: "foo", bar: "baz")
+    render_inline(new_component)
+
+    assert_selector(".cache-component__cache-key", text: new_component.view_cache_dependencies)
+    assert_selector(".cache-component__cache-message", text: "foo baz")
+  end
+
+  def test_no_cache_compoennt
+    component = NoCacheComponent.new(foo: "foo", bar: "bar")
+    render_inline(component)
+
+    assert_selector(".cache-component__cache-key", text: component.view_cache_dependencies)
+    assert_selector(".cache-component__cache-message", text: "foo bar")
+  end
 end