Temple - HTML DSL for Elixir and Phoenix

News Announcing
,
8

I’m guessing that it works by having each expression in the body list be placed into the final template, and something like for that returns a list just inlines each element of the list as a standalone expression?

The macros expand to functions that when called, will emit markup into some state. If they are called inside a loop, they will be called multiple times.

Why use defcomponent over just a function call, or is it to work better with phoenix’s liveview stuff so you can inline it all more?

defcomponent is used to create a macro like div or span, except it is given the name you pass, and the props you pass it are replaced in it’s body.

If you create a function that calls the temple macro, it will return {:safe, "your markup"}, but it will not be emitted into the end result unless you call it with the partial macro.

  def nav_item(item) do
    temple do
      div id: item.key, class: "flex flex-col" do
        div item.name, class: "margin-bottom-2"
        div item.description
      end
    end
  end

temple do
  div do
    partial nav_item(item)
  end
end

will emit

<div>
    <div id='some-id' class='flex flex-col'>
        <div class='margin-bottom-2'>Some Name</div>
        <div>Some Description</div>
    </div>
</div>

Is there any way to make it fail to compile if children are passed in when they aren’t used, or fail to compile if no children are passed in when they are required?

It doesn’t do that right now, but I’m sure it’s possible!

2 Likes