@rsdoctor/components 1.5.12 → 1.5.14-beta.0

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 (58) hide show
  1. package/dist/components/Alerts/collapse-cjs-require.d.ts +1 -1
  2. package/dist/components/Alerts/collapse-cross-chunks.d.ts +1 -1
  3. package/dist/components/Alerts/collapse-esm-cjs.d.ts +1 -1
  4. package/dist/components/Alerts/collapse-module-mixed-chunks.d.ts +1 -1
  5. package/dist/components/Alerts/collapse-shared.d.ts +2 -2
  6. package/dist/components/Alerts/collapse-side-effects-only-imports.d.ts +1 -1
  7. package/dist/components/Alerts/collapse.d.ts +1 -1
  8. package/dist/components/Alerts/list.d.ts +1 -1
  9. package/dist/components/FileTree/index.d.ts +1 -1
  10. package/dist/components/Layout/header.d.ts +0 -1
  11. package/dist/components/Layout/header.mjs +14 -53
  12. package/dist/components/Layout/header.mjs.map +1 -1
  13. package/dist/components/Layout/header.module.mjs +15 -0
  14. package/dist/components/Layout/header.module.mjs.map +1 -0
  15. package/dist/components/Layout/header_module.css +88 -0
  16. package/dist/components/Layout/header_module.css.map +1 -0
  17. package/dist/components/Layout/index.mjs +10 -8
  18. package/dist/components/Layout/index.mjs.map +1 -1
  19. package/dist/components/Layout/index.module.mjs +7 -0
  20. package/dist/components/Layout/index.module.mjs.map +1 -0
  21. package/dist/components/Layout/index_module.css +11 -0
  22. package/dist/components/Layout/index_module.css.map +1 -0
  23. package/dist/components/Overall/DataSummary.d.ts +1 -1
  24. package/dist/components/Overall/help-center.d.ts +1 -1
  25. package/dist/components/Overall/overview.d.ts +1 -1
  26. package/dist/components/base/CodeViewer/index.d.ts +1 -1
  27. package/dist/components/base/CodeViewer/useCodeDrawer.d.ts +1 -1
  28. package/dist/components/base/DiffViewer/index.d.ts +1 -1
  29. package/dist/components/base/DiffViewer/useDiffDrawer.d.ts +1 -1
  30. package/dist/pages/BundleSize/components/asset.mjs +392 -323
  31. package/dist/pages/BundleSize/components/asset.mjs.map +1 -1
  32. package/dist/pages/BundleSize/components/asset.module.mjs +16 -0
  33. package/dist/pages/BundleSize/components/asset.module.mjs.map +1 -0
  34. package/dist/pages/BundleSize/components/asset_module.css +111 -0
  35. package/dist/pages/BundleSize/components/asset_module.css.map +1 -0
  36. package/dist/pages/BundleSize/components/index.d.ts +1 -1
  37. package/dist/pages/BundleSize/components/index.mjs +217 -553
  38. package/dist/pages/BundleSize/components/index.mjs.map +1 -1
  39. package/dist/pages/BundleSize/components/index.module.mjs +10 -7
  40. package/dist/pages/BundleSize/components/index.module.mjs.map +1 -1
  41. package/dist/pages/BundleSize/components/index_module.css +47 -59
  42. package/dist/pages/BundleSize/components/index_module.css.map +1 -1
  43. package/dist/pages/BundleSize/components/tree-graph.d.ts +7 -0
  44. package/dist/pages/BundleSize/components/tree-graph.mjs +366 -0
  45. package/dist/pages/BundleSize/components/tree-graph.mjs.map +1 -0
  46. package/dist/pages/BundleSize/index.mjs +1 -11
  47. package/dist/pages/BundleSize/index.mjs.map +1 -1
  48. package/dist/pages/Overall/responsiveLayout.d.ts +1 -1
  49. package/dist/pages/Resources/BundleDiff/DiffContainer/utils.d.ts +1 -1
  50. package/dist/pages/TreeShaking/editor.d.ts +1 -1
  51. package/dist/pages/TreeShaking/space.d.ts +1 -1
  52. package/dist/utils/file.d.ts +1 -1
  53. package/dist/utils/hooks.d.ts +7 -1
  54. package/dist/utils/hooks.mjs +73 -3
  55. package/dist/utils/hooks.mjs.map +1 -1
  56. package/package.json +13 -12
  57. package/dist/components/Layout/header.css +0 -28
  58. package/dist/components/Layout/header.css.map +0 -1
package/dist/pages/BundleSize/components/index.mjs CHANGED
@@ -1,588 +1,252 @@
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
- })
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
129
  })
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
- direction: "vertical",
337
- children: [
338
- /*#__PURE__*/ jsxs(Row, {
339
- align: "middle",
340
- gutter: [
341
- Size.BasePadding,
342
- Size.BasePadding
343
- ],
344
- children: [
345
- entryPoints && entryPoints.length ? /*#__PURE__*/ jsx(Col, {
346
- children: /*#__PURE__*/ jsx(Select, {
347
- mode: "multiple",
348
- value: selectedEntryPoints.map((e)=>e.name),
349
- style: {
350
- minWidth: 230,
351
- width: 'auto',
352
- maxWidth: 300
353
- },
354
- placeholder: 'filter assets by entry point',
355
- onChange: (name)=>{
356
- setEntryPoints(name.map((e)=>entryPoints.find((ep)=>ep.name === e)).filter(Boolean));
357
- },
358
- allowClear: true,
359
- onClear: ()=>{
360
- setEntryPoints([]);
361
- },
362
- children: entryPoints.map((e)=>/*#__PURE__*/ jsx(Select.Option, {
363
- value: e.name,
364
- children: /*#__PURE__*/ jsx(Space, {
365
- children: /*#__PURE__*/ jsx(Badge, {
366
- label: e.name,
367
- value: formatSize(e.size),
368
- tooltip: e.name
369
- })
370
- })
371
- }, e.name))
372
- })
373
- }) : null,
374
- /*#__PURE__*/ jsx(Col, {
375
- children: /*#__PURE__*/ jsx(KeywordInput, {
376
- placeholder: "search asset by keyword",
377
- onChange: onSearch
378
- })
379
- }),
380
- /*#__PURE__*/ jsx(Col, {
381
- span: 6,
382
- children: /*#__PURE__*/ jsx(InputNumber, {
383
- min: 0,
384
- style: {
385
- width: '95%'
386
- },
387
- addonBefore: /*#__PURE__*/ jsxs(Space, {
388
- children: [
389
- /*#__PURE__*/ jsx(Typography.Text, {
390
- style: {
391
- fontSize: 14,
392
- color: 'inherit'
393
- },
394
- children: "Asset Size"
395
- }),
396
- /*#__PURE__*/ jsx(Tooltip, {
397
- title: t('filter the output assets which size is greater than the input value'),
398
- style: {
399
- marginLeft: 3
400
- },
401
- children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
402
- style: {
403
- color: 'rgba(0,0,0,.45)'
404
- }
405
- })
406
- })
407
- ]
160
+ /*#__PURE__*/ jsx(Row, {
161
+ children: /*#__PURE__*/ jsxs(Col, {
162
+ children: [
163
+ /*#__PURE__*/ jsx(Button, {
164
+ size: "small",
165
+ icon: /*#__PURE__*/ jsx(DeploymentUnitOutlined, {})
408
166
  }),
409
- onChange: (value)=>onChangeAsset(Number(value)),
410
- addonAfter: selectAfter('chunk')
411
- })
412
- }),
413
- /*#__PURE__*/ jsx(Col, {
414
- span: 6,
415
- children: /*#__PURE__*/ jsx(InputNumber, {
416
- min: 0,
417
- style: {
418
- width: '95%'
419
- },
420
- addonBefore: /*#__PURE__*/ jsxs(Space, {
421
- children: [
422
- /*#__PURE__*/ jsx(Typography.Text, {
423
- style: {
424
- fontSize: 14,
425
- color: 'inherit'
426
- },
427
- children: "Module Size"
428
- }),
429
- /*#__PURE__*/ jsx(Tooltip, {
430
- title: t('filter the modules which size is greater than the input value'),
431
- style: {
432
- marginLeft: 3
433
- },
434
- children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
435
- style: {
436
- color: 'rgba(0,0,0,.45)'
437
- }
438
- })
439
- })
440
- ]
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'
441
182
  }),
442
- onChange: (value)=>{
443
- onChangeModule(Number(value));
444
- },
445
- addonAfter: selectAfter('module')
446
- })
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
+ ]
447
187
  })
448
- ]
449
- }),
450
- /*#__PURE__*/ jsx(Row, {
451
- children: /*#__PURE__*/ jsx(SearchModal, {})
452
- }),
453
- /*#__PURE__*/ jsx(Row, {
454
- align: "middle",
455
- gutter: [
456
- Size.BasePadding,
457
- Size.BasePadding
458
- ],
459
- children: /*#__PURE__*/ jsx(Col, {
460
- span: 24,
461
- children: filteredAssets.length ? /*#__PURE__*/ jsxs(Row, {
462
- gutter: Size.BasePadding,
188
+ }),
189
+ /*#__PURE__*/ jsx(Row, {
190
+ children: /*#__PURE__*/ jsxs(Col, {
463
191
  children: [
464
- /*#__PURE__*/ jsx(Col, {
465
- span: 6,
466
- children: /*#__PURE__*/ jsx(Card, {
467
- title: /*#__PURE__*/ jsxs(Space, {
468
- children: [
469
- /*#__PURE__*/ jsx(Typography.Text, {
470
- children: t('Output Assets List')
471
- }),
472
- /*#__PURE__*/ jsx(Divider, {
473
- type: "vertical"
474
- }),
475
- /*#__PURE__*/ jsx(Tooltip, {
476
- title: `total assets count is ${assets.length}, the filtered assets count is ${filteredAssets.length}`,
477
- children: /*#__PURE__*/ jsxs(Typography.Text, {
478
- type: "secondary",
479
- style: {
480
- fontSize: 12,
481
- fontWeight: 400
482
- },
483
- children: [
484
- filteredAssets.length,
485
- " /",
486
- ' ',
487
- assets.length
488
- ]
489
- })
490
- }),
491
- /*#__PURE__*/ jsx(Divider, {
492
- type: "vertical"
493
- }),
494
- /*#__PURE__*/ jsx(Typography.Text, {
495
- type: "secondary",
496
- style: {
497
- fontSize: 12,
498
- fontWeight: 400
499
- },
500
- children: formatSize(sumBy(filteredAssets, (e)=>e.size))
501
- })
502
- ]
503
- }),
504
- size: "small",
505
- bodyStyle: {
506
- overflow: 'scroll',
507
- height: cardBodyHeight
508
- },
509
- children: /*#__PURE__*/ jsx(FileTree, {
510
- className: index_module.assets,
511
- treeData: assetsStructures,
512
- autoExpandParent: true,
513
- defaultExpandAll: defaultExpandAll || filteredAssets.length <= 20
514
- }, `tree_${inputAssetName}_${defaultExpandAll}`)
515
- })
192
+ /*#__PURE__*/ jsx(Tag, {
193
+ color: 'orange',
194
+ children: 'Source: 60.46 KB'
516
195
  }),
517
- /*#__PURE__*/ jsx(Col, {
518
- span: 18,
519
- children: assetPath ? /*#__PURE__*/ jsx(ServerAPIProvider, {
520
- api: SDK.ServerAPI.API.GetAssetDetails,
521
- body: {
522
- assetPath
523
- },
524
- children: (details)=>/*#__PURE__*/ jsx(AssetDetail, {
525
- asset: details.asset,
526
- chunks: details.chunks,
527
- modules: details.modules,
528
- height: cardBodyHeight,
529
- moduleSizeLimit: inputModule,
530
- root: cwd
531
- })
532
- }) : /*#__PURE__*/ jsx(Card, {
533
- bodyStyle: {
534
- height: cardBodyHeight
535
- },
536
- children: /*#__PURE__*/ jsx(Empty, {
537
- description: /*#__PURE__*/ jsx(Typography.Text, {
538
- strong: true,
539
- children: "Click the file path on the left to show the modules of the asset"
540
- })
541
- })
542
- })
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."
543
198
  })
544
199
  ]
545
- }) : /*#__PURE__*/ jsx(Empty, {})
200
+ })
546
201
  })
547
- })
548
- ]
202
+ ]
203
+ }),
204
+ children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
205
+ style: {
206
+ color: 'rgba(0,0,0,.45)'
207
+ }
208
+ })
549
209
  })
