ViewComponent Previews does not support concat

[equivalent]

    render(CardComponent.new) do |component|
      component.with_title { 
         "Foo"
      }
    end

Works as expected

• in Rails view render 👍
• in ViewComponent preview 👍

    render(CardComponent.new) do |component|
      component.with_title { 
          concat div.small("New")
         concat "Foo"
      }
    end

Works as expected

• in Rails view render 👍

Throws error undefined method concat' for an instance of CardComponentPreview`

• in ViewComponent preview 👎

[joelhawksley]

@equivalent thanks for the report. Would you be up for opening a PR with a failing test for this case?

[equivalent]

@joelhawksley it's on my todolist 🙂 but right now my todolist is longer than Santa's naughty list, so if anyone gets the opportunity feel free to beat me to it 🏆

[reeganviljoen]

@equivalent i would normally offer but I feel exactly like you right now, but if I have some time I will gladly open a pr with an open invitation to you

[reeganviljoen]

@equivalent finally added a failing spec at #2070 now I just need to attempt to fix it 😆

[equivalent]

one more observation

Given this code:

render(Gen::ActionPanelComponent.new) do |component|
  component.with_body do
    render(Gen::AvatarComponent.new)
  end
end

this works when rendered from Rails app view:

but does not work from ViewComponent preview:

Given:

# app/components/gen/action_panel_component.rb
class Gen::ActionPanelComponent < ApplicationComponent
  renders_one :body
end

<!-- app/components/gen/action_panel_component.html.erb -->
<div class="tw-border tw-border-solid tw-p-4">
  <div class="tw-mb-16">Budget limits</div>

  <%= body %>
</div>

# app/components/gen/avatar_component.rb
class Gen::AvatarComponent < ApplicationComponent
end

<!-- app/components/gen/avatar_component.html.erb  -->
<%= image_tag "https://www.gravatar.com/avatar/c2713a4959692f16d27d2553fb06cc4b.png?r=x&s=75", class: "tw-rounded-full tw-object-cover" %>

---

same applies for partials in component

render(Gen::ActionPanelComponent.new) do |component|
  component.with_body do
    render "some_legacy_partial"
  end
end

[Intrepidd]

Seeing the same issue when using helpers that use concat within my components

[reeganviljoen]

for now as a temporary fix to this while a fix is still in the works I would use template's in the affected previews

[Intrepidd]

Actually in my case I managed to fix my issue by setting config.view_component.capture_compatibility_patch_enabled = true, took me a while to find it so I'm adding it here in case someone else ends up in the same situation