Updated elm example to 0.17.1 (#1667)

* Updated elm example to 0.17.1

* Excluded elm compiled assets and packages from jscs

* Removed focus port

.jscsrc

@@ -38,6 +38,8 @@
 		"examples/ember-cli/todomvc/dist/**/*.js",
 		"examples/ember-cli/todomvc/testem.js",
 		"examples/ember-cli/assets/**/*.js",
+		"examples/elm/build/elm.js",
+		"examples/elm/elm-stuff/**",
 		"examples/humble/js/**",
 		"examples/js_of_ocaml/js/*.js",
 		"examples/polymer/elements/elements.build.js",

examples/elm/.gitignore

-node_modules/todomvc-app-css/*
+elm-stuff
+
+node_modules/todomvc-app-css
 !node_modules/todomvc-app-css/index.css
 
-node_modules/todomvc-common/*
+node_modules/todomvc-common
 !node_modules/todomvc-common/base.css
 !node_modules/todomvc-common/base.js

examples/elm/Task.elm

-module Task where
-
-import Html (..)
-import Html.Attributes (..)
-import Html.Events (..)
-import Json.Decode as Json
-import LocalChannel as LC
-import Maybe
-import Signal
-import String
-
-
--- MODEL
-
-type alias Model =
-    { description : String
-    , completed   : Bool
-    , edits       : Maybe String
-    , id          : Int
-    }
-
-
-init : String -> Int -> Model
-init desc id =
-    { description = desc
-    , completed = False
-    , edits = Nothing
-    , id = id
-    }
-
-
--- UPDATE
-
-type Action
-    = Focus
-    | Edit String
-    | Cancel
-    | Commit
-    | Completed Bool
-    | Delete
-
-
-update : Action -> Model -> Maybe Model
-update update task =
-    case update of
-      Focus ->
-          Just { task | edits <- Just task.description }
-
-      Edit description ->
-          Just { task | edits <- Just description }
-
-      Cancel ->
-          Just { task | edits <- Nothing }
-
-      Commit ->
-          case task.edits of
-            Nothing ->
-                Just task
-
-            Just rawDescription ->
-                let description = String.trim rawDescription in
-                if String.isEmpty description then Nothing else
-                    Just
-                      { task |
-                          edits <- Nothing,
-                          description <- description
-                      }
-
-      Completed bool ->
-          Just { task | completed <- bool }
-
-      Delete ->
-          Nothing
-
-
--- VIEW
-
-view : LC.LocalChannel (Int, Action) -> Model -> Html
-view channel task =
-    let className =
-            (if task.completed then "completed " else "") ++
-              case task.edits of
-                Just _ -> "editing"
-                Nothing -> ""
-
-        description =
-            Maybe.withDefault task.description task.edits
-    in
-
-    li
-      [ class className ]
-      [ div
-          [ class "view" ]
-          [ input
-              [ class "toggle"
-              , type' "checkbox"
-              , checked task.completed
-              , onClick (LC.send channel (task.id, Completed (not task.completed)))
-              ]
-              []
-          , label
-              [ onDoubleClick (LC.send channel (task.id, Focus)) ]
-              [ text description ]
-          , button
-              [ class "destroy"
-              , onClick (LC.send channel (task.id, Delete))
-              ]
-              []
-          ]
-      , input
-          [ class "edit"
-          , value description
-          , name "title"
-          , id ("todo-" ++ toString task.id)
-          , on "input" targetValue (\desc -> LC.send channel (task.id, Edit desc))
-          , onBlur (LC.send channel (task.id, Commit))
-          , onFinish
-              (LC.send channel (task.id, Commit))
-              (LC.send channel (task.id, Cancel))
-          ]
-          []
-      ]
-
-
-onFinish : Signal.Message -> Signal.Message -> Attribute
-onFinish enterMessage escapeMessage =
-  let select key =
-        case key of
-          13 -> Ok enterMessage
-          27 -> Ok escapeMessage
-          _ -> Err "Not a 'finish' key, such as ENTER or ESCAPE"
-  in
-      on "keydown" (Json.customDecoder keyCode select) identity

examples/elm/Todo/Task.elm

+module Todo.Task exposing (..)
+
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
+import Json.Decode
+import String
+
+
+-- MODEL
+
+
+type alias Model =
+    { description : String
+    , completed : Bool
+    , edits : Maybe String
+    , id : Int
+    }
+
+
+init : String -> Int -> Model
+init desc id =
+    { description = desc
+    , completed = False
+    , edits = Nothing
+    , id = id
+    }
+
+
+
+-- UPDATE
+
+
+type Msg
+    = Focus String
+    | Edit String
+    | Cancel
+    | Commit
+    | Completed Bool
+    | Delete
+
+
+update : Msg -> Model -> Maybe Model
+update msg model =
+    case msg of
+        Focus elementId ->
+            Just { model | edits = Just model.description }
+
+        Edit description ->
+            Just { model | edits = Just description }
+
+        Cancel ->
+            Just { model | edits = Nothing }
+
+        Commit ->
+            case model.edits of
+                Nothing ->
+                    Just model
+
+                Just rawDescription ->
+                    let
+                        description =
+                            String.trim rawDescription
+                    in
+                        if String.isEmpty description then
+                            Nothing
+                        else
+                            Just
+                                { model
+                                    | edits = Nothing
+                                    , description = description
+                                }
+
+        Completed bool ->
+            Just { model | completed = bool }
+
+        Delete ->
+            Nothing
+
+
+
+-- VIEW
+
+
+view : Model -> Html Msg
+view model =
+    let
+        className =
+            (if model.completed then
+                "completed "
+             else
+                ""
+            )
+                ++ case model.edits of
+                    Just _ ->
+                        "editing"
+
+                    Nothing ->
+                        ""
+
+        description =
+            Maybe.withDefault model.description model.edits
+
+        elementId =
+            "todo-" ++ toString model.id
+    in
+        li
+            [ class className ]
+            [ div
+                [ class "view" ]
+                [ input
+                    [ class "toggle"
+                    , type' "checkbox"
+                    , checked model.completed
+                    , onClick (Completed (not model.completed))
+                    ]
+                    []
+                , label
+                    [ onDoubleClick (Focus elementId) ]
+                    [ text description ]
+                , button
+                    [ class "destroy"
+                    , onClick Delete
+                    ]
+                    []
+                ]
+            , input
+                [ class "edit"
+                , value description
+                , name "title"
+                , id (elementId)
+                , onInput Edit
+                , onBlur Commit
+                , onFinish Commit Cancel
+                ]
+                []
+            ]
+
+
+onFinish : msg -> msg -> Attribute msg
+onFinish enterMessage escapeMessage =
+    let
+        select key =
+            case key of
+                13 ->
+                    enterMessage
+
+                _ ->
+                    -- Not a 'finish' key, such as ENTER or ESCAPE
+                    escapeMessage
+    in
+        on "keydown" (Json.Decode.map select keyCode)

examples/elm/elm-package.json

@@ -8,8 +8,11 @@
     ],
     "exposed-modules": [],
     "dependencies": {
-        "elm-lang/core": "1.0.0 <= v < 2.0.0",
-        "evancz/elm-html": "1.0.0 <= v < 2.0.0",
-        "evancz/local-channel": "1.0.0 <= v < 2.0.0"
-    }
+        "elm-community/string-extra": "1.0.2 <= v < 2.0.0",
+        "elm-lang/core": "4.0.5 <= v < 5.0.0",
+        "elm-lang/dom": "1.1.0 <= v < 2.0.0",
+        "elm-lang/html": "1.1.0 <= v < 2.0.0",
+        "elm-lang/navigation": "1.0.0 <= v < 2.0.0"
+    },
+    "elm-version": "0.17.1 <= v < 0.18.0"
 }

examples/elm/index.html

@@ -16,47 +16,17 @@
 </head>
 
 <body>
-<script src="elm.js"></script>
+<script src="build/elm.js"></script>
 <script>
 	(function () {
 		var result = localStorage.getItem('elm-todo-model');
 		var savedModel = result ? JSON.parse(result) : null;
 
-		var todomvc = Elm.fullscreen(Elm.Todo, {
-			savedModel: savedModel,
-			route: getRoute()
-		});
+		var todomvc = Elm.Todo.fullscreen(savedModel);
 
 		todomvc.ports.save.subscribe(function (model) {
 			localStorage.setItem('elm-todo-model', JSON.stringify(model));
 		});
-
-		// Routing
-		window.addEventListener('popstate', function () {
-			todomvc.ports.route.send(getRoute());
-		}, false);
-
-		function getRoute() {
-			var hash = location.href.split('#')[1] || '';
-			var route = hash.replace('/', '');
-			if (['all', 'active', 'completed'].indexOf(route) >= 0) {
-				return route[0].toUpperCase() + route.substr(1);
-			}
-			return 'All';
-		}
-
-		// Setting focus manually
-		todomvc.ports.focus.subscribe(function (id) {
-			setTimeout(function () {
-				if (id === null) {
-					return;
-				}
-				var node = document.getElementById('todo-' + id);
-				if (document.activeElement !== node) {
-					node.focus();
-				}
-			}, 50);
-		});
 	}());
 </script>
 <script async src="node_modules/todomvc-common/base.js"></script>

examples/elm/node_modules/todomvc-app-css/index.css

@@ -15,12 +15,9 @@ button {
 	font-weight: inherit;
 	color: inherit;
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 	-webkit-font-smoothing: antialiased;
-	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
-	font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
 body {
@@ -32,22 +29,19 @@ body {
 	max-width: 550px;
 	margin: 0 auto;
 	-webkit-font-smoothing: antialiased;
-	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
-	font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 	font-weight: 300;
 }
 
-button,
-input[type="checkbox"] {
-	outline: none;
+:focus {
+	outline: 0;
 }
 
 .hidden {
 	display: none;
 }
 
-#todoapp {
+.todoapp {
 	background: #fff;
 	margin: 130px 0 40px 0;
 	position: relative;
@@ -55,25 +49,25 @@ input[type="checkbox"] {
 	            0 25px 50px 0 rgba(0, 0, 0, 0.1);
 }
 
-#todoapp input::-webkit-input-placeholder {
+.todoapp input::-webkit-input-placeholder {
 	font-style: italic;
 	font-weight: 300;
 	color: #e6e6e6;
 }
 
-#todoapp input::-moz-placeholder {
+.todoapp input::-moz-placeholder {
 	font-style: italic;
 	font-weight: 300;
 	color: #e6e6e6;
 }
 
-#todoapp input::input-placeholder {
+.todoapp input::input-placeholder {
 	font-style: italic;
 	font-weight: 300;
 	color: #e6e6e6;
 }
 
-#todoapp h1 {
+.todoapp h1 {
 	position: absolute;
 	top: -155px;
 	width: 100%;
@@ -83,11 +77,10 @@ input[type="checkbox"] {
 	color: rgba(175, 47, 47, 0.15);
 	-webkit-text-rendering: optimizeLegibility;
 	-moz-text-rendering: optimizeLegibility;
-	-ms-text-rendering: optimizeLegibility;
 	text-rendering: optimizeLegibility;
 }
 
-#new-todo,
+.new-todo,
 .edit {
 	position: relative;
 	margin: 0;
@@ -97,27 +90,23 @@ input[type="checkbox"] {
 	font-weight: inherit;
 	line-height: 1.4em;
 	border: 0;
-	outline: none;
 	color: inherit;
 	padding: 6px;
 	border: 1px solid #999;
 	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-	-ms-box-sizing: border-box;
 	box-sizing: border-box;
 	-webkit-font-smoothing: antialiased;
-	-moz-font-smoothing: antialiased;
-	-ms-font-smoothing: antialiased;
-	font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 
-#new-todo {
+.new-todo {
 	padding: 16px 16px 16px 60px;
 	border: none;
 	background: rgba(0, 0, 0, 0.003);
 	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
 }
 
-#main {
+.main {
 	position: relative;
 	z-index: 2;
 	border-top: 1px solid #e6e6e6;
@@ -127,7 +116,7 @@ label[for='toggle-all'] {
 	display: none;
 }
 
-#toggle-all {
+.toggle-all {
 	position: absolute;
 	top: -55px;
 	left: -12px;
@@ -137,50 +126,50 @@ label[for='toggle-all'] {
 	border: none; /* Mobile Safari */
 }
 
