Merge branch 'dom-expressions' of https://github.com/ryansolid/js-framework-benchmark into ryansolid-dom-expressions

Author: krausest

frameworks/keyed/ko-jsx/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "js-framework-benchmark-ko-jsx",
-  "version": "0.14.1",
+  "version": "0.16.1",
   "main": "index.js",
   "js-framework-benchmark": {
     "frameworkVersionFromPackage": "ko-jsx"
@@ -17,16 +17,16 @@
     "url": "https://github.com/krausest/js-framework-benchmark.git"
   },
   "dependencies": {
-    "babel-plugin-jsx-dom-expressions": "0.20.8",
+    "babel-plugin-jsx-dom-expressions": "0.25.12",
     "knockout": "3.5.1",
-    "ko-jsx": "0.14.1"
+    "ko-jsx": "0.16.1"
   },
   "devDependencies": {
     "@babel/core": "7.11.6",
     "@rollup/plugin-babel": "5.2.1",
-    "@rollup/plugin-commonjs": "15.1.0",
-    "@rollup/plugin-node-resolve": "9.0.0",
-    "rollup": "2.28.2",
+    "@rollup/plugin-commonjs": "17.1.0",
+    "@rollup/plugin-node-resolve": "11.2.0",
+    "rollup": "2.41.4",
     "rollup-plugin-terser": "7.0.2"
   }
 }

frameworks/keyed/ko-jsx/package.json

@@ -1,4 +1,4 @@
-import { render } from 'ko-jsx';
+import { render, createSelector } from 'ko-jsx';
 import { observable, observableArray } from 'knockout';
 import template from './template';
 
@@ -22,11 +22,13 @@ function buildData(count) {
 
 function HomeViewModel() {
   const selected = observable(null),
-    data = observableArray();
+    data = observableArray(),
+    isSelected = createSelector(selected);
 
   return {
     data,
     selected,
+    isSelected,
     run () {
       data(buildData(1000));
       selected(null);

frameworks/keyed/ko-jsx/src/Main.js

@@ -4,10 +4,10 @@ const Button = ({id, text, fn}) => (
   </div>
 )
 
-export default function({data, selected, run, runLots, add, update, clear, swapRows, remove}) {
+export default function({data, isSelected, selected, run, runLots, add, update, clear, swapRows, remove}) {
   const list = data.memoMap(row => {
     const rowId = row.id;
-    return <tr class={selected() === rowId ? "danger" : ""}>
+    return <tr class={isSelected(rowId) ? "danger" : ""}>
       <td class='col-md-1' textContent={ rowId } />
       <td class='col-md-4'><a onClick={[selected, rowId]} textContent={ row.label() } /></td>
       <td class='col-md-1'><a onClick={[remove, rowId]}><span class='glyphicon glyphicon-remove' aria-hidden="true" /></a></td>