bower install
elm-package install
elm-make Main.elm Counter.elm --output=elm.js
elm-reactor
and then visit:
Last active
October 10, 2016 12:26
-
-
Save pdamoc/11b7f5e266a67201f3329b91f45f4b69 to your computer and use it in GitHub Desktop.
Multi component elm
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "name": "elm-counter-exploration", | |
| "authors": [ | |
| "Peter Damoc <[email protected]>" | |
| ], | |
| "description": "", | |
| "main": "", | |
| "moduleType": [], | |
| "license": "MIT", | |
| "homepage": "", | |
| "ignore": [ | |
| "**/.*", | |
| "node_modules", | |
| "bower_components", | |
| "test", | |
| "tests" | |
| ], | |
| "dependencies": { | |
| "polymer": "polymer/polymer#~1.2.3" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| port module Counter exposing (..) | |
| import Html exposing (..) | |
| import Html.App exposing (..) | |
| import Html.Attributes exposing (..) | |
| import Html.Events exposing (..) | |
| import Json.Decode as Json exposing (Value) | |
| type alias Model = | |
| Int | |
| init : Int -> ( Model, Cmd Msg ) | |
| init val = | |
| ( val, Cmd.none ) | |
| view : Model -> Html Msg | |
| view model = | |
| div [ style [ ( "backgroundColor", "#faa" ) ] ] | |
| [ button [ onClick Decrement ] [ text "-" ] | |
| , span [] [ text <| toString model ] | |
| , button [ onClick Increment ] [ text "+" ] | |
| ] | |
| type Msg | |
| = Increment | |
| | Decrement | |
| | Set Int | |
| port change : Int -> Cmd msg | |
| port set : (Model -> msg) -> Sub 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) ) | |
| Set value -> | |
| ( value, change value ) | |
| main : Program Int | |
| main = | |
| programWithFlags | |
| { init = init | |
| , view = view | |
| , update = update | |
| , subscriptions = \_ -> set Set | |
| } | |
| ---- | |
| value : Int -> Attribute msg | |
| value val = | |
| Html.Attributes.attribute "value" (toString val) | |
| counter : List (Attribute msg) -> Html msg | |
| counter attrs = | |
| Html.node "elm-counter" attrs [] | |
| detailValue : Json.Decoder Int | |
| detailValue = | |
| Json.at [ "detail", "value" ] Json.int | |
| onValueChanged : (Int -> a) -> Attribute a | |
| onValueChanged tagger = | |
| on "value-changed" <| Json.map tagger detailValue |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "version": "1.0.0", | |
| "summary": "helpful summary of your project, less than 80 characters", | |
| "repository": "https://github.com/user/project.git", | |
| "license": "BSD3", | |
| "source-directories": [ | |
| "." | |
| ], | |
| "exposed-modules": [], | |
| "dependencies": { | |
| "elm-lang/core": "4.0.5 <= v < 5.0.0", | |
| "elm-lang/html": "1.1.0 <= v < 2.0.0" | |
| }, | |
| "elm-version": "0.17.1 <= v < 0.18.0" | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE HTML> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Elm • Multi</title> | |
| <link rel="import" href="/bower_components/polymer/polymer.html"/> | |
| <script type="text/javascript" src="elm.js"></script> | |
| </head> | |
| <body style="margin: 0px;"> | |
| </body> | |
| <script> | |
| // register an element | |
| var counter = Polymer( | |
| { is: 'elm-counter' | |
| , properties: | |
| { value : | |
| { type: Number | |
| , value: 0 | |
| , notify: true | |
| } | |
| } | |
| , ready: function() | |
| { | |
| var app = Elm.Counter.embed(this, this.value); | |
| app.ports.change.subscribe(value => { | |
| this.value = value; | |
| }); | |
| } | |
| }); | |
| </script> | |
| <script type="text/javascript"> | |
| Elm.Main.fullscreen(); | |
| </script> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| module Main exposing (..) | |
| import Html exposing (..) | |
| import Html.App exposing (..) | |
| import Counter exposing (counter, value, onValueChanged) | |
| type alias Model = | |
| Int | |
| view : Model -> Html Msg | |
| view model = | |
| div [] | |
| [ counter [ value 2, onValueChanged ValueChanged ] | |
| ] | |
| type Msg | |
| = ValueChanged Int | |
| update : Msg -> Model -> Model | |
| update msg model = | |
| case msg of | |
| ValueChanged val -> | |
| Debug.log "val" val | |
| main : Program Never | |
| main = | |
| beginnerProgram | |
| { model = 0 | |
| , view = view | |
| , update = update | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment