getting-started-with-virtual-dom

shama · shama · commit 1814792f72da · 2015-05-17T22:01:05.000-07:00
diff --git a/getting-started-with-virtual-dom/index.js b/getting-started-with-virtual-dom/index.js
@@ -0,0 +1,36 @@
+// var div = document.createElement('div')
+// div.innerHTML = 'hello'
+// document.body.appendChild(div)
+
+var h = require('virtual-dom/h')
+var createElement = require('virtual-dom/create-element')
+var diff = require('virtual-dom/diff')
+var patch = require('virtual-dom/patch')
+
+var data = ['grizzly', 'polar', 'brown']
+
+function render (bears) {
+  bears = bears.map(function (bear) {
+    return h('li', bear)
+  })
+  bears.push(h('li', [
+    h('button', {
+      onclick: function (event) {
+        data.push('new bear')
+        update()
+      }
+    }, 'add bear')
+  ]))
+  return h('ul', bears)
+}
+
+var tree = render(data)
+var rootNode = createElement(tree)
+document.body.appendChild(rootNode)
+
+function update () {
+  var newTree = render(data)
+  var patches = diff(tree, newTree)
+  rootNode = patch(rootNode, patches)
+  tree = newTree
+}
diff --git a/getting-started-with-virtual-dom/package.json b/getting-started-with-virtual-dom/package.json
@@ -0,0 +1,17 @@
+{
+  "name": "getting-started-with-virtual-dom",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "dependencies": {
+    "virtual-dom": "^2.0.1"
+  },
+  "devDependencies": {
+    "budo": "^4.0.0"
+  },
+  "scripts": {
+    "start": "budo index.js --live"
+  },
+  "author": "Kyle Robinson Young <kyle@dontkry.com> (http://dontkry.com)",
+  "license": "MIT"
+}
