Upgrades ActionView::Component to the new ViewComponent. Also updates…

… README to denote no need for dev caching flag.

Gemfile

@@ -5,7 +5,6 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
 ruby '2.6.5'
 
-gem 'actionview-component'
 gem 'bootsnap', '>= 1.4.4', require: false
 gem 'config', '~> 2.0'
 gem 'hiredis'
@@ -15,6 +14,7 @@ gem 'rails', '~> 6.0.2'
 gem 'redis'
 gem 'sidekiq'
 gem 'simplecov', '< 0.18', require: false, group: :test
+gem 'view_component'
 gem 'warden', '~> 1.2'
 gem 'webpacker'
 

Gemfile.lock

@@ -37,8 +37,6 @@ GEM
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
-    actionview-component (1.17.0)
-      capybara (~> 3)
     activejob (6.0.3.2)
       activesupport (= 6.0.3.2)
       globalid (>= 0.3.6)
@@ -351,6 +349,8 @@ GEM
       unf_ext
     unf_ext (0.0.7.7)
     unicode-display_width (1.7.0)
+    view_component (2.18.0)
+      activesupport (>= 5.0.0, < 7.0)
     warden (1.2.8)
       rack (>= 2.0.6)
     warden-rspec-rails (0.2.0)
@@ -378,7 +378,6 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  actionview-component
   better_errors
   binding_of_caller
   bootsnap (>= 1.4.4)
@@ -402,6 +401,7 @@ DEPENDENCIES
   sinatra
   spring
   spring-watcher-listen (~> 2.0.0)
+  view_component
   warden (~> 1.2)
   warden-rspec-rails
   webdrivers (~> 4.0)

README.md

