@rsdoctor/components 0.0.0-next-20240620044732

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

@@ -0,0 +1,38 @@
+import { jsx } from "react/jsx-runtime";
+import { LoadingOutlined } from "@ant-design/icons";
+import Editor from "@monaco-editor/react";
+import { Card } from "antd";
+import { getOriginalLanguage, getShortPath } from "../../../utils";
+function CodeEditor(props) {
+  const { content, path } = props;
+  if (!content) {
+    return /* @__PURE__ */ jsx("div", { children: "No Code~" });
+  }
+  return /* @__PURE__ */ jsx(Card, { title: getShortPath(path), className: "bundle-size-editor", style: { height: "90%" }, children: /* @__PURE__ */ jsx(
+    Editor,
+    {
+      theme: "vs-dark",
+      language: getOriginalLanguage(path),
+      value: content,
+      loading: /* @__PURE__ */ jsx(LoadingOutlined, { style: { fontSize: 30, height: "8em" } }),
+      options: {
+        readOnly: true,
+        domReadOnly: true,
+        fontSize: 12,
+        renderValidationDecorations: "off",
+        hideCursorInOverviewRuler: true,
+        smoothScrolling: true,
+        wordWrap: "bounded",
+        colorDecorators: true,
+        codeLens: false,
+        cursorWidth: 0,
+        minimap: {
+          enabled: false
+        }
+      }
+    }
+  ) });
+}
+export {
+  CodeEditor
+};

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

@@ -0,0 +1,20 @@
+.monaco-hover .markdown-hover.hover-row hr {
+  margin: 2px;
+  background-color: gray;
+}
+.bundle-size-editor {
+  margin-left: 40px;
+  flex-grow: 1;
+  height: 700px;
+}
+.bundle-size-editor .ant-card-body {
+  width: auto;
+  height: calc(100% - 48px);
+  padding: 0;
+}
+.bundle-size-module-bunton {
+  margin-left: 4em;
+}
+.ant-tabs-nav {
+  width: 100%;
+}

package/dist/pages/BundleSize/components/index.d.ts

@@ -0,0 +1,16 @@
+import { Client, SDK } from '@rsdoctor/types';
+import React from 'react';
+import './index.sass';
+interface WebpackModulesOverallProps {
+    cwd: string;
+    errors: SDK.ErrorsData;
+    summary: Client.RsdoctorClientAssetsSummary;
+    entryPoints: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetEntryPoints>;
+}
+export declare const WebpackModulesOverallBase: React.FC<WebpackModulesOverallProps>;
+export declare const WebpackModulesOverall: React.FC<Omit<{
+    project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;
+}, "project"> & Partial<{
+    body?: any;
+}>>;
+export {};

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

