Skip to content

Commit 381c52c

Browse files
krausestkrausest
committed
Merge branch 'yysun-master'
2 parents fc19b5d + 913f0c2 commit 381c52c

File tree

15 files changed

+888
-1427
lines changed

15 files changed

+888
-1427
lines changed

‎apprun-v1.7.0-keyed/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>AppRun</title>
6+
<link href="../css/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
7+
<link href="../css/main.css" rel="stylesheet"/>
8+
</head>
9+
<body>
10+
<div id='main'></div>
11+
<script src='dist/main.js'></script>
12+
</body>
13+
</html>

‎apprun-v1.7.0-keyed/package.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "js-framework-benchmark-apprun-v1.7.0",
3+
"version": "1.0.0",
4+
"description": "AppRun demo",
5+
"main": "index.js",
6+
"scripts": {
7+
"build-dev": "webpack -w -d",
8+
"build-prod": "webpack -p"
9+
},
10+
"keywords": [
11+
"apprun",
12+
"js benmarks"
13+
],
14+
"author": "Yiyi Sun <[email protected]",
15+
"license": "Apache-2.0",
16+
"homepage": "https://github.com/yysun/js-framework-benchmark",
17+
"repository": {
18+
"type": "git",
19+
"url": "https://github.com/yysun/js-framework-benchmark.git"
20+
},
21+
"devDependencies": {
22+
"json-loader": "^0.5.4",
23+
"ts-loader": "^2.1.0",
24+
"typescript": "^2.3.4",
25+
"webpack": "^2.6.1"
26+
},
27+
"dependencies": {
28+
"apprun": "^1.7.8"
29+
}
30+
}

‎apprun-v1.7.0-keyed/src/main.tsx‎

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
import app, { Component } from 'apprun'
2+
import Store from './store';
3+
4+
var startTime;
5+
var lastMeasure;
6+
var startMeasure = function (name) {
7+
startTime = performance.now();
8+
lastMeasure = name;
9+
}
10+
var stopMeasure = function () {
11+
window.setTimeout(function () {
12+
var stop = performance.now();
13+
console.log(lastMeasure + " took " + (stop - startTime));
14+
}, 0);
15+
}
16+
17+
const store = new Store();
18+
19+
const update = {
20+
'#benchmark': (store) => store,
21+
22+
run(store) {
23+
store.run();
24+
return store;
25+
},
26+
27+
add(store) {
28+
store.add();
29+
return store;
30+
},
31+
32+
remove(store, id) {
33+
document.getElementById(id).remove();
34+
store.delete(id);
35+
store.no_render = true;
36+
return store;
37+
},
38+
39+
select(store, id) {
40+
if (store.selected) {
41+
document.getElementById(store.selected).className = '';
42+
}
43+
document.getElementById(id).className = 'danger';
44+
store.select(id);
45+
store.no_render = true;
46+
return store;
47+
},
48+
49+
update(store) {
50+
store.update();
51+
return store;
52+
},
53+
54+
runlots(store) {
55+
store.runLots();
56+
return store;
57+
},
58+
59+
clear(store) {
60+
store.clear();
61+
return store;
62+
},
63+
64+
swaprows(store) {
65+
store.swapRows();
66+
return store;
67+
}
68+
}
69+
70+
const view = (model) => {
71+
if (model.no_render) {
72+
delete model.no_render;
73+
return;
74+
}
75+
const rows = model.data.map((curr) => {
76+
const selected = curr.id == model.selected ? 'danger' : '';
77+
const id = curr.id;
78+
return <tr className={selected} id={id} key={id}>
79+
<td className="col-md-1">{id}</td>
80+
<td className="col-md-4">
81+
<a className="lbl">{curr.label}</a>
82+
</td>
83+
<td className="col-md-1">
84+
<a className="remove">
85+
<span className="glyphicon glyphicon-remove remove" aria-hidden="true"></span>
86+
</a>
87+
</td>
88+
<td className="col-md-6"></td>
89+
</tr>;
90+
});
91+
92+
return (<div className="container">
93+
<div className="jumbotron">
94+
<div className="row">
95+
<div className="col-md-6">
96+
<h1>AppRun</h1>
97+
</div>
98+
<div className="col-md-6">
99+
<div className="row">
100+
<div className="col-sm-6 smallpad">
101+
<button type="button" className="btn btn-primary btn-block" id="run">Create 1,000 rows</button>
102+
</div>
103+
<div className="col-sm-6 smallpad">
104+
<button type="button" className="btn btn-primary btn-block" id="runlots">Create 10,000 rows</button>
105+
</div>
106+
<div className="col-sm-6 smallpad">
107+
<button type="button" className="btn btn-primary btn-block" id="add">Append 1,000 rows</button>
108+
</div>
109+
<div className="col-sm-6 smallpad">
110+
<button type="button" className="btn btn-primary btn-block" id="update">Update every 10th row</button>
111+
</div>
112+
<div className="col-sm-6 smallpad">
113+
<button type="button" className="btn btn-primary btn-block" id="clear">Clear</button>
114+
</div>
115+
<div className="col-sm-6 smallpad">
116+
<button type="button" className="btn btn-primary btn-block" id="swaprows">Swap Rows</button>
117+
</div>
118+
</div>
119+
</div>
120+
</div>
121+
</div>
122+
<table className="table table-hover table-striped test-data">
123+
<tbody>
124+
{rows}
125+
</tbody>
126+
</table>
127+
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
128+
</div>);
129+
}
130+
131+
const getId = (elem) => {
132+
while (elem) {
133+
if (elem.tagName === "TR") {
134+
return elem.id;
135+
}
136+
elem = elem.parentNode;
137+
}
138+
return undefined;
139+
}
140+
141+
document.body.addEventListener('click', e => {
142+
const t = e.target as HTMLElement;
143+
if (!t) return;
144+
if (t.tagName === 'BUTTON' && t.id) {
145+
e.preventDefault();
146+
startMeasure(t.id);
147+
component.run(t.id);
148+
stopMeasure();
149+
} else if (t.matches('.remove')) {
150+
e.preventDefault();
151+
startMeasure('remove');
152+
component.run('remove', getId(t));
153+
stopMeasure();
154+
} else if (t.matches('.lbl')) {
155+
e.preventDefault();
156+
startMeasure('select');
157+
component.run('select', getId(t));
158+
stopMeasure();
159+
}
160+
});
161+
162+
app.on('//', _ => { })
163+
app.on('#', _ => { })
164+
165+
let component = new Component(store, view, update);
166+
component.start(document.getElementById('main'));