@@ -65,7 +65,7 @@ Monitor the behavior by tailing the logs:
 Locally you'll need to run:
 
 ```
-bundle exec rails s --dev-caching
+bundle exec rails s
 docker start redis-the-new-black
 bin/webpack-dev-server
 bundle exec sidekiq

app/components/bib_item_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class BibItemComponent < ActionView::Component::Base
+class BibItemComponent < ViewComponent::Base
   CATALOG_URL = Rails.application.config.catalog_url
   TYPES_NOT_LINKED = Rails.application.config.unlinked_types
 

app/components/dashboard_item_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class DashboardItemComponent < ActionView::Component::Base
+class DashboardItemComponent < ViewComponent::Base
   def initialize(model:, count:, count_term: nil, currency: nil, items: nil)
     @model = model
     @count = count

app/components/generic_value_with_label_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class GenericValueWithLabelComponent < ActionView::Component::Base
+class GenericValueWithLabelComponent < ViewComponent::Base
   def initialize(label:, value:)
     @label = label
     @value = value

app/components/place_hold_checkbox_wrapper_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class PlaceHoldCheckboxWrapperComponent < ActionView::Component::Base
+class PlaceHoldCheckboxWrapperComponent < ViewComponent::Base
   def initialize(volumetric_calls: nil)
     @volumetric_calls = volumetric_calls
   end

app/components/place_hold_error_component.html.erb

@@ -1,5 +1,5 @@
 <p>
-  <%= render BibItemComponent, bibitem: bib %>
+  <%= render BibItemComponent.new bibitem: bib %>
   <small class="text-secondary">
     <strong><%= error_message %></strong>
   </small>

app/components/place_hold_error_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class PlaceHoldErrorComponent < ActionView::Component::Base
+class PlaceHoldErrorComponent < ViewComponent::Base
   def initialize(result:)
     @bib = result[:failed_hold]
     @error_message = result[:error_message]

app/components/place_hold_hidden_input_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class PlaceHoldHiddenInputComponent < ActionView::Component::Base
+class PlaceHoldHiddenInputComponent < ViewComponent::Base
   def initialize(barcode:)
     @barcode = barcode
   end

app/components/place_hold_success_component.html.erb

@@ -1,5 +1,5 @@
 <p>
-  <%= render BibItemComponent, bibitem: placed_hold %>
+  <%= render BibItemComponent.new bibitem: placed_hold %>
   <small class="text-secondary">
     <strong>Pickup at</strong>: <%= pickup_library %><br>
     <strong>Not needed after</strong>: <%= fill_by_date %>

app/components/place_hold_success_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class PlaceHoldSuccessComponent < ActionView::Component::Base
+class PlaceHoldSuccessComponent < ViewComponent::Base
   def initialize(result:)
     @placed_hold = result[:placed_hold]
   end

app/components/select_all_child_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class SelectAllChildComponent < ActionView::Component::Base
+class SelectAllChildComponent < ViewComponent::Base
   def initialize(name: nil, key:, target_keyword:)
     @name = name || "#{target_keyword}_list[]"
     @key = key

app/components/select_all_component.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-class SelectAllComponent < ActionView::Component::Base
+class SelectAllComponent < ViewComponent::Base
   def initialize(target_keyword:)
     @target_keyword = target_keyword
     @name = "#{target_keyword}_all"

app/views/checkouts/_checkouts_table.html.erb

@@ -5,7 +5,7 @@
       <tr>
         <th scope="col">
           <%= submit_tag 'Renew', class: 'btn btn-primary', data: { disable_with: 'Please wait...' } %><br>
-          <%= render SelectAllComponent, target_keyword: 'renewal' %>
+          <%= render SelectAllComponent.new target_keyword: 'renewal' %>
         </th>
         <th scope="col">Item</th>
         <th scope="col">Times Renewed</th>
@@ -24,10 +24,10 @@
       <% checkouts.each do |checkout| %>
           <tr id="checkout<%= checkout.item_key %>">
             <td>
-              <%= render SelectAllChildComponent, key: checkout.item_key, target_keyword: 'renewal' %>
+              <%= render SelectAllChildComponent.new key: checkout.item_key, target_keyword: 'renewal' %>
             </td>
             <td>
-              <%= render BibItemComponent, bibitem: checkout %>
+              <%= render BibItemComponent.new bibitem: checkout %>
             </td>
             <td class="renewal_count"><span><%= checkout.renewal_count if checkout.renewal_count.positive? %></span></td>
             <td class="due_date"><span><%= render partial: 'checkouts/due_date', locals: { checkout: checkout } %></span></td>

app/views/fines/_fines_table.html.erb

@@ -15,7 +15,7 @@
   <% @fines.each do |fine| %>
     <tr>
       <td>
-        <%= render BibItemComponent, bibitem: fine %>
+        <%= render BibItemComponent.new bibitem: fine %>
       </td>
       <td><%= fine.author %></td>
       <td><%= fine.status_human %></td>

app/views/holds/_holds_not_ready_table.html.erb

@@ -6,7 +6,7 @@
     <tr>
       <th scope="col">
         Select <br>
-        <%= render SelectAllComponent, target_keyword: 'pending' %>
+        <%= render SelectAllComponent.new target_keyword: 'pending' %>
       </th>
       <th scope="col">Item</th>
       <th scope="col">Availability</th>
@@ -20,10 +20,10 @@
     <% holds_not_ready.each do |hold| %>
       <tr id="hold<%= hold.key %>">
         <td>
-          <%= render SelectAllChildComponent, key: hold.key, target_keyword: 'pending', name: 'hold_list[]' %>
+          <%= render SelectAllChildComponent.new key: hold.key, target_keyword: 'pending', name: 'hold_list[]' %>
         </td>
         <td>
-          <%= render BibItemComponent, bibitem: hold %>
+          <%= render BibItemComponent.new bibitem: hold %>
         </td>
         <td><%= render_queue_position hold %></td>
         <td class="pickup_at"><span><%= hold.pickup_library_human %></span></td>

app/views/holds/_holds_ready_table.html.erb

@@ -5,7 +5,7 @@
     <tr>
       <th scope="col">
         Select <br>
-        <%= render SelectAllComponent, target_keyword: 'ready' %>
+        <%= render SelectAllComponent.new target_keyword: 'ready' %>
       </th>
       <th scope="col">Item</th>
       <th scope="col">Pickup at</th>
@@ -16,10 +16,10 @@
     <% holds_ready.each do |hold| %>
       <tr id="hold<%= hold.key %>">
         <td>
-          <%= render SelectAllChildComponent, key: hold.key, target_keyword: 'ready', name: 'hold_list[]' %>
+          <%= render SelectAllChildComponent.new key: hold.key, target_keyword: 'ready', name: 'hold_list[]' %>
         </td>
         <td>
-          <%= render BibItemComponent, bibitem: hold %>
+          <%= render BibItemComponent.new bibitem: hold %>
         </td>
         <td><%= hold.pickup_library_human %></td>
         <td class="hold_status"><%= render_expiration_date hold %></td>

app/views/holds/_results.html.erb

@@ -1,15 +1,15 @@
 <% if place_hold_results[:error].present? %>
   <h3> <%= pluralize place_hold_results[:error].length, 'Hold' %> Failed </h3>
   <% place_hold_results[:error].each do |result| %>
-    <%= render PlaceHoldErrorComponent, result: result %>
+    <%= render PlaceHoldErrorComponent.new result: result %>
   <% end %>
   <p><%= t('myaccount.hold.place_hold.error_html') %></p><br>
 <% end %>
 
 <% if place_hold_results[:success].present? %>
   <h3> <%= pluralize place_hold_results[:success].length, 'Hold' %> Placed </h3>
   <% place_hold_results[:success].each do |result| %>
-    <%= render PlaceHoldSuccessComponent, result: result %>
+    <%= render PlaceHoldSuccessComponent.new result: result %>
   <% end %>
   <p><%= t('myaccount.hold.place_hold.success_html') %></p><br>
 <% end %>

app/views/holds/new.html.erb

@@ -1,15 +1,15 @@
 <h1>A Hold Will Be Placed For You</h1>
 
 <p>
-  <%= render GenericValueWithLabelComponent, label: 'Title', value: @place_hold_form_params[:title] %> <br>
-  <%= render GenericValueWithLabelComponent, label: 'Author', value: @place_hold_form_params[:author] %>
+  <%= render GenericValueWithLabelComponent.new label: 'Title', value: @place_hold_form_params[:title] %> <br>
+  <%= render GenericValueWithLabelComponent.new label: 'Author', value: @place_hold_form_params[:author] %>
 </p>
 
 <%= form_with url: '/holds', local: true, method: :post do %>
-  <%= render PlaceHoldHiddenInputComponent, barcode: @place_hold_form_params[:barcode] %>
+  <%= render PlaceHoldHiddenInputComponent.new(barcode: @place_hold_form_params[:barcode]) %>
   <%= hidden_field_tag :catkey, params[:catkey] %>
   <%= render partial: 'holds/form_inputs', locals: { validate_pickup_info: true, make_default: true } %>
-  <%= render PlaceHoldCheckboxWrapperComponent, volumetric_calls: @place_hold_form_params[:volumetric_calls] %>
+  <%= render PlaceHoldCheckboxWrapperComponent.new volumetric_calls: @place_hold_form_params[:volumetric_calls] %>
   <%= submit_tag('Place Hold', class: 'btn btn-info') %>
   <%= link_to 'Cancel', Rails.application.config.catalog_url + @place_hold_form_params[:catkey], class: 'btn btn-danger' %>
 <% end %>

config/application.rb

@@ -16,7 +16,7 @@
 # require 'action_text/engine'
 # require "sprockets/railtie"
 # require "rails/test_unit/railtie"
-require 'action_view/component/railtie'
+require 'view_component/engine'
 
 # Require the gems listed in Gemfile, including any gems
 # you've limited to :test, :development, or :production.

spec/components/bib_item_component_spec.rb

@@ -4,7 +4,7 @@
 
 RSpec.describe BibItemComponent, type: :component do
   let(:hold) { build(:hold) }
-  let(:component) { render_inline(described_class, bibitem: hold).to_html }
+  let(:component) { render_inline(described_class.new(bibitem: hold)).to_html }
 
   before do
     allow(hold).to receive(:item_type_mapping).and_return(ITEM_TYPE_MAPPING)

spec/components/dashboard_item_component_spec.rb

@@ -12,7 +12,7 @@
                                     count: 3
                                   }
                                 ] }}
-  let(:component) { render_inline(described_class, dashboard_item_args).to_html }
+  let(:component) { render_inline(described_class.new(dashboard_item_args)).to_html }
 
   it 'makes a list' do
     dashboard_item_args[:items] << {

spec/components/generic_value_with_label_component_spec.rb

@@ -5,19 +5,19 @@
 RSpec.describe GenericValueWithLabelComponent, type: :component do
   let(:value) { 'Eleventy Billion' }
   let(:label) { 'Number of Insects' }
+  let(:rendered_component) { render_inline(described_class.new(label: label, value: value)) }
 
   context 'when given an arbitrary simple field and value' do
     it 'produces a label to go along with the value' do
-      expect(render_inline(described_class, label: label, value: value).to_html).to include '<strong>Number of '\
-                                                                                            'Insects:</strong> '\
-                                                                                            'Eleventy Billion'
+      expect(rendered_component.to_html).to include '<strong>Number of Insects:</strong> Eleventy Billion'
     end
   end
 
   context 'when the given value is nil' do
+    let(:value) { nil }
+
     it 'does not print anything' do
-      value = nil
-      expect(render_inline(described_class, label: label, value: value).to_html).to be_empty
+      expect(rendered_component.to_html).to be_empty
     end
   end
 end

spec/components/place_hold_checkbox_wrapper_component_spec.rb

@@ -3,7 +3,7 @@
 require 'rails_helper'
 
 RSpec.describe PlaceHoldCheckboxWrapperComponent, type: :component do
-  let(:component) { render_inline(described_class, volumetric_calls: volumetric_calls).to_html }
+  let(:component) { render_inline(described_class.new(volumetric_calls: volumetric_calls)).to_html }
 
   context 'when volumetric calls are not present' do
     let(:volumetric_calls) { [] }

spec/components/place_hold_error_component_spec.rb

@@ -15,14 +15,14 @@
 
   it 'renders when there is a failed hold' do
     result = { failed_hold: bib, error_message: error_message }.with_indifferent_access
-    component = render_inline(described_class, result: result).to_html
+    component = render_inline(described_class.new(result: result)).to_html
     expect(component).to include('Some Title / Somebody', 'a_call_number', 'Book',
                                  'User already has a hold on this material')
   end
 
   it 'does not render when there is not an failed hold' do
     result = { failed_hold: bib, error_message: nil }.with_indifferent_access
-    component = render_inline(described_class, result: result).to_html
+    component = render_inline(described_class.new(result: result)).to_html
     expect(component).to be_empty
   end
 end

spec/components/place_hold_hidden_input_component_spec.rb

@@ -4,12 +4,12 @@
 
 RSpec.describe PlaceHoldHiddenInputComponent, type: :component do
   it 'renders when there\'s a barcode' do
-    component = render_inline(described_class, barcode: '1').to_html
+    component = render_inline(described_class.new(barcode: '1')).to_html
     expect(component).not_to be_empty
   end
 
   it 'does not render when there is not a barcode' do
-    component = render_inline(described_class, barcode: nil).to_html
+    component = render_inline(described_class.new(barcode: nil)).to_html
     expect(component).to be_empty
   end
 end

spec/components/place_hold_success_component_spec.rb

@@ -18,13 +18,13 @@
 
   it 'renders when there is a hold placed' do
     result = { placed_hold: hold }.with_indifferent_access
-    component = render_inline(described_class, result: result).to_html
+    component = render_inline(described_class.new(result: result)).to_html
     expect(component).to include('Some Title / Somebody', 'Book', 'a_call_number', 'UP-PAT', 'February 20, 2020')
   end
 
   it 'does not render when there is not a hold placed' do
     result = {}
-    component = render_inline(described_class, result: result).to_html
+    component = render_inline(described_class.new(result: result)).to_html
     expect(component).to be_empty
   end
 end

spec/components/select_all_child_component_spec.rb

@@ -5,7 +5,7 @@
 RSpec.describe SelectAllChildComponent, type: :component do
   let(:select_all_child_args) { { target_keyword: 'renewal', key: '1111111:1:1' } }
 
-  let(:component) { render_inline(described_class, select_all_child_args).to_html }
+  let(:component) { render_inline(described_class.new(select_all_child_args)).to_html }
 
   context 'when a name is not given as an argument, uses type as name' do
     it 'makes a child checkbox' do

spec/components/select_all_component_spec.rb

@@ -5,7 +5,7 @@
 RSpec.describe SelectAllComponent, type: :component do
   let(:select_all_args) { { target_keyword: 'renewal' } }
 
-  let(:component) { render_inline(described_class, select_all_args).to_html }
+  let(:component) { render_inline(described_class.new(select_all_args)).to_html }
 
   it 'makes a select all checkbox' do
     expect(component).to include 'input type="checkbox" name="renewal_all"'