@rsdoctor/components 1.5.13 → 1.5.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/components/Charts/TreeMap.mjs +1 -2
  2. package/dist/components/Charts/TreeMap.mjs.map +1 -1
  3. package/dist/components/Layout/header.d.ts +0 -1
  4. package/dist/components/Layout/header.mjs +14 -53
  5. package/dist/components/Layout/header.mjs.map +1 -1
  6. package/dist/components/Layout/header.module.mjs +15 -0
  7. package/dist/components/Layout/header.module.mjs.map +1 -0
  8. package/dist/components/Layout/header_module.css +88 -0
  9. package/dist/components/Layout/header_module.css.map +1 -0
  10. package/dist/components/Layout/index.mjs +10 -8
  11. package/dist/components/Layout/index.mjs.map +1 -1
  12. package/dist/components/Layout/index.module.mjs +7 -0
  13. package/dist/components/Layout/index.module.mjs.map +1 -0
  14. package/dist/components/Layout/index_module.css +11 -0
  15. package/dist/components/Layout/index_module.css.map +1 -0
  16. package/dist/pages/BundleSize/components/asset.mjs +5 -3
  17. package/dist/pages/BundleSize/components/asset.mjs.map +1 -1
  18. package/dist/pages/BundleSize/components/asset_module.css +15 -7
  19. package/dist/pages/BundleSize/components/asset_module.css.map +1 -1
  20. package/dist/pages/BundleSize/components/index.d.ts +1 -1
  21. package/dist/pages/BundleSize/components/index.mjs +223 -556
  22. package/dist/pages/BundleSize/components/index.mjs.map +1 -1
  23. package/dist/pages/BundleSize/components/index.module.mjs +10 -0
  24. package/dist/pages/BundleSize/components/index.module.mjs.map +1 -1
  25. package/dist/pages/BundleSize/components/index_module.css +49 -0
  26. package/dist/pages/BundleSize/components/index_module.css.map +1 -1
  27. package/dist/pages/BundleSize/components/tree-graph.d.ts +7 -0
  28. package/dist/pages/BundleSize/components/tree-graph.mjs +366 -0
  29. package/dist/pages/BundleSize/components/tree-graph.mjs.map +1 -0
  30. package/dist/pages/BundleSize/index.mjs +1 -11
  31. package/dist/pages/BundleSize/index.mjs.map +1 -1
  32. package/dist/utils/hooks.d.ts +3 -1
  33. package/dist/utils/hooks.mjs +33 -2
  34. package/dist/utils/hooks.mjs.map +1 -1
  35. package/package.json +4 -4
  36. package/dist/components/Layout/header.css +0 -28
  37. package/dist/components/Layout/header.css.map +0 -1
package/dist/pages/BundleSize/components/index.mjs CHANGED
@@ -1,591 +1,258 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
- import { CodeOutlined, CodepenCircleOutlined, DeploymentUnitOutlined, InfoCircleOutlined } from "@ant-design/icons";
2
+ import { ArrowsAltOutlined, CodepenCircleOutlined, DeploymentUnitOutlined, InfoCircleOutlined, ShrinkOutlined } from "@ant-design/icons";
3
3
  import { SDK } from "@rsdoctor/types";
4
- import { Button, Card, Col, Divider, Empty, InputNumber, Row, Select, Space, Tabs, Tag, Tooltip, Typography } from "antd";
5
- import { debounce, sumBy } from "es-toolkit/compat";
6
- import { useCallback, useEffect, useMemo, useState } from "react";
7
- import { useCodeDrawer } from "../../../components/base/CodeViewer/useCodeDrawer.mjs";
8
- import { Badge } from "../../../components/Badge/index.mjs";
9
- import { FileTree } from "../../../components/FileTree/index.mjs";
10
- import { KeywordInput } from "../../../components/Form/keyword.mjs";
11
- import { Keyword } from "../../../components/Keyword/index.mjs";
4
+ import { Button, Card, Col, Row, Space, Tabs, Tag, Tooltip, Typography } from "antd";
5
+ import react, { useId } from "react";
12
6
  import { ServerAPIProvider } from "../../../components/Manifest/index.mjs";
13
- import { Size } from "../../../constants.mjs";
14
7
  import { useProjectInfo } from "../../../components/Layout/project-info-context.mjs";
