refactor(todoapp): Refactor to plain ES module

source/use-case/todoapp/.esmrc

@@ -0,0 +1 @@
+{"cjs":true,"esm":"js"}

source/use-case/todoapp/index.html

@@ -13,6 +13,6 @@
         <!-- TODO LIST -->
     </div>
 </div>
-<script src="./build.js"></script>
+<script src="./src/index.js" type="module"></script>
 </body>
 </html>

source/use-case/todoapp/package.json

@@ -10,9 +10,7 @@
     "test": "test"
   },
   "scripts": {
-    "build": "browserify src/index.js -o build.js",
-    "watch": "watchify -d src/index.js -o build.js",
-    "test": "mocha"
+    "test": "mocha test/"
   },
   "browserify": {
     "transform": [
@@ -24,13 +22,7 @@
     "es6"
   ],
   "devDependencies": {
-    "babel-cli": "^6.5.1",
-    "babel-plugin-add-module-exports": "^0.1.2",
-    "babel-preset-es2015": "^6.5.0",
-    "babel-register": "^6.9.0",
-    "babelify": "^7.2.0",
-    "browserify": "^13.0.0",
-    "mocha": "^2.5.3",
-    "watchify": "^3.7.0"
+    "@std/esm": "^0.20.0",
+    "mocha": "^2.5.3"
   }
 }

source/use-case/todoapp/src/EventEmitter.js

@@ -1,9 +1,10 @@
 // LICENSE : MIT
 "use strict";
+
 /*
-    Simple EventEmitter
+ *  Simple EventEmitter
  */
-export default class EventEmitter {
+export class EventEmitter {
     constructor() {
         this._handlers = {};
     }

source/use-case/todoapp/src/index.js

@@ -1,7 +1,8 @@
 // LICENSE : MIT
 "use strict";
-import { TodoListModel } from "./models/TodoListModel";
-import TodoListRendering from "./views/TodoListRendering";
+import { TodoListModel } from "./models/TodoListModel.js";
+import { TodoListRendering } from "./views/TodoListRendering.js";
+
 // Entry Point
 function onLoad() {
     // add event to DOM elements
@@ -30,10 +31,12 @@ function onLoad() {
 
     const unbindHandler = todoListModel.onChange(() => {
         const todoItemList = todoListModel.getAllTodoList();
-        console.log("changed", todoItemList);
         rendering.render(todoItemList, {
             toggleComplete
         });
     });
+
+    window.addEventListener("unload", unbindHandler);
 }
-window.addEventListener("load", onLoad);
+
+window.addEventListener("load", onLoad);

source/use-case/todoapp/src/models/TodoListModel.js

@@ -1,8 +1,9 @@
 // LICENSE : MIT
 "use strict";
-import EventEmitter from "./../EventEmitter";
+import { EventEmitter } from "../EventEmitter.js";
 // unique id
 let todoIdx = 0;
+
 export class TodoItemModel {
     constructor({ title, completed = false } = {}) {
         this.id = todoIdx++;
@@ -14,6 +15,7 @@ export class TodoItemModel {
         return this.completed;
     }
 }
+
 // model
 export class TodoListModel extends EventEmitter {
     constructor(todoList = []) {
@@ -47,4 +49,4 @@ export class TodoListModel extends EventEmitter {
         // emit change
         this.emit("change");
     }
-}
+}

source/use-case/todoapp/src/views/TodoListRendering.js

@@ -1,7 +1,6 @@
-// LICENSE : MIT
 "use strict";
-// rendering
-export default class TodoListRendering {
+// Rendering Todo List
+export class TodoListRendering {
     constructor(containerNode) {
         this.containerNode = containerNode;
     }
@@ -37,4 +36,4 @@ export default class TodoListRendering {
         // render
         this.containerNode.appendChild(orderListTag);
     }
-}
+}

source/use-case/todoapp/test/EventEmitter-test.js

@@ -1,7 +1,8 @@
 // LICENSE : MIT
 "use strict";
 const assert = require("assert");
-import EventEmitter from "../src/EventEmitter";
+import { EventEmitter } from "../src/EventEmitter.js";
+
 describe("EventEmitter", function() {
     let emitter;
     beforeEach(function() {
@@ -40,4 +41,4 @@ describe("EventEmitter", function() {
             emitter.emit(key);
         });
     });
-});
+});

source/use-case/todoapp/test/mocha.opts

@@ -1 +1 @@
---compilers js:babel-register
+--require @std/esm