@rsdoctor/components 0.4.5 → 0.4.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.
- package/dist/components/Alert/package-relation.js +1 -1
- package/dist/components/BundleDiff/DiffContainer/row.d.ts +1 -1
- package/dist/components/BundleDiff/DiffContainer/row.js +10 -10
- package/dist/components/Charts/TimelineCharts/index.js +2 -2
- package/dist/components/Charts/tooltips.css +1 -1
- package/dist/components/Charts/utils.js +7 -7
- package/dist/components/CodeViewer/index.d.ts +1 -1
- package/dist/components/CodeViewer/index.js +1 -1
- package/dist/components/Layout/progress.d.ts +1 -1
- package/dist/components/Layout/progress.js +9 -2
- package/dist/components/Status/failed.js +2 -2
- package/dist/components/Title/index.d.ts +1 -1
- package/dist/components/Title/index.js +7 -2
- package/dist/pages/BundleSize/components/asset.js +11 -7
- package/dist/pages/ModuleAnalyze/{dependncy.js → dependency.js} +2 -2
- package/dist/pages/ModuleAnalyze/fileTree.js +96 -33
- package/dist/pages/ModuleAnalyze/utils/hooks.d.ts +1 -1
- package/dist/pages/ModuleAnalyze/utils/hooks.js +5 -3
- package/dist/pages/Resources/BundleDiff/DiffContainer/row.d.ts +1 -1
- package/dist/pages/Resources/BundleDiff/DiffContainer/row.js +10 -10
- package/dist/pages/TreeShaking/utils.d.ts +1 -1
- package/dist/utils/i18n/cn.js +1 -1
- package/dist/utils/url.js +2 -2
- package/package.json +7 -7
- /package/dist/components/CodeViewer/{hightlight.d.ts → highlight.d.ts} +0 -0
- /package/dist/components/CodeViewer/{hightlight.js → highlight.js} +0 -0
- /package/dist/pages/ModuleAnalyze/{dependncy.d.ts → dependency.d.ts} +0 -0
|
@@ -225,7 +225,7 @@ const PackageRelationAlert = ({
|
|
|
225
225
|
drawerProps: { title: data.title, width: TextDrawerWidth },
|
|
226
226
|
children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", className: "alert-space", children: [
|
|
227
227
|
/* @__PURE__ */ jsxs(Space, { style: { marginBottom: Size.BasePadding / 2 }, children: [
|
|
228
|
-
/* @__PURE__ */ jsx(Title, { text: name,
|
|
228
|
+
/* @__PURE__ */ jsx(Title, { text: name, upperFirst: false }),
|
|
229
229
|
/* @__PURE__ */ jsx(Typography.Text, { strong: true, children: versions.length }),
|
|
230
230
|
/* @__PURE__ */ jsx(Typography.Text, { children: " versions was found: " }),
|
|
231
231
|
versions.map((e) => /* @__PURE__ */ jsx(Typography.Text, { strong: true, code: true, children: e }, e))
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { BundleDiffComponentCardProps, BundleDiffTableAssetsData, BundleDiffTableModulesData } from './types';
|
|
4
4
|
export declare const ModuleHashPattern: RegExp;
|
|
5
5
|
export declare const getSizeColumnPropsForModuleRow: (key: "baseline" | "current", sizeKey: "parsedSize" | "sourceSize") => ColumnType<BundleDiffTableModulesData>;
|
|
6
|
-
export declare const getTargetColumnPropsForModuleRow: (key: "baseline" | "current",
|
|
6
|
+
export declare const getTargetColumnPropsForModuleRow: (key: "baseline" | "current", bModulesCount: number, cModulesCount: number) => ColumnGroupType<BundleDiffTableModulesData>;
|
|
7
7
|
export declare const ModuleRowForAsset: React.FC<{
|
|
8
8
|
data: BundleDiffTableAssetsData;
|
|
9
9
|
} & Pick<BundleDiffComponentCardProps, 'baseline' | 'current'>>;
|
|
@@ -44,13 +44,13 @@ const getSizeColumnPropsForModuleRow = (key, sizeKey) => {
|
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
46
|
};
|
|
47
|
-
const getTargetColumnPropsForModuleRow = (key,
|
|
47
|
+
const getTargetColumnPropsForModuleRow = (key, bModulesCount, cModulesCount) => {
|
|
48
48
|
const isB = key === "baseline";
|
|
49
49
|
return {
|
|
50
50
|
title: () => {
|
|
51
|
-
const count = isB ?
|
|
51
|
+
const count = isB ? bModulesCount : cModulesCount;
|
|
52
52
|
const title = upperFirst(key);
|
|
53
|
-
const diff = Graph.diffSize(
|
|
53
|
+
const diff = Graph.diffSize(bModulesCount, cModulesCount);
|
|
54
54
|
return /* @__PURE__ */ jsxs("div", { children: [
|
|
55
55
|
/* @__PURE__ */ jsx(Typography.Text, { children: title }),
|
|
56
56
|
/* @__PURE__ */ jsx(Divider, { type: "vertical" }),
|
|
@@ -161,7 +161,7 @@ const ModuleRowForAsset = ({ data, baseline, current }) => {
|
|
|
161
161
|
});
|
|
162
162
|
return [...map.values()];
|
|
163
163
|
}, [bModules, cModules, searchText]);
|
|
164
|
-
const {
|
|
164
|
+
const { bModulesCount, cModulesCount, totalCount } = useMemo(() => {
|
|
165
165
|
const fileNameFilter = (e) => getPathInfo(e).alias.indexOf(searchText) > -1;
|
|
166
166
|
let b = dataSource.filter((e) => e.baseline);
|
|
167
167
|
let c = dataSource.filter((e) => e.current);
|
|
@@ -172,8 +172,8 @@ const ModuleRowForAsset = ({ data, baseline, current }) => {
|
|
|
172
172
|
totalCount2 = dataSource.filter(fileNameFilter).length;
|
|
173
173
|
}
|
|
174
174
|
return {
|
|
175
|
-
|
|
176
|
-
|
|
175
|
+
bModulesCount: b.length,
|
|
176
|
+
cModulesCount: c.length,
|
|
177
177
|
totalCount: totalCount2
|
|
178
178
|
};
|
|
179
179
|
}, [dataSource, searchText]);
|
|
@@ -319,13 +319,13 @@ const ModuleRowForAsset = ({ data, baseline, current }) => {
|
|
|
319
319
|
},
|
|
320
320
|
getTargetColumnPropsForModuleRow(
|
|
321
321
|
"current",
|
|
322
|
-
|
|
323
|
-
|
|
322
|
+
bModulesCount,
|
|
323
|
+
cModulesCount
|
|
324
324
|
),
|
|
325
325
|
getTargetColumnPropsForModuleRow(
|
|
326
326
|
"baseline",
|
|
327
|
-
|
|
328
|
-
|
|
327
|
+
bModulesCount,
|
|
328
|
+
cModulesCount
|
|
329
329
|
),
|
|
330
330
|
{
|
|
331
331
|
title: "Actions",
|
|
@@ -16,7 +16,7 @@ const LINE_HEIGHT = 60;
|
|
|
16
16
|
const TimelineCom = memo(({ loaderData, pluginsData, formatterFn, chartType = "normal" }) => {
|
|
17
17
|
const data = [];
|
|
18
18
|
let categories = [];
|
|
19
|
-
const [optionsData,
|
|
19
|
+
const [optionsData, setOptionsData] = useState({});
|
|
20
20
|
echarts.use([
|
|
21
21
|
CustomChart,
|
|
22
22
|
TooltipComponent,
|
|
@@ -210,7 +210,7 @@ const TimelineCom = memo(({ loaderData, pluginsData, formatterFn, chartType = "n
|
|
|
210
210
|
}
|
|
211
211
|
]
|
|
212
212
|
};
|
|
213
|
-
|
|
213
|
+
setOptionsData(option);
|
|
214
214
|
}, [loaderData, pluginsData]);
|
|
215
215
|
return /* @__PURE__ */ jsx(
|
|
216
216
|
ReactEChartsCore,
|
|
@@ -15,7 +15,7 @@ function getTooltipHtmlForLoader(loader) {
|
|
|
15
15
|
</li>
|
|
16
16
|
<li class="loader-tooltip-item">
|
|
17
17
|
<span>duration</span>
|
|
18
|
-
<span class="loader-tooltip-
|
|
18
|
+
<span class="loader-tooltip-text-bold">${formatCosts(loader.costs)}</span>
|
|
19
19
|
</li>
|
|
20
20
|
<li class="loader-tooltip-item">
|
|
21
21
|
<span>filepath</span>
|
|
@@ -23,13 +23,13 @@ function getTooltipHtmlForLoader(loader) {
|
|
|
23
23
|
</li>
|
|
24
24
|
<li class="loader-tooltip-item">
|
|
25
25
|
<span>start</span>
|
|
26
|
-
<span class="loader-tooltip-
|
|
26
|
+
<span class="loader-tooltip-text-bold">${dayjs(loader.startAt).format(
|
|
27
27
|
"YYYY/MM/DD HH:mm:ss"
|
|
28
28
|
)}</span>
|
|
29
29
|
</li>
|
|
30
30
|
<li class="loader-tooltip-item">
|
|
31
31
|
<span>end</span>
|
|
32
|
-
<span class="loader-tooltip-
|
|
32
|
+
<span class="loader-tooltip-text-bold">${dayjs(loader.endAt).format(
|
|
33
33
|
"YYYY/MM/DD HH:mm:ss"
|
|
34
34
|
)}</span>
|
|
35
35
|
</li>
|
|
@@ -52,19 +52,19 @@ function renderTotalLoadersTooltip(loaderName, loaders, cwd) {
|
|
|
52
52
|
<div class="loader-tooltip-title">${loaderName}</div>
|
|
53
53
|
<li class="loader-tooltip-item">
|
|
54
54
|
<span>files</span>
|
|
55
|
-
<span class="loader-tooltip-
|
|
55
|
+
<span class="loader-tooltip-text-bold">${resources.length}</span>
|
|
56
56
|
</li>
|
|
57
57
|
<li class="loader-tooltip-item">
|
|
58
58
|
<span>files(node_modules)</span>
|
|
59
|
-
<span class="loader-tooltip-
|
|
59
|
+
<span class="loader-tooltip-text-bold">${nodeModulesResources.length}</span>
|
|
60
60
|
</li>
|
|
61
61
|
<li class="loader-tooltip-item">
|
|
62
62
|
<span>files(outside the cwd)</span>
|
|
63
|
-
<span class="loader-tooltip-
|
|
63
|
+
<span class="loader-tooltip-text-bold">${outsideResources.length}</span>
|
|
64
64
|
</li>
|
|
65
65
|
<li class="loader-tooltip-item">
|
|
66
66
|
<span>duration(estimated)</span>
|
|
67
|
-
<span class="loader-tooltip-
|
|
67
|
+
<span class="loader-tooltip-text-bold">${formatCosts(duration)}</span>
|
|
68
68
|
</li>
|
|
69
69
|
<li class="loader-tooltip-item">
|
|
70
70
|
<span>start(min)</span>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { SDK } from '@rsdoctor/types';
|
|
3
3
|
export interface ProgressProps {
|
|
4
|
-
progress: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.APIExtends.
|
|
4
|
+
progress: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.APIExtends.GetCompileProgress>;
|
|
5
5
|
}
|
|
6
6
|
export declare const Progress: React.FC<Omit<ProgressProps, "progress"> & Partial<{
|
|
7
7
|
body?: any;
|
|
@@ -27,14 +27,21 @@ const ProgressBase = ({ progress }) => {
|
|
|
27
27
|
percent: 100,
|
|
28
28
|
status: "active",
|
|
29
29
|
size: "small",
|
|
30
|
-
format: () => /* @__PURE__ */ jsx(
|
|
30
|
+
format: () => /* @__PURE__ */ jsx(
|
|
31
|
+
Typography.Text,
|
|
32
|
+
{
|
|
33
|
+
style: { fontSize: 12 },
|
|
34
|
+
type: "secondary",
|
|
35
|
+
children: `${per}% ${message}`
|
|
36
|
+
}
|
|
37
|
+
)
|
|
31
38
|
}
|
|
32
39
|
) })
|
|
33
40
|
}
|
|
34
41
|
);
|
|
35
42
|
};
|
|
36
43
|
const Progress = withServerAPI({
|
|
37
|
-
api: SDK.ServerAPI.APIExtends.
|
|
44
|
+
api: SDK.ServerAPI.APIExtends.GetCompileProgress,
|
|
38
45
|
responsePropName: "progress",
|
|
39
46
|
Component: ProgressBase,
|
|
40
47
|
fallbackComponent: () => null
|
|
@@ -2,10 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { Button, Empty, Space, Typography } from "antd";
|
|
3
3
|
import React from "react";
|
|
4
4
|
const defaultTitle = "Load data failed, please try again";
|
|
5
|
-
const
|
|
5
|
+
const defaultButtonText = "retry";
|
|
6
6
|
const FailedStatusComponent = ({
|
|
7
7
|
title = defaultTitle,
|
|
8
|
-
buttonText =
|
|
8
|
+
buttonText = defaultButtonText,
|
|
9
9
|
retry
|
|
10
10
|
}) => {
|
|
11
11
|
return /* @__PURE__ */ jsx(
|
|
@@ -1,8 +1,13 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { Typography } from "antd";
|
|
3
3
|
import { upperFirst as upf } from "lodash-es";
|
|
4
|
-
const Title = ({
|
|
5
|
-
|
|
4
|
+
const Title = ({
|
|
5
|
+
upperFirst = true,
|
|
6
|
+
fontSize = 16,
|
|
7
|
+
text,
|
|
8
|
+
hash
|
|
9
|
+
}) => {
|
|
10
|
+
const t = typeof text === "string" ? upperFirst ? upf(text) : text : text;
|
|
6
11
|
return /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize }, strong: true, children: hash ? /* @__PURE__ */ jsx("a", { href: hash, id: hash.replace(/^#/, ""), style: { color: "inherit" }, children: t }) : t });
|
|
7
12
|
};
|
|
8
13
|
export {
|
|
@@ -40,7 +40,7 @@ import {
|
|
|
40
40
|
useI18n
|
|
41
41
|
} from "../../../utils";
|
|
42
42
|
import { ModuleGraphListContext } from "../config";
|
|
43
|
-
let
|
|
43
|
+
let expandedModulesKeys = [];
|
|
44
44
|
const TAB_MAP = {
|
|
45
45
|
source: "source code",
|
|
46
46
|
transformed: "Transformed Code (After compile)",
|
|
@@ -77,7 +77,7 @@ const ModuleCodeViewer = ({
|
|
|
77
77
|
text: "",
|
|
78
78
|
buttonProps: {
|
|
79
79
|
size: "small",
|
|
80
|
-
icon: /* @__PURE__ */ jsx(CodepenCircleOutlined, {}),
|
|
80
|
+
icon: /* @__PURE__ */ jsx(Popover, { content: "Open the Codes Box", children: /* @__PURE__ */ jsx(CodepenCircleOutlined, {}) }),
|
|
81
81
|
type: "default"
|
|
82
82
|
},
|
|
83
83
|
buttonStyle: { padding: `0 4px` },
|
|
@@ -415,7 +415,7 @@ const AssetDetail = ({
|
|
|
415
415
|
children: /* @__PURE__ */ jsx(Tag, { color: "green", children: "concatenated" })
|
|
416
416
|
}
|
|
417
417
|
) : null,
|
|
418
|
-
/* @__PURE__ */ jsx(
|
|
418
|
+
/* @__PURE__ */ jsx(Popover, { content: "Open the Module Graph Box", children: /* @__PURE__ */ jsx(
|
|
419
419
|
Button,
|
|
420
420
|
{
|
|
421
421
|
size: "small",
|
|
@@ -425,7 +425,7 @@ const AssetDetail = ({
|
|
|
425
425
|
setShow(true);
|
|
426
426
|
}
|
|
427
427
|
}
|
|
428
|
-
),
|
|
428
|
+
) }),
|
|
429
429
|
/* @__PURE__ */ jsx(ModuleCodeViewer, { data: mod })
|
|
430
430
|
] });
|
|
431
431
|
},
|
|
@@ -436,9 +436,13 @@ const AssetDetail = ({
|
|
|
436
436
|
(e) => includeModules.find((m) => m.path === e)
|
|
437
437
|
);
|
|
438
438
|
const parsedSize = sumBy(mods, (e) => e.size?.parsedSize || 0);
|
|
439
|
+
const sourceSize = sumBy(mods, (e) => e.size?.sourceSize || 0);
|
|
439
440
|
return /* @__PURE__ */ jsxs(Space, { children: [
|
|
440
441
|
/* @__PURE__ */ jsx(Typography.Text, { children: defaultTitle }),
|
|
441
|
-
parsedSize > 0 ? /* @__PURE__ */
|
|
442
|
+
parsedSize > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
443
|
+
/* @__PURE__ */ jsx(Tag, { style: tagStyle, color: "orange", children: "Bundled:" + formatSize(parsedSize) }),
|
|
444
|
+
/* @__PURE__ */ jsx(Tag, { style: tagStyle, color: "lime", children: "Source:" + formatSize(sourceSize) })
|
|
445
|
+
] }) : /* @__PURE__ */ jsx(Tag, { style: tagStyle, color: "lime", children: "Source:" + formatSize(sourceSize) })
|
|
442
446
|
] });
|
|
443
447
|
}
|
|
444
448
|
return defaultTitle;
|
|
@@ -497,12 +501,12 @@ const AssetDetail = ({
|
|
|
497
501
|
FileTree,
|
|
498
502
|
{
|
|
499
503
|
onExpand: (expandedKeys) => {
|
|
500
|
-
|
|
504
|
+
expandedModulesKeys = expandedKeys;
|
|
501
505
|
},
|
|
502
506
|
treeData: fileStructures,
|
|
503
507
|
autoExpandParent: true,
|
|
504
508
|
defaultExpandParent: true,
|
|
505
|
-
defaultExpandedKeys:
|
|
509
|
+
defaultExpandedKeys: expandedModulesKeys?.length ? expandedModulesKeys : fileStructures.length === 1 ? [fileStructures[0].key] : [],
|
|
506
510
|
defaultExpandAll: defaultExpandAll || filteredModules.length <= 20
|
|
507
511
|
},
|
|
508
512
|
`tree_${moduleKeyword}_${defaultExpandAll}_${asset.path}`
|
|
@@ -25,7 +25,7 @@ const DependencyTree = ({ dependencies, cwd, module }) => {
|
|
|
25
25
|
}, [module]);
|
|
26
26
|
return /* @__PURE__ */ jsx(Row, { justify: "start", align: "middle", children: /* @__PURE__ */ jsx(Col, { span: 24, children: treedata.length ? /* @__PURE__ */ jsx(FileTree, { treeData: treedata, needJumpto: true, cwd }) : /* @__PURE__ */ jsx(Empty, {}) }) });
|
|
27
27
|
};
|
|
28
|
-
var
|
|
28
|
+
var dependency_default = memo(DependencyTree);
|
|
29
29
|
export {
|
|
30
|
-
|
|
30
|
+
dependency_default as default
|
|
31
31
|
};
|
|
@@ -7,7 +7,17 @@ import {
|
|
|
7
7
|
RightSquareTwoTone
|
|
8
8
|
} from "@ant-design/icons";
|
|
9
9
|
import { SDK } from "@rsdoctor/types";
|
|
10
|
-
import {
|
|
10
|
+
import {
|
|
11
|
+
Badge,
|
|
12
|
+
Button,
|
|
13
|
+
Col,
|
|
14
|
+
Empty,
|
|
15
|
+
Popover,
|
|
16
|
+
Radio,
|
|
17
|
+
Row,
|
|
18
|
+
Tag,
|
|
19
|
+
Typography
|
|
20
|
+
} from "antd";
|
|
11
21
|
import { useEffect, useState } from "react";
|
|
12
22
|
import { ServerAPIProvider } from "../../components/Manifest";
|
|
13
23
|
import { Title } from "../../components/Title";
|
|
@@ -16,9 +26,9 @@ import { useI18n } from "../../utils/hooks";
|
|
|
16
26
|
import { ChunksTable } from "./chunks";
|
|
17
27
|
import { FileTree } from "./components/fileTreeCom";
|
|
18
28
|
import { clsNamePrefix } from "./constants";
|
|
19
|
-
import DependencyTree from "./
|
|
29
|
+
import DependencyTree from "./dependency";
|
|
20
30
|
import { getImporteds, getModuleReasonsTree } from "./utils";
|
|
21
|
-
import {
|
|
31
|
+
import { useCreateFileTreeData } from "./utils/hooks";
|
|
22
32
|
var ChartDimension = /* @__PURE__ */ ((ChartDimension2) => {
|
|
23
33
|
ChartDimension2[ChartDimension2["Dependencies"] = 0] = "Dependencies";
|
|
24
34
|
ChartDimension2[ChartDimension2["Chunks"] = 1] = "Chunks";
|
|
@@ -27,11 +37,21 @@ var ChartDimension = /* @__PURE__ */ ((ChartDimension2) => {
|
|
|
27
37
|
const ModuleFilesTree = (props) => {
|
|
28
38
|
const { curModule, modules, dependencies, cwd, selectedChunk = "" } = props;
|
|
29
39
|
const { t } = useI18n();
|
|
30
|
-
const [importedModules, setImportedModules] = useState(
|
|
31
|
-
|
|
40
|
+
const [importedModules, setImportedModules] = useState(
|
|
41
|
+
[]
|
|
42
|
+
);
|
|
43
|
+
const [dimension, setDimension] = useState(
|
|
44
|
+
0 /* Dependencies */
|
|
45
|
+
);
|
|
32
46
|
const [fold, setFold] = useState(true);
|
|
33
|
-
const { data: fileStructures } =
|
|
34
|
-
|
|
47
|
+
const { data: fileStructures } = useCreateFileTreeData(
|
|
48
|
+
modules,
|
|
49
|
+
importedModules,
|
|
50
|
+
curModule
|
|
51
|
+
);
|
|
52
|
+
const [reasonsTree, setReasonsTree] = useState(
|
|
53
|
+
{}
|
|
54
|
+
);
|
|
35
55
|
useEffect(() => {
|
|
36
56
|
const importeds = getImporteds(curModule, modules);
|
|
37
57
|
setImportedModules(importeds);
|
|
@@ -62,7 +82,15 @@ const ModuleFilesTree = (props) => {
|
|
|
62
82
|
] }),
|
|
63
83
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
64
84
|
/* @__PURE__ */ jsx(Badge, { status: "success", text: " " }),
|
|
65
|
-
/* @__PURE__ */ jsx(
|
|
85
|
+
/* @__PURE__ */ jsx(
|
|
86
|
+
Popover,
|
|
87
|
+
{
|
|
88
|
+
content: "*",
|
|
89
|
+
title: "Concatenated Module Name",
|
|
90
|
+
trigger: "hover",
|
|
91
|
+
children: /* @__PURE__ */ jsx(Tag, { color: TAG_PALLETE.DARK_BLUE, children: "Concatenated" })
|
|
92
|
+
}
|
|
93
|
+
),
|
|
66
94
|
/* @__PURE__ */ jsx(Typography.Text, { children: `: ${t("Concatenated Tag")}` })
|
|
67
95
|
] }),
|
|
68
96
|
/* @__PURE__ */ jsxs("div", { children: [
|
|
@@ -82,7 +110,9 @@ const ModuleFilesTree = (props) => {
|
|
|
82
110
|
FileTree,
|
|
83
111
|
{
|
|
84
112
|
cwd,
|
|
85
|
-
treeData: selectedChunk ? fileStructures.filter(
|
|
113
|
+
treeData: selectedChunk ? fileStructures.filter(
|
|
114
|
+
(_parent) => reasonsTree[_parent.id].indexOf(selectedChunk) >= 0
|
|
115
|
+
) : fileStructures,
|
|
86
116
|
needCode: true,
|
|
87
117
|
needShowAllTree: true,
|
|
88
118
|
needJumpto: true,
|
|
@@ -90,33 +120,66 @@ const ModuleFilesTree = (props) => {
|
|
|
90
120
|
}
|
|
91
121
|
) : /* @__PURE__ */ jsx(Empty, { className: `${clsNamePrefix}-empty` })
|
|
92
122
|
] }) }) }),
|
|
93
|
-
/* @__PURE__ */ jsx(Col, { span: fold ? 6 : 12, children: /* @__PURE__ */ jsxs(
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
{
|
|
98
|
-
|
|
123
|
+
/* @__PURE__ */ jsx(Col, { span: fold ? 6 : 12, children: /* @__PURE__ */ jsxs(
|
|
124
|
+
"div",
|
|
125
|
+
{
|
|
126
|
+
className: `${clsNamePrefix}-file-tree`,
|
|
127
|
+
style: { padding: Size.BasePadding / 2 },
|
|
128
|
+
children: [
|
|
129
|
+
fold ? /* @__PURE__ */ jsx(Popover, { content: "Unfold [Dependencies & Chunks] Box.", children: /* @__PURE__ */ jsx(
|
|
130
|
+
MenuFoldOutlined,
|
|
99
131
|
{
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
}
|
|
132
|
+
onClick: () => setFold(!fold),
|
|
133
|
+
style: { marginRight: 8 }
|
|
134
|
+
}
|
|
135
|
+
) }) : /* @__PURE__ */ jsx(Popover, { content: "Fold [Dependencies & Chunks] Box.", children: /* @__PURE__ */ jsx(
|
|
136
|
+
MenuUnfoldOutlined,
|
|
103
137
|
{
|
|
104
|
-
|
|
105
|
-
|
|
138
|
+
onClick: () => setFold(!fold),
|
|
139
|
+
style: { marginRight: 8 }
|
|
106
140
|
}
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
141
|
+
) }),
|
|
142
|
+
/* @__PURE__ */ jsx(
|
|
143
|
+
Radio.Group,
|
|
144
|
+
{
|
|
145
|
+
options: [
|
|
146
|
+
{
|
|
147
|
+
label: "Dependencies",
|
|
148
|
+
value: 0 /* Dependencies */
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
label: "Chunks",
|
|
152
|
+
value: 1 /* Chunks */
|
|
153
|
+
}
|
|
154
|
+
],
|
|
155
|
+
onChange: (e) => setDimension(e.target.value),
|
|
156
|
+
value: dimension,
|
|
157
|
+
optionType: "button",
|
|
158
|
+
buttonStyle: "solid",
|
|
159
|
+
size: "middle"
|
|
160
|
+
}
|
|
161
|
+
),
|
|
162
|
+
!fold ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
163
|
+
dimension === 0 /* Dependencies */ && /* @__PURE__ */ jsx(Col, { span: 24, style: { marginTop: Size.BasePadding / 2 }, children: curModule ? /* @__PURE__ */ jsx(
|
|
164
|
+
DependencyTree,
|
|
165
|
+
{
|
|
166
|
+
module: curModule,
|
|
167
|
+
dependencies,
|
|
168
|
+
cwd
|
|
169
|
+
}
|
|
170
|
+
) : /* @__PURE__ */ jsx(Empty, { className: `${clsNamePrefix}-empty` }) }),
|
|
171
|
+
dimension === 1 /* Chunks */ && /* @__PURE__ */ jsx(Col, { span: 18, style: { marginTop: Size.BasePadding / 2 }, children: curModule ? /* @__PURE__ */ jsx(
|
|
172
|
+
ServerAPIProvider,
|
|
173
|
+
{
|
|
174
|
+
api: SDK.ServerAPI.API.GetChunksByModuleId,
|
|
175
|
+
body: { moduleId: curModule.id },
|
|
176
|
+
children: (res) => /* @__PURE__ */ jsx(ChunksTable, { chunks: res })
|
|
177
|
+
}
|
|
178
|
+
) : /* @__PURE__ */ jsx(Empty, { className: `${clsNamePrefix}-empty` }) })
|
|
179
|
+
] }) : /* @__PURE__ */ jsx(Fragment, {})
|
|
180
|
+
]
|
|
181
|
+
}
|
|
182
|
+
) })
|
|
120
183
|
] })
|
|
121
184
|
] });
|
|
122
185
|
};
|
|
@@ -15,7 +15,7 @@ export type NewTreeNodeType = {
|
|
|
15
15
|
children?: number[];
|
|
16
16
|
needExpand?: boolean | string;
|
|
17
17
|
};
|
|
18
|
-
export declare function
|
|
18
|
+
export declare function useCreateFileTreeData(modules: SDK.ModuleData[], importedModules: SDK.ModuleData[], curModule: SDK.ModuleData): {
|
|
19
19
|
data: NewTreeNodeType[];
|
|
20
20
|
};
|
|
21
21
|
export declare function getContactMainModulePath(concatModules: number[], modules: SDK.ModuleData[]): string[];
|
|
@@ -2,7 +2,7 @@ import { compact } from "lodash-es";
|
|
|
2
2
|
import { useMemo } from "react";
|
|
3
3
|
import { formatSize, getShortPath } from "../../../utils";
|
|
4
4
|
import { getImporteds } from ".";
|
|
5
|
-
function
|
|
5
|
+
function useCreateFileTreeData(modules, importedModules, curModule) {
|
|
6
6
|
return useMemo(() => {
|
|
7
7
|
if (!importedModules || !importedModules?.length) {
|
|
8
8
|
return { filterData: [], data: [] };
|
|
@@ -53,10 +53,12 @@ function getLeafs(imported, modules, fatherModule) {
|
|
|
53
53
|
return leafs;
|
|
54
54
|
}
|
|
55
55
|
function getContactMainModulePath(concatModules, modules) {
|
|
56
|
-
const concatModulesPath = concatModules?.map(
|
|
56
|
+
const concatModulesPath = concatModules?.map(
|
|
57
|
+
(cm) => modules.filter((m) => m.id === cm)?.[0]
|
|
58
|
+
);
|
|
57
59
|
return concatModulesPath?.map((m) => m.path);
|
|
58
60
|
}
|
|
59
61
|
export {
|
|
60
62
|
getContactMainModulePath,
|
|
61
|
-
|
|
63
|
+
useCreateFileTreeData
|
|
62
64
|
};
|
|
@@ -3,7 +3,7 @@ import React from 'react';
|
|
|
3
3
|
import { BundleDiffComponentCardProps, BundleDiffTableAssetsData, BundleDiffTableModulesData } from './types';
|
|
4
4
|
export declare const ModuleHashPattern: RegExp;
|
|
5
5
|
export declare const getSizeColumnPropsForModuleRow: (key: "baseline" | "current", sizeKey: "parsedSize" | "sourceSize", sortByChanged?: boolean) => ColumnType<BundleDiffTableModulesData>;
|
|
6
|
-
export declare const getTargetColumnPropsForModuleRow: (key: "baseline" | "current",
|
|
6
|
+
export declare const getTargetColumnPropsForModuleRow: (key: "baseline" | "current", bModulesCount: number, cModulesCount: number) => ColumnGroupType<BundleDiffTableModulesData>;
|
|
7
7
|
export declare const ModuleRowForAsset: React.FC<{
|
|
8
8
|
data: BundleDiffTableAssetsData;
|
|
9
9
|
} & Pick<BundleDiffComponentCardProps, 'baseline' | 'current'>>;
|
|
@@ -46,14 +46,14 @@ const getSizeColumnPropsForModuleRow = (key, sizeKey, sortByChanged) => {
|
|
|
46
46
|
}
|
|
47
47
|
};
|
|
48
48
|
};
|
|
49
|
-
const getTargetColumnPropsForModuleRow = (key,
|
|
49
|
+
const getTargetColumnPropsForModuleRow = (key, bModulesCount, cModulesCount) => {
|
|
50
50
|
const [sortByChanged, setSortByChanged] = useState(false);
|
|
51
51
|
const isB = key === "baseline";
|
|
52
52
|
return {
|
|
53
53
|
title: () => {
|
|
54
|
-
const count = isB ?
|
|
54
|
+
const count = isB ? bModulesCount : cModulesCount;
|
|
55
55
|
const title = upperFirst(key);
|
|
56
|
-
const diff = Graph.diffSize(
|
|
56
|
+
const diff = Graph.diffSize(bModulesCount, cModulesCount);
|
|
57
57
|
return /* @__PURE__ */ jsxs("div", { children: [
|
|
58
58
|
/* @__PURE__ */ jsx(Typography.Text, { children: title }),
|
|
59
59
|
/* @__PURE__ */ jsx(Divider, { type: "vertical" }),
|
|
@@ -169,7 +169,7 @@ const ModuleRowForAsset = ({ data, baseline, current }) => {
|
|
|
169
169
|
});
|
|
170
170
|
return [...map.values()];
|
|
171
171
|
}, [bModules, cModules, searchText]);
|
|
172
|
-
const {
|
|
172
|
+
const { bModulesCount, cModulesCount, totalCount } = useMemo(() => {
|
|
173
173
|
const fileNameFilter = (e) => getPathInfo(e).alias.indexOf(searchText) > -1;
|
|
174
174
|
let b = dataSource.filter((e) => e.baseline);
|
|
175
175
|
let c = dataSource.filter((e) => e.current);
|
|
@@ -180,8 +180,8 @@ const ModuleRowForAsset = ({ data, baseline, current }) => {
|
|
|
180
180
|
totalCount2 = dataSource.filter(fileNameFilter).length;
|
|
181
181
|
}
|
|
182
182
|
return {
|
|
183
|
-
|
|
184
|
-
|
|
183
|
+
bModulesCount: b.length,
|
|
184
|
+
cModulesCount: c.length,
|
|
185
185
|
totalCount: totalCount2
|
|
186
186
|
};
|
|
187
187
|
}, [dataSource, searchText]);
|
|
@@ -327,13 +327,13 @@ const ModuleRowForAsset = ({ data, baseline, current }) => {
|
|
|
327
327
|
},
|
|
328
328
|
getTargetColumnPropsForModuleRow(
|
|
329
329
|
"current",
|
|
330
|
-
|
|
331
|
-
|
|
330
|
+
bModulesCount,
|
|
331
|
+
cModulesCount
|
|
332
332
|
),
|
|
333
333
|
getTargetColumnPropsForModuleRow(
|
|
334
334
|
"baseline",
|
|
335
|
-
|
|
336
|
-
|
|
335
|
+
bModulesCount,
|
|
336
|
+
cModulesCount
|
|
337
337
|
),
|
|
338
338
|
{
|
|
339
339
|
title: "Actions",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Module, ModuleGraph, Statement } from '@rsdoctor/graph';
|
|
2
2
|
import type { editor } from 'monaco-editor';
|
|
3
|
-
export declare function useFileStructures(modules: Module[], moduleGraph: ModuleGraph, searchInput: string, selectedModule: Module, onItemClick: (file: string) => void, cwd: string): import("
|
|
3
|
+
export declare function useFileStructures(modules: Module[], moduleGraph: ModuleGraph, searchInput: string, selectedModule: Module, onItemClick: (file: string) => void, cwd: string): import("../../utils").DataNode[];
|
|
4
4
|
export declare function getTreeFilesDefaultExpandedKeys(files: any[]): (string | number)[];
|
|
5
5
|
export declare function ellipsisPath(full: string): string;
|
|
6
6
|
export declare function getModulePositionString(statement: Statement, module: Module): string;
|
package/dist/utils/i18n/cn.js
CHANGED
|
@@ -25,7 +25,7 @@ const cn = {
|
|
|
25
25
|
"After Compile": "编译后",
|
|
26
26
|
"After Bundle": "打包后",
|
|
27
27
|
CodeModeExplain: "Lite 模式下或纯 stats.json 上传的情况下只有 source code.",
|
|
28
|
-
DuplicatePakCodeExplain: "纯 stats.json 输入的情况下没有代码,可使用
|
|
28
|
+
DuplicatePakCodeExplain: "纯 stats.json 输入的情况下没有代码,可使用 Rsdoctor 插件参与构建会有对应代码。"
|
|
29
29
|
};
|
|
30
30
|
var cn_default = cn;
|
|
31
31
|
export {
|
package/dist/utils/url.js
CHANGED
|
@@ -46,8 +46,8 @@ function getSharingUrl(manifestCloudUrl) {
|
|
|
46
46
|
return url.toString();
|
|
47
47
|
}
|
|
48
48
|
function getDemoUrl() {
|
|
49
|
-
if (process.env.
|
|
50
|
-
return getSharingUrl(process.env.
|
|
49
|
+
if (process.env.OFFICIAL_DEMO_MANIFEST_PATH) {
|
|
50
|
+
return getSharingUrl(process.env.OFFICIAL_DEMO_MANIFEST_PATH);
|
|
51
51
|
}
|
|
52
52
|
return null;
|
|
53
53
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rsdoctor/components",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.7",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"module": "dist/index.js",
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
"@types/lodash-es": "4.17.12",
|
|
50
50
|
"@types/node": "^16",
|
|
51
51
|
"@types/path-browserify": "1.0.3",
|
|
52
|
-
"@types/react": "^18.3.
|
|
52
|
+
"@types/react": "^18.3.11",
|
|
53
53
|
"@types/react-highlight-words": "^0.20.0",
|
|
54
54
|
"@types/url-parse": "1.4.11",
|
|
55
55
|
"ansi-to-react": "6.1.6",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"path-browserify": "1.0.1",
|
|
65
65
|
"rc-dialog": "9.1.0",
|
|
66
66
|
"rc-tree": "5.7.2",
|
|
67
|
-
"react": "18.
|
|
67
|
+
"react": "18.3.1",
|
|
68
68
|
"react-highlight-words": "^0.20.0",
|
|
69
69
|
"react-hyper-tree": "0.3.12",
|
|
70
70
|
"react-i18next": "12.0.0",
|
|
@@ -72,12 +72,12 @@
|
|
|
72
72
|
"react-markdown": "^9.0.1",
|
|
73
73
|
"react-router-dom": "6.4.3",
|
|
74
74
|
"socket.io-client": "4.6.1",
|
|
75
|
-
"terser": "^5.
|
|
75
|
+
"terser": "^5.34.1",
|
|
76
76
|
"typescript": "^5.2.2",
|
|
77
77
|
"url-parse": "1.5.10",
|
|
78
|
-
"@rsdoctor/graph": "0.4.
|
|
79
|
-
"@rsdoctor/types": "0.4.
|
|
80
|
-
"@rsdoctor/utils": "0.4.
|
|
78
|
+
"@rsdoctor/graph": "0.4.7",
|
|
79
|
+
"@rsdoctor/types": "0.4.7",
|
|
80
|
+
"@rsdoctor/utils": "0.4.7"
|
|
81
81
|
},
|
|
82
82
|
"publishConfig": {
|
|
83
83
|
"access": "public",
|
|
File without changes
|
|
File without changes
|
|
File without changes
|