-
-
Save artisonian/11e93321cd7fd108142115269cbeafe7 to your computer and use it in GitHub Desktop.
This file contains 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
| #!/bin/sh | |
| elm make Main.elm --output=elm.js |
This file contains 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.3 <= 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 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 lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |
| <title>Elm Ports</title> | |
| <style> | |
| * { box-sizing: border-box; } | |
| html, body { | |
| margin: 0; | |
| padding: 0; | |
| background: #f2f2f2; | |
| color: #333; | |
| font: 100%/1.4 -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; | |
| } | |
| .panel { | |
| max-width: 35rem; | |
| margin: 2rem auto; | |
| background: white; | |
| border-radius: 3px; | |
| box-shadow: 0 3px 8px rgba(0,0,0,0.24); | |
| } | |
| .email-list { | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| } | |
| .email-list__item { | |
| display: flex; | |
| align-items: baseline; | |
| padding: 0.75rem; | |
| } | |
| .email-list__item + .email-list__item { | |
| border-top: 1px solid #e8e8e8; | |
| } | |
| .email-list__username { | |
| flex: 1 1 auto; | |
| margin-right: 0.5rem; | |
| } | |
| .email-list__email { | |
| color: #46a; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"></div> | |
| <script src="elm.js"></script> | |
| <script> | |
| var app = Elm.Main.embed(document.querySelector('#app')); | |
| app.ports.sendEmails.subscribe(function (emails) { | |
| console.log('emails', emails); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains 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 Main exposing (..) | |
| import Html exposing (..) | |
| import Html.App as App | |
| import Html.Attributes exposing (class) | |
| main = | |
| App.program | |
| { init = init | |
| , view = view | |
| , update = update | |
| , subscriptions = (\_ -> Sub.none) | |
| } | |
| type alias Model = List Email | |
| type alias Email = | |
| { username : String | |
| , email : String | |
| } | |
| initEmails : Model | |
| initEmails = | |
| [ Email "janedoe" "[email protected]" | |
| , Email "jappleseed" "[email protected]" | |
| , Email "support" "[email protected]" | |
| ] | |
| init : (Model, Cmd Msg) | |
| init = | |
| (initEmails, sendEmails initEmails) | |
| type Msg | |
| = NoOp | |
| update : Msg -> Model -> (Model, Cmd Msg) | |
| update msg model = | |
| case msg of | |
| NoOp -> (model, Cmd.none) | |
| port sendEmails : List Email -> Cmd msg | |
| (=>) = (,) | |
| view : Model -> Html Msg | |
| view model = | |
| let | |
| emailView {username, email} = | |
| li [ class "email-list__item" ] | |
| [ span [ class "email-list__username" ] [ text username ] | |
| , span [ class "email-list__email" ] [ text email ] | |
| ] | |
| in | |
| div [ class "panel" ] | |
| [ ul [ class "email-list" ] (List.map emailView model) ] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment