Interface of custom components

[johnnynia]

This code snippet in the docs got me hooked on phlex immediately:

header class: "col-span-1" do
  nav do
    ul do
      li { a(href: "/") { "Introduction" } }
      li { a(href: "/templates") { "Templates" } }
      li { a(href: "/views") { "Views" } }
      li { a(href: "/rails-integration") { "Rails integration" } }
      li { a(href: "https://github.com/joeldrapper/phlex") { "Source code" } }
    end
  end
end

But looking deeper into phlex I've realized that only standard HTML elements get this really nice interface of just a method call — while custom components won't.

Let's say we want to render a basic modal and the final HTML code should look like this:

<div class="modal">

  <div class="p-4">
    <p>
      Do you really want to continue?
    </p>
  </div>

  <div class="p-4 bg-gray">
    <button type="button" class="bg-red">
      Oh no!
    </button>
    <button type="button" class="bg-green">
      Absolutely!
    </button>
  </div>

</div>

At the current state of phlex a possible implementation could look like this:

render Modal::Wrapper::new do
  render Modal::Body::new do
    p "Do you really want to continue?"
  end

  render Modal::Actions::new do
    render Buttons::CancelButton.new "Oh no!"
    render Buttons::ApproveButton.new "Absolutely!"
  end
end

What I've had imagined by first looking at phlex was the possibility to write this like so:

modal do
  modal_body do
    p "Do you really want to continue?"
  end

  modal_actions do
    cancel_button "Oh no!"
    approve_button "Absolutely!"
  end
end

Would an interface like this be feasible?

Maybe as a user I wouldn't have to write a class per component but some scoped mixins for one huge render class including them all? I really just don't know what may be possible and how! Just my naive suggestions as a too early adopter. 🙃❤️

[joeldrapper]

Hey @johnnynia, thanks for the feedback! I agree it would be really nice to make the component-rendering syntax more concise. We talked about using the constant names as methods before (#55) and ran into the issue that methods can't include :: for components that are name-sapced.

I did another experiment (#88) which stored the buffer in a Thread.current variable in order to support :: as a call to a class method on the parent constant, e.g. Nav::Item() is the Item class method on the Nav class. I didn't want to proceed with this because of the required parens — even when passing a block — and because putting the buffer in a Thread-local variable is weird.

Anyway, your post inspired me to have another go at this and I came up with s slightly different approach prototyped here. #252

With this, you can access name-spaced views by using an underscore _ in place of ::. I also added wrapper tracking, so lookups are relative to the wrapping component, e.g. within Nav {} you can access Nav_Item as Item.

You should be able to install this branch to try it out:

gem "phlex", github: "joeldrapper/phlex", branch: "experimental-view-methods"

Let me know what you think.