updating hyperapp to 0.15.1 and added to readme

mathieuancelin · Oct 14, 2017 · 2616c8d · 2616c8d
1 parent beeea09
commit 2616c8d
Show file tree

Hide file tree

Showing 6 changed files with 57 additions and 32 deletions.
diff --git a/hyperapp/index.html b/hyperapp/index.html
@@ -8,8 +8,7 @@
 </head>
 <body>
   <div id="app"></div>
-  <script src="../lib/hyperapp/app.min.js"></script>
-  <script src="../lib/hyperapp/h.min.js"></script>
+  <script src="../lib/hyperapp.min.js"></script>
   <script src="../ENV.js"></script>
   <script src="../lib/memory-stats.js"></script>
   <script src="../lib/monitor.js"></script>

diff --git a/hyperapp/index.js b/hyperapp/index.js
@@ -1,29 +1,55 @@
-app({
-    root: document.getElementById("app"),
-    model: [],
-    view: model =>
-        h("div", {}, [
-            h("table", { class: "table table-striped latest-data" }, [
-                h("tbody", {}, model.map(db => h("tr", { key: db.dbname }, [
-                    h("td", { class: "dbname" }, [db.dbname]),
-                    h("td", { class: "query-count" }, [
-                        h("span", { class: db.lastSample.countClassName }, [db.lastSample.nbQueries])
-                    ]),
-                    db.lastSample.topFiveQueries.map(query =>
-                        h("td", { class: query.elapsedClassName }, [
-                            query.formatElapsed,
-                            h("div", { class: "popover left" }, [
-                                h("div", { class: "popover-content" }, [query.query]),
-                                h("div", { class: "arrow" })
-                            ])
-                        ]))
-                ])))
-            ])
-        ]),
-    update: {
-        generate: _ => ENV.generateData().toArray(Monitoring.renderRate.ping())
+'div,span,table,tbody,tr,td'.split(',').map(function(tag) {
+  window[tag] = hyperapp.h.bind(null, tag);
+});
+
+hyperapp.app(
+  {
+    state: { rows: [] },
+    view: state =>
+      div(
+        {},
+        table(
+          { class: 'table table-striped latest-data' },
+          tbody(
+            {},
+            state.rows.map(row =>
+              tr(
+                { key: row.dbname },
+                td({ class: 'dbname' }, [row.dbname]),
+                td(
+                  { class: 'query-count' },
+                  span(
+                    { class: row.lastSample.countClassName },
+                    row.lastSample.nbQueries
+                  )
+                ),
+                row.lastSample.topFiveQueries.map(query =>
+                  td(
+                    { class: query.elapsedClassName },
+                    query.formatElapsed,
+                    div(
+                      { class: 'popover left' },
+                      div(
+                        { class: 'popover-content' },
+                        query.query,
+                        div({ class: 'arrow' })
+                      )
+                    )
+                  )
+                )
+              )
+            )
+          )
+        )
+      ),
+    actions: {
+      generate: () => ({
+        rows: ENV.generateData().toArray(Monitoring.renderRate.ping())
+      })
     },
-    subs: [
-        (_, msg) => setInterval(msg.generate, ENV.timeout)
-    ]
-})
+    init(state, actions) {
+      setInterval(actions.generate, ENV.timeout);
+    }
+  },
+  document.getElementById('app')
+);
diff --git a/lib/hyperapp.min.js b/lib/hyperapp.min.js
diff --git a/lib/hyperapp/app.min.js b/lib/hyperapp/app.min.js
diff --git a/lib/hyperapp/h.min.js b/lib/hyperapp/h.min.js
diff --git a/readme.md b/readme.md
@@ -14,6 +14,7 @@ You can test it at https://mathieuancelin.github.io/js-repaint-perfs/
 * [Elem](https://github.com/mathieuancelin/Elem)
 * [elem-vdom](https://github.com/mathieuancelin/elem-vdom)
 * [Ember](http://emberjs.com/)
+* [Hyperapp](https://hyperapp.js.org)
 * [Mithril](http://mithril.js.org/)
 * [MagJS](https://github.com/magnumjs/mag.js)
 * [Ractive](http://www.ractivejs.org/)