Phlex Kits in Erb

Did you know that Phlex Kits work with ERB templates? Assuming you have the latest Phlex Rails gem installed, add this to your controller file to expose components to your ERB view context.

class ApplicationController < ActionController::Base
  helper Components

  # ...
end

This registers the components from the Components namespace as methods in your view helpers so you can call them directly from your templates without all the “rendering ceremony”, like this:

<%= FloatingLayout do |layout| %>
  <% layout.menu do %>
    <nav class="breadcrumbs text-sm">
      <ul>
        <li><%= layout.logo %></li>
      </ul>
    </nav>
  <% end %>
  <% # ... %>
<% end %>

The old way

Prior to Phlex Kits, components would be called via the render method in the Components namespace.

For example, this layout component I’m working on for this website:

class Components::FloatingLayout < Components::Base
  include Phlex::Rails::Helpers::AssetPath

  def view_template
    yield
  end

  def menu_container(*, class: nil, **)
    div(*, class: ["py-32 px-8", grab(class:)], **) do
      yield
    end
  end

  def menu
    header(class: "fixed top-4 left-4 rounded-full z-50 bg-base-200/50 dark:bg-base-100/50 backdrop-blur-2xl shadow py-4 px-8") do
      yield
    end
  end

  def logo
    a(href: "/", class: "flex flex-row items-center gap-2") do
      img(src: asset_path("logo.png"), class: "size-4")
      div(class: "font-bold") { "Beautiful Ruby" }
    end
  end
end

Would have been rendered like this from ERB without kits:

<%= render Components::FloatingLayout.new do |layout| %>
  <% layout.menu do %>
    <nav class="breadcrumbs text-sm">
      <ul>
        <li><%= layout.logo %></li>
      </ul>
    </nav>
  <% end %>
  <% # ... %>
<% end %>

It might not seem like a big deal, but less typing & code without losing meaning is one of many examples of the attention to detail and care that Joel Drapper puts into his work on Phlex.