Skip to content

Commit ad2e612

Browse files
krausestkrausest
committed
Merge branch 'Havunen-master'
2 parents 3add6d5 + c4a9b5e commit ad2e612

File tree

12 files changed

+259
-199
lines changed

12 files changed

+259
-199
lines changed

‎frameworks/keyed/inferno/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<link href="/css/currentStyle.css" rel="stylesheet"/>
77
</head>
88
<body>
9-
<div id='main'></div>
10-
<script src='dist/main.js'></script>
9+
<div id="main"></div>
10+
<script src="dist/main.js"></script>
1111
</body>
1212
</html>

‎frameworks/keyed/inferno/package.json

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,18 @@
2020
"url": "https://github.com/krausest/js-framework-benchmark.git"
2121
},
2222
"devDependencies": {
23-
"@babel/core": "^7.1.5",
24-
"@babel/preset-env": "7.3.1",
25-
"babel-plugin-inferno": "6.0.4",
26-
"rollup": "^1.1.2",
27-
"rollup-plugin-alias": "^1.4.0",
28-
"rollup-plugin-babel": "^4.0.3",
29-
"rollup-plugin-commonjs": "^9.2.0",
30-
"rollup-plugin-node-resolve": "^4.0.0",
31-
"rollup-plugin-replace": "^2.1.0",
32-
"rollup-plugin-uglify": "^6.0.0"
23+
"@babel/core": "7.5.5",
24+
"@babel/preset-env": "7.5.5",
25+
"babel-plugin-inferno": "6.1.0",
26+
"rollup": "1.17.0",
27+
"rollup-plugin-alias": "1.5.2",
28+
"rollup-plugin-babel": "4.3.3",
29+
"rollup-plugin-commonjs": "10.0.1",
30+
"rollup-plugin-node-resolve": "5.2.0",
31+
"rollup-plugin-replace": "2.2.0",
32+
"rollup-plugin-terser": "5.1.1"
3333
},
3434
"dependencies": {
35-
"inferno": "7.1.2"
35+
"inferno": "7.2.0"
3636
}
3737
}

‎frameworks/keyed/inferno/rollup.config.js

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ const nodeResolvePlugin = require('rollup-plugin-node-resolve');
33
const babelPlugin = require('rollup-plugin-babel');
44
const path = require('path');
55
const replace = require('rollup-plugin-replace');
6-
import { uglify } from 'rollup-plugin-uglify';
6+
const terser = require('rollup-plugin-terser').terser;
77
const alias = require('rollup-plugin-alias');
88

99
const isProduction = process.env.production;
@@ -31,7 +31,25 @@ const plugins = [
3131
];
3232

3333
if (isProduction) {
34-
plugins.push(uglify());
34+
plugins.push(terser({
35+
parse: {
36+
ecma: 8,
37+
},
38+
compress: {
39+
ecma: 5,
40+
inline: true,
41+
if_return: false,
42+
reduce_funcs: false,
43+
passes: 5,
44+
comparisons: false,
45+
},
46+
output: {
47+
ecma: 5,
48+
comments: false,
49+
},
50+
toplevel: true,
51+
module: true,
52+
}));
3553
}
3654

3755
// When in development, we want to use dev build of inferno.

‎frameworks/keyed/inferno/src/controller.jsx

Lines changed: 93 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,31 @@
1-
'use strict';
2-
31
import { Store } from './store.es6'
42
import { linkEvent, Component, render } from 'inferno'
53

6-
function Row({ d, id, styleClass, deleteFunc, selectFunc }) {
4+
function Row({ label, id, selected, deleteFunc, selectFunc }) {
75
/*
86
* Only <td className="col-md-1"> and <a onClick={linkEvent(id, selectFunc)}/>, nodes needs children shape flags
97
* Because they have dynamic children. We can pre-define children type by using ChildFlags
108
*/
119
return (
12-
<tr className={styleClass}>
13-
<td className="col-md-1" $HasTextChildren>{id}</td>
14-
<td className="col-md-4">
15-
<a onClick={linkEvent(id, selectFunc)} $HasTextChildren>{d.label}</a>
16-
</td>
17-
<td className="col-md-1">
18-
<a onClick={linkEvent(id, deleteFunc)}>
19-
<span className="glyphicon glyphicon-remove" aria-hidden="true"/>
20-
</a>
21-
</td>
22-
<td className="col-md-6"/>
23-
</tr>
10+
<tr className={selected ? 'danger' : null}>
11+
<td className="col-md-1" $HasTextChildren>{id}</td>
12+
<td className="col-md-4">
13+
<a onClick={linkEvent(id, selectFunc)} $HasTextChildren>{label}</a>
14+
</td>
15+
<td className="col-md-1">
16+
<a onClick={linkEvent(id, deleteFunc)}>
17+
<span className="glyphicon glyphicon-remove" aria-hidden="true"/>
18+
</a>
19+
</td>
20+
<td className="col-md-6"/>
21+
</tr>
2422
)
2523
}
2624

2725
// Inferno functional components has hooks, when they are static they can be defined in defaultHooks property
2826
Row.defaultHooks = {
2927
onComponentShouldUpdate(lastProps, nextProps) {
30-
return nextProps.d !== lastProps.d || nextProps.styleClass !== lastProps.styleClass;
28+
return nextProps.label !== lastProps.label || nextProps.selected !== lastProps.selected;
3129
}
3230
};
3331

@@ -41,28 +39,74 @@ function createRows(store, deleteFunc, selectFunc) {
4139
const id = d.id;
4240

4341
rows.push(
44-
<Row
45-
styleClass={id === selected ? 'danger' : null}
46-
key={id}
47-
d={d}
48-
id={id}
49-
deleteFunc={deleteFunc}
50-
selectFunc={selectFunc}
51-
/>
42+
<Row
43+
selected={id === selected}
44+
key={id}
45+
label={d.label}
46+
id={id}
47+
deleteFunc={deleteFunc}
48+
selectFunc={selectFunc}
49+
/>
5250
);
5351
}
5452

55-
/*
56-
* We can optimize rendering rows by pre-defining children types.
57-
* In this case all children are keyed: so we add flag $HasKeyedChildren and $NoNormalize
58-
* when specific shape is used we need to make sure there are no holes in the array and are keys are unique
59-
*/
60-
return <tbody $HasKeyedChildren>{rows}</tbody>;
53+
return rows;
6154
}
6255

