@rsdoctor/components 0.4.8 → 0.4.9
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/Charts/index.js +18 -3
- package/dist/components/Charts/utils.js +4 -0
- package/dist/components/Layout/header.js +1 -1
- package/dist/components/Layout/index.js +20 -4
- package/dist/components/Loader/Analysis/files.d.ts +1 -0
- package/dist/components/Loader/Analysis/files.js +20 -15
- package/dist/components/Loader/Analysis/index.js +6 -1
- package/dist/components/Loader/executions.js +0 -8
- package/dist/components/Select/index.d.ts +6 -4
- package/dist/components/Select/index.js +55 -12
- package/dist/pages/BundleSize/components/index.js +3 -2
- package/dist/pages/WebpackLoaders/Analysis/index.js +1 -1
- package/dist/utils/loader.d.ts +2 -2
- package/dist/utils/loader.js +8 -3
- package/dist/utils/locale.d.ts +2 -0
- package/dist/utils/locale.js +6 -0
- package/dist/utils/storage.d.ts +2 -0
- package/dist/utils/storage.js +9 -0
- package/package.json +5 -6
- package/dist/components/worker/ecmaversion/client.d.ts +0 -10
- package/dist/components/worker/ecmaversion/client.js +0 -60
- package/dist/components/worker/ecmaversion/worker.d.ts +0 -1
- package/dist/components/worker/ecmaversion/worker.js +0 -13
- package/dist/components/worker/jsequal/client.d.ts +0 -11
- package/dist/components/worker/jsequal/client.js +0 -38
- package/dist/components/worker/jsequal/worker.d.ts +0 -1
- package/dist/components/worker/jsequal/worker.js +0 -23
|
@@ -13,12 +13,27 @@ var ChartDimension = /* @__PURE__ */ ((ChartDimension2) => {
|
|
|
13
13
|
})(ChartDimension || {});
|
|
14
14
|
const LoaderChartBase = ({ project }) => {
|
|
15
15
|
const { root: cwd } = project;
|
|
16
|
-
const [store, setStore] = useState({
|
|
17
|
-
|
|
16
|
+
const [store, setStore] = useState({
|
|
17
|
+
filename: "",
|
|
18
|
+
loaders: [],
|
|
19
|
+
layer: ""
|
|
20
|
+
});
|
|
21
|
+
const [dimension, setDimension] = useState(
|
|
22
|
+
0 /* Loader */
|
|
23
|
+
);
|
|
18
24
|
return /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [
|
|
19
25
|
/* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetLoaderNames, children: (loaderNames) => /* @__PURE__ */ jsx(LoaderCommonSelect, { onChange: setStore, loaderNames }) }),
|
|
20
26
|
/* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetLoaderChartData, children: (res) => {
|
|
21
|
-
const loaders = res.filter(
|
|
27
|
+
const loaders = res.filter(
|
|
28
|
+
(el) => filterLoader(
|
|
29
|
+
el.resource,
|
|
30
|
+
el.loader,
|
|
31
|
+
store.filename,
|
|
32
|
+
store.loaders,
|
|
33
|
+
el.layer,
|
|
34
|
+
store?.layer
|
|
35
|
+
)
|
|
36
|
+
);
|
|
22
37
|
return dimension === 0 /* Loader */ ? /* @__PURE__ */ jsx(LoaderExecutionsChart, { loaders, cwd }) : (
|
|
23
38
|
// <ProcessExecutionsChart loaders={loaders} cwd={cwd} pid={pid} />
|
|
24
39
|
/* @__PURE__ */ jsx(Fragment, {})
|
|
@@ -13,6 +13,10 @@ function getTooltipHtmlForLoader(loader) {
|
|
|
13
13
|
<span>isPitch</span>
|
|
14
14
|
<span>${loader.isPitch}</span>
|
|
15
15
|
</li>
|
|
16
|
+
${loader.layer && `<li class="loader-tooltip-item">
|
|
17
|
+
<span>layer</span>
|
|
18
|
+
<span>${loader.layer}</span>
|
|
19
|
+
</li>`}
|
|
16
20
|
<li class="loader-tooltip-item">
|
|
17
21
|
<span>duration</span>
|
|
18
22
|
<span class="loader-tooltip-text-bold">${formatCosts(loader.costs)}</span>
|
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useContext, useEffect } from "react";
|
|
3
3
|
import { FloatButton, Layout as L } from "antd";
|
|
4
|
-
import { MAIN_BG, Size } from "../../constants";
|
|
4
|
+
import { Language, MAIN_BG, Size } from "../../constants";
|
|
5
5
|
import { Header } from "./header";
|
|
6
|
-
import {
|
|
6
|
+
import {
|
|
7
|
+
useLocale,
|
|
8
|
+
useI18n,
|
|
9
|
+
getFirstVisitFromStorage,
|
|
10
|
+
setFirstVisitToStorage,
|
|
11
|
+
getLanguage
|
|
12
|
+
} from "../../utils";
|
|
7
13
|
import { Progress } from "./progress";
|
|
8
14
|
import { ConfigContext } from "../../config";
|
|
9
15
|
const Layout = (props) => {
|
|
@@ -11,8 +17,18 @@ const Layout = (props) => {
|
|
|
11
17
|
const { i18n } = useI18n();
|
|
12
18
|
const { children } = props;
|
|
13
19
|
useEffect(() => {
|
|
14
|
-
|
|
15
|
-
|
|
20
|
+
let currentLocale = locale;
|
|
21
|
+
const visited = getFirstVisitFromStorage();
|
|
22
|
+
if (!visited) {
|
|
23
|
+
setFirstVisitToStorage("1");
|
|
24
|
+
const targetLang = window.navigator.language.split("-")[0];
|
|
25
|
+
const userLang = getLanguage(targetLang);
|
|
26
|
+
if (Object.values(Language).includes(userLang)) {
|
|
27
|
+
currentLocale = userLang;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
if (i18n.language !== currentLocale) {
|
|
31
|
+
i18n.changeLanguage(currentLocale);
|
|
16
32
|
}
|
|
17
33
|
}, [locale]);
|
|
18
34
|
const ctx = useContext(ConfigContext);
|
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import React, { useCallback, useMemo, useRef, useState } from "react";
|
|
3
|
-
import {
|
|
3
|
+
import { get, sumBy } from "lodash-es";
|
|
4
4
|
import {
|
|
5
|
+
Tag,
|
|
5
6
|
Card,
|
|
6
7
|
Col,
|
|
7
8
|
Descriptions,
|
|
@@ -14,7 +15,7 @@ import {
|
|
|
14
15
|
Typography
|
|
15
16
|
} from "antd";
|
|
16
17
|
import { CloseCircleOutlined } from "@ant-design/icons";
|
|
17
|
-
import {
|
|
18
|
+
import { SDK } from "@rsdoctor/types";
|
|
18
19
|
import { ServerAPIProvider } from "../../Manifest";
|
|
19
20
|
import { drawerWidth, Size } from "../../../constants";
|
|
20
21
|
import {
|
|
@@ -27,7 +28,6 @@ import {
|
|
|
27
28
|
import { LoaderExecutions } from "../executions";
|
|
28
29
|
import { FileTree } from "../../FileTree";
|
|
29
30
|
import { Keyword } from "../../Keyword";
|
|
30
|
-
import { ECMAVersionDetectTag } from "../../worker/ecmaversion/client";
|
|
31
31
|
const LoaderFiles = (props) => {
|
|
32
32
|
const { cwd, filetree } = props;
|
|
33
33
|
const [drawerVisible, setDrawerVisible] = useState(false);
|
|
@@ -43,10 +43,17 @@ const LoaderFiles = (props) => {
|
|
|
43
43
|
const filteredFiles = useMemo(
|
|
44
44
|
() => filetree.filter(
|
|
45
45
|
(e) => e.loaders.some(
|
|
46
|
-
(l) => filterLoader(
|
|
46
|
+
(l) => filterLoader(
|
|
47
|
+
e.path,
|
|
48
|
+
l.loader,
|
|
49
|
+
props.filename,
|
|
50
|
+
props.loaders,
|
|
51
|
+
e.layer,
|
|
52
|
+
props?.layer
|
|
53
|
+
)
|
|
47
54
|
)
|
|
48
55
|
),
|
|
49
|
-
[props.filename, props.loaders]
|
|
56
|
+
[props.filename, props.loaders, props.layer]
|
|
50
57
|
);
|
|
51
58
|
const inlinedResourcePathKey = "__RESOURCEPATH__";
|
|
52
59
|
const files = useMemo(() => {
|
|
@@ -54,7 +61,7 @@ const LoaderFiles = (props) => {
|
|
|
54
61
|
files: filteredFiles.map((e) => e.path),
|
|
55
62
|
cwd,
|
|
56
63
|
fileTitle(file, basename) {
|
|
57
|
-
const { loaders } = filetree.find((e) => e.path === file);
|
|
64
|
+
const { loaders, layer } = filetree.find((e) => e.path === file);
|
|
58
65
|
return /* @__PURE__ */ jsxs(
|
|
59
66
|
Space,
|
|
60
67
|
{
|
|
@@ -65,16 +72,14 @@ const LoaderFiles = (props) => {
|
|
|
65
72
|
setDrawerVisible(true);
|
|
66
73
|
},
|
|
67
74
|
children: [
|
|
68
|
-
/* @__PURE__ */ jsx(
|
|
69
|
-
|
|
70
|
-
ServerAPIProvider,
|
|
75
|
+
/* @__PURE__ */ jsx(
|
|
76
|
+
Keyword,
|
|
71
77
|
{
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
fallbackComponent: () => null,
|
|
75
|
-
children: (res) => /* @__PURE__ */ jsx(ECMAVersionDetectTag, { code: res })
|
|
78
|
+
text: basename.replace(/\[.*?\]/g, ""),
|
|
79
|
+
keyword: props.filename
|
|
76
80
|
}
|
|
77
|
-
)
|
|
81
|
+
),
|
|
82
|
+
layer ? /* @__PURE__ */ jsx(Tag, { color: "cyan", bordered: false, children: layer }) : /* @__PURE__ */ jsx(Fragment, {}),
|
|
78
83
|
loaders.map((e, i) => {
|
|
79
84
|
const isError = e.errors && e.errors.length;
|
|
80
85
|
const key = `${file}_${e.loader}_${i}`;
|
|
@@ -5,7 +5,11 @@ import { ServerAPIProvider, withServerAPI } from "../../Manifest";
|
|
|
5
5
|
import { LoaderFiles } from "./files";
|
|
6
6
|
import { LoaderCommonSelect } from "../../Select";
|
|
7
7
|
const LoaderAnalysisBase = ({ cwd }) => {
|
|
8
|
-
const [store, setStore] = useState({
|
|
8
|
+
const [store, setStore] = useState({
|
|
9
|
+
filename: "",
|
|
10
|
+
loaders: [],
|
|
11
|
+
layer: ""
|
|
12
|
+
});
|
|
9
13
|
return /* @__PURE__ */ jsxs("div", { children: [
|
|
10
14
|
/* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetLoaderNames, children: (loaderNames) => /* @__PURE__ */ jsx(
|
|
11
15
|
LoaderCommonSelect,
|
|
@@ -20,6 +24,7 @@ const LoaderAnalysisBase = ({ cwd }) => {
|
|
|
20
24
|
filename: store.filename,
|
|
21
25
|
filetree,
|
|
22
26
|
loaders: store.loaders,
|
|
27
|
+
layer: store.layer,
|
|
23
28
|
cwd
|
|
24
29
|
}
|
|
25
30
|
) })
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { ClockCircleOutlined } from "@ant-design/icons";
|
|
3
3
|
import Editor from "@monaco-editor/react";
|
|
4
|
-
import { Constants } from "@rsdoctor/types";
|
|
5
4
|
import {
|
|
6
5
|
Badge,
|
|
7
6
|
Button,
|
|
@@ -17,7 +16,6 @@ import {
|
|
|
17
16
|
Tabs
|
|
18
17
|
} from "antd";
|
|
19
18
|
import dayjs from "dayjs";
|
|
20
|
-
import { endsWith } from "lodash-es";
|
|
21
19
|
import { useCallback, useState } from "react";
|
|
22
20
|
import { Size } from "../../constants";
|
|
23
21
|
import {
|
|
@@ -30,7 +28,6 @@ import { Card } from "../Card";
|
|
|
30
28
|
import { DiffViewer } from "../CodeViewer";
|
|
31
29
|
import { CodeOpener } from "../Opener";
|
|
32
30
|
import { Title } from "../Title";
|
|
33
|
-
import { JSIsEqualTag } from "../worker/jsequal/client";
|
|
34
31
|
const LoaderInfoItem = ({
|
|
35
32
|
label,
|
|
36
33
|
value,
|
|
@@ -48,9 +45,7 @@ const LoaderInfoItem = ({
|
|
|
48
45
|
};
|
|
49
46
|
const LoaderPropsItem = ({
|
|
50
47
|
loader,
|
|
51
|
-
hasError,
|
|
52
48
|
resource,
|
|
53
|
-
before,
|
|
54
49
|
cwd
|
|
55
50
|
}) => {
|
|
56
51
|
return /* @__PURE__ */ jsxs(
|
|
@@ -61,7 +56,6 @@ const LoaderPropsItem = ({
|
|
|
61
56
|
extra: /* @__PURE__ */ jsx(Tag, { icon: /* @__PURE__ */ jsx(ClockCircleOutlined, {}), color: "default", children: dayjs(loader.startAt).format("YYYY-MM-DD HH:mm:ss") }),
|
|
62
57
|
children: [
|
|
63
58
|
loader.isPitch ? /* @__PURE__ */ jsx(Typography.Text, { code: true, children: "pitch" }) : null,
|
|
64
|
-
loader.isPitch || hasError || !endsWith(resource.path, Constants.JSExtension) ? null : /* @__PURE__ */ jsx(JSIsEqualTag, { input: before, output: loader.result || "" }),
|
|
65
59
|
/* @__PURE__ */ jsxs(
|
|
66
60
|
Space,
|
|
67
61
|
{
|
|
@@ -216,9 +210,7 @@ const LoaderExecutions = ({
|
|
|
216
210
|
LoaderPropsItem,
|
|
217
211
|
{
|
|
218
212
|
loader,
|
|
219
|
-
hasError,
|
|
220
213
|
resource,
|
|
221
|
-
before,
|
|
222
214
|
cwd
|
|
223
215
|
}
|
|
224
216
|
)
|
|
@@ -4,12 +4,14 @@ interface LoaderNamesSelectProps {
|
|
|
4
4
|
onChange: (loaders: string[]) => void;
|
|
5
5
|
loaderNames: string[];
|
|
6
6
|
}
|
|
7
|
+
export type ISelectLoaderProps = {
|
|
8
|
+
loaders: string[];
|
|
9
|
+
filename: string;
|
|
10
|
+
layer?: string;
|
|
11
|
+
};
|
|
7
12
|
export declare const LoaderNamesSelect: React.FC<LoaderNamesSelectProps>;
|
|
8
13
|
export declare const LoaderCommonSelect: React.FC<{
|
|
9
|
-
onChange(value:
|
|
10
|
-
loaders: string[];
|
|
11
|
-
filename: string;
|
|
12
|
-
}): void;
|
|
14
|
+
onChange(value: ISelectLoaderProps): void;
|
|
13
15
|
loaderNames: string[];
|
|
14
16
|
}>;
|
|
15
17
|
export {};
|
|
@@ -1,10 +1,16 @@
|
|
|
1
|
-
import { jsx, jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect, useState } from "react";
|
|
3
|
-
import { Button, Input,
|
|
3
|
+
import { Button, Col, Input, Row, Select, Typography } from "antd";
|
|
4
4
|
import { FileSearchOutlined, SelectOutlined } from "@ant-design/icons";
|
|
5
5
|
import { KeywordInput } from "../Form/keyword";
|
|
6
6
|
import { Size } from "../../constants";
|
|
7
|
-
|
|
7
|
+
import { ServerAPIProvider } from "../Manifest";
|
|
8
|
+
import { SDK } from "@rsdoctor/types";
|
|
9
|
+
const LoaderNamesSelect = ({
|
|
10
|
+
style,
|
|
11
|
+
onChange,
|
|
12
|
+
loaderNames
|
|
13
|
+
}) => {
|
|
8
14
|
const [selectLoaders, setSelectLoaders] = useState([]);
|
|
9
15
|
const labelStyle = { width: 120 };
|
|
10
16
|
return /* @__PURE__ */ jsxs(Input.Group, { compact: true, style, children: [
|
|
@@ -18,7 +24,7 @@ const LoaderNamesSelect = ({ style, onChange, loaderNames }) => {
|
|
|
18
24
|
mode: "multiple",
|
|
19
25
|
allowClear: true,
|
|
20
26
|
defaultValue: selectLoaders,
|
|
21
|
-
style: { width:
|
|
27
|
+
style: { width: 300 },
|
|
22
28
|
dropdownMatchSelectWidth: true,
|
|
23
29
|
placeholder: "select loaders",
|
|
24
30
|
onChange: (e) => {
|
|
@@ -32,34 +38,71 @@ const LoaderNamesSelect = ({ style, onChange, loaderNames }) => {
|
|
|
32
38
|
)
|
|
33
39
|
] });
|
|
34
40
|
};
|
|
41
|
+
const LoaderLayerSelect = ({ onChange, layers }) => {
|
|
42
|
+
const [layer, setLayer] = useState("");
|
|
43
|
+
const labelStyle = { width: 120 };
|
|
44
|
+
return /* @__PURE__ */ jsxs(Input.Group, { compact: true, children: [
|
|
45
|
+
/* @__PURE__ */ jsxs(Button, { style: labelStyle, children: [
|
|
46
|
+
/* @__PURE__ */ jsx(SelectOutlined, {}),
|
|
47
|
+
/* @__PURE__ */ jsx(Typography.Text, { children: "Layers" })
|
|
48
|
+
] }),
|
|
49
|
+
/* @__PURE__ */ jsx(
|
|
50
|
+
Select,
|
|
51
|
+
{
|
|
52
|
+
allowClear: true,
|
|
53
|
+
style: { width: 150 },
|
|
54
|
+
defaultValue: layer,
|
|
55
|
+
placeholder: "select layer",
|
|
56
|
+
onChange: (e) => {
|
|
57
|
+
setLayer(e);
|
|
58
|
+
onChange(e);
|
|
59
|
+
},
|
|
60
|
+
children: layers?.length ? layers?.map((e) => {
|
|
61
|
+
return /* @__PURE__ */ jsx(Select.Option, { label: e, value: e, children: e }, e);
|
|
62
|
+
}) : /* @__PURE__ */ jsx(Fragment, {})
|
|
63
|
+
}
|
|
64
|
+
)
|
|
65
|
+
] });
|
|
66
|
+
};
|
|
35
67
|
const LoaderCommonSelect = ({ onChange, loaderNames }) => {
|
|
36
68
|
const [selectLoaders, setSelectLoaders] = useState([]);
|
|
37
69
|
const [filename, setFilename] = useState("");
|
|
70
|
+
const [layer, setLayer] = useState("");
|
|
38
71
|
useEffect(() => {
|
|
39
|
-
onChange({ loaders: selectLoaders, filename });
|
|
40
|
-
}, [selectLoaders, filename]);
|
|
41
|
-
return /* @__PURE__ */ jsxs(
|
|
42
|
-
/* @__PURE__ */ jsx(
|
|
72
|
+
onChange({ loaders: selectLoaders, filename, layer });
|
|
73
|
+
}, [selectLoaders, filename, layer]);
|
|
74
|
+
return /* @__PURE__ */ jsxs(Row, { style: { marginBottom: Size.BasePadding }, children: [
|
|
75
|
+
/* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
|
|
43
76
|
LoaderNamesSelect,
|
|
44
77
|
{
|
|
45
78
|
loaderNames,
|
|
46
|
-
style: { marginRight: Size.BasePadding
|
|
79
|
+
style: { marginRight: Size.BasePadding / 2 },
|
|
47
80
|
onChange: (e) => {
|
|
48
81
|
setSelectLoaders(e);
|
|
49
82
|
}
|
|
50
83
|
}
|
|
51
|
-
),
|
|
52
|
-
/* @__PURE__ */ jsx(
|
|
84
|
+
) }),
|
|
85
|
+
/* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
|
|
53
86
|
KeywordInput,
|
|
54
87
|
{
|
|
55
88
|
icon: /* @__PURE__ */ jsx(FileSearchOutlined, {}),
|
|
89
|
+
style: { marginRight: Size.BasePadding / 2 },
|
|
56
90
|
label: "Filename",
|
|
57
91
|
placeholder: "search filename by keyword",
|
|
58
92
|
onChange: (e) => {
|
|
59
93
|
setFilename(e);
|
|
60
94
|
}
|
|
61
95
|
}
|
|
62
|
-
)
|
|
96
|
+
) }),
|
|
97
|
+
/* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetLayers, children: (layers) => layers.length ? /* @__PURE__ */ jsx(
|
|
98
|
+
LoaderLayerSelect,
|
|
99
|
+
{
|
|
100
|
+
layers,
|
|
101
|
+
onChange: (e) => {
|
|
102
|
+
setLayer(e);
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
) : /* @__PURE__ */ jsx(Fragment, {}) }) })
|
|
63
106
|
] });
|
|
64
107
|
};
|
|
65
108
|
export {
|
|
@@ -177,8 +177,9 @@ const WebpackModulesOverallBase = ({ errors, cwd, summary, entryPoints }) => {
|
|
|
177
177
|
Empty,
|
|
178
178
|
{
|
|
179
179
|
description: /* @__PURE__ */ jsxs("div", { children: [
|
|
180
|
-
"
|
|
181
|
-
|
|
180
|
+
"Tile graph is disabled,",
|
|
181
|
+
" ",
|
|
182
|
+
/* @__PURE__ */ jsx("a", { href: "https://rsdoctor.dev/config/options/options#generatetilegraph", children: "see the documentation to learn how to enable." })
|
|
182
183
|
] })
|
|
183
184
|
}
|
|
184
185
|
);
|
|
@@ -6,7 +6,7 @@ const Page = () => {
|
|
|
6
6
|
return /* @__PURE__ */ jsx(
|
|
7
7
|
Card,
|
|
8
8
|
{
|
|
9
|
-
title: "
|
|
9
|
+
title: "Loader Analysis",
|
|
10
10
|
extra: /* @__PURE__ */ jsx(WebpackConfigurationViewer, { defaultKeys: ["module", "resolve"] }),
|
|
11
11
|
bodyStyle: { paddingTop: 0, height: 800 },
|
|
12
12
|
children: /* @__PURE__ */ jsx(LoaderAnalysis, {})
|
package/dist/utils/loader.d.ts
CHANGED
|
@@ -3,5 +3,5 @@ import { SDK } from '@rsdoctor/types';
|
|
|
3
3
|
declare const findLoaderTotalTiming: typeof Loader.findLoaderTotalTiming, getLoaderCosts: typeof Loader.getLoaderCosts;
|
|
4
4
|
export { findLoaderTotalTiming, getLoaderCosts };
|
|
5
5
|
export declare function flattenLoaderData(loaderData: SDK.LoaderData): SDK.LoaderTransformData[];
|
|
6
|
-
export declare function filterLoaders(loaderData: SDK.ResourceLoaderData, keyword: string, loaderNames: string[]): SDK.LoaderTransformData[];
|
|
7
|
-
export declare function filterLoader(resourcePath: string, loader: string, keyword: string, loaderNames: string[]): boolean;
|
|
6
|
+
export declare function filterLoaders(loaderData: SDK.ResourceLoaderData, keyword: string, loaderNames: string[], layer?: string): SDK.LoaderTransformData[];
|
|
7
|
+
export declare function filterLoader(resourcePath: string, loader: string, keyword: string, loaderNames: string[], resorceLayer?: string, layer?: string): boolean;
|
package/dist/utils/loader.js
CHANGED
|
@@ -4,21 +4,26 @@ const { findLoaderTotalTiming, getLoaderCosts } = Loader;
|
|
|
4
4
|
function flattenLoaderData(loaderData) {
|
|
5
5
|
return flatten(loaderData.map((e) => e.loaders));
|
|
6
6
|
}
|
|
7
|
-
function filterLoaders(loaderData, keyword, loaderNames) {
|
|
7
|
+
function filterLoaders(loaderData, keyword, loaderNames, layer) {
|
|
8
8
|
return loaderData.loaders.filter((item) => {
|
|
9
9
|
return filterLoader(
|
|
10
10
|
loaderData.resource.path,
|
|
11
11
|
item.loader,
|
|
12
12
|
keyword,
|
|
13
|
-
loaderNames
|
|
13
|
+
loaderNames,
|
|
14
|
+
loaderData.resource.layer,
|
|
15
|
+
layer
|
|
14
16
|
);
|
|
15
17
|
});
|
|
16
18
|
}
|
|
17
|
-
function filterLoader(resourcePath, loader, keyword, loaderNames) {
|
|
19
|
+
function filterLoader(resourcePath, loader, keyword, loaderNames, resorceLayer, layer) {
|
|
18
20
|
if (keyword) {
|
|
19
21
|
if (resourcePath.indexOf(keyword) === -1)
|
|
20
22
|
return false;
|
|
21
23
|
}
|
|
24
|
+
if (resorceLayer && layer && resorceLayer !== layer) {
|
|
25
|
+
return false;
|
|
26
|
+
}
|
|
22
27
|
if (loaderNames?.length) {
|
|
23
28
|
if (!includes(loaderNames, loader))
|
|
24
29
|
return false;
|
package/dist/utils/locale.d.ts
CHANGED
package/dist/utils/locale.js
CHANGED
|
@@ -1,9 +1,15 @@
|
|
|
1
1
|
import cn from "antd/es/locale/zh_CN";
|
|
2
2
|
import en from "antd/es/locale/en_GB";
|
|
3
|
+
import { Language } from "../constants";
|
|
3
4
|
function getLocale(locale) {
|
|
4
5
|
const res = locale === "cn" || locale === "zh-CN" ? cn : en;
|
|
5
6
|
return res;
|
|
6
7
|
}
|
|
8
|
+
function getLanguage(locale) {
|
|
9
|
+
const res = locale === "cn" || locale === "zh" ? Language.Cn : Language.En;
|
|
10
|
+
return res;
|
|
11
|
+
}
|
|
7
12
|
export {
|
|
13
|
+
getLanguage,
|
|
8
14
|
getLocale
|
|
9
15
|
};
|
package/dist/utils/storage.d.ts
CHANGED
|
@@ -11,3 +11,5 @@ export declare function setViewModeToStorage(viewMode: Config['viewMode']): void
|
|
|
11
11
|
export declare function hasViewModeFromStorage(): boolean;
|
|
12
12
|
export declare function setAPILoaderModeToStorage(mode: APILoaderMode4Dev): void;
|
|
13
13
|
export declare function getAPILoaderModeFromStorage(): string;
|
|
14
|
+
export declare function getFirstVisitFromStorage(): string | null;
|
|
15
|
+
export declare function setFirstVisitToStorage(value: '1'): void;
|
package/dist/utils/storage.js
CHANGED
|
@@ -5,6 +5,7 @@ var Keys = /* @__PURE__ */ ((Keys2) => {
|
|
|
5
5
|
Keys2["Locale"] = "LOCALE";
|
|
6
6
|
Keys2["ViewMode"] = "VIEWMODE";
|
|
7
7
|
Keys2["APILoaderMode4Dev"] = "APILOADERMODE_DEV";
|
|
8
|
+
Keys2["FirstVisit"] = "FIRST_VISIT";
|
|
8
9
|
return Keys2;
|
|
9
10
|
})(Keys || {});
|
|
10
11
|
function getStorage(key) {
|
|
@@ -55,14 +56,22 @@ function setAPILoaderModeToStorage(mode) {
|
|
|
55
56
|
function getAPILoaderModeFromStorage() {
|
|
56
57
|
return getStorage("APILOADERMODE_DEV" /* APILoaderMode4Dev */) || APILoaderMode4Dev.Default;
|
|
57
58
|
}
|
|
59
|
+
function getFirstVisitFromStorage() {
|
|
60
|
+
return getStorage("FIRST_VISIT" /* FirstVisit */);
|
|
61
|
+
}
|
|
62
|
+
function setFirstVisitToStorage(value) {
|
|
63
|
+
setStorage("FIRST_VISIT" /* FirstVisit */, value);
|
|
64
|
+
}
|
|
58
65
|
export {
|
|
59
66
|
getAPILoaderModeFromStorage,
|
|
67
|
+
getFirstVisitFromStorage,
|
|
60
68
|
getLocaleFromStorage,
|
|
61
69
|
getStorage,
|
|
62
70
|
getThemeFromStorage,
|
|
63
71
|
getViewModeFromStorage,
|
|
64
72
|
hasViewModeFromStorage,
|
|
65
73
|
setAPILoaderModeToStorage,
|
|
74
|
+
setFirstVisitToStorage,
|
|
66
75
|
setLocaleToStorage,
|
|
67
76
|
setStorage,
|
|
68
77
|
setThemeToStorage,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rsdoctor/components",
|
|
3
|
-
"version": "0.4.
|
|
3
|
+
"version": "0.4.9",
|
|
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.12",
|
|
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",
|
|
@@ -72,12 +72,11 @@
|
|
|
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.34.1",
|
|
76
75
|
"typescript": "^5.2.2",
|
|
77
76
|
"url-parse": "1.5.10",
|
|
78
|
-
"@rsdoctor/graph": "0.4.
|
|
79
|
-
"@rsdoctor/types": "0.4.
|
|
80
|
-
"@rsdoctor/utils": "0.4.
|
|
77
|
+
"@rsdoctor/graph": "0.4.9",
|
|
78
|
+
"@rsdoctor/types": "0.4.9",
|
|
79
|
+
"@rsdoctor/utils": "0.4.9"
|
|
81
80
|
},
|
|
82
81
|
"publishConfig": {
|
|
83
82
|
"access": "public",
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ECMAVersion } from '@rsdoctor/utils/ruleUtils';
|
|
3
|
-
export declare function useECMAVersionDetectWorker(props: {
|
|
4
|
-
code: string;
|
|
5
|
-
}): {
|
|
6
|
-
version: ECMAVersion | undefined;
|
|
7
|
-
};
|
|
8
|
-
export declare const ECMAVersionDetectTag: React.FC<{
|
|
9
|
-
code: string;
|
|
10
|
-
}>;
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useState } from "react";
|
|
3
|
-
import { BadgeColorMap, BadgeType } from "../../Badge";
|
|
4
|
-
import { ECMAVersion } from "@rsdoctor/utils/ruleUtils";
|
|
5
|
-
import { master } from "../../../utils/worker";
|
|
6
|
-
const getECMAVersionDetectWorker = () => new Worker(new URL("./worker.js", import.meta.url));
|
|
7
|
-
function useECMAVersionDetectWorker(props) {
|
|
8
|
-
const { code } = props;
|
|
9
|
-
const [version, setVersion] = useState();
|
|
10
|
-
useEffect(() => {
|
|
11
|
-
if (!code)
|
|
12
|
-
return;
|
|
13
|
-
const worker = master.detectWorker(getECMAVersionDetectWorker);
|
|
14
|
-
const { abort } = worker.emit(code, (data) => {
|
|
15
|
-
setVersion(data);
|
|
16
|
-
});
|
|
17
|
-
return () => {
|
|
18
|
-
abort();
|
|
19
|
-
};
|
|
20
|
-
}, [code]);
|
|
21
|
-
return {
|
|
22
|
-
version
|
|
23
|
-
};
|
|
24
|
-
}
|
|
25
|
-
const TagColor = {
|
|
26
|
-
[ECMAVersion.ES5]: BadgeColorMap[BadgeType.Success],
|
|
27
|
-
[ECMAVersion.ES6]: BadgeColorMap[BadgeType.Error],
|
|
28
|
-
[ECMAVersion.ES7P]: BadgeColorMap[BadgeType.Error]
|
|
29
|
-
};
|
|
30
|
-
const ECMAVersionDetectTag = ({ code }) => {
|
|
31
|
-
if (!code)
|
|
32
|
-
return null;
|
|
33
|
-
const height = 19.5;
|
|
34
|
-
const { version } = useECMAVersionDetectWorker({ code });
|
|
35
|
-
if (!version) {
|
|
36
|
-
return null;
|
|
37
|
-
}
|
|
38
|
-
return /* @__PURE__ */ jsx(
|
|
39
|
-
"div",
|
|
40
|
-
{
|
|
41
|
-
style: {
|
|
42
|
-
display: "inline-block",
|
|
43
|
-
height,
|
|
44
|
-
padding: `0px 4px`,
|
|
45
|
-
width: 40,
|
|
46
|
-
fontSize: 10,
|
|
47
|
-
lineHeight: `${height}px`,
|
|
48
|
-
textAlign: "center",
|
|
49
|
-
color: "#fff",
|
|
50
|
-
background: TagColor[version] || BadgeColorMap[BadgeType.Default],
|
|
51
|
-
borderRadius: 4
|
|
52
|
-
},
|
|
53
|
-
children: version
|
|
54
|
-
}
|
|
55
|
-
);
|
|
56
|
-
};
|
|
57
|
-
export {
|
|
58
|
-
ECMAVersionDetectTag,
|
|
59
|
-
useECMAVersionDetectWorker
|
|
60
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
const { parser, ECMAVersion } = require("@rsdoctor/utils/ruleUtils");
|
|
2
|
-
const { handleMessageInWorker } = require("../../../utils/worker");
|
|
3
|
-
const cache = /* @__PURE__ */ new Map();
|
|
4
|
-
handleMessageInWorker({
|
|
5
|
-
workerName: "ecmaversion",
|
|
6
|
-
handler: (code) => {
|
|
7
|
-
if (cache.has(code))
|
|
8
|
-
return cache.get(code) || "";
|
|
9
|
-
const version = parser.utils.detectECMAVersion(code);
|
|
10
|
-
cache.set(code, version);
|
|
11
|
-
return version;
|
|
12
|
-
}
|
|
13
|
-
});
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useEffect, useState } from "react";
|
|
3
|
-
import { Tag } from "antd";
|
|
4
|
-
import { master } from "../../../utils/worker";
|
|
5
|
-
import { useI18n } from "../../../utils";
|
|
6
|
-
const getJSEqualWorker = () => new Worker(new URL("./worker.js", import.meta.url));
|
|
7
|
-
function useJSEqualWorker(props) {
|
|
8
|
-
const { input, output } = props;
|
|
9
|
-
const [isEqual, setIsEqual] = useState(false);
|
|
10
|
-
useEffect(() => {
|
|
11
|
-
if (!input || !output)
|
|
12
|
-
return;
|
|
13
|
-
const worker = master.detectWorker(getJSEqualWorker);
|
|
14
|
-
const { abort } = worker.emit({ input, output }, (data) => {
|
|
15
|
-
setIsEqual(data);
|
|
16
|
-
});
|
|
17
|
-
return () => {
|
|
18
|
-
abort();
|
|
19
|
-
};
|
|
20
|
-
}, [input, output]);
|
|
21
|
-
return {
|
|
22
|
-
isEqual
|
|
23
|
-
};
|
|
24
|
-
}
|
|
25
|
-
const JSIsEqualTag = ({ input, output }) => {
|
|
26
|
-
if (!input || !output)
|
|
27
|
-
return null;
|
|
28
|
-
const { isEqual } = useJSEqualWorker({ input, output });
|
|
29
|
-
const { t } = useI18n();
|
|
30
|
-
if (!isEqual) {
|
|
31
|
-
return null;
|
|
32
|
-
}
|
|
33
|
-
return /* @__PURE__ */ jsx(Tag, { color: "warning", children: t("the file content not changed after transpiled by this loader") });
|
|
34
|
-
};
|
|
35
|
-
export {
|
|
36
|
-
JSIsEqualTag,
|
|
37
|
-
useJSEqualWorker
|
|
38
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
const { minify: terserMinify } = require("terser");
|
|
2
|
-
const { handleMessageInWorker } = require("../../../utils/worker");
|
|
3
|
-
const cache = /* @__PURE__ */ new Map();
|
|
4
|
-
function minify(code) {
|
|
5
|
-
return terserMinify(code, {
|
|
6
|
-
module: true,
|
|
7
|
-
compress: false,
|
|
8
|
-
mangle: false,
|
|
9
|
-
sourceMap: false
|
|
10
|
-
}).then((res) => res.code);
|
|
11
|
-
}
|
|
12
|
-
handleMessageInWorker({
|
|
13
|
-
workerName: "jsequal",
|
|
14
|
-
handler: async ({ input = "", output = "" }) => {
|
|
15
|
-
const key = input + output;
|
|
16
|
-
if (cache.has(key))
|
|
17
|
-
return cache.get(key) || "";
|
|
18
|
-
const [inputMinified, outputMinified] = await Promise.all([minify(input), minify(output)]);
|
|
19
|
-
const isEqual = inputMinified === outputMinified;
|
|
20
|
-
cache.set(key, isEqual);
|
|
21
|
-
return isEqual;
|
|
22
|
-
}
|
|
23
|
-
});
|