Skip to content

Commit bb6c0bf

Browse files
krausestkrausest
committed
Merge branch 'master' of https://github.com/solkimicreb/js-framework-benchmark into solkimicreb-master
2 parents 7c57f7d + 6938fdf commit bb6c0bf

File tree

10 files changed

+296
-0
lines changed

10 files changed

+296
-0
lines changed

‎react-v15.5.4-easy-state-v1.0.3/.babelrc‎

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

‎react-v15.5.4-easy-state-v1.0.3/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>React v15.5.4 + React Easy State 1.0.3</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>

‎react-v15.5.4-easy-state-v1.0.3/package.json‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
{
2+
"name": "js-framework-benchmark-react-easy-state",
3+
"version": "1.0.0",
4+
"description": "React Easy State demo",
5+
"main": "src/Main.jsx",
6+
"scripts": {
7+
"build-prod": "rollup -c rollup.config.prod.js",
8+
"build-dev": "rollup -w -c rollup.config.dev.js"
9+
},
10+
"keywords": [
11+
"react",
12+
"rollup"
13+
],
14+
"author": "Stefan Krause",
15+
"license": "Apache-2.0",
16+
"homepage": "https://github.com/krausest/js-framework-benchmark",
17+
"repository": {
18+
"type": "git",
19+
"url": "https://github.com/krausest/js-framework-benchmark.git"
20+
},
21+
"devDependencies": {
22+
"babel-core": "6.24.1",
23+
"babel-plugin-external-helpers": "^6.22.0",
24+
"babel-plugin-transform-decorators-legacy": "1.3.4",
25+
"babel-preset-react": "6.24.1",
26+
"babel-preset-stage-0": "6.24.1",
27+
"babili": "0.1.2",
28+
"rollup": "0.41.6",
29+
"rollup-plugin-babel": "2.7.1",
30+
"rollup-plugin-babili": "3.0.0",
31+
"rollup-plugin-commonjs": "8.0.2",
32+
"rollup-plugin-node-resolve": "3.0.0",
33+
"rollup-plugin-replace": "1.1.1",
34+
"rollup-watch": "3.2.2",
35+
"webpack": "2.5.1"
36+
},
37+
"dependencies": {
38+
"react-easy-state": "1.0.3",
39+
"react": "15.5.4",
40+
"react-dom": "15.5.4"
41+
}
42+
}

‎react-v15.5.4-easy-state-v1.0.3/rollup.config.dev.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import commonjs from 'rollup-plugin-commonjs'
2+
import resolve from 'rollup-plugin-node-resolve'
3+
import babel from 'rollup-plugin-babel'
4+
import replace from 'rollup-plugin-replace'
5+
6+
export default {
7+
entry: 'src/Main.jsx',
8+
format: 'iife',
9+
moduleName: 'reactEasyState',
10+
dest: 'dist/main.js',
11+
sourceMap: 'inline',
12+
plugins: [
13+
resolve({ jsnext: true, main: true, extensions: [ '.js', '.json', '.jsx' ] }),
14+
commonjs({
15+
namedExports: { 'node_modules/react/react.js': ['Component'] }
16+
}),
17+
babel({ exclude: 'node_modules/**' }),
18+
replace({ 'process.env.NODE_ENV': JSON.stringify('development') })
19+
]
20+
}

‎react-v15.5.4-easy-state-v1.0.3/rollup.config.prod.js‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import commonjs from 'rollup-plugin-commonjs'
2+
import resolve from 'rollup-plugin-node-resolve'
3+
import babel from 'rollup-plugin-babel'
4+
import babili from 'rollup-plugin-babili'
5+
import replace from 'rollup-plugin-replace'
6+
7+
export default {
8+
entry: 'src/Main.jsx',
9+
format: 'iife',
10+
moduleName: 'reactEasyState',
11+
dest: 'dist/main.js',
12+
plugins: [
13+
resolve({ jsnext: true, main: true, extensions: [ '.js', '.json', '.jsx' ] }),
14+
commonjs({
15+
namedExports: { 'node_modules/react/react.js': ['Component'] }
16+
}),
17+
babel({ exclude: 'node_modules/**' }),
18+
babili({ comments: false }),
19+
replace({ 'process.env.NODE_ENV': JSON.stringify('production') })
20+
]
21+
}

