duplicate those files

Author: krausest

frameworks/keyed/uhtml/src/jumbotron.js

@@ -0,0 +1,58 @@
+import { html } from 'uhtml';
+
+import { create } from './utils.js';
+
+// the Jumbotron can be used as component, even if it has no effect/subscription
+export default ({ title, data }) => html`
+  <div class="jumbotron">
+    <div class="row">
+      <div class="col-md-6">
+        <h1 .textContent=${title} />
+      </div>
+      <div class="col-md-6">
+        <div class="row">
+          <div class="col-sm-6 smallpad">
+            <button id="run" type="button" class="btn btn-primary btn-block"
+              onclick=${() => data.value = create(1_000)}
+            >Create 1,000 rows</button>
+          </div>
+          <div class="col-sm-6 smallpad">
+            <button id="runlots" type="button" class="btn btn-primary btn-block"
+              onclick=${() => data.value = create(10_000)}
+            >Create 10,000 rows</button>
+          </div>
+          <div class="col-sm-6 smallpad">
+            <button id="add" type="button" class="btn btn-primary btn-block"
+              onclick=${() => data.value = create(1_000, true)}
+            >Append 1,000 rows</button>
+          </div>
+          <div class="col-sm-6 smallpad">
+            <button id="update" type="button" class="btn btn-primary btn-block"
+              onclick=${() => {
+                const rows = create(-1);
+                for (let i = 0; i < rows.length; i += 10) rows[i].label += ' !!!';
+                data.value = rows;
+              }}
+            >Update every 10th row</button>
+          </div>
+          <div class="col-sm-6 smallpad">
+            <button id="clear" type="button" class="btn btn-primary btn-block"
+              onclick=${() => data.value = create(0)}
+            >Clear</button>
+          </div>
+          <div class="col-sm-6 smallpad">
+            <button id="swaprows" type="button" class="btn btn-primary btn-block"
+              onclick=${() => {
+                const rows = create(-1);
+                if (998 < rows.length) {
+                  [rows[1], rows[998]] = [rows[998], rows[1]];
+                  data.value = rows;
+                }
+              }}
+            >Swap Rows</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+`;

frameworks/keyed/uhtml/src/utils.js

@@ -0,0 +1,55 @@
+// variant of https://github.com/krausest/js-framework-benchmark/blob/master/frameworks/keyed/vanillajs-lite/src/Main.js
+
+const adjectives = ['pretty', 'large', 'big', 'small', 'tall', 'short', 'long', 'handsome', 'plain', 'quaint', 'clean', 'elegant', 'easy', 'angry', 'crazy', 'helpful', 'mushy', 'odd', 'unsightly', 'adorable', 'important', 'inexpensive', 'cheap', 'expensive', 'fancy'];
+const colours = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange'];
+const nouns = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza', 'mouse', 'keyboard'];
+
+const { round, random } = Math;
+const pick = list => list[round(random() * 1000) % list.length];
+const label = () => `${pick(adjectives)} ${pick(colours)} ${pick(nouns)}`;
+
+let TR, ID = 1, SEL = 0, SIZE = 0, DATA = [];
+
+// creats rows but it keep track of created data so
+// that it's possible to modify it and reflect next time it's needed
+export const create = (count, add) => {
+  if (count < 1) {
+    if (count < 0) return DATA;
+    else TR = null;
+  }
+  if (add) count += SIZE;
+  else DATA = [];
+  for (let i = add ? SIZE : 0; i < count; i++) {
+    const id = ID++;
+    DATA[i] = { id, label: label(), selected: SEL === id };
+  }
+  SIZE = count;
+  return DATA;
+};
+
+// create once a handler that keep data state updated
+// by selecting something or removing it
+export const handle = type => ({ currentTarget }) => {
+  const tr = currentTarget.closest('tr');
+  const id = +tr.id;
+  switch (type) {
+    case 'select': {
+      if (SEL === id) return;
+      if (TR) TR.className = '';
+      tr.className = 'danger';
+      TR = tr;
+      SEL = id;
+      break;
+    }
+    case 'remove': {
+      if (SEL === id) {
+          TR = null;
+          SEL = 0;
+      }
+      DATA.splice(DATA.findIndex(row => row.id === id), 1);
+      SIZE--;
+      tr.remove();
+      break;
+    }
+  }
+};