Solution for conditional partial layout?

[jrochkind]

In my existing code using standard rails partials, I have a partial rendered sometimes with a partial layout, other times without, based on a condition.

In standard Rails this is fairly elegantly expressed:

<%= render partial: "partial_layout", 
    locals: {
      arg1: value1,
      arg2: value2
    },
    layout: ("some_layout" if should_wrap_in_layout?)
%>

We could also imagine layout: figure_out_layout, where figure_out_layout can return any of several possible layouts, and/or nil meaning "don't use a layout". But what I'm doing is simply as above.

What's the best way to convert this to ViewComponent? The simplest thing I can figure out is this, which isn't very satisfying and involves more duplication and less elegance:

if should_wrap_in_layout?
  render PartialLayoutComponent.new(arg1: value1, arg2: value2) do
    render MyComponent.new(arg1: value1, arg2: value2)
  end
else
  render MyComponent.new(arg1: value1, arg2: value2)  
end

That seems a sad replacement of the elegant readable one-liner.

I can think of a variety of other weird ways to do this, but none great. If we imagined the more complicated case of a method returing one of several possible layouts and/or nil... it gets even trickier.

Does anyone have a better idea? Anything I'm missing?

[boardfish]

yield_self will save you the duplication, at least:

render MyComponent.new(arg1: value1, arg2: value2).yield_self do |c|
  should_wrap_in_layout ? PartialLayoutComponent.new(arg1: value1, arg2: value2) { render c } : c
end

One thing I'll say about the original solution is that yes, it's potentially more readable, but layouts are components in and of themselves, so it's more a convenience of how Action View plays with them than reflective of how things actually work.

Another way you could attack this is to have layout be a parameter to MyComponent. I wonder if this would work:

<%# Component template %>
<%= layout do %>
  <div>Content</div>
<% end %>

And then you'd pass in layout with:

render MyComponent.new(arg1: value1, arg2: value2, layout: PartialLayoutComponent.new(arg1: value1, arg2: value2))

[jrochkind]

Thanks rmacklin, I think you are right! That was a confusing error message, but that must have been it.

However, correcting that... it still doesn't work. No error, but the wrapping layout component just doesn't happen. To simplify and debug, I removed the conditional, just:

<%= render (ExampleComponent.new().yield_self do |c|
  LayoutComponent.new() { render c }
end) %>

It renders the exact same thing as just render (ExampleComponent.new, the extra stuff in the yield_self has no effect, the layout doesn't happen. Same with the version where we try to put it in a renderable local var first.

I don't think I'm interested in more debugging-exersize-as-game-of-telephone on this one anymore at least at the moment! And I think I might give up on that particular pattern for this one, it seems like something mysterious is going on under the hood, maybe weird stuff with the "buffer"?

But if anyone else wants to actually try this themselves and see if they can get it working, please do report back if you found a working example!

[rmacklin]

It'd help if there was a public repo or gist that reproduces the problem, or even a test case in this repo - are you up for setting one up since you have a local example? Then we can work with real code rather than small snippets.

I've been away from view_component for a while, and I haven't tried using components as layouts, and I'm juggling a lot of stuff right now...so I can't commit to setting up a repro myself, but I'd be willing to look at one that was made available.

[boardfish]

I think it's not so much a debugging exercise as us trying to find the ideal pattern for this, then seeing if it works and questioning it if it doesn't. It seems clear that yield_self might not be playing nicely here. Agree with @rmacklin that an example repo would be helpful - particularly, one that's got tests.

[jrochkind]

You are correct, thanks for the discussion and ideas!

For me, I think a simple "helper/wrapper method" solution (without yield_self) as below is what I'm going to go with.

I am curious why the yield_self solution isn't working, but I'm not personally interested in investing more time in debugging it at this point -- I wonder if it's something low-level and hard (for me) to debug involving output buffer stuff.

If anyone else does want to spend time with it, @rmacklin I've put the simple app I was using for reproduction in github! Sorry it doesn't have tests, I was just testing manually.

I realized I reported the error wrong -- it's only rendering the layout, with the content for the layout being empty, even though we are seeming to pass it.

https://github.com/jrochkind/view_component_playground/blob/master/app/views/widget/show.html.erb

[jrochkind]

Oh okay, wait, as far as debugging that, ok, it's because to pass a content block to a ViewComponent, the block actually does need to be passed to the render call, not to the ViewComponent new call --

render OuterComponent.new do
   render WrappedComponent.new
end

That block is being passsed to render, and not OuterComponent.new, and needs to be, to work.

I think that may make the the yield_self approach a non-starter.

[jrochkind]

Maybe part of the fantasy is if Rails could handle ViewCompoents as layouts. This won't work now, but why not:

render MyComponent.new, layout: MyWrappingContentComponent.new

It would of course require changes to Rails along the lines of what was needed to support ViewComponent in the first place with render_in, but... different. I'm not sure what the API would be.

I'm not sure how realistic that is... but it may be necessary/important for the "make it possible to totally replace normal actionview with viewcomponent" dream... especially becuase you might want to use ViewComponent for top-level controller-level layouts too, which I don't think is possible now?

[jrochkind]

In more answering my own question, here's another variation of a helper method:

  def maybe_wrap_with_component(wrapping_component:, should_wrap:)
    if should_wrap
      render wrapping_component do
        yield
      end
    else
      yield
    end
  end

<%= maybe_wrap_with_component(wrapping_component: LayoutComponent.new, should_wrap: true) do %>
   <%= render MyComponent.new %>
<% end %>

[BlakeWilliams]

I've seen capture used for cases like this.

e.g.

<% content = capture do %>
  my body content here
<% end %>

<% if wrap_with_layout? %>
  <%= render MyLayoutComponent.new do %>
    <%= content %>
  <% end %>
<% else %>
  <%= content %>
<% end %>