‎react-v15.5.4-easy-state-v1.0.3/src/Main.jsx‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
import React, { Component } from 'react'
2+
import ReactDOM from 'react-dom'
3+
import easyState from 'react-easy-state'
4+
import Row from './Row'
5+
import randomSentence from './randomSentence'
6+
import {startMeasure, stopMeasure} from './logPerf'
7+
8+
let idCounter = 1
9+
10+
@easyState
11+
class Main extends Component {
12+
constructor (props) {
13+
super(props)
14+
this.state = { rows: [] }
15+
}
16+
17+
componentDidUpdate() {
18+
stopMeasure()
19+
}
20+
21+
componentDidMount() {
22+
stopMeasure()
23+
}
24+
25+
buildRows (numOfRows) {
26+
const { state } = this
27+
for (let i = 0; i < numOfRows; i++) {
28+
state.rows.push({ id: idCounter++, label: randomSentence() })
29+
}
30+
}
31+
32+
run () {
33+
startMeasure('run')
34+
const { state } = this
35+
state.rows = []
36+
state.selected = undefined
37+
this.buildRows(1000)
38+
}
39+
40+
add () {
41+
startMeasure('add')
42+
this.buildRows(1000)
43+
}
44+
45+
update () {
46+
startMeasure('update')
47+
const { rows } = this.state
48+
for (let i = 0; i < rows.length; i += 10) {
49+
rows[i].label += ' !!!'
50+
}
51+
}
52+
53+
select (row) {
54+
startMeasure('select')
55+
const { state } = this
56+
state.selected = row
57+
}
58+
59+
delete (row) {
60+
startMeasure('delete')
61+
const { rows } = this.state
62+
rows.splice(rows.indexOf(row), 1)
63+
}
64+
65+
runLots () {
66+
startMeasure('runLots')
67+
const { state } = this
68+
state.rows = []
69+
state.selected = undefined
70+
this.buildRows(10000)
71+
}
72+
73+
clear() {
74+
startMeasure('clear')
75+
const { state } = this
76+
state.rows = []
77+
state.selected = undefined
78+
}
79+
80+
swapRows() {
81+
startMeasure('swapRows')
82+
const { rows } = this.state
83+
if (rows.length > 10) {
84+
const temp = rows[4]
85+
rows[4] = rows[9]
86+
rows[9] = temp
87+
}
88+
}
89+
90+
render() {
91+
const { rows, selected } = this.state
92+
93+
return (
94+
<div className="container">
95+
<div className="jumbotron">
96+
<div className="row">
97+
<div className="col-md-6">
98+
<h1>React v15.5.4 + Easy State 1.0.3</h1>
99+
</div>
100+
<div className="col-md-6">
101+
<div className="row">
102+
<div className="col-sm-6 smallpad">
103+
<button type="button" className="btn btn-primary btn-block" id="run" onClick={this.run}>Create 1,000 rows</button>
104+
</div>
105+
<div className="col-sm-6 smallpad">
106+
<button type="button" className="btn btn-primary btn-block" id="runlots" onClick={this.runLots}>Create 10,000 rows</button>
107+
</div>
108+
<div className="col-sm-6 smallpad">
109+
<button type="button" className="btn btn-primary btn-block" id="add" onClick={this.add}>Append 1,000 rows</button>
110+
</div>
111+
<div className="col-sm-6 smallpad">
112+
<button type="button" className="btn btn-primary btn-block" id="update" onClick={this.update}>Update every 10th row</button>
113+
</div>
114+
<div className="col-sm-6 smallpad">
115+
<button type="button" className="btn btn-primary btn-block" id="clear" onClick={this.clear}>Clear</button>
116+
</div>
117+
<div className="col-sm-6 smallpad">
118+
<button type="button" className="btn btn-primary btn-block" id="swaprows" onClick={this.swapRows}>Swap Rows</button>
119+
</div>
120+
</div>
121+
</div>
122+
</div>
123+
</div>
124+
<table className="table table-hover table-striped test-data">
125+
<tbody>
126+
{rows.map(row =>
127+
<Row onClick={this.select} onDelete={this.delete}
128+
key={row.id} row={row} styleClass={row === selected ? 'danger' : ''}></Row>)}
129+
</tbody>
130+
</table>
131+
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
132+
</div>
133+
)
134+
}
135+
}
136+
137+
ReactDOM.render(<Main/>, document.getElementById('main'))

‎react-v15.5.4-easy-state-v1.0.3/src/Row.jsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import React, { Component } from 'react'
2+
import easyState from 'react-easy-state'
3+
4+
@easyState
5+
export default class Row extends Component {
6+
onDelete () {
7+
const { row, onDelete } = this.props
8+
onDelete(row)
9+
}
10+
11+
onClick () {
12+
const { row, onClick } = this.props
13+
onClick(row)
14+
}
15+
16+
render() {
17+
const { row, styleClass } = this.props
18+
19+
return (
20+
<tr className={styleClass}>
21+
<td className="col-md-1">{row.id}</td>
22+
<td className="col-md-4">
23+
<a onClick={this.onClick}>{row.label}</a>
24+
</td>
25+
<td className="col-md-1"><a onClick={this.onDelete}><span className="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
26+
<td className="col-md-6"></td>
27+
</tr>
28+
)
29+
}
30+
}

‎react-v15.5.4-easy-state-v1.0.3/src/logPerf.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
let startTime
2+
let lastMeasure
3+
4+
export function startMeasure (name) {
5+
startTime = performance.now()
6+
lastMeasure = name
7+
}
8+
9+
export function stopMeasure () {
10+
let last = lastMeasure
11+
if (lastMeasure) {
12+
window.setTimeout(() => {
13+
lastMeasure = null
14+
let stop = performance.now()
15+
console.log(last + " took " + (stop - startTime))
16+
})
17+
}
18+
}

‎react-v15.5.4-easy-state-v1.0.3/src/randomSentence.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const 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'];
2+
const colours = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange'];
3+
const nouns = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza', 'mouse', 'keyboard'];
4+
5+
export default function randomSentence () {
6+
return `${adjectives[random(adjectives.length)]} ${colours[random(colours.length)]} ${nouns[random(nouns.length)]}`
7+
}
8+
9+
function random (max) {
10+
return Math.round(Math.random() * 1000) % max
11+
}

‎webdriver-ts/src/common.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@ export let frameworks = [
7373
f("react-lite-v0.15.30", false),
7474
f("react-v15.5.4-keyed", false),
7575
f("react-v15.5.4-non-keyed", true),
76+
f("react-v15.5.4-easy-state-v1.0.3", false),
7677
f("react-v15.5.4-mobX-v3.1.9", false),
7778
f("react-v15.5.4-redux-v3.6.0", false),
7879
f("riot-v3.5.0", true),

0 commit comments

Comments
 (0)