‎apprun-v1.7.0-keyed/src/store.ts‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
function _random(max) {
2+
return Math.round(Math.random()*1000)%max;
3+
}
4+
5+
export default class Store {
6+
data = [];
7+
backup = null;
8+
selected = null;
9+
id = 1;
10+
constructor() {
11+
}
12+
buildData(count = 1000) {
13+
var 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"];
14+
var colours = ["red", "yellow", "blue", "green", "pink", "brown", "purple", "brown", "white", "black", "orange"];
15+
var nouns = ["table", "chair", "house", "bbq", "desk", "car", "pony", "cookie", "sandwich", "burger", "pizza", "mouse", "keyboard"];
16+
var data = [];
17+
for (var i = 0; i < count; i++)
18+
data.push({id: this.id++, label: adjectives[_random(adjectives.length)] + " " + colours[_random(colours.length)] + " " + nouns[_random(nouns.length)] });
19+
return data;
20+
}
21+
updateData(mod = 10) {
22+
for (let i=0;i<this.data.length;i+=10) {
23+
// this.data[i].label += ' !!!';
24+
this.data[i] = { ...this.data[i], label: this.data[i].label + ' !!!' };
25+
}
26+
}
27+
delete(id) {
28+
// const idx = this.data.findIndex(d => d.id==id);
29+
this.data = this.data.filter((e,i) => e.id!=id);
30+
if (this.selected === id) this.selected = null;
31+
}
32+
run() {
33+
this.data = this.buildData();
34+
this.selected = null;
35+
}
36+
add() {
37+
this.data = this.data.concat(this.buildData(1000));
38+
this.selected = null;
39+
}
40+
update() {
41+
this.updateData();
42+
this.selected = null;
43+
}
44+
select(id) {
45+
this.selected = id;
46+
}
47+
hideAll() {
48+
this.backup = this.data;
49+
this.data = [];
50+
this.selected = null;
51+
}
52+
showAll() {
53+
this.data = this.backup;
54+
this.backup = null;
55+
this.selected = null;
56+
}
57+
runLots() {
58+
this.data = this.buildData(10000);
59+
this.selected = null;
60+
}
61+
clear() {
62+
this.data = [];
63+
this.selected = null;
64+
}
65+
swapRows() {
66+
if (this.data.length > 998) {
67+
var a = this.data[1];
68+
this.data[1] = this.data[998];
69+
this.data[998] = a;
70+
}
71+
}
72+
}

‎apprun-v1.7.0-keyed/tsconfig.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"compilerOptions": {
3+
"target": "es5",
4+
"jsx": "react",
5+
"reactNamespace": "app",
6+
"lib": ["dom", "es2015.promise", "es5"]
7+
}
8+
}

‎apprun-v1.7.0-keyed/webpack.config.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
module.exports = {
2+
entry: {
3+
'dist/main': './src/main.tsx',
4+
},
5+
output: {
6+
filename: '[name].js'
7+
},
8+
resolve: {
9+
extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']
10+
},
11+
module: {
12+
rules: [
13+
{ test: /\.tsx?$/, loader: 'ts-loader' },
14+
{ test: /\.json$/, loader: 'json-loader' }
15+
]
16+
}
17+
}

‎apprun-v1.7.0-non-keyed/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>AppRun</title>
6+
<link href="../css/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
7+
<link href="../css/main.css" rel="stylesheet"/>
8+
</head>
9+
<body>
10+
<div id='main'></div>
11+
<script src='dist/main.js'></script>
12+
</body>
13+
</html>

‎apprun-v1.7.0-non-keyed/package.json‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
{
2+
"name": "js-framework-benchmark-apprun-v1.7.0",
3+
"version": "1.0.0",
4+
"description": "AppRun demo",
5+
"main": "index.js",
6+
"scripts": {
7+
"build-dev": "webpack -w -d",
8+
"build-prod": "webpack -p"
9+
},
10+
"keywords": [
11+
"apprun",
12+
"js benmarks"
13+
],
14+
"author": "Yiyi Sun <[email protected]",
15+
"license": "Apache-2.0",
16+
"homepage": "https://github.com/yysun/js-framework-benchmark",
17+
"repository": {
18+
"type": "git",
19+
"url": "https://github.com/yysun/js-framework-benchmark.git"
20+
},
21+
"devDependencies": {
22+
"json-loader": "^0.5.4",
23+
"ts-loader": "^2.1.0",
24+
"typescript": "^2.3.4",
25+
"webpack": "^2.6.1"
26+
},
27+
"dependencies": {
28+
"apprun": "^1.7.8"
29+
}
30+
}

0 commit comments

Comments
 (0)