Rendering a slot without having to pass a block

[nshki]

This is something that @dylanatsmith and I were discussing recently and would love some thoughts from the community. We were in a situation in which we wanted to render a subcomponent using the parent component's state.

As a minimal example of what we wanted:

class BadgeComponent < ViewComponent::Base
  renders_one :icon, -> do
    IconComponent.new(name: @icon_name, style: :secondary)
  end

  # Constructor.
  #
  # @param text [String] Text for the badge
  # @param icon_name [String] Icon name for the badge
  def initialize(text:, icon_name:)
    @text = text
    @icon_name = icon_name
  end
end

<div class="badge">
  <%= icon %>
  <%= text %>
</div><!-- .badge -->

And the corresponding render would look something like:

<%= render(BadgeComponent.new(text: 'Hello VC community', icon_name: 'exclamation')) %>

This would ensure that the subcomponent would render in a way that was explicitly defined in the parent component. In the example, the extra style param for IconComponent would be fixed in the context of BadgeComponent.

However, to currently use slots in this way, the render call needs to look something like:

<%= render(BadgeComponent.new(text: 'Hello VC community', icon_name: 'exclamation')) do |component| %>
  <% component.icon {} %>
<% end %>

The nested block on the line component.icon {} must be passed otherwise the slot won't render.

For our implementation, we ended up ditching using a slot in this situation and rewriting the BadgeComponent template to look like:

<div class="badge">
  <%= render(IconComponent.new(name: @icon_name, style: :secondary)) %>
  <%= text %>
</div><!-- .badge -->

...which works, but I thought that perhaps it would be nicer to be able to do this with an explicit renders_one in the parent component, since that could give developers a central place to see all subcomponents.

Could it be worth exploring this type of slot usage?

[joelhawksley]

@nshki nice write up! First of all, y'all did the same thing I would have: composed the Icon component inside the Badge template.

Did you try something like render(BadgeComponent.new(text: 'Hello VC community', icon_name: 'exclamation').icon({}))? I'm not sure if that would work.

[dylanatsmith]

I’ve run into a similar situation again, thought I’d drop my use case in here.

I’m building a User component. It displays a single user’s info in a variety of configurations. By default, it looks like this:

I also need to be able to display a Badge component inside of our User component in some circumstances. "New", "Invited", "Pending review", etc.

The Badge component has arguments for label, size, and state. In the context of the User component, I need to force (or at least default to) size: :small, but label and state should be configurable per instance by other engineers.

The markup I’d expect to be able to use in the view:

<%= render(UserComponent.new(
  user: whatever
)) do |c| %>
  <% c.badge(label: "New") %>
<% end %>

With the component.rb defining default arguments something like this:

renders_one :badge, -> do
  BadgeComponent.new(size: :small)
end

The difference between this example and @nshki’s is that I wouldn’t need to define an argument like badge_label on the User component.

[boardfish]

That sounds like it'd be well-suited to a lambda slot:

class UserComponent < ApplicationComponent
  renders_one :badge, ->(label:,state:) { BadgeComponent.new(size: :small, label: label, state: state) }
end

I also like to use this pattern:

class UserComponent < ApplicationComponent
  renders_one :badge, ->(**params) { BadgeComponent.new(size: :small, **params) }
end

Though whether you spread params before or after setting size dictates whether or not you can override that argument.

[Spone]

It would be awesome to start building a "cookbook" of useful patterns when using slots!

[boardfish]

That's a great idea. I'd be really happy to maintain this!

[dylanatsmith]

I also like to use this pattern:

class UserComponent < ApplicationComponent
  renders_one :badge, ->(**params) { BadgeComponent.new(size: :small, **params) }
end

Though whether you spread params before or after setting size dictates whether or not you can override that argument.

This is awesome. Exactly what I needed in this case (with params before size). Thanks!