Block rendering outside of component template?

[cmer]

I am trying to render a simple badge with some content inside. This is from an ERB file:

<%= render Elements::BadgeComponent.new(size: :large, color: :emerald) do %>
  Today <%= content_tag(:span, "🥳", class: "ml-2 text-base") %>
<% end %>

and the template method of my badge looks like this:

def template(&content)
  div(class: div_class) do
    yield_content(&content) if content.present?
    @text.presence
  end
end

However, the text from the block I pass is rendered OUTSIDE the DIV. Like such:

Here's the resulting HTML:

Today <span class="ml-2 text-base">🥳</span>
<div class="text-sm inline-flex font-medium rounded-full text-center px-2.5 py-1 bg-emerald-100 text-emerald-600">
</div>

Is this a bug? Am I doing something wrong?

[joeldrapper]

Hey @cmer can you share your whole Elements::BadgeComponent class and what you expect it to output? Reading this, it's not clear what the @text instance variable is. Also, which version are you using?

[cmer]

# frozen_string_literal: true

class Elements::BadgeComponent < Phlex::HTML
  STYLES = %i[default icon].freeze
  VARIANTS = %i[default text_white].freeze
  SIZES = %i[mini small large].freeze

  # Variant / Color
  CSS_COLORS = {
    default: {
      gray: "bg-slate-100 text-slate-500",
      indigo: "bg-indigo-100 text-indigo-600",
      sky: "bg-sky-100 text-sky-600",
      emerald: "bg-emerald-100 text-emerald-600",
      amber: "bg-amber-100 text-amber-600",
      yellow: "bg-yellow-50 text-yellow-600",
      rose: "bg-rose-100 text-rose-600",
      purple: "bg-purple-100 text-purple-600",
      blue: "bg-blue-100 text-blue-600",
      slate_light: "bg-slate-100 text-slate-500",
      slate_dark: "bg-slate-700 text-slate-100"
    },
    text_white: {
      gray: "bg-slate-500 text-white",
      indigo: "bg-indigo-500 text-white",
      sky: "bg-sky-500 text-white",
      emerald: "bg-emerald-500 text-white",
      amber: "bg-amber-500 text-white",
      yellow: "bg-yellow-500 text-white",
      rose: "bg-rose-500 text-white",
      purple: "bg-purple-500 text-white",
      blue: "bg-blue-500 text-white",
      slate: "bg-slate-500 text-white"
    }
  }

  # Style / Size
  CSS_STYLE_SIZES = {
    default: {
      mini: "text-[0.55rem] inline-flex font-semibold text-center tracking-widest uppercase px-2 py-0.5 mx-1 relative -top-[0.0625rem]",
      small: "text-xs inline-flex font-medium rounded-full text-center px-2.5 py-1",
      large: "text-sm inline-flex font-medium rounded-full text-center px-2.5 py-1"
    },
    icon: {
      mini: proc { raise "Icon style does not support mini size" },
      small: "text-xs inline-flex font-medium rounded-full text-center px-2 py-0.5 items-center",
      large: "text-sm inline-flex font-medium rounded-full text-center px-2 py-0.5 items-center"
    }
  }

  def initialize(color: :gray, style: :default, size: :small, variant: :default, text: nil)
    raise ArgumentError, "Invalid style: #{style}. Use one of: #{STYLES.join(", ")}." unless STYLES.include?(style)
    raise ArgumentError, "Invalid size: #{size}. Use one of: #{SIZES.join(", ")}." unless SIZES.include?(size)
    raise ArgumentError, "Invalid variant: #{variant}. Use one of: #{VARIANTS.join(", ")}." unless VARIANTS.include?(variant)
    raise ArgumentError, "Invalid color: #{color}. Use one of: #{CSS_COLORS[variant]&.keys.join(", ")}." unless CSS_COLORS[variant]&.key?(color)

    @text = text
    @size = size
    @style = style
    @color = color
    @variant = variant
  end

  def template(&content)
    div(class: div_class) do
      yield_content(&content) if content.present?
      @text.presence
    end
  end

  private

  def div_class
    [CSS_STYLE_SIZES[@style][@size], CSS_COLORS[@variant][@color]].map do |value|
      value.is_a?(Proc) ? value.call : value
    end.join(" ")
  end
end

[joeldrapper]

I get this output in 0.5.3. Which version are you using and which version of Rails are you using?

<div class="text-sm inline-flex font-medium rounded-full text-center px-2.5 py-1 bg-emerald-100 text-emerald-600">

      Today 
    <span class="ml-2 text-base">🥳</span>
</div>

[joeldrapper]

Unrelated, it might be clearer to change your template to this. I believe block_given? is faster than content.present?, also this makes it clear that the text won't be rendered if a block is given instead.

div(class: div_class) do
  if block_given?
    yield_content(&content)
  else
    @text
  end
end

[cmer]

I assume you meant 0.5.3 (the latest version)? I still get the odd output. Rails (7.0.4).

[dhnaranjo]

@cmer my guy, you look like you could benefit from https://github.com/avo-hq/class_variants. It won't help with this problem, but it could help with these plentiful variations of components.

[cmer]

Oh I know! I wrote my code a couple of weeks before Class Variant came out and I immediately knew I'd have to rewrite it eventually.

[joeldrapper]

Oh this looks really cool @adrianthedev! 🙌

[adrianthedev]

Yeah. Let me know if you need any help with https://github.com/avo-hq/class_variants @cmer. That's the initial version I cooked up at midnight. I think we can improve on it.

[cmer]

I was able to reproduce the issue and I have put together an example Rails app.

It happens when I try to generate a Phlex component from a View Component.

phlex-test.zip

[joeldrapper]

Thanks for the reproduction. I’ll try to figure out what’s going on here.

[Bumppoman]

So, you have two separate problems here. And thankfully we have @joeldrapper's attention so I can find out if this is the right way to go about dealing with them or not.

1. Both content.present? AND block_given? will always return true in the template method. I'm not sure whether this is because Ruby implicitly allows blocks everywhere (this would explain the content.present? being incorrect, if there were an empty block), or because of Phlex, or possibly both. But, there's always going to be a block inside of template (at least, I haven't come across one without in a month of using Phlex).

In order to allow for both arguments and blocks, you'll need to test the argument rather than the block.

if @text.present?
  text @text
else
  yield
end

2). I have solved your positional error by means of the same magic I've employed thus far using Phlex. There have been HUNDREDS of occasions where I've had trouble with nesting like that, and threw unsafe_raw, capture, and render around until it worked. With more time using Phlex, I've gotten a better sense of how things are evaluated and I'm writing my code with that in mind. But I'd love to know if there's a better way of doing it or some sort of easy to remember flow chart 😅

Anyhow (and this is with Phlex 1.0.0-rc1, which still had the faulty behavior, so if you're testing make sure to update your Phlex):

Change:

yield_content(&content)

to:

unsafe_raw { capture(&content) }

and everything will display how you would expect.

[joeldrapper]

I finally have a fix! yippee-fun/phlex-rails#25

If you upgrade to phlex-rails version 0.4.2, it should work correctly with ViewComponent.

[cmer]

Wow. That’s one crazy/interesting fix! Thanks!

[joeldrapper]

Yeah, it's a weird one!