A more sane way of rendering view components from Erb, HAML, etc.

[bradgessler]

If you are tired of calling Rails view component like this:

<%= render MyComponent.new title: "foo" %>

Start calling them like this:

<%= my_component title: "foo" %>

I can open a PR with the helper at https://gist.github.com/bradgessler/cd91d5f2e333b99eed2fc0c3f76d827b in the lib if the maintainers of this repo would be interested in merging it in.

[boardfish]

Hey @bradgessler, thanks for opening this discussion! Syntax changes have been suggested before in #1204 and #385. My answer to both would be that this most likely won't be supported officially as it adds to the helper namespace. However, the linked discussions demonstrate that there's demand for something like this, so your changes may be welcome to users of ViewComponent. You might have some luck proposing this feature to view_component-contrib.

[bradgessler]

Thanks for the response. One more round of questions and comments should help me figure out where to go from here.

this most likely won't be supported officially as it adds to the helper namespace

As-is doesn't this add to the Ruby class/constant namespace? I'm not sure how that's any different than dynamically dispatching via a helper to the classes. e.g. the likely hood of a collision for calling a component named Foo::Bar::FormComponent via foo_bar_form_component likely wouldn't be an issue.

Since the proposal uses method_missing, there's not actually any sort of methods that are statically added to the helper namespace. There's some stuff missing from the proposal that I'd add if this team of contributors would allow it including:

1. Check if adefined method exists before dispatching the helper method to the view component.
2. Add support for namespaces such that Foo::Bar::FormComponent could be called via foo_bar_form_component

If this is still something that you wouldn't want to merge into the core project after my clarifications, that's still useful information for me as I'll create a gem that more aggressively integrates this library with Rails.

Thanks again!

[paul-ridgway]

Nice concept, even if not accepted its a great snippet and I'm using it. Would be nice if a component generated and registered its own helper (given I've not looked closely at the workings of rails helpers) from a potential efficiency perspective.

[joelhawksley]

@paul-ridgway @bradgessler what if we did render_my_component? I would be open to a PR if we were to compile these methods ahead of time (and not use method_missing).

[philliplongman]

My preference would definitely be for example_component & example_component_collection. Why include "render" in the helper? It's just extra characters.

With the method_missing approach, this is what I wrote for a project. I think I'll tweak the structure for my next project, but overall, I was very pleased with this.

module ApplicationComponentHelper
  def simple_form_for(*args, **opts, &)
    opts[:builder] ||= SimpleForm::Tailwind::FormBuilder

    super(*args, **opts, &)
  end

  private

  def method_missing(method_name, *args, **opts, &)
    super unless match_component_helper?(method_name)

    capture do
      render ComponentFinder.new(method_name, self).call(*args, **opts), &
    end
  end

  def respond_to_missing?(method_name, include_private = false)
    match_component_helper?(method_name) || super
  end

  def match_component_helper?(method_name)
    # ends in _component or _collection
    method_name =~ /\w+_(component|collection)$/
  end
end

ComponentFinder = Struct.new(:name, :scope) do
  def call(...)
    return component.with_collection(...) if name.end_with?("_collection")

    component.new(...)
  end

  private

  def component
    regular_component || shared_component || no_component_error
  end

  def regular_component
    [parent_module, unscoped_name, "Component"].flatten.join("::").safe_constantize
  end

  def shared_component
    ["Shared", unscoped_name, "Component"].flatten.join("::").safe_constantize
  end

  def parent_module
    # When the helper method is called in a view or partial, the scope
    # will be ActionView::Base.
    scope.is_a?(ViewComponent::Base) ? scope.class.module_parent : nil
  end

  def unscoped_name
    name.to_s.remove(/_(component|collection)$/).camelize
  end

  def method
    name.end_with?("_collection") ? :with_collection : :new
  end

  def no_component_error
    raise "`#{unscoped_name}::Component` is not defined in this scope (#{parent_module || 'ActionView::Base'})."
  end
end

[stephannv]

Another option is using your own registry, which I prefer over using method missing:

module ComponentHelpers
  HELPERS = {
    card: "CardComponent",
    label: "LabelComponent",
    badge: "BadgeComponent"
  }
  
  HELPERS.each do |name, component|
    define_method "#{name}_component" do |*args, **kwargs, &block|
      render component.constantize.new(*args, **kwargs), &block
    end
  end
end

class BaseComponent < ViewComponent::Base
  include ComponentHelpers
end

class UserCard < BaseComponent
  def call
    card_component do |card|
      card.title { "Hello" }
    end
  end
end
# OR in .html.erb
<%= badge_component { "Hello" } %>

[peteryates]

This is exactly the approach taken by GOV.UK Components here.