Skip to content

Commit 2e3d1be

Browse files
krausestkrausest
committed
Merge branch 'rewrite-react-mobx' of https://github.com/klaseca/js-framework-benchmark into klaseca-rewrite-react-mobx
2 parents b6bdc44 + f9852ed commit 2e3d1be

File tree

13 files changed

+841
-1617
lines changed

13 files changed

+841
-1617
lines changed

‎frameworks/keyed/react-mobX/.babelrc

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

‎frameworks/keyed/react-mobX/.npmrc

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎frameworks/keyed/react-mobX/index.html

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="utf-8" />
5-
<title>React + Mobx</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>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>React + Mobx</title>
6+
<link href="/css/currentStyle.css" rel="stylesheet" />
7+
</head>
8+
9+
<body>
10+
<div id="main"></div>
11+
<script src="dist/main.js"></script>
12+
</body>
1213
</html>

‎frameworks/keyed/react-mobX/package-lock.json

Lines changed: 505 additions & 1327 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frameworks/keyed/react-mobX/package.json

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -8,35 +8,31 @@
88
"frameworkHomeURL": "https://mobx.js.org/"
99
},
1010
"scripts": {
11-
"build-dev": "webpack --watch",
12-
"build-prod": "webpack --mode production"
11+
"build-dev": "rollup -c -w",
12+
"build-prod": "rollup -c --environment production"
1313
},
14-
"keywords": [
15-
"react",
16-
"webpack"
17-
],
18-
"author": "Stefan Krause",
14+
"author": "Maxim Molochkov",
1915
"license": "Apache-2.0",
2016
"homepage": "https://github.com/krausest/js-framework-benchmark",
2117
"repository": {
2218
"type": "git",
2319
"url": "https://github.com/krausest/js-framework-benchmark.git"
2420
},
21+
"dependencies": {
22+
"mobx": "6.9.0",
23+
"mobx-react-lite": "3.4.3",
24+
"react": "18.2.0",
25+
"react-dom": "18.2.0"
26+
},
2527
"devDependencies": {
26-
"@babel/core": "7.21.0",
27-
"@babel/plugin-proposal-class-properties": "7.16.7",
28-
"@babel/plugin-proposal-decorators": "^7.21.0",
29-
"@babel/preset-env": "7.20.2",
28+
"@babel/core": "7.21.8",
29+
"@babel/preset-env": "7.21.5",
3030
"@babel/preset-react": "7.18.6",
31-
"babel-loader": "9.1.2",
32-
"terser-webpack-plugin": "^5.3.7",
33-
"webpack": "5.76.1",
34-
"webpack-cli": "^5.0.1"
35-
},
36-
"dependencies": {
37-
"mobx": "5.15.4",
38-
"mobx-react": "6.2.2",
39-
"react": "17.0.1",
40-
"react-dom": "17.0.1"
31+
"@rollup/plugin-babel": "6.0.3",
32+
"@rollup/plugin-commonjs": "25.0.0",
33+
"@rollup/plugin-node-resolve": "15.0.2",
34+
"@rollup/plugin-replace": "5.0.2",
35+
"@rollup/plugin-terser": "0.4.3",
36+
"rollup": "3.22.0"
4137
}
4238
}

‎frameworks/keyed/react-mobX/rollup.config.mjs

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import { defineConfig } from 'rollup';
2+
import commonjs from '@rollup/plugin-commonjs';
3+
import { nodeResolve } from '@rollup/plugin-node-resolve';
4+
import replace from '@rollup/plugin-replace';
5+
import babel from '@rollup/plugin-babel';
6+
import terser from '@rollup/plugin-terser';
7+
8+
const plugins = [
9+
commonjs(),
10+
replace({
11+
'process.env.NODE_ENV': JSON.stringify('production'),
12+
}),
13+
babel({
14+
exclude: 'node_modules/**',
15+
babelHelpers: 'bundled',
16+
presets: [
17+
'@babel/preset-env',
18+
['@babel/preset-react', { runtime: 'automatic' }],
19+
],
20+
}),
21+
nodeResolve({ extensions: ['.js', '.jsx'] }),
22+
];
23+
24+
if (process.env.production) {
25+
plugins.push(terser());
26+
}
27+
28+
export default defineConfig({
29+
input: 'src/Main.jsx',
30+
output: {
31+
file: 'dist/main.js',
32+
format: 'iife',
33+
},
34+
plugins,
35+
});

‎frameworks/keyed/react-mobX/src/Main.jsx

Lines changed: 88 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,93 @@
1-
'use strict';
1+
import { createRoot } from 'react-dom/client';
2+
import { useState } from 'react';
3+
import { observer } from 'mobx-react-lite';
4+
import { Row } from './Row';
5+
import { RowsStore } from './RowsStore';
26

3-
var React = require('react');
4-
var ReactDOM = require('react-dom');
5-
require('mobx-react/batchingForReactDom');
6-
const {Row} = require('./Row');
7-
var {observer} = require("mobx-react");
8-
var {observable, computed} = require ("mobx");
9-
const {Store} = require('./Store');
7+
const Button = ({ children, id, onClick }) => {
8+
return (
9+
<div className="col-sm-6 smallpad">
10+
<button
11+
type="button"
12+
className="btn btn-primary btn-block"
13+
id={id}
14+
onClick={onClick}
15+
>
16+
{children}
17+
</button>
18+
</div>
19+
);
20+
};
1021

11-
@observer
12-
export class Main extends React.Component{
13-
constructor(props) {
14-
super(props);
15-
this.select = this.select.bind(this);
16-
this.delete = this.delete.bind(this);
17-
this.add = this.add.bind(this);
18-
this.run = this.run.bind(this);
19-
this.update = this.update.bind(this);
20-
this.runLots = this.runLots.bind(this);
21-
this.clear = this.clear.bind(this);
22-
this.swapRows = this.swapRows.bind(this);
23-
this.start = 0;
24-
}
25-
run() {
26-
this.props.store.run();
27-
}
28-
add() {
29-
this.props.store.add();
30-
}
31-
update() {
32-
this.props.store.update();
33-
}
34-
select(row) {
35-
this.props.store.select(row);
36-
}
37-
delete(row) {
38-
this.props.store.delete(row);
39-
}
40-
runLots() {
41-
this.props.store.runLots();
42-
}
43-
clear() {
44-
this.props.store.clear();
45-
}
46-
swapRows() {
47-
this.props.store.swapRows();
48-
}
49-
render () {
50-
let rows = this.props.store.data.map((d,i) => {
51-
return <Row key={d.id} data={d} onClick={this.select} onDelete={this.delete}></Row>
52-
});
53-
return (<div className="container">
54-
<div className="jumbotron">
55-
<div className="row">
56-
<div className="col-md-6">
57-
<h1>React + Mobx</h1>
58-
</div>
59-
<div className="col-md-6">
60-
<div className="row">
61-
<div className="col-sm-6 smallpad">
62-
<button type="button" className="btn btn-primary btn-block" id="run" onClick={this.run}>Create 1,000 rows</button>
63-
</div>
64-
<div className="col-sm-6 smallpad">
65-
<button type="button" className="btn btn-primary btn-block" id="runlots" onClick={this.runLots}>Create 10,000 rows</button>
66-
</div>
67-
<div className="col-sm-6 smallpad">
68-
<button type="button" className="btn btn-primary btn-block" id="add" onClick={this.add}>Append 1,000 rows</button>
69-
</div>
70-
<div className="col-sm-6 smallpad">
71-
<button type="button" className="btn btn-primary btn-block" id="update" onClick={this.update}>Update every 10th row</button>
72-
</div>
73-
<div className="col-sm-6 smallpad">
74-
<button type="button" className="btn btn-primary btn-block" id="clear" onClick={this.clear}>Clear</button>
75-
</div>
76-
<div className="col-sm-6 smallpad">
77-
<button type="button" className="btn btn-primary btn-block" id="swaprows" onClick={this.swapRows}>Swap Rows</button>
78-
</div>
79-
</div>
80-
</div>
81-
</div>
22+
const _RowList = ({ store }) => {
23+
return store.rows.map((row) => (
24+
<Row
25+
key={row.id}
26+
data={row}
27+
onSelect={store.select}
28+
onDelete={store.delete}
29+
isSelected={store.selectedRowId === row.id}
30+
/>
31+
));
32+
};
33+
34+
const RowList = observer(_RowList);
35+
36+
const _Main = () => {
37+
const [store] = useState(() => new RowsStore());
38+
39+
return (
40+
<div className="container">
41+
<div className="jumbotron">
42+
<div className="row">
43+
<div className="col-md-6">
44+
<h1>React + Mobx</h1>
45+
</div>
46+
47+
<div className="col-md-6">
48+
<div className="row">
49+
<Button id="run" onClick={store.run}>
50+
Create 1,000 rows
51+
</Button>
52+
53+
<Button id="runlots" onClick={store.runLots}>
54+
Create 10,000 rows
55+
</Button>
56+
57+
<Button id="add" onClick={store.add}>
58+
Append 1,000 rows
59+
</Button>
60+
61+
<Button id="update" onClick={store.update}>
62+
Update every 10th row
63+
</Button>
64+
65+
<Button id="clear" onClick={store.clear}>
66+
Clear
67+
</Button>
68+
69+
<Button id="swaprows" onClick={store.swapRows}>
70+
Swap Rows
71+
</Button>
8272
</div>
83-
<table className="table table-hover table-striped test-data">
84-
<tbody>
85-
{rows}
86-
</tbody>
87-
</table>
88-
<span className="preloadicon glyphicon glyphicon-remove" aria-hidden="true"></span>
89-
</div>);
90-
}
91-
}
73+
</div>
74+
</div>
75+
</div>
76+
77+
<table className="table table-hover table-striped test-data">
78+
<tbody>
79+
<RowList store={store} />
80+
</tbody>
81+
</table>
82+
83+
<span
84+
className="preloadicon glyphicon glyphicon-remove"
85+
aria-hidden="true"
86+
/>
87+
</div>
88+
);
89+
};
9290

93-
let store = new Store();
91+
const Main = observer(_Main);
9492

95-
ReactDOM.render(<Main store={store}/>, document.getElementById('main'));
93+
createRoot(document.getElementById('main')).render(<Main />);

‎frameworks/keyed/react-mobX/src/Row.jsx

Lines changed: 21 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,23 @@
1-
'use strict';
1+
import { observer } from 'mobx-react-lite';
22

3-
var React = require('react');
4-
var ReactDOM = require('react-dom');
5-
var {observer} = require("mobx-react");
6-
var {observable, computed} = require ("mobx");
7-
8-
@observer
9-
export class Row extends React.Component {
10-
constructor(props) {
11-
super(props);
12-
this.onDelete = this.onDelete.bind(this);
13-
this.onClick = this.onClick.bind(this);
14-
}
15-
16-
onDelete() {
17-
this.props.onDelete(this.props.data);
18-
}
19-
onClick() {
20-
this.props.onClick(this.props.data);
21-
}
22-
23-
render() {
24-
let {onClick, onDelete, data} = this.props;
25-
return (<tr className={data.isSelected ? 'danger' : ''}>
26-
<td className="col-md-1">{data.id}</td>
27-
<td className="col-md-4">
28-
<a onClick={this.onClick}>{data.label}</a>
29-
</td>
30-
<td className="col-md-1"><a onClick={this.onDelete}><span className="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
31-
<td className="col-md-6"></td>
32-
</tr>);
33-
}
34-
}
3+
const _Row = ({ data, isSelected, onDelete, onSelect }) => {
4+
return (
5+
<tr className={isSelected ? 'danger' : ''}>
6+
<td className="col-md-1">{data.id}</td>
7+
<td className="col-md-4">
8+
<a onClick={() => onSelect(data.id)}>{data.label}</a>
9+
</td>
10+
<td className="col-md-1">
11+
<a onClick={() => onDelete(data.id)}>
12+
<span
13+
className="glyphicon glyphicon-remove"
14+
aria-hidden="true"
15+
></span>
16+
</a>
17+
</td>
18+
<td className="col-md-6"></td>
19+
</tr>
20+
);
21+
};
3522

23+
export const Row = observer(_Row);

‎frameworks/keyed/react-mobX/src/RowStore.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { makeObservable, observable } from 'mobx';
2+
3+
export class RowStore {
4+
id;
5+
6+
label;
7+
8+
constructor(id, label) {
9+
makeObservable(this, {
10+
label: observable,
11+
});
12+
13+
this.id = id;
14+
this.label = label;
15+
}
16+
}

0 commit comments

Comments
 (0)