unsafe_raw with yield renders the yielded content outside

[davidalejandroaguilar]

Most likely this is not an issue, but rather how it's intended to work, so I'm opening a discussion instead of an issue to see if someone knows an alternative way to do this:

class MyComponent < Phlex::HTML
  def view_template
    unsafe_raw "<div>#{yield}</div>"
  end
end

render MyComponent.new do
  "Hello"
end

Expected:

<div>Hello</div>

Got:

Hello<div></div>

Closest discussion is Discussion #368: Block rendering outside of component template?, but that's for ViewComponent. This is only using Phlex.

[joeldrapper]

That’s because this

unsafe_raw "<div>#{yield}</div>"

Is the same as this

output = yield
unsafe_raw "<div>#{output}</div>"

But if the block is doing Phlex HTML stuff, it’s not going to return anything it’s just going to push stuff to the buffer. Instead of yielding, you could capture the block to a string.

unsafe_raw "<div>#{capture(&)}</div>"

capture will temporarily change the internal buffer to a new string, yield, put the old buffer back and return the string.

[davidalejandroaguilar]

Ahh, there we go, thanks a lot!

it’s not going to return anything it’s just going to push stuff to the buffer

capture will temporarily change the internal buffer to a new string, yield, put the old buffer back and return the string.

And also thank you for the additional information, very useful.