Context Passing with View Components

[jacobdaddario]

Hey team!

I've been getting into the nuts and bolts of view components recently, and I've really enjoyed poking around your codebase. I've run into a question about view contexts that I wanted to ask here.

Do view components create a new view_context? I see in some of the code, there's allusions to the original view context, which I imagine is ActionView::Base. Does this mean that the view components create their own view context? ViewComponent::Base looks like it meets the criteria for being a view context laid out in the Rails API docs, but the method signature of initialize is throwing me off. It technically takes all of the required arguments to be a view context, but it doesn't necessarily require them.

As a second part to this question, if view components do create new view contexts, is it possible to pass information through contexts in a similar fashion to React? I'm developing something right now that would require what is essentially a fair amount of prop drilling that I wouldn't mind avoiding if possible.

Thanks for your help! Always enjoy poking around the great work that you all do at GitHub.

[boardfish]

Hey @jacobdaddario, great question! I think I can answer some of this.

I'm fairly confident components do create their own view_contexts. This helps the library to be as fast as it is, but also gives some view helpers unexpected issues, like form_with. There's experimental support for the global view context, which would come from the view in which you're rendering components.

The reason why the method signature on initialize is a bit different is likely because instances of ViewComponent::Base respond to render_in. When you call render MyComponent.new, that's calling render_in on the instance of MyComponent and passing in the view context, if my understanding of it is correct.

To answer the second part of your question, I wouldn't recommend sharing information via view_context. If you're rendering nested components, I'd recommend using the various types of slots to your advantage. Lambda slots could be particularly helpful if information from one component needs to cascade down to another, or you can use the component instance in the block you pass to the render call to call methods on the component itself:

renders_one :button, -> { ButtonComponent.new.with_content(@title) }

<%= render MyComponent.new do |c| %>
  <% c.button %>
<% end %>

---

renders_one :button, -> { ButtonComponent.new }

<%= render MyComponent.new do |c| %>
  <% c.button do %>
    <%= c.title %>
  <% end %>
<% end %>