@rsdoctor/components 1.1.4 → 1.1.5

package/dist/pages/BundleSize/components/index.js

@@ -29,15 +29,22 @@ import { KeywordInput } from "../../../components/Form/keyword";
 import { Keyword } from "../../../components/Keyword";
 import { ServerAPIProvider, withServerAPI } from "../../../components/Manifest";
 import { Size } from "../../../constants";
-import { createFileStructures, formatSize, useI18n } from "../../../utils";
+import {
+  createFileStructures,
+  flattenTreemapData,
+  formatSize,
+  useI18n
+} from "../../../utils";
 import { AssetDetail } from "./asset";
 import { BundleCards } from "./cards";
 import styles from "./index.module";
 import "./index.css";
 import { SearchModal } from "./search-modal";
+import {
+  AssetTreemapWithFilter
+} from "../../../components/Charts/TreeMap";
 const { Option } = Select;
 const cardBodyHeight = 600;
-const largeCardBodyHeight = 800;
 const tabList = [
   {
     key: "tree",
@@ -225,7 +232,7 @@ const WebpackModulesOverallBase = ({ errors, cwd, summary, entryPoints }) => {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "bundle-size-card", children: [
       /* @__PURE__ */ jsx(BundleCards, { cwd, errors, summary }),
-      /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(
         Card,
         {
           className: "bundle-size=card",
@@ -236,39 +243,25 @@ const WebpackModulesOverallBase = ({ errors, cwd, summary, entryPoints }) => {
           tabProps: {
             size: "middle"
           },
-          children: [
-            /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Typography.Text, { code: true, children: "From: webpack-bundle-analyzer" }) }),
-            /* @__PURE__ */ jsx(
-              ServerAPIProvider,
+          children: /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetSummaryBundles, children: (data) => {
+            const computedTreeData = data.map((item) => {
+              const moduleTree = flattenTreemapData(item.modules);
+              return {
+                name: item.asset.path,
+                value: item.asset.size,
+                children: moduleTree.children
+              };
+            });
+            return /* @__PURE__ */ jsx(
+              AssetTreemapWithFilter,
               {
-                api: SDK.ServerAPI.API.GetTileReportHtml,
-                body: {},
-                children: (data) => {
-                  if (data && graphType === "tile") {
-                    return /* @__PURE__ */ jsx(
-                      "iframe",
-                      {
-                        srcDoc: data,
-                        width: "100%",
-                        height: largeCardBodyHeight,
-                        style: { border: "none" }
-                      }
-                    );
-                  }
-                  return /* @__PURE__ */ jsx(
-                    Empty,
-                    {
-                      description: /* @__PURE__ */ jsxs("div", { children: [
-                        "Tile graph is disabled,",
-                        " ",
-                        /* @__PURE__ */ jsx("a", { href: "https://rsdoctor.rs/config/options/options#generatetilegraph", children: "see the documentation to learn how to enable." })
-                      ] })
-                    }
-                  );
+                treeData: computedTreeData,
+                onChartClick: (i) => {
+                  console.log("onChartClick", i);
                 }
               }
-            )
-          ]
+            );
+          } })
         }
       ),
       /* @__PURE__ */ jsx(

package/dist/pages/BundleSize/components/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":[],"ignoreList":[],"sources":["../../../../src/pages/BundleSize/components/index.tsx"],"sourcesContent":["import {\n  CodeOutlined,\n  CodepenCircleOutlined,\n  DeploymentUnitOutlined,\n  InfoCircleOutlined,\n} from '@ant-design/icons';\nimport { Client, SDK } from '@rsdoctor/types';\nimport {\n  Button,\n  Card,\n  Col,\n  Divider,\n  Empty,\n  InputNumber,\n  Row,\n  Select,\n  Space,\n  Tag,\n  Tooltip,\n  Typography,\n} from 'antd';\nimport { debounce, includes, sumBy } from 'lodash-es';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useCodeDrawer } from '../../../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, withServerAPI } from '../../../components/Manifest';\nimport { Size } from '../../../constants';\nimport { createFileStructures, formatSize, useI18n } from '../../../utils';\nimport { GraphType } from '../constants';\nimport { AssetDetail } from './asset';\nimport { BundleCards } from './cards';\nimport styles from './index.module';\nimport './index.css';\nimport { SearchModal } from './search-modal';\n\nconst { Option } = Select;\n\nconst cardBodyHeight = 600;\n\nconst largeCardBodyHeight = 800;\n\ninterface WebpackModulesOverallProps {\n  cwd: string;\n  errors: SDK.ErrorsData;\n  summary: Client.RsdoctorClientAssetsSummary;\n  entryPoints: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetEntryPoints>;\n}\nconst tabList = [\n  {\n    key: 'tree',\n    label: (\n      <Space>\n        <Typography.Text>{'Tree Graph'}</Typography.Text>\n        <Tooltip\n          overlayStyle={{ maxWidth: 380 }}\n          overlayInnerStyle={{ marginLeft: 16, padding: 10 }}\n          color=\"white\"\n          title={\n            <Space direction=\"vertical\" color=\"white\" size=\"middle\">\n              <Row>\n                <Col>\n                  <Tag color=\"cyan\" style={{ margin: 0 }}>\n                    initial\n                  </Tag>\n                  <Typography.Text style={{ marginLeft: 4 }}>\n                    Identify whether the chunk is an initial chunk.\n                  </Typography.Text>\n                </Col>\n              </Row>\n              <Row>\n                <Col>\n                  <Tag color=\"green\" style={{ margin: 0 }}>\n                    concatenated\n                  </Tag>\n                  <Typography.Text style={{ marginLeft: 4 }}>\n                    Identify whether the module is a concatenated module\n                  </Typography.Text>\n                  <Tooltip\n                    overlayStyle={{ maxWidth: 408 }}\n                    placement=\"bottom\"\n                    color=\"white\"\n                    title={\n                      <Space direction=\"vertical\" color=\"white\">\n                        <Row>\n                          <Col>\n                            <Typography.Text strong>\n                              Concatenated Module\n                            </Typography.Text>\n                            <Typography.Text>\n                              : A performance optimization where multiple\n                              modules are merged (or \"hoisted\") into a single\n                              scope instead of wrapping each module in separate\n                              function closures. This reduces the bundle size\n                              and improves runtime performance by minimizing\n                              function call overhead.\n                            </Typography.Text>\n                          </Col>\n                        </Row>\n                      </Space>\n                    }\n                  >\n                    <InfoCircleOutlined\n                      style={{ color: 'rgba(0,0,0,.45)', marginLeft: 4 }}\n                    />\n                  </Tooltip>\n                  <Typography.Text>.</Typography.Text>\n                </Col>\n              </Row>\n              <Row>\n                <Col>\n                  <Button size=\"small\" icon={<CodepenCircleOutlined />} />\n                  <Typography.Text style={{ marginLeft: 4 }}>\n                    Open the code.\n                  </Typography.Text>\n                </Col>\n              </Row>\n              <Row>\n                <Col>\n                  <Button size=\"small\" icon={<DeploymentUnitOutlined />} />\n                  <Typography.Text style={{ marginLeft: 4 }}>\n                    View the module dependency, that is, module reasons in\n                    stats.json.\n                  </Typography.Text>\n                </Col>\n              </Row>\n              <Row>\n                <Col>\n                  <Tag color={'purple'}>{'Bundled: 15.77 KB'}</Tag>\n                  <Typography.Text>\n                    The final size of the output files after processing,\n                    bundling, and optimization. This is what is delivered to the\n                    browser.\n                  </Typography.Text>\n                </Col>\n              </Row>\n              <Row>\n                <Col>\n                  <Tag color={'orange'}>{'Source: 60.46 KB'}</Tag>\n                  <Typography.Text>\n                    The original size of your source code files before any\n                    processing or transformations. This is the raw size of your\n                    code as you wrote it.\n                  </Typography.Text>\n                </Col>\n              </Row>\n            </Space>\n          }\n        >\n          <InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />\n        </Tooltip>\n      </Space>\n    ),\n  },\n  {\n    key: 'tile',\n    label: 'Tile Graph',\n  },\n];\n\nexport const WebpackModulesOverallBase: React.FC<\n  WebpackModulesOverallProps\n> = ({ errors, cwd, summary, entryPoints }) => {\n  const [selectedEntryPoints, setEntryPoints] = useState<SDK.EntryPointData[]>(\n    [],\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 [graphType, setGraphType] = useState('tree' as GraphType);\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) => includes(ep.assets, 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 text={basename} keyword={''} className={styles.fileText} />\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\n  return (\n    <>\n      <div className=\"bundle-size-card\">\n        <BundleCards cwd={cwd} errors={errors} summary={summary} />\n        <Card\n          className=\"bundle-size=card\"\n          tabList={tabList}\n          activeTabKey={graphType as 'tree' | 'tile'}\n          onTabChange={(e) => setGraphType(e as 'tree' | 'tile')}\n          hidden={graphType === 'tree'}\n          tabProps={{\n            size: 'middle',\n          }}\n        >\n          <Row>\n            <Typography.Text code>\n              From: webpack-bundle-analyzer\n            </Typography.Text>\n          </Row>\n          <ServerAPIProvider\n            api={SDK.ServerAPI.API.GetTileReportHtml}\n            body={{}}\n          >\n            {(data) => {\n              if (data && graphType === 'tile') {\n                return (\n                  <iframe\n                    srcDoc={data}\n                    width={'100%'}\n                    height={largeCardBodyHeight}\n                    style={{ border: 'none' }}\n                  />\n                );\n              }\n              return (\n                <Empty\n                  description={\n                    <div>\n                      Tile graph is disabled,{' '}\n                      <a href=\"https://rsdoctor.rs/config/options/options#generatetilegraph\">\n                        see the documentation to learn how to enable.\n                      </a>\n                    </div>\n                  }\n                />\n              );\n            }}\n          </ServerAPIProvider>\n        </Card>\n\n        <Card\n          hidden={graphType === 'tile'}\n          tabList={tabList}\n          activeTabKey={graphType as 'tree' | 'tile'}\n          onTabChange={(e) => setGraphType(e as 'tree' | 'tile')}\n          tabProps={{\n            size: 'middle',\n          }}\n        >\n          <Space direction=\"vertical\">\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={{ minWidth: 230, width: 'auto', maxWidth: 300 }}\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\n                        style={{ fontSize: 14, color: 'inherit' }}\n                      >\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\n                        style={{ fontSize: 14, color: 'inherit' }}\n                      >\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            <Row align=\"middle\" gutter={[Size.BasePadding, Size.BasePadding]}>\n              <Col span={24}>\n                {filteredAssets.length ? (\n                  <Row gutter={Size.BasePadding}>\n                    <Col span={6}>\n                      <Card\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={{ fontSize: 12, fontWeight: 400 }}\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                        bodyStyle={{\n                          overflow: 'scroll',\n                          height: cardBodyHeight,\n                        }}\n                      >\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                      </Card>\n                    </Col>\n                    <Col span={18}>\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                              height={cardBodyHeight}\n                              moduleSizeLimit={inputModule}\n                              root={cwd}\n                            />\n                          )}\n                        </ServerAPIProvider>\n                      ) : (\n                        <Card\n                          bodyStyle={{\n                            height: cardBodyHeight,\n                          }}\n                        >\n                          <Empty\n                            description={\n                              <Typography.Text strong>\n                                Click the file path on the left to show the\n                                modules of the asset\n                              </Typography.Text>\n                            }\n                          />\n                        </Card>\n                      )}\n                    </Col>\n                  </Row>\n                ) : (\n                  <Empty />\n                )}\n              </Col>\n            </Row>\n          </Space>\n        </Card>\n      </div>\n      {codeDrawerComponent}\n    </>\n  );\n};\n\nexport const WebpackModulesOverall = withServerAPI({\n  api: SDK.ServerAPI.API.GetProjectInfo,\n  responsePropName: 'project',\n  Component: (props: {\n    project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;\n  }) => {\n    const { root, errors } = props.project;\n    return (\n      <ServerAPIProvider\n        api={SDK.ServerAPI.API.GetAssetsSummary}\n        body={{ withFileContent: true }}\n      >\n        {(summary) => {\n          return (\n            <ServerAPIProvider api={SDK.ServerAPI.API.GetEntryPoints}>\n              {(entryPoints) => (\n                <WebpackModulesOverallBase\n                  cwd={root}\n                  errors={errors}\n                  summary={summary}\n                  entryPoints={entryPoints}\n                />\n              )}\n            </ServerAPIProvider>\n          );\n        }}\n      </ServerAPIProvider>\n    );\n  },\n});\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
+{"version":3,"mappings":"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","names":[],"ignoreList":[],"sources":["../../../../src/pages/BundleSize/components/index.tsx"],"sourcesContent":["import {\n  CodeOutlined,\n  CodepenCircleOutlined,\n  DeploymentUnitOutlined,\n  InfoCircleOutlined,\n} from '@ant-design/icons';\nimport { Client, SDK } from '@rsdoctor/types';\nimport {\n  Button,\n  Card,\n  Col,\n  Divider,\n  Empty,\n  InputNumber,\n  Row,\n  Select,\n  Space,\n  Tag,\n  Tooltip,\n  Typography,\n} from 'antd';\nimport { debounce, includes, sumBy } from 'lodash-es';\nimport React, { useCallback, useEffect, useMemo, useState } from 'react';\nimport { useCodeDrawer } from '../../../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, withServerAPI } from '../../../components/Manifest';\nimport { Size } from '../../../constants';\nimport {\n  createFileStructures,\n  flattenTreemapData,\n  formatSize,\n  useI18n,\n} from '../../../utils';\nimport { GraphType } from '../constants';\nimport { AssetDetail } from './asset';\nimport { BundleCards } from './cards';\nimport styles from './index.module';\nimport './index.css';\nimport { SearchModal } from './search-modal';\nimport {\n  AssetTreemapWithFilter,\n  TreeNode,\n} from '../../../components/Charts/TreeMap';\n\nconst { Option } = Select;\n\nconst cardBodyHeight = 600;\n\ninterface WebpackModulesOverallProps {\n  cwd: string;\n  errors: SDK.ErrorsData;\n  summary: Client.RsdoctorClientAssetsSummary;\n  entryPoints: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetEntryPoints>;\n}\nconst tabList = [\n  {\n    key: 'tree',\n    label: (\n      <Space>\n        <Typography.Text>{'Tree Graph'}</Typography.Text>\n        <Tooltip\n          overlayStyle={{ maxWidth: 380 }}\n          overlayInnerStyle={{ marginLeft: 16, padding: 10 }}\n          color=\"white\"\n          title={\n            <Space direction=\"vertical\" color=\"white\" size=\"middle\">\n              <Row>\n                <Col>\n                  <Tag color=\"cyan\" style={{ margin: 0 }}>\n                    initial\n                  </Tag>\n                  <Typography.Text style={{ marginLeft: 4 }}>\n                    Identify whether the chunk is an initial chunk.\n                  </Typography.Text>\n                </Col>\n              </Row>\n              <Row>\n                <Col>\n                  <Tag color=\"green\" style={{ margin: 0 }}>\n                    concatenated\n                  </Tag>\n                  <Typography.Text style={{ marginLeft: 4 }}>\n                    Identify whether the module is a concatenated module\n                  </Typography.Text>\n                  <Tooltip\n                    overlayStyle={{ maxWidth: 408 }}\n                    placement=\"bottom\"\n                    color=\"white\"\n                    title={\n                      <Space direction=\"vertical\" color=\"white\">\n                        <Row>\n                          <Col>\n                            <Typography.Text strong>\n                              Concatenated Module\n                            </Typography.Text>\n                            <Typography.Text>\n                              : A performance optimization where multiple\n                              modules are merged (or \"hoisted\") into a single\n                              scope instead of wrapping each module in separate\n                              function closures. This reduces the bundle size\n                              and improves runtime performance by minimizing\n                              function call overhead.\n                            </Typography.Text>\n                          </Col>\n                        </Row>\n                      </Space>\n                    }\n                  >\n                    <InfoCircleOutlined\n                      style={{ color: 'rgba(0,0,0,.45)', marginLeft: 4 }}\n                    />\n                  </Tooltip>\n                  <Typography.Text>.</Typography.Text>\n                </Col>\n              </Row>\n              <Row>\n                <Col>\n                  <Button size=\"small\" icon={<CodepenCircleOutlined />} />\n                  <Typography.Text style={{ marginLeft: 4 }}>\n                    Open the code.\n                  </Typography.Text>\n                </Col>\n              </Row>\n              <Row>\n                <Col>\n                  <Button size=\"small\" icon={<DeploymentUnitOutlined />} />\n                  <Typography.Text style={{ marginLeft: 4 }}>\n                    View the module dependency, that is, module reasons in\n                    stats.json.\n                  </Typography.Text>\n                </Col>\n              </Row>\n              <Row>\n                <Col>\n                  <Tag color={'purple'}>{'Bundled: 15.77 KB'}</Tag>\n                  <Typography.Text>\n                    The final size of the output files after processing,\n                    bundling, and optimization. This is what is delivered to the\n                    browser.\n                  </Typography.Text>\n                </Col>\n              </Row>\n              <Row>\n                <Col>\n                  <Tag color={'orange'}>{'Source: 60.46 KB'}</Tag>\n                  <Typography.Text>\n                    The original size of your source code files before any\n                    processing or transformations. This is the raw size of your\n                    code as you wrote it.\n                  </Typography.Text>\n                </Col>\n              </Row>\n            </Space>\n          }\n        >\n          <InfoCircleOutlined style={{ color: 'rgba(0,0,0,.45)' }} />\n        </Tooltip>\n      </Space>\n    ),\n  },\n  {\n    key: 'tile',\n    label: 'Tile Graph',\n  },\n];\n\nexport const WebpackModulesOverallBase: React.FC<\n  WebpackModulesOverallProps\n> = ({ errors, cwd, summary, entryPoints }) => {\n  const [selectedEntryPoints, setEntryPoints] = useState<SDK.EntryPointData[]>(\n    [],\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 [graphType, setGraphType] = useState('tree' as GraphType);\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) => includes(ep.assets, 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 text={basename} keyword={''} className={styles.fileText} />\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\n  return (\n    <>\n      <div className=\"bundle-size-card\">\n        <BundleCards cwd={cwd} errors={errors} summary={summary} />\n        <Card\n          className=\"bundle-size=card\"\n          tabList={tabList}\n          activeTabKey={graphType as 'tree' | 'tile'}\n          onTabChange={(e) => setGraphType(e as 'tree' | 'tile')}\n          hidden={graphType === 'tree'}\n          tabProps={{\n            size: 'middle',\n          }}\n        >\n          <ServerAPIProvider api={SDK.ServerAPI.API.GetSummaryBundles}>\n            {(data) => {\n              const computedTreeData: TreeNode[] = data.map((item) => {\n                const moduleTree = flattenTreemapData(item.modules);\n                return {\n                  name: item.asset.path,\n                  value: item.asset.size,\n                  children: moduleTree.children,\n                };\n              });\n              return (\n                <AssetTreemapWithFilter\n                  treeData={computedTreeData}\n                  onChartClick={(i) => {\n                    console.log('onChartClick', i);\n                  }}\n                />\n              );\n            }}\n          </ServerAPIProvider>\n        </Card>\n\n        <Card\n          hidden={graphType === 'tile'}\n          tabList={tabList}\n          activeTabKey={graphType as 'tree' | 'tile'}\n          onTabChange={(e) => setGraphType(e as 'tree' | 'tile')}\n          tabProps={{\n            size: 'middle',\n          }}\n        >\n          <Space direction=\"vertical\">\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={{ minWidth: 230, width: 'auto', maxWidth: 300 }}\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\n                        style={{ fontSize: 14, color: 'inherit' }}\n                      >\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\n                        style={{ fontSize: 14, color: 'inherit' }}\n                      >\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            <Row align=\"middle\" gutter={[Size.BasePadding, Size.BasePadding]}>\n              <Col span={24}>\n                {filteredAssets.length ? (\n                  <Row gutter={Size.BasePadding}>\n                    <Col span={6}>\n                      <Card\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={{ fontSize: 12, fontWeight: 400 }}\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                        bodyStyle={{\n                          overflow: 'scroll',\n                          height: cardBodyHeight,\n                        }}\n                      >\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                      </Card>\n                    </Col>\n                    <Col span={18}>\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                              height={cardBodyHeight}\n                              moduleSizeLimit={inputModule}\n                              root={cwd}\n                            />\n                          )}\n                        </ServerAPIProvider>\n                      ) : (\n                        <Card\n                          bodyStyle={{\n                            height: cardBodyHeight,\n                          }}\n                        >\n                          <Empty\n                            description={\n                              <Typography.Text strong>\n                                Click the file path on the left to show the\n                                modules of the asset\n                              </Typography.Text>\n                            }\n                          />\n                        </Card>\n                      )}\n                    </Col>\n                  </Row>\n                ) : (\n                  <Empty />\n                )}\n              </Col>\n            </Row>\n          </Space>\n        </Card>\n      </div>\n      {codeDrawerComponent}\n    </>\n  );\n};\n\nexport const WebpackModulesOverall = withServerAPI({\n  api: SDK.ServerAPI.API.GetProjectInfo,\n  responsePropName: 'project',\n  Component: (props: {\n    project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;\n  }) => {\n    const { root, errors } = props.project;\n    return (\n      <ServerAPIProvider\n        api={SDK.ServerAPI.API.GetAssetsSummary}\n        body={{ withFileContent: true }}\n      >\n        {(summary) => {\n          return (\n            <ServerAPIProvider api={SDK.ServerAPI.API.GetEntryPoints}>\n              {(entryPoints) => (\n                <WebpackModulesOverallBase\n                  cwd={root}\n                  errors={errors}\n                  summary={summary}\n                  entryPoints={entryPoints}\n                />\n              )}\n            </ServerAPIProvider>\n          );\n        }}\n      </ServerAPIProvider>\n    );\n  },\n});\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/pages/BundleSize/components/index_module.css

@@ -112,4 +112,8 @@
 .search-modal-list_0b14c .ant-spin-container {
   overflow: auto;
   max-height: 30rem;
+}
+.search-modal-list_0b14c .search-list-item.clickable:hover {
+  background-color: #eee;
+  cursor: pointer;
 }

package/dist/pages/BundleSize/components/search-modal.d.ts

@@ -1,2 +1,8 @@
 import React from 'react';
-export declare const SearchModal: React.FC;
+export declare const SearchModal: React.FC<{
+    onModuleClick?: (module: any) => void;
+    onClose?: () => void;
+    open?: boolean;
+    setOpen?: (open: boolean) => void;
+    isIcon?: boolean;
+}>;

package/dist/pages/BundleSize/components/search-modal.js

@@ -13,11 +13,20 @@ import {
 import { ServerAPIProvider } from "../../../components";
 import { SDK } from "@rsdoctor/types";
 import styles from "./index.module";
+import { SearchOutlined } from "@ant-design/icons";
 const { Search } = Input;
-const SearchModal = () => {
+const SearchModal = ({
+  onModuleClick = void 0,
+  onClose,
+  open,
+  setOpen,
+  isIcon = false
+}) => {
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [searchModule, setSearchModule] = useState("");
   const [searchChunk, setSearchChunk] = useState("");
+  const modalOpen = open !== void 0 ? open : isModalOpen;
+  const setModalOpen = setOpen || setIsModalOpen;
   const onSearch = useCallback(
     (...args) => {
       const [value, _event] = args;
@@ -26,16 +35,26 @@ const SearchModal = () => {
     []
   );
   const showModal = () => {
-    setIsModalOpen(true);
+    setModalOpen(true);
   };
   const handleOk = () => {
-    setIsModalOpen(false);
+    setModalOpen(false);
+    onClose?.();
   };
   const handleCancel = () => {
-    setIsModalOpen(false);
+    setModalOpen(false);
+    onClose?.();
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Button, { className: styles["search-btn"], color: "cyan", onClick: showModal, children: "Search Module" }),
+    isIcon ? /* @__PURE__ */ jsx(SearchOutlined, { onClick: showModal }) : /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: styles["search-btn"],
+        color: "cyan",
+        onClick: showModal,
+        children: "Search Module"
+      }
+    ),
     /* @__PURE__ */ jsx(
       ServerAPIProvider,
       {
@@ -50,7 +69,7 @@ const SearchModal = () => {
               title: "Search Modules",
               onOk: handleOk,
               onCancel: handleCancel,
-              open: isModalOpen,
+              open: modalOpen,
               width: "65rem",
               footer: "",
               children: [
@@ -76,7 +95,12 @@ const SearchModal = () => {
                         key: id,
                         children: ModulesModal(
                           searchModule,
-                          searchChunk || defaultChunkId
+                          searchChunk || defaultChunkId,
+                          (item) => {
+                            onModuleClick?.(item);
+                            setModalOpen(false);
+                            onClose?.();
+                          }
                         )
                       };
                     })
@@ -90,7 +114,7 @@ const SearchModal = () => {
     )
   ] });
 };
-const ModulesModal = (searchModule, chunk) => {
+const ModulesModal = (searchModule, chunk, onModuleClick) => {
   return /* @__PURE__ */ jsx(
     ServerAPIProvider,
     {
@@ -106,30 +130,37 @@ const ModulesModal = (searchModule, chunk) => {
           dataSource: modules,
           renderItem: (item) => {
             const itemPathArr = item.relativePath.split(searchModule);
-            return /* @__PURE__ */ jsx(List.Item, { children: /* @__PURE__ */ jsx(Skeleton, { avatar: true, title: false, loading: !item.path, active: true, children: /* @__PURE__ */ jsx(
-              List.Item.Meta,
+            return /* @__PURE__ */ jsx(
+              List.Item,
               {
-                description: /* @__PURE__ */ jsxs(Fragment, { children: [
-                  /* @__PURE__ */ jsx(Typography.Text, { code: true, children: "Module:" }),
-                  itemPathArr.map((cur, index) => {
-                    if (index < itemPathArr.length - 1) {
-                      return /* @__PURE__ */ jsxs(Typography.Text, { style: { fontWeight: 200 }, children: [
-                        cur,
-                        /* @__PURE__ */ jsx(
-                          Typography.Text,
-                          {
-                            strong: true,
-                            style: { fontWeight: 600 },
-                            children: searchModule
-                          }
-                        )
-                      ] });
-                    }
-                    return /* @__PURE__ */ jsx(Typography.Text, { style: { fontWeight: 200 }, children: cur });
-                  })
-                ] })
+                className: onModuleClick ? "search-list-item clickable" : "search-list-item",
+                onClick: onModuleClick ? () => onModuleClick(item) : void 0,
+                children: /* @__PURE__ */ jsx(Skeleton, { avatar: true, title: false, loading: !item.path, active: true, children: /* @__PURE__ */ jsx(
+                  List.Item.Meta,
+                  {
+                    description: /* @__PURE__ */ jsxs(Fragment, { children: [
+                      /* @__PURE__ */ jsx(Typography.Text, { code: true, children: "Module:" }),
+                      itemPathArr.map((cur, index) => {
+                        if (index < itemPathArr.length - 1) {
+                          return /* @__PURE__ */ jsxs(Typography.Text, { style: { fontWeight: 200 }, children: [
+                            cur,
+                            /* @__PURE__ */ jsx(
+                              Typography.Text,
+                              {
+                                strong: true,
+                                style: { fontWeight: 600 },
+                                children: searchModule
+                              }
+                            )
+                          ] });
+                        }
+                        return /* @__PURE__ */ jsx(Typography.Text, { style: { fontWeight: 200 }, children: cur });
+                      })
+                    ] })
+                  }
+                ) })
               }
-            ) }) });
+            );
           }
         }
       ) : /* @__PURE__ */ jsx(Empty, {}) })

package/dist/pages/BundleSize/components/search-modal.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":[],"ignoreList":[],"sources":["../../../../src/pages/BundleSize/components/search-modal.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport {\n  Button,\n  Modal,\n  Input,\n  Tabs,\n  List,\n  Skeleton,\n  Typography,\n  Empty,\n} from 'antd';\nimport { SearchProps } from 'antd/es/input';\nimport { ServerAPIProvider } from '../../../components';\nimport { SDK } from '@rsdoctor/types';\nimport styles from './index.module';\n\nconst { Search } = Input;\n\ntype OnSearchParams = Parameters<NonNullable<SearchProps['onSearch']>>;\n\nexport const SearchModal: React.FC = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [searchModule, setSearchModule] = useState('');\n  const [searchChunk, setSearchChunk] = useState('');\n\n  const onSearch: SearchProps['onSearch'] = useCallback(\n    (...args: OnSearchParams) => {\n      const [value, _event] = args;\n      setSearchModule(value);\n    },\n    [],\n  );\n\n  const showModal = () => {\n    setIsModalOpen(true);\n  };\n\n  const handleOk = () => {\n    setIsModalOpen(false);\n  };\n\n  const handleCancel = () => {\n    setIsModalOpen(false);\n  };\n\n  return (\n    <>\n      <Button className={styles['search-btn']} color=\"cyan\" onClick={showModal}>\n        Search Module\n      </Button>\n\n      <ServerAPIProvider\n        api={SDK.ServerAPI.API.GetSearchModules}\n        body={{ moduleName: String(searchModule) }}\n      >\n        {(assetsChunksList) => {\n          const defaultChunkId = Object.keys(assetsChunksList)[0];\n          return (\n            <>\n              <Modal\n                className={styles.modal}\n                title=\"Search Modules\"\n                onOk={handleOk}\n                onCancel={handleCancel}\n                open={isModalOpen}\n                width={'65rem'}\n                footer=\"\"\n              >\n                <Search\n                  placeholder=\"input search module name\"\n                  allowClear\n                  onSearch={onSearch}\n                  style={{ width: 500 }}\n                />\n                {defaultChunkId ? (\n                  <Tabs\n                    defaultActiveKey={defaultChunkId}\n                    tabPosition={'top'}\n                    onChange={(value) => setSearchChunk(value)}\n                    items={Object.keys(assetsChunksList).map((chunk, _i) => {\n                      const id = chunk;\n                      return {\n                        label: assetsChunksList[chunk],\n                        key: id,\n                        children: ModulesModal(\n                          searchModule,\n                          searchChunk || defaultChunkId,\n                        ),\n                      };\n                    })}\n                  />\n                ) : (\n                  <Empty description={'No modules found.'} />\n                )}\n              </Modal>\n            </>\n          );\n        }}\n      </ServerAPIProvider>\n    </>\n  );\n};\n\nconst ModulesModal = (searchModule: string, chunk: string) => {\n  return (\n    <ServerAPIProvider\n      api={SDK.ServerAPI.API.GetSearchModuleInChunk}\n      body={{ moduleName: String(searchModule), chunk }}\n    >\n      {(modules) => (\n        <>\n          {modules?.length !== 0 ? (\n            <List\n              className={styles['search-modal-list']}\n              loading={!modules.length}\n              itemLayout=\"horizontal\"\n              pagination={{ position: 'bottom', align: 'center' }}\n              dataSource={modules}\n              renderItem={(item) => {\n                const itemPathArr = item.relativePath.split(searchModule);\n                return (\n                  <List.Item>\n                    <Skeleton avatar title={false} loading={!item.path} active>\n                      <List.Item.Meta\n                        description={\n                          <>\n                            <Typography.Text code>{'Module:'}</Typography.Text>\n                            {itemPathArr.map((cur, index) => {\n                              if (index < itemPathArr.length - 1) {\n                                return (\n                                  <Typography.Text style={{ fontWeight: 200 }}>\n                                    {cur}\n                                    <Typography.Text\n                                      strong\n                                      style={{ fontWeight: 600 }}\n                                    >\n                                      {searchModule}\n                                    </Typography.Text>\n                                  </Typography.Text>\n                                );\n                              }\n                              return (\n                                <Typography.Text style={{ fontWeight: 200 }}>\n                                  {cur}\n                                </Typography.Text>\n                              );\n                            })}\n                          </>\n                        }\n                      />\n                    </Skeleton>\n                  </List.Item>\n                );\n              }}\n            />\n          ) : (\n            <Empty />\n          )}\n        </>\n      )}\n    </ServerAPIProvider>\n  );\n};\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}
+{"version":3,"mappings":"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","names":[],"ignoreList":[],"sources":["../../../../src/pages/BundleSize/components/search-modal.tsx"],"sourcesContent":["import React, { useCallback, useState } from 'react';\nimport {\n  Button,\n  Modal,\n  Input,\n  Tabs,\n  List,\n  Skeleton,\n  Typography,\n  Empty,\n} from 'antd';\nimport { SearchProps } from 'antd/es/input';\nimport { ServerAPIProvider } from '../../../components';\nimport { SDK } from '@rsdoctor/types';\nimport styles from './index.module';\nimport { SearchOutlined } from '@ant-design/icons';\n\nconst { Search } = Input;\n\ntype OnSearchParams = Parameters<NonNullable<SearchProps['onSearch']>>;\n\nexport const SearchModal: React.FC<{\n  onModuleClick?: (module: any) => void;\n  onClose?: () => void;\n  open?: boolean;\n  setOpen?: (open: boolean) => void;\n  isIcon?: boolean;\n}> = ({\n  onModuleClick = undefined,\n  onClose,\n  open,\n  setOpen,\n  isIcon = false,\n}) => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [searchModule, setSearchModule] = useState('');\n  const [searchChunk, setSearchChunk] = useState('');\n\n  const modalOpen = open !== undefined ? open : isModalOpen;\n  const setModalOpen = setOpen || setIsModalOpen;\n\n  const onSearch: SearchProps['onSearch'] = useCallback(\n    (...args: OnSearchParams) => {\n      const [value, _event] = args;\n      setSearchModule(value);\n    },\n    [],\n  );\n\n  const showModal = () => {\n    setModalOpen(true);\n  };\n\n  const handleOk = () => {\n    setModalOpen(false);\n    onClose?.();\n  };\n\n  const handleCancel = () => {\n    setModalOpen(false);\n    onClose?.();\n  };\n\n  return (\n    <>\n      {isIcon ? (\n        <SearchOutlined onClick={showModal} />\n      ) : (\n        <Button\n          className={styles['search-btn']}\n          color=\"cyan\"\n          onClick={showModal}\n        >\n          Search Module\n        </Button>\n      )}\n\n      <ServerAPIProvider\n        api={SDK.ServerAPI.API.GetSearchModules}\n        body={{ moduleName: String(searchModule) }}\n      >\n        {(assetsChunksList) => {\n          const defaultChunkId = Object.keys(assetsChunksList)[0];\n          return (\n            <>\n              <Modal\n                className={styles.modal}\n                title=\"Search Modules\"\n                onOk={handleOk}\n                onCancel={handleCancel}\n                open={modalOpen}\n                width={'65rem'}\n                footer=\"\"\n              >\n                <Search\n                  placeholder=\"input search module name\"\n                  allowClear\n                  onSearch={onSearch}\n                  style={{ width: 500 }}\n                />\n                {defaultChunkId ? (\n                  <Tabs\n                    defaultActiveKey={defaultChunkId}\n                    tabPosition={'top'}\n                    onChange={(value) => setSearchChunk(value)}\n                    items={Object.keys(assetsChunksList).map((chunk, _i) => {\n                      const id = chunk;\n                      return {\n                        label: assetsChunksList[chunk],\n                        key: id,\n                        children: ModulesModal(\n                          searchModule,\n                          searchChunk || defaultChunkId,\n                          (item) => {\n                            onModuleClick?.(item);\n                            setModalOpen(false);\n                            onClose?.();\n                          },\n                        ),\n                      };\n                    })}\n                  />\n                ) : (\n                  <Empty description={'No modules found.'} />\n                )}\n              </Modal>\n            </>\n          );\n        }}\n      </ServerAPIProvider>\n    </>\n  );\n};\n\nconst ModulesModal = (\n  searchModule: string,\n  chunk: string,\n  onModuleClick?: (module: any) => void | undefined,\n) => {\n  return (\n    <ServerAPIProvider\n      api={SDK.ServerAPI.API.GetSearchModuleInChunk}\n      body={{ moduleName: String(searchModule), chunk }}\n    >\n      {(modules) => (\n        <>\n          {modules?.length !== 0 ? (\n            <List\n              className={styles['search-modal-list']}\n              loading={!modules.length}\n              itemLayout=\"horizontal\"\n              pagination={{ position: 'bottom', align: 'center' }}\n              dataSource={modules}\n              renderItem={(item) => {\n                const itemPathArr = item.relativePath.split(searchModule);\n                return (\n                  <List.Item\n                    className={\n                      onModuleClick\n                        ? 'search-list-item clickable'\n                        : 'search-list-item'\n                    }\n                    onClick={\n                      onModuleClick ? () => onModuleClick(item) : undefined\n                    }\n                  >\n                    <Skeleton avatar title={false} loading={!item.path} active>\n                      <List.Item.Meta\n                        description={\n                          <>\n                            <Typography.Text code>{'Module:'}</Typography.Text>\n                            {itemPathArr.map((cur, index) => {\n                              if (index < itemPathArr.length - 1) {\n                                return (\n                                  <Typography.Text style={{ fontWeight: 200 }}>\n                                    {cur}\n                                    <Typography.Text\n                                      strong\n                                      style={{ fontWeight: 600 }}\n                                    >\n                                      {searchModule}\n                                    </Typography.Text>\n                                  </Typography.Text>\n                                );\n                              }\n                              return (\n                                <Typography.Text style={{ fontWeight: 200 }}>\n                                  {cur}\n                                </Typography.Text>\n                              );\n                            })}\n                          </>\n                        }\n                      />\n                    </Skeleton>\n                  </List.Item>\n                );\n              }}\n            />\n          ) : (\n            <Empty />\n          )}\n        </>\n      )}\n    </ServerAPIProvider>\n  );\n};\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJtYXBwaW5ncyI6IiIsIm5hbWVzIjpbXSwiaWdub3JlTGlzdCI6W10sInNvdXJjZXMiOltdLCJzb3VyY2VzQ29udGVudCI6W119"]}

package/dist/utils/file.d.ts

@@ -1,4 +1,4 @@
-import { Common } from '@rsdoctor/types';
+import { Common, SDK } from '@rsdoctor/types';
 import { TreeNodeProps, UploadFile } from 'antd';
 import { FieldDataNode } from 'rc-tree';
 export type DataNode = FieldDataNode<{
@@ -32,3 +32,15 @@ export declare function beautifyModulePath(modulePath: string, cwd: string): {
     inNodeModules: boolean;
 };
 export declare function getFileIcon(props: TreeNodeProps, addRowIcon?: boolean): import("react/jsx-runtime").JSX.Element;
+type TreeNode = {
+    name: string;
+    value?: number;
+    children?: TreeNode[];
+    path?: string;
+    sourceSize?: number;
+    bundledSize?: number;
+    _map?: Map<string, TreeNode>;
+};
+export declare function buildTreemapData(modules: SDK.ModuleData[], rootName?: string): TreeNode;
+export declare function flattenTreemapData(modules: SDK.ModuleData[], rootName?: string): TreeNode;
+export {};

package/dist/utils/file.js

@@ -177,11 +177,89 @@ function getFileIcon(props, addRowIcon = true) {
   }
   return /* @__PURE__ */ jsx(FileOutlined, {});
 }
+function buildTreemapData(modules, rootName = "dist") {
+  const root = { name: rootName, children: [], _map: /* @__PURE__ */ new Map() };
+  for (const mod of modules) {
+    const parts = mod.path.split(/[\\/]/).filter(Boolean);
+    let current = root;
+    for (let i = 0; i < parts.length; i++) {
+      const part = parts[i];
+      if (i === parts.length - 1) {
+        if (!current.children)
+          current.children = [];
+        current.children.push({
+          name: part,
+          path: mod.path,
+          sourceSize: mod.size?.sourceSize ?? 0,
+          bundledSize: mod.size?.parsedSize ?? 0
+        });
+      } else {
+        if (!current._map)
+          current._map = /* @__PURE__ */ new Map();
+        let child = current._map.get(part);
+        if (!child) {
+          child = { name: part, children: [], _map: /* @__PURE__ */ new Map() };
+          current.children.push(child);
+          current._map.set(part, child);
+        }
+        current = child;
+      }
+    }
+  }
+  function clean(node) {
+    delete node._map;
+    if (node.children)
+      node.children.forEach(clean);
+  }
+  clean(root);
+  return root;
+}
+function flattenSingleChildDirs(node) {
+  if (!node.children || node.children.length === 0)
+    return node;
+  let current = node;
+  while (current.children && current.children.length === 1 && !current.children[0].sourceSize) {
+    current = {
+      name: current.name + "/" + current.children[0].name,
+      children: current.children[0].children
+    };
+  }
+  if (current.children) {
+    current.children = current.children.map(flattenSingleChildDirs);
+  }
+  return current;
+}
+function sumDirValue(node) {
+  if (!node.children || node.children.length === 0) {
+    return {
+      sourceSize: node.sourceSize ?? 0,
+      bundledSize: node.bundledSize ?? 0
+    };
+  }
+  let sourceSum = 0;
+  let bundledSum = 0;
+  for (const child of node.children) {
+    const { sourceSize, bundledSize } = sumDirValue(child);
+    sourceSum += sourceSize;
+    bundledSum += bundledSize;
+  }
+  node.sourceSize = sourceSum;
+  node.bundledSize = bundledSum;
+  return { sourceSize: sourceSum, bundledSize: bundledSum };
+}
+function flattenTreemapData(modules, rootName = "dist") {
+  const rawTree = buildTreemapData(modules, rootName);
+  const flattenedTree = flattenSingleChildDirs(rawTree);
+  sumDirValue(flattenedTree);
+  return flattenedTree;
+}
 export {
   beautifyModulePath,
   beautifyPath,
+  buildTreemapData,
   createFileStructures,
   flattenDirectory,
+  flattenTreemapData,
   getFileIcon,
   mapFileKey,
   readJSONByFileReader,