With the #with_variant deprecation, what would be right approach here?

[cabra-andrade]

Hey, folks, I appreciate the help with this, I've done some search for variant usage, but none of the results seemed to match my case.

I have many driver component which are initialized once each, but in my templates I need to render a large and an xs variant for each of those.

I currently have this when rendering one of my components (DriverComponent):

<% drivers.each do |driver| %>
  <%= render driver.with_variant(:large) %>
<% end %>
<%# ... %>
<div class="xs-collection">
  <% drivers.each do |driver| %>
    <%= render driver.with_variant(:xs) %>
  <% end %>
</div>

This currently works and it makes perfect sense to me. But, if I understand it correctly, with the recent deprecation of the #with_variant method, it will stop working at some point.

What should I be doing here instead? Is initializing once and then rendering twice a bad approach?

[Spone]

Hi! Can you provide a bit more code, such as the component class and the variants template files? It would help figuring out the best solution in your case, because I guess some degree of refactoring is needed to replace the variants approach. Thanks!

[boardfish]

@cabra-andrade Here's one route you might want to consider:

1. Turn your current DriverComponent into an ActiveSupport::Concern (or regular module), e.g.:

class DriverComponent < ApplicationComponent
   ...
end

to:

module DriverComponent
  extend ActiveSupport::Concern
 
  ...
end

You may need to move some code into the included or class_methods blocks provided by Concern as appropriate.

2. Create a LargeDriverComponent and XSDriverComponent. include DriverComponent in each of these, and copy and rename the variant templates you had previously to the appropriate locations for these components.
3. Initialize an array of each type of component based on the same data. For example:

# Assuming you previously initialized drivers from some variable called drivers_data
large_drivers = drivers_data.map { |data| LargeDriverComponent.new(data) }
xs_drivers = drivers_data.map { |data| XSDriverComponent.new(data) }

4. Render these out:

<% large_drivers.each do |driver| %>
  <%= render driver %>
<% end %>
<%# ... %>
<div class="xs-collection">
  <% xs_drivers.each do |driver| %>
    <%= render driver %>
  <% end %>
</div>

I'd also recommend checking out the docs on collections to see if you can benefit from them.

[boardfish]

It might also be possible to have some DriverDisplayComponent that delegates off to LargeDriverComponent or XSDriverComponent based on a param, in theory. Hope this is all helpful to you!

[chenkovsky]

is this possible?

class ApplicationComponent
   def my_with_variant(v)
    @variant = v
    self
   end

   def call
       send("call_#{@variant}")
   end
end