56+
function Header({run, runLots, add, update, clear, swapRows}) {
57+
return (
58+
<div className="jumbotron">
59+
<div className="row">
60+
<div className="col-md-6">
61+
<h1>Inferno - keyed</h1>
62+
</div>
63+
<div className="col-md-6">
64+
<div className="row">
65+
<div className="col-sm-6 smallpad">
66+
<button type="button" className="btn btn-primary btn-block" id="run" onClick={run}>Create 1,000
67+
rows
68+
</button>
69+
</div>
70+
<div className="col-sm-6 smallpad">
71+
<button type="button" className="btn btn-primary btn-block" id="runlots" onClick={runLots}>Create
72+
10,000 rows
73+
</button>
74+
</div>
75+
<div className="col-sm-6 smallpad">
76+
<button type="button" className="btn btn-primary btn-block" id="add" onClick={add}>Append 1,000
77+
rows
78+
</button>
79+
</div>
80+
<div className="col-sm-6 smallpad">
81+
<button type="button" className="btn btn-primary btn-block" id="update" onClick={update}>Update
82+
every 10th row
83+
</button>
84+
</div>
85+
<div className="col-sm-6 smallpad">
86+
<button type="button" className="btn btn-primary btn-block" id="clear" onClick={clear}>Clear
87+
</button>
88+
</div>
89+
<div className="col-sm-6 smallpad">
90+
<button type="button" className="btn btn-primary btn-block" id="swaprows" onClick={swapRows}>Swap
91+
Rows
92+
</button>
93+
</div>
94+
</div>
95+
</div>
96+
</div>
97+
</div>
98+
);
99+
}
100+
101+
Header.defaultHooks = {
102+
onComponentShouldUpdate() {
103+
return false;
104+
}
105+
};
106+
63107
export class Controller extends Component {
64-
constructor(props) {
65-
super(props);
108+
constructor(props, context) {
109+
super(props, context);
66110
this.state = { store: new Store() };
67111
this.select = this.select.bind(this);
68112
this.delete = this.delete.bind(this);
@@ -128,52 +172,24 @@ export class Controller extends Component {
128172
* Only <table> needs $HasVNodeChildren flag everything else is static
129173
* tables children is tbody so another vNode, no other flags needed
130174
*/
131-
return (<div className="container">
132-
<div className="jumbotron">
133-
<div className="row">
134-
<div className="col-md-6">
135-
<h1>Inferno - keyed</h1>
136-
</div>
137-
<div className="col-md-6">
138-
<div className="row">
139-
<div className="col-sm-6 smallpad">
140-
<button type="button" className="btn btn-primary btn-block" id="run" onClick={this.run}>Create 1,000
141-
rows
142-
</button>
143-
</div>
144-
<div className="col-sm-6 smallpad">
145-
<button type="button" className="btn btn-primary btn-block" id="runlots" onClick={this.runLots}>Create
146-
10,000 rows
147-
</button>
148-
</div>
149-
<div className="col-sm-6 smallpad">
150-
<button type="button" className="btn btn-primary btn-block" id="add" onClick={this.add}>Append 1,000
151-
rows
152-
</button>
153-
</div>
154-
<div className="col-sm-6 smallpad">
155-
<button type="button" className="btn btn-primary btn-block" id="update" onClick={this.update}>Update
156-
every 10th row
157-
</button>
158-
</div>
159-
<div className="col-sm-6 smallpad">
160-
<button type="button" className="btn btn-primary btn-block" id="clear" onClick={this.clear}>Clear
161-
</button>
162-
</div>
163-
<div className="col-sm-6 smallpad">
164-
<button type="button" className="btn btn-primary btn-block" id="swaprows" onClick={this.swapRows}>Swap
165-
Rows
166-
</button>
167-
</div>
168-
</div>
169-
</div>
175+
return (
176+
<div className="container">
177+
<Header
178+
run={this.run}
179+
runLots={this.runLots}
180+
add={this.add}
181+
update={this.update}
182+
clear={this.clear}
183+
swapRows={this.swapRows}
184+
/>
185+
<table className="table table-hover table-striped test-data" $HasVNodeChildren>
186+
<tbody $HasKeyedChildren>
187+
{createRows(this.state.store, this.delete, this.select)}
188+
</tbody>
189+
</table>
190+
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"/>
170191
</div>
171-
</div>
172-
<table className="table table-hover table-striped test-data" $HasVNodeChildren>
173-
{createRows(this.state.store, this.delete, this.select)}
174-
</table>
175-
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"/>
176-
</div>);
192+
);
177193
}
178194
}
179195

‎frameworks/keyed/inferno/src/main.es6.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
1-
'use strict';
2-
31
import './controller';

‎frameworks/keyed/inferno/src/store.es6.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
'use strict';
2-
31
function random(max) {
42
return Math.round(Math.random() * 1000) % max;
53
}

‎frameworks/non-keyed/inferno/index.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<link href="/css/currentStyle.css" rel="stylesheet"/>
77
</head>
88
<body>
9-
<div id='main'></div>
10-
<script src='dist/main.js'></script>
9+
<div id="main"></div>
10+
<script src="dist/main.js"></script>
1111
</body>
1212
</html>

‎frameworks/non-keyed/inferno/package.json

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -20,18 +20,18 @@
2020
"url": "https://github.com/krausest/js-framework-benchmark.git"
2121
},
2222
"devDependencies": {
23-
"@babel/core": "^7.1.5",
24-
"@babel/preset-env": "7.3.1",
25-
"babel-plugin-inferno": "6.0.4",
26-
"rollup": "^1.1.2",
27-
"rollup-plugin-alias": "^1.4.0",
28-
"rollup-plugin-babel": "^4.0.3",
29-
"rollup-plugin-commonjs": "^9.2.0",
30-
"rollup-plugin-node-resolve": "^4.0.0",
31-
"rollup-plugin-replace": "^2.1.0",
32-
"rollup-plugin-uglify": "^6.0.0"
23+
"@babel/core": "7.5.5",
24+
"@babel/preset-env": "7.5.5",
25+
"babel-plugin-inferno": "6.1.0",
26+
"rollup": "1.17.0",
27+
"rollup-plugin-alias": "1.5.2",
28+
"rollup-plugin-babel": "4.3.3",
29+
"rollup-plugin-commonjs": "10.0.1",
30+
"rollup-plugin-node-resolve": "5.2.0",
31+
"rollup-plugin-replace": "2.2.0",
32+
"rollup-plugin-terser": "5.1.1"
3333
},
3434
"dependencies": {
35-
"inferno": "7.1.2"
35+
"inferno": "7.2.0"
3636
}
3737
}

