Skip to content

Commit 9a89ba7

Browse files
krausestkrausest
committed
Merge branch 'master' of https://github.com/yysun/js-framework-benchmark into yysun-master
2 parents 2c29b93 + e147486 commit 9a89ba7

File tree

13 files changed

+355
-8536
lines changed

13 files changed

+355
-8536
lines changed

‎frameworks/keyed/apprun/package-lock.json

+11-4,055
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/keyed/apprun/package.json

+5-10
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,11 @@
44
"description": "AppRun demo",
55
"main": "index.js",
66
"js-framework-benchmark": {
7-
"frameworkVersionFromPackage": "apprun",
8-
"issues": [772]
7+
"frameworkVersionFromPackage": "apprun"
98
},
109
"scripts": {
11-
"build-dev": "webpack -w -d",
12-
"build-prod": "webpack -p"
10+
"build-dev": "esbuild src/main.tsx --bundle --outfile=dist/main.js --serve=8080 --servedir=.",
11+
"build-prod": "esbuild src/main.tsx --bundle --outfile=dist/main.js --minify"
1312
},
1413
"keywords": [
1514
"apprun",
@@ -23,13 +22,9 @@
2322
"url": "https://github.com/yysun/js-framework-benchmark.git"
2423
},
2524
"devDependencies": {
26-
"json-loader": "0.5.7",
27-
"ts-loader": "6.2.2",
28-
"typescript": "3.8.3",
29-
"webpack": "4.42.1",
30-
"webpack-cli": "3.3.11"
25+
"esbuild": "^0.8.54"
3126
},
3227
"dependencies": {
33-
"apprun": "2.23.12"
28+
"apprun": "^2.27.7"
3429
}
3530
}

‎frameworks/keyed/apprun/src/jsx.d.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
declare namespace JSX {
2+
interface IntrinsicElements {
3+
[key: string]: any
4+
}
5+
}

‎frameworks/keyed/apprun/src/main.tsx

+67-132
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,74 @@
1-
import { app, Component } from 'apprun';
2-
import Store from './store';
1+
import { app, View } from 'apprun';
2+
import { state, update, State, Events } from './store';
33

4-
const store = new Store();
4+
const getId = (elem: any) => elem.closest('tr').id;
55

