Add naive version of vidom implementation

mathieuancelin · Jun 14, 2016 · 7862771 · 7862771
1 parent 2dee66c
commit 7862771
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 1 deletion.
diff --git a/lib/vidom.min.js b/lib/vidom.min.js
diff --git a/library-list.js b/library-list.js
@@ -54,7 +54,8 @@
     { type: 'naive', id: 're-frame', url: './re-frame/index.html', label: 're-frame (Reagent)' },
     { type: 'naive', id: 'd3', url: './d3/index.html', label: 'DBMON D3' },
     { type: 'naive', id: 'morphdom', url: './morphdom/index.html', label: 'DBMON Morphdom' },
-    { type: 'optimized', id: 'frzr', url: './frzr/index.html', label: 'DBMON FRZR' }
+    { type: 'optimized', id: 'frzr', url: './frzr/index.html', label: 'DBMON FRZR' },
+    { type: 'naive', id: 'vidom', url: './vidom/index.html', label: 'DBMON vidom' }
   ];
 
   function Library() {

diff --git a/readme.md b/readme.md
@@ -36,6 +36,7 @@ You can test it at http://mathieuancelin.github.io/js-repaint-perfs/
 * [Ripple](https://github.com/pemrouz/ripple)
 * [Morphdom](https://github.com/patrick-steele-idem/morphdom)
 * [FRZR](https://frzr.js.org)
+* [Vidom](https://github.com/dfilatov/vidom)
 
 ## Todo
 

diff --git a/vidom/app.js b/vidom/app.js
@@ -0,0 +1,62 @@
+var node = vidom.node;
+
+var DBMon = vidom.createComponent({
+  onInit: function() {
+    this.loadSamples = this.loadSamples.bind(this);
+  },
+
+  onInitialStateRequest: function() {
+    return {
+      databases: []
+    };
+  },
+
+  loadSamples: function () {
+    this.setState({ databases: ENV.generateData().toArray() });
+    Monitoring.renderRate.ping();
+    setTimeout(this.loadSamples, ENV.timeout);
+  },
+
+  onMount: function() {
+    this.loadSamples();
+  },
+
+  onRender: function() {
+    return (
+      node('div').children([
+        node('table').attrs({ className: 'table table-striped latest-data' }).children([
+          node('tbody').children(this.getState().databases.map(function(database) {
+            var children = [
+              node('td').key('dbname').attrs({ className: 'dbname' }).children(database.dbname),
+              node('td').key('query-count').attrs({ className: 'query-count' }).children([
+                node('span')
+                  .attrs({ className: database.lastSample.countClassName })
+                  .children(database.lastSample.nbQueries)
+              ])];
+
+              database.lastSample.topFiveQueries.forEach(function(query, index) {
+                children.push(
+                  node('td')
+                    .key('top' + index)
+                    .attrs({ className: 'Query ' + query.elapsedClassName })
+                    .children([
+                      node('span').key('elapsed').children(query.formatElapsed),
+                      node('div')
+                        .key('content')
+                        .attrs({ className : 'popover left' })
+                        .children([
+                          node('div').key('content').attrs({ className: 'popover-content' }).children(query.query),
+                          node('div').key('arrow').attrs({ className: 'arrow' })
+                        ])
+                    ]));
+              });
+
+              return node('tr').key(database.dbname).children(children);
+            }))
+          ])
+        ])
+    );
+  }
+});
+
+vidom.mountToDom(document.getElementById('dbmon'), node(DBMon));
diff --git a/vidom/index.html b/vidom/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="description" content="DBMON VIDOM" />
+  <meta charset="utf-8">
+  <link href="../styles.css" rel="stylesheet" type="text/css" />
+  <title>dbmon (vidom)</title>
+</head>
+<body>
+  <div id="dbmon"></div>
+  <script src="../lib/jquery-2.1.0.min.js"></script>
+  <script src="../lib/vidom.min.js"></script>
+  <script src="../ENV.js"></script>
+  <script src="../lib/memory-stats.js"></script>
+  <script src="../lib/monitor.js"></script>
+  <script src="app.js"></script>
+  <script src="../ga.js"></script>
+</body>
+</html>