Slots

[collimarco]

It would be nice to have a feature like this:

https://viewcomponent.org/guide/slots.html

For example, if you want to create a nav component, you may want to add multiple links:

<%= render "components/nav" do |partial| %>
  <% partial.link "Link 1", page_path %>
  <% partial.link "Link 2", another_path %>
<% end %>

[kaspth]

Yeah, good point, we don't have anything quite like this out of the box — iirc we'll try to to_s these values immediately.

I've been trying to think of a way to collect these Array like values and defer the to_s, but it's not the easiest and could have other implications.

We do have the ability to yield into a block. I haven't tried this, but I'm wondering if this would be a fit?

<%= render "components/nav" do |partial| %>
  <% partial.link { _1.link_to "Link 1", page_path } %>
  <% partial.link { _1.link_to "Link 2", another_path } %>
<% end %>

<%# app/views/components/_nav.html.erb %>
<%# Here we're yielding an element that the rendering block above can finalize by passing a block. %>
<% partial.link.yield with_options(class: "text-m4", data: { controller: "title" }) %>
<a href="…" class="text-m4" data-controller="title">Link 1</a>
<a href="…" class="text-m4" data-controller="title">Link 2</a>

[kaspth]

cc @seanpdoyle I'm wondering if you've run into something like this and how you've handled it in your use of Nice Partials.

[julianrubisch]

I ran into this, we should probably add it to the README. I'll set something up.

[kaspth]

@julianrubisch sounds good!

[collimarco]

Any updates on this?

[TeriyakiBomb]

Right now, I do this:

<%= render "shared/popover/popover_container" do |partial| %>
  <%= partial.target do %>
    <%= icon "dots-horizontal", classes: "pt-1" %>
  <% end %>
  <%= render "shared/popover/menu_item",
             text: "Archived tasks",
             url: archived_project_tasks_path(project) %>
  <%= render "shared/popover/menu_item",
             text: "Projects",
             url: project_meetings_path(project) %>
<% end %>

And then menu_item is just:

<%# locals: (text:nil, url: nil) %>

<li class="<%= partial.classes.optional %>">
  <%= link_to text, url %>
  <%= partial.yield %>
</li>

It's a little verbose and I'm mixing the "nice partials way" and regular un-enhanced partial behavior (Which I guess is half the point), I'd love something a little more like slots though :)

[kaspth]

Interesting, thanks for sharing how you're doing it!

I'd love something a little more like slots though :)

I'm trying to picture what slots would look like, since it can have different meanings.

Would it look like this or something else?

<%= render "shared/popover/popover_container" do |partial| %>
  <%= partial.target.icon "dots-horizontal", classes: "pt-1" %> # This should work today by the way.

  <%= partial.menu_item "Archived tasks", archived_project_tasks_path(project) %>
  <%= partial.menu_item "Projects",       project_meetings_path(project) %>
<% end %>

[TeriyakiBomb]

Interesting, thanks for sharing how you're doing it!

I'd love something a little more like slots though :)

I'm trying to picture what slots would look like, since it can have different meanings.

Would it look like this or something else?

Pretty much exactly like this, yeah.

One wrinkle, I think there would be scenarios where an inner slot-like element would still be desirable as a separate file. Hypothetically, menu_item could be more universal, I’d use the same one in dropdowns and horizontal menus etc.

So I think it’s twofold - a nice clean way to insert into slots and ideally some nice shorthand for passing another partial into a slot. I’ve only skimmed the view component docs and it seems you reference the expected child component into a slot. Which seems pretty nice.

<%= partial.target.icon "dots-horizontal", classes: "pt-1" %> # This should work today by the way.

You know, I realised that about 30 minutes after I posted the comment 😂

[kaspth]

One wrinkle, I think there would be scenarios where an inner slot-like element would still be desirable as a separate file. Hypothetically, menu_item could be more universal, I’d use the same one in dropdowns and horizontal menus etc.

In that case, I wonder if using a helper here will work.

Basically this works today:

module PopoverHelper
  def menu_item(text, url, classes: nil, &block)
    render("shared/popover/menu_item", text:, url:, classes:, &block)
  end
end

and then you can do:

<%= render "shared/popover/popover_container" do |partial| %>
  <%= partial.target.icon "dots-horizontal", classes: "pt-1" %> # This should work today by the way.

  <%= partial.items.menu_item "Archived tasks", archived_project_tasks_path(project) %>
  <%= partial.items.menu_item "Projects",       project_meetings_path(project) %>
<% end %>

So I think it’s twofold - a nice clean way to insert into slots and ideally some nice shorthand for passing another partial into a slot. I’ve only skimmed the view component docs and it seems you reference the expected child component into a slot. Which seems pretty nice.

Hm yeah, I'm not sure if it's possible to define an automatic pattern here. At least I can't see it yet.

It's also worth noting that this works out of the box too:

<%= partial.items.render "shared/popover/menu_item", … %>

[TeriyakiBomb]

That's actually really nice, I did not think of that.

[kaspth]

@TeriyakiBomb nice! I'm curious to hear how it goes

[TeriyakiBomb]

@kaspth I had a look earlier around how VC does it. I'm sure you've already thought about this (I did and I couldn't think of a decent solution) but if the equivalent of .menu_item was more a dynamic setter via a partial helper class in ApplicationHelper and then inline with the partial or in a separate helper you could do:

slot menu_item: "path_to_partial/partial_name"

I'm not sure if this is too far out of scope for nice partials though and like I said, scratching the surface of it, I can't think of a sensible way to do this. Using the path to the partial for the method name sounds ripe for clashes IDK.

For now, I've gone with <%= partial.items.render "shared/popover/menu_item", … %> which is pretty acceptable :D