Events not qualified in attributes

[bbugh]

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 "-"]

[bbugh]

Although, on second thought, we still have to expose functions for this common Elm pattern:

import Html.Attributes exposing (style)

boxStyle : List ( String, String )
boxStyle =
  [ ("border", "1px solid #ccc")
  , ("border-radius", "4px")
  , ("padding", "10px")
  , ("margin", "10px")
  ]

view : Model -> Html.Html Msg 
view model =
  <div {style boxStyle}>

Maybe I'm just trying to be too convenient. 😆 (I doubt I'll end up storing styles this way anyway)

I still think mentioning that you have to add the exposing for events in the README example is worthwhile, though.

[pzavolinsky]

Hi @bbugh ,

I still think mentioning that you have to add the exposing for events in the README example is worthwhile, though.

I've just updated the README.

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?

I'll look into this. I'm not sure is doable for anything, but for a selected (i.e. hardcoded) list of attributes (onClick, onInput, etc.) it would be cool to be able to use the JSX shorthand:

import Html.Events

<button onClick={Decrement}>-</button>

And for very complex expressions, you can always interpolate the attribute like the example in the README.

[pzavolinsky]

Hey @bbugh , I just pushed version 1.0.4 with all the event attributes (I could find) aliased into the JSX shorthand and also updated the Atom package to version 1.2.5 with the same changes.

Check the updated README.

Thanks for suggesting this feature!

[bbugh]

Awesome, thanks!