Ch-ch-ch-ch-changes in Elm 0.17.0

Agenda Changelog, Walthrough

Brian Hicks Asteris

September 15, 2016 / elm-conf.us

Changes

Package Moves · evancz/elm-html -> elm-lang/html · evancz/elm-svg -> elm-lang/svg · evancz/elm-effects -> elm-lang/ core · evancz/start-app -> Html.App

Action is now Msg -- 0.16 type Action = Increment | Decrement -- 0.17 type Msg = Increment | Decrement

Header Changes -- 0.16 module X where -- 0.17 module X exposing (..)

Core Moves · Signal -> ! · Effects -> ! (the functionality's still there, but the modules aren't)

What about Signal.Address? 0.16: view : Signal.Address Action -> Model -> Html view address model = div [] [ button [ onClick address Decrement ] [ text "-" ] , div [ countStyle ] [ text (toString model) ] , button [ onClick address Increment ] [ text "+" ] ]

What about Signal.Address? 0.17: view : Model -> Html Msg view model = div [] [ button [ onClick Decrement ] [ text "-" ] , div [ countStyle ] [ text (toString model) ] , button [ onClick Increment ] [ text "+" ] ]

What about Signal.Address? App.map: -- Child.elm type Msg = SomeEvent view : Model -> Html Msg view model = model |> toString |> Html.text -- Parent.elm type Msg = ChildMsg Child.Msg | ... view : Model -> Html Msg view model = map ChildMsg <| Child.view model.child

What about Signal.Address? Avoiding App.map: -- Child.elm view : Model -> Html a view model = model |> toString |> Html.text -- Parent.elm type Msg = ChildMsg Child.Msg | ... view : Model -> Html Msg view model = Child.view model.child

And Effects? 0.16: update : Action -> Model -> (Model, Effects Action) update action model = case action of RequestMore -> ( model, getRandomGif model.topic ) NewGif maybeUrl -> ( Model model.topic (Maybe.withDefault model.gifUrl maybeUrl) , Effects.none )

And Effects? 0.17: update : Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of RequestMore -> ( model, getRandomGif model.topic ) NewGif maybeUrl -> ( Model model.topic (Maybe.withDefault model.gifUrl maybeUrl) , Cmd.none )

And Effects? 0.17: update : Msg -> Model -> (Model, Cmd Msg) update msg model = case msg of RequestMore -> ( model, getRandomGif model.topic ) NewGif maybeUrl -> Model model.topic (Maybe.withDefault model.gifUrl maybeUrl) ! [ ]

And Effects? What's this ! do? (!) : model -> List (Cmd msg) -> (model, Cmd msg) (!) model commands = (model, Msg.batch commands) -- so this is true: ( model, Cmd.none ) == model ! [ ]

StartApp is now Html.App 0.16: import StartApp import Task app = StartApp.start { init = init, update = update, view = view, inputs = [] } main = app.html port tasks : Signal (Task.Task Never ()) port tasks = app.tasks

StartApp is now Html.App 0.17: import Html.App as Html main = Html.program { init = init , update = update , view = view , subscriptions = \_ -> Sub.none }

Ports (Outgoing) -- 0.16 port focus : Signal String port focus = ... -- 0.17 port focus : String -> Cmd msg

Ports (Incoming) type User = { name : String, age : Int } -- 0.16 port users : Signal User -- 0.17 port users : (User -> msg) -> Sub msg

Embedding // 0.16 Elm.embed(Elm.Main, someNode); Elm.fullscreen(Elm.Main); // 0.17 Elm.Main.embed(someNode); Elm.Main.fullscreen();

Navigation · elm-history -> elm-lang/navigation · wraps the new Html.App program · takes an additional argument for updating navigation state

Navigation -- your nav type yourParserFunc : Navigation.Location -> List String yourParserFunc loc = loc.hash |> split "/" |> List.filter (\seg -> seg /= "" && seg /= "#") main = Navigation.program (Navigation.makeParser yourParserFunc) { init = init , update = update -- Msg -> Model -> ( Model, Cmd Msg ) , urlUpdate = urlUpdate -- List String -> Model -> ( Model, Cmd Msg ) , view = view , subscriptions = subscriptions }

Navigation evancz/url-parser blog : Parser (Int -> String -> a) a blog = s "blog" > int > string The parser gets /blog/42/whale-songs and returns (42, "whale-songs")

My Migration

Plan · update packages · fix module headers · renames like Action -> Msg · remove usage of Signal and Effects · remove StartApp fork for Html.App · run elm-format on everything

Reality You can't do these things one at a time. Plan for it to be messy.

Outcome · PR: +1,077 -867 · No user-facing changes ! · Output JS: 354K to 244K

Thank You! @brianhicks brian@brianthicks.com