pzavolinsky / elmx Goto Github PK
View Code? Open in Web Editor NEWA 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
License: MIT License
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
License: MIT License
Using onClick
in an attribute (like the readme example shows) does not work the way the other tags do. I understand why this is happening, since the onClick
is being interpolated, not transpiled, but it would be worth noting this in the README. Here's code to demonstrate:
<button {onClick Decrement}>-</button>
results in:
, Html.button [(onClick Decrement)] [Html.text "-"]
This breaks on compiling unless Html.Events
specifically exposes the events it will use, unlike Html
and Html.Attributes
. It looks like this:
import Html
import Html.Attributes
import Html.Events exposing (onClick)
I wonder if there's an alternative syntax to this that wouldn't require qualifying. Perhaps something more JSX-like that will transpile into Html.Events.onClick
automatically? Example:
<button onClick={Decrement}>-</button>
// with a param
<button onClick={Decrement model.range}>-</button>
would result in
, Html.button [(Html.Events.onClick Decrement model.range)] [Html.text "-"]
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?
The attribute spread example in the live demo seems to be broken
attrsGreeting : List (Attribute msg) -> Html msg
attrsGreeting attrs = <div {:attrs}>Hi</div>
goes to
attrsGreeting : List (Attribute msg) -> Html msg
attrsGreeting attrs = Html.div [(:attrs)] [Html.text "Hi"]
Handling attribute spread would be great for handling styling children natively in elm
I like the .elmx extension but the name makes this project hard for people to find at the moment. I googled for "elm jsx" and it doesn't even show up.
I was surprised (and excited) to stumble on it at the bottom of elm-guides/elm-for-js#5
In JSX there's special syntax for keyed nodes in a list:
<ul>{notes |> map (\ note -> <li key={note.id}>{note.task}</li>)}</ul>
There is functionality for keyed nodes in Elm but so far as I can tell they use a different datastructure from normal nodes. So, it will be tricky to implement this transform as it
A possible first step is, rather than nesting like above (#9), simply translate <li key={k}>{stuff}</li>
to (k,li [] [stuff])
and require the keyed parent node explicitly.
Hi, thank You for the super library!
I really want to use it, but I don't know how to solve incompatibility with other IDE extensions - I tried:
Visual Studio Code (*.elmx compilation with Gulp and elmx extension for syntax highlighting)
Atom (extensions: elm-format, language-elm, language-elmx, linter-elm-make)
Thank you very much! I'll try to help as possible.
Windows 10 - Atom 1.16.0 - VS Code 1.12.1
<p>
foo
</p>
produces
Html.node "p" [] [Html.text "
foo
"]
(error: unexpected \n
)
of course, that could be fixed with
Html.node "p" [] [Html.text """
foo
"""]
for some reason it seems like elm switched from single-pair to triple quote multiline strings in the last year, and i can't find a changelog. maybe i'm going crazy.
Elm 0.17 changed the way html works quite significantly, so when I saw that the examples were still using Html
instead of Html Msg
, I was worried. But I worried for nothing: I just tried it and elmx works just fine with Elm 0.17, since it is only the types which changed, not the term-level syntax.
Please update your examples to Elm 0.17 so others don't incorrectly think your tool only works with older versions of Elm!
<img src={"http://foo.com/bar" ++ authorId ++ ".png"}></img>
becomes
Html.img [Html.Attributes.attribute "src" ("http://foo.com/bar" ++ authorId ".png")] []
<ul class="message-list">{: List.map chatMessage model.messages } </ul>
it translates to
Html.ul [Html.Attributes.attribute "class" "message-list"] ( List.map chatMessage model.messages ++ [ ])
Without the space it doesn't compile anymore
Html.ul [Html.Attributes.attribute "class" "message-list"] List.map chatMessage model.messages
reproducible in TryElmx
this is a great effort, thank you! isn't it worth considering using something like haml or slim syntax? the jsx is perceived by many is kinda "messy", while haml/slim is more like a cleaned up and familiar version of the Elm's native syntax, that also feels a bit messy.
The <|
operator is being seen as an open tag by htmlparser2.
Here's a contrived example:
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
case msg of
NoOp ->
( model, Cmd.batch <| [Cmd.none] )
subscriptions : Model -> Sub Msg
subscriptions model =
Sub.none
results in this code:
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
case msg of
NoOp ->
( model, Cmd.batch Html.| [, , , , , ] [Html.text " Sub Msg
subscriptions model =
Sub.none
Which is definitely not valid Elm. ๐
I checked into the elmx parser, and as expected, the htmlparser2 is seeing the pipe symbol as a tag.
# parser.js
onopentag: function onopentag(name, attrs) {
// name === "|"
I tried various things to skip operation if the name was a pipe but everything I tried resulted in an error:
TypeError: Cannot read property 'expr' of undefined
at generate (/Users/bbugh/projects/elm/whaticaneat.com/node_modules/elmx/dist/generator.js:83:18)
It looks like since htmlparser2 reports an open tag, it never properly reports a closed tag, so everything comes through as text mode. I'm not familiar with that library and other than specifying a custom tokenizer, I didn't see any way to tell it to skip certain tags.
I fixed it temporarily for myself by simply replacing <|
with โญ๏ธ before the tokenization, and then swapping them back after the generation. I'm sure there's a better way, though. ๐
Nice work! Can you expand on why the : operator is required for lists? Seems like you would always interpolate if the list was a elmx fragment. Requiring = for string interpolation definitely makes sense.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.