Better integration with Phlex

[stephann]

I'm facing a issue with Lookbook + Phlex:

Phlex allows you to write something like this:

render Views::Phlex::ListExample.new do |list|
  list.item { "Hello" }  
  render(Views::Phlex::Item.new) { "Help!"}
  list.item { "World" }
end

But when I write this example on a Lookbook::Preview class, it doesn't work. To reproduce the error, paste the code above into builder scenario on this file: https://github.com/ViewComponent/lookbook/blob/main/spec/dummy/test/components/previews/phlex_example_preview.rb#L10.

The render(Views::Phlex::Item.new) { "Help!" } returns a hash because it is using render from Lookbook::Preview and the component isn't rendered. To solve that I could write something like this:

render Views::Phlex::ListExample.new do |list|
  list.item { "Hello" }  
  list.render(Views::Phlex::Item.new) { "Help!"}
  list.item { "World" }
end

Then I will have two problems:

• On source tab, will display component usage list.render ..., but it isn't required, so other devs could understand that unnecessary code is required to build the component
• I cannot use my component helpers. I added helpers to Lookbook::Preview, eg.:

module DesignSystemHelpers
  def my_button(*args, **kwargs, &block)
    render DesignSystem::ButtonComponent.new(*args, **kwargs, &block)
  end
  
  def my_card(...)
    ...
  end
  
  ...
end

# on initializers
config.to_prepare do
  Lookbook::Preview.include DesignSystemHelpers
end

So something like this doesn't work on Lookbook:

def default
  my_card do |card| # this will be rendered
    card.actions do # this will be rendered
      my_button(...) # this will NOT be rendered because Lookbook::Preview `#render`
      my_button(...) # this will NOT be rendered because Lookbook::Preview `#render`
    end
  end
end

This is important because I think Lookbook is a source of how developers should use our components.

And the other problem is that I cannot do that on preview files:

render Views::Phlex::ListExample.new do |list|
  h1 { "My list" }
  list.item { "Hello" }  
  list.item { "World" }
end

It will raise undefined method 'h1' for an instance of MyComponentPreview.

Originally posted by @stephannv in #400 (comment)

• Lookbook: 2.2.0
• Phlex-Rails: 1.1.1
• Rails: 7.1.3
• Ruby: 3.3.0

[Mark Perkins]

Hey @stephannv many thanks for raising this issue and for the accompanying PR. Will continue the conversation on over there.