Update Solid, KoJSX, and MobXJSX v0.4.0

krausest · Feb 17, 2019 · 5899762 · 5899762
1 parent 8cf544f
commit 5899762
Show file tree

Hide file tree

Showing 7 changed files with 78 additions and 84 deletions.
diff --git a/frameworks/keyed/ko-jsx/package.json b/frameworks/keyed/ko-jsx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "js-framework-benchmark-ko-jsx",
-  "version": "0.3.0",
+  "version": "0.4.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.3.6",
+    "babel-plugin-jsx-dom-expressions": "0.4.3",
     "knockout": "^3.4.2",
-    "ko-jsx": "0.3.0"
+    "ko-jsx": "0.4.0"
   },
   "devDependencies": {
-    "@babel/core": "7.2.2",
-    "rollup": "1.0.0",
-    "rollup-plugin-babel": "4.2.0",
+    "@babel/core": "7.3.3",
+    "rollup": "1.1.2",
+    "rollup-plugin-babel": "4.3.2",
     "rollup-plugin-commonjs": "9.2.0",
     "rollup-plugin-node-resolve": "4.0.0",
-    "rollup-plugin-terser": "4.0.1"
+    "rollup-plugin-terser": "4.0.4"
   }
 }
diff --git a/frameworks/keyed/ko-jsx/src/Main.js b/frameworks/keyed/ko-jsx/src/Main.js
@@ -90,18 +90,18 @@ var HomeViewModel = function () {
     // stopMeasure();
   };
 
-  self.clickRow = function(e, id, action) {
-    if (action === 'remove') {
-      // startMeasure("delete");
-      var tmp = self.data();
-      const idx = tmp.findIndex(d => d.id === id);
-      self.data.splice(idx, 1);
-      // stopMeasure();
-    } else {
-      // startMeasure("select");
-      self.selected(id);
-      // stopMeasure();
-    }
+  self.select = function(e, id) {
+    // startMeasure("select");
+    self.selected(id);
+    // stopMeasure();
+  }
+
+  self.remove = function(e, id) {
+    // startMeasure("delete");
+    var tmp = self.data();
+    const idx = tmp.findIndex(d => d.id === id);
+    self.data.splice(idx, 1);
+    // stopMeasure();
   }
 };
 

diff --git a/frameworks/keyed/ko-jsx/src/template.jsx b/frameworks/keyed/ko-jsx/src/template.jsx
@@ -1,15 +1,15 @@
 import { r, selectWhen } from 'ko-jsx'
 
 const Button = ({id, text, fn}) =>
-  <div class ='col-sm-6 smallpad'>
+  <div class='col-sm-6 smallpad'>
     <button id={id} class='btn btn-primary btn-block' type='button' onClick={fn}>{text}</button>
   </div>
 
