Add example real-dom

Author: aknuds1

README.md

@@ -58,6 +58,7 @@ hg.app(document.body, App(), App.render);
  - [bmi-counter](examples/bmi-counter.js)
  - [canvas](examples/canvas.js)
  - [async-state](examples/async-state.js)
+ - [real-dom](examples/real-dom.js)
 
 ### Intermediate Examples
 

bin/example-tasks.js

@@ -29,7 +29,8 @@ var examplesTasks = [
     browserifyEditorTask('shared-state'),
     browserifyEditorTask('count'),
     browserifyEditorTask('canvas'),
-    browserifyEditorTask('async-state')
+    browserifyEditorTask('async-state'),
+    browserifyEditorTask('real-dom')
 ];
 
 module.exports = examplesTasks;

examples/async-state.js

@@ -17,7 +17,7 @@ function App() {
 }
 
 App.render = function render(state) {
-    return h('div.counter', [
+    return h('div', [
         'The state has been updated asynchronously: ' + state.isUpdated
     ]);
 };

examples/real-dom.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var document = require('global/document');
+var hg = require('../index.js');
+var h = require('../index.js').h;
+var setTimeout = require('timers').setTimeout;
+
+function Hook() {}
+// Hook to be called when DOM node has been rendered
+Hook.prototype.hook = function hook(node) {
+    node.innerText = 'This is set directly on the real DOM node.';
+};
+// Hook to be called when DOM node is removed
+Hook.prototype.unhook = function unhook(node) {
+    node.innerText = 'Unhook hook called';
+};
+
+function App() {
+    var state = hg.state({
+        remove: hg.value(false)
+    });
+    setTimeout(function timer() {
+        state.remove.set(true);
+    }, 2000);
+    return state;
+}
+
+App.render = function App(state) {
+    return !state.remove ?
+        // Create virtual node with hook
+        h('div', {
+            hook: new Hook()
+        }) :
+        // Node without hook
+        h('div');
+};
+
+hg.app(document.body, App(), App.render);