Merge branch 'master' of https://github.com/adamhaile/js-framework-benchmark into adamhaile-master

Author: krausest

surplus-v0.4.0/package.json

@@ -23,13 +23,13 @@
   },
   "dependencies": {
     "s-js": "^0.4.0",
-    "s-array": "^0.4.0",
+    "s-array": "^0.4.2",
     "surplus": "^0.4.0"
   },
   "devDependencies": {
     "ts-loader": "0.8.2",
     "typescript": "2.2.1",
-    "surplus-loader": "^0.4.0",
+    "surplus-loader": "^0.4.2",
     "webpack": "2.2.1"
   }
 }

surplus-v0.4.0/src/controller.ts

@@ -20,9 +20,9 @@ var stopMeasure = function() {
 
 export class App {
     constructor(public store : Store) { }
-    run() {
+    run(clear : boolean) {
         startMeasure("run");
-        this.store.run();
+        this.store.run(clear);
         stopMeasure();
     }
     add() {
@@ -45,9 +45,9 @@ export class App {
         this.store.delete(idx);
         stopMeasure();
     }
-    runLots() {
+    runLots(clear : boolean) {
         startMeasure("runLots");
-        this.store.runLots();
+        this.store.runLots(clear);
         stopMeasure();
     }
     clear() {

surplus-v0.4.0/src/store.ts

@@ -38,7 +38,8 @@ export class Store {
         const idx = (this.data() as any).findIndex((d : Row) => d.id == id);
         this.data.splice(idx, 1);
     }
-    run() {
+    run(clear : boolean) {
+        if (clear) this.data([]);
         S.freeze(() => {
             this.data(this.buildData());
             this.selected(undefined);
@@ -53,7 +54,8 @@ export class Store {
     select(id : number) {
         this.selected(id);
     }
-    runLots() {
+    runLots(clear : boolean) {
+        if (clear) this.data([]);
         S.freeze(() => {
             this.data(this.buildData(10000));
             this.selected(undefined);

surplus-v0.4.0/src/view.tsx

@@ -18,10 +18,10 @@ export let AppView = (app : App) =>
                     <div className="col-md-6">
                         <div className="row">
                             <div className="col-sm-6 smallpad">
-                                <button type="button" className="btn btn-primary btn-block" id="run" onClick={e => app.run()}>Create 1,000 rows</button>
+                                <button type="button" className="btn btn-primary btn-block" id="run" onClick={e => app.run(!USE_NON_KEYED_TBODY)}>Create 1,000 rows</button>
                             </div>
                             <div className="col-sm-6 smallpad">
-                                <button type="button" className="btn btn-primary btn-block" id="runlots" onClick={e => app.runLots()}>Create 10,000 rows</button>
+                                <button type="button" className="btn btn-primary btn-block" id="runlots" onClick={e => app.runLots(!USE_NON_KEYED_TBODY)}>Create 10,000 rows</button>
                             </div>
                             <div className="col-sm-6 smallpad">
                                 <button type="button" className="btn btn-primary btn-block" id="add" onClick={e => app.add()}>Append 1,000 rows</button>
@@ -49,19 +49,24 @@ export let AppView = (app : App) =>
         while (el.tagName !== 'TR') el = el.parentElement!; 
         return +el.childNodes[0].textContent!; 
     },
-    TBodyKeyed = (app : App) =>
-        <tbody>
-            {app.store.data.mapSample(row =>
-                <tr className={row.id === app.store.selected() ? 'danger' : ''}>
-                    <td className="col-md-1" innerText={row.id}></td>
-                    <td className="col-md-4">
-                        <a innerText={row.label()}></a>
-                    </td>
-                    <td className="col-md-1"><a><span className="glyphicon glyphicon-remove delete"></span></a></td>
-                    <td className="col-md-6"></td>
-                </tr>
-            )}
-        </tbody>,
+    TBodyKeyed = (app : App) => {
+        let trs = app.store.data.mapSample(row =>
+            <tr>
+                <td className="col-md-1" innerText={row.id}></td>
+                <td className="col-md-4">
+                    <a innerText={row.label()}></a>
+                </td>
+                <td className="col-md-1"><a><span className="glyphicon glyphicon-remove delete"></span></a></td>
+                <td className="col-md-6"></td>
+            </tr>);
+
+        S.on(app.store.selected, () => {
+            let sel = app.store.selected(), data = app.store.data();
+            trs().forEach((tr, i) => tr.className = data[i].id === sel ? 'danger' : '');
+        });
+        
+        return <tbody>{trs}</tbody>;
+    },
     TBodyNonKeyed = (app : App) => {
         var tbody = <tbody></tbody>,
             trs = [] as RowTr[];

surplus-v0.4.0/webpack.config.js

@@ -12,6 +12,5 @@ module.exports = {
 		rules: [
 			{ test: /\.tsx?$/, loader: 'surplus-loader!ts-loader' },
 		]
-	},
-	externals: [ { '@types/react' : 'this'} ]
+	}
 };