@rsdoctor/components 0.3.5 → 0.3.7
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.
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
CodepenCircleOutlined,
|
|
4
|
+
ColumnHeightOutlined,
|
|
5
|
+
DeploymentUnitOutlined,
|
|
6
|
+
InfoCircleOutlined,
|
|
7
|
+
VerticalAlignMiddleOutlined
|
|
8
|
+
} from "@ant-design/icons";
|
|
3
9
|
import { SDK } from "@rsdoctor/types";
|
|
4
10
|
import {
|
|
5
11
|
Button,
|
|
@@ -33,13 +39,10 @@ import "./index.css";
|
|
|
33
39
|
const { Option } = Select;
|
|
34
40
|
const cardBodyHeight = 410;
|
|
35
41
|
const largeCardBodyHeight = 800;
|
|
36
|
-
const WebpackModulesOverallBase = ({
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
entryPoints
|
|
41
|
-
}) => {
|
|
42
|
-
const [selectedEntryPoints, setEntryPoints] = useState([]);
|
|
42
|
+
const WebpackModulesOverallBase = ({ errors, cwd, summary, entryPoints }) => {
|
|
43
|
+
const [selectedEntryPoints, setEntryPoints] = useState(
|
|
44
|
+
[]
|
|
45
|
+
);
|
|
43
46
|
const [inputModule, setModuleValue] = useState(0);
|
|
44
47
|
const [inputAssetName, setAssetName] = useState("");
|
|
45
48
|
const [inputAssetSize, setAssetSize] = useState(0);
|
|
@@ -159,9 +162,25 @@ const WebpackModulesOverallBase = ({
|
|
|
159
162
|
title: /* @__PURE__ */ jsx(Space, { children: /* @__PURE__ */ jsx(Title, { text: "From: Webpack Bundle Analyzer" }) }),
|
|
160
163
|
children: /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetTileReportHtml, body: {}, children: (data) => {
|
|
161
164
|
if (data && graphType === "tile") {
|
|
162
|
-
return /* @__PURE__ */ jsx(
|
|
165
|
+
return /* @__PURE__ */ jsx(
|
|
166
|
+
"iframe",
|
|
167
|
+
{
|
|
168
|
+
srcDoc: data,
|
|
169
|
+
width: "100%",
|
|
170
|
+
height: largeCardBodyHeight,
|
|
171
|
+
style: { border: "none" }
|
|
172
|
+
}
|
|
173
|
+
);
|
|
163
174
|
}
|
|
164
|
-
return /* @__PURE__ */ jsx(
|
|
175
|
+
return /* @__PURE__ */ jsx(
|
|
176
|
+
Empty,
|
|
177
|
+
{
|
|
178
|
+
description: /* @__PURE__ */ jsxs("div", { children: [
|
|
179
|
+
"Generate Tile Graph is Closed.",
|
|
180
|
+
/* @__PURE__ */ jsx("a", { href: "https://rsdoctor.dev/zh/config/options/options#generatetilegraph", children: "Please check the document." })
|
|
181
|
+
] })
|
|
182
|
+
}
|
|
183
|
+
);
|
|
165
184
|
} })
|
|
166
185
|
}
|
|
167
186
|
),
|
|
@@ -182,29 +201,23 @@ const WebpackModulesOverallBase = ({
|
|
|
182
201
|
] }) }),
|
|
183
202
|
/* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsxs(Col, { children: [
|
|
184
203
|
/* @__PURE__ */ jsx(Tag, { color: "green", children: "concatenated" }),
|
|
185
|
-
/* @__PURE__ */
|
|
204
|
+
/* @__PURE__ */ jsxs(Typography.Text, { children: [
|
|
205
|
+
": Indignify whether the module is the concatenated module.",
|
|
206
|
+
" "
|
|
207
|
+
] }),
|
|
186
208
|
/* @__PURE__ */ jsx("br", {}),
|
|
187
209
|
/* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Concatenated Module:" }),
|
|
188
|
-
/* @__PURE__ */
|
|
210
|
+
/* @__PURE__ */ jsxs(Typography.Text, { children: [
|
|
211
|
+
"A series module is to lift or series multiple modules into a closure when packaging.",
|
|
212
|
+
" "
|
|
213
|
+
] })
|
|
189
214
|
] }) }),
|
|
190
215
|
/* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsxs(Col, { children: [
|
|
191
|
-
/* @__PURE__ */ jsx(
|
|
192
|
-
Button,
|
|
193
|
-
{
|
|
194
|
-
size: "small",
|
|
195
|
-
icon: /* @__PURE__ */ jsx(CodepenCircleOutlined, {})
|
|
196
|
-
}
|
|
197
|
-
),
|
|
216
|
+
/* @__PURE__ */ jsx(Button, { size: "small", icon: /* @__PURE__ */ jsx(CodepenCircleOutlined, {}) }),
|
|
198
217
|
/* @__PURE__ */ jsx(Typography.Text, { children: ": Open the code." })
|
|
199
218
|
] }) }),
|
|
200
219
|
/* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsxs(Col, { children: [
|
|
201
|
-
/* @__PURE__ */ jsx(
|
|
202
|
-
Button,
|
|
203
|
-
{
|
|
204
|
-
size: "small",
|
|
205
|
-
icon: /* @__PURE__ */ jsx(DeploymentUnitOutlined, {})
|
|
206
|
-
}
|
|
207
|
-
),
|
|
220
|
+
/* @__PURE__ */ jsx(Button, { size: "small", icon: /* @__PURE__ */ jsx(DeploymentUnitOutlined, {}) }),
|
|
208
221
|
/* @__PURE__ */ jsx(Typography.Text, { children: ": View the module dependency, that is, module reasons in stats.json." })
|
|
209
222
|
] }) }),
|
|
210
223
|
/* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsxs(Col, { children: [
|
|
@@ -239,18 +252,33 @@ const WebpackModulesOverallBase = ({
|
|
|
239
252
|
style: { minWidth: 230, width: "auto", maxWidth: 300 },
|
|
240
253
|
placeholder: "filter assets by entry point",
|
|
241
254
|
onChange: (name) => {
|
|
242
|
-
setEntryPoints(
|
|
255
|
+
setEntryPoints(
|
|
256
|
+
name.map((e) => entryPoints.find((ep) => ep.name === e)).filter(Boolean)
|
|
257
|
+
);
|
|
243
258
|
},
|
|
244
259
|
allowClear: true,
|
|
245
260
|
onClear: () => {
|
|
246
261
|
setEntryPoints([]);
|
|
247
262
|
},
|
|
248
263
|
children: entryPoints.map((e) => {
|
|
249
|
-
return /* @__PURE__ */ jsx(Select.Option, { value: e.name, children: /* @__PURE__ */ jsx(Space, { children: /* @__PURE__ */ jsx(
|
|
264
|
+
return /* @__PURE__ */ jsx(Select.Option, { value: e.name, children: /* @__PURE__ */ jsx(Space, { children: /* @__PURE__ */ jsx(
|
|
265
|
+
Bdg,
|
|
266
|
+
{
|
|
267
|
+
label: e.name,
|
|
268
|
+
value: formatSize(e.size),
|
|
269
|
+
tooltip: e.name
|
|
270
|
+
}
|
|
271
|
+
) }) }, e.name);
|
|
250
272
|
})
|
|
251
273
|
}
|
|
252
274
|
) }) : null,
|
|
253
|
-
/* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
|
|
275
|
+
/* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
|
|
276
|
+
KeywordInput,
|
|
277
|
+
{
|
|
278
|
+
placeholder: "search asset by keyword",
|
|
279
|
+
onChange: onSearch
|
|
280
|
+
}
|
|
281
|
+
) }),
|
|
254
282
|
/* @__PURE__ */ jsx(Col, { span: 7, children: /* @__PURE__ */ jsx(
|
|
255
283
|
InputNumber,
|
|
256
284
|
{
|
|
@@ -261,7 +289,9 @@ const WebpackModulesOverallBase = ({
|
|
|
261
289
|
/* @__PURE__ */ jsx(
|
|
262
290
|
Tooltip,
|
|
263
291
|
{
|
|
264
|
-
title: t(
|
|
292
|
+
title: t(
|
|
293
|
+
"filter the output assets which size is greater than the input value"
|
|
294
|
+
),
|
|
265
295
|
style: { marginLeft: 3 },
|
|
266
296
|
children: /* @__PURE__ */ jsx(InfoCircleOutlined, { style: { color: "rgba(0,0,0,.45)" } })
|
|
267
297
|
}
|
|
@@ -281,7 +311,9 @@ const WebpackModulesOverallBase = ({
|
|
|
281
311
|
/* @__PURE__ */ jsx(
|
|
282
312
|
Tooltip,
|
|
283
313
|
{
|
|
284
|
-
title: t(
|
|
314
|
+
title: t(
|
|
315
|
+
"filter the modules which size is greater than the input value"
|
|
316
|
+
),
|
|
285
317
|
style: { marginLeft: 3 },
|
|
286
318
|
children: /* @__PURE__ */ jsx(InfoCircleOutlined, { style: { color: "rgba(0,0,0,.45)" } })
|
|
287
319
|
}
|
|
@@ -304,19 +336,44 @@ const WebpackModulesOverallBase = ({
|
|
|
304
336
|
Tooltip,
|
|
305
337
|
{
|
|
306
338
|
title: `total assets count is ${assets.length}, the filtered assets count is ${filteredAssets.length}`,
|
|
307
|
-
children: /* @__PURE__ */ jsxs(
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
339
|
+
children: /* @__PURE__ */ jsxs(
|
|
340
|
+
Typography.Text,
|
|
341
|
+
{
|
|
342
|
+
type: "secondary",
|
|
343
|
+
style: { fontSize: 12, fontWeight: 400 },
|
|
344
|
+
children: [
|
|
345
|
+
filteredAssets.length,
|
|
346
|
+
" / ",
|
|
347
|
+
assets.length
|
|
348
|
+
]
|
|
349
|
+
}
|
|
350
|
+
)
|
|
312
351
|
}
|
|
313
352
|
),
|
|
314
353
|
/* @__PURE__ */ jsx(Divider, { type: "vertical" }),
|
|
315
|
-
/* @__PURE__ */ jsx(
|
|
354
|
+
/* @__PURE__ */ jsx(
|
|
355
|
+
Typography.Text,
|
|
356
|
+
{
|
|
357
|
+
type: "secondary",
|
|
358
|
+
style: { fontSize: 12, fontWeight: 400 },
|
|
359
|
+
children: formatSize(sumBy(filteredAssets, (e) => e.size))
|
|
360
|
+
}
|
|
361
|
+
)
|
|
316
362
|
] }),
|
|
317
363
|
size: "small",
|
|
318
|
-
bodyStyle: {
|
|
319
|
-
|
|
364
|
+
bodyStyle: {
|
|
365
|
+
overflow: "scroll",
|
|
366
|
+
height: fold ? cardBodyHeight : largeCardBodyHeight
|
|
367
|
+
},
|
|
368
|
+
extra: /* @__PURE__ */ jsx(
|
|
369
|
+
Button,
|
|
370
|
+
{
|
|
371
|
+
size: "small",
|
|
372
|
+
icon: /* @__PURE__ */ jsx(ColumnHeightOutlined, {}),
|
|
373
|
+
onClick: () => setDefaultExpandAll(true),
|
|
374
|
+
children: "expand all"
|
|
375
|
+
}
|
|
376
|
+
),
|
|
320
377
|
children: /* @__PURE__ */ jsx(
|
|
321
378
|
FileTree,
|
|
322
379
|
{
|
|
@@ -328,22 +385,37 @@ const WebpackModulesOverallBase = ({
|
|
|
328
385
|
)
|
|
329
386
|
}
|
|
330
387
|
) }),
|
|
331
|
-
/* @__PURE__ */ jsx(Col, { span: 16, children: assetPath ? /* @__PURE__ */ jsx(
|
|
332
|
-
|
|
388
|
+
/* @__PURE__ */ jsx(Col, { span: 16, children: assetPath ? /* @__PURE__ */ jsx(
|
|
389
|
+
ServerAPIProvider,
|
|
333
390
|
{
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
391
|
+
api: SDK.ServerAPI.API.GetAssetDetails,
|
|
392
|
+
body: { assetPath },
|
|
393
|
+
children: (details) => /* @__PURE__ */ jsx(
|
|
394
|
+
AssetDetail,
|
|
395
|
+
{
|
|
396
|
+
asset: details.asset,
|
|
397
|
+
chunks: details.chunks,
|
|
398
|
+
modules: details.modules,
|
|
399
|
+
height: fold ? cardBodyHeight : largeCardBodyHeight,
|
|
400
|
+
moduleSizeLimit: inputModule,
|
|
401
|
+
root: cwd
|
|
402
|
+
}
|
|
403
|
+
)
|
|
340
404
|
}
|
|
341
|
-
)
|
|
342
|
-
|
|
405
|
+
) : /* @__PURE__ */ jsx(
|
|
406
|
+
Card,
|
|
343
407
|
{
|
|
344
|
-
|
|
408
|
+
bodyStyle: {
|
|
409
|
+
height: fold ? cardBodyHeight + 40 : largeCardBodyHeight
|
|
410
|
+
},
|
|
411
|
+
children: /* @__PURE__ */ jsx(
|
|
412
|
+
Empty,
|
|
413
|
+
{
|
|
414
|
+
description: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Click the file path on the left to show the modules of the asset" })
|
|
415
|
+
}
|
|
416
|
+
)
|
|
345
417
|
}
|
|
346
|
-
) })
|
|
418
|
+
) })
|
|
347
419
|
] }) : /* @__PURE__ */ jsx(Empty, {}) })
|
|
348
420
|
] })
|
|
349
421
|
}
|
|
@@ -355,9 +427,24 @@ const WebpackModulesOverall = withServerAPI({
|
|
|
355
427
|
responsePropName: "project",
|
|
356
428
|
Component: (props) => {
|
|
357
429
|
const { root, errors } = props.project;
|
|
358
|
-
return /* @__PURE__ */ jsx(
|
|
359
|
-
|
|
360
|
-
|
|
430
|
+
return /* @__PURE__ */ jsx(
|
|
431
|
+
ServerAPIProvider,
|
|
432
|
+
{
|
|
433
|
+
api: SDK.ServerAPI.API.GetAssetsSummary,
|
|
434
|
+
body: { withFileContent: true },
|
|
435
|
+
children: (summary) => {
|
|
436
|
+
return /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetEntryPoints, children: (entryPoints) => /* @__PURE__ */ jsx(
|
|
437
|
+
WebpackModulesOverallBase,
|
|
438
|
+
{
|
|
439
|
+
cwd: root,
|
|
440
|
+
errors,
|
|
441
|
+
summary,
|
|
442
|
+
entryPoints
|
|
443
|
+
}
|
|
444
|
+
) });
|
|
445
|
+
}
|
|
446
|
+
}
|
|
447
|
+
);
|
|
361
448
|
}
|
|
362
449
|
});
|
|
363
450
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rsdoctor/components",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.7",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -75,9 +75,9 @@
|
|
|
75
75
|
"terser": "^5.26.0",
|
|
76
76
|
"typescript": "^5.2.2",
|
|
77
77
|
"url-parse": "1.5.10",
|
|
78
|
-
"@rsdoctor/graph": "0.3.
|
|
79
|
-
"@rsdoctor/types": "0.3.
|
|
80
|
-
"@rsdoctor/utils": "0.3.
|
|
78
|
+
"@rsdoctor/graph": "0.3.7",
|
|
79
|
+
"@rsdoctor/types": "0.3.7",
|
|
80
|
+
"@rsdoctor/utils": "0.3.7"
|
|
81
81
|
},
|
|
82
82
|
"publishConfig": {
|
|
83
83
|
"access": "public",
|