Merge pull request #53 from whiteinge/morphdom

Add Morphdom
mathieuancelin · Apr 18, 2016 · c8abdde · c8abdde
2 parents c88eb60 + 9f82831
commit c8abdde
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 0 deletions.
diff --git a/lib/morphdom-umd.min.js b/lib/morphdom-umd.min.js
diff --git a/library-list.js b/library-list.js
@@ -46,6 +46,7 @@
     { type: 'optimized', id: 'vue', url: './vue/opt.html', label: 'DBMON Vue.js' },
     { type: 'optimized', id: 'rotorjs', url: './rotorjs/with_thunks.html', label: 'DBMON RotorJS (with using VnodeImmutableThunk)' },
     { type: 'naive', id: 'd3', url: './d3/index.html', label: 'DBMON D3' },
+    { type: 'naive', id: 'morphdom', url: './morphdom/index.html', label: 'DBMON Morphdom' },
   ];
 
   function Library() {

diff --git a/morphdom/app.js b/morphdom/app.js
@@ -0,0 +1,36 @@
+var render = function () {
+
+    var databases = ENV.generateData().toArray();
+
+    var html = '<div><table class="table table-striped latest-data"><tbody>';
+    for (var index = 0; index < databases.length; index++) {
+        var db = databases[index];
+        html += '<tr><td class="dbname">' + db.dbname + '</td>';
+        html += '<td class="query-count">';
+        html += '<span class="' + db.lastSample.countClassName + '">' + db.lastSample.nbQueries + '</span></td>';
+
+        for (var indexQ = 0; indexQ < db.lastSample.topFiveQueries.length; indexQ++) {
+            var q = db.lastSample.topFiveQueries[indexQ];
+            html += '<td class="' + q.elapsedClassName + '">';
+            html +=     q.formatElapsed || '';
+            html +=     '<div class="popover left">';
+            html +=         '<div class="popover-content">';
+            html +=             q.query || '';
+            html +=         '</div>';
+            html +=         '<div class="arrow"></div>';
+            html +=     '</div>';
+            html += '</td>';
+        }
+        html += '</tr>';
+    }
+
+    html += '</tbody></table></div>';
+
+    var el = document.getElementById("app");
+    morphdom(el, html, {childrenOnly: true});
+
+    Monitoring.renderRate.ping();
+    setTimeout(render, ENV.timeout);
+};
+
+render();
diff --git a/morphdom/index.html b/morphdom/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="description" content="DBMON NOT REACT" />
+<link href="../lib/bootstrap.min.css" rel="stylesheet" type="text/css" />
+<link href="../styles.css" rel="stylesheet" type="text/css" />
+<title>dbmon</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="../ENV.js"></script>
+  <script src="../lib/memory-stats.js"></script>
+  <script src="../lib/monitor.js"></script>
+  <script src="../lib/morphdom-umd.min.js"></script>
+  <script src="./app.js"></script>
+  <script src="../ga.js"></script>
+</body>
+</html>
diff --git a/readme.md b/readme.md
@@ -34,6 +34,7 @@ You can test it at http://mathieuancelin.github.io/js-repaint-perfs/
 * [domvm](https://github.com/leeoniya/domvm)
 * [once](https://github.com/utilise/utilise#--once)
 * [Ripple](https://github.com/pemrouz/ripple)
+* [Morphdom](https://github.com/patrick-steele-idem/morphdom)
 
 ## Todo