More performant DOM updates · 1Marc/modern-todomvc-vanillajs@fc89da1 (original) (raw)
`@@ -5,7 +5,7 @@ export const TodoStore = class extends EventTarget {
`
5
5
`this._readStorage();
`
6
6
`// handle todos edited in another window
`
7
7
`window.addEventListener(
`
8
``
`-
"storage",
`
``
8
`+
'storage',
`
9
9
`() => {
`
10
10
`this._readStorage();
`
11
11
`this._save();
`
`@@ -17,50 +17,53 @@ export const TodoStore = class extends EventTarget {
`
17
17
`this.isAllCompleted = () => this.todos.every((todo) => todo.completed);
`
18
18
`this.hasCompleted = () => this.todos.some((todo) => todo.completed);
`
19
19
`this.all = (filter) =>
`
20
``
`-
filter === "active"
`
``
20
`+
filter === 'active'
`
21
21
` ? this.todos.filter((todo) => !todo.completed)
`
22
``
`-
: filter === "completed"
`
``
22
`+
: filter === 'completed'
`
23
23
` ? this.todos.filter((todo) => todo.completed)
`
24
24
` : this.todos;
`
25
25
`}
`
26
26
`_readStorage() {
`
27
``
`-
this.todos = JSON.parse(
`
28
``
`-
window.localStorage.getItem(this.localStorageKey) || "[]"
`
29
``
`-
);
`
``
27
`+
this.todos = JSON.parse(window.localStorage.getItem(this.localStorageKey) || '[]');
`
30
28
`}
`
31
``
`-
_save() {
`
32
``
`-
window.localStorage.setItem(
`
33
``
`-
this.localStorageKey,
`
34
``
`-
JSON.stringify(this.todos)
`
35
``
`-
);
`
36
``
`-
this.dispatchEvent(new CustomEvent("save"));
`
``
29
`+
_save(event, data) {
`
``
30
`+
console.log('firing', event, data);
`
``
31
`+
window.localStorage.setItem(this.localStorageKey, JSON.stringify(this.todos));
`
``
32
`+
console.log(event ? event : 'save', data ? { detail: data } : '');
`
``
33
`+
this.dispatchEvent(new CustomEvent(event ? event : 'save', data ? { detail: data } : null));
`
37
34
`}
`
38
35
`// MUTATE methods
`
39
36
`add(todo) {
`
40
``
`-
this.todos.push({
`
``
37
`+
let newTodo = {
`
41
38
`title: todo.title,
`
42
39
`completed: false,
`
43
``
`-
id: "id_" + Date.now(),
`
44
``
`-
});
`
45
``
`-
this._save();
`
``
40
`+
id: 'id_' + Date.now(),
`
``
41
`+
};
`
``
42
`+
this.todos.push(newTodo);
`
``
43
`+
this._save('add', newTodo);
`
46
44
`}
`
47
45
`remove({ id }) {
`
48
46
`this.todos = this.todos.filter((todo) => todo.id !== id);
`
49
``
`-
this._save();
`
``
47
`+
this._save('remove', id);
`
50
48
`}
`
51
49
`toggle({ id }) {
`
52
``
`-
this.todos = this.todos.map((todo) =>
`
53
``
`-
todo.id === id ? { ...todo, completed: !todo.completed } : todo
`
``
50
`+
this.todos = this.todos.map((todo) => (todo.id === id ? { ...todo, completed: !todo.completed } : todo));
`
``
51
`+
this._save(
`
``
52
`+
'toggle',
`
``
53
`+
this.todos.find((todo) => id === todo.id)
`
54
54
`);
`
55
``
`-
this._save();
`
56
55
`}
`
57
56
`clearCompleted() {
`
``
57
`+
let cleared = this.todos.filter((todo) => todo.completed);
`
58
58
`this.todos = this.todos.filter((todo) => !todo.completed);
`
59
``
`-
this._save();
`
``
59
`+
this._save('clear', cleared);
`
60
60
`}
`
61
61
`update(todo) {
`
62
62
`this.todos = this.todos.map((t) => (t.id === todo.id ? todo : t));
`
63
``
`-
this._save();
`
``
63
`+
this._save(
`
``
64
`+
'update',
`
``
65
`+
this.todos.find((todo) => id === todo.id)
`
``
66
`+
);
`
64
67
`}
`
65
68
`toggleAll() {
`
66
69
`const completed = !this.hasCompleted() || !this.isAllCompleted();
`