@rsdoctor/components 1.5.17 → 1.5.18

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

@@ -1,7 +1,7 @@
 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 { Card, Checkbox, 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";
@@ -13,9 +13,11 @@ 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 { createAssetPathMap, resolveAssetFileTitleTarget } from "./asset-path.mjs";
 import index_module from "./index.module.mjs";
 import "./index.css";
 import { SearchModal } from "./search-modal.mjs";
+import { isJavaScriptAsset } from "../../../utils/assets.mjs";
 const { Option: Option } = Select;
 const TreeGraph = /*#__PURE__*/ memo(({ cwd, summary, entryPoints })=>{
     const [selectedEntryPoints, setEntryPoints] = useState([]);
@@ -25,6 +27,7 @@ const TreeGraph = /*#__PURE__*/ memo(({ cwd, summary, entryPoints })=>{
     const [defaultExpandAll, setDefaultExpandAll] = useState(false);
     const [inputModuleUnit, setModuleUnit] = useState('');
     const [inputChunkUnit, setChunkUnit] = useState('');
+    const [showOnlyJavaScriptAssets, setShowOnlyJavaScriptAssets] = useState(false);
     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();
@@ -58,6 +61,7 @@ const TreeGraph = /*#__PURE__*/ memo(({ cwd, summary, entryPoints })=>{
     const filteredAssets = useMemo(()=>{
         let res = assets.slice();
         if (inputAssetName) res = res.filter((e)=>e.path.indexOf(inputAssetName) > -1);
+        if (showOnlyJavaScriptAssets) res = res.filter((e)=>isJavaScriptAsset(e.path));
         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;
@@ -72,25 +76,26 @@ const TreeGraph = /*#__PURE__*/ memo(({ cwd, summary, entryPoints })=>{
         assets,
         selectedEntryPoints,
         inputAssetName,
-        inputAssetSize
+        inputAssetSize,
+        showOnlyJavaScriptAssets
     ]);
     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);
-        });
+        if (assetPath && filteredAssets.some((f)=>f.path === assetPath)) return;
+        const nextAsset = filteredAssets.find((f)=>isJavaScriptAsset(f.path)) ?? filteredAssets[0];
+        setAssetPath(nextAsset?.path ?? null);
     }, [
-        summary.all.total.files
+        assetPath,
+        filteredAssets
+    ]);
+    const assetsMap = useMemo(()=>createAssetPathMap(filteredAssets), [
+        filteredAssets
     ]);
     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 target = resolveAssetFileTitleTarget(assetsMap, file, basename);
+                if ('string' == typeof target) return target;
                 const { size, initial, path, content } = target;
                 return /*#__PURE__*/ jsxs("div", {
                     className: index_module.assetBox,
@@ -143,7 +148,9 @@ const TreeGraph = /*#__PURE__*/ memo(({ cwd, summary, entryPoints })=>{
         });
         return res;
     }, [
-        filteredAssets
+        assetsMap,
+        filteredAssets,
+        showCode
     ]);
     const onSearch = (value)=>{
         setAssetName(value);
@@ -196,6 +203,16 @@ const TreeGraph = /*#__PURE__*/ memo(({ cwd, summary, entryPoints })=>{
                                     onChange: onSearch
                                 })
                             }),
+                            /*#__PURE__*/ jsx(Col, {
+                                children: /*#__PURE__*/ jsx(Checkbox, {
+                                    checked: showOnlyJavaScriptAssets,
+                                    onChange: (e)=>{
+                                        setShowOnlyJavaScriptAssets(e.target.checked);
+                                        setDefaultExpandAll(false);
+                                    },
+                                    children: "JS only"
+                                })
+                            }),
                             /*#__PURE__*/ jsx(Col, {
                                 span: 6,
                                 children: /*#__PURE__*/ jsx(InputNumber, {

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

@@ -1 +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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"}
+{"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  Checkbox,\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 { createAssetPathMap, resolveAssetFileTitleTarget } from './asset-path';\nimport styles from './index.module.scss';\nimport './index.sass';\nimport { SearchModal } from './search-modal';\nimport { isJavaScriptAsset } from '../../../utils/assets';\n\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 [showOnlyJavaScriptAssets, setShowOnlyJavaScriptAssets] =\n      useState(false);\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 (showOnlyJavaScriptAssets) {\n        res = res.filter((e) => isJavaScriptAsset(e.path));\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    }, [\n      assets,\n      selectedEntryPoints,\n      inputAssetName,\n      inputAssetSize,\n      showOnlyJavaScriptAssets,\n    ]);\n\n    useEffect(() => {\n      if (assetPath && filteredAssets.some((f) => f.path === assetPath)) {\n        return;\n      }\n\n      const nextAsset =\n        filteredAssets.find((f) => isJavaScriptAsset(f.path)) ??\n        filteredAssets[0];\n\n      setAssetPath(nextAsset?.path ?? null);\n    }, [assetPath, filteredAssets]);\n\n    const assetsMap = useMemo(() => {\n      return createAssetPathMap(filteredAssets);\n    }, [filteredAssets]);\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 = resolveAssetFileTitleTarget(assetsMap, file, basename);\n\n          if (typeof target === 'string') {\n            return target;\n          }\n\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    }, [assetsMap, filteredAssets, showCode]);\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>\n              <Checkbox\n                checked={showOnlyJavaScriptAssets}\n                onChange={(e) => {\n                  setShowOnlyJavaScriptAssets(e.target.checked);\n                  setDefaultExpandAll(false);\n                }}\n              >\n                JS only\n              </Checkbox>\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","showOnlyJavaScriptAssets","setShowOnlyJavaScriptAssets","assetPath","setAssetPath","showCode","codeDrawerComponent","useCodeDrawer","t","useI18n","assets","handleChange","useCallback","type","value","selectAfter","onChangeModule","debounce","newValue","count","onChangeAsset","filteredAssets","useMemo","res","e","isJavaScriptAsset","ep","a","b","_a","_b","useEffect","f","nextAsset","assetsMap","createAssetPathMap","assetsStructures","createFileStructures","Boolean","file","basename","target","resolveAssetFileTitleTarget","size","initial","path","content","styles","Keyword","Space","Divider","Typography","formatSize","CodeOutlined","onSearch","Row","Size","Col","name","Bdg","KeywordInput","Checkbox","InputNumber","Tooltip","InfoCircleOutlined","Number","SearchModal","Card","sumBy","FileTree","ServerAPIProvider","SDK","details","AssetDetail","Empty"],"mappings":"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"}

package/dist/utils/assets.d.ts

@@ -0,0 +1 @@
+export declare const isJavaScriptAsset: (assetPath: string) => boolean;

package/dist/utils/assets.mjs

@@ -0,0 +1,17 @@
+const JAVASCRIPT_ASSET_EXTENSIONS = new Set([
+    'js',
+    'cjs',
+    'mjs',
+    'jsx',
+    'bundle'
+]);
+const isJavaScriptAsset = (assetPath)=>{
+    const cleanPath = assetPath.split(/[?#]/, 1)[0] ?? '';
+    const lastDot = cleanPath.lastIndexOf('.');
+    if (-1 === lastDot) return false;
+    const ext = cleanPath.slice(lastDot + 1).toLowerCase();
+    return JAVASCRIPT_ASSET_EXTENSIONS.has(ext);
+};
+export { isJavaScriptAsset };
+
+//# sourceMappingURL=assets.mjs.map

package/dist/utils/assets.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils/assets.mjs","sources":["../../src/utils/assets.ts"],"sourcesContent":["const JAVASCRIPT_ASSET_EXTENSIONS = new Set([\n  'js',\n  'cjs',\n  'mjs',\n  'jsx',\n  'bundle',\n]);\n\nexport const isJavaScriptAsset = (assetPath: string): boolean => {\n  const cleanPath = assetPath.split(/[?#]/, 1)[0] ?? '';\n  const lastDot = cleanPath.lastIndexOf('.');\n\n  if (lastDot === -1) return false;\n\n  const ext = cleanPath.slice(lastDot + 1).toLowerCase();\n  return JAVASCRIPT_ASSET_EXTENSIONS.has(ext);\n};\n"],"names":["JAVASCRIPT_ASSET_EXTENSIONS","Set","isJavaScriptAsset","assetPath","cleanPath","lastDot","ext"],"mappings":"AAAA,MAAMA,8BAA8B,IAAIC,IAAI;IAC1C;IACA;IACA;IACA;IACA;CACD;AAEM,MAAMC,oBAAoB,CAACC;IAChC,MAAMC,YAAYD,UAAU,KAAK,CAAC,QAAQ,EAAE,CAAC,EAAE,IAAI;IACnD,MAAME,UAAUD,UAAU,WAAW,CAAC;IAEtC,IAAIC,AAAY,OAAZA,SAAgB,OAAO;IAE3B,MAAMC,MAAMF,UAAU,KAAK,CAACC,UAAU,GAAG,WAAW;IACpD,OAAOL,4BAA4B,GAAG,CAACM;AACzC"}

package/dist/utils/assets.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/utils/assets.test.mjs

@@ -0,0 +1,22 @@
+import { describe, expect, it } from "@rstest/core";
+import { isJavaScriptAsset } from "./assets.mjs";
+describe('assets utils', ()=>{
+    it('detects JavaScript assets by extension', ()=>{
+        expect(isJavaScriptAsset('app.js')).toBe(true);
+        expect(isJavaScriptAsset('chunk.CJS')).toBe(true);
+        expect(isJavaScriptAsset('runtime.mjs')).toBe(true);
+        expect(isJavaScriptAsset('page.jsx')).toBe(true);
+        expect(isJavaScriptAsset('main.bundle')).toBe(true);
+    });
+    it('ignores query strings and hashes when checking extensions', ()=>{
+        expect(isJavaScriptAsset('app.js?x=1')).toBe(true);
+        expect(isJavaScriptAsset('chunk.mjs#content')).toBe(true);
+        expect(isJavaScriptAsset('page.jsx?x=1#content')).toBe(true);
+    });
+    it('returns false when the asset path has no extension', ()=>{
+        expect(isJavaScriptAsset('app')).toBe(false);
+        expect(isJavaScriptAsset('app?x=1')).toBe(false);
+    });
+});
+
+//# sourceMappingURL=assets.test.mjs.map

package/dist/utils/assets.test.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils/assets.test.mjs","sources":["../../src/utils/assets.test.ts"],"sourcesContent":["import { describe, expect, it } from '@rstest/core';\nimport { isJavaScriptAsset } from './assets';\n\ndescribe('assets utils', () => {\n  it('detects JavaScript assets by extension', () => {\n    expect(isJavaScriptAsset('app.js')).toBe(true);\n    expect(isJavaScriptAsset('chunk.CJS')).toBe(true);\n    expect(isJavaScriptAsset('runtime.mjs')).toBe(true);\n    expect(isJavaScriptAsset('page.jsx')).toBe(true);\n    expect(isJavaScriptAsset('main.bundle')).toBe(true);\n  });\n\n  it('ignores query strings and hashes when checking extensions', () => {\n    expect(isJavaScriptAsset('app.js?x=1')).toBe(true);\n    expect(isJavaScriptAsset('chunk.mjs#content')).toBe(true);\n    expect(isJavaScriptAsset('page.jsx?x=1#content')).toBe(true);\n  });\n\n  it('returns false when the asset path has no extension', () => {\n    expect(isJavaScriptAsset('app')).toBe(false);\n    expect(isJavaScriptAsset('app?x=1')).toBe(false);\n  });\n});\n"],"names":["describe","it","expect","isJavaScriptAsset"],"mappings":";;AAGAA,SAAS,gBAAgB;IACvBC,GAAG,0CAA0C;QAC3CC,OAAOC,kBAAkB,WAAW,IAAI,CAAC;QACzCD,OAAOC,kBAAkB,cAAc,IAAI,CAAC;QAC5CD,OAAOC,kBAAkB,gBAAgB,IAAI,CAAC;QAC9CD,OAAOC,kBAAkB,aAAa,IAAI,CAAC;QAC3CD,OAAOC,kBAAkB,gBAAgB,IAAI,CAAC;IAChD;IAEAF,GAAG,6DAA6D;QAC9DC,OAAOC,kBAAkB,eAAe,IAAI,CAAC;QAC7CD,OAAOC,kBAAkB,sBAAsB,IAAI,CAAC;QACpDD,OAAOC,kBAAkB,yBAAyB,IAAI,CAAC;IACzD;IAEAF,GAAG,sDAAsD;QACvDC,OAAOC,kBAAkB,QAAQ,IAAI,CAAC;QACtCD,OAAOC,kBAAkB,YAAY,IAAI,CAAC;IAC5C;AACF"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsdoctor/components",
-  "version": "1.5.17",
+  "version": "1.5.18",
   "license": "MIT",
   "types": "dist/index.d.ts",
   "repository": {
@@ -39,9 +39,9 @@
   },
   "devDependencies": {
     "@rsbuild/plugin-check-syntax": "^1.6.1",
-    "@rsbuild/plugin-react": "^2.0.1",
+    "@rsbuild/plugin-react": "^2.1.0",
     "@rsbuild/plugin-sass": "^1.5.3",
-    "@rsbuild/plugin-svgr": "^2.0.3",
+    "@rsbuild/plugin-svgr": "^2.0.5",
     "@types/node": "^24.12.3",
     "@types/path-browserify": "1.0.3",
     "@types/react": "^19.2.15",
@@ -60,7 +60,7 @@
     "dayjs": "1.11.21",
     "echarts": "^5.6.0",
     "echarts-for-react": "^3.0.6",
-    "es-toolkit": "^1.47.0",
+    "es-toolkit": "^1.49.0",
     "i18next": "22.0.4",
     "monaco-editor": "0.49.0",
     "path-browserify": "1.0.1",
@@ -71,12 +71,12 @@
     "react-hyper-tree": "0.3.12",
     "react-i18next": "12.0.0",
     "react-json-view": "1.21.3",
-    "react-markdown": "^9.1.0",
+    "react-markdown": "^10.1.0",
     "socket.io-client": "4.8.1",
     "url-parse": "1.5.10",
-    "@rsdoctor/types": "1.5.17",
-    "@rsdoctor/graph": "1.5.17",
-    "@rsdoctor/utils": "1.5.17"
+    "@rsdoctor/types": "1.5.18",
+    "@rsdoctor/graph": "1.5.18",
+    "@rsdoctor/utils": "1.5.18"
   },
   "peerDependencies": {
     "react": ">=19",