-export default function({data, selected, run, runLots, add, update, clear, swapRows, clickRow}) {
+export default function({data, selected, run, runLots, add, update, clear, swapRows, remove, select}) {
   return <div class='container'>
     <div class='jumbotron'><div class='row'>
-      <div class ='col-md-6'><h1>KnockoutJSX-keyed</h1></div>
-      <div class ='col-md-6'><div class ='row'>
+      <div class='col-md-6'><h1>KnockoutJSX-keyed</h1></div>
+      <div class='col-md-6'><div class='row'>
         <Button id='run' text='Create 1,000 rows' fn={run} />
         <Button id='runlots' text='Create 10,000 rows' fn={runLots} />
         <Button id='add' text='Append 1,000 rows' fn={add} />
@@ -18,15 +18,14 @@ export default function({data, selected, run, runLots, add, update, clear, swapR
         <Button id='swaprows' text='Swap Rows' fn={swapRows} />
       </div></div>
     </div></div>
-    <table class='table table-hover table-striped test-data'><tbody onClick={clickRow}>
-      <$ each={data()} afterRender={selectWhen(selected, 'danger')}>{
-        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>
+    <table class='table table-hover table-striped test-data'><tbody>
+      <$ each={data()} afterRender={selectWhen(selected, 'danger')}>{ row =>
+        <tr model={row.id}>
+          <td class='col-md-1' textContent={row.id} />
+          <td class='col-md-4'><a onClick={select}>{row.label}</a></td>
+          <td class='col-md-1'><a onClick={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" />

diff --git a/frameworks/keyed/mobx-jsx/package.json b/frameworks/keyed/mobx-jsx/package.json
@@ -1,6 +1,6 @@
 {
   "name": "js-framework-benchmark-mobx-jsx",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "main": "dist/main.js",
   "js-framework-benchmark": {
     "frameworkVersionFromPackage": "mobx-jsx"
@@ -17,16 +17,16 @@
     "url": "https://github.com/krausest/js-framework-benchmark.git"
   },
   "dependencies": {
-    "babel-plugin-jsx-dom-expressions": "0.3.6",
-    "mobx": "5.8.0",
-    "mobx-jsx": "0.1.0"
+    "babel-plugin-jsx-dom-expressions": "0.4.3",
+    "mobx": "5.9.0",
+    "mobx-jsx": "0.2.0"
   },
   "devDependencies": {
-    "@babel/core": "7.2.2",
-    "rollup": "1.0.0",
-    "rollup-plugin-babel": "4.2.0",
+    "@babel/core": "7.3.3",
+    "rollup": "1.1.2",
+    "rollup-plugin-babel": "4.3.2",
     "rollup-plugin-node-resolve": "4.0.0",
     "rollup-plugin-replace": "^2.1.0",
-    "rollup-plugin-terser": "4.0.1"
+    "rollup-plugin-terser": "4.0.4"
   }
 }
diff --git a/frameworks/keyed/mobx-jsx/src/main.jsx b/frameworks/keyed/mobx-jsx/src/main.jsx
@@ -22,22 +22,20 @@ function buildData(count) {
 }
 
 const Button = ({ id, text, fn }) =>
-  <div class ='col-sm-6 smallpad'>
+  <div class='col-sm-6 smallpad'>
     <button id={ id } class='btn btn-primary btn-block' type='button' onClick={ fn }>{ text }</button>
   </div>
 
 const App = () => {
   const state = observable({data: [], selected: null});
 
-  const clickRow = (e, id, intent) => {
-    action(() => {
-      if (intent === 'remove') {
-        const data = state.data.slice(0);
-        data.splice(data.findIndex(d => d.id === id), 1)
-        state.data = data;
-      } else state.selected = id;
-    })();
-  };
+  const remove = (e, id) => action(() => {
+    const data = state.data.slice(0);
+    data.splice(data.findIndex(d => d.id === id), 1)
+    state.data = data;
+  })();
+
+  const select = (e, id) => action(() => state.selected = id)();
 
   const run = action(e => {
     state.data = buildData(1000);
@@ -77,8 +75,8 @@ const App = () => {
 
   return <div class='container'>
     <div class='jumbotron'><div class='row'>
-      <div class ='col-md-6'><h1>MobX-JSX Keyed</h1></div>
-      <div class ='col-md-6'><div class ='row'>
+      <div class='col-md-6'><h1>MobX-JSX Keyed</h1></div>
+      <div class='col-md-6'><div class='row'>
         <Button id='run' text='Create 1,000 rows' fn={ run } />
         <Button id='runlots' text='Create 10,000 rows' fn={ runLots } />
         <Button id='add' text='Append 1,000 rows' fn={ add } />
@@ -87,15 +85,14 @@ const App = () => {
         <Button id='swaprows' text='Swap Rows' fn={ swapRows } />
       </div></div>
     </div></div>
-    <table class='table table-hover table-striped test-data'><tbody onClick={ clickRow }>
-      <$ each={ state.data } afterRender={selectWhen(() => state.selected, 'danger')}>{
-        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>
+    <table class='table table-hover table-striped test-data'><tbody>
+      <$ each={ state.data } afterRender={selectWhen(() => state.selected, 'danger')}>{ row =>
+        <tr model={ row.id }>
+          <td class='col-md-1' textContent={ row.id } />
+          <td class='col-md-4'><a onClick={ select }>{( row.label )}</a></td>
+          <td class='col-md-1'><a onClick={ 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" />

diff --git a/frameworks/keyed/solid/package.json b/frameworks/keyed/solid/package.json
@@ -1,6 +1,6 @@
 {
   "name": "js-framework-benchmark-solid",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "main": "dist/main.js",
   "js-framework-benchmark": {
     "frameworkVersionFromPackage": "solid-js"
@@ -17,14 +17,14 @@
     "url": "https://github.com/krausest/js-framework-benchmark.git"
   },
   "dependencies": {
-    "babel-plugin-jsx-dom-expressions": "0.3.6",
-    "solid-js": "0.3.4"
+    "babel-plugin-jsx-dom-expressions": "0.4.3",
+    "solid-js": "0.4.0"
   },
   "devDependencies": {
-    "@babel/core": "7.2.2",
-    "rollup": "1.0.0",
-    "rollup-plugin-babel": "4.2.0",
+    "@babel/core": "7.3.3",
+    "rollup": "1.1.2",
+    "rollup-plugin-babel": "4.3.2",
     "rollup-plugin-node-resolve": "4.0.0",
-    "rollup-plugin-terser": "4.0.1"
+    "rollup-plugin-terser": "4.0.4"
   }
 }
diff --git a/frameworks/keyed/solid/src/main.jsx b/frameworks/keyed/solid/src/main.jsx
@@ -1,4 +1,4 @@
-import { root, useState } from 'solid-js';
+import { createRoot, createState } from 'solid-js';
 import { r, selectWhen } from 'solid-js/dom';
 
 let idCounter = 1;
@@ -20,30 +20,28 @@ function buildData(count) {
 }
 
 const Button = ({ id, text, fn }) =>
-  <div class ='col-sm-6 smallpad'>
+  <div class='col-sm-6 smallpad'>
     <button id={ id } class='btn btn-primary btn-block' type='button' onClick={ fn }>{ text }</button>
   </div>
 
 const App = () => {
-  const [ state, setState ] = useState({ data: [], selected: null }),
+  const [ state, setState ] = createState({ data: [], selected: null }),
     run = () => setState({ data: buildData(1000), selected: null }),
     runLots = () => setState({ data: buildData(10000), selected: null }),
     add = () => setState('data', d => [...d, ...buildData(1000)]),
     update = () => setState('data', { by: 10 }, 'label', l => l + ' !!!'),
     swapRows = () => setState('data', d => d.length > 998 ? { 1: d[998], 998: d[1] } : d),
     clear = () => setState({ data: [], selected: null }),
-    clickRow = (e, id, action) => {
-      action === 'remove' ?
-        setState('data', d => {
-          const idx = d.findIndex(d => d.id === id);
-          return [...d.slice(0, idx), ...d.slice(idx + 1)];
-        }) : setState('selected', id);
-    };
+    select = (e, id) => setState('selected', id),
+    remove = (e, id) => setState('data', d => {
+      const idx = d.findIndex(d => d.id === id);
+      return [...d.slice(0, idx), ...d.slice(idx + 1)];
+    });
 
   return <div class='container'>
     <div class='jumbotron'><div class='row'>
-      <div class ='col-md-6'><h1>SolidJS Keyed</h1></div>
-      <div class ='col-md-6'><div class ='row'>
+      <div class='col-md-6'><h1>SolidJS Keyed</h1></div>
+      <div class='col-md-6'><div class='row'>
         <Button id='run' text='Create 1,000 rows' fn={ run } />
         <Button id='runlots' text='Create 10,000 rows' fn={ runLots } />
         <Button id='add' text='Append 1,000 rows' fn={ add } />
@@ -52,12 +50,12 @@ const App = () => {
         <Button id='swaprows' text='Swap Rows' fn={ swapRows } />
       </div></div>
     </div></div>
-    <table class='table table-hover table-striped test-data'><tbody onClick={ clickRow }>
+    <table class='table table-hover table-striped test-data'><tbody>
       <$ each={ state.data } afterRender={ selectWhen(() => state.selected, 'danger') }>{ 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-4'><a onClick={ select }>{( row.label )}</a></td>
+          <td class='col-md-1'><a onClick={ remove }><span class='glyphicon glyphicon-remove' /></a></td>
           <td class='col-md-6'/>
         </tr>
       }</$>
@@ -66,4 +64,4 @@ const App = () => {
   </div>
 }
 
-root(() => document.getElementById("main").appendChild(<App />))
+createRoot(() => document.getElementById("main").appendChild(<App />))