Would you find ComposableHtml library useful?

There’s this new library that has just been announced which seems to be doing what you want (and more than that): x_component. If there’s something that I miss from Vue/React, it’s this kind of component composability. Looks very powerful (also check the benchmarks).

Then there’s also Surface which is aimed directly at Liveview (discussion).

Thank you! Those are very useful links!

Both libraries emphasize composability which makes me think I am on a good track

However, the scope of what I am thinking about is much much smaller. I don’t want to define new templating language.
Let me give a before and after example.

Let’s say I want to define a table helper for bootstrap:

In my view_helpers.ex I need this:

def bootstrap_table(content) do
  content_tag(:table, content, class: "table")
end

In the template, I can use <%= bootstrap_table(@content) %>

But then in some other place, I need “table-striped” so I modify the herlper

def bootstrap_table(content, opts \\ []) do
  additional_classes = Keyword.get(opts, :additional_classes, "")
  content_tag(:table, content, class: "table #{additional_classes}")
end

But then in yet another place I need to set border, so I modify the helper:

def bootstrap_table(content, opts \\ []) do
  additional_classes = Keyword.get(opts, :additional_classes, "")
  border = Keyword.get(opts, :border, "0")
  content_tag(:table, content, class: "table #{additional_classes}", border: border)
end

And before I realize, I add cellpadding, cellspacing and finally all attributes supported by table tag.

Let’s say that instead, I use ComposableHtml.Tag

def bootstrap_table(content) do
  %Tag{tag_name: :table, content: content, attrs: [class: "table"]}
end

The usage in the template would look the same <%= bootstrap_table(content) %> provided that %Tag{} struct implements Phoenix.HTML.Safe.

But now, if I need to add a class, I can do it differently:

def striped(table_tag) do
  ComposableHtml.add_class(table_tag, "table-striped")
end

def bordered(table_tag) do
  ComposableHtml.add_attribute(:border, "1")
end

Now in the template, I can do <%= bootstrap_table(content) |> striped() |> bordered() %>

Another nice example is what @wojtekmach wants here: Proposal: conditionally setting css classes · Issue #276 · phoenixframework/phoenix_html · GitHub

Let’s say you want to conditionally add active class based on current path:

<%= link_to("Home", "/", class: (["button"] ++ (if path == "/", do: ["active"], else: [])) %> 

If link_to returned ComposableHtml.Tag, you could write:

<%= link_to("Home", "/", class: "button") |> maybe_add_active_class(path, "/") %>

and define a helper:

def maybe_add_active_class(tag, path, active_path) do
  if path == active_path do
    ComposableHtml.add_class(tag, "active")
  else
    tag
  end
end

I’d like the library to make HTML composable in a similar way that Ecto.Query makes SQL composable

It seems like a natural extension of Phoenix.HTML’s template functions. It would make more sense for the composability to be an in-built feature of the framework instead of a separate library.

I think I would start with a separate library to test how it feels and what would be a nice API. If it catches on and Crhis likes the idea, it could become part of Phoenix.HTML

I started working on ex_component unaware of this thread. My idea was to be able to create standardised, reusable components and keep them consistent in different related projects. Here is an example that uses the library to generate all possible Bootstrap grid HTML.

defmodule ExBs.Layout do
  import ExComponent
  @break_points ExBs.Config.get_config(:break_points)
  @grid_size ExBs.Config.get_config(:grid_size)

  @container_variants for break_point <- @break_points ++ [:fluid],
                          into: [],
                          do: {break_point, class: break_point, prefix: true, merge: false}

  @col_grid Enum.map(@grid_size, &String.to_atom("#{&1}"))

  @col_variants for variant <- @break_points ++ @col_grid ++ [:auto],
                    into: [],
                    do: {variant, class: variant, prefix: true, merge: false, option: true}

  @col_options [order: [class: "order"]]

  defcontenttag(:container, tag: :div, class: "container", variants: @container_variants)
  defcontenttag(:row, tag: :div, class: "row")
  defcontenttag(:col, tag: :div, class: "col", variants: @col_variants, options: @col_options)
end

The lets you do:

Layout.container("Container!") #=> ~s(<div class="container">Container!</div>)
Layout.container(:fluid, "Container!") #=> ~s(<div class="container-fluid">Container!</div>)

Layout.row("Row!") #=> ~s(<div class="row">Row!</div>)

Layout.col("Col!") #=> ~s(<div class="col">Col!</div>)
Layout.col(:sm, "Col!") #=> ~s(<div class="col-sm">Col!</div>)
Layout.col("Col!", md: 6) #=> ~s(<div class="col col-md-6">Col!</div>)
Layout.col(:auto, "Col!", md: 6) #=> ~s(<div class="col-auto col-md-6">Col!</div>)
Layout.col(12, "Col!", md: 6) #=> ~s(<div class="col-12 col-md-6">Col!</div>)

Layout.col(6, "Col!", order: 2) #=> ~s(<div class="col-6 order-2">Col!</div>)

You can checkout out ExBs which was written on top of it as a proof of concept. The idea is to produce a lib specific to our company projects and not let the HTML layer turn into the wild west.

Curios to know your thoughts!

Just an edit, here’s what I came up with for the tables:

defmodule ExBs.Content.Tables do
  import ExComponent

  @theme_colors ExBs.Config.get_config(:theme_colors)

  @table_types ~w[dark striped bordered borderless hover sm]a

  @table_variants for variant <- @theme_colors ++ @table_types,
                      into: [],
                      do: {variant, class: variant, prefix: true, option: true}

  defcontenttag(:table, tag: :table, class: "table", variants: @table_variants)
end

Which gets you:

Tables.table("...") #=> ~s(<table class="table">...</table>)
Tables.table(:striped, "...") #=> ~s(<table class="table table-striped">...</table>)
Tables.table("...", striped: true) #=> ~s(<table class="table table-striped">...</table>)

For my use cases I have this simple helper:

def attr_list(attrs, joiner \\ " ") when is_list(attrs) do
  Enum.reduce(attrs, [], fn
    attr, acc when is_binary(attr) -> acc ++ [attr]
    {attr, true}, acc when is_binary(attr) -> acc ++ [attr]
    {attr, predicate}, acc when is_binary(attr) and  is_function(predicate) ->
      if predicate.(), do: acc ++ [attr], else: acc
    fun, acc when is_function(fun) -> acc ++ [fun.()]
    _, acc -> acc
  end)
  |> Enum.join(joiner)
end

iex> attr_list(["foo", nil, {"active", user.active}])
"foo active"

I also use it for stimulus controllers:

<article class="post", data-controller="<%= attr_list(["post", {"content-warning", post.nsfw?}]) %>">

I reuse common elements with helpers, too:

def sidebar(opts, do: content) do
  sidebar(content, opts)
end
def sidebar(contents, opts) do
  Keyword.merge(opts, id: "sidebar")
  content_tag(:nav, contents, opts)
end

<%= sidebar do %>
  <ul>...</ul>
<% end %>

For this last case the ComposableHtml thing may be less verbose and allow for more complex composition, but so far this has served me well