@rsdoctor/components 1.5.12 → 1.5.14-beta.0

package/dist/pages/BundleSize/components/tree-graph.mjs

@@ -0,0 +1,366 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CodeOutlined, InfoCircleOutlined } from "@ant-design/icons";
+import { SDK } from "@rsdoctor/types";
+import { Card, Col, Divider, Empty, InputNumber, Row, Select, Space, Tooltip, Typography } from "antd";
+import { debounce, sumBy } from "es-toolkit/compat";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import { useCodeDrawer } from "../../../components/base/CodeViewer/useCodeDrawer.mjs";
+import { Badge } from "../../../components/Badge/index.mjs";
+import { FileTree } from "../../../components/FileTree/index.mjs";
+import { KeywordInput } from "../../../components/Form/keyword.mjs";
+import { Keyword } from "../../../components/Keyword/index.mjs";
+import { ServerAPIProvider } from "../../../components/Manifest/index.mjs";
+import { Size } from "../../../constants.mjs";
+import { createFileStructures, formatSize, useI18n } from "../../../utils/index.mjs";
+import { AssetDetail } from "./asset.mjs";
+import index_module from "./index.module.mjs";
+import "./index.css";
+import { SearchModal } from "./search-modal.mjs";
+const { Option: Option } = Select;
+const TreeGraph = /*#__PURE__*/ memo(({ cwd, summary, entryPoints })=>{
+    const [selectedEntryPoints, setEntryPoints] = useState([]);
+    const [inputModule, setModuleValue] = useState(0);
+    const [inputAssetName, setAssetName] = useState('');
+    const [inputAssetSize, setAssetSize] = useState(0);
+    const [defaultExpandAll, setDefaultExpandAll] = useState(false);
+    const [inputModuleUnit, setModuleUnit] = useState('');
+    const [inputChunkUnit, setChunkUnit] = useState('');
+    const [assetPath, setAssetPath] = useState(null);
+    const { showCode, codeDrawerComponent } = useCodeDrawer('Do not have the codes of assets. If you use the lite or brief mode, there will have codes.');
+    const { t } = useI18n();
+    const assets = summary.all.total.files;
+    const handleChange = useCallback((type)=>(value)=>{
+            if ('module' === type) setModuleUnit(value);
+            else if ('chunk' === type) setChunkUnit(value);
+        }, []);
+    const selectAfter = (type)=>/*#__PURE__*/ jsxs(Select, {
+            defaultValue: "kb",
+            onChange: handleChange(type),
+            children: [
+                /*#__PURE__*/ jsx(Option, {
+                    value: "kb",
+                    children: "KB"
+                }),
+                /*#__PURE__*/ jsx(Option, {
+                    value: "mb",
+                    children: "MB"
+                })
+            ]
+        });
+    const onChangeModule = useCallback(debounce((newValue)=>{
+        const count = 'mb' === inputModuleUnit ? 1024 * newValue * 1024 : 1024 * newValue;
+        setModuleValue(count);
+    }, 300), []);
+    const onChangeAsset = useCallback(debounce((newValue)=>{
+        const count = 'mb' === inputChunkUnit ? 1024 * newValue * 1024 : 1024 * newValue;
+        setAssetSize(count);
+    }, 300), []);
+    const filteredAssets = useMemo(()=>{
+        let res = assets.slice();
+        if (inputAssetName) res = res.filter((e)=>e.path.indexOf(inputAssetName) > -1);
+        if (inputAssetSize > 0) res = res.filter((e)=>e.size >= inputAssetSize);
+        if (selectedEntryPoints.length) res = res.filter((e)=>{
+            if (selectedEntryPoints.some((ep)=>ep.assets.includes(e.path))) return true;
+            return false;
+        });
+        return res.sort((a, b)=>{
+            const _a = a.path.indexOf('/') > -1 ? 1 : 0;
+            const _b = b.path.indexOf('/') > -1 ? 1 : 0;
+            return _b - _a;
+        });
+    }, [
+        assets,
+        selectedEntryPoints,
+        inputAssetName,
+        inputAssetSize
+    ]);
+    useEffect(()=>{
+        function getFileExtension(filePath) {
+            const parts = filePath.split('.');
+            return parts.length > 1 ? parts.pop() : '';
+        }
+        summary.all.total.files.forEach((f)=>{
+            const ext = getFileExtension(f.path);
+            if ('js' === ext) setAssetPath(f.path);
+        });
+    }, [
+        summary.all.total.files
+    ]);
+    const assetsStructures = useMemo(()=>{
+        const res = createFileStructures({
+            files: filteredAssets.map((e)=>e.path).filter(Boolean),
+            fileTitle (file, basename) {
+                const target = filteredAssets.find((e)=>e.path === file);
+                const { size, initial, path, content } = target;
+                return /*#__PURE__*/ jsxs("div", {
+                    className: index_module.assetBox,
+                    onClick: ()=>{
+                        setAssetPath(path);
+                    },
+                    children: [
+                        /*#__PURE__*/ jsx(Keyword, {
+                            text: basename,
+                            keyword: '',
+                            className: index_module.fileText
+                        }),
+                        /*#__PURE__*/ jsxs(Space, {
+                            size: "small",
+                            className: index_module.assetsTag,
+                            children: [
+                                /*#__PURE__*/ jsx(Divider, {
+                                    type: "vertical"
+                                }),
+                                /*#__PURE__*/ jsx(Typography.Text, {
+                                    style: {
+                                        color: '#4FD233'
+                                    },
+                                    children: formatSize(size)
+                                }),
+                                /*#__PURE__*/ jsx(Divider, {
+                                    type: "vertical"
+                                }),
+                                initial ? /*#__PURE__*/ jsx(Typography.Text, {
+                                    style: {
+                                        color: '#009A9E'
+                                    },
+                                    children: "initial"
+                                }) : null,
+                                /*#__PURE__*/ jsx(CodeOutlined, {
+                                    style: {
+                                        fontSize: 14,
+                                        padding: 0
+                                    },
+                                    onClick: ()=>showCode({
+                                            code: content,
+                                            filePath: path
+                                        })
+                                })
+                            ]
+                        })
+                    ]
+                });
+            }
+        });
+        return res;
+    }, [
+        filteredAssets
+    ]);
+    const onSearch = (value)=>{
+        setAssetName(value);
+        setDefaultExpandAll(false);
+    };
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: index_module.treeGraph,
+                children: [
+                    /*#__PURE__*/ jsxs(Row, {
+                        align: "middle",
+                        gutter: [
+                            Size.BasePadding,
+                            Size.BasePadding
+                        ],
+                        children: [
+                            entryPoints && entryPoints.length ? /*#__PURE__*/ jsx(Col, {
+                                children: /*#__PURE__*/ jsx(Select, {
+                                    mode: "multiple",
+                                    value: selectedEntryPoints.map((e)=>e.name),
+                                    style: {
+                                        minWidth: 230,
+                                        width: 'auto',
+                                        maxWidth: 300
+                                    },
+                                    placeholder: 'filter assets by entry point',
+                                    onChange: (name)=>{
+                                        setEntryPoints(name.map((e)=>entryPoints.find((ep)=>ep.name === e)).filter(Boolean));
+                                    },
+                                    allowClear: true,
+                                    onClear: ()=>{
+                                        setEntryPoints([]);
+                                    },
+                                    children: entryPoints.map((e)=>/*#__PURE__*/ jsx(Select.Option, {
+                                            value: e.name,
+                                            children: /*#__PURE__*/ jsx(Space, {
+                                                children: /*#__PURE__*/ jsx(Badge, {
+                                                    label: e.name,
+                                                    value: formatSize(e.size),
+                                                    tooltip: e.name
+                                                })
+                                            })
+                                        }, e.name))
+                                })
+                            }) : null,
+                            /*#__PURE__*/ jsx(Col, {
+                                children: /*#__PURE__*/ jsx(KeywordInput, {
+                                    placeholder: "search asset by keyword",
+                                    onChange: onSearch
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Col, {
+                                span: 6,
+                                children: /*#__PURE__*/ jsx(InputNumber, {
+                                    min: 0,
+                                    style: {
+                                        width: '95%'
+                                    },
+                                    addonBefore: /*#__PURE__*/ jsxs(Space, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Typography.Text, {
+                                                style: {
+                                                    fontSize: 14,
+                                                    color: 'inherit'
+                                                },
+                                                children: "Asset Size"
+                                            }),
+                                            /*#__PURE__*/ jsx(Tooltip, {
+                                                title: t('filter the output assets which size is greater than the input value'),
+                                                style: {
+                                                    marginLeft: 3
+                                                },
+                                                children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
+                                                    style: {
+                                                        color: 'rgba(0,0,0,.45)'
+                                                    }
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    onChange: (value)=>onChangeAsset(Number(value)),
+                                    addonAfter: selectAfter('chunk')
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(Col, {
+                                span: 6,
+                                children: /*#__PURE__*/ jsx(InputNumber, {
+                                    min: 0,
+                                    style: {
+                                        width: '95%'
+                                    },
+                                    addonBefore: /*#__PURE__*/ jsxs(Space, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Typography.Text, {
+                                                style: {
+                                                    fontSize: 14,
+                                                    color: 'inherit'
+                                                },
+                                                children: "Module Size"
+                                            }),
+                                            /*#__PURE__*/ jsx(Tooltip, {
+                                                title: t('filter the modules which size is greater than the input value'),
+                                                style: {
+                                                    marginLeft: 3
+                                                },
+                                                children: /*#__PURE__*/ jsx(InfoCircleOutlined, {
+                                                    style: {
+                                                        color: 'rgba(0,0,0,.45)'
+                                                    }
+                                                })
+                                            })
+                                        ]
+                                    }),
+                                    onChange: (value)=>{
+                                        onChangeModule(Number(value));
+                                    },
+                                    addonAfter: selectAfter('module')
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsx(Row, {
+                        children: /*#__PURE__*/ jsx(SearchModal, {})
+                    }),
+                    filteredAssets.length ? /*#__PURE__*/ jsxs("div", {
+                        className: index_module.assetDetailRoot,
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: index_module.assetDetailCol,
+                                children: /*#__PURE__*/ jsx(Card, {
+                                    className: index_module.assetDetailFileTreeRoot,
+                                    classNames: {
+                                        body: index_module.assetDetailFileTreeBody
+                                    },
+                                    title: /*#__PURE__*/ jsxs(Space, {
+                                        children: [
+                                            /*#__PURE__*/ jsx(Typography.Text, {
+                                                children: t('Output Assets List')
+                                            }),
+                                            /*#__PURE__*/ jsx(Divider, {
+                                                type: "vertical"
+                                            }),
+                                            /*#__PURE__*/ jsx(Tooltip, {
+                                                title: `total assets count is ${assets.length}, the filtered assets count is ${filteredAssets.length}`,
+                                                children: /*#__PURE__*/ jsxs(Typography.Text, {
+                                                    type: "secondary",
+                                                    style: {
+                                                        fontSize: 12,
+                                                        fontWeight: 400
+                                                    },
+                                                    children: [
+                                                        filteredAssets.length,
+                                                        " / ",
+                                                        assets.length
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__PURE__*/ jsx(Divider, {
+                                                type: "vertical"
+                                            }),
+                                            /*#__PURE__*/ jsx(Typography.Text, {
+                                                type: "secondary",
+                                                style: {
+                                                    fontSize: 12,
+                                                    fontWeight: 400
+                                                },
+                                                children: formatSize(sumBy(filteredAssets, (e)=>e.size))
+                                            })
+                                        ]
+                                    }),
+                                    size: "small",
+                                    children: /*#__PURE__*/ jsx("div", {
+                                        className: index_module.assetDetailFileTreeViewport,
+                                        children: /*#__PURE__*/ jsx("div", {
+                                            className: index_module.assetDetailFileTreeScrollArea,
+                                            children: /*#__PURE__*/ jsx(FileTree, {
+                                                className: index_module.assets,
+                                                treeData: assetsStructures,
+                                                autoExpandParent: true,
+                                                defaultExpandAll: defaultExpandAll || filteredAssets.length <= 20
+                                            }, `tree_${inputAssetName}_${defaultExpandAll}`)
+                                        })
+                                    })
+                                })
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: index_module.assetDetailCol,
+                                children: assetPath ? /*#__PURE__*/ jsx(ServerAPIProvider, {
+                                    api: SDK.ServerAPI.API.GetAssetDetails,
+                                    body: {
+                                        assetPath
+                                    },
+                                    children: (details)=>/*#__PURE__*/ jsx(AssetDetail, {
+                                            asset: details.asset,
+                                            chunks: details.chunks,
+                                            modules: details.modules,
+                                            moduleSizeLimit: inputModule,
+                                            root: cwd
+                                        })
+                                }) : /*#__PURE__*/ jsx(Card, {
+                                    children: /*#__PURE__*/ jsx(Empty, {
+                                        description: /*#__PURE__*/ jsx(Typography.Text, {
+                                            strong: true,
+                                            children: "Click the file path on the left to show the modules of the asset"
+                                        })
+                                    })
+                                })
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsx(Empty, {})
+                ]
+            }),
+            codeDrawerComponent
+        ]
+    });
+});
+export { TreeGraph };
+
+//# sourceMappingURL=tree-graph.mjs.map

package/dist/pages/BundleSize/components/tree-graph.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pages/BundleSize/components/tree-graph.mjs","sources":["../../../../src/pages/BundleSize/components/tree-graph.tsx"],"sourcesContent":["import { CodeOutlined, InfoCircleOutlined } from '@ant-design/icons';\nimport { type Client, SDK } from '@rsdoctor/types';\nimport {\n  Card,\n  Col,\n  Divider,\n  Empty,\n  InputNumber,\n  Row,\n  Select,\n  Space,\n  Tooltip,\n  Typography,\n} from 'antd';\nimport { debounce, sumBy } from 'es-toolkit/compat';\nimport { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport { useCodeDrawer } from 'src/components/base/CodeViewer/useCodeDrawer';\nimport { Badge as Bdg } from '../../../components/Badge';\nimport { FileTree } from '../../../components/FileTree';\nimport { KeywordInput } from '../../../components/Form/keyword';\nimport { Keyword } from '../../../components/Keyword';\nimport { ServerAPIProvider } from '../../../components/Manifest';\nimport { Size } from '../../../constants';\nimport { createFileStructures, formatSize, useI18n } from '../../../utils';\nimport { AssetDetail } from './asset';\nimport styles from './index.module.scss';\nimport './index.sass';\nimport { SearchModal } from './search-modal';\nconst { Option } = Select;\n\nexport const TreeGraph = memo(\n  ({\n    cwd,\n    summary,\n    entryPoints,\n  }: {\n    cwd: string;\n    summary: Client.RsdoctorClientAssetsSummary;\n    entryPoints: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetEntryPoints>;\n  }) => {\n    const [selectedEntryPoints, setEntryPoints] = useState<\n      SDK.EntryPointData[]\n    >([]);\n    const [inputModule, setModuleValue] = useState(0);\n    const [inputAssetName, setAssetName] = useState('');\n    const [inputAssetSize, setAssetSize] = useState(0);\n    const [defaultExpandAll, setDefaultExpandAll] = useState(false);\n    const [inputModuleUnit, setModuleUnit] = useState('');\n    const [inputChunkUnit, setChunkUnit] = useState('');\n    const [assetPath, setAssetPath] = useState<string | null>(null);\n    const { showCode, codeDrawerComponent } = useCodeDrawer(\n      'Do not have the codes of assets. If you use the lite or brief mode, there will have codes.',\n    );\n\n    const { t } = useI18n();\n\n    const assets = summary.all.total.files;\n\n    const handleChange = useCallback(\n      (type: string) => (value: string) => {\n        if (type === 'module') {\n          setModuleUnit(value);\n        } else if (type === 'chunk') {\n          setChunkUnit(value);\n        }\n      },\n      [],\n    );\n\n    const selectAfter = (type: string) => (\n      <Select defaultValue=\"kb\" onChange={handleChange(type)}>\n        <Option value=\"kb\">KB</Option>\n        <Option value=\"mb\">MB</Option>\n      </Select>\n    );\n    const onChangeModule = useCallback(\n      debounce((newValue: number) => {\n        const count =\n          inputModuleUnit === 'mb' ? newValue * 1024 * 1024 : newValue * 1024;\n        setModuleValue(count);\n      }, 300),\n      [],\n    );\n\n    const onChangeAsset = useCallback(\n      debounce((newValue: number) => {\n        const count =\n          inputChunkUnit === 'mb' ? newValue * 1024 * 1024 : newValue * 1024;\n        setAssetSize(count);\n      }, 300),\n      [],\n    );\n\n    const filteredAssets = useMemo(() => {\n      let res = assets.slice();\n\n      if (inputAssetName) {\n        res = res.filter((e) => e.path.indexOf(inputAssetName) > -1);\n      }\n\n      if (inputAssetSize > 0) {\n        res = res.filter((e) => e.size >= inputAssetSize);\n      }\n\n      if (selectedEntryPoints.length) {\n        res = res.filter((e) => {\n          if (selectedEntryPoints.some((ep) => ep.assets.includes(e.path))) {\n            return true;\n          }\n          return false;\n        });\n      }\n\n      return res.sort((a, b) => {\n        const _a = a.path.indexOf('/') > -1 ? 1 : 0;\n        const _b = b.path.indexOf('/') > -1 ? 1 : 0;\n        // return _a - _b;\n        return _b - _a;\n      });\n    }, [assets, selectedEntryPoints, inputAssetName, inputAssetSize]);\n\n    useEffect(() => {\n      function getFileExtension(filePath: string) {\n        const parts = filePath.split('.');\n        return parts.length > 1 ? parts.pop() : '';\n      }\n\n      summary.all.total.files.forEach((f) => {\n        const ext = getFileExtension(f.path);\n        if (ext === 'js') {\n          setAssetPath(f.path);\n        }\n      });\n    }, [summary.all.total.files]);\n\n    const assetsStructures = useMemo(() => {\n      const res = createFileStructures({\n        files: filteredAssets.map((e) => e.path).filter(Boolean),\n        fileTitle(file, basename) {\n          const target = filteredAssets.find((e) => e.path === file)!;\n          const { size, initial, path, content } = target;\n\n          return (\n            <div\n              className={styles.assetBox}\n              onClick={() => {\n                setAssetPath(path);\n              }}\n            >\n              <Keyword\n                text={basename}\n                keyword={''}\n                className={styles.fileText}\n              />\n              <Space size=\"small\" className={styles.assetsTag}>\n                <Divider type=\"vertical\" />\n                <Typography.Text style={{ color: '#4FD233' }}>\n                  {formatSize(size)}\n                </Typography.Text>\n                <Divider type=\"vertical\" />\n                {initial ? (\n                  <Typography.Text style={{ color: '#009A9E' }}>\n                    initial\n                  </Typography.Text>\n                ) : null}\n                <CodeOutlined\n                  style={{ fontSize: 14, padding: 0 }}\n                  onClick={() => showCode({ code: content!, filePath: path })}\n                />\n              </Space>\n            </div>\n          );\n        },\n      });\n      return res;\n    }, [filteredAssets]);\n\n    const onSearch = (value: string) => {\n      setAssetName(value);\n      setDefaultExpandAll(false);\n    };\n    return (\n      <>\n        <div className={styles.treeGraph}>\n          <Row align=\"middle\" gutter={[Size.BasePadding, Size.BasePadding]}>\n            {entryPoints && entryPoints.length ? (\n              <Col>\n                <Select\n                  mode=\"multiple\"\n                  value={selectedEntryPoints.map((e) => e.name)}\n                  style={{\n                    minWidth: 230,\n                    width: 'auto',\n                    maxWidth: 300,\n                  }}\n                  placeholder={'filter assets by entry point'}\n                  onChange={(name: string[]) => {\n                    setEntryPoints(\n                      name\n                        .map((e) => entryPoints.find((ep) => ep.name === e)!)\n                        .filter(Boolean),\n                    );\n                  }}\n                  allowClear\n                  onClear={() => {\n                    setEntryPoints([]);\n                  }}\n                >\n                  {entryPoints.map((e) => {\n                    return (\n                      <Select.Option key={e.name} value={e.name}>\n                        <Space>\n                          <Bdg\n                            label={e.name}\n                            value={formatSize(e.size)}\n                            tooltip={e.name}\n                          />\n                        </Space>\n                      </Select.Option>\n                    );\n                  })}\n                </Select>\n              </Col>\n            ) : null}\n            <Col>\n              <KeywordInput\n                placeholder=\"search asset by keyword\"\n                onChange={onSearch}\n              />\n            </Col>\n            <Col span={6}>\n              <InputNumber\n                min={0}\n                style={{ width: '95%' }}\n                addonBefore={\n                  <Space>\n                    <Typography.Text style={{ fontSize: 14, color: 'inherit' }}>\n                      Asset Size\n                    </Typography.Text>\n                    <Tooltip\n                      title={t(\n                        'filter the output assets which size is greater than the input value',\n                      )}\n                      style={{ marginLeft: 3 }}\n                    >\n                      <InfoCircleOutlined\n                        style={{ color: 'rgba(0,0,0,.45)' }}\n                      />\n                    </Tooltip>\n                  </Space>\n                }\n                onChange={(value) => onChangeAsset(Number(value))}\n                addonAfter={selectAfter('chunk')}\n              />\n            </Col>\n            <Col span={6}>\n              <InputNumber\n                min={0}\n                style={{ width: '95%' }}\n                addonBefore={\n                  <Space>\n                    <Typography.Text style={{ fontSize: 14, color: 'inherit' }}>\n                      Module Size\n                    </Typography.Text>\n                    <Tooltip\n                      title={t(\n                        'filter the modules which size is greater than the input value',\n                      )}\n                      style={{ marginLeft: 3 }}\n                    >\n                      <InfoCircleOutlined\n                        style={{ color: 'rgba(0,0,0,.45)' }}\n                      />\n                    </Tooltip>\n                  </Space>\n                }\n                onChange={(value) => {\n                  onChangeModule(Number(value));\n                }}\n                addonAfter={selectAfter('module')}\n              />\n            </Col>\n          </Row>\n          <Row>\n            <SearchModal />\n          </Row>\n          {filteredAssets.length ? (\n            <div className={styles.assetDetailRoot}>\n              <div className={styles.assetDetailCol}>\n                <Card\n                  className={styles.assetDetailFileTreeRoot}\n                  classNames={{\n                    body: styles.assetDetailFileTreeBody,\n                  }}\n                  title={\n                    <Space>\n                      <Typography.Text>\n                        {t('Output Assets List')}\n                      </Typography.Text>\n                      <Divider type=\"vertical\" />\n                      <Tooltip\n                        title={`total assets count is ${assets.length}, the filtered assets count is ${filteredAssets.length}`}\n                      >\n                        <Typography.Text\n                          type=\"secondary\"\n                          style={{\n                            fontSize: 12,\n                            fontWeight: 400,\n                          }}\n                        >\n                          {filteredAssets.length} / {assets.length}\n                        </Typography.Text>\n                      </Tooltip>\n                      <Divider type=\"vertical\" />\n                      <Typography.Text\n                        type=\"secondary\"\n                        style={{ fontSize: 12, fontWeight: 400 }}\n                      >\n                        {formatSize(sumBy(filteredAssets, (e) => e.size))}\n                      </Typography.Text>\n                    </Space>\n                  }\n                  size=\"small\"\n                >\n                  <div className={styles.assetDetailFileTreeViewport}>\n                    <div className={styles.assetDetailFileTreeScrollArea}>\n                      <FileTree\n                        className={styles.assets}\n                        treeData={assetsStructures}\n                        autoExpandParent\n                        defaultExpandAll={\n                          defaultExpandAll || filteredAssets.length <= 20\n                        }\n                        key={`tree_${inputAssetName}_${defaultExpandAll}`}\n                      />\n                    </div>\n                  </div>\n                </Card>\n              </div>\n              <div className={styles.assetDetailCol}>\n                {assetPath ? (\n                  <ServerAPIProvider\n                    api={SDK.ServerAPI.API.GetAssetDetails}\n                    body={{ assetPath }}\n                  >\n                    {(details) => (\n                      <AssetDetail\n                        asset={details.asset}\n                        chunks={details.chunks}\n                        modules={details.modules}\n                        moduleSizeLimit={inputModule}\n                        root={cwd}\n                      />\n                    )}\n                  </ServerAPIProvider>\n                ) : (\n                  <Card>\n                    <Empty\n                      description={\n                        <Typography.Text strong>\n                          Click the file path on the left to show the modules of\n                          the asset\n                        </Typography.Text>\n                      }\n                    />\n                  </Card>\n                )}\n              </div>\n            </div>\n          ) : (\n            <Empty />\n          )}\n        </div>\n        {codeDrawerComponent}\n      </>\n    );\n  },\n);\n"],"names":["Option","Select","TreeGraph","memo","cwd","summary","entryPoints","selectedEntryPoints","setEntryPoints","useState","inputModule","setModuleValue","inputAssetName","setAssetName","inputAssetSize","setAssetSize","defaultExpandAll","setDefaultExpandAll","inputModuleUnit","setModuleUnit","inputChunkUnit","setChunkUnit","assetPath","setAssetPath","showCode","codeDrawerComponent","useCodeDrawer","t","useI18n","assets","handleChange","useCallback","type","value","selectAfter","onChangeModule","debounce","newValue","count","onChangeAsset","filteredAssets","useMemo","res","e","ep","a","b","_a","_b","useEffect","getFileExtension","filePath","parts","f","ext","assetsStructures","createFileStructures","Boolean","file","basename","target","size","initial","path","content","styles","Keyword","Space","Divider","Typography","formatSize","CodeOutlined","onSearch","Row","Size","Col","name","Bdg","KeywordInput","InputNumber","Tooltip","InfoCircleOutlined","Number","SearchModal","Card","sumBy","FileTree","ServerAPIProvider","SDK","details","AssetDetail","Empty"],"mappings":"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"}

package/dist/pages/BundleSize/index.mjs

@@ -1,18 +1,8 @@
 import { jsx } from "react/jsx-runtime";
-import { Col, Row } from "antd";
 import "react";
-import { Size } from "../../constants.mjs";
 import { WebpackModulesOverall } from "./components/index.mjs";
 export * from "./constants.mjs";
-const Page = ()=>/*#__PURE__*/ jsx(Row, {
-        children: /*#__PURE__*/ jsx(Col, {
-            span: 24,
-            style: {
-                marginBottom: Size.BasePadding
-            },
-            children: /*#__PURE__*/ jsx(WebpackModulesOverall, {})
-        })
-    });
+const Page = ()=>/*#__PURE__*/ jsx(WebpackModulesOverall, {});
 export { Page };
 
 //# sourceMappingURL=index.mjs.map

package/dist/pages/BundleSize/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pages/BundleSize/index.mjs","sources":["../../../src/pages/BundleSize/index.tsx"],"sourcesContent":["import { Col, Row } from 'antd';\nimport React from 'react';\n\nimport { Size } from '../../constants';\nimport { WebpackModulesOverall } from './components';\n\nexport const Page: React.FC = () => {\n  return (\n    <Row>\n      <Col span={24} style={{ marginBottom: Size.BasePadding }}>\n        <WebpackModulesOverall />\n      </Col>\n    </Row>\n  );\n};\n\nexport * from './constants';\n"],"names":["Page","Row","Col","Size","WebpackModulesOverall"],"mappings":";;;;;;AAMO,MAAMA,OAAiB,IACrB,WAAP,GACE,IAACC,KAAGA;kBACF,kBAACC,KAAGA;YAAC,MAAM;YAAI,OAAO;gBAAE,cAAcC,KAAK,WAAW;YAAC;sBACrD,kBAACC,uBAAqBA,CAAAA"}
+{"version":3,"file":"pages/BundleSize/index.mjs","sources":["../../../src/pages/BundleSize/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { WebpackModulesOverall } from './components';\n\nexport const Page: React.FC = () => {\n  return <WebpackModulesOverall />;\n};\n\nexport * from './constants';\n"],"names":["Page","WebpackModulesOverall"],"mappings":";;;;AAIO,MAAMA,OAAiB,IACrB,WAAP,GAAO,IAACC,uBAAqBA,CAAAA"}

package/dist/pages/Overall/responsiveLayout.d.ts

@@ -2,5 +2,5 @@ import React from 'react';
 interface Props {
     children: React.ReactNode[];
 }
-export declare const ResponsiveLayout: ({ children }: Props) => import("react/jsx-runtime").JSX.Element;
+export declare const ResponsiveLayout: ({ children }: Props) => React.JSX.Element;
 export {};

package/dist/pages/Resources/BundleDiff/DiffContainer/utils.d.ts

@@ -1,2 +1,2 @@
 import { Client } from '@rsdoctor/types';
-export declare const formatDiffSize: (bSize: number, cSize: number, state: Client.RsdoctorClientDiffState, propsStyle?: Record<string, string | number>) => import("react/jsx-runtime").JSX.Element;
+export declare const formatDiffSize: (bSize: number, cSize: number, state: Client.RsdoctorClientDiffState, propsStyle?: Record<string, string | number>) => import("react").JSX.Element;

package/dist/pages/TreeShaking/editor.d.ts

@@ -8,4 +8,4 @@ export interface CodeEditorProps {
     source: SDK.ModuleSource;
     toLine?: number;
 }
-export declare function CodeEditor(props: CodeEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function CodeEditor(props: CodeEditorProps): import("react").JSX.Element;

package/dist/pages/TreeShaking/space.d.ts

@@ -1 +1 @@
-export declare function Space(): import("react/jsx-runtime").JSX.Element;
+export declare function Space(): import("react").JSX.Element;

package/dist/utils/file.d.ts

@@ -30,7 +30,7 @@ export declare function beautifyModulePath(modulePath: string, cwd: string): {
     alias: string;
     inNodeModules: boolean;
 };
-export declare function getFileIcon(props: TreeNodeProps, addRowIcon?: boolean): import("react/jsx-runtime").JSX.Element;
+export declare function getFileIcon(props: TreeNodeProps, addRowIcon?: boolean): import("react").JSX.Element;
 type TreeNode = {
     name: string;
     value?: number;

package/dist/utils/hooks.d.ts

@@ -1,4 +1,5 @@
 import { Manifest, Rule, SDK } from '@rsdoctor/types';
+import { type SetStateAction, type Dispatch } from 'react';
 import { useTranslation } from 'react-i18next';
 import './i18n/index.js';
 export declare const useI18n: typeof useTranslation;
@@ -6,7 +7,7 @@ export declare function useRuleIndexNavigate(code: string, link?: string | undef
 export declare function useUrlQuery(): Record<string, string | undefined>;
 export declare function useLoading(defaultLoading?: boolean): {
     loading: boolean;
-    setLoading: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    setLoading: Dispatch<SetStateAction<boolean>>;
     withLoading(func: (...args: unknown[]) => Promise<unknown> | unknown): Promise<void>;
 };
 export declare function useProjectRootByManifest(manifest: Manifest.RsdoctorManifest): string;
@@ -28,3 +29,8 @@ export declare function useDuplicatePackagesByErrors(errors: Manifest.RsdoctorMa
 export declare function useWebpackConfigurationByConfigs(configs?: SDK.ConfigData): SDK.WebpackConfigData | null | undefined;
 export declare function useDetectIfCloudIdeEnv(): boolean;
 export declare function useWindowWidth(): number;
+export declare function useElementSize<T extends HTMLElement = HTMLDivElement>(): readonly [import("react").RefObject<T | null>, {
+    readonly width: number;
+    readonly height: number;
+}];
+export declare function usePersistedState<T>(baseKey: string, initialValue: T | (() => T)): [T, Dispatch<SetStateAction<T>>];

package/dist/utils/hooks.mjs

@@ -1,7 +1,7 @@
 import { Algorithm } from "@rsdoctor/utils/common";
 import { Client, Rule } from "@rsdoctor/types";
-import { defaults, uniqBy } from "es-toolkit/compat";
-import { useEffect, useMemo, useState } from "react";
+import { defaults, throttle, uniqBy } from "es-toolkit/compat";
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
 import url_parse from "url-parse";
@@ -161,6 +161,76 @@ function useWindowWidth() {
     }, []);
     return windowWidth;
 }
-export { useBundleAlertsByErrors, useBundleAlertsByManifest, useChunkGraphByManifest, useCloudManifestUrlByManifest, useCompileAlertsByErrors, useConfigOutputFileNameByManifest, useDetectIfCloudIdeEnv, useDuplicatePackagesByErrors, useDuplicatePackagesByManifest, useErrorsByManifest, useHashByManifest, useI18n, useLoading, useModuleGraph, useModuleGraphByManifest, usePackageGraphByManifest, useProjectRootByManifest, useRuleIndexNavigate, useUniqModules, useUniqModulesByManifest, useUrlQuery, useWebpackConfigurationByConfigs, useWindowWidth };
+function useElementSize() {
+    const ref = useRef(null);
+    const [width, setWidth_] = useState(0);
+    const [height, setHeight_] = useState(0);
+    useLayoutEffect(()=>{
+        const $el = ref.current;
+        if (!$el) return;
+        const setWidth = (n)=>setWidth_(Math.ceil(n));
+        const setHeight = (n)=>setHeight_(Math.ceil(n));
+        const initialRect = $el.getBoundingClientRect();
+        setWidth(initialRect.width);
+        setHeight(initialRect.height);
+        const onResize = throttle((entries)=>{
+            const entry = entries[0];
+            if (!entry) return;
+            const borderBox = entry.borderBoxSize?.[0];
+            if (borderBox) {
+                setWidth(borderBox.inlineSize);
+                setHeight(borderBox.blockSize);
+            } else {
+                setWidth(entry.contentRect.width);
+                setHeight(entry.contentRect.height);
+            }
+        }, 100);
+        const observer = new ResizeObserver(onResize);
+        observer.observe($el);
+        return ()=>{
+            observer.disconnect();
+            onResize.cancel();
+        };
+    }, []);
+    return [
+        ref,
+        {
+            width,
+            height
+        }
+    ];
+}
+function usePersistedState(baseKey, initialValue) {
+    const NS = 'RSDOC:';
+    const key = NS + baseKey;
+    const [state, setState] = useState(()=>{
+        try {
+            const item = window.localStorage.getItem(key);
+            if (null !== item) return JSON.parse(item);
+            return 'function' == typeof initialValue ? initialValue() : initialValue;
+        } catch (error) {
+            console.warn(`Error reading localStorage key "${key}":`, error);
+            return 'function' == typeof initialValue ? initialValue() : initialValue;
+        }
+    });
+    const setPersistedState = useCallback((value)=>{
+        try {
+            setState((prevState)=>{
+                const nextState = value instanceof Function ? value(prevState) : value;
+                window.localStorage.setItem(key, JSON.stringify(nextState));
+                return nextState;
+            });
+        } catch (error) {
+            console.warn(`Error setting localStorage key "${key}":`, error);
+        }
+    }, [
+        key
+    ]);
+    return [
+        state,
+        setPersistedState
+    ];
+}
+export { useBundleAlertsByErrors, useBundleAlertsByManifest, useChunkGraphByManifest, useCloudManifestUrlByManifest, useCompileAlertsByErrors, useConfigOutputFileNameByManifest, useDetectIfCloudIdeEnv, useDuplicatePackagesByErrors, useDuplicatePackagesByManifest, useElementSize, useErrorsByManifest, useHashByManifest, useI18n, useLoading, useModuleGraph, useModuleGraphByManifest, usePackageGraphByManifest, usePersistedState, useProjectRootByManifest, useRuleIndexNavigate, useUniqModules, useUniqModulesByManifest, useUrlQuery, useWebpackConfigurationByConfigs, useWindowWidth };
 
 //# sourceMappingURL=hooks.mjs.map