How to integrate Elm in your current stack?
k.lebrun@meetic-corp.com
kevinlebrun
No `null`
type alias Model = Int
type alias Model = { value = 0 }
view : Model -> Html Msg
view model =
div []
[ button [ onClick Decrement ] [ text "-" ]
, span [] [ text (toString model) ]
, button [ onClick Increment ] [ text "+" ]
]
type Msg = Increment | Decrement
update : Msg -> Model -> Model
update msg model =
case msg of
Increment ->
model + 1
Decrement ->
model - 1
main : Program Never
main =
beginnerProgram
{ model = 0
, view = view
, update = update
}
var node = document.getElementById('counter');
Elm.Counter.embed(node);
How to communicate with the outside world?
var node = document.getElementById('counter');
var app = Elm.Counter.embed(node);
app.ports.change.subscribe(function (value) {
console.log(value);
});
port change : Model -> Cmd msg
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Increment ->
( model + 1, change model + 1 )
Decrement ->
( model - 1, change model - 1 )
var node = document.getElementById('counter');
var app = Elm.Counter.embed(node);
app.ports.set.send(42);
port set : (Model -> msg) -> Sub msg
update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
case msg of
Set value ->
( value, change value )
var node = document.getElementById('counter');
Elm.Counter.embed(node, { value: 42 });
init : { a | value : Int } -> ( Model, Cmd Msg )
init flags =
( flags.value, Cmd.none )
var app = Elm.Main.fullscreen(localStorage.session || null);
app.ports.storeSession.subscribe(function(session) {
localStorage.session = session;
});
window.addEventListener("storage", function(event) {
if (event.storageArea === localStorage
&& event.key === "session") {
app.ports.onSessionChange.send(event.newValue);
}
}, false);
paperCard = node "paper-card"
paperButton = node "paper-button"
heading = attribute "heading"
cardContent = div [ class "card-content" ]
cardActions = div [ class "card-actions" ]
view : Model -> Html Msg
view model =
div []
[ paperCard [ heading "Hello World!" ]
[ cardContent [ text (toString model) ]
, cardActions
[ paperButton [ onClick Decrement ] [ text "Decrement" ]
, paperButton [ onClick Increment ] [ text "Increment" ]
]
]
]
detailValue =
Json.at [ "detail", "value" ] Json.int
onValueChanged tagger =
on "value-changed" <| Json.map tagger detailValue
github.com/kevinlebrun/elm-polymer