Indentation-based HTML templating language compiling to HEEx/LEEx/EEx?

Hi there! The recent developments w.r.t. Surface and HEEx are very cool!

One thing that would be the cherry on top, would be an indentation-based templating language that compiles down to one of these. If you no longer need to write closing tags, HTML (and any similar XML-like languages) can be expressed much more concisely (without any loss of expressivity).

As an example, you might look at Haml which is a Ruby-based variant (emitting ERb – Embedded Ruby files) of such a language. In Elixir there does exist Calliope which is an Haml parser. Unfortunately, Calliope has been abandoned since 2015.

I would love to write or collaborate on a templating engine like this.
However, where to start? What would be the most appropriate way to create a templating engine that builds on top of HEEx/LEEx/EEx(/Surface)?

I guess the question can be split up as:

How to create a templating engine which can be recognized both from a sigil and from a new file extension?
How to wrap (H/L)EEx inside another templating engine?

20 comments

/phoenix #eex #leex #heex #haml #rendering_engine

2 2822 20

2024-04-20 07:27:41 UTC

Marked As Solved

joaoevangelista

You might want to check out Slime, also with support for phoenix e and liveview, they have pretty advanced in terms of support, maybe is a good go to for contributions or inspiration

Post #1

Also Liked

jamieorc

Got this solved. Long story short, it was a combination of configuration and file ending.

config :phoenix, :template_engines,
  slim: PhoenixSlime.Engine,
  slime: PhoenixSlime.Engine,
  sheex: PhoenixSlime.LiveView.HTMLEngine
  # slimleex: PhoenixSlime.LiveViewEngine # If you want to use LiveView

I didn’t have sheex originally, as slimleex had been generated. Populimited’s code had sheex in config with PhoenixSlime.LiveView.HTMLEngine as the value. Once I added that and changed the file ending from slim to sheex, my components worked as expected.

For example in my index.html.sheex file:

:link href=~p"/memories/new" class="text-sky-500 hover:underline"
  'new memory

Now works. It is rendered in the brower as

<!-- <Phoenix.Component.link> lib/phoenix_component.ex:2670 -->
<a href="/memories/new" class="text-sky-500 hover:underline">new memory </a>
<!-- </Phoenix.Component.link> -->`

Post #14

silverdr

I was also happy to find it some time ago and also opted for using it (it’s really hard PITA to get back once you got used to haml/slime) in a non-trivial project. Alas, it seems to become abandonware just like all other (?) After kludging around for last two versions of Phoenix, I feel like the need to waste time again and again is no longer worth it. Unless somebody knows a current, maintained fork or another maintained option I’ll end up rewriting lots of slime templates back into [h]eex

Any other suggestions?

UPDATE: found a fork working with phx 1.7

https://github.com/populimited/phoenix_slime

Post #6

jamieorc

Here’s a more complicated example using the table component.

HEEX version:

<.table id="memories" rows={@memories}>
  <:col :let={memory} label="Title"><%= memory.title %></:col>
  <:col :let={memory} label="Added"><%= memory.inserted_at %></:col>
  <:action :let={memory}>
    <.link href={~p"/memories/#{memory}"} class="text-sky-500 hover:underline">View</.link>
    ·
    <.link href={~p"/memories/#{memory}/edit"} class="text-sky-500 hover:underline">Edit</.link>
    ·
    <.link href={~p"/memories/#{memory}"} method="delete" class="text-sky-500 hover:underline">Delete</.link>
  </:action>

Equivalent SHEEX version:

:table id="memories" rows=@memories
  ::col :let=memory label="Title" = memory.title
  ::col :let=memory label="Added" = memory.inserted_at
  ::action :let=memory
    :link href=~p"/memories/#{memory}" class="text-sky-500 hover:underline" View
    |&nbsp; · &nbsp;
    :link href=~p"/memories/#{memory}/edit" class="text-sky-500 hover:underline" Edit
    |&nbsp; · &nbsp;
    :link href=~p"/memories/#{memory}" method="delete" class="text-sky-500 hover:underline" Delete

And the SHEEX (Slim) result.

Good news for all you who still want to use Slim(e) in your Phoenix 1.7.x apps.

Post #15

Last Post!

sreyansjain

Just wanted to document here that Sneeze is an extremely simple and awesome html templating library for elixir. It is just function and lists. So you can have components, slots, etc all in an extremely simple syntax (just lists and maps). Highly recommended.
I would consider it feature complete.

Post #21