replace brunch with webpack

Author: bryanjos

config/dev.exs

@@ -11,7 +11,7 @@ config :todo, Todo.Endpoint,
   debug_errors: true,
   code_reloader: true,
   check_origin: false,
-  watchers: [node: ["node_modules/brunch/bin/brunch", "watch", "--stdin",
+  watchers: [npm: ["run", "watch",
                     cd: Path.expand("../", __DIR__)], mix: ["elixirscript.watch"]]
 
 

lib/todo/store.ex

@@ -1,28 +1,28 @@
 defmodule Todo.Store do
 
   def start_link() do
-    Agent.start_link(fn -> HashDict.new end, name: __MODULE__)
+    Agent.start_link(fn -> Map.new end, name: __MODULE__)
   end
 
   def list() do
     Agent.get(__MODULE__, fn(state) ->
-      Enum.map(Dict.to_list(state), fn({key, value}) ->
+      Enum.map(Map.to_list(state), fn({key, value}) ->
         value
       end)
     end)
   end
 
   def add(title) do
     Agent.update(__MODULE__, fn(state) ->
-      Dict.put(state, Set.size(state), %Todo.Models.Todo{ title: title, completed: false, id: Set.size(state) })
+      Map.put(state, Set.size(state), %Todo.Models.Todo{ title: title, completed: false, id: Set.size(state) })
     end)
   end
 
   def update(id, completed) do
     Agent.update(__MODULE__, fn(state) ->
-      if Dict.has_key?(state, id) do
-        updated_todo = %{ Dict.get(state, id) | completed: completed }
-        Dict.put(state, id, updated_todo)
+      if Map.has_key?(state, id) do
+        updated_todo = %{ Map.get(state, id) | completed: completed }
+        Map.put(state, id, updated_todo)
       else
         state
       end
@@ -31,8 +31,8 @@ defmodule Todo.Store do
 
   def remove(id) do
     Agent.update(__MODULE__, fn(state) ->
-      if Dict.has_key?(state, id) do
-        Dict.delete(state, id)
+      if Map.has_key?(state, id) do
+        Map.delete(state, id)
       else
         state
       end

package.json

@@ -2,22 +2,24 @@
   "repository": {},
   "license": "MIT",
   "scripts": {
-    "deploy": "brunch build --production",
-    "watch": "brunch watch --stdin"
+    "deploy": "webpack -p",
+    "watch": "webpack --watch-stdin --color"
   },
   "dependencies": {
     "phoenix": "file:deps/phoenix",
     "phoenix_html": "file:deps/phoenix_html"
   },
   "devDependencies": {
-    "babel-brunch": "~6.0.0",
-    "brunch": "2.10",
-    "clean-css-brunch": "~2.0.0",
-    "css-brunch": "~2.0.0",
-    "javascript-brunch": "~2.0.0",
-    "uglify-js-brunch": "~2.0.1",
+    "babel-core": "6.21.0 ",
     "babel-preset-env": "1.1.4",
     "react": "^15.4.0",
-    "react-dom": "^15.4.0"
+    "react-dom": "^15.4.0",
+    "babel-loader": "^6.2.10",
+    "css-loader": "^0.26.1",
+    "raw-loader": "^0.5.1",
+    "style-loader": "^0.13.1",
+    "webpack": "^2.2.0",
+    "copy-webpack-plugin": "^4.0.1",
+    "extract-text-webpack-plugin": "^2.0.0-beta.4"
   }
 }

web/static/exjs/data.ex

@@ -2,7 +2,9 @@ defmodule Todo.Data do
     def list() do
     :window.fetch("/api/todo").then(fn(response) ->
       response.json().then(fn(todos) ->
-        Main.update(todos)
+        todos
+        |> Enum.map(fn(x) -> %Todo.Models.Todo{ id: x.id, completed: x.completed, title: x.title } end)
+        |> Main.update()
       end)
     end).catch(fn(err) ->
       :console.debug(err)

web/static/exjs/main.ex

@@ -2,13 +2,13 @@ defmodule Main do
   require JS
   use ReactUI
 
-  defp process_event(%{"which" => 13} = event) do
-    Todo.Data.add(event.target.value)
-    JS.update(event.target, object(value: ""))
-  end
-
   defp process_event(%{} = event) do
-    :console.debug(event)
+    if event.which == 13 do
+      Todo.Data.add(event.target.value)
+      JS.update(event.target, object(value: ""))
+    else
+      :console.debug(event)
+    end
   end
 
   def initial_state() do
@@ -34,7 +34,7 @@ defmodule Main do
             id: "new-todo",
             placeholder: "What needs to be done?",
             autoFocus: true,
-            onKeyPress: fn(event) -> process_event(event) end
+            onKeyPress: fn(event, _) -> process_event(event) end
           ]
         end
         section id: "main" do
@@ -46,21 +46,21 @@ defmodule Main do
                 {"", ""}
               end
 
-              li data_id: todo.id, className: the_completed do
+              li key: todo.id, className: the_completed do
                 ReactUI.div className: "view" do
                   input [
                     className: "toggle",
                     type: "checkbox",
                     checked: todo.completed,
-                    onChange: fn(event) -> Todo.Data.update(event.target.parentElement.parentElement.data_id, event.target.checked) end
+                    onChange: fn(event) -> Todo.Data.update(todo.id, event.target.checked) end
                   ]
                   label do
                     todo.title
                   end
                   button [
                     className: "destroy",
-                    onClick: fn(event) ->
-                      Todo.Data.remove(event.target.parentElement.parentElement.data_id)
+                    onClick: fn(event, _) ->
+                      Todo.Data.remove(todo.id)
                     end
                   ]
                 end

webpack.config.js

@@ -0,0 +1,34 @@
+const path = require('path');
+const webpack = require('webpack');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+module.exports = {
+  devtool: 'source-map',
+  cache: true,
+  entry: [ './web/static/js/app.js', './web/static/css/app.css' ],
+  output: {
+    path: path.join(__dirname, 'priv', 'static'),
+    filename: 'js/app.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.jsx?$/,
+        exclude: /(node_modules|bower_components)/,
+        use: 'babel-loader',
+      },
+      {
+        test: [ /\.css$/ ],
+        loader: ExtractTextPlugin.extract({
+          fallbackLoader: 'style-loader',
+          loader: 'css-loader',
+        }),
+      },
+    ],
+  },
+  plugins: [
+    new CopyWebpackPlugin([ { from: './web/static/assets' } ]),
+    new ExtractTextPlugin('css/app.css'),
+  ],
+};