Does anyone use Temple instead of Heex in their Live View projects?

Phoenix Forum Chat / Discussions
, , ,
1

Question is pretty self explanatory. Temple is a view template library that feels like a more natural way to build markup in Elixir

2 Likes
2

I do, but I am the author of the library :sweat_smile:.

9 Likes
3

Can you note any major shocks someone coming from heex should expect when using Temple? How do the Javascript blocks work with %JS{} functions?

4

Nothing that I can think of.

One note tho is the attr and slot dsl do not work (the functions you put above a component).

5

These actually do work.

I don’t know if they’ve always worked or if something changed that made them work, but I’m pretty sure they work as of now.

3 Likes
6

Looks really nice!

Is there more info on the script macro? Does it have any knowledge of the component it’s in or is it just JS?

Any plans for adding a style macro for scoped css?

7

The tags are not actually macros, the temple macro traverses the ast inside it and compiles it using whatever EEx engine you have configured.

The script and style tags are just plain html tags, no special behavior.

I don’t have any plans regarding that, but you could probably define your own macro to do special compile time things if you wanted.

1 Like
8

I didn’t know of this library. Just tried it out and it seems to work really nice! Thank you @mhanberg.

I’m all in for using an embedded language for these things, and implemented one for F# a looooong time ago: Wing Beats – CodePlex Archive.

1 Like
9

Whats the upside of this over html templating? If someone has a sales pitch

10
  1. Vibes. You like how it looks and it’s easier to type. So, subjective DX I suppose.
  2. In an earlier iteration, Temple had components but EEx did not. As LiveView matured, HEEx was introduced with components, so not a huge selling point now anymore. But Temple uses the same component model, so components can be used in either markup regardless how they were authored.
  3. You can use temple and its components without LiveView, and with any EEx engine.
1 Like
11

In a language like Elixir where everything is expressions, it works really well to embed a little language that can easily be translated to HTML. One upside is that you can use Elixir’s control flows directly without escaping the template or relying on the template’s control flows.

I listened to an interview with Chris Lattner (the father of Swift), in which he said he regrets adding statements to Swift. Because of this, they had to add a lot of extra complexity on top of Swift to support Swift UI, where you can write view hierarchies directly in Swift.

I just tried Temple and I liked how easily it could co-work with existing HEEX templates. If you are curious you could try it out, perhaps in a messy view with logic, to see if you like it. Remember, Apple put a lot of effort into supporting something similar, so if it’s a new idea for you, it’s at least worth trying.

1 Like
12

@mhanberg is it possible to add a HEEx function component? I tried to call the component as a component, and I tried to use the c word, but couldn’t figure it out.

13

How were you calling the component?

Components are called in the same way, if the function component is imported or local to the current module, it’s just c &the_component/1

You can also call remote components like c &RemoteModule.component/1

14

I tried this for example:

def subview(assigns) do
    temple do
      p do
        "this is a subview"
      end
    end
  end

  def my_view(assigns) do
    temple do
      div do
        c &subview/1
      end
    end
  end

I get the error

error: undefined function component/3 (expected ScribeWeb.Crafting.StartLive to define such a function or for it to be imported, but none are available)
    │
 44 │     temple do
    │     ^^^^^^^^^
    │
    └─ (scribe 0.1.0) lib/scribe_web/crafting/live/start.ex:44: ScribeWeb.Crafting.StartLive.my_view/1

Where ScribeWeb.Crafting.StartLive is the module I’ve added the code to.

If I change my_view to

def my_view(assigns) do
    ~H"""
    <div>
      <.subview />
    </div>
    """
  end

it works fine.

15

Ahh, sorry I misunderstood.

Temple needs you to import a component implementation.

In the case of a non-live view project, you can easily provide your own as shown in the docs. Temple.Component — Temple v0.14.1

In the case of live view, the component implementation lives in Phoenix.LiveView.TagEngine.

So, you can simply import that module at the top of the file.

I’ll improve the docs and guides on this matter.

16

Thanks! That worked perfectly.

I added it to my_web.ex, so now I can easily switch between Heex and temple without any extra ceremony in the live view modules themselves.

  def live_view do
    quote do
      use Phoenix.LiveView,
        layout: {ScribeWeb.Layouts, :empty}

      import Temple
      import Phoenix.LiveView.TagEngine

      unquote(html_helpers())
    end
  end
1 Like