pzavolinsky / elmx Goto Github PK

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:

1. Visual Studio Code (*.elmx compilation with Gulp and elmx extension for syntax highlighting)

   • Is it possible to format code on save (with elm-format) and don't break autocomplete (and other functions) provided by elm extension?

2. Atom (extensions: elm-format, language-elm, language-elmx, linter-elm-make)

   • A) Is it possible to format code on save?
   • C) I think it has some problems with linter-ui-default (viz screenshot) (It will be better to create a new issue for this imho)
   • B) There is maybe another bug with linter - some red lines aren't associated with any lint errors

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!

• Expression with two infix operators:

<img src={"http://foo.com/bar" ++ authorId ++ ".png"}></img>

becomes

Html.img [Html.Attributes.attribute "src" ("http://foo.com/bar" ++ authorId ".png")] []

• The second thing should be evt. a separate issue. Note a space here before closing tag:

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