-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
72 lines (59 loc) · 1.85 KB
/
app.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
'use strict'
require('../node_modules/todomvc-common/base.css')
require('../node_modules/todomvc-app-css/index.css')
const is = require('check-more-types')
const tinyToast = require('tiny-toast')
const diff = require('virtual-dom/diff')
const patch = require('virtual-dom/patch')
const appNode = document.getElementById('app')
var renderedNode = appNode.firstElementChild
const VNode = require('virtual-dom/vnode/vnode')
const VText = require('virtual-dom/vnode/vtext')
const convertHTML = require('html-to-vdom')({
VNode: VNode,
VText: VText
})
const render = require('virtual-todos')
var prevView = convertHTML(renderedNode.outerHTML)
const Todos = require('todomvc-model')
/* global localStorage */
const appLabel = 'hydrate-vdom-todo'
const todosStorageLabel = appLabel + '-todo-items'
var updatedTodos = localStorage.getItem(todosStorageLabel)
if (updatedTodos) {
updatedTodos = JSON.parse(updatedTodos)
Todos.items = updatedTodos
console.log('set todos to local storage value with %d items',
updatedTodos.length)
} else {
console.log('No previous todo items found, using initial')
Todos.items = require('./data.json')
}
function saveApp () {
localStorage.setItem(todosStorageLabel, JSON.stringify(Todos.items))
}
// add rendering call after data methods
// also save items
Object.keys(Todos).forEach(function (key) {
const value = Todos[key]
if (is.fn(value)) {
Todos[key] = function () {
const result = value.apply(Todos, arguments)
saveApp()
renderApp()
return result
}
}
})
function renderApp () {
console.log('rendering %d todos', Todos.items.length)
const view = render(Todos)
const patches = diff(prevView, view)
renderedNode = patch(renderedNode, patches)
prevView = view
}
console.log('initial render')
renderApp()
tinyToast.show('Rendered web app')
tinyToast.hide(2000)
window.renderApp = renderApp