update domvm to v2, add domvm-optimized

mathieuancelin · Nov 1, 2016 · e5a5470 · e5a5470
1 parent d99db53
commit e5a5470
Show file tree

Hide file tree

Showing 7 changed files with 127 additions and 54 deletions.
diff --git a/domvm-optimized/app.js b/domvm-optimized/app.js
@@ -0,0 +1,56 @@
+$(function() {
+  var h = (tag, arg1, arg2) => domvm.defineElement(tag, arg1, arg2, domvm.FIXED_BODY),
+      v = domvm.defineView;
+
+  function DBMonView() {
+    return (vm, dbs) =>
+      h("div", [
+        h("table.table.table-striped.latest-data", [
+          h("tbody", dbs.map(db =>
+            v(DB, db, false)
+          ))
+        ])
+      ])
+  }
+
+  function DB(vm) {
+    vm.diff(db => [db.lastMutationId]);
+
+    return (vm, db) =>
+      h("tr", [
+        h("td.dbname", db.dbname),
+        h("td.query-count", [
+          h("span", { class: db.lastSample.countClassName }, db.lastSample.nbQueries)
+        ]),
+      ].concat(db.lastSample.topFiveQueries.map(query =>
+        v(Query, query, false)
+      )));
+  }
+
+  function Query(vm) {
+    vm.diff(query => [query, query.elapsed]);
+
+    return (vm, query) =>
+      h("td", { class: query.elapsedClassName }, [
+        h("span", query.formatElapsed),
+        h(".popover.left", [
+          h(".popover-content", query.query),
+          h(".arrow"),
+        ])
+      ]);
+  }
+
+  function getData() {
+    return ENV.generateData().toArray();
+  }
+
+  function update() {
+    Monitoring.renderRate.ping();
+    view.update(getData());
+    setTimeout(update, ENV.timeout);
+  };
+
+  var view = domvm.createView(DBMonView, getData(), false).mount(document.getElementById("app"));
+
+  update();
+});
diff --git a/domvm-optimized/index.html b/domvm-optimized/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="description" content="DBMON domvm" />
+  <meta charset="utf-8">
+  <link href="../styles.css" rel="stylesheet" type="text/css" />
+  <title>dbmon (domvm v2)</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="../lib/jquery-2.1.0.min.js"></script>
+  <script src="../lib/domvm.nano.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>
diff --git a/domvm/app.js b/domvm/app.js
@@ -1,30 +1,28 @@
 $(function() {
+  var h = (tag, arg1, arg2) => domvm.defineElement(tag, arg1, arg2, domvm.FIXED_BODY);
+
   function DBMonView() {
-    return function(vm, dbs) {
-      return ["div",
-        ["table.table.table-striped.latest-data",
-          ["tbody",
-            dbs.map(function(db) {
-              return ["tr",
-                ["td.dbname", db.dbname],
-                ["td.query-count",
-                  ["span", { class: db.lastSample.countClassName }, db.lastSample.nbQueries]
-                ],
-                db.lastSample.topFiveQueries.map(function(query) {
-                  return ["td.Query", { class: query.elapsedClassName },
-                    ["span", query.formatElapsed],
-                    [".popover.left",
-                      [".popover-content", query.query],
-                      [".arrow"],
-                    ]
-                  ];
-                })
-              ];
-            })
-          ]
-        ]
-      ];
-    };
+    return (vm, dbs) =>
+      h("div", [
+        h("table.table.table-striped.latest-data", [
+          h("tbody", dbs.map(db =>
+            h("tr", [
+              h("td.dbname", db.dbname),
+              h("td.query-count", [
+                h("span", { class: db.lastSample.countClassName }, db.lastSample.nbQueries)
+              ])
+            ].concat(db.lastSample.topFiveQueries.map(query =>
+              h("td", { class: query.elapsedClassName }, [
+                h("span", query.formatElapsed),
+                h(".popover.left", [
+                  h(".popover-content", query.query),
+                  h(".arrow"),
+                ])
+              ])
+            )))
+          ))
+        ])
+      ])
   }
 
   function getData() {
@@ -37,7 +35,7 @@ $(function() {
     setTimeout(update, ENV.timeout);
   };
 
-  var view = domvm.view(DBMonView, getData(), false).mount(document.getElementById("app"));
+  var view = domvm.createView(DBMonView, getData(), false).mount(document.getElementById("app"));
 
   update();
 });
diff --git a/domvm/index.html b/domvm/index.html
@@ -4,12 +4,12 @@
 <meta name="description" content="DBMON domvm" />
   <meta charset="utf-8">
   <link href="../styles.css" rel="stylesheet" type="text/css" />
-  <title>dbmon (domvm)</title>
+  <title>dbmon (domvm v2)</title>
 </head>
 <body>
   <div id="app"></div>
   <script src="../lib/jquery-2.1.0.min.js"></script>
-  <script src="../lib/domvm.min.js"></script>
+  <script src="../lib/domvm.nano.min.js"></script>
   <script src="../ENV.js"></script>
   <script src="../lib/memory-stats.js"></script>
   <script src="../lib/monitor.js"></script>

diff --git a/lib/domvm.min.js b/lib/domvm.min.js