Use ViewComponent for elements views?

[mbajur]

Hey! During working on my Alchemy-based website, i reached a point in which my element views are so complicated that it would be great to use ViewComponent instead of rails partials for rendering them. I believe there is no native way of telling Alchemy to render specific component for specific element type but i tried calling my the component explicitly in the element view partial. Sadly, the element_view_for helper misbehaves in such context and instead of rendering

<my-component>
  content
</my-component>

it renders

<my-component></my-component>
content

or even sometimes

content
<my-component></my-component>

So it closes the corresponding tag immidiatelly with empty content and renders the actual content above/below it. Do you have any experience in calling view components in element views? Am i missing anything obvious in here? Thanks!

Btw my component template looks more or less like that:

<%= helpers.element_view_for(@element, tag: "div", class: "my-class") do |el| -%>
  <% @element.nested_elements.each do |element| %>
    <div class="sub-class">
      <%= render element %>
    </div>
  <% end %>
<%- end -%>

[tvdeyen]

Can you please show how you render the ViewComponent?

[mbajur]

I render it like that:

<%- cache(content_gallery) do -%>
  <%= render(Alchemy::Elements::ContentGalleryComponent.new(element: content_gallery)) %>
<%- end -%>

[tvdeyen]

I see. Somehow the element_view_for helper is not able to handle how view component renders its content. Can you try to put the element_view_for helper into the elements view partial and just render the component inside of it?

<%- cache(content_gallery) do -%>
  <%= element_view_for(content_gallery, tag: "div", class: "my-class") do %>
    <%= render(Alchemy::Elements::ContentGalleryComponent.new(element: content_gallery)) %>
  <%- end -%>
<%- end -%>

[mbajur]

My problem is - I want to use viewcomponent because of the logic behind generating classes list of this element. It's so complex it outgrows a regular view partial and ViewComponent would be a perfect fit (it's tailwind-based so you know how it goes, tons of classes combinations ;))