Ways to reduce boilerplate?

[mockdeep]

Overall we love what view_component provides for us, but one thing we're running up against is how much visual noise rendering a component creates in our views:

= render(ButtonComponent.new(:primary, :inverse, type: :submit))

What we'll probably do is drop the Component from the name, at the risk of naming clashes if, say, there were a model with the same name. But it also feels a little weird to me that we explicitly need to call .new. Maybe more in nitpick territory, but I think what I'd love to have is something like:

= render(Button, :primary, :inverse, type: :submit)

Or if we want to keep the component named ButtonComponent to avoid naming clashes, maybe we could pass a string instead and infer the name:

= render('button', :primary, :inverse, type: :submit)

We might end up monkey patching render on our end to support one of these alternatives, but I was wondering if anybody else has come up with something to reduce boilerplate. Or if there is any interest in having something like this built into view_component.

[jaredcwhite]

You could create a component helper that does exactly what your example shows and not have to monkey-patch render. I think that looks pretty neat:

component Button, :primary, :inverse, type: :submit

[mockdeep]

Ah, that's an idea.

[MatheusRich]

I've created this helper. I don't know if its 100% bullet proof, tho. Any thoughts @jaredcwhite?

module ComponentsHelper
  # Shorthand for rendering view_components
  #
  # Usage:
  #
  #   <%= component :section, title: 'Greeting', classes: 'my--1' do %>
  #     <p class="Txt--center">Hello world</p>
  #   <% end %>
  def component(name, *args, &block)
    component_class = "#{name.to_s.camelcase}::Component".constantize

    render_component(component_class.new(*args), &block)
  end
  ruby2_keywords :component
end

<%= component :section, title: 'Greeting', classes: 'my--1' do %>

should equal

<%= render_component Section::Component.new(title: 'Greeting', classes: 'my--1') do %>

[adrienpoly]

@MatheusRich I really like the idea. I have tested it and I am running into an issue with namespaced components

Cards::ProductComponent as an example

a way could be to write it like that

<%= component 'cards/product', product: @product %>

it would be quite similar to partials

[adrienpoly]

also an blog article with some alternatives https://dev.to/scottbarrow/rails-viewcomponent-helper-ibn

[MatheusRich]

That's exactly what I do. I use strings with namespaced components, because Rails' camelcase already handles it.

[adrienpoly]

Oh awesome thanks, not sure why it didn't work for me at first, but you are right. Must have done some typos during my tests 🤦