Skip to content

Commit d56f20b

Browse files
daiyamdaiyam
committed
Cycle.js with jsx
1 parent d2d68ac commit d56f20b

File tree

7 files changed

+198
-212
lines changed

7 files changed

+198
-212
lines changed

‎cyclejs-v6.0.3/.babelrc‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎cyclejs-v6.0.3/package.json‎

Lines changed: 13 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,25 @@
11
{
22
"name": "js-framework-benchmark-cyclejs",
3-
"version": "1.1.1",
4-
"description": "Cycle.js demo",
5-
"main": "index.js",
3+
"version": "1.0.0",
4+
"description": "Benchmark for Cycle.js framework",
65
"scripts": {
7-
"build-dev": "node ./node_modules/webpack/bin/webpack.js -w -d -c webpack.config.js",
8-
"build-prod": "webpack -p -c webpack.config.js",
6+
"build-dev": "webpack -w -d -c webpack.config.js",
7+
"build-prod": "webpack -d -c webpack.config.js",
98
"start": "http-server -c-1 ."
109
},
11-
"keywords": [
12-
"react",
13-
"webpack"
14-
],
15-
"author": "Stefan Krause",
16-
"license": "Apache-2.0",
17-
"homepage": "https://github.com/krausest/js-framework-benchmark/cyclejs-v6.0.3",
18-
"repository": {
19-
"type": "git",
20-
"url": "https://github.com/krausest/js-framework-benchmark.git"
10+
"devDependencies": {
11+
"babel-core": "^6.8.0",
12+
"babel-loader": "^6.2.4",
13+
"babel-plugin-transform-react-jsx": "^6.8.0",
14+
"babel-preset-es2015": "^6.5.0",
15+
"babel-preset-stage-0": "^6.5.0",
16+
"webpack": "^1.13.0"
2117
},
2218
"dependencies": {
2319
"@cycle/core": "6.0.3",
24-
"@cycle/dom": "^9.4.0",
25-
"@cycle/isolate": "^1.2.1",
26-
"babel-core": "^6.8.0",
27-
"babel-loader": "^6.2.4",
20+
"@cycle/dom": "9.4.0",
21+
"@cycle/isolate": "1.2.1",
2822
"rx": "^4.1.0",
2923
"rx-combine-latest-obj": "^1.0.2"
30-
},
31-
"devDependencies": {
32-
"babel-preset-es2015": "^6.6.0",
33-
"babel-preset-stage-0": "^6.5.0",
34-
"http-server": "^0.9.0",
35-
"webpack": "^1.13.0"
3624
}
3725
}

‎cyclejs-v6.0.3/src/SingleMain.es6‎

Lines changed: 0 additions & 179 deletions
This file was deleted.

‎cyclejs-v6.0.3/src/main.jsx‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
'use strict';
2+
3+
import Rx from 'rx';
4+
import Cycle from '@cycle/core';
5+
import {hJSX, makeDOMDriver} from '@cycle/dom';
6+
7+
let id = 1;
8+
9+
function _random(max) {
10+
return Math.round(Math.random()*1000)%max;
11+
};
12+
13+
let 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+
let colours = ['red', 'yellow', 'blue', 'green', 'pink', 'brown', 'purple', 'brown', 'white', 'black', 'orange'];
15+
let nouns = ['table', 'chair', 'house', 'bbq', 'desk', 'car', 'pony', 'cookie', 'sandwich', 'burger', 'pizza', 'mouse', 'keyboard'];
16+
17+
function buildData(count = 1000) {
18+
var data = [];
19+
20+
for(var i = 0; i < count; i++) {
21+
data.push({
22+
id: id++,
23+
label: adjectives[_random(adjectives.length)] + ' ' + colours[_random(colours.length)] + ' ' + nouns[_random(nouns.length)]
24+
});
25+
}
26+
27+
return data;
28+
};
29+
30+
const Operations = {
31+
Run: state => ({items: buildData(), selected: undefined}),
32+
Update: state => ({items: state.items.map((item, idx) => (idx%10 === 0) ? ({id:item.id, label: item.label+' !!!'}) : item), selected: state.selected}),
33+
Add: state => ({items: state.items.concat(buildData(1000)), selected: state.selected}),
34+
SelectItem: item => state => ({items: state.items, selected: item}),
35+
RemoveItem: id => state => ({items: state.items.filter(item => item.id !== id), selected: state.selected}),
36+
HideAll: state => ({items: [], selected: null, olditems: state.items}),
37+
ShowAll: state => ({items: state.olditems, selected: null}),
38+
RunLots: state => ({items: buildData(10000), selected: null}),
39+
Clear: state => ({items: [], selected: null}),
40+
SwapRows: state => {
41+
let d = state.items.splice(0);
42+
if(d.length > 10) {
43+
var a = d[4];
44+
d[4] = d[9];
45+
d[9] = a;
46+
}
47+
return {items: d, selected: state.selected};
48+
}
49+
};
50+
51+
function intent(DOMSource) {
52+
return Rx.Observable.merge(
53+
DOMSource.select('#run').events('click').map(evt => Operations.Run),
54+
DOMSource.select('#update').events('click').map(evt => Operations.Update),
55+
DOMSource.select('#add').events('click').map(evt => Operations.Add),
56+
DOMSource.select('#hideall').events('click').map(evt => Operations.HideAll),
57+
DOMSource.select('#showall').events('click').map(evt => Operations.ShowAll),
58+
DOMSource.select('#runlots').events('click').map(evt => Operations.RunLots),
59+
DOMSource.select('#clear').events('click').map(evt => Operations.Clear),
60+
DOMSource.select('#swaprows').events('click').map(evt => Operations.SwapRows),
61+
DOMSource.select('.remove').events('click').map(evt => {
62+
evt.preventDefault();
63+
evt.stopPropagation();
64+
65+
let el = evt.target;
66+
while(el && !el.id) {
67+
el = el.parentNode;
68+
}
69+
70+
return Operations.RemoveItem(parseInt(el.id));
71+
}),
72+
DOMSource.select('.select').events('click').map(evt => {
73+
evt.preventDefault();
74+
evt.stopPropagation();
75+
76+
let el = evt.target;
77+
while(el && !el.id) {
78+
el = el.parentNode;
79+
}
80+
81+
return Operations.SelectItem(parseInt(el.id));
82+
})
83+
);
84+
};
85+
86+
function model(operation$) {
87+
return operation$.startWith({
88+
items: []
89+
}).scan((state, operation) => {
90+
return operation(state);
91+
});
92+
}
93+
94+
function view(state$) {
95+
return state$.map(state =>
96+
<div className='container'>
97+
<div className='jumbotron'>
98+
<div className='row'>
99+
<div className='col-md-8'>
100+
<h1>Cycle.js</h1>
101+
</div>
102+
<div className='col-md-4'>
103+
<button type='button' className='btn btn-primary btn-block' id='add'>Add 1000 rows</button>
104+
<button type='button' className='btn btn-primary btn-block' id='run'>Create 1000 rows</button>
105+
<button type='button' className='btn btn-primary btn-block' id='update'>Update every 10th row</button>
106+
<button type='button' className='btn btn-primary btn-block' id='hideall'>HideAll</button>
107+
<button type='button' className='btn btn-primary btn-block' id='showall'>ShowAll</button>
108+
<button type='button' className='btn btn-primary btn-block' id='runlots'>Create lots of rows</button>
109+
<button type='button' className='btn btn-primary btn-block' id='clear'>Clear</button>
110+
<button type='button' className='btn btn-primary btn-block' id='swaprows'>Swap Rows</button>
111+
<h3 id='duration'><span className='glyphicon glyphicon-remove' aria-hidden='true'></span>&nbsp;</h3>
112+
</div>
113+
</div>
114+
</div>
115+
<table className='table table-hover table-striped test-data'>
116+
<tbody>
117+
{
118+
state.items.map(item =>
119+
<tr id={item.id} className={state.selected === item.id ? 'danger' : ''}>
120+
<td className='col-md-1'>{item.id}</td>
121+
<td className='col-md-4'>
122+
<a className='select'>{item.label}</a>
123+
</td>
124+
<td className='col-md-1'>
125+
<a className='remove'><span className='glyphicon glyphicon-remove'></span></a>
126+
</td>
127+
<td className='col-md-6'/>
128+
</tr>
129+
)
130+
}
131+
</tbody>
132+
</table>
133+
</div>
134+
);
135+
}
136+
137+
function main(sources) {
138+
const state$ = model(intent(sources.DOM));
139+
140+
return {
141+
DOM: view(state$)
142+
}
143+
};
144+
145+
var drivers = {
146+
DOM: makeDOMDriver('#main')
147+
};
148+
149+
Cycle.run(main, drivers);

0 commit comments

Comments
 (0)