OO-ize DOM builder, improve performance (part 1), add benchmarking suite
This commit is contained in:
impinball
parent
c202c04631
commit
a7b2294c11
22 changed files with 1953 additions and 813 deletions
6
bench/app/.gitignore
vendored
Normal file
6
bench/app/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
node_modules/todomvc-app-css/*
|
||||
!node_modules/todomvc-app-css/index.css
|
||||
|
||||
node_modules/todomvc-common/*
|
||||
!node_modules/todomvc-common/base.js
|
||||
!node_modules/todomvc-common/base.css
|
||||
26
bench/app/index.html
Normal file
26
bench/app/index.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<html lang="en" data-framework="mithril">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Mithril • TodoMVC</title>
|
||||
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
|
||||
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
|
||||
</head>
|
||||
<body>
|
||||
<section id="todoapp"></section>
|
||||
<footer id="info">
|
||||
<p>Double-click to edit a todo</p>
|
||||
<p>Created by <a href="http://taylorhakes.com">Taylor Hakes</a> and <a href="http://blogue.jpmonette.net">Jean-Philippe Monette</a> <br>(Special thanks to <a
|
||||
href="https://github.com/lhorie/">Leo Horie</a>)</p>
|
||||
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
|
||||
</footer>
|
||||
<script src="node_modules/todomvc-common/base.js"></script>
|
||||
<script src="../../mithril.js"></script>
|
||||
<script src="js/models/todo.js"></script>
|
||||
<script src="js/models/storage.js"></script>
|
||||
<script src="js/controllers/todo.js"></script>
|
||||
<script src="js/views/main-view.js"></script>
|
||||
<script src="js/views/footer-view.js"></script>
|
||||
<script src="js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
13
bench/app/js/app.js
Normal file
13
bench/app/js/app.js
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
/* global m */
|
||||
(function (app) {
|
||||
"use strict"
|
||||
|
||||
app.ENTER_KEY = 13
|
||||
app.ESC_KEY = 27
|
||||
|
||||
m.route.mode = "hash"
|
||||
m.route(document.getElementById("todoapp"), "/", {
|
||||
"/": app,
|
||||
"/:filter": app
|
||||
})
|
||||
})(this.app || (this.app = {}))
|
||||
111
bench/app/js/controllers/todo.js
Normal file
111
bench/app/js/controllers/todo.js
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
/* global m */
|
||||
(function (app) {
|
||||
"use strict"
|
||||
|
||||
app.controller = function () {
|
||||
/* eslint-disable no-warning-comments */
|
||||
// Todo collection, update with props
|
||||
/* eslint-enable no-warning-comments */
|
||||
this.list = app.storage.get().map(function (item) {
|
||||
return new app.Todo(item)
|
||||
})
|
||||
|
||||
// Temp title placeholder
|
||||
this.title = m.prop("")
|
||||
|
||||
/* eslint-disable no-warning-comments */
|
||||
// Todo list filter
|
||||
/* eslint-enable no-warning-comments */
|
||||
this.filter = m.prop(m.route.param("filter") || "")
|
||||
|
||||
this.add = function () {
|
||||
var title = this.title().trim()
|
||||
if (title) {
|
||||
this.list.push(new app.Todo({title: title}))
|
||||
app.storage.put(this.list)
|
||||
}
|
||||
this.title("")
|
||||
}
|
||||
|
||||
this.isVisible = function (todo) {
|
||||
switch (this.filter()) {
|
||||
case "active": return !todo.completed()
|
||||
case "completed": return todo.completed()
|
||||
default: return true
|
||||
}
|
||||
}
|
||||
|
||||
this.complete = function (todo) {
|
||||
if (todo.completed()) {
|
||||
todo.completed(false)
|
||||
} else {
|
||||
todo.completed(true)
|
||||
}
|
||||
app.storage.put(this.list)
|
||||
}
|
||||
|
||||
this.edit = function (todo) {
|
||||
todo.previousTitle = todo.title()
|
||||
todo.editing(true)
|
||||
}
|
||||
|
||||
this.doneEditing = function (todo, index) {
|
||||
todo.editing(false)
|
||||
todo.title(todo.title().trim())
|
||||
if (!todo.title()) {
|
||||
this.list.splice(index, 1)
|
||||
}
|
||||
app.storage.put(this.list)
|
||||
}
|
||||
|
||||
this.cancelEditing = function (todo) {
|
||||
todo.title(todo.previousTitle)
|
||||
todo.editing(false)
|
||||
}
|
||||
|
||||
this.clearTitle = function () {
|
||||
this.title("")
|
||||
}
|
||||
|
||||
this.remove = function (key) {
|
||||
this.list.splice(key, 1)
|
||||
app.storage.put(this.list)
|
||||
}
|
||||
|
||||
this.clearCompleted = function () {
|
||||
for (var i = this.list.length - 1; i >= 0; i--) {
|
||||
if (this.list[i].completed()) {
|
||||
this.list.splice(i, 1)
|
||||
}
|
||||
}
|
||||
app.storage.put(this.list)
|
||||
}
|
||||
|
||||
this.amountCompleted = function () {
|
||||
var amount = 0
|
||||
for (var i = 0; i < this.list.length; i++) {
|
||||
if (this.list[i].completed()) {
|
||||
amount++
|
||||
}
|
||||
}
|
||||
return amount
|
||||
}
|
||||
|
||||
this.allCompleted = function () {
|
||||
for (var i = 0; i < this.list.length; i++) {
|
||||
if (!this.list[i].completed()) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
this.completeAll = function () {
|
||||
var allCompleted = this.allCompleted()
|
||||
for (var i = 0; i < this.list.length; i++) {
|
||||
this.list[i].completed(!allCompleted)
|
||||
}
|
||||
app.storage.put(this.list)
|
||||
}
|
||||
}
|
||||
})(this.app || (this.app = {}))
|
||||
14
bench/app/js/models/storage.js
Normal file
14
bench/app/js/models/storage.js
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
(function (app) {
|
||||
"use strict"
|
||||
|
||||
var STORAGE_ID = "todos-mithril"
|
||||
|
||||
app.storage = {
|
||||
get: function () {
|
||||
return JSON.parse(localStorage.getItem(STORAGE_ID) || "[]")
|
||||
},
|
||||
put: function (todos) {
|
||||
localStorage.setItem(STORAGE_ID, JSON.stringify(todos))
|
||||
}
|
||||
}
|
||||
})(this.app || (this.app = {}))
|
||||
12
bench/app/js/models/todo.js
Normal file
12
bench/app/js/models/todo.js
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
/* global m */
|
||||
|
||||
(function (app) {
|
||||
"use strict"
|
||||
|
||||
// Todo Model
|
||||
app.Todo = function (data) {
|
||||
this.title = m.prop(data.title)
|
||||
this.completed = m.prop(data.completed || false)
|
||||
this.editing = m.prop(data.editing || false)
|
||||
}
|
||||
})(this.app || (this.app = {}))
|
||||
40
bench/app/js/views/footer-view.js
Normal file
40
bench/app/js/views/footer-view.js
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
/* global m */
|
||||
(function (app) {
|
||||
"use strict"
|
||||
|
||||
var filter = {
|
||||
view: function (_, ctrl, expected, name, href) {
|
||||
return m("li", [
|
||||
m("a", {
|
||||
href: href,
|
||||
config: m.route,
|
||||
class: ctrl.filter() === expected ? "selected" : ""
|
||||
}, name)
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
app.footer = {
|
||||
view: function (_, ctrl) {
|
||||
var amountCompleted = ctrl.amountCompleted()
|
||||
var amountActive = ctrl.list.length - amountCompleted
|
||||
|
||||
return m("footer#footer", [
|
||||
m("span#todo-count", [
|
||||
m("strong", amountActive), " item" +
|
||||
(amountActive !== 1 ? "s" : "") + " left"
|
||||
]),
|
||||
m("ul#filters", [
|
||||
m(filter, ctrl, "", "All", "/"),
|
||||
m(filter, ctrl, "active", "Active", "/active"),
|
||||
m(filter, ctrl, "completed", "Completed", "/completed")
|
||||
]),
|
||||
ctrl.amountCompleted() ? m("button#clear-completed", {
|
||||
onclick: function () {
|
||||
ctrl.clearCompleted()
|
||||
}
|
||||
}, "Clear completed") : null
|
||||
])
|
||||
}
|
||||
}
|
||||
})(this.app || (this.app = {}))
|
||||
119
bench/app/js/views/main-view.js
Normal file
119
bench/app/js/views/main-view.js
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
/* global m */
|
||||
(function (app) {
|
||||
"use strict"
|
||||
|
||||
// View utility
|
||||
app.watchInput = function (onenter, onescape) {
|
||||
return function (e) {
|
||||
if (e.keyCode === app.ENTER_KEY) {
|
||||
onenter()
|
||||
} else if (e.keyCode === app.ESC_KEY) {
|
||||
onescape()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var header = {
|
||||
controller: function () {
|
||||
this.focused = false
|
||||
},
|
||||
|
||||
view: function (ctrl, parentCtrl) {
|
||||
return m("header#header", [
|
||||
m("h1", "todos"),
|
||||
m('input#new-todo[placeholder="What needs to be done?"]', {
|
||||
onkeyup: app.watchInput(
|
||||
function () {
|
||||
parentCtrl.add()
|
||||
},
|
||||
function () {
|
||||
parentCtrl.clearTitle()
|
||||
}),
|
||||
value: parentCtrl.title(),
|
||||
oninput: m.withAttr("value", parentCtrl.title),
|
||||
config: function (element) {
|
||||
if (!ctrl.focused) {
|
||||
element.focus()
|
||||
ctrl.focused = true
|
||||
}
|
||||
}
|
||||
})
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
var todo = {
|
||||
view: function (_, parentCtrl, task, index) {
|
||||
return m("li", {
|
||||
class: (task.completed() ? "completed" : "") +
|
||||
(task.editing() ? " editing" : "")
|
||||
}, [
|
||||
m(".view", [
|
||||
m("input.toggle[type=checkbox]", {
|
||||
onclick: m.withAttr("checked", function () {
|
||||
parentCtrl.complete(task)
|
||||
}),
|
||||
checked: task.completed()
|
||||
}),
|
||||
m("label", {
|
||||
ondblclick: function () {
|
||||
parentCtrl.edit(task)
|
||||
}
|
||||
}, task.title()),
|
||||
m("button.destroy", {
|
||||
onclick: function () {
|
||||
parentCtrl.remove(index)
|
||||
}
|
||||
})
|
||||
]),
|
||||
m("input.edit", {
|
||||
value: task.title(),
|
||||
onkeyup: app.watchInput(
|
||||
function () {
|
||||
parentCtrl.doneEditing(task, index)
|
||||
},
|
||||
function () {
|
||||
parentCtrl.cancelEditing(task)
|
||||
}),
|
||||
oninput: m.withAttr("value", task.title),
|
||||
config: function (element) {
|
||||
if (task.editing()) {
|
||||
element.focus()
|
||||
element.selectionStart =
|
||||
element.value.length
|
||||
}
|
||||
},
|
||||
onblur: function () {
|
||||
parentCtrl.doneEditing(task, index)
|
||||
}
|
||||
})
|
||||
])
|
||||
}
|
||||
}
|
||||
|
||||
app.view = function (ctrl) {
|
||||
return m("div", [
|
||||
m(header, ctrl),
|
||||
m("section#main", {
|
||||
style: {
|
||||
display: ctrl.list.length ? "" : "none"
|
||||
}
|
||||
}, [
|
||||
m("input#toggle-all[type=checkbox]", {
|
||||
onclick: ctrl.completeAll.bind(ctrl),
|
||||
checked: ctrl.allCompleted()
|
||||
}),
|
||||
m("ul#todo-list", [
|
||||
ctrl.list
|
||||
.filter(function () {
|
||||
return ctrl.isVisible()
|
||||
})
|
||||
.map(function (task, index) {
|
||||
return m(todo, ctrl, task, index)
|
||||
})
|
||||
])
|
||||
]),
|
||||
ctrl.list.length === 0 ? "" : m(app.footer, ctrl)
|
||||
])
|
||||
}
|
||||
})(this.app || (this.app = {}))
|
||||
7
bench/app/package.json
Normal file
7
bench/app/package.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"todomvc-common": "^1.0.1",
|
||||
"todomvc-app-css": "^1.0.1"
|
||||
}
|
||||
}
|
||||
18
bench/app/readme.md
Normal file
18
bench/app/readme.md
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
# Mithril TodoMVC Example
|
||||
|
||||
> [Mithril](http://lhorie.github.io/mithril/) is a client-side MVC framework - a tool to organize code in a way that is easy to think about and to maintain.
|
||||
|
||||
> _[Mithril - lhorie.github.io/mithril/](http://lhorie.github.io/mithril/)_
|
||||
|
||||
## Learning Mithril
|
||||
|
||||
The [Mithril website](http://lhorie.github.io/mithril/getting-started.html) is a great resource for getting started.
|
||||
|
||||
Here are some links you may find helpful:
|
||||
|
||||
* [Official Documentation](http://lhorie.github.io/mithril/mithril.html)
|
||||
|
||||
_If you have other helpful links to share, or find any of the links above no longer work, please [let us know](https://github.com/tastejs/todomvc/issues)._
|
||||
|
||||
## Credit
|
||||
This TodoMVC application was created by [taylorhakes](https://github.com/taylorhakes).
|
||||
Loading…
Add table
Add a link
Reference in a new issue