add component controlled cache

Author: reeganviljoen

lib/view_component/base.rb

@@ -15,6 +15,7 @@
 require "view_component/translatable"
 require "view_component/with_content_helper"
 require "view_component/use_helpers"
+require "view_component/cache_on"
 
 module ViewComponent
   class Base < ActionView::Base
@@ -34,6 +35,7 @@ def config
     include ViewComponent::Slotable
     include ViewComponent::Translatable
     include ViewComponent::WithContentHelper
+    include ViewComponent::CacheOn
 
     RESERVED_PARAMETER = :content
     VC_INTERNAL_DEFAULT_FORMAT = :html

lib/view_component/cache_on.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module ViewComponent::CacheOn
+  extend ActiveSupport::Concern
+
+  included do
+    def cache_key
+      @vc_cache_args = vc_cache_args.map { |method| send(method) } if defined?(vc_cache_args)
+
+      @vc_cache_key = Digest::MD5.hexdigest(@vc_cache_args.join)
+    end
+  end
+
+  class_methods do
+    def cache_on(*args)
+      define_method(:vc_cache_args) { args }
+    end
+
+    def call
+      if cache_key
+        Rails.cache.fetch(cache_key) { super }
+      else
+        super
+      end
+    end
+  end
+end

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

@@ -0,0 +1,2 @@
+<p class='cache-component__cache-key'><%= cache_key %></p>
+<p class='cache-component__cache-message'><%= "#{foo} #{bar}" %></p>

test/sandbox/app/components/cache_component.rb

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

test/sandbox/test/rendering_test.rb

@@ -1215,4 +1215,21 @@ def test_with_format
       assert_equal(rendered_json["hello"], "world")
     end
   end
+
+  def test_cache_component
+    component = CacheComponent.new(foo: "foo", bar: "bar")
+    render_inline(component)
+
+    assert_selector(".cache-component__cache-key", text: component.cache_key)
+    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.cache_key)
+
+    render_inline(CacheComponent.new(foo: "foo", bar: "baz"))
+
+    refute_selector(".cache-component__cache-key", text: component.cache_key)
+    refute_selector(".cache-component__cache-message", text: "foo bar")
+  end
 end