Temple - HTML DSL for Elixir and Phoenix

Your Libraries & OS Mentoring Libraries
1

I just released the first version of Temple: an HTML DSL for Elixir and Phoenix!

You can read this blog post or the docs for more information!

17 Likes
2

Out of curiosity - what are the advantages over Phoenix.HTML?

3

This library is not a competitor to Phoenix.HTML, in fact Temple uses Phoenix.HTML as a dependency.

Temple needs to wrap Phoenix.HTML to make the functions work with the macros.

The reasons are related to how the markup is collected at runtime and there is some complexity around the anonymous functions used in the form_for and inputs_for functions from Phoenix.HTML.

4

And the same question regarding to https://github.com/zambal/eml

5

Reminds me of an in between jade and haml.

Looks nice.

1 Like
6

Looks nice! Well done :star:

About the existence of similar libraries, I think the fact that different authors experiment with different approaches is a positive sign of a good open-source ecosystem.

9 Likes
7

Ah I like code-syntax based DSEL’s like these, it makes it much easier to just use normal coding practices and functions instead of some unique syntax that makes it more difficult. :slight_smile:

ul class: "list" do
for item <- @items do

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?

defcomponent

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?

In the example, could:

  defcomponent :nav_item do
    div id: @id, class: "flex flex-col" do
      div @name, class: "margin-bottom-2"
      div @description
    end
  end

Be instead implemented just as:

  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

And thus be used like nav_item(item) or nav_item item instead?

Components can also take children if passed a block and are accessed via the @children variable.

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?

2 Likes
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
9

Just wanted to say that Temple looks awesome! I am pining for it to get LiveView integration :slight_smile:

4 Likes
10

Just released v0.1.1!

Single arity tags will now escape content passed to them, functioning the same as calling the text macro.

temple do
  div "<div>HELLO</div>"
  text "<div>HOWDY</div>"
end

# <div>&lt;div&gt:HELLO&lt;/&gt;</div>
# &lt;div&gt:HOWDY&lt;/&gt;

CHANGELOG

3 Likes
11

Just released v0.1.2!

Components now work correctly when requireing their module (as opposed to calling import).

defmodule MyComponents do
  import Temple
  
  defcomponent :btn do
    input type: "submit", class: "btn btn-red lots-of-padding", value: @text 
  end
end

defmodule MyWebView do
  require MyComponents, as: C
  
  def render_a_template("index.html") do
    temple do
      form do
        label "Your Name", for: "name"
        input name: "name", type: "text"
        
        C.btn text: "Submit 
      end
    end
  end
end

#  <form>
#   <label for="name">Your Name</label>
#   <input name="name" type="text">
#   <input type="submit class="btn btn-red lots-of-padding" value="Submit">
#  </form>

CHANGELOG

2 Likes
12

Just released v0.2.0!

This release introduces the radio_button/4 macro from Phoenix.HTML.Form (which was somehow forgotten during the initial release).

Special thanks to @shritesh for the contribution!

3 Likes
13

Just released v0.3.0!

Please see the changelog for all the details.

2 Likes
14

In case anyone has questions or would like to discuss the future of Temple, feel free to drop me a line in the Elixir Slack: https://elixir-lang.slack.com/messages/CMH6MA4UD

2 Likes
15

v0.4.0 has been released. Please see the changelog for all the changes.

3 Likes
16

v0.5.0 has been released. Please see the changelog for all the changes.

5 Likes
17

Anyone know of an open source example app that uses Temple?

(edit) I see now there’s an example in the repo

1 Like
18

I believe I’ve done all that’s asked to get temple working: added to deps, added as a template engine, file is named correctly and I’m "use Temple"ing, but I get the following error, it seems that it’s actually compiling the template but getting tripped up somewhere after that? This is with 0.6.

The template is simply

temple do
  h2 do: "Todo"
end

** (FunctionClauseError) no function clause matching in Temple.Parser.Default.run/2

The following arguments were given to Temple.Parser.Default.run/2:

    # 1
    {:safe, ["\n<h2>\nTodo\n</h2>\n"]}

    # 2
    #PID<0.2100.0>

Attempted function clauses (showing 1 out of 1):

    def run({_, _, args} = macro, buffer)

(temple 0.6.0-rc.0) lib/temple/parsers/default.ex:12: Temple.Parser.Default.run/2
(temple 0.6.0-rc.0) lib/temple/parser.ex:188: anonymous fn/3 in Temple.Parser.Private.traverse/2
(elixir 1.11.3) lib/enum.ex:3776: Enumerable.List.reduce/3
(elixir 1.11.3) lib/enum.ex:2243: Enum.reduce_while/3
(temple 0.6.0-rc.0) lib/temple/parser.ex:179: Temple.Parser.Private.traverse/2
(temple 0.6.0-rc.0) lib/temple/parser.ex:82: Temple.Parser.parse/1
(temple 0.6.0-rc.0) expanding macro: Temple.temple/1
(xxx 0.1.0) lib/xxx_web/live/user_live/index.html.lexs:1: Web.XXXLive.Index.render/1
(phoenix_live_view 0.15.4) lib/xxx_web/live/user_live/index.ex:1: Phoenix.LiveView.Renderer.__before_compile__/1
(elixir 1.11.3) lib/kernel/parallel_compiler.ex:314: anonymous fn/4 in Kernel.ParallelCompiler.spawn_workers/7
19

Where is that code located?

If it’s in a Phoenix template file, you don’t need to wrap it in the temple block, as the Phoenix template engine does that for you. So what I think you’re seeing is the template being compiled twice.

2 Likes
20

I’ll take “Seems obvious in hindsight for $200”. Problem solved.

2 Likes