Output out of order when yielding from a partial rendered by Phlex

[adamlogic]

That title is a bit of a mouthful, but here's a minimal example.

I have a Phlex component that's only job is to render a partial with the provided block. The partial renders some debugging output and yields to the block.

# home_component.rb

class HomeComponent < ApplicationComponent
  def template(&)
    render "home_partial", &
  end
end

<%# _home_partial.html.erb %>

<p><code>home_partial</code> before yield</p>
<%= yield %>
<p><code>home_partial</code> after yield</p>

Then I have an ERB view that renders the partial directly and also renders the component:

<div class="prose">
  <h2><code>home_partial</code> rendered in ERB view:</h2>

  <%= render "home_partial" do %>
    <p>content passed to home partial</p>
  <% end %>

  <hr>

  <h2><code>home_partial</code> rendered in Phlex component:</h2>

  <%= render HomeComponent.new do %>
    <p>content passed to home component</p>
  <% end %>
</div>

When I view this in a browser, rendering the partial directly works as I'd expect, but rendering the partial within the Phlex component has the output out of order:

I understand that these are two different render methods. Calling render from ERB will return a string, and ERB is responsible for appending that string into the output buffer. Calling render from a Phlex component immediately appends the result into the output buffer. That doesn't explain why the yield behaves differently, though. Or at least I'm not seeing it.

My goal is to gradually integrate Phlex into my app, and this means I'll have lots of Phlex components rendering existing ERB partials and vice versa. My understanding from the docs was that this is supported. Am I doing something wrong?

[joeldrapper]

Hey @adamlogic, thanks for the detailed bug report and reproduction steps. You’re not doing anything wrong as far as I can tell, looking at this. It does seem to be a bug.

[joeldrapper]

@adamlogic I’ve opened an issue for this here. phlex-ruby/phlex-rails#112

So far, I’ve been able to reproduce the issue and find exactly where it’s coming from.

When we call the template method on the component, we don’t actually pass it the raw block that the component was originally rendered with. Instead, we pass it a new block that calls yield_content with the original block. This yield_content method is how Phlex can treat { "Hello" } like { plain "Hello" }.

Here's how it works:

1. first, it gets the current size of the buffer;
2. then, it yields the original block, saving the return value for later;
3. finally, it checks if the size of the output buffer changed when yielding the block;
4. if yielding the block changed the size of the output buffer, the block must have contained an output method such as a tag, e.g. { input(type: "text") }; otherwise, if the output buffer’s size hasn’t been changed by yielding the block, there’s a good chance we’re actually interested in the return value of that block, so we pass the return value to __text__ (which is a private method similar to plain but it won’t raise if it’s passed something that doesn’t make sense as plain text).

Here’s the full yield_content method

def yield_content
  return unless block_given?

  target = @_context.target

  original_length = target.length
  content = yield(self)
  __text__(content) if original_length == target.length

  nil
end

there's also a yield_content_with_args method, which is almost exactly the same, but it yields params, so it's ever so slightly slower.

Anyway, back to the issue: the problem is when the template method picks up the block in the component, it’s got this yield_content behaviour built in. So when the partial eventually yields it, that yield_content method immediately pushes the content to the buffer, which is not what you expect to happen in a partial.

Hope that makes sense.

I’m not 100% sure how to fix it yet, but I’m sure I’ll find a way. There are many other places where Phlex wanting to push to the buffer comes into conflict with ERB wanting to work with returned string values.

[joeldrapper]

Okay, I’ve got a fix here using capture to render the block into a string while in Phlex context before passing it down to another Rails renderable. phlex-ruby/phlex-rails#113

You should be able test it by setting this in your Gemfile:

gem "phlex-rails", git: "https://github.com/phlex-ruby/phlex-rails.git"

Do you mind if I use your example code as a test case?

[joeldrapper]

That title is a bit of a mouthful

It was even more specific than that. I titled the PR: “Fix out of order rendering when yielding from a partial rendered with a block delegated from a component’s content block” 😅

[adamlogic]

What a response!! Thanks so much, not just for the fix, but for taking the time to explain what was happening. Truly above and beyond my expectations.

I've confirmed that the fix works for me, and of course you can use my example code as a test case. :-)

[mhenrixon]

I have the same issue in a different scenario:

<!-- Response -->
<!-- Before Messages::ShowView -->
<!-- Before ModalComponent -->
<dialog id="modal_message_987" class="modal" data-controller="dialog" data-action="click-&gt;dialog#clickOutside">
    <div class="modal-box w-full max-w-3x">
        <form method="dialog">
            <button class="btn btn-sm btn-circle absolute right-4 top-4" data-action="dialog#close">✕</button>
        </form>
        <h3 class="font-bold text-lg">Angustus compono amaritudo.</h3>
        <p class="py-4">Vesco tactus suasoria. Cohaero atqui antepono. Eius praesentium sto.

        Architecto comes vereor. Viduata artificiose depono. Sint tenus summisse.

        Tubineus armo vesica. Ancilla ab aut. Vorago nobis uredo.</p>
        <div class="modal-action">
            <form method="dialog">
                <!-- Before Modal::ActionComponent -->
                <a href="#" class="btn btn-primary mr-2" message-id="987" data-turbo-command="MessageCommand#deliver">Deliver</a>
                <!-- Before Modal::ActionComponent -->
                <a href="#" class="btn btn-error" message-id="987" data-turbo-command="MessageCommand#destroy">Destroy</a>
            </form>
        </div>
    </div>
