artisonian/Main.elm

## build.sh
#!/bin/sh

elm make Main.elm --output=elm.js

## elm-package.json
{
    "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"
}

## index.html
<!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>

## Main.elm
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" "jane@doe.net"
  , Email "jappleseed" "john@appleseed.io"
  , Email "support" "support@example.com"
  ]


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) ]
	{
	"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"
	}
	<!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>
	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" "jane@doe.net"
	, Email "jappleseed" "john@appleseed.io"
	, Email "support" "support@example.com"
	]


	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) ]