@@ -0,0 +1,366 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CodepenCircleOutlined, ColumnHeightOutlined, DeploymentUnitOutlined, InfoCircleOutlined, VerticalAlignMiddleOutlined } from "@ant-design/icons";
+import { SDK } from "@rsdoctor/types";
+import {
+  Button,
+  Card,
+  Col,
+  Divider,
+  Empty,
+  InputNumber,
+  Radio,
+  Row,
+  Select,
+  Space,
+  Tag,
+  Tooltip,
+  Typography
+} from "antd";
+import { debounce, includes, sumBy } from "lodash-es";
+import React, { useCallback, useMemo, useState } from "react";
+import { ServerAPIProvider, withServerAPI } from "../../../components/Manifest";
+import { Badge as Bdg } from "../../../components/Badge";
+import { FileTree } from "../../../components/FileTree";
+import { KeywordInput } from "../../../components/Form/keyword";
+import { Keyword } from "../../../components/Keyword";
+import { Title } from "../../../components/Title";
+import { Size } from "../../../constants";
+import { createFileStructures, formatSize, useI18n } from "../../../utils";
+import { BundleCards } from "./cards";
+import { CodeViewerWithDrawer } from "../../../components/CodeViewer";
+import { AssetDetail } from "./asset";
+import "./index.css";
+const { Option } = Select;
+const cardBodyHeight = 410;
+const largeCardBodyHeight = 800;
+const WebpackModulesOverallBase = ({
+  errors,
+  cwd,
+  summary,
+  entryPoints
+}) => {
+  const [selectedEntryPoints, setEntryPoints] = useState([]);
+  const [inputModule, setModuleValue] = useState(0);
+  const [inputAssetName, setAssetName] = useState("");
+  const [inputAssetSize, setAssetSize] = useState(0);
+  const [defaultExpandAll, setDefaultExpandAll] = useState(false);
+  const [inputModuleUnit, setModuleUnit] = useState("");
+  const [inputChunkUnit, setChunkUnit] = useState("");
+  const [assetPath, setAssetPath] = useState(null);
+  const [fold, setFold] = useState(false);
+  const [graphType, setGraphType] = useState("tree");
+  const { t } = useI18n();
+  const assets = summary.all.total.files;
+  const handleChange = useCallback(
+    (type) => (value) => {
+      if (type === "module") {
+        setModuleUnit(value);
+      } else if (type === "chunk") {
+        setChunkUnit(value);
+      }
+    },
+    []
+  );
+  const selectAfter = (type) => /* @__PURE__ */ jsxs(Select, { defaultValue: "kb", onChange: handleChange(type), children: [
+    /* @__PURE__ */ jsx(Option, { value: "kb", children: "KB" }),
+    /* @__PURE__ */ jsx(Option, { value: "mb", children: "MB" })
+  ] });
+  const onChangeModule = useCallback(
+    debounce((newValue) => {
+      const count = inputModuleUnit === "mb" ? newValue * 1024 * 1024 : newValue * 1024;
+      setModuleValue(count);
+    }, 300),
+    []
+  );
+  const onChangeAsset = useCallback(
+    debounce((newValue) => {
+      const count = inputChunkUnit === "mb" ? newValue * 1024 * 1024 : newValue * 1024;
+      setAssetSize(count);
+    }, 300),
+    []
+  );
+  const filteredAssets = useMemo(() => {
+    let res = assets.slice();
+    if (inputAssetName) {
+      res = res.filter((e) => e.path.indexOf(inputAssetName) > -1);
+    }
+    if (inputAssetSize > 0) {
+      res = res.filter((e) => e.size >= inputAssetSize);
+    }
+    if (selectedEntryPoints.length) {
+      res = res.filter((e) => {
+        if (selectedEntryPoints.some((ep) => includes(ep.assets, e.path))) {
+          return true;
+        }
+        return false;
+      });
+    }
+    return res.sort((a, b) => {
+      const _a = a.path.indexOf("/") > -1 ? 1 : 0;
+      const _b = b.path.indexOf("/") > -1 ? 1 : 0;
+      return _b - _a;
+    });
+  }, [assets, selectedEntryPoints, inputAssetName, inputAssetSize]);
+  const assetsStructures = useMemo(() => {
+    const res = createFileStructures({
+      files: filteredAssets.map((e) => e.path).filter(Boolean),
+      fileTitle(file, basename) {
+        const target = filteredAssets.find((e) => e.path === file);
+        const { size, initial, path, content } = target;
+        return /* @__PURE__ */ jsxs(
+          Space,
+          {
+            onClick: () => {
+              setAssetPath(path);
+            },
+            children: [
+              /* @__PURE__ */ jsx(Keyword, { text: basename, keyword: inputAssetName }),
+              /* @__PURE__ */ jsx(Tag, { color: "success", style: { margin: 0 }, children: formatSize(size) }),
+              initial ? /* @__PURE__ */ jsx(Tag, { color: "cyan", style: { margin: 0 }, children: "initial" }) : null,
+              /* @__PURE__ */ jsx(
+                CodeViewerWithDrawer,
+                {
+                  path,
+                  content,
+                  editorConfig: { readOnly: false, domReadOnly: false }
+                }
+              )
+            ]
+          }
+        );
+      }
+    });
+    return res;
+  }, [filteredAssets]);
+  const onSearch = (value) => {
+    setAssetName(value);
+    setDefaultExpandAll(false);
+  };
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsx(BundleCards, { cwd, errors, summary }),
+    /* @__PURE__ */ jsxs(
+      Radio.Group,
+      {
+        value: graphType,
+        onChange: (e) => setGraphType(e.target.value),
+        style: { marginBottom: Size.BasePadding },
+        buttonStyle: "solid",
+        optionType: "button",
+        children: [
+          /* @__PURE__ */ jsx(Radio.Button, { value: "tree", children: "Tree Graph" }),
+          /* @__PURE__ */ jsx(Radio.Button, { value: "tile", children: "Bundle Analyzer Graph" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Card,
+      {
+        hidden: graphType === "tree",
+        title: /* @__PURE__ */ jsx(Space, { children: /* @__PURE__ */ jsx(Title, { text: "From: Webpack Bundle Analyzer" }) }),
+        children: /* @__PURE__ */ jsx(ServerAPIProvider, { 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, {});
+        } })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Card,
+      {
+        hidden: graphType === "tile",
+        title: /* @__PURE__ */ jsxs(Space, { children: [
+          /* @__PURE__ */ jsx(Title, { text: "Bundle Analysis" }),
+          /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              color: "white",
+              title: /* @__PURE__ */ jsxs(Space, { direction: "vertical", color: "white", children: [
+                /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsxs(Col, { children: [
+                  /* @__PURE__ */ jsx(Tag, { color: "cyan", style: { margin: 0 }, children: "initial" }),
+                  /* @__PURE__ */ jsx(Typography.Text, { children: ": Indignify whether the chunk is the initial chunk." })
+                ] }) }),
+                /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsxs(Col, { children: [
+                  /* @__PURE__ */ jsx(Tag, { color: "green", children: "concatenated" }),
+                  /* @__PURE__ */ jsx(Typography.Text, { children: ": Indignify whether the module is the concatenated module.  " }),
+                  /* @__PURE__ */ jsx("br", {}),
+                  /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Concatenated Module:" }),
+                  /* @__PURE__ */ jsx(Typography.Text, { children: "A series module is to lift or series multiple modules into a closure when packaging. " })
+                ] }) }),
+                /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsxs(Col, { children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "small",
+                      icon: /* @__PURE__ */ jsx(CodepenCircleOutlined, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Typography.Text, { children: ": Open the code." })
+                ] }) }),
+                /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsxs(Col, { children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      size: "small",
+                      icon: /* @__PURE__ */ jsx(DeploymentUnitOutlined, {})
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Typography.Text, { children: ": View the module dependency, that is, module reasons in stats.json." })
+                ] }) }),
+                /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsxs(Col, { children: [
+                  /* @__PURE__ */ jsx(Tag, { color: "purple", children: "Bundled: 15.77 KB" }),
+                  /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Bundled Size" }),
+                  /* @__PURE__ */ jsx(Typography.Text, { children: "The size of the code which bundled. That is, after bundle and tree-shaking." })
+                ] }) }),
+                /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsxs(Col, { children: [
+                  /* @__PURE__ */ jsx(Tag, { color: "orange", children: "Source: 15.77 KB" }),
+                  /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Source Size" }),
+                  /* @__PURE__ */ jsx(Typography.Text, { children: "The size of the code which before bundle and transform." })
+                ] }) })
+              ] }),
+              style: { marginLeft: 3 },
+              children: /* @__PURE__ */ jsx(InfoCircleOutlined, { style: { color: "rgba(0,0,0,.45)" } })
+            }
+          )
+        ] }),
+        extra: fold ? /* @__PURE__ */ jsx(Button, { onClick: () => setFold(false), children: /* @__PURE__ */ jsxs(Typography.Text, { children: [
+          "Expand ",
+          /* @__PURE__ */ jsx(ColumnHeightOutlined, {})
+        ] }) }) : /* @__PURE__ */ jsx(Button, { onClick: () => setFold(true), children: /* @__PURE__ */ jsxs(Typography.Text, { children: [
+          "Fold",
+          /* @__PURE__ */ jsx(VerticalAlignMiddleOutlined, {})
+        ] }) }),
+        children: /* @__PURE__ */ jsxs(Row, { align: "middle", gutter: [Size.BasePadding, Size.BasePadding], children: [
+          entryPoints && entryPoints.length ? /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
+            Select,
+            {
+              mode: "multiple",
+              value: selectedEntryPoints.map((e) => e.name),
+              style: { minWidth: 230, width: "auto", maxWidth: 300 },
+              placeholder: "filter assets by entry point",
+              onChange: (name) => {
+                setEntryPoints(name.map((e) => entryPoints.find((ep) => ep.name === e)).filter(Boolean));
+              },
+              allowClear: true,
+              onClear: () => {
+                setEntryPoints([]);
+              },
+              children: entryPoints.map((e) => {
+                return /* @__PURE__ */ jsx(Select.Option, { value: e.name, children: /* @__PURE__ */ jsx(Space, { children: /* @__PURE__ */ jsx(Bdg, { label: e.name, value: formatSize(e.size), tooltip: e.name }) }) }, e.name);
+              })
+            }
+          ) }) : null,
+          /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(KeywordInput, { placeholder: "search asset by keyword", onChange: onSearch }) }),
+          /* @__PURE__ */ jsx(Col, { span: 7, children: /* @__PURE__ */ jsx(
+            InputNumber,
+            {
+              min: 0,
+              style: { width: "95%" },
+              addonBefore: /* @__PURE__ */ jsxs(Space, { children: [
+                /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 14, color: "inherit" }, children: "Asset Size" }),
+                /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    title: t("filter the output assets which size is greater than the input value"),
+                    style: { marginLeft: 3 },
+                    children: /* @__PURE__ */ jsx(InfoCircleOutlined, { style: { color: "rgba(0,0,0,.45)" } })
+                  }
+                )
+              ] }),
+              onChange: (value) => onChangeAsset(Number(value)),
+              addonAfter: selectAfter("chunk")
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Col, { span: 7, children: /* @__PURE__ */ jsx(
+            InputNumber,
+            {
+              min: 0,
+              style: { width: "95%" },
+              addonBefore: /* @__PURE__ */ jsxs(Space, { children: [
+                /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 14, color: "inherit" }, children: "Module Size" }),
+                /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    title: t("filter the modules which size is greater than the input value"),
+                    style: { marginLeft: 3 },
+                    children: /* @__PURE__ */ jsx(InfoCircleOutlined, { style: { color: "rgba(0,0,0,.45)" } })
+                  }
+                )
+              ] }),
+              onChange: (value) => {
+                onChangeModule(Number(value));
+              },
+              addonAfter: selectAfter("module")
+            }
+          ) }),
+          /* @__PURE__ */ jsx(Col, { span: 24, children: filteredAssets.length ? /* @__PURE__ */ jsxs(Row, { gutter: Size.BasePadding, children: [
+            /* @__PURE__ */ jsx(Col, { span: 8, children: /* @__PURE__ */ jsx(
+              Card,
+              {
+                title: /* @__PURE__ */ jsxs(Space, { children: [
+                  /* @__PURE__ */ jsx(Typography.Text, { children: t("Output Assets List") }),
+                  /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+                  /* @__PURE__ */ jsx(
+                    Tooltip,
+                    {
+                      title: `total assets count is ${assets.length}, the filtered assets count is ${filteredAssets.length}`,
+                      children: /* @__PURE__ */ jsxs(Typography.Text, { type: "secondary", style: { fontSize: 12, fontWeight: 400 }, children: [
+                        filteredAssets.length,
+                        " / ",
+                        assets.length
+                      ] })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+                  /* @__PURE__ */ jsx(Typography.Text, { type: "secondary", style: { fontSize: 12, fontWeight: 400 }, children: formatSize(sumBy(filteredAssets, (e) => e.size)) })
+                ] }),
+                size: "small",
+                bodyStyle: { overflow: "scroll", height: fold ? cardBodyHeight : largeCardBodyHeight },
+                extra: /* @__PURE__ */ jsx(Button, { size: "small", icon: /* @__PURE__ */ jsx(ColumnHeightOutlined, {}), onClick: () => setDefaultExpandAll(true), children: "expand all" }),
+                children: /* @__PURE__ */ jsx(
+                  FileTree,
+                  {
+                    treeData: assetsStructures,
+                    autoExpandParent: true,
+                    defaultExpandAll: defaultExpandAll || filteredAssets.length <= 20
+                  },
+                  `tree_${inputAssetName}_${defaultExpandAll}`
+                )
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Col, { span: 16, children: assetPath ? /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetAssetDetails, body: { assetPath }, children: (details) => /* @__PURE__ */ jsx(
+              AssetDetail,
+              {
+                asset: details.asset,
+                chunks: details.chunks,
+                modules: details.modules,
+                height: fold ? cardBodyHeight : largeCardBodyHeight,
+                moduleSizeLimit: inputModule,
+                root: cwd
+              }
+            ) }) : /* @__PURE__ */ jsx(Card, { bodyStyle: { height: fold ? cardBodyHeight + 40 : largeCardBodyHeight }, children: /* @__PURE__ */ jsx(
+              Empty,
+              {
+                description: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Click the file path on the left to show the modules of the asset" })
+              }
+            ) }) })
+          ] }) : /* @__PURE__ */ jsx(Empty, {}) })
+        ] })
+      }
+    )
+  ] });
+};
+const WebpackModulesOverall = withServerAPI({
+  api: SDK.ServerAPI.API.GetProjectInfo,
+  responsePropName: "project",
+  Component: (props) => {
+    const { root, errors } = props.project;
+    return /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetAssetsSummary, body: { withFileContent: true }, children: (summary) => {
+      return /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetEntryPoints, children: (entryPoints) => /* @__PURE__ */ jsx(WebpackModulesOverallBase, { cwd: root, errors, summary, entryPoints }) });
+    } });
+  }
+});
+export {
+  WebpackModulesOverall,
+  WebpackModulesOverallBase
+};

