diff --git a/frameworks/keyed/ko-jsx/package.json b/frameworks/keyed/ko-jsx/package.json
index 7cef309d3..7d4e45901 100644
--- 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.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"
}
}
diff --git a/frameworks/keyed/ko-jsx/src/Main.js b/frameworks/keyed/ko-jsx/src/Main.js
index dca7ab5d1..c94e8bc2c 100644
--- a/frameworks/keyed/ko-jsx/src/Main.js
+++ b/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);
diff --git a/frameworks/keyed/ko-jsx/src/template.jsx b/frameworks/keyed/ko-jsx/src/template.jsx
index f5517118b..5de910363 100644
--- a/frameworks/keyed/ko-jsx/src/template.jsx
+++ b/frameworks/keyed/ko-jsx/src/template.jsx
@@ -26,12 +26,12 @@ export default function({data, selected, run, runLots, add, update, clear, swapR
{
- selectWhen(selected, (el, selected) => el.className = selected ? 'danger' : '')
+ selectWhen(selected, 'danger')
(data.each(row =>
-
- |
+
+ |
{row.label} |
- |
+ |
|
))
diff --git a/frameworks/keyed/mobx-jsx/package.json b/frameworks/keyed/mobx-jsx/package.json
index 9df876dfc..4e710e098 100644
--- 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.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"
diff --git a/frameworks/keyed/mobx-jsx/src/main.jsx b/frameworks/keyed/mobx-jsx/src/main.jsx
index 41b4e4abf..d4e055bd0 100644
--- a/frameworks/keyed/mobx-jsx/src/main.jsx
+++ b/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() {
{
- selectWhen(() => state.selected, (el, selected) => el.className = selected ? 'danger' : '')
- (each(() => state.data, row => {
- const rowId = untracked(() => row.id);
- return
- |
- { row.label } |
- |
+ selectWhen(() => state.selected, 'danger')
+ (each(() => state.data, row =>
+
+ |
+ {( row.label )} |
+ |
|
- }))
+ ))
}
diff --git a/frameworks/keyed/solid/package.json b/frameworks/keyed/solid/package.json
index ca900b3e8..944bdf5c8 100644
--- a/frameworks/keyed/solid/package.json
+++ b/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"
diff --git a/frameworks/keyed/solid/src/main.jsx b/frameworks/keyed/solid/src/main.jsx
index 67f23e903..7f48c2e44 100644
--- a/frameworks/keyed/solid/src/main.jsx
+++ b/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
@@ -50,26 +49,27 @@ function App() {
{
- selectWhen(() => state.selected, (el, selected) => el.className = selected ? 'danger' : '')
+ selectWhen(() => state.selected, 'danger')
(each(row =>
- (rowId = row.sample('id'),
-
- |
- { row.label } |
- |
+
+ |
+ {( row.label )} |
+
+
+ |
|
-
)
+
)(() => state.data))
}
- 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 })
}