feat(benchmarks): add targetable benchmarks back

2016-09-02 12:37:22 -07:00
parent d26a827494
commit b4363bc8af
17 changed files with 574 additions and 383 deletions
--- a/modules/benchmarks/src/largetable/incremental_dom/index.html
+++ b/modules/benchmarks/src/largetable/incremental_dom/index.html
@ -0,0 +1,30 @@
+<!doctype html>
+<html>
+<body>
+
+  <h2>Params</h2>
+  <form>
+    Cols:
+    <input type="number" name="cols" placeholder="cols" value="40">
+    <br>
+    Rows:
+    <input type="number" name="rows" placeholder="rows" value="200">
+    <br>
+    <button>Apply</button>
+  </form>
+
+  <h2>Incremental-Dom Largetable Benchmark</h2>
+  <p>
+    <button id="destroyDom">destroyDom</button>
+    <button id="createDom">createDom</button>
+    <button id="updateDomProfile">profile updateDom</button>
+    <button id="createDomProfile">profile createDom</button>
+  </p>
+
+  <div>
+    <largetable id="root"></largetable>
+  </div>
+
+  <script src="../../bootstrap_plain.js"></script>
+</body>
+</html>
--- a/modules/benchmarks/src/largetable/incremental_dom/index.ts
+++ b/modules/benchmarks/src/largetable/incremental_dom/index.ts
@ -0,0 +1,25 @@
+import {bindAction, profile} from '../../util';
+import {buildTable, emptyTable} from '../util';
+import {TableComponent} from './table';
+
+export function main() {
+  var table: TableComponent;
+
+  function destroyDom() { table.data = emptyTable; }
+
+  function createDom() { table.data = buildTable(); }
+
+  function noop() {}
+
+  function init() {
+    table = new TableComponent(document.querySelector('largetable'));
+
+    bindAction('#destroyDom', destroyDom);
+    bindAction('#createDom', createDom);
+
+    bindAction('#updateDomProfile', profile(createDom, noop, 'update'));
+    bindAction('#createDomProfile', profile(createDom, destroyDom, 'create'));
+  }
+
+  init();
+}
--- a/modules/benchmarks/src/largetable/incremental_dom/table.ts
+++ b/modules/benchmarks/src/largetable/incremental_dom/table.ts
@ -0,0 +1,30 @@
+import {TableCell} from '../util';
+const {patch, elementOpen, elementClose, elementOpenStart, elementOpenEnd, attr, text} =
+    require('incremental-dom');
+
+export class TableComponent {
+  constructor(private _rootEl: any) {}
+
+  set data(data: TableCell[][]) { patch(this._rootEl, () => this._render(data)); }
+
+  private _render(data: TableCell[][]) {
+    elementOpen('table');
+    elementOpen('tbody');
+    for (let r = 0; r < data.length; r++) {
+      elementOpen('tr');
+      const row = data[r];
+      for (let c = 0; c < row.length; c++) {
+        elementOpenStart('td');
+        if (r % 2 === 0) {
+          attr('style', 'background-color: grey');
+        }
+        elementOpenEnd('td');
+        text(row[c].value);
+        elementClose('td');
+      }
+      elementClose('tr');
+    }
+    elementClose('tbody');
+    elementClose('table');
+  }
+}