-#toggle-all:before {
+.toggle-all:before {
 	content: '❯';
 	font-size: 22px;
 	color: #e6e6e6;
 	padding: 10px 27px 10px 27px;
 }
 
-#toggle-all:checked:before {
+.toggle-all:checked:before {
 	color: #737373;
 }
 
-#todo-list {
+.todo-list {
 	margin: 0;
 	padding: 0;
 	list-style: none;
 }
 
-#todo-list li {
+.todo-list li {
 	position: relative;
 	font-size: 24px;
 	border-bottom: 1px solid #ededed;
 }
 
-#todo-list li:last-child {
+.todo-list li:last-child {
 	border-bottom: none;
 }
 
-#todo-list li.editing {
+.todo-list li.editing {
 	border-bottom: none;
 	padding: 0;
 }
 
-#todo-list li.editing .edit {
+.todo-list li.editing .edit {
 	display: block;
 	width: 506px;
-	padding: 13px 17px 12px 17px;
+	padding: 12px 16px;
 	margin: 0 0 0 43px;
 }
 
-#todo-list li.editing .view {
+.todo-list li.editing .view {
 	display: none;
 }
 
-#todo-list li .toggle {
+.todo-list li .toggle {
 	text-align: center;
 	width: 40px;
 	/* auto, since non-WebKit browsers doesn't support input styling */
@@ -191,20 +180,18 @@ label[for='toggle-all'] {
 	margin: auto 0;
 	border: none; /* Mobile Safari */
 	-webkit-appearance: none;
-	-ms-appearance: none;
 	appearance: none;
 }
 
-#todo-list li .toggle:after {
+.todo-list li .toggle:after {
 	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
 }
 
-#todo-list li .toggle:checked:after {
+.todo-list li .toggle:checked:after {
 	content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
 }
 
-#todo-list li label {
-	white-space: pre-line;
+.todo-list li label {
 	word-break: break-all;
 	padding: 15px 60px 15px 15px;
 	margin-left: 45px;
@@ -213,12 +200,12 @@ label[for='toggle-all'] {
 	transition: color 0.4s;
 }
 
-#todo-list li.completed label {
+.todo-list li.completed label {
 	color: #d9d9d9;
 	text-decoration: line-through;
 }
 
-#todo-list li .destroy {
+.todo-list li .destroy {
 	display: none;
 	position: absolute;
 	top: 0;
@@ -233,27 +220,27 @@ label[for='toggle-all'] {
 	transition: color 0.2s ease-out;
 }
 
-#todo-list li .destroy:hover {
+.todo-list li .destroy:hover {
 	color: #af5b5e;
 }
 
-#todo-list li .destroy:after {
+.todo-list li .destroy:after {
 	content: '×';
 }
 
-#todo-list li:hover .destroy {
+.todo-list li:hover .destroy {
 	display: block;
 }
 
-#todo-list li .edit {
+.todo-list li .edit {
 	display: none;
 }
 
-#todo-list li.editing:last-child {
+.todo-list li.editing:last-child {
 	margin-bottom: -1px;
 }
 
-#footer {
+.footer {
 	color: #777;
 	padding: 10px 15px;
 	height: 20px;
@@ -261,7 +248,7 @@ label[for='toggle-all'] {
 	border-top: 1px solid #e6e6e6;
 }
 
-#footer:before {
+.footer:before {
 	content: '';
 	position: absolute;
 	right: 0;
@@ -276,16 +263,16 @@ label[for='toggle-all'] {
 	            0 17px 2px -6px rgba(0, 0, 0, 0.2);
 }
 
-#todo-count {
+.todo-count {
 	float: left;
 	text-align: left;
 }
 
-#todo-count strong {
+.todo-count strong {
 	font-weight: 300;
 }
 
-#filters {
+.filters {
 	margin: 0;
 	padding: 0;
 	list-style: none;
@@ -294,11 +281,11 @@ label[for='toggle-all'] {
 	left: 0;
 }
 
-#filters li {
+.filters li {
 	display: inline;
 }
 
-#filters li a {
+.filters li a {
 	color: inherit;
 	margin: 3px;
 	padding: 3px 7px;
@@ -307,39 +294,28 @@ label[for='toggle-all'] {
 	border-radius: 3px;
 }
 
-#filters li a.selected,
-#filters li a:hover {
+.filters li a:hover {
 	border-color: rgba(175, 47, 47, 0.1);
 }
 
-#filters li a.selected {
+.filters li a.selected {
 	border-color: rgba(175, 47, 47, 0.2);
 }
 
-#clear-completed,
-html #clear-completed:active {
+.clear-completed,
+html .clear-completed:active {
 	float: right;
 	position: relative;
 	line-height: 20px;
 	text-decoration: none;
 	cursor: pointer;
-	visibility: hidden;
-	position: relative;
-}
-
-#clear-completed::after {
-	visibility: visible;
-	content: 'Clear completed';
-	position: absolute;
-	right: 0;
-	white-space: nowrap;
 }
 
-#clear-completed:hover::after {
+.clear-completed:hover {
 	text-decoration: underline;
 }
 
-#info {
+.info {
 	margin: 65px auto 0;
 	color: #bfbfbf;
 	font-size: 10px;
@@ -347,17 +323,17 @@ html #clear-completed:active {
 	text-align: center;
 }
 
-#info p {
+.info p {
 	line-height: 1;
 }
 
-#info a {
+.info a {
 	color: inherit;
 	text-decoration: none;
 	font-weight: 400;
 }
 
-#info a:hover {
+.info a:hover {
 	text-decoration: underline;
 }
 
@@ -366,16 +342,16 @@ html #clear-completed:active {
 	Can't use it globally since it destroys checkboxes in Firefox
 */
 @media screen and (-webkit-min-device-pixel-ratio:0) {
-	#toggle-all,
-	#todo-list li .toggle {
+	.toggle-all,
+	.todo-list li .toggle {
 		background: none;
 	}
 
-	#todo-list li .toggle {
+	.todo-list li .toggle {
 		height: 40px;
 	}
 
-	#toggle-all {
+	.toggle-all {
 		-webkit-transform: rotate(90deg);
 		transform: rotate(90deg);
 		-webkit-appearance: none;
@@ -384,11 +360,11 @@ html #clear-completed:active {
 }
 
 @media (max-width: 430px) {
-	#footer {
+	.footer {
 		height: 50px;
 	}
 
-	#filters {
+	.filters {
 		bottom: 10px;
 	}
 }

examples/elm/node_modules/todomvc-common/base.js

@@ -114,7 +114,12 @@
 	})({});
 
 	if (location.hostname === 'todomvc.com') {
-		window._gaq = [['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
+		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+		})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+		ga('create', 'UA-31081062-1', 'auto');
+		ga('send', 'pageview');
 	}
 	/* jshint ignore:end */
 
@@ -228,7 +233,7 @@
 			xhr.onload = function (e) {
 				var parsedResponse = JSON.parse(e.target.responseText);
 				if (parsedResponse instanceof Array) {
-					var count = parsedResponse.length
+					var count = parsedResponse.length;
 					if (count !== 0) {
 						issueLink.innerHTML = 'This app has ' + count + ' open issues';
 						document.getElementById('issue-count').style.display = 'inline';

examples/elm/package.json

 {
   "private": true,
   "dependencies": {
-    "todomvc-app-css": "^1.0.0",
-    "todomvc-common": "^1.0.1"
+    "todomvc-app-css": "^2.0.6",
+    "todomvc-common": "^1.0.2"
   }
 }

examples/elm/readme.md

 # Elm TodoMVC Example
 
-> A functional reactive language for interactive applications
+> A functional language for interactive applications
 
 > _[Elm](http://elm-lang.org/)_
 
@@ -14,7 +14,7 @@ Here are some links you may find helpful:
 
 * [Try Elm](http://elm-lang.org/try)
 * [Learn Elm](http://elm-lang.org/Learn.elm)
-* [Elm Snippets](http://www.share-elm.com/)
+* [An Introduction to Elm](http://guide.elm-lang.org/)
 
 Get help from other Elm users:
 
@@ -28,25 +28,25 @@ _If you have other helpful links to share, or find any of the links above no lon
 
 ## Project Structure
 
-All of the Elm code lives in `Todo.elm` and `Task.elm` and relies
-on the [elm-html][] library.
+All of the Elm code lives in `Todo.elm` and `Todo/Task.elm` and relies
+on the [elm-html][] and [elm-navigation][] packages.
 
-[elm-html]: http://library.elm-lang.org/catalog/evancz-elm-html/latest
+[elm-html]: http://package.elm-lang.org/packages/elm-lang/html/latest/
+[elm-navigation]: http://package.elm-lang.org/packages/elm-lang/navigation/latest/
 
 There also is a port handler set up in `index.html` to set the focus on
 particular text fields when necessary.
 
 ## Build Instructions
 
-You need to install
-[elm](https://github.com/elm-lang/elm-platform/blob/master/README.md#elm-platform)
+You need to install [elm](http://elm-lang.org/install)
 on your machine first.
 
 Run the following commands from the root of this project:
 
 ```bash
-elm-package install
-elm-make Todo.elm --output build/Todo.js
+elm-package install -y
+elm-make Todo.elm --output build/elm.js
 ```
 
 Then open `index.html` in your browser!