Thoughts on component duplication

[AlecRust]

We have a fair number of components and ended up with a lot of duplication for each component e.g.

Each parameter is repeated 3 or 4 times but it's not doing much:

class Badge < ViewComponent::Base
  include ActiveModel::Validations

  validates :value, :label, :color, presence: true

  def initialize(value:, label:, color:, class_names: nil)
    @value = value
    @label = label
    @color = color
    @class_names = class_names
  end

  def before_render
    validate!
  end

  private

  attr_reader :value, :label, :color, :class_names
end

This same setup was getting repetitive for all of our UI components so we added an abstraction to simplify it:

app/lib/active_model_view_component.rb

module ActiveModelViewComponent
  def self.included(mod)
    mod.include ActiveModel::Model
    mod.include ActiveModel::Attributes
    mod.include ActiveModel::Validations
  end

  def before_render
    validate!
  end
end

Component file now becomes just:

class Badge < ViewComponent::Base
  include ActiveModelViewComponent

  validates :value, :label, :color, presence: true

  attribute :value
  attribute :label
  attribute :color
  attribute :class_names
end

My question is basically, what do you think of this? Is there a better way we should be cutting down on this "scaffolding" for each component? Is defining parameters in just one place something that's been considered for ViewComponent, or using ActiveModel::Attributes?

[boardfish]

Hey Alec, thanks for opening this discussion! I've taken a very similar approach - if you haven't already, you might want to check out Joel's talk on ViewComponent at last year's RailsConf where he talks about fetch-or-fallback.

One of ViewComponent's key benefits is speed. Introducing Active Model on top of this might have some implications there, and whether that part of Rails is considered stable is still a little bit contentious, though there's been talk of making its API fully public. But I've definitely seen a pattern of either Active Model or dry-initializer being used so that descendants can extend the parent class's API in a way that's nice and readable.

I personally used Active Model and validations in the ApplicationComponent class at @raisedevs, and found it to be very useful and readable, so I'd recommend continuing down that path. As for whether it becomes part of ViewComponent itself, I can't say for sure.

[Spone]

Hi @AlecRust, it's an interesting topic! My two cents below.

You could also leverage ActiveSupport::Concern, and follow the Rails convention for the file location: app/components/concerns instead of app/lib, to make it clear that this module is meant to be included in ViewComponents.

# app/components/concerns/active_model_view_component.rb
module ActiveModelViewComponent
  extend ActiveSupport::Concern

  included do
    include ActiveModel::Model
    include ActiveModel::Attributes
    include ActiveModel::Validations
  end

  def before_render
    validate!
  end
end

I use a similar approach with concerns such as:

• IdentifierHelper adds an #identifier method to the component (inspired from this)
• CssClassesHelper adds a few methods to manage CSS classes (using class_names and also inspired from this)
• StimulusHelper adds methods to generate stimulus data attributes such as target, action, value... (inspired from Sharing some concerns #537)

But I don't use Active Model or concerns to define attributes. I prefer to use dry-initializer for this. Here is an example.

[AlecRust]

Thanks both for your comments really appreciate it! Some great ideas 👀