Skip to content

Commit 0fe3d56

Browse files
smelukovsmelukov
committed
update statoscope
add rspack stats
1 parent 6f86cc7 commit 0fe3d56

8 files changed

Lines changed: 5976 additions & 2034 deletions

File tree

‎package-lock.json‎

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

‎package.json‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
"private": true,
44
"scripts": {
55
"start": "static public -a 0.0.0.0 -p ${PORT:-8080}",
6-
"build": "webpack && cp src/statoscope.png src/favicon.ico public/ && statoscope validate --config=./statoscope.config.demo.js --input public/demo-stats.json || true",
6+
"build": "npm run build:webpack && npm run build:rspack",
7+
"build:webpack": "webpack && cp src/statoscope.png src/favicon.ico public/ && statoscope validate --config=./statoscope.config.demo.js --input public/demo-stats.webpack.json || true",
8+
"build:rspack": "rspack && statoscope validate --config=./statoscope.config.demo.js --input public/demo-stats.rspack.json || true",
79
"predev": "npm run build",
810
"dev": "webpack serve",
911
"prebuild:prod": "rm -rf public/*",
@@ -17,30 +19,34 @@
1719
"devDependencies": {
1820
"@babel/core": "^7.18.6",
1921
"@babel/preset-env": "^7.18.6",
20-
"@statoscope/cli": "^5.28.3",
21-
"@statoscope/stats-validator-plugin-webpack": "^5.28.3",
22-
"@statoscope/webpack-ui": "5.28.3",
23-
"babel-loader": "^8.2.5",
24-
"css-loader": "^5.2.7",
22+
"@rsdoctor/rspack-plugin": "^1.0.1",
23+
"@rspack/cli": "^1.3.2",
24+
"@rspack/core": "^1.3.2",
25+
"@statoscope/cli": "^5.29.0",
26+
"@statoscope/stats-validator-plugin-webpack": "^5.29.0",
27+
"@statoscope/webpack-ui": "5.29.0",
28+
"babel-loader": "^10.0.0",
29+
"css-loader": "^7.1.2",
2530
"eslint": "^7.32.0",
2631
"eslint-config-prettier": "^8.5.0",
2732
"eslint-plugin-import": "^2.26.0",
2833
"eslint-plugin-jsdoc": "^39.3.3",
2934
"eslint-plugin-node": "^11.1.0",
3035
"eslint-plugin-prettier": "^4.2.1",
3136
"html-loader": "^0.5.5",
32-
"html-webpack-plugin": "^5.5.0",
33-
"mini-css-extract-plugin": "^2.6.1",
37+
"html-webpack-plugin": "^5.6.3",
38+
"mini-css-extract-plugin": "^2.9.2",
3439
"mustache": "^4.2.0",
3540
"prettier": "^2.7.1",
36-
"style-loader": "^3.3.1",
37-
"webpack": "^5.74.0",
38-
"webpack-cli": "^5.0.1",
39-
"webpack-dev-server": "^4.11.1"
41+
"style-loader": "^4.0.0",
42+
"ts-node": "^10.9.2",
43+
"webpack": "^5.98.0",
44+
"webpack-cli": "^6.0.1",
45+
"webpack-dev-server": "^5.2.1"
4046
},
4147
"dependencies": {
4248
"@discoveryjs/json-ext": "^0.5.7",
43-
"@statoscope/webpack-plugin": "^5.28.3",
49+
"@statoscope/webpack-plugin": "^5.29.0",
4450
"@wdxlab/events": "^1.1.0",
4551
"node-static": "^0.7.11"
4652
}

‎rspack.config.ts‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
/* eslint-env node */
2+
3+
import path from "node:path";
4+
5+
import HtmlWebpackPlugin from "html-webpack-plugin";
6+
import StatoscopeWebpackPlugin from "@statoscope/webpack-plugin";
7+
import reports from "./reports";
8+
import WebpackContextExtension from "./custom-ext";
9+
import rspack from "@rspack/core";
10+
import {RsdoctorRspackPlugin} from "@rsdoctor/rspack-plugin";
11+
12+
const mode = process.env.NODE_ENV === 'production' ? 'production' : 'development';
13+
14+
module.exports = {
15+
mode,
16+
entry: {
17+
main: './src/index.js',
18+
},
19+
output: {
20+
path: path.resolve('public'),
21+
filename: '[name].[contenthash:7].js',
22+
},
23+
devServer: {
24+
port: 8888,
25+
devMiddleware: {
26+
writeToDisk: true,
27+
},
28+
},
29+
resolve: {
30+
symlinks: false,
31+
},
32+
module: {
33+
noParse: [/@statoscope/],
34+
rules: [
35+
{
36+
test: /\.svg$/,
37+
type: 'asset/resource',
38+
},
39+
{
40+
test: /\.js?$/,
41+
exclude: /node_modules/,
42+
use: 'babel-loader',
43+
},
44+
{
45+
test: /\.css$/,
46+
include: [path.resolve('src')],
47+
use: [
48+
rspack.CssExtractRspackPlugin.loader,
49+
{
50+
loader: 'css-loader',
51+
options: {
52+
modules: true,
53+
},
54+
},
55+
],
56+
type: 'javascript/auto',
57+
},
58+
{
59+
test: /\.html$/i,
60+
use: {
61+
loader: 'html-loader',
62+
options: {
63+
interpolate: true,
64+
},
65+
},
66+
},
67+
],
68+
},
69+
plugins: [
70+
process.env.RSDOCTOR &&
71+
new RsdoctorRspackPlugin({
72+
// plugin options
73+
}),
74+
new StatoscopeWebpackPlugin({
75+
statsOptions: {
76+
context: __dirname,
77+
},
78+
saveStatsTo: path.resolve('./public/demo-stats.rspack.json'),
79+
normalizeStats: true,
80+
open: 'file',
81+
reports,
82+
extensions: [new WebpackContextExtension()],
83+
}),
84+
new rspack.CssExtractRspackPlugin({
85+
filename: '[name].[contenthash:7].css',
86+
}),
87+
new HtmlWebpackPlugin({
88+
filename: 'index.html',
89+
template: './src/index.html',
90+
minify: false,
91+
}),
92+
],
93+
};

‎src/index.html‎

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -32,28 +32,40 @@ <h1 class="name">Statoscope</h1>
3232
<div class="description">detailed webpack stats analyzer</div>
3333

3434
<div id="instructions">
35-
<div>
36-
1. run
37-
<div class="command pseudo-link" data-may-copy="true" title="click to copy">
38-
webpack --json stats.json
35+
<div class="steps">
36+
<div>
37+
<div>
38+
1. collect bundle stats
39+
</div>
40+
<div class="block">
41+
<div class="command pseudo-link" data-may-copy="true" title="click to copy">
42+
webpack --json stats.json
43+
</div>
44+
<div class="shaded">
45+
or
46+
</div>
47+
<div class="command pseudo-link" data-may-copy="true" title="click to copy">
48+
rspack --json stats.json
49+
</div>
50+
</div>
3951
</div>
40-
</div>
41-
<div>
42-
2. drop or
43-
<div id="upload-button" class="command pseudo-link" title="click to upload">
44-
upload
52+
<div>
53+
2. drop or
54+
<div id="upload-button" class="command pseudo-link" title="click to upload">
55+
upload
56+
</div>
57+
stats.json here to know the truth!
58+
<div class="block">
59+
Or use demo stats:
60+
<ul>
61+
<li><div class="demo-button command pseudo-link" data-file="demo-stats.webpack.json" title="click to upload">demo-stats.webpack.json</div></li>
62+
<li><div class="demo-button command pseudo-link" data-file="demo-stats.rspack.json" title="click to upload">demo-stats.rspack.json</div></li>
63+
</ul>
64+
</div>
4565
</div>
46-
stats.json here to know the truth!
47-
</div>
48-
<br/>
49-
<div>
50-
Or use
51-
<div id="demo-button" class="command pseudo-link" title="click to upload">demo</div>
52-
stats.
5366
</div>
54-
<br/>
5567

56-
Also, use Statoscope as:
68+
Statoscope also available as:
5769

5870
<ul>
5971
<li>

‎src/index.js‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ const error = document.querySelector('#splash #error');
99
const instructions = document.querySelector('#splash #instructions');
1010
const fileInput = document.querySelector('#splash #file-input');
1111
const uploadButton = document.querySelector('#splash #upload-button');
12-
const demoButton = document.querySelector('#splash #demo-button');
1312

1413
function reachGoal(name, params) {
1514
if (typeof ym !== 'undefined') {
@@ -22,7 +21,7 @@ function init(files) {
2221
const { data } = item;
2322

2423
if (data.version) {
25-
reachGoal('webpack', { version: data.version });
24+
reachGoal(data.bundler || 'webpack', { version: data.version });
2625
}
2726
}
2827

@@ -51,16 +50,20 @@ fileInput.addEventListener('change', ({ target: { files } }) => {
5150
}
5251
});
5352

54-
demoButton.addEventListener('click', async () => {
53+
document.addEventListener('click', async (e) => {
54+
if (!e.target.classList.contains('demo-button')) {
55+
return;
56+
}
57+
5558
reachGoal('demo');
5659

5760
instructions.classList.add('hidden');
5861

5962
const loaderResult = await loadDataWithProgress(() =>
60-
Discovery.utils.loadDataFromUrl('demo-stats.json', {})
63+
Discovery.utils.loadDataFromUrl(e.target.dataset.file, {})
6164
);
6265

63-
init([{ name: 'demo-stats.js', data: loaderResult.data }]);
66+
init([{ name: e.target.dataset.file, data: loaderResult.data }]);
6467
});
6568

6669
document.addEventListener(

‎src/splash.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,3 +110,17 @@
110110
:global(#progress) {
111111
margin-top: 30px;
112112
}
113+
114+
:global(.steps) {
115+
display: flex;
116+
flex-direction: column;
117+
gap: 1em;
118+
}
119+
120+
:global(.shaded) {
121+
color: #979797;
122+
}
123+
124+
:global(.block) {
125+
margin-left: 3ch;
126+
}

‎tsconfig.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"compilerOptions": {
3+
"allowJs": true,
4+
"allowSyntheticDefaultImports": true,
5+
"esModuleInterop": true
6+
}
7+
}

‎webpack.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@ module.exports = {
6868
statsOptions: {
6969
context: __dirname,
7070
},
71-
saveStatsTo: path.resolve('./public/demo-stats.json'),
71+
saveStatsTo: path.resolve('./public/demo-stats.webpack.json'),
7272
normalizeStats: true,
7373
open: 'file',
7474
reports,

0 commit comments

Comments
 (0)