Add webpack integration

.gitignore

@@ -1,2 +1,3 @@
 elm-stuff
-elm.js
+node_modules
+dist

README.md

@@ -1,6 +1,6 @@
 # TodoMVC in Elm - [Try It!](http://evancz.github.io/elm-todomvc)
 
-All of the Elm code lives in `Todo.elm` and relies on the [elm-lang/html][html] library. 
+All of the Elm code lives in `src/` and relies on the [elm-lang/html][html] library. 
 
 [html]: http://package.elm-lang.org/packages/elm-lang/html/latest 
 
@@ -12,7 +12,15 @@ There also is a port handler set up in `index.html` to store the Elm application
 Run the following command from the root of this project:
 
 ```bash
-elm-make Todo.elm --output elm.js
+yarn build
 ```
 
-Then open `index.html` in your browser!
+## Build Instructions
+
+Run the following command from the root of this project:
+
+```bash
+yarn client
+```
+
+And then open localhost:3000 in your browser

elm-package.json

@@ -4,7 +4,7 @@
     "repository": "https://github.com/evancz/elm-todomvc.git",
     "license": "BSD3",
     "source-directories": [
-        "."
+        "src"
     ],
     "exposed-modules": [],
     "dependencies": {

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "TodoApp",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "build": "webpack",
+    "client": "webpack-dev-server --port 3000"
+  },
+  "dependencies": {
+    "css-loader": "^0.28.4",
+    "elm-webpack-loader": "^4.3.1",
+    "file-loader": "^0.11.2",
+    "style-loader": "^0.18.2",
+    "url-loader": "^0.5.9",
+    "webpack": "^3.3.0",
+    "webpack-dev-server": "^2.5.1"
+  }
+}

Todo.elm → src/Main.elm

@@ -1,4 +1,4 @@
-port module Todo exposing (..)
+port module TodoApp exposing (..)
 
 {-| TodoMVC implemented in Elm, using plain HTML and CSS for rendering.
 
@@ -12,6 +12,7 @@ This clean division of concerns is a core part of Elm. You can read more about
 this in <http://guide.elm-lang.org/architecture/index.html>
 -}
 
+import Model exposing (..)
 import Dom
 import Html exposing (..)
 import Html.Attributes exposing (..)
@@ -22,6 +23,7 @@ import Json.Decode as Json
 import Json.Encode as Encode
 import String
 import Task
+import Debug
 
 
 main : Program (Maybe Encode.Value) Model Msg
@@ -54,100 +56,6 @@ updateWithStorage msg model =
 
 -- MODEL
 
-type Visibility
-    = ShowAll 
-    | ShowCompleted
-    | ShowActive
-
--- The full application state of our todo app.
-type alias Model =
-    { entries : List Entry
-    , field : String
-    , uid : Int
-    , visibility : Visibility
-    }
-
-
-type alias Entry =
-    { description : String
-    , completed : Bool
-    , editing : Bool
-    , id : Int
-    }
-
--- Decoders
-modelDecoder : Json.Decoder Model
-modelDecoder =
-  Json.map4 Model
-    (Json.at ["entries"] (Json.list entryDecoder))
-    (Json.at ["field"] Json.string)
-    (Json.at ["uid"] Json.int)
-    (Json.at ["visibility"] Json.string |> Json.andThen visibilityDecoder)
-
-entryDecoder : Json.Decoder Entry
-entryDecoder =
-  Json.map4 Entry
-    (Json.at ["description"] Json.string)
-    (Json.at ["completed"] Json.bool)
-    (Json.at ["editing"] Json.bool)
-    (Json.at ["id"] Json.int)
-
-visibilityDecoder : String -> Json.Decoder Visibility
-visibilityDecoder tag =
-  case tag of
-    "ShowActive" -> Json.succeed ShowActive
-    "ShowAll" -> Json.succeed ShowAll
-    "ShowCompleted" -> Json.succeed ShowCompleted
-    _ -> Json.fail (tag ++ " is not a recognized tag for Visibility")
-
-
--- Encoders
-modelToValue : Model -> Encode.Value
-modelToValue model =
-  Encode.object
-    [
-      ("entries", Encode.list (List.map entryToValue model.entries)),
-      ("field", Encode.string model.field),
-      ("uid", Encode.int model.uid),
-      ("visibility", visibilityToValue model.visibility)
-    ]
-
-entryToValue : Entry -> Encode.Value
-entryToValue entry =
-  Encode.object
-    [
-      ("description", Encode.string entry.description),
-      ("completed", Encode.bool entry.completed),
-      ("editing", Encode.bool entry.editing),
-      ("id", Encode.int entry.id)
-    ]
-
-visibilityToValue : Visibility -> Encode.Value
-visibilityToValue visibility =
-  case visibility of
-    ShowActive -> Encode.string "ShowActive"
-    ShowAll -> Encode.string "ShowAll"
-    ShowCompleted -> Encode.string "ShowCompleted"
-
-
-emptyModel : Model
-emptyModel =
-    { entries = []
-    , visibility = ShowAll
-    , field = ""
-    , uid = 0
-    }
-
-
-newEntry : String -> Int -> Entry
-newEntry desc id =
-    { description = desc
-    , completed = False
-    , editing = False
-    , id = id
-    }
-
-
 init : Maybe Encode.Value -> ( Model, Cmd Msg )
 init savedModel =
     case savedModel of 

