Update DOM Expression Libraries and Remove all hacks

frameworks/keyed/ko-jsx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-framework-benchmark-ko-jsx",
-  "version": "0.12.0",
+  "version": "0.14.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.17.0",
+    "babel-plugin-jsx-dom-expressions": "0.20.8",
     "knockout": "3.5.1",
-    "ko-jsx": "0.12.0"
+    "ko-jsx": "0.14.1"
   },
   "devDependencies": {
-    "@babel/core": "7.9.0",
-    "rollup": "2.1.0",
-    "rollup-plugin-babel": "4.4.0",
-    "@rollup/plugin-commonjs": "11.0.2",
-    "@rollup/plugin-node-resolve": "7.1.1",
-    "rollup-plugin-terser": "5.3.0"
+    "@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-terser": "7.0.2"
   }
 }

frameworks/keyed/ko-jsx/rollup.config.js

@@ -1,34 +1,29 @@
-import resolve from '@rollup/plugin-node-resolve';
-import commonjs from '@rollup/plugin-commonjs';
-import babel from 'rollup-plugin-babel';
-import { terser } from 'rollup-plugin-terser';
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import babel from "@rollup/plugin-babel";
+import { terser } from "rollup-plugin-terser";
 
 const plugins = [
-	babel({
-		exclude: 'node_modules/**',
-		plugins: [["jsx-dom-expressions", {moduleName: 'ko-jsx'}]]
+  babel({
+    exclude: "node_modules/**",
+    babelHelpers: "bundled",
+    plugins: [["jsx-dom-expressions", { moduleName: "ko-jsx" }]],
+  }),
+  resolve({ extensions: [".js", ".jsx"] }),
+  commonjs({
+    include: "node_modules/**",
   }),
-	resolve({ extensions: ['.js', '.jsx'] }),
-	commonjs({
-    include: 'node_modules/**',
-    namedExports: {
-      'node_modules/knockout/build/output/knockout-latest.js': [
-        'ignoreDependencies', 'observable', 'observableArray',
-        'computed', 'subscribable'
-      ]
-    }
-	})
 ];
 
 if (process.env.production) {
-	plugins.push(terser());
+  plugins.push(terser({ output: { comments: false } }));
 }
 
 export default {
-	input: 'src/Main.js',
-	output: {
-		file: 'dist/main.js',
-		format: 'iife'
-	},
-	plugins
-};
+  input: "src/Main.js",
+  output: {
+    file: "dist/main.js",
+    format: "iife",
+  },
+  plugins,
+};

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

@@ -4,14 +4,14 @@ import template from './template';
 
 function _random(max) { return Math.round(Math.random() * 1000) % max; }
 
-var rowId = 1;
-var 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"];
-var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
-var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
+let rowId = 1;
+let 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"];
+let colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
+let nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
 
 function buildData(count) {
-  var data = [];
-  for (var i = 0; i < count; i++) {
+  let data = [];
+  for (let i = 0; i < count; i++) {
     data.push({
       id: rowId++,
       label: observable(adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)])
@@ -20,7 +20,7 @@ function buildData(count) {
   return data;
 }
 
-var HomeViewModel = function () {
+function HomeViewModel() {
   const selected = observable(null),
     data = observableArray();
 
@@ -39,7 +39,7 @@ var HomeViewModel = function () {
       data.push.apply(data, buildData(1000));
     },
     update () {
-      var tmp = data();
+      let tmp = data();
       for (let i = 0; i < tmp.length; i += 10) {
         tmp[i].label(tmp[i].label() + ' !!!');
       }
@@ -49,16 +49,16 @@ var HomeViewModel = function () {
       selected(null);
     },
     swapRows () {
-      var tmp = data();
+      let tmp = data();
       if (tmp.length > 998) {
-        var a = tmp[1];
+        let a = tmp[1];
         tmp[1] = tmp[998];
         tmp[998] = a;
         data(tmp);
       }
     },
     remove(id) {
-      var tmp = data();
+      let tmp = data();
       const idx = tmp.findIndex(d => d.id === id);
       data.splice(idx, 1);
     }

frameworks/keyed/ko-jsx/src/template.jsx

@@ -1,27 +1,20 @@
-import { ignoreDependencies, computed } from "knockout";
-import { wrap } from "ko-jsx";
-
-const Button = ({id, text, fn}) =>
+const Button = ({id, text, fn}) => (
   <div class='col-sm-6 smallpad'>
     <button id={id} class='btn btn-primary btn-block' type='button' onClick={fn}>{text}</button>
   </div>
+)
 
-const List = props => {
-  const mapped = computed(props.each.memoMap(props.children));
-  wrap(tr => {
-    let i, s = props.selected();
-    ignoreDependencies(() => {
-      if (tr) tr.className = "";
-      if ((tr = s && (i = props.each().findIndex(el => el.id === s)) > -1 && mapped()[i]))
-        tr.className = "danger";
-    });
-    return tr;
+export default function({data, selected, run, runLots, add, update, clear, swapRows, remove}) {
+  const list = data.memoMap(row => {
+    const rowId = row.id;
+    return <tr class={selected() === 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>
+      <td class='col-md-6'/>
+    </tr>
   });
-  return mapped;
-};
 
-export default function({data, selected, run, runLots, add, update, clear, swapRows, remove}) {
-  let rowId;
   return <div class='container'>
     <div class='jumbotron'><div class='row'>
       <div class='col-md-6'><h1>KnockoutJSX-keyed</h1></div>
@@ -35,15 +28,7 @@ export default function({data, selected, run, runLots, add, update, clear, swapR
       </div></div>
     </div></div>
     <table class='table table-hover table-striped test-data'><tbody>
-      <List each={ data } selected={ selected }>{ row => (
-        rowId = row.id,
-        <tr>
-          <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>
-          <td class='col-md-6'/>
-        </tr>
-      )}</List>
+      {list}
     </tbody></table>
     <span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
   </div>