Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit db7b73a

Browse files
lloiserlloiser
committed
add etch-v0.12.5
1 parent 81bdc8c commit db7b73a

File tree

17 files changed

+654
-0
lines changed

17 files changed

+654
-0
lines changed

‎etch-v0.12.5-keyed/.babelrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
presets: [ "es2015", "react"],
3+
plugins: []
4+
}

‎etch-v0.12.5-keyed/index.html

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

‎etch-v0.12.5-keyed/package.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "js-framework-benchmark-etch-keyed",
3+
"version": "1.0.0",
4+
"description": "Etch keyed demo",
5+
"scripts": {
6+
"build-dev": "webpack -w -d",
7+
"build-prod": "webpack -p"
8+
},
9+
"devDependencies": {
10+
"babel-core": "6.24.1",
11+
"babel-loader": "7.0.0",
12+
"babel-preset-es2015": "6.24.1",
13+
"babel-preset-react": "6.24.1",
14+
"webpack": "2.5.1",
15+
"jsx-loader": "0.13.2"
16+
},
17+
"dependencies": {
18+
"etch": "0.12.5"
19+
}
20+
}

‎etch-v0.12.5-keyed/src/Main.jsx

Lines changed: 133 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
1+
'use strict';
2+
/** @jsx etch.dom */
3+
4+
var etch = require('etch');
5+
const {Row} = require('./Row');
6+
const {Store} = require('./Store');
7+
8+
var startTime;
9+
var lastMeasure;
10+
var startMeasure = function(name) {
11+
startTime = performance.now();
12+
lastMeasure = name;
13+
}
14+
var stopMeasure = function() {
15+
var last = lastMeasure;
16+
if (lastMeasure) {
17+
window.setTimeout(function () {
18+
lastMeasure = null;
19+
var stop = performance.now();
20+
var duration = 0;
21+
console.log(last+" took "+(stop-startTime));
22+
}, 0);
23+
}
24+
}
25+
26+
export class Main {
27+
constructor(props, children) {
28+
this.props = props;
29+
this.children = children;
30+
31+
this.store = new Store();
32+
33+
this.select = this.select.bind(this);
34+
this.delete = this.delete.bind(this);
35+
this.add = this.add.bind(this);
36+
this.run = this.run.bind(this);
37+
this.updateRows = this.updateRows.bind(this);
38+
this.runLots = this.runLots.bind(this);
39+
this.clear = this.clear.bind(this);
40+
this.swapRows = this.swapRows.bind(this);
41+
42+
etch.initialize(this);
43+
}
44+
45+
update (props, children) {
46+
return etch.update(this).then(() => {
47+
stopMeasure();
48+
});
49+
}
50+
51+
run() {
52+
startMeasure("run");
53+
this.store.run();
54+
this.update();
55+
}
56+
add() {
57+
startMeasure("add");
58+
this.store.add();
59+
this.update();
60+
}
61+
updateRows() {
62+
startMeasure("update");
63+
this.store.update();
64+
this.update();
65+
}
66+
select(id) {
67+
startMeasure("select");
68+
this.store.select(id);
69+
this.update();
70+
}
71+
delete(id) {
72+
startMeasure("delete");
73+
this.store.delete(id);
74+
this.update();
75+
}
76+
runLots() {
77+
startMeasure("runLots");
78+
this.store.runLots();
79+
this.update();
80+
}
81+
clear() {
82+
startMeasure("clear");
83+
this.store.clear();
84+
this.update();
85+
}
86+
swapRows() {
87+
startMeasure("swapRows");
88+
this.store.swapRows();
89+
this.update();
90+
}
91+
render () {
92+
let rows = this.store.data.map((d,i) => {
93+
return <Row key={d.id} data={d} onClick={this.select} onDelete={this.delete} styleClass={d.id === this.store.selected ? 'danger':''}></Row>
94+
});
95+
return (<div className="container">
96+
<div className="jumbotron">
97+
<div className="row">
98+
<div className="col-md-6">
99+
<h1>etch v0.12.5 (keyed)</h1>
100+
</div>
101+
<div className="col-md-6">
102+
<div className="row">
103+
<div className="col-sm-6 smallpad">
104+
<button type="button" className="btn btn-primary btn-block" id="run" onClick={this.run}>Create 1,000 rows</button>
105+
</div>
106+
<div className="col-sm-6 smallpad">
107+
<button type="button" className="btn btn-primary btn-block" id="runlots" onClick={this.runLots}>Create 10,000 rows</button>
108+
</div>
109+
<div className="col-sm-6 smallpad">
110+
<button type="button" className="btn btn-primary btn-block" id="add" onClick={this.add}>Append 1,000 rows</button>
111+
</div>
112+
<div className="col-sm-6 smallpad">
113+
<button type="button" className="btn btn-primary btn-block" id="update" onClick={this.updateRows}>Update every 10th row</button>
114+
</div>
115+
<div className="col-sm-6 smallpad">
116+
<button type="button" className="btn btn-primary btn-block" id="clear" onClick={this.clear}>Clear</button>
117+
</div>
118+
<div className="col-sm-6 smallpad">
119+
<button type="button" className="btn btn-primary btn-block" id="swaprows" onClick={this.swapRows}>Swap Rows</button>
120+
</div>
121+
</div>
122+
</div>
123+
</div>
124+
</div>
125+
<table className="table table-hover table-striped test-data">
126+
<tbody>
127+
{rows}
128+
</tbody>
129+
</table>
130+
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
131+
</div>);
132+
}
133+
}