src/Model.elm

@@ -0,0 +1,123 @@
+module Model exposing (..)
+
+import Json.Decode as Json
+import Json.Encode as Encode
+
+
+type Visibility
+    = ShowAll
+    | ShowCompleted
+    | ShowActive
+
+
+
+-- The full application state of our todo app.
+
+
+type alias Model =
+    { entries : List Entry
+    , field : String
+    , uid : Int
+    , visibility : Visibility
+    }
+
+
+type alias Entry =
+    { description : String
+    , completed : Bool
+    , editing : Bool
+    , id : Int
+    }
+
+
+
+-- Decoders
+
+
+modelDecoder : Json.Decoder Model
+modelDecoder =
+    Json.map4 Model
+        (Json.at [ "entries" ] (Json.list entryDecoder))
+        (Json.at [ "field" ] Json.string)
+        (Json.at [ "uid" ] Json.int)
+        (Json.at [ "visibility" ] Json.string |> Json.andThen visibilityDecoder)
+
+
+entryDecoder : Json.Decoder Entry
+entryDecoder =
+    Json.map4 Entry
+        (Json.at [ "description" ] Json.string)
+        (Json.at [ "completed" ] Json.bool)
+        (Json.at [ "editing" ] Json.bool)
+        (Json.at [ "id" ] Json.int)
+
+
+visibilityDecoder : String -> Json.Decoder Visibility
+visibilityDecoder tag =
+    case tag of
+        "ShowActive" ->
+            Json.succeed ShowActive
+
+        "ShowAll" ->
+            Json.succeed ShowAll
+
+        "ShowCompleted" ->
+            Json.succeed ShowCompleted
+
+        _ ->
+            Json.fail (tag ++ " is not a recognized tag for Visibility")
+
+
+
+-- Encoders
+
+
+modelToValue : Model -> Encode.Value
+modelToValue model =
+    Encode.object
+        [ ( "entries", Encode.list (List.map entryToValue model.entries) )
+        , ( "field", Encode.string model.field )
+        , ( "uid", Encode.int model.uid )
+        , ( "visibility", visibilityToValue model.visibility )
+        ]
+
+
+entryToValue : Entry -> Encode.Value
+entryToValue entry =
+    Encode.object
+        [ ( "description", Encode.string entry.description )
+        , ( "completed", Encode.bool entry.completed )
+        , ( "editing", Encode.bool entry.editing )
+        , ( "id", Encode.int entry.id )
+        ]
+
+
+visibilityToValue : Visibility -> Encode.Value
+visibilityToValue visibility =
+    case visibility of
+        ShowActive ->
+            Encode.string "ShowActive"
+
+        ShowAll ->
+            Encode.string "ShowAll"
+
+        ShowCompleted ->
+            Encode.string "ShowCompleted"
+
+
+emptyModel : Model
+emptyModel =
+    { entries = []
+    , visibility = ShowAll
+    , field = ""
+    , uid = 0
+    }
+
+
+newEntry : String -> Int -> Entry
+newEntry desc id =
+    { description = desc
+    , completed = False
+    , editing = False
+    , id = id
+    }

src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE HTML>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>Elm • TodoMVC</title>
+</head>
+
+<body>
+  <div id="main"></div>
+  <script src="/app.js"></script>
+</body>
+</html>

src/index.js

@@ -0,0 +1,14 @@
+'use strict';
+require('./style.css');
+// Require index.html so it gets copied to dist
+require('./index.html');
+
+var Elm = require('./Main.elm');
+var mountNode = document.getElementById('main');
+
+var storedState = localStorage.getItem('elm-todo-save');
+var startingState = storedState ? JSON.parse(storedState) : null;
+var todomvc = Elm.TodoApp.embed(mountNode, startingState);
+todomvc.ports.setStorage.subscribe(function(state) {
+    localStorage.setItem('elm-todo-save', JSON.stringify(state));
+});