Updates to solid, ko-jsx, mobx-jsx

frameworks/keyed/ko-jsx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-framework-benchmark-ko-jsx",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "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.1.0",
+    "babel-plugin-jsx-dom-expressions": "0.2.0",
     "knockout": "^3.4.2",
-    "ko-jsx": "0.1.2"
+    "ko-jsx": "0.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.0.0",
-    "rollup": "0.65.2",
+    "@babel/core": "7.1.6",
+    "rollup": "0.67.3",
     "rollup-plugin-babel": "4.0.3",
-    "rollup-plugin-commonjs": "^9.1.6",
+    "rollup-plugin-commonjs": "9.2.0",
     "rollup-plugin-node-resolve": "3.4.0",
-    "rollup-plugin-terser": "2.0.2"
+    "rollup-plugin-terser": "3.0.0"
   }
 }

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

@@ -90,8 +90,8 @@ var HomeViewModel = function () {
     // stopMeasure();
   };
 
-  self.clickRow = function(e, id) {
-    if (e.target.matches('.delete')) {
+  self.clickRow = function(e, id, action) {
+    if (action === 'remove') {
       // startMeasure("delete");
       var tmp = self.data();
       const idx = tmp.findIndex(d => d.id === id);

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

@@ -26,12 +26,12 @@ 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 onClick={clickRow}>{
-      selectWhen(selected, (el, selected) => el.className = selected ? 'danger' : '')
+      selectWhen(selected, 'danger')
       (data.each(row =>
-        <tr model={((row.id))}>
-          <td class='col-md-1' textContent={((row.id))} />
+        <tr model={row.id}>
+          <td class='col-md-1' textContent={row.id} />
           <td class='col-md-4'><a>{row.label}</a></td>
-          <td class='col-md-1'><a><span class='delete glyphicon glyphicon-remove' /></a></td>
+          <td class='col-md-1'><a action={'remove'}><span class='glyphicon glyphicon-remove' /></a></td>
           <td class='col-md-6'/>
         </tr>
       ))

frameworks/keyed/mobx-jsx/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-framework-benchmark-mobx-jsx",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "main": "dist/main.js",
   "js-framework-benchmark": {
     "frameworkVersionFromPackage": "mobx-jsx"
@@ -17,13 +17,13 @@
     "url": "https://github.com/krausest/js-framework-benchmark.git"
   },
   "dependencies": {
-    "babel-plugin-jsx-dom-expressions": "0.1.3",
-    "mobx-jsx": "0.0.6",
-    "mobx": "5.5.0"
+    "babel-plugin-jsx-dom-expressions": "0.2.0",
+    "mobx-jsx": "0.0.7",
+    "mobx": "5.6.0"
   },
   "devDependencies": {
     "@babel/core": "7.1.2",
-    "rollup": "0.66.6",
+    "rollup": "0.67.3",
     "rollup-plugin-babel": "4.0.3",
     "rollup-plugin-node-resolve": "3.4.0",
     "rollup-plugin-terser": "3.0.0"

frameworks/keyed/mobx-jsx/src/main.jsx

@@ -24,12 +24,13 @@ function buildData(count) {
 function App() {
   const state = observable({data: [], selected: null});
 
-  const clickRow = (e, id) => {
+  const clickRow = (e, id, intent) => {
     e.stopPropagation();
     action(() => {
-      if (e.target.matches('.delete')) {
-        // startMeasure('remove');
-        state.data = state.data.filter(row => row.id !== id);
+      if (intent === 'remove') {
+        // startMeasure('delete');
+        const data = state.data;
+        data.splice(data.findIndex(d => d.id === id), 1)
         // stopMeasure();
       } else {
         // startMeasure("select");
@@ -58,7 +59,7 @@ function App() {
   const add = action(e => {
     e.stopPropagation();
     // startMeasure('append 1000');
-    state.data = state.data.concat(buildData(1000));
+    state.data.push.apply(state.data, buildData(1000));
     // stopMeasure();
   });
 
@@ -117,16 +118,15 @@ function App() {
       </div></div>
     </div></div>
     <table class='table table-hover table-striped test-data'><tbody onClick={ clickRow }>{
-      selectWhen(() => state.selected, (el, selected) => el.className = selected ? 'danger' : '')
-      (each(() => state.data, row => {
-        const rowId = untracked(() => row.id);
-        return <tr model={(( rowId ))}>
-          <td class='col-md-1' textContent={(( rowId ))} />
-          <td class='col-md-4'><a>{ row.label }</a></td>
-          <td class='col-md-1'><a><span class='delete glyphicon glyphicon-remove' /></a></td>
+      selectWhen(() => state.selected, 'danger')
+      (each(() => state.data, row =>
+        <tr model={ row.id }>
+          <td class='col-md-1' textContent={ row.id } />
+          <td class='col-md-4'><a>{( row.label )}</a></td>
+          <td class='col-md-1'><a action={'remove'}><span class='glyphicon glyphicon-remove' /></a></td>
           <td class='col-md-6'/>
         </tr>
-      }))
+      ))
     }</tbody></table>
     <span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
   </div>

frameworks/keyed/solid/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-framework-benchmark-solid",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "main": "dist/main.js",
   "js-framework-benchmark": {
     "frameworkVersionFromPackage": "solid-js"
@@ -17,13 +17,13 @@
     "url": "https://github.com/krausest/js-framework-benchmark.git"
   },
   "dependencies": {
-    "babel-plugin-jsx-dom-expressions": "0.1.3",
+    "babel-plugin-jsx-dom-expressions": "0.2.0",
     "s-js": "0.4.9",
-    "solid-js": "0.1.2"
+    "solid-js": "0.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.1.2",
-    "rollup": "0.66.6",
+    "@babel/core": "7.1.6",
+    "rollup": "0.67.3",
     "rollup-plugin-babel": "4.0.3",
     "rollup-plugin-node-resolve": "3.4.0",
     "rollup-plugin-terser": "3.0.0"

frameworks/keyed/solid/src/main.jsx

@@ -15,14 +15,13 @@ function buildData(count) {
   for (let i = 0; i < count; i++) {
     data[i] = {
       id: idCounter++,
-      label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)]
+      label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`
     }
   }
   return data;
 }
 
 function App() {
-  let rowId;
   const state = new State({ data: [], selected: null });
 
   return <div class='container'>
@@ -50,26 +49,27 @@ function App() {
       </div></div>
     </div></div>
     <table class='table table-hover table-striped test-data'><tbody onClick={ clickRow }>{
-      selectWhen(() => state.selected, (el, selected) => el.className = selected ? 'danger' : '')
+      selectWhen(() => state.selected, 'danger')
       (each(row =>
-        (rowId = row.sample('id'),
-        <tr model={(( rowId ))}>
-          <td class='col-md-1' textContent={(( rowId ))} />
-          <td class='col-md-4'><a>{ row.label }</a></td>
-          <td class='col-md-1'><a><span class='delete glyphicon glyphicon-remove' /></a></td>
+        <tr model={ row.id }>
+          <td class='col-md-1' textContent={ row.id } />
+          <td class='col-md-4'><a>{( row.label )}</a></td>
+          <td class='col-md-1'><a action={ 'remove' }>
+            <span class='glyphicon glyphicon-remove' />
+          </a></td>
           <td class='col-md-6'/>
-        </tr>)
+        </tr>
       )(() => state.data))
     }</tbody></table>
     <span class='preloadicon glyphicon glyphicon-remove' aria-hidden="true" />
   </div>
 
-  function clickRow(e, id) {
+  function clickRow(e, id, action) {
     e.stopPropagation();
-    if (e.target.matches('.delete')) {
-      state.set({
-        data: state.data.filter(row => row.id !== id)
-      });
+    if (action === 'remove') {
+      const data = state.data.slice(0);
+      data.splice(data.findIndex(d => d.id === id), 1)
+      state.set({ data });
     } else state.set({ selected: id })
   }