package/dist/pages/BundleSize/config.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface config {
+    setModuleJumpList(ids: number[]): void;
+    moduleJumpList: number[];
+}
+export declare const ModuleGraphListContext: import("react").Context<config>;
+export {};

package/dist/pages/BundleSize/config.js

@@ -0,0 +1,9 @@
+import { createContext } from "react";
+const ModuleGraphListContext = createContext({
+  setModuleJumpList(_ids) {
+  },
+  moduleJumpList: []
+});
+export {
+  ModuleGraphListContext
+};

package/dist/pages/BundleSize/constants.d.ts

@@ -0,0 +1,5 @@
+import { Client } from '@rsdoctor/types';
+export declare const maxModuleSize = 5000;
+export declare const name = "BundleSize";
+export declare const route = Client.RsdoctorClientRoutes.BundleSize;
+export type GraphType = 'tile' | 'tree';

package/dist/pages/BundleSize/constants.js

@@ -0,0 +1,9 @@
+import { Client } from "@rsdoctor/types";
+const maxModuleSize = 5e3;
+const name = "BundleSize";
+const route = Client.RsdoctorClientRoutes.BundleSize;
+export {
+  maxModuleSize,
+  name,
+  route
+};

package/dist/pages/BundleSize/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const Page: React.FC;
+export * from './constants';

