Merge pull request krausest#1 from krausest/master

Rebase

Author: StefansArya

README.md

@@ -239,6 +239,11 @@ Contributions are very welcome. Please use the following rules:
 * You can assert the correct keyed or non-keyed behaviour by using the isKeyed test tool. cd to webdriver-ts and call it like `npm run isKeyed -- --framework [your framework]`. It'll print an error if your framework behaves other as specified.
 * Please don't commit any of the result file webdriver-ts/table.html, webdriver-ts-results/src/results.ts or webdriver-ts-results/table.html. I use to run the benchmarks after merging and publish updated (temporary) results.
 * The latest stable chrome can be used regarding web features and language level (babel-preset-env "last 1 chrome versions")
+* **Please don't over-optimize. Other contributors will review your implementation so beware of discussions ([#521](https://github.com/krausest/js-framework-benchmark/pull/521), [#519](https://github.com/krausest/js-framework-benchmark/pull/519), [#430](https://github.com/krausest/js-framework-benchmark/issues/430)) and rejection if the community finds you cheating. When are you safe?**
+  * If the initial rendering is able to render the selection state
+  * The implementation uses only the idiomatic style of its library
+  * If you don't use userland hacks in your implementation like dom manipulations or request animation frame calls
+Tip: If you start with your implementation do not take vanillajs as the reference. It violates those rules and serves only as a performance baseline and not as a best practice implementation.
 
 This work is derived from a benchmark that Richard Ayotte published on https://gist.github.com/RichAyotte/a7b8780341d5e75beca7 and adds more framework and more operations. Thanks for the great work.
 

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"
   }
 }

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();
   }
 };
 

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" />

frameworks/keyed/lighterhtml/package.json

@@ -24,7 +24,7 @@
   },
   "homepage": "https://github.com/krausest/js-framework-benchmark#readme",
   "dependencies": {
-    "lighterhtml": "0.8.10"
+    "lighterhtml": "0.9.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",

frameworks/keyed/lighterhtml/rollup.config.js

@@ -14,13 +14,7 @@ export default {
       delimiters: ['', '']
     }),
     babel({
-      plugins: [
-        ['remove-ungap', {
-          exclude: [
-            '@ungap/create-content'
-          ]
-        }]
-      ],
+      plugins: [['remove-ungap']]
     }),
     terser()
   ],

frameworks/keyed/lit-html/src/index.js

@@ -1,6 +1,5 @@
 import { html, render } from '../node_modules/lit-html/lit-html.js';
 import { repeat } from '../node_modules/lit-html/directives/repeat.js';
-import { guard } from '../node_modules/lit-html/directives/guard.js';
 
 const 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'];
@@ -28,49 +27,46 @@ const clear = () => {
   _render();
 };
 const interact = e => {
-  const interaction = e.target.getAttribute('data-interaction');
-  const id = parseInt(
-    e.target.parentNode.id || 
-    e.target.parentNode.parentNode.id ||
-    e.target.parentNode.parentNode.parentNode.id
-  );
+  const td = e.target.closest('td');
+  const interaction = td.getAttribute('data-interaction');
+  const id = parseInt(td.parentNode.id);
   if (interaction === 'delete') {
-    del(id)
+    del(id);
   } else {
-    select(id)
+    select(id);
   }
 };
 const del = id => {
   const idx = data.findIndex(d => d.id === id);
-  data.splice(idx, 1)
+  data.splice(idx, 1);
   _render();
 };
 const select = id => {
   if (selected > -1) {
-    data[selected] = { ...data[selected], selected: false }
+    data[selected].selected = false;
   }
   selected = data.findIndex(d => d.id === id);
-  data[selected] = { ...data[selected], selected: true }
+  data[selected].selected = true;
   _render();
 };
 const swapRows = () => {
   if (data.length > 998) {
-    const tmp = data[1]
-    data[1] = data[998]
-    data[998] = tmp
+    const tmp = data[1];
+    data[1] = data[998];
+    data[998] = tmp;
   }
   _render();
 };
 const update = () => {
-  for(let i = 0; i < data.length; i += 10) {
-    const item = data[i]
-    data[i] = { ...item, label: item.label + ' !!!' }
+  for (let i = 0; i < data.length; i += 10) {
+    const item = data[i];
+    data[i].label += ' !!!';
   }
   _render();
 };
 const buildData = count => {
   const data = [];
-  for (var i = 0; i < count; i++) {
+  for (let i = 0; i < count; i++) {
     data.push({
       id: did++,
       label: `${adjectives[_random(adjectives.length)]} ${colours[_random(colours.length)]} ${nouns[_random(nouns.length)]}`,
@@ -126,20 +122,19 @@ const template = () => html`
   <table @click=${interact} class="table table-hover table-striped test-data">
     <tbody>${repeat(data,
       item => item.id,
-      item => guard(item, () => html`
+      item => html`
       <tr id=${item.id} class=${item.selected ? 'danger' : ''}>
         <td class="col-md-1">${item.id}</td>
-        <td data-interaction='select' class="col-md-4">
-          <a data-interaction='select'>${item.label}</a>
+        <td class="col-md-4">
+          <a>${item.label}</a>
         </td>
         <td data-interaction='delete' class="col-md-1">
-          <a data-interaction='delete'>
-            <span data-interaction='delete' class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+          <a>
+            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
           </a>
         </td>
         <td class="col-md-6"></td>
-      </tr>`)
-    )}
+      </tr>`)}
     </tbody>
   </table>
   <span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>

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"
   }
 }

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" />

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"
   }
 }