Setting up a nested slot

[boardfish]

Thanks to @neanias for prompting this.

You may have three layers of depth you'd like to travel through with components. Say you have a ParentComponent that renders a ChildComponent, which itself renders a GrandchildComponent, and you'd like to access the grandchild from the ParentComponent.

You can do so by defining a method with_grandchild on your ParentComponent, like this:

# frozen_string_literal: true

class ParentComponent < ViewComponent::Base
  renders_one :child, ChildComponent

  def with_grandchild(*args, &block)
    with_child { |child| child.with_grandchild(*args, &block) }
  end
end

Now, instead of needing to traverse through all three layers...

<%= render ParentComponent do |p| %>
  <% p.child do |c| %>
    <% c.grandchild %>
  <% end %>
<% end %>

You can instead...

<%= render ParentComponent do |p| %>
  <% p.with_grandchild %>
<% end %>

with_grandchild calls with_child on the ParentComponent, which sets up the child slot to be ready to accept with_grandchild. If you'd still like to configure the child slot, then you might need to use the first example. And if you're worried about folks not calling with_grandchild and thus not having a child set at all, then I'd suggest using this pattern.

EDIT: You can pass a block through too. I've updated the method signature to show that.

<%= render ParentComponent.new do |p| %>
  <% p.with_grandchild do %>
    <%= tag.div(style: "border: 1px solid gray") { "And it takes a block!" } %>
  <% end %>
<% end %>

[joelhawksley]

@boardfish clever! Almost feels like a belongs_to :foo, through: :bar kind of relationship. Perhaps there's an opportunity to do something similar here?

[Spone]

Yeah I can totally see a renders_one :button, through: :card API being useful!

[Spone]

Updated syntax to leverage Ruby 2.7+ argument forwarding with ...:

# frozen_string_literal: true

class ParentComponent < ViewComponent::Base
  renders_one :child, ChildComponent

  def with_grandchild(...)
    with_child { |child| child.with_grandchild(...) }
  end
end