package/dist/pages/BundleSize/index.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { Col, Row } from "antd";
+import { Size } from "../../constants";
+import { WebpackModulesOverall } from "./components";
+const Page = () => {
+  return /* @__PURE__ */ jsx(Row, { children: /* @__PURE__ */ jsx(Col, { span: 24, style: { marginBottom: Size.BasePadding }, children: /* @__PURE__ */ jsx(WebpackModulesOverall, {}) }) });
+};
+export * from "./constants";
+export {
+  Page
+};

package/dist/pages/ModuleAnalyze/chunks.d.ts

@@ -0,0 +1,6 @@
+import { SDK } from '@rsdoctor/types';
+import React from 'react';
+import './index.sass';
+export declare const ChunksTable: React.FC<{
+    chunks: SDK.ChunkData[];
+}>;

package/dist/pages/ModuleAnalyze/chunks.js

@@ -0,0 +1,48 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Empty, Table, Tag } from "antd";
+import { compact, orderBy } from "lodash-es";
+import { useMemo } from "react";
+import { formatSize } from "../../utils";
+import "./index.css";
+const columns = [
+  {
+    title: "Chunk Name",
+    dataIndex: "name",
+    key: "name"
+  },
+  {
+    title: "size | 大小",
+    dataIndex: "size",
+    key: "size"
+  },
+  {
+    title: "assets | 资源",
+    dataIndex: "assets",
+    key: "assets"
+  },
+  {
+    title: "Entry or Not | 是否是入口",
+    dataIndex: "entry",
+    key: "entry"
+  }
+];
+const ChunksTable = ({ chunks }) => {
+  const chunksData = useMemo(() => {
+    const _chunksData = chunks.map((chunk) => {
+      if (!chunk)
+        return void 0;
+      return {
+        key: chunk.id,
+        name: /* @__PURE__ */ jsx(Tag, { children: chunk.name }),
+        size: /* @__PURE__ */ jsx(Tag, { children: formatSize(chunk.parsedSize) }),
+        entry: /* @__PURE__ */ jsx(Tag, { children: chunk.entry ? "是 | Yes" : "否 | No" }),
+        assets: chunk.assets.map((asset) => /* @__PURE__ */ jsx("p", { children: /* @__PURE__ */ jsx(Tag, { children: asset }, asset) }, asset))
+      };
+    });
+    return orderBy(compact(_chunksData), ["size"], ["desc"]);
+  }, [chunks]);
+  return /* @__PURE__ */ jsx(Fragment, { children: chunksData?.length ? /* @__PURE__ */ jsx(Table, { bordered: true, pagination: false, dataSource: chunksData, columns }) : /* @__PURE__ */ jsx(Empty, {}) });
+};
+export {
+  ChunksTable
+};