‎frameworks/non-keyed/inferno/rollup.config.js

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ const nodeResolvePlugin = require('rollup-plugin-node-resolve');
33
const babelPlugin = require('rollup-plugin-babel');
44
const path = require('path');
55
const replace = require('rollup-plugin-replace');
6-
import { uglify } from 'rollup-plugin-uglify';
6+
const terser = require('rollup-plugin-terser').terser;
77
const alias = require('rollup-plugin-alias');
88

99
const isProduction = process.env.production;
@@ -31,17 +31,35 @@ const plugins = [
3131
];
3232

3333
if (isProduction) {
34-
plugins.push(uglify());
34+
plugins.push(terser({
35+
parse: {
36+
ecma: 8,
37+
},
38+
compress: {
39+
ecma: 5,
40+
inline: true,
41+
if_return: false,
42+
reduce_funcs: false,
43+
passes: 5,
44+
comparisons: false,
45+
},
46+
output: {
47+
ecma: 5,
48+
comments: false,
49+
},
50+
toplevel: true,
51+
module: true,
52+
}));
3553
}
3654

3755
// When in development, we want to use dev build of inferno.
3856
// DEV build has helper functionalities build for development only.
3957
// When we are shipping to production we don't want those checks to be included
4058
plugins.unshift(
41-
alias({
42-
resolve: extensions,
43-
'inferno': __dirname + '/node_modules/inferno/dist/' + (isProduction ? 'index.esm.js' : 'index.dev.esm.js')
44-
})
59+
alias({
60+
resolve: extensions,
61+
'inferno': __dirname + '/node_modules/inferno/dist/' + (isProduction ? 'index.esm.js' : 'index.dev.esm.js')
62+
})
4563
);
4664

4765
export default {

0 commit comments

Comments
 (0)