Create a gist now

Instantly share code, notes, and snippets.

elm-make Spelling.elm --output=spelling.js
<div id="spelling"></div>
<script src="spelling.js"></script>
<script>
var app = Elm.Spelling.fullscreen();
app.ports.check.subscribe(function(word) {
var suggestions = spellCheck(word);
app.ports.suggestions.send(suggestions);
});
function spellCheck(word) {
// have a real implementation!
return [];
}
</script>
port module Spelling exposing (..)
import Html exposing (..)
import Html.App as App
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import String
main =
App.program
{ init = init
, view = view
, update = update
, subscriptions = subscriptions
}
-- MODEL
type alias Model =
{ word : String
, suggestions : List String
}
init : (Model, Cmd Msg)
init =
(Model "" [], Cmd.none)
-- UPDATE
type Msg
= Change String
| Check
| Suggest (List String)
port check : String -> Cmd msg
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
case msg of
Change newWord ->
( Model newWord [], Cmd.none )
Check ->
( model, check model.word )
Suggest newSuggestions ->
( Model model.word newSuggestions, Cmd.none )
-- SUBSCRIPTIONS
port suggestions : (List String -> msg) -> Sub msg
subscriptions : Model -> Sub Msg
subscriptions model =
suggestions Suggest
-- VIEW
view : Model -> Html Msg
view model =
div []
[ input [ onInput Change ] []
, button [ onClick Check ] [ text "Check" ]
, div [] [ text (String.join ", " model.suggestions) ]
]
@jphedley

Note: no word goes through port in this form, which I noticed by including a console.log(word) side effect in app.ports.check.subscribe callback. To send word across port, change update to
Check-> ( model, (check model.word) )
so check port function is called.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment