Skip to content

Commit 559a3d4

Browse files
lewisl9029lewisl9029
committed
Benchmark update
Delete
1 parent 5c1ec22 commit 559a3d4

File tree

10 files changed

+13815
-9801
lines changed

10 files changed

+13815
-9801
lines changed

‎.gitignore

+7-7
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
/benchmarks/dist
33
/node_modules
44

5-
.pnp.*
6-
.yarn/*
7-
!.yarn/patches
8-
!.yarn/plugins
9-
!.yarn/releases
10-
!.yarn/sdks
11-
!.yarn/versions
5+
**/.pnp.*
6+
**/.yarn/*
7+
!**/.yarn/patches
8+
!**/.yarn/plugins
9+
!**/.yarn/releases
10+
!**/.yarn/sdks
11+
!**/.yarn/versions

‎.prettierrc.json

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎benchmarks/.yarn/releases/yarn-berry.cjs

+768
Large diffs are not rendered by default.

‎benchmarks/.yarnrc.yml

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
nodeLinker: node-modules
2+
3+
yarnPath: .yarn/releases/yarn-berry.cjs

‎benchmarks/babel-preset.js

+13-12
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
const { BABEL_ENV, NODE_ENV } = process.env;
2-
const modules = BABEL_ENV === 'cjs' || NODE_ENV === 'test' ? 'commonjs' : false;
2+
const modules = BABEL_ENV === "cjs" || NODE_ENV === "test" ? "commonjs" : false;
33

44
module.exports = () => ({
55
presets: [
66
[
7-
'@babel/preset-env',
7+
"@babel/preset-env",
88
{
9-
targets: NODE_ENV === 'test' ? { node: 'current' } : undefined,
9+
targets: NODE_ENV === "test" ? { node: "current" } : undefined,
1010
loose: true,
11-
modules,
12-
},
11+
modules
12+
}
1313
],
14-
'@babel/preset-react',
15-
'@babel/preset-flow',
14+
"@babel/preset-react",
15+
"@babel/preset-flow"
1616
],
1717
plugins: [
18-
['babel-plugin-transform-react-remove-prop-types', { mode: 'unsafe-wrap' }],
19-
['@babel/plugin-proposal-object-rest-spread', { loose: true }],
20-
['@babel/plugin-proposal-class-properties', { loose: true }],
21-
modules === 'commonjs' && 'add-module-exports',
22-
].filter(Boolean),
18+
["babel-plugin-transform-react-remove-prop-types", { mode: "unsafe-wrap" }],
19+
["@babel/plugin-proposal-object-rest-spread", { loose: true }],
20+
["@babel/plugin-proposal-class-properties", { loose: true }],
21+
"@babel/plugin-syntax-optional-chaining",
22+
modules === "commonjs" && "add-module-exports"
23+
].filter(Boolean)
2324
});

‎benchmarks/package.json

+11-7
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,29 @@
55
"scripts": {
66
"build": "webpack-cli --config webpack.config.js",
77
"start": "webpack-dev-server",
8-
"start-dev": "cross-env NODE_ENV=development webpack-dev-server"
8+
"start-dev": "cross-env NODE_ENV=development webpack-dev-server",
9+
"benchmark": "node ./run-headless.js"
910
},
1011
"dependencies": {
11-
"@emotion-11/styled": "npm:@emotion/styled@^11.0.0-next.17",
12+
"@emotion-11/styled": "npm:@emotion/styled@^11.6.0",
1213
"@emotion/core": "^10.0.10",
13-
"@emotion/react": "^11.0.0-next.17",
14+
"@emotion/react": "^11.6.0",
1415
"@emotion/styled": "^10.0.12",
1516
"aphrodite": "^2.2.0",
1617
"classnames": "^2.2.5",
1718
"d3-scale-chromatic": "^1.2.0",
1819
"fela": "^10.5.0",
1920
"glamor": "2.20.40",
21+
"jss": "^10.8.2",
2022
"radium": "^0.25.2",
2123
"react-art": "^16.8.6",
2224
"react-dom": "^16.13.1",
2325
"react-fela": "^10.5.0",
2426
"react-is": "^16.8.6",
25-
"react-jss": "^8.6.1",
27+
"react-jss": "^10.8.2",
2628
"react-native-web": "^0.11.4",
2729
"reactxp": "^1.3.3",
28-
"styled-components": "^5.1.1",
30+
"styled-components": "^5.3.3",
2931
"styled-jsx": "^3.2.1",
3032
"styletron-engine-atomic": "^1.3.0",
3133
"styletron-react": "^5.1.2",
@@ -35,6 +37,7 @@
3537
"devDependencies": {
3638
"@babel/plugin-proposal-class-properties": "^7.0.0",
3739
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
40+
"@babel/plugin-syntax-optional-chaining": "^7.8.3",
3841
"@babel/preset-env": "^7.0.0",
3942
"@babel/preset-flow": "^7.0.0",
4043
"@babel/preset-react": "^7.0.0",
@@ -45,11 +48,12 @@
4548
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
4649
"cross-env": "^7.0.2",
4750
"css-loader": "^2.1.1",
48-
"html-webpack-plugin": "^4.3.0",
51+
"html-webpack-plugin": "^5.5.0",
4952
"memoize-one": "^5.0.4",
5053
"merge-anything": "^2.2.5",
54+
"puppeteer": "^11.0.0",
5155
"style-loader": "^0.23.1",
52-
"webpack": "^4.33.0",
56+
"webpack": "^5.64.3",
5357
"webpack-bundle-analyzer": "^3.3.2",
5458
"webpack-cli": "^3.3.3"
5559
},

‎benchmarks/run-headless.js

+48-27
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,62 @@
1-
const path = require('path');
2-
const puppeteer = require('puppeteer');
1+
const path = require("path");
2+
const puppeteer = require("puppeteer");
33

4-
const tests = ['Mount deep tree', 'Mount wide tree', 'Update dynamic styles'];
5-
const tracing = process.argv.some(arg => arg.indexOf('tracing') > -1);
4+
const implementations = ["use-styles", "emotion-v11", "styled-components"];
5+
6+
const tests = ["Mount deep tree", "Mount wide tree", "Update dynamic styles"];
7+
const tracing = process.argv.some(arg => arg.indexOf("tracing") > -1);
68

79
if (tracing) {
810
console.log(
9-
'\nTracing enabled. (note that this might impact benchmark results, we recommend leaving this turned off unless you need a trace)'
11+
"\nTracing enabled. (note that this might impact benchmark results, we recommend leaving this turned off unless you need a trace)"
1012
);
1113
}
1214

1315
(async () => {
14-
console.log('\nStarting headless browser...');
15-
const browser = await puppeteer.launch();
16+
console.log("\nStarting headless browser...");
17+
const browser = await puppeteer.launch({ headless: false });
1618
const page = await browser.newPage();
17-
console.log('Opening benchmark app...');
18-
await page.goto(`file://${path.join(__dirname, './index.html')}`);
19+
console.log("Opening benchmark app...");
20+
await page.goto(`file://${path.resolve(__dirname, "./dist/index.html")}`);
1921

2022
console.log(
21-
'Running benchmarks... (this may take a minute or two; do not use your machine while these are running!)'
23+
"Running benchmarks... (this may take a minute or two; do not use your machine while these are running!)"
2224
);
23-
for (let i = 0; i < tests.length; i++) {
24-
const test = tests[i];
25-
const traceFile = `${test.toLowerCase().replace(/\s/g, '-')}-trace.json`;
26-
// styled-components is auto-selected, so all we gotta do is select the benchmark and press "Run"
27-
await page.select('[data-testid="benchmark-picker"]', test);
28-
await page.waitForSelector('[data-testid="run-button"]');
29-
if (tracing) await page.tracing.start({ path: traceFile });
30-
await page.click('[data-testid="run-button"]');
31-
await page.waitForSelector(`[data-testid="${test} results"]`);
32-
if (tracing) await page.tracing.stop();
33-
const result = await page.$eval(`[data-testid="${test} results"]`, node => node.innerText);
34-
console.log(`\n---${test}---`);
35-
console.log(result);
36-
console.log('Trace written to', traceFile);
37-
}
38-
39-
console.log('Done!');
25+
26+
await implementations.reduce(
27+
async (previousImplementation, implementation) => {
28+
await previousImplementation;
29+
30+
await page.select('[data-testid="library-picker"]', implementation);
31+
await new Promise(resolve => setTimeout(resolve, 3000));
32+
33+
await tests.reduce(async (previousTest, test) => {
34+
await previousTest;
35+
const traceFile = `${implementation}_${test
36+
.toLowerCase()
37+
.replace(/\s/g, "-")}_trace.json`;
38+
await page.select('[data-testid="benchmark-picker"]', test);
39+
await page.waitForSelector('[data-testid="run-button"]');
40+
if (tracing) await page.tracing.start({ path: traceFile });
41+
await page.click('[data-testid="run-button"]');
42+
await page.waitForSelector(`[data-testid="${test} results"]`);
43+
if (tracing) await page.tracing.stop();
44+
const result = await page.$eval(
45+
`[data-testid="${test} results"]`,
46+
node => node.innerText
47+
);
48+
console.log(`\n---${implementation}---${test}---`);
49+
console.log(result);
50+
if (tracing) {
51+
console.log("Trace written to", traceFile);
52+
}
53+
}, Promise.resolve());
54+
55+
await page.reload();
56+
},
57+
Promise.resolve()
58+
);
59+
60+
console.log("Done!");
4061
await browser.close();
4162
})();

0 commit comments

Comments
 (0)