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

20 2739 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 #2

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 #15

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 #7

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.