package/dist/pages/ModuleAnalyze/components/fileTreeCom.css

@@ -0,0 +1,97 @@
+.file-tree-com {
+  margin: 0;
+}
+.file-tree-com .file-tree-com-treenode {
+  margin: 0;
+  padding: 0;
+  line-height: 24px;
+  white-space: nowrap;
+  list-style: none;
+  outline: 0;
+}
+.file-tree-com .file-tree-com-treenode .file-tree-com-node-content-wrapper {
+  position: relative;
+  display: inline-block;
+  height: 24px;
+  margin: 0;
+  padding: 0 4px;
+  box-sizing: border-box;
+  text-decoration: none;
+  vertical-align: top;
+  cursor: pointer;
+}
+.file-tree-com .file-tree-com-treenode .file-tree-com-arrow-icon {
+  transform: rotate(90deg);
+}
+.file-tree-com-child-tree {
+  display: none;
+}
+.file-tree-com-child-tree-open {
+  display: block;
+}
+.file-tree-com-treenode-disabled > span:not(.file-tree-com-switcher),
+.file-tree-com > a,
+.file-tree-com > a span {
+  color: #767676;
+  cursor: not-allowed;
+}
+.file-tree-com-treenode-selected {
+  background: rgba(5, 145, 255, 0.3);
+  border-radius: 4px;
+}
+.file-tree-com-title {
+  display: inline-block;
+  cursor: pointer;
+}
+.file-tree-com-indent {
+  display: inline-block;
+  height: 0;
+  vertical-align: bottom;
+}
+.file-tree-com-indent-unit {
+  display: inline-block;
+  width: 14px;
+}
+.file-tree-switcher-arrow {
+  transform: rotate(0deg);
+  transition: transform 0.3s ease;
+}
+.file-tree-switcher-arrow-expand {
+  transform: rotate(90deg);
+}
+.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) {
+  border-left: 1px solid #eee;
+}
+.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-titles {
+  display: flex;
+  flex-direction: column;
+}
+.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-titles .file-tree-com-node-title {
+  display: flex;
+  cursor: pointer;
+}
+.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-titles .file-tree-com-node-title img {
+  cursor: pointer;
+}
+.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-titles .file-tree-com-node-title img-tag {
+  cursor: pointer;
+}
+.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-node-title-selected {
+  background-color: yellow;
+}
+.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-node-title-tag {
+  margin-inline-end: 0;
+}
+.rc-tree.rc-tree-show-line .rc-tree-treenode:not(:last-child) .file-tree-com-node-title-code-tag {
+  cursor: pointer;
+  padding: 0 2px;
+}
+.rc-tree-indent {
+  display: inline-block;
+  height: 0;
+  vertical-align: bottom;
+}
+.rc-tree-indent-unit {
+  display: inline-block;
+  width: 14px;
+}

package/dist/pages/ModuleAnalyze/components/fileTreeCom.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { NewTreeNodeType } from '../utils/hooks';
+import './fileTreeCom.sass';
+type FileTreeProps = {
+    treeData: NewTreeNodeType[];
+    needCode?: boolean;
+    needShowAllTree?: boolean;
+    needJumpto?: boolean;
+    defaultOpened?: boolean;
+    defaultOpenFather?: number;
+    cwd: string;
+    selectedChunk?: string;
+};
+export declare const FileTree: React.FC<FileTreeProps>;
+export {};