Slots V2

[BlakeWilliams]

Summary

This PR introduces the second iteration of slots, Slotable::V2. This takes
feedback we've received about the original iteration of slots as well as the
experiences we've had with the original iteration of slots and builds on them.

Here's an overview of the changes:

• with_slot becomes renders_one
• with_slot collections become renders_many
• Slots no longer accept a class_name argument, and instead accept a component or a lambda that allow you to extend the slot.
• Slots now accept positional arguments in addition to keyword arguments
• Slots no longer use content in templates to render their content, they instead use to_s. e.g. <%= item.content %> becomes <%= item %>
• Components no longer set slot values with the #slot method, instead they use the slot method directly. e.g. c.slot(:row, theme: :yellow)becomes c.row(theme: yellow)

V1 example

Defining a component

class MyComponent < ViewComponent::Base
  with_slot :row, collection: true, class_name: "Row"

  class Row < ViewComponent::Slot
    def initialize(theme: :gray)
      @theme = theme
    end

    def theme_class_name
      case @theme
      when :gray
        "Box-row--gray"
      when :hover_gray
        "Box-row--hover-gray"
      when :yellow
        "Box-row--yellow"
      when :blue
        "Box-row--blue"
      when :hover_blue
        "Box-row--hover-blue"
      else
        "Box-row--gray"
      end
    end
  end
end

Defining a component's template

<%= if rows.any? %>
  <% rows.each do |row| %>
    <%= row.content %>
  <% end %>
<% end %>

Using a component

<% component.slot(:row) do %>
  Row one
<% end %>
<% component.slot(:row, theme: :yellow) do %>
  Yellow row
<% end %>

V2 equivalent of the above example

Defining a component

class MyComponent < ViewComponent::Base
  renders_many :rows, -> (theme: :gray) { Row.new(theme: theme) }

  class RowComponent < ViewComponent::Base
    def initialize(theme:)
      @theme = theme
    end

    def theme_class_name
      case @theme
      when :gray
        "Box-row--gray"
      when :hover_gray
        "Box-row--hover-gray"
      when :yellow
        "Box-row--yellow"
      when :blue
        "Box-row--blue"
      when :hover_blue
        "Box-row--hover-blue"
      else
        "Box-row--gray"
      end
    end
  end
end

Defining a component's template

<%= if rows.any? %>
  <% rows.each do |row| %>
    <%= row %>
  <% end %>
<% end %>

Defining the Row component's template:

<div class="<%= theme_class_name %>">
  <%= content %>
</div>

Using a component

<% component.row do %>
  Row one
<% end %>
<% component.row(theme: :yellow) do %>
  Yellow row
<% end %>

[swanson]

I really like the <% component.row do %> short-hand, but I prefer the old with_slot DSL for defining slots. I can see how the new language is more Rails-y, but my sense is that "slots" term is winning the mindshare (with the two closest alternatives to view_component to me being Vue and the headless-ui work from the Tailwind team that use "Slots").

[bradgessler]

I like this API much better, including the terminology "renders" over "slots". It actually reminds me quite a bit of ActiveRecord has_many blocks.

I am curious, what would it look like if somebody wanted to reverse the order of what's rendered from the components before_render methods? There's a lot of other use cases that may want to programmatically alter the state of the view component or collections from component code (not the view).

[bbugh]

Thanks for all of your hard work on this! The slot less usage looks great.

One of the things I am most excited about with view_component are libraries like bootstrap-view-component and simple-form-view-component equivalents. I was disappointed to see the DSL come back after all of the discussion in the first thread, but I don't have anything new to say and won't rehash it.

How will the DSL behave when a subclassed component needs to override the slot?

class ThirdPartyGemComponent < ViewComponent::Base
  renders_one :thing do
    # ...
  end
end

class MyAppComponent < ThirdPartyGemComponent
  renders_one :thing do
    # Does this replace the other slot? Extend it? 
  end
end

What about templates? If MyAppComponent defines a template, will it override the ThirdPartyGemComponent one?

I'm SO THRILLED y'all are working so hard on making this an important part of Rails. I didn't like the Rails view/helper system ten years and I like it even less now. Component-based setups are really awesome way to shore up some of the issues with a viewmodel-less MVC scenario.

[BlakeWilliams]

How will the DSL behave when a subclassed component needs to override the slot?

That's a great question. Right now you would you would call renders_one or renders_many and the slot would be overwritten. There is no inheriting slots, but I think the changes in v2 will help promote composition. React has some really great documentation on it that I feel applies to view components as well: https://reactjs.org/docs/composition-vs-inheritance.html

That being said, this PR is trending away from slots being their own user defined classes, and more towards being functions that can return HTML or a component instance that will be rendered on the page. I think being able to delegate to an existing component provides an escape hatch for inheritance if it's necessary.

class ThirdPartyGemComponent < ViewComponent::Base
  renders_one :thing do
    # ...
  end
end

class MyAppComponent < ThirdPartyGemComponent
  renders_one :thing do
    # Does this replace the other slot? Extend it? 
  end
end

In this example, renders_one :thing would replace the parent implementation. We should definitely add test coverage though.

What about templates? If MyAppComponent defines a template, will it override the ThirdPartyGemComponent one?

Yep! Exactly. I think that should be the existing behavior too.

I'm SO THRILLED y'all are working so hard on making this an important part of Rails. I didn't like the Rails view/helper system ten years and I like it even less now. Component-based setups are really awesome way to shore up some of the issues with a viewmodel-less MVC scenario.

Thank you! That means a lot. ❤️

[jonspalmer]

great work a couple of questions about details

[joelhawksley]

TODO: collection slot rendering:

component.items(@items...)

[joelhawksley]

TODO: Add to docs/index.md

[joelhawksley]

TODO: Add test for subcomponent with call method instead of template.

[joelhawksley]

TODO: Note that slots V1 is deprecated.

[halo]

Thank you for your hard work on this. This is great.

[BlakeWilliams]

Just pushed up a PR that should resolve the last bit of docs feedback.

[cheshire137]

Is this available in the view_component gem yet? The latest version I'm seeing is 2.22.1 from Nov 10. 🙇‍♀️

[cheshire137]

Ah, 2.23.0 has it, thanks @BlakeWilliams!