15
- import { createFileStructures, flattenTreemapData, formatSize, useI18n } from "../../../utils/index.mjs";
16
- import { AssetDetail } from "./asset.mjs";
8
+ import { flattenTreemapData, usePersistedState } from "../../../utils/index.mjs";
17
9
  import { BundleCards } from "./cards.mjs";
18
10
  import index_module from "./index.module.mjs";
19
11
  import "./index.css";
20
- import { SearchModal } from "./search-modal.mjs";
21
12
  import { AssetTreemapWithFilter } from "../../../components/Charts/TreeMap.mjs";
22
13
  import { Rspack } from "@rsdoctor/utils/common";
23
- const { Option: Option } = Select;
24
- const cardBodyHeight = 600;
14
+ import { TreeGraph } from "./tree-graph.mjs";
25
15
  const WebpackModulesOverallBase = ({ errors, cwd, summary, entryPoints })=>{
26
- const [selectedEntryPoints, setEntryPoints] = useState([]);
27
- const [inputModule, setModuleValue] = useState(0);
28
- const [inputAssetName, setAssetName] = useState('');
29
- const [inputAssetSize, setAssetSize] = useState(0);
30
- const [defaultExpandAll, setDefaultExpandAll] = useState(false);
31
- const [inputModuleUnit, setModuleUnit] = useState('');
32
- const [inputChunkUnit, setChunkUnit] = useState('');
33
- const [assetPath, setAssetPath] = useState(null);
34
- const { showCode, codeDrawerComponent } = useCodeDrawer('Do not have the codes of assets. If you use the lite or brief mode, there will have codes.');
35
- const { t } = useI18n();
36
- const assets = summary.all.total.files;
37
- const handleChange = useCallback((type)=>(value)=>{
38
- if ('module' === type) setModuleUnit(value);
39
- else if ('chunk' === type) setChunkUnit(value);
40
- }, []);
41
- const selectAfter = (type)=>/*#__PURE__*/ jsxs(Select, {
42
- defaultValue: "kb",
43
- onChange: handleChange(type),
44
- children: [
45
- /*#__PURE__*/ jsx(Option, {
46
- value: "kb",
47
- children: "KB"
48
- }),
49
- /*#__PURE__*/ jsx(Option, {
50
- value: "mb",
51
- children: "MB"
52
- })
53
- ]
54
- });
55
- const onChangeModule = useCallback(debounce((newValue)=>{
56
- const count = 'mb' === inputModuleUnit ? 1024 * newValue * 1024 : 1024 * newValue;
57
- setModuleValue(count);
58
- }, 300), []);
59
- const onChangeAsset = useCallback(debounce((newValue)=>{
60
- const count = 'mb' === inputChunkUnit ? 1024 * newValue * 1024 : 1024 * newValue;
61
- setAssetSize(count);
62
- }, 300), []);
63
- const filteredAssets = useMemo(()=>{
64
- let res = assets.slice();
65
- if (inputAssetName) res = res.filter((e)=>e.path.indexOf(inputAssetName) > -1);
66
- if (inputAssetSize > 0) res = res.filter((e)=>e.size >= inputAssetSize);
67
- if (selectedEntryPoints.length) res = res.filter((e)=>{
68
- if (selectedEntryPoints.some((ep)=>ep.assets.includes(e.path))) return true;
69
- return false;
70
- });
71
- return res.sort((a, b)=>{
72
- const _a = a.path.indexOf('/') > -1 ? 1 : 0;
73
- const _b = b.path.indexOf('/') > -1 ? 1 : 0;
74
- return _b - _a;
75
- });
76
- }, [
77
- assets,
78
- selectedEntryPoints,
79
- inputAssetName,
80
- inputAssetSize
81
- ]);
82
- useEffect(()=>{
83
- function getFileExtension(filePath) {
84
- const parts = filePath.split('.');
85
- return parts.length > 1 ? parts.pop() : '';
86
- }
87
- summary.all.total.files.forEach((f)=>{
88
- const ext = getFileExtension(f.path);
89
- if ('js' === ext) setAssetPath(f.path);
90
- });
91
- }, [
92
- summary.all.total.files
93
- ]);
94
- const assetsStructures = useMemo(()=>{
95
- const res = createFileStructures({
96
- files: filteredAssets.map((e)=>e.path).filter(Boolean),
97
- fileTitle (file, basename) {
98
- const target = filteredAssets.find((e)=>e.path === file);
99
- const { size, initial, path, content } = target;
100
- return /*#__PURE__*/ jsxs("div", {
101
- className: index_module.assetBox,
102
- onClick: ()=>{
103
- setAssetPath(path);
104
- },
105
- children: [
106
- /*#__PURE__*/ jsx(Keyword, {
107
- text: basename,
108
- keyword: '',
109
- className: index_module.fileText
110
- }),
111
- /*#__PURE__*/ jsxs(Space, {
112
- size: "small",
113
- className: index_module.assetsTag,
114
- children: [
115
- /*#__PURE__*/ jsx(Divider, {
116
- type: "vertical"
117
- }),
118
- /*#__PURE__*/ jsx(Typography.Text, {
119
- style: {
120
- color: '#4FD233'
121
- },
122
- children: formatSize(size)
123
- }),
124
- /*#__PURE__*/ jsx(Divider, {
125
- type: "vertical"
126
- }),
127
- initial ? /*#__PURE__*/ jsx(Typography.Text, {
128
- style: {
129
- color: '#009A9E'
130
- },
131
- children: "initial"
132
- }) : null,
133
- /*#__PURE__*/ jsx(CodeOutlined, {
134
- style: {
135
- fontSize: 14,
136
- padding: 0
137
- },
138
- onClick: ()=>showCode({
139
- code: content,
140
- filePath: path
141
- })
142
- })
143
- ]
144
- })
145
- ]
146
- });
147
- }
148
- });
149
- return res;
150
- }, [
151
- filteredAssets
152
- ]);
153
- const onSearch = (value)=>{
154
- setAssetName(value);
155
- setDefaultExpandAll(false);
156
- };
16
+ const [expanded, setExpanded] = usePersistedState('bundle-size-tabs-card-expanded', false);
17
+ const cardDomId = useId();
18
+ const expandActionText = expanded ? 'Shrink card' : 'Expand card';
157
19
  return /*#__PURE__*/ jsxs(Fragment, {
158
20
  children: [
159
- /*#__PURE__*/ jsxs("div", {
160
- children: [
161
- /*#__PURE__*/ jsx(BundleCards, {
162
- cwd: cwd,
163
- errors: errors,
164
- summary: summary
165
- }),
166
- /*#__PURE__*/ jsx(Card, {
167
- styles: {
168
- body: {
169
- paddingTop: 0
170
- }
171
- },
172
- children: /*#__PURE__*/ jsx(Tabs, {
173
- size: "middle",
174
- items: [
175
- {
176
- key: 'tree',
177
- label: /*#__PURE__*/ jsxs(Space, {
178
- children: [
179
- /*#__PURE__*/ jsx(Typography.Text, {
180
- children: "Tree Graph"
181
- }),
182
- /*#__PURE__*/ jsx(Tooltip, {
183
- overlayStyle: {
184
- maxWidth: 380
185
- },
186
- overlayInnerStyle: {
187
- marginLeft: 16,
188
- padding: 10
189
- },
190
- color: "white",
191
- title: /*#__PURE__*/ jsxs(Space, {
192
- direction: "vertical",
193
- color: "white",
194
- size: "middle",
195
- children: [
196
- /*#__PURE__*/ jsx(Row, {
197
- children: /*#__PURE__*/ jsxs(Col, {
198
- children: [
199
- /*#__PURE__*/ jsx(Tag, {
200
- color: "cyan",
201
- style: {
202
- margin: 0
203
- },
204
- children: "initial"
205
- }),
206
- /*#__PURE__*/ jsx(Typography.Text, {
207
- style: {
208
- marginLeft: 4
209
- },
210
- children: "Identify whether the chunk is an initial chunk."
211
- })
212
- ]
21
+ /*#__PURE__*/ jsx(react.Activity, {
22
+ mode: expanded ? 'hidden' : 'visible',
23
+ children: /*#__PURE__*/ jsx(BundleCards, {
24
+ cwd: cwd,
25
+ errors: errors,
26
+ summary: summary
27
+ })
28
+ }),
29
+ /*#__PURE__*/ jsx(Card, {
30
+ className: index_module.root,
31
+ classNames: {
32
+ body: index_module.rootBody
33
+ },
34
+ id: cardDomId,
35
+ children: /*#__PURE__*/ jsx(Tabs, {
36
+ size: "middle",
37
+ className: index_module.tabsRoot,
38
+ tabBarExtraContent: {
39
+ right: /*#__PURE__*/ jsx(Tooltip, {
40
+ title: expandActionText,
41
+ children: /*#__PURE__*/ jsx(Button, {
42
+ "aria-controls": cardDomId,
43
+ "aria-expanded": expanded,
44
+ "aria-label": expandActionText,
45
+ onClick: ()=>setExpanded(!expanded),
46
+ icon: expanded ? /*#__PURE__*/ jsx(ShrinkOutlined, {}) : /*#__PURE__*/ jsx(ArrowsAltOutlined, {}),
47
+ size: "small"
48
+ })
49
+ }, String(expanded))
50
+ },
51
+ items: [
52
+ {
53
+ key: 'tree',
54
+ label: /*#__PURE__*/ jsxs(Space, {
55
+ children: [
56
+ /*#__PURE__*/ jsx(Typography.Text, {
57
+ children: "Tree Graph"
58
+ }),
59
+ /*#__PURE__*/ jsx(Tooltip, {
60
+ overlayStyle: {
61
+ maxWidth: 380
62
+ },
63
+ overlayInnerStyle: {
64
+ marginLeft: 16,
65
+ padding: 10
66
+ },
67
+ color: "white",
68
+ title: /*#__PURE__*/ jsxs(Space, {
69
+ direction: "vertical",
70
+ color: "white",
71
+ size: "middle",
72
+ children: [
73
+ /*#__PURE__*/ jsx(Row, {
74
+ children: /*#__PURE__*/ jsxs(Col, {
75
+ children: [
76
+ /*#__PURE__*/ jsx(Tag, {
77
+ color: "cyan",
78
+ style: {
79
+ margin: 0
80
+ },
81
+ children: "initial"
82
+ }),
83
+ /*#__PURE__*/ jsx(Typography.Text, {
84
+ style: {
85
+ marginLeft: 4
86
+ },
87
+ children: "Identify whether the chunk is an initial chunk."
213
88
  })
214
- }),
215
- /*#__PURE__*/ jsx(Row, {
216
- children: /*#__PURE__*/ jsxs(Col, {
217
- children: [
218
- /*#__PURE__*/ jsx(Tag, {
219
- color: "green",
220
- style: {
221
- margin: 0
222
- },
223
- children: "concatenated"
224
- }),
225
- /*#__PURE__*/ jsx(Typography.Text, {
226
- style: {
227
- marginLeft: 4
228
- },
229
- children: "Identify whether the module is a concatenated module"
230
- }),
231
- /*#__PURE__*/ jsx(Tooltip, {
232
- overlayStyle: {
233
- maxWidth: 408
234
- },
235
- placement: "bottom",
236
- color: "white",
237
- title: /*#__PURE__*/ jsx(Space, {
238
- direction: "vertical",
239
- color: "white",
240
- children: /*#__PURE__*/ jsx(Row, {
241
- children: /*#__PURE__*/ jsxs(Col, {
242
- children: [
243
- /*#__PURE__*/ jsx(Typography.Text, {
244
- strong: true,
245
- children: "Concatenated Module"
246
- }),
247
- /*#__PURE__*/ jsx(Typography.Text, {
248
- children: ': A performance optimization where multiple modules are merged (or "hoisted") into a single scope instead of wrapping each module in separate function closures. This reduces the bundle size and improves runtime performance by minimizing function call overhead.'
249
- })
250
- ]
89
+ ]
90
+ })
91
+ }),
92
+ /*#__PURE__*/ jsx(Row, {
93
+ children: /*#__PURE__*/ jsxs(Col, {
94
+ children: [
95
+ /*#__PURE__*/ jsx(Tag, {
96
+ color: "green",
97
+ style: {
98
+ margin: 0
99
+ },
100
+ children: "concatenated"
101
+ }),
102
+ /*#__PURE__*/ jsx(Typography.Text, {
103
+ style: {
104
+ marginLeft: 4
105
+ },
106
+ children: "Identify whether the module is a concatenated module"
107
+ }),
108
+ /*#__PURE__*/ jsx(Tooltip, {
109
+ overlayStyle: {
110
+ maxWidth: 408
111
+ },
112
+ placement: "bottom",
113
+ color: "white",
114
+ title: /*#__PURE__*/ jsx(Space, {
115
+ direction: "vertical",
116
+ color: "white",
117
+ children: /*#__PURE__*/ jsx(Row, {
118
+ children: /*#__PURE__*/ jsxs(Col, {
119
+ children: [
120
+ /*#__PURE__*/ jsx(Typography.Text, {
121
+ strong: true,
122
+ children: "Concatenated Module"
123
+ }),
124
+ /*#__PURE__*/ jsx(Typography.Text, {
125
+ children: ': A performance optimization where multiple modules are merged (or "hoisted") into a single scope instead of wrapping each module in separate function closures. This reduces the bundle size and improves runtime performance by minimizing function call overhead.'
251
126
  })
252
- })
253
- }),
254
- children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
255
- style: {
256
- color: 'rgba(0,0,0,.45)',
257
- marginLeft: 4
258
- }
127
+ ]
259
128
  })
260
- }),
261
- /*#__PURE__*/ jsx(Typography.Text, {
262
- children: "."
263
129
  })
264
- ]
265
- })
266
- }),
267
- /*#__PURE__*/ jsx(Row, {
268
- children: /*#__PURE__*/ jsxs(Col, {
269
- children: [
270
- /*#__PURE__*/ jsx(Button, {
271
- size: "small",
272
- icon: /*#__PURE__*/ jsx(CodepenCircleOutlined, {})
273
- }),
274
- /*#__PURE__*/ jsx(Typography.Text, {
275
- style: {
276
- marginLeft: 4
277
- },
278
- children: "Open the code."
279
- })
280
- ]
281
- })
282
- }),
283
- /*#__PURE__*/ jsx(Row, {
284
- children: /*#__PURE__*/ jsxs(Col, {
285
- children: [
286
- /*#__PURE__*/ jsx(Button, {
287
- size: "small",
288
- icon: /*#__PURE__*/ jsx(DeploymentUnitOutlined, {})
289
- }),
290
- /*#__PURE__*/ jsx(Typography.Text, {
291
- style: {
292
- marginLeft: 4
293
- },
294
- children: "View the module dependency, that is, module reasons in stats.json."
295
- })
296
- ]
297
- })
298
- }),
299
- /*#__PURE__*/ jsx(Row, {
300
- children: /*#__PURE__*/ jsxs(Col, {
301
- children: [
302
- /*#__PURE__*/ jsx(Tag, {
303
- color: 'purple',
304
- children: 'Bundled: 15.77 KB'
305
- }),
306
- /*#__PURE__*/ jsx(Typography.Text, {
307
- children: "The final size of the output files after processing, bundling, and optimization. This is what is delivered to the browser."
308
- })
309
- ]
130
+ }),
131
+ children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
132
+ style: {
133
+ color: 'rgba(0,0,0,.45)',
134
+ marginLeft: 4
135
+ }
136
+ })
137
+ }),
138
+ /*#__PURE__*/ jsx(Typography.Text, {
139
+ children: "."
310
140
  })
311
- }),
312
- /*#__PURE__*/ jsx(Row, {
313
- children: /*#__PURE__*/ jsxs(Col, {
314
- children: [
315
- /*#__PURE__*/ jsx(Tag, {
316
- color: 'orange',
317
- children: 'Source: 60.46 KB'
318
- }),
319
- /*#__PURE__*/ jsx(Typography.Text, {
320
- children: "The original size of your source code files before any processing or transformations. This is the raw size of your code as you wrote it."
321
- })
322
- ]
141
+ ]
142
+ })
143
+ }),
144
+ /*#__PURE__*/ jsx(Row, {
145
+ children: /*#__PURE__*/ jsxs(Col, {
146
+ children: [
147
+ /*#__PURE__*/ jsx(Button, {
148
+ size: "small",
149
+ icon: /*#__PURE__*/ jsx(CodepenCircleOutlined, {})
150
+ }),
151
+ /*#__PURE__*/ jsx(Typography.Text, {
152
+ style: {
153
+ marginLeft: 4
154
+ },
155
+ children: "Open the code."
323
156
  })
324
- })
325
- ]
157
+ ]
158
+ })
326
159
  }),
327
- children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
328
- style: {
329
- color: 'rgba(0,0,0,.45)'
330
- }
331
- })
332
- })
333
- ]
334
- }),
335
- children: /*#__PURE__*/ jsxs(Space, {
336
- style: {
337
- display: 'flex'
338
- },
339
- direction: "vertical",
340
- children: [
341
- /*#__PURE__*/ jsxs(Row, {
342
- align: "middle",
343
- gutter: [
344
- Size.BasePadding,
345
- Size.BasePadding
346
- ],
347
- children: [
348
- entryPoints && entryPoints.length ? /*#__PURE__*/ jsx(Col, {
349
- children: /*#__PURE__*/ jsx(Select, {
350
- mode: "multiple",
351
- value: selectedEntryPoints.map((e)=>e.name),
352
- style: {
353
- minWidth: 230,
354
- width: 'auto',
355
- maxWidth: 300
356
- },
357
- placeholder: 'filter assets by entry point',
358
- onChange: (name)=>{
359
- setEntryPoints(name.map((e)=>entryPoints.find((ep)=>ep.name === e)).filter(Boolean));
360
- },
361
- allowClear: true,
362
- onClear: ()=>{
363
- setEntryPoints([]);
364
- },
365
- children: entryPoints.map((e)=>/*#__PURE__*/ jsx(Select.Option, {
366
- value: e.name,
367
- children: /*#__PURE__*/ jsx(Space, {
368
- children: /*#__PURE__*/ jsx(Badge, {
369
- label: e.name,
370
- value: formatSize(e.size),
371
- tooltip: e.name
372
- })
373
- })
374
- }, e.name))
375
- })
376
- }) : null,
377
- /*#__PURE__*/ jsx(Col, {
378
- children: /*#__PURE__*/ jsx(KeywordInput, {
379
- placeholder: "search asset by keyword",
380
- onChange: onSearch
381
- })
382
- }),
383
- /*#__PURE__*/ jsx(Col, {
384
- span: 6,
385
- children: /*#__PURE__*/ jsx(InputNumber, {
386
- min: 0,
387
- style: {
388
- width: '95%'
389
- },
390
- addonBefore: /*#__PURE__*/ jsxs(Space, {
391
- children: [
392
- /*#__PURE__*/ jsx(Typography.Text, {
393
- style: {
394
- fontSize: 14,
395
- color: 'inherit'
396
- },
397
- children: "Asset Size"
398
- }),
399
- /*#__PURE__*/ jsx(Tooltip, {
400
- title: t('filter the output assets which size is greater than the input value'),
401
- style: {
402
- marginLeft: 3
403
- },
404
- children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
405
- style: {
406
- color: 'rgba(0,0,0,.45)'
407
- }
408
- })
409
- })
410
- ]
160
+ /*#__PURE__*/ jsx(Row, {
161
+ children: /*#__PURE__*/ jsxs(Col, {
162
+ children: [
163
+ /*#__PURE__*/ jsx(Button, {
164
+ size: "small",
165
+ icon: /*#__PURE__*/ jsx(DeploymentUnitOutlined, {})
411
166
  }),
412
- onChange: (value)=>onChangeAsset(Number(value)),
413
- addonAfter: selectAfter('chunk')
414
- })
415
- }),
416
- /*#__PURE__*/ jsx(Col, {
417
- span: 6,
418
- children: /*#__PURE__*/ jsx(InputNumber, {
419
- min: 0,
420
- style: {
421
- width: '95%'
422
- },
423
- addonBefore: /*#__PURE__*/ jsxs(Space, {
424
- children: [
425
- /*#__PURE__*/ jsx(Typography.Text, {
426
- style: {
427
- fontSize: 14,
428
- color: 'inherit'
429
- },
430
- children: "Module Size"
431
- }),
432
- /*#__PURE__*/ jsx(Tooltip, {
433
- title: t('filter the modules which size is greater than the input value'),
434
- style: {
435
- marginLeft: 3
436
- },
437
- children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
438
- style: {
439
- color: 'rgba(0,0,0,.45)'
440
- }
441
- })
442
- })
443
- ]
167
+ /*#__PURE__*/ jsx(Typography.Text, {
168
+ style: {
169
+ marginLeft: 4
170
+ },
171
+ children: "View the module dependency, that is, module reasons in stats.json."
172
+ })
173
+ ]
174
+ })
175
+ }),
176
+ /*#__PURE__*/ jsx(Row, {
177
+ children: /*#__PURE__*/ jsxs(Col, {
178
+ children: [
179
+ /*#__PURE__*/ jsx(Tag, {
180
+ color: 'purple',
181
+ children: 'Bundled: 15.77 KB'
444
182
  }),
445
- onChange: (value)=>{
446
- onChangeModule(Number(value));
447
- },
448
- addonAfter: selectAfter('module')
449
- })
183
+ /*#__PURE__*/ jsx(Typography.Text, {
184
+ children: "The final size of the output files after processing, bundling, and optimization. This is what is delivered to the browser."
185
+ })
186
+ ]
450
187
  })
451
- ]
452
- }),
453
- /*#__PURE__*/ jsx(Row, {
454
- children: /*#__PURE__*/ jsx(SearchModal, {})
455
- }),
456
- /*#__PURE__*/ jsx(Row, {
457
- align: "middle",
458
- gutter: [
459
- Size.BasePadding,
460
- Size.BasePadding
461
- ],
462
- children: /*#__PURE__*/ jsx(Col, {
463
- span: 24,
464
- children: filteredAssets.length ? /*#__PURE__*/ jsxs(Row, {
465
- gutter: Size.BasePadding,
188
+ }),
189
+ /*#__PURE__*/ jsx(Row, {
190
+ children: /*#__PURE__*/ jsxs(Col, {
466
191
  children: [
467
- /*#__PURE__*/ jsx(Col, {
468
- span: 6,
469
- children: /*#__PURE__*/ jsx(Card, {
470
- title: /*#__PURE__*/ jsxs(Space, {
471
- children: [
472
- /*#__PURE__*/ jsx(Typography.Text, {
473
- children: t('Output Assets List')
474
- }),
475
- /*#__PURE__*/ jsx(Divider, {
476
- type: "vertical"
477
- }),
478
- /*#__PURE__*/ jsx(Tooltip, {
479
- title: `total assets count is ${assets.length}, the filtered assets count is ${filteredAssets.length}`,
480
- children: /*#__PURE__*/ jsxs(Typography.Text, {
481
- type: "secondary",
482
- style: {
483
- fontSize: 12,
484
- fontWeight: 400
485
- },
486
- children: [
487
- filteredAssets.length,
488
- " /",
489
- ' ',
490
- assets.length
491
- ]
492
- })
493
- }),
494
- /*#__PURE__*/ jsx(Divider, {
495
- type: "vertical"
496
- }),
497
- /*#__PURE__*/ jsx(Typography.Text, {
498
- type: "secondary",
499
- style: {
500
- fontSize: 12,
501
- fontWeight: 400
502
- },
503
- children: formatSize(sumBy(filteredAssets, (e)=>e.size))
504
- })
505
- ]
506
- }),
507
- size: "small",
508
- bodyStyle: {
509
- overflow: 'scroll',
510
- height: cardBodyHeight
511
- },
512
- children: /*#__PURE__*/ jsx(FileTree, {
513
- className: index_module.assets,
514
- treeData: assetsStructures,
515
- autoExpandParent: true,
516
- defaultExpandAll: defaultExpandAll || filteredAssets.length <= 20
517
- }, `tree_${inputAssetName}_${defaultExpandAll}`)
518
- })
192
+ /*#__PURE__*/ jsx(Tag, {
193
+ color: 'orange',
194
+ children: 'Source: 60.46 KB'
519
195
  }),
520
- /*#__PURE__*/ jsx(Col, {
521
- span: 18,
522
- children: assetPath ? /*#__PURE__*/ jsx(ServerAPIProvider, {
523
- api: SDK.ServerAPI.API.GetAssetDetails,
524
- body: {
525
- assetPath
526
- },
527
- children: (details)=>/*#__PURE__*/ jsx(AssetDetail, {
528
- asset: details.asset,
529
- chunks: details.chunks,
530
- modules: details.modules,
531
- height: cardBodyHeight,
532
- moduleSizeLimit: inputModule,
533
- root: cwd
534
- })
535
- }) : /*#__PURE__*/ jsx(Card, {
536
- bodyStyle: {
537
- height: cardBodyHeight
538
- },
539
- children: /*#__PURE__*/ jsx(Empty, {
540
- description: /*#__PURE__*/ jsx(Typography.Text, {
541
- strong: true,
542
- children: "Click the file path on the left to show the modules of the asset"
543
- })
544
- })
545
- })
196
+ /*#__PURE__*/ jsx(Typography.Text, {
197
+ children: "The original size of your source code files before any processing or transformations. This is the raw size of your code as you wrote it."
546
198
  })
547
199
  ]
548
- }) : /*#__PURE__*/ jsx(Empty, {})
200
+ })
549
201
  })
550
- })
551
- ]
202
+ ]
203
+ }),
204
+ children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
205
+ style: {
206
+ color: 'rgba(0,0,0,.45)'
207
+ }
208
+ })
552
209
  })
553
- },
554
- {
555
- key: 'treemap',
556
- label: 'Treemap',
557
- children: /*#__PURE__*/ jsx(ServerAPIProvider, {
558
- api: SDK.ServerAPI.API.GetProjectInfo,
210
+ ]
211
+ }),
212
+ children: /*#__PURE__*/ jsx(TreeGraph, {
213
+ entryPoints: entryPoints,
214
+ cwd: cwd,
215
+ summary: summary
216
+ })
217
+ },
218
+ {
219
+ key: 'treemap',
220
+ label: 'Treemap',
221
+ children: /*#__PURE__*/ jsx(ServerAPIProvider, {
222
+ api: SDK.ServerAPI.API.GetProjectInfo,
223
+ children: (data)=>{
224
+ const { isRspack, hasSourceMap } = Rspack.checkSourceMapSupport(data.configs);
225
+ return /*#__PURE__*/ jsx(ServerAPIProvider, {
226
+ api: SDK.ServerAPI.API.GetSummaryBundles,
559
227
  children: (data)=>{
560
- const { isRspack, hasSourceMap } = Rspack.checkSourceMapSupport(data.configs);
561
- return /*#__PURE__*/ jsx(ServerAPIProvider, {
562
- api: SDK.ServerAPI.API.GetSummaryBundles,
563
- children: (data)=>{
564
- const isTargetFileType = (filePath)=>{
565
- const ext = filePath.toLowerCase().split('.').pop() || '';
566
- return 'js' === ext || 'cjs' === ext || 'mjs' === ext || 'bundle' === ext || 'css' === ext || 'html' === ext;
567
- };
568
- const computedTreeData = data.filter((item)=>isTargetFileType(item.asset.path)).map((item)=>({
569
- name: item.asset.path,
570
- value: item.asset.size,
571
- children: flattenTreemapData(item.modules).children
572
- }));
573
- return /*#__PURE__*/ jsx(AssetTreemapWithFilter, {
574
- treeData: computedTreeData,
575
- bundledSize: hasSourceMap || isRspack
576
- });
577
- }
228
+ const isTargetFileType = (filePath)=>{
229
+ const ext = filePath.toLowerCase().split('.').pop() || '';
230
+ return 'js' === ext || 'cjs' === ext || 'mjs' === ext || 'bundle' === ext || 'css' === ext || 'html' === ext;
231
+ };
232
+ const computedTreeData = data.filter((item)=>isTargetFileType(item.asset.path)).map((item)=>{
233
+ const moduleTree = flattenTreemapData(item.modules);
234
+ const hasModules = item.modules.length > 0;
235
+ return {
236
+ name: item.asset.path,
237
+ sourceSize: hasModules ? moduleTree.sourceSize ?? 0 : item.asset.size,
238
+ bundledSize: item.asset.size,
239
+ gzipSize: item.asset.gzipSize ?? 0,
240
+ children: moduleTree.children
241
+ };
242
+ });
243
+ return /*#__PURE__*/ jsx(AssetTreemapWithFilter, {
244
+ treeData: computedTreeData,
245
+ bundledSize: hasSourceMap || isRspack
578
246
  });
579
247
  }
580
- })
248
+ });
581
249
  }
582
- ],
583
- defaultActiveKey: "tree"
584
- })
585
- })
586
- ]
587
- }),
588
- codeDrawerComponent
250
+ })
251
+ }
252
+ ],
253
+ defaultActiveKey: "tree"
254
+ })
255
+ })
589
256
  ]
590
257
  });
591
258
  };