search

pzavolinsky / elmx

A tiny precompiler that takes an Elm program with embedded HTML and desugars the HTML into elm-html syntax. Elmx is to Elm what React's JSX is to Javascript
MIT License
351 stars 11 forks source link

Nested Elmx #9

Open daig opened 7 years ago

daig commented 7 years ago

Hi, great library! Sometimes I'd like to nest Elmx syntax, for example when mapping over children:

<ul>{notes |> List.map (\ note -> <li>{view note}</li>)}</ul>

but this doesn't get the right result. Is there a fundamental barrier to nesting, or is it just extra tricky to implement?

pzavolinsky commented 7 years ago

Hi @daig the short answer is that this is tricky to implement.

The detailed answer follows:

I'm currently using htmlparser2 to parse the Elmx (as HTML) into an AST and then from there generate the Elm code. The pro of this approach is that it keeps the elmx code small, the trade-off is that invalid HTML might break the parser and yield the wrong results (like in your example above).

Of course, this a sub-optimal implementation since not every Elmx needs to be a valid HTML, but it was a pragmatic decision (that we can review provided we find a better parser or an alternative approach).

For the time being, you can overcome this limitation by rewriting this:

<ul>{:notes |> List.map (\ note -> <li>{view note}</li>)}</ul>

like this:

let
  items = notes |> List.map (\ note -> <li>{view note}</li>)
in
  <ul>{:items}</ul>

Cheers!