Skip to content
This repository has been archived by the owner on Mar 8, 2018. It is now read-only.

lukewestby/worker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Worker

This package is deprecated as of Elm 0.18 and the addition of Platform.program.

The example below explains how to use Platform.program to provide the functionality you might have used this package for prior to 0.18.

Example

Main.elm

port module Main exposing (..)

import Platform

{-| We'll receive messages from the world in the form of strings here -}
port messagesIn : (String -> msg) -> Sub msg

{-| This port will send our counter back out to the world -}
port modelOut : Model -> Cmd msg


type alias Model =
    Int


init : (Model, Cmd Msg)
init =
    (0, Cmd.none)


type Msg
    = Increment
    | NoOp


{-| This update will send a Cmd to send the model out over a port on every msg. This
can be abstracted into a separate function as your app becomes larger and your
updates become more complicated.
-}
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
    let
        (nextModel, nextCmd) =
            case msg of
                Increment ->
                    (model + 1, Cmd.none)

                NoOp ->
                    (model, Cmd.none)
    in
      ( nextModel
      , Cmd.batch
          [ nextCmd
          , modelOut nextModel
          ]
      )


{-| In this function we define `parse` in order to go from
the strings that the outside world sends us to the messages our
program knows about. We then pass `parse` to `messagesIn` to get
a subscription that can update our program from things that happen
in JavaScript-land
-}
subscriptions : Model -> Sub Msg
subscriptions _ =
    let
        parse value =
            case value of
                "Increment" ->
                    Increment

                _ ->
                    NoOp
    in
        messagesIn parse


main : Program Never
main =
    Platform.program
        { init = init
        , update = update
        , subscriptions = subscriptions
        }

app.js

window.addEventListener('loaded', function () {
  var app = Elm.Main.worker()

  app.ports.modelOut.subscribe(function (model) {
    document.getElementById('count').innerHTML = model;
  })

  document
    .getElementById('incrementButton')
    .addEventListener('click', function () {
      app.ports.messagesIn.send('Increment')
    })
})

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="count"></div>
    <div>
      <button id="incrementButton">+ 1</button>
    </div>
    <script src="elm-compiler-output.js"></script>
    <script src="app.js"></script>
  </body>
</html>