6-
const update = {
7-
8-
run(store) {
9-
store.run();
10-
return store;
11-
},
12-
13-
add(store) {
14-
store.add();
15-
return store;
16-
},
17-
18-
remove(store, id) {
19-
store.delete(id);
20-
document.getElementById(id).remove();
21-
},
22-
23-
select(store, id) {
24-
if (store.selected) {
25-
document.getElementById(store.selected).className = '';
26-
}
27-
store.select(id);
28-
document.getElementById(id).className = 'danger';
29-
},
30-
31-
update(store) {
32-
store.update();
33-
return store;
34-
},
35-
36-
runlots(store) {
37-
store.runLots();
38-
return store;
39-
},
40-
41-
clear(store) {
42-
store.clear();
43-
document.getElementById("main-table").innerHTML = "";
44-
},
45-
46-
swaprows(store) {
47-
store.swapRows();
48-
return store;
49-
}
6+
const click = (state: State, e: Event) => {
7+
const t = e.target as HTMLElement;
8+
if (!t) return;
9+
e.preventDefault();
10+
if (t.tagName === 'BUTTON' && t.id) {
11+
component.run(t.id as Events);
12+
} else if (t.matches('.remove')) {
13+
const id = getId(t);
14+
component.run('delete', id);
15+
} else if (t.matches('.lbl')) {
16+
const id = getId(t);
17+
component.run('select', id);
18+
}
5019
}
5120

52-
const view = (model) => {
53-
const rows = model.data.map((curr) => {
54-
const selected = curr.id == model.selected ? 'danger' : undefined;
55-
const id = curr.id;
56-
return <tr className={selected} id={id} key={id}>
57-
<td className="col-md-1">{id}</td>
58-
<td className="col-md-4">
59-
<a className="lbl">{curr.label}</a>
60-
</td>
61-
<td className="col-md-1">
62-
<a className="remove">
63-
<span className="glyphicon glyphicon-remove remove" aria-hidden="true"></span>
64-
</a>
65-
</td>
66-
<td className="col-md-6"></td>
67-
</tr>;
68-
});
69-
70-
return (<div className="container" onclick={click}>
71-
<div className="jumbotron">
72-
<div className="row">
73-
<div className="col-md-6">
74-
<h1>AppRun</h1>
75-
</div>
76-
<div className="col-md-6">
77-
<div className="row">
78-
<div className="col-sm-6 smallpad">
79-
<button type="button" className="btn btn-primary btn-block" id="run">Create 1,000 rows</button>
80-
</div>
81-
<div className="col-sm-6 smallpad">
82-
<button type="button" className="btn btn-primary btn-block" id="runlots">Create 10,000 rows</button>
83-
</div>
84-
<div className="col-sm-6 smallpad">
85-
<button type="button" className="btn btn-primary btn-block" id="add">Append 1,000 rows</button>
86-
</div>
87-
<div className="col-sm-6 smallpad">
88-
<button type="button" className="btn btn-primary btn-block" id="update">Update every 10th row</button>
89-
</div>
90-
<div className="col-sm-6 smallpad">
91-
<button type="button" className="btn btn-primary btn-block" id="clear">Clear</button>
92-
</div>
93-
<div className="col-sm-6 smallpad">
94-
<button type="button" className="btn btn-primary btn-block" id="swaprows">Swap Rows</button>
95-
</div>
96-
</div>
97-
</div>
98-
</div>
21+
const view:View<State> = state => <div class="container" $onclick={click}>
22+
<div class="jumbotron">
23+
<div class="row">
24+
<div class="col-md-6">
25+
<h1>AppRun</h1>
26+
</div>
27+
<div class="col-md-6">
28+
<div class="row">
29+
<div class="col-sm-6 smallpad">
30+
<button type="button" class="btn btn-primary btn-block" id="run">Create 1,000 rows</button>
31+
</div>
32+
<div class="col-sm-6 smallpad">
33+
<button type="button" class="btn btn-primary btn-block" id="runlots">Create 10,000 rows</button>
34+
</div>
35+
<div class="col-sm-6 smallpad">
36+
<button type="button" class="btn btn-primary btn-block" id="add">Append 1,000 rows</button>
37+
</div>
38+
<div class="col-sm-6 smallpad">
39+
<button type="button" class="btn btn-primary btn-block" id="update">Update every 10th row</button>
40+
</div>
41+
<div class="col-sm-6 smallpad">
42+
<button type="button" class="btn btn-primary btn-block" id="clear">Clear</button>
43+
</div>
44+
<div class="col-sm-6 smallpad">
45+
<button type="button" class="btn btn-primary btn-block" id="swaprows">Swap Rows</button>
46+
</div>
9947
</div>
100-
<table className="table table-hover table-striped test-data" id="main-table">
101-
<tbody>
102-
{rows}
103-
</tbody>
104-
</table>
105-
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
106-
</div>);
107-
}
48+
</div>
49+
</div>
50+
</div>
51+
<table class="table table-hover table-striped test-data" id="main-table">
52+
<tbody>
53+
{state.data.map(item => {
54+
const selected = item.id == state.selected ? 'danger' : undefined;
55+
return <tr class={selected} id={item.id} key={item.id}>
56+
<td class="col-md-1">{item.id}</td>
57+
<td class="col-md-4">
58+
<a class="lbl">{item.label}</a>
59+
</td>
60+
<td class="col-md-1">
61+
<a class="remove">
62+
<span class="glyphicon glyphicon-remove remove" aria-hidden="true"></span>
63+
</a>
64+
</td>
65+
<td class="col-md-6"></td>
66+
</tr>;
67+
})}
68+
</tbody>
69+
</table>
70+
<span class="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
71+
</div>;
10872

109-
const getId = (elem) => {
110-
while (elem) {
111-
if (elem.tagName === "TR") {
112-
return elem.id;
113-
}
114-
elem = elem.parentNode;
115-
}
116-
return undefined;
117-
}
118-
119-
const click = (e) => {
120-
const t = e.target as HTMLElement;
121-
if (!t) return;
122-
if (t.tagName === 'BUTTON' && t.id) {
123-
e.preventDefault();
124-
component.run(t.id);
125-
} else if (t.matches('.remove')) {
126-
e.preventDefault();
127-
component.run('remove', getId(t));
128-
} else if (t.matches('.lbl')) {
129-
e.preventDefault();
130-
component.run('select', getId(t));
131-
}
132-
};
73+
const component = app.start<State, Events>('main', state, view, update);
13374

134-
const component = new Component(store, view, update);
135-
component['-patch-vdom-on'] = true;
136-
component.rendered = () => {
137-
store.selected && (document.getElementById(store.selected).className = 'danger');
138-
}
139-
component.start(document.getElementById('main'));

0 commit comments

Comments
 (0)