refactor(examples): update cellular-automata & hdom-benchmark

- update dropdown usage

examples/cellular-automata/src/index.ts

@@ -121,7 +121,7 @@ start("app", () => {
         ["div",
             ["button", { onclick: () => randomizeRules() }, "randomize rules"],
             ["button", { onclick: () => randomizeGrid() }, "reset grid"],
-            dropdown({ onchange: (e) => applyRules(e.target.value) }, presets, location.hash.substr(1))
+            [dropdown, { onchange: (e) => applyRules(e.target.value) }, presets, location.hash.substr(1)]
         ],
         ["pre", format(grid = convolve(grid, rules, W, H), W)]
     ];

examples/hdom-benchmark/package.json

@@ -18,6 +18,7 @@
     "dependencies": {
         "@thi.ng/api": "latest",
         "@thi.ng/hdom": "latest",
+        "@thi.ng/hdom-components": "latest",
         "@thi.ng/rstream": "latest",
         "@thi.ng/transducers": "latest"
     }

examples/hdom-benchmark/src/index.ts

@@ -1,12 +1,11 @@
 import { start } from "@thi.ng/hdom";
+import { dropdown } from "@thi.ng/hdom-components/dropdown";
 import { fromRAF } from "@thi.ng/rstream/from/raf";
 import { Stream } from "@thi.ng/rstream/stream";
 import { comp } from "@thi.ng/transducers/func/comp";
 import { hex } from "@thi.ng/transducers/func/hex";
 import { range } from "@thi.ng/transducers/iter/range";
 import { iterator } from "@thi.ng/transducers/iterator";
-import { transduce } from "@thi.ng/transducers/transduce";
-import { push } from "@thi.ng/transducers/rfn/push";
 import { benchmark } from "@thi.ng/transducers/xform/benchmark";
 import { map } from "@thi.ng/transducers/xform/map";
 import { mapIndexed } from "@thi.ng/transducers/xform/map-indexed";
@@ -18,8 +17,8 @@ const hex4 = hex(4);
 const hex6 = hex(6);
 
 /**
- * Single box component. Uses given id to switch between using
- * `div` or `box` element types, compute color and body text.
+ * Single box component. Uses given id to switch between using `div` or
+ * `box` element types, computes color and body text.
  *
  * @param id
  */
@@ -30,24 +29,10 @@ const box = (index: number, id: number) => [
 ];
 
 /**
- * Simple generic drop down component.
- *
- * @param change onchange listener
- * @param items drop down options `[value, label]`
- */
-const dropdown = (onchange: (e: Event) => void, items: [any, any][]) =>
-    transduce(
-        map(([value, label]) => <any>["option", { value }, label]),
-        push(),
-        ["select", { onchange }],
-        items
-    );
-
-/**
- * Re-usable FPS stats canvas component, displaying graph of
- * simple moving avarage of the past `period` frames.
- * If `stream` is given, uses the time interval between received
- * values. If not given, attaches itself to a RAF event stream.
+ * Re-usable FPS stats canvas component, displaying graph of simple
+ * moving avarage of the past `period` frames. If `stream` is given,
+ * uses the time interval between received values. If not given,
+ * attaches itself to a new RAF event stream.
  *
  * @param src
  * @param width
@@ -100,8 +85,8 @@ const app = () => {
     // initialize local state
     let i = 0, num = 128;
     const fps = fpsCounter(null, 100, 60);
-    const menu = dropdown(
-        (e) => { num = parseInt((<HTMLInputElement>e.target).value); },
+    const menu = dropdown(null,
+        { onchange: (e) => { num = parseInt((<HTMLInputElement>e.target).value); } },
         [[128, 128], [192, 192], [256, 256], [384, 384], [512, 512]]
     );
 
@@ -114,4 +99,4 @@ const app = () => {
     };
 };
 
-start(document.getElementById("app"), app(), null, false);
+start("app", app(), null, false);