What about making text-heavy HTML easier to write with some clever syntax?

[krschacht]

Take a simple situation where you're mixing some prose and HTML tags:

div {
  text { "This is some prose with a " }
  b { "bold" }
  text { " word." }
}

It's quite a bit worse to write (and read) than the the comparable HTML:

<div>
  This is some prose with a <b>bold</b> word.
</div>

Yet this kind of DSL creation is where ruby really shines. What if we leaned more heavily on Ruby's special powers? What if strings were given special case handling within blocks to support syntax like this:

do {
  "This is some prose"
}

And then further, all tags could override their to_s method to support:

do {
  "This is some prose with a #{b 'bold'} word."
}

I would love if Phlex was this flexible and supported a more natural-to-write syntax like this.

[joeldrapper]

My original plan with phlex-markdown (https://github.com/phlex-ruby/phlex-markdown) was to make this kind of thing really easy. Something like

div do
  md "This is some prose with a **bold** word."
end

I need to get back to that project. I’d like to switch that project to commonmarker first.

[krschacht]

That would be a good solution for the cases where you fall within what can be done with markdown. But I could easily imagine needing to pass a class into that inner tag and now you're outside the scope of markdown.

It might be worth exploring a more idiomatic ruby solution so that it supports class (and other attributes) and even works with the custom phlex tags we're inevitably building up as we create components for our app. I'm just throwing out this syntax idea as a brainstorm. I haven't fully thought it through. But this might scale really nicely:

do{ "This is some prose with #{b(class: "bg-yellow-200") { "an emphasized word" }} in the middle." }

custom_header{ "This is some prose with #{alert(class: "bg-yellow-200") { "an emphasized word" }} in the middle." }

[joeldrapper]

The problem is if you were to call b from inside the string, it would immediately write a <b> tag to the output buffer.

This

h1 { "Hello #{b('world')}" }

Would actually produce something like:

<b>world</b><h1>hello </h1>

And there isn’t really any way to execute the b method in a context where it wouldn't use the b method from Phlex::HTML.

[krschacht]

If you overrode the to_s method of all tags to output HTML then the #{} would get parsed first, resulting in: h1 { "Hello <b>world</b>" } and then this string would need to be handled within the block of the outer tag. Alternatively, the tag's to_s could return a proc to give you greater control of the execution context since it's very possible I don't understand the Phlex internals well enough.

And maybe the string needs to be handled with a method_missing call? Possibly like this? (I should add that I'm playing this out just in the spirit of brainstorming, you have so much more context than me about Phlex internals so I realize this whole thing could be a bad idea! :) I don't want this to come across as me being pushy about this.)

module Phlexing
  def method_missing(name, *args, &block)
    if block_given?
      content = capture(&block)
    elsif args.empty?
      content = name.to_s
    else
      super
    end

    text(content) unless content.is_a?(Phlex::Node)
  end

  def text(content)
    content.is_a?(String) ? Phlex::TextNode.new(content) : (content.is_a?(Proc) ? content.call : content)
  end

  def b(content)
    proc { "<b>#{content}</b>" }
  end
end

class MyView < Phlex::View
  include Phlexing

  def template
    div {
      "This is a #{b("bold")} word"
    }
  end
end

(Edit: I just edited my example so that interpolated string returns a proc so it can be executed in the correct context)