</dialog>
<turbo-stream action="invoke" target="DOM">
    <template>{"id":"122a5b2b-c0ea-43ec-8c39-84fe690841be","selector":"#turbo-boost","method":"morph","args":["\u003cmeta id=\"turbo-boost\" name=\"turbo-boost\" content=\"IllDQklUaGYwSWlrcnVMQlEi--6a413c759d3ea9609f6d5514ca086b1be99c32abd611a3531a83110ba87a7975\" data-busy=\"false\" data-state=\"e30\" /\u003e"],"delay":0}</template>
</turbo-stream>

For the following code:

# frozen_string_literal: true

class Messages::ShowView < ApplicationView
  include Turbo::FramesHelper

  def initialize(message:)
    @message = message

    super()
  end

  def template
    turbo_frame_tag(:modal) do
      _(
        :modal,
        id: dom_id(@message, :modal),
        title: @message.subject,
        body: @message.body,
        box_class: "w-full max-w-3x"
      ) do |c|
        c.with_action(
          title: "Deliver",
          href: "#",
          class: "btn btn-primary mr-2",
          message_id: @message.id,
          data: {
            turbo_command: "MessageCommand#deliver"
          }
        )

        c.with_action(
          title: "Destroy",
          href: "#",
          class: "btn btn-error",
          message_id: @message.id,
          data: {
            turbo_command: "MessageCommand#destroy"
          }
        )
      end
    end
  end
end

The _ method is just a shorter way for me to render a component:

module ComponentHelper
  def component(component_name, ...)
    component_class = "#{component_name.to_s.camelize}Component".constantize
    render component_class.new(...)
  end
  alias _ component
end

The modal component looks like:

# frozen_string_literal: true

class ModalComponent < ApplicationComponent
  include Phlex::DeferredRender

  attr_accessor :id, :title, :body, :options

  def initialize(id:, title:, body:, **options)
    @id      = id
    @title   = title
    @body    = body
    @options = options
    @actions = []

    super()
  end

  def template
    dialog(id: id, class: "modal", data: { controller: "dialog", action: "click->dialog#clickOutside" }) do
      div(class: class_names("modal-box", options[:box_class])) do
        form(method: "dialog") do
          button(class: "btn btn-sm btn-circle absolute right-4 top-4", data: { action: "dialog#close" }) do
            "✕"
          end
        end

        h3(class: "font-bold text-lg") { @title }
        p(class: "py-4") { @body }

        div(class: "modal-action") do
          form(method: "dialog") do
            @actions.each do |action|
              render(action)
            end
          end
        end
      end
    end
  end

  def with_action(...)
    @actions << Modal::ActionComponent.new(...)
  end
end

Not entirely sure what is going wrong but this is the only thing blocking me from going hundred percent phlex.

[mhenrixon]

That's what I just wrote you. I am using an ERB layout, so Phlex and ERB currently do not mix, which makes it hard to roll this out gradually, @joeldrapper!

[mhenrixon]

cosmos(dev)> Module.constants.select { |c| (eval c.to_s).is_a?(Class) && (eval c.to_s).include?(ActionView::Helpers::CaptureHe
lper)}
=>
[:ApplicationView,
 :ApplicationLayout,
 :ConsultingLayout,
 :ApplicationComponent,
 :AvatarComponent,
 :FlashComponent,
 :FooterComponent,
 :MenuComponent,
 :ModalComponent,
 :NotificationComponent,
 :NotificationTwoComponent,
 :SubmenuComponent,
 :TagComponent,
 :TimelineComponent,
 :NotificationTwoComponentPreview,
 :NotificationComponentPreview]

Hmm how is this even possible?

[mhenrixon]

Aha! I found it! https://github.com/abeidahmed/rails-heroicon/blob/main/lib/rails_heroicon/helper.rb I will write a specific one for my scenario with phlex.

[joeldrapper]

I am using an ERB layout, so Phlex and ERB currently do not mix

Using an ERB layout should be fine. It shouldn't mean Phlex::HTML#capture gets overridden on Phlex::HTML objects.

Aha! I found it!

I don't see the capture definition in there. 🤔 Is it included in ActionView::Helpers::TagHelper?

I don't know if it's still maintained but you may find this project useful https://github.com/nejdetkadir/phlex-heroicons

[mhenrixon]

Awesome! I fixed it for now; I added a generic heroicon component. I'm still trying to figure out how I feel about that gem. It needs to be more terse for something like a heroicon.

I added a method called _heroicon to go with my existing _ method for finding components.

Still, I appreciate the suggestion, and I'll look into the code in more detail tomorrow. I also encountered a problem where I originally had the method as heroicon, which was not working in ERB.

The joys of migrations. I thank thee for thyne assistance, I understand phlex much better now.