550
- },
551
- {
552
- key: 'treemap',
553
- label: 'Treemap',
554
- children: /*#__PURE__*/ jsx(ServerAPIProvider, {
555
- 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,
556
227
  children: (data)=>{
557
- const { isRspack, hasSourceMap } = Rspack.checkSourceMapSupport(data.configs);
558
- return /*#__PURE__*/ jsx(ServerAPIProvider, {
559
- api: SDK.ServerAPI.API.GetSummaryBundles,
560
- children: (data)=>{
561
- const isTargetFileType = (filePath)=>{
562
- const ext = filePath.toLowerCase().split('.').pop() || '';
563
- return 'js' === ext || 'cjs' === ext || 'mjs' === ext || 'bundle' === ext || 'css' === ext || 'html' === ext;
564
- };
565
- const computedTreeData = data.filter((item)=>isTargetFileType(item.asset.path)).map((item)=>({
566
- name: item.asset.path,
567
- value: item.asset.size,
568
- children: flattenTreemapData(item.modules).children
569
- }));
570
- return /*#__PURE__*/ jsx(AssetTreemapWithFilter, {
571
- treeData: computedTreeData,
572
- bundledSize: hasSourceMap || isRspack
573
- });
574
- }
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
+ name: item.asset.path,
234
+ value: item.asset.size,
235
+ children: flattenTreemapData(item.modules).children
236
+ }));
237
+ return /*#__PURE__*/ jsx(AssetTreemapWithFilter, {
238
+ treeData: computedTreeData,
239
+ bundledSize: hasSourceMap || isRspack
575
240
  });
576
241
  }
577
- })
242
+ });
578
243
  }
579
- ],
580
- defaultActiveKey: "tree"
581
- })
582
- })
583
- ]
584
- }),
585
- codeDrawerComponent
244
+ })
245
+ }
246
+ ],
247
+ defaultActiveKey: "tree"
248
+ })
249
+ })
586
250
  ]
587
251
  });
588
252
  };