‎etch-v0.12.5-keyed/src/Row.jsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
'use strict';
2+
/** @jsx etch.dom */
3+
4+
var etch = require('etch');
5+
6+
export class Row {
7+
constructor(props, children) {
8+
this.props = props;
9+
this.children = children;
10+
11+
this.onDelete = this.onDelete.bind(this);
12+
this.onClick = this.onClick.bind(this);
13+
14+
etch.initialize(this);
15+
}
16+
17+
update(nextProps, children) {
18+
if (nextProps.data === this.props.data && nextProps.styleClass === this.props.styleClass) {
19+
return Promise.resolve();
20+
}
21+
this.props = Object.assign({}, this.props, nextProps);
22+
this.children = children;
23+
return etch.update(this);
24+
}
25+
26+
onDelete() {
27+
this.props.onDelete(this.props.data.id);
28+
}
29+
onClick() {
30+
this.props.onClick(this.props.data.id);
31+
}
32+
33+
render() {
34+
let {styleClass, onClick, onDelete, data} = this.props;
35+
return (<tr className={styleClass}>
36+
<td className="col-md-1">{data.id}</td>
37+
<td className="col-md-4">
38+
<a onClick={this.onClick}>{data.label}</a>
39+
</td>
40+
<td className="col-md-1"><a onClick={this.onDelete}><span className="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
41+
<td className="col-md-6"></td>
42+
</tr>);
43+
}
44+
}

‎etch-v0.12.5-keyed/src/Store.es6.js

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

‎etch-v0.12.5-keyed/src/main.es6.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
'use strict';
2+
3+
let {Main} = require('./Main');
4+
let component = new Main({});
5+
document.getElementById('main').appendChild(component.element);

‎etch-v0.12.5-keyed/webpack.config.js

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
'use strict';
2+
require("babel-plugin-syntax-jsx")
3+
var path = require('path')
4+
var webpack = require('webpack')
5+
var cache = {};
6+
var loaders = [
7+
{
8+
test: /\.jsx$/,
9+
loader: 'babel-loader'
10+
},
11+
{
12+
test: /(\.es6)?\.js$/,
13+
loader: 'babel-loader'
14+
},
15+
{
16+
test: /\.css$/,
17+
loader: 'style-loader!css-loader'
18+
}
19+
];
20+
var extensions = [
21+
'.js', '.jsx', '.es6.js'
22+
];
23+
24+
module.exports = [{
25+
cache: cache,
26+
module: {
27+
loaders: loaders
28+
},
29+
entry: {
30+
main: './src/main.es6.js',
31+
},
32+
output: {
33+
path: path.resolve(__dirname, "dist"),
34+
filename: '[name].js'
35+
},
36+
resolve: {
37+
extensions: extensions,
38+
modules: [
39+
__dirname,
40+
path.resolve(__dirname, "src"),
41+
"node_modules"
42+
]
43+
},
44+
plugins: [
45+
new webpack.DefinePlugin({
46+
'process.env.NODE_ENV': '"production"'
47+
})
48+
]
49+
}];

‎etch-v0.12.5-non-keyed/.babelrc

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
presets: [ "es2015", "react"],
3+
plugins: []
4+
}

‎etch-v0.12.5-non-keyed/index.html

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

‎etch-v0.12.5-non-keyed/package.json

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
{
2+
"name": "js-framework-benchmark-etch-non-keyed",
3+
"version": "1.0.0",
4+
"description": "Etch non-keyed demo",
5+
"scripts": {
6+
"build-dev": "webpack -w -d",
7+
"build-prod": "webpack -p"
8+
},
9+
"devDependencies": {
10+
"babel-core": "6.24.1",
11+
"babel-loader": "7.0.0",
12+
"babel-preset-es2015": "6.24.1",
13+
"babel-preset-react": "6.24.1",
14+
"webpack": "2.5.1",
15+
"jsx-loader": "0.13.2"
16+
},
17+
"dependencies": {
18+
"etch": "0.12.5"
19+
}
20+
}

0 commit comments

Comments
 (0)