@rsdoctor/components 0.1.9 → 0.2.0

package/dist/components/Layout/menus.js

@@ -9,7 +9,7 @@ import {
   ToolOutlined
 } from "@ant-design/icons";
 import { Manifest, SDK } from "@rsdoctor/types";
-import { Col, Menu, Grid, Typography } from "antd";
+import { Col, Menu, Typography } from "antd";
 import { includes } from "lodash-es";
 import { useLocation, useNavigate } from "react-router-dom";
 import WebpackIcon from "../../assets/webpack.98604d64.svg";
@@ -22,7 +22,8 @@ import {
   LoaderFiles,
   PluginsAnalyze,
   ModuleResolve,
-  LoaderTimeline
+  LoaderTimeline,
+  TreeShaking
 } from "../../pages";
 import { CompileName } from "./constants";
 const BuilderSwitchName = "builder-switcher";
@@ -39,7 +40,6 @@ const MenusBase = (props) => {
     transform: "translateY(-2px)"
   };
   const items = [];
-  const { xxl } = Grid.useBreakpoint();
   console.log("enableRoutes: ", enableRoutes);
   if (includes(enableRoutes, Manifest.RsdoctorManifestClientRoutes.Overall)) {
     items.push({
@@ -110,6 +110,14 @@ const MenusBase = (props) => {
           label: t(BundleSize.name),
           key: BundleSize.route,
           icon: /* @__PURE__ */ jsx(FolderViewOutlined, { style: iconStyle })
+        },
+        includes(
+          enableRoutes,
+          Manifest.RsdoctorManifestClientRoutes.TreeShaking
+        ) && {
+          label: t(TreeShaking.name),
+          key: TreeShaking.route,
+          icon: /* @__PURE__ */ jsx(FolderViewOutlined, { style: iconStyle })
         }
       ].filter((e) => Boolean(e))
     });
@@ -129,7 +137,7 @@ const MenusBase = (props) => {
         height: Size.NavBarHeight,
         lineHeight: `${Size.NavBarHeight}px`,
         minWidth: 0,
-        justifyContent: xxl ? "center" : "flex-end",
+        justifyContent: "flex-end",
         ...props.style
       },
       selectedKeys: [pathname === "/" ? OverallConstants.route : pathname]

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

@@ -357,7 +357,7 @@ const AssetDetail = ({ asset, chunks: includeChunks, modules: includeModules, mo
           description: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: `"${moduleKeyword}" can't match any modules` })
         }
       ) })
-    ] }) : /* @__PURE__ */ jsx(Empty, { description: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: `"${asset.path}" don't has any modules` }) }),
+    ] }) : /* @__PURE__ */ jsx(Empty, { description: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: `"${asset.path}" doesn't have any modules` }) }),
     /* @__PURE__ */ jsx(
       ModuleGraphViewer,
       {

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

@@ -0,0 +1,3 @@
+import { Client } from '@rsdoctor/types';
+export declare const name = "TreeShaking";
+export declare const route = Client.RsdoctorClientRoutes.TreeShaking;

package/dist/pages/TreeShaking/constants.js

@@ -0,0 +1,7 @@
+import { Client } from "@rsdoctor/types";
+const name = "TreeShaking";
+const route = Client.RsdoctorClientRoutes.TreeShaking;
+export {
+  name,
+  route
+};

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

@@ -0,0 +1,12 @@
+import type { Module, ModuleGraph, SourceRange } from '@rsdoctor/graph';
+import { SDK } from '@rsdoctor/types';
+import { SetEditorStatus } from './types';
+export interface CodeEditorProps {
+    module: Module;
+    moduleGraph: ModuleGraph;
+    ranges: SourceRange[];
+    setEditorData: SetEditorStatus;
+    source: SDK.ModuleSource;
+    toLine?: number;
+}
+export declare function CodeEditor(props: CodeEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/pages/TreeShaking/editor.js

@@ -0,0 +1,110 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState, useRef } from "react";
+import path from "path-browserify";
+import { Card, Space, Tooltip, Typography } from "antd";
+import { InfoCircleOutlined, LoadingOutlined } from "@ant-design/icons";
+import Editor from "@monaco-editor/react";
+import { Range, editor } from "monaco-editor";
+import { parseOpenTag } from "./open-tag";
+import { getHoverMessageInModule } from "./utils";
+import { getOriginalLanguage, getSelectionRange } from "../../utils";
+import { DefaultEditorConfig } from "../../components/CodeViewer";
+function CodeEditor(props) {
+  const { module, moduleGraph, ranges, toLine, setEditorData, source } = props;
+  const editorRef = useRef();
+  const oldRanges = useRef([]);
+  const oldHovers = useRef([]);
+  const oldToLine = useRef();
+  const changeModule = useRef(false);
+  const [content, setContent] = useState("");
+  useEffect(() => {
+    const { isPreferSource } = module;
+    changeModule.current = true;
+    setContent(
+      source.source || isPreferSource ? source.source : source.transformed
+    );
+    setTimeout(() => {
+      oldHovers.current = editorRef.current?.getModel()?.deltaDecorations(
+        oldHovers.current,
+        getHoverMessageInModule(module, moduleGraph)
+      ) ?? [];
+    }, 200);
+  }, [module, source]);
+  useEffect(() => {
+    function setRangeAndLine() {
+      const model = editorRef.current?.getModel();
+      if (!model) {
+        return;
+      }
+      oldRanges.current = model.deltaDecorations(
+        oldRanges.current,
+        ranges.map((arr) => {
+          return {
+            range: getSelectionRange(arr, Range),
+            options: {
+              stickiness: 1,
+              inlineClassName: "tree-shaking-statement-side-effect",
+              isWholeLine: false,
+              showIfCollapsed: true
+            }
+          };
+        })
+      );
+      if (editorRef.current && typeof toLine === "number" && oldToLine.current !== toLine) {
+        oldToLine.current = toLine;
+        editorRef.current.revealLine(toLine, editor.ScrollType.Smooth);
+      }
+    }
+    if (changeModule) {
+      setTimeout(setRangeAndLine, 300);
+    } else {
+      setRangeAndLine();
+    }
+    changeModule.current = false;
+  }, [ranges, toLine]);
+  useEffect(() => {
+    const openEditor = (event) => {
+      const query = parseOpenTag(event.target);
+      if (query) {
+        const module2 = moduleGraph.getModuleById(query.module);
+        if (module2) {
+          setEditorData(module2, [query.range], query.range.start.line);
+        }
+      }
+    };
+    document.body.addEventListener("click", openEditor);
+    return () => {
+      document.body.removeEventListener("click", openEditor);
+    };
+  }, []);
+  if (!module) {
+    return /* @__PURE__ */ jsx("div", { children: "请选择要查看的模块" });
+  }
+  const handleEditorDidMount = (editor2) => {
+    editorRef.current = editor2;
+  };
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      title: /* @__PURE__ */ jsx(Tooltip, { title: module.path, children: /* @__PURE__ */ jsxs(Space, { children: [
+        /* @__PURE__ */ jsx(Typography.Text, { children: path.basename(module.path) }),
+        /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+      ] }) }),
+      className: "tree-shaking-editor",
+      children: /* @__PURE__ */ jsx(
+        Editor,
+        {
+          theme: "vs-dark",
+          language: getOriginalLanguage(module.path),
+          value: content,
+          loading: /* @__PURE__ */ jsx(LoadingOutlined, { style: { fontSize: 30 } }),
+          options: DefaultEditorConfig,
+          onMount: handleEditorDidMount
+        }
+      )
+    }
+  );
+}
+export {
+  CodeEditor
+};

package/dist/pages/TreeShaking/index.css

@@ -0,0 +1,74 @@
+.tree-shaking-page {
+  width: 100%;
+  height: 100%;
+}
+.tree-shaking-page .ant-card {
+  display: flex;
+  flex-direction: column;
+}
+.tree-shaking-page .tree-shaking-statement-side-effect {
+  text-decoration: underline;
+  background: #711f1c;
+}
+.tree-shaking-page .tree-shaking-statement-declaration-identifier {
+  text-decoration: underline;
+  background: rgb(44, 135, 236);
+}
+.tree-shaking-page .tree-shaking-files-box {
+  height: 700px;
+}
+.tree-shaking-page .tree-shaking-files {
+  overflow: auto;
+  height: 100%;
+}
+.tree-shaking-page .tree-shaking-editor {
+  flex-grow: 1;
+  height: 700px;
+}
+.tree-shaking-page .tree-shaking-editor .ant-card-body {
+  padding: 0;
+}
+.tree-shaking-page .tree-shaking-files-box,
+.tree-shaking-page .tree-shaking-editor .ant-card-body {
+  width: auto;
+  height: calc(100% - 48px);
+}
+.tree-shaking-page .tree-shaking-export-table .ant-card-body {
+  padding: 0;
+}
+.tree-shaking-page .tree-shaking-export-table .ant-card-body .ant-divider {
+  margin: 24px;
+}
+.tree-shaking-page .tree-shaking-export-table .ant-table-wrapper .ant-table-tbody > tr:last-child > td {
+  border-bottom: none;
+}
+.tree-shaking-page .tree-shaking-export-table .ant-table-wrapper .ant-table-tbody > tr:last-child > td .ant-table-container table > thead > tr:first-child th {
+  border-top: 1px solid rgba(5, 5, 5, 0.06);
+}
+.tree-shaking-page .tree-shaking-export-table .ant-table-wrapper .ant-table-tbody > tr:last-child > td .ant-table-container table > thead > tr:first-child th th:first-child {
+  border-start-start-radius: 0;
+}
+.tree-shaking-page .tree-shaking-export-table .ant-table-wrapper .ant-table-tbody > tr:last-child > td .ant-table-container table > thead > tr:first-child th th:last-child {
+  border-start-end-radius: 0;
+}
+.tree-shaking-page .tree-shaking-side-effect-list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.tree-shaking-page .tree-shaking-side-effect-list .tree-shaking-side-effect-list-item {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.monaco-hover .markdown-hover.hover-row hr {
+  margin: 2px;
+  background-color: gray;
+}
+.monaco-hover .markdown-hover.hover-row div[data-code=tree-shaking-hover] ol {
+  margin: 4px 0 10px 0;
+  padding-left: 4px;
+}
+.monaco-hover .markdown-hover.hover-row div[data-code=tree-shaking-hover] ol pre {
+  margin: 2px 0;
+}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SDK } from '@rsdoctor/types';
+import './index.sass';
+export * from './constants';
+export declare const TreeShakingPage: React.FC<Omit<{
+    data: SDK.ModuleGraphData;
+    cwd: string;
+}, "data" | "cwd">>;

package/dist/pages/TreeShaking/index.js

@@ -0,0 +1,177 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { Card, Col, Row, Radio } from "antd";
+import { isNumber } from "lodash-es";
+import { FileSearchOutlined } from "@ant-design/icons";
+import { SDK } from "@rsdoctor/types";
+import path from "path-browserify";
+import {
+  ConnectManifestData,
+  ServerAPIProvider
+} from "../../components/Manifest";
+import { Size } from "../../constants";
+import { FileTree } from "../../components/FileTree";
+import { KeywordInput } from "../../components/Form/keyword";
+import { getTreeFilesDefaultExpandedKeys, useFileStructures } from "./utils";
+import {
+  fetchManifest,
+  useModuleGraphInstanceByModuleGraph
+} from "../../utils";
+import { CodeEditor } from "./editor";
+import { Space } from "./space";
+import { TreeShakingTable } from "./table";
+import "./index.css";
+export * from "./constants";
+const Component = ({
+  data,
+  cwd
+}) => {
+  const moduleGraph = useModuleGraphInstanceByModuleGraph(data);
+  if (moduleGraph.size() === 0) {
+    return /* @__PURE__ */ jsx(Space, {});
+  }
+  const [searchInput, setSearchInput] = useState("");
+  const [toLine, setToLine] = useState(1);
+  const [ranges, setRanges] = useState([]);
+  const [tableKind, setTableKind] = useState("side-effect");
+  const filteredModules = useMemo(
+    () => moduleGraph.getModules().filter(
+      (item) => item.kind === SDK.ModuleKind.Normal && path.basename(item.path).includes(searchInput)
+    ),
+    [searchInput]
+  );
+  const entry = useMemo(
+    () => filteredModules.find((item) => item.isEntry),
+    []
+  );
+  const [selectedModule, setSelectedModule] = useState(
+    entry || filteredModules?.length && filteredModules?.[0]
+  );
+  const files = useFileStructures(
+    filteredModules,
+    moduleGraph,
+    searchInput,
+    selectedModule,
+    (file) => {
+      setEditorData(filteredModules.find((item) => item.path === file), []);
+    },
+    cwd
+  );
+  const setEditorData = (module, ranges2, line) => {
+    setSelectedModule(module);
+    setRanges(ranges2.slice());
+    if (isNumber(line)) {
+      setToLine(line);
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      title: "Tree Shaking Analysis",
+      bodyStyle: { paddingTop: 0 },
+      className: "tree-shaking-page",
+      children: [
+        /* @__PURE__ */ jsxs(
+          Row,
+          {
+            justify: "space-between",
+            align: "middle",
+            style: { marginBottom: Size.BasePadding, marginTop: Size.BasePadding },
+            children: [
+              /* @__PURE__ */ jsx(
+                KeywordInput,
+                {
+                  icon: /* @__PURE__ */ jsx(FileSearchOutlined, {}),
+                  width: 400,
+                  label: "FileName",
+                  placeholder: "search filename by keyword",
+                  style: { width: "auto" },
+                  onChange: (e) => setSearchInput(e)
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Radio.Group,
+                {
+                  value: tableKind,
+                  onChange: ({ target }) => setTableKind(target.value),
+                  children: [
+                    /* @__PURE__ */ jsx(Radio.Button, { value: "side-effect", children: "SideEffects" }),
+                    /* @__PURE__ */ jsx(Radio.Button, { value: "export", children: "Export Variables" })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Row,
+          {
+            justify: "space-between",
+            align: "top",
+            wrap: false,
+            gutter: [Size.BasePadding, Size.BasePadding],
+            children: [
+              /* @__PURE__ */ jsx(Col, { span: 7, children: /* @__PURE__ */ jsx(
+                Card,
+                {
+                  title: `Total Files: ${filteredModules.length}`,
+                  className: "tree-shaking-files-box",
+                  children: /* @__PURE__ */ jsx(
+                    FileTree,
+                    {
+                      className: "tree-shaking-files",
+                      selectedKeys: selectedModule ? [selectedModule.path] : [],
+                      defaultExpandedKeys: getTreeFilesDefaultExpandedKeys(files),
+                      treeData: files,
+                      expandAction: "click"
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Col, { span: 9, children: /* @__PURE__ */ jsx(
+                ServerAPIProvider,
+                {
+                  api: SDK.ServerAPI.API.GetModuleCodeByModuleId,
+                  body: { moduleId: selectedModule.id },
+                  children: (source) => {
+                    return /* @__PURE__ */ jsx(
+                      CodeEditor,
+                      {
+                        module: selectedModule,
+                        moduleGraph,
+                        ranges,
+                        toLine,
+                        setEditorData,
+                        source
+                      }
+                    );
+                  }
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Col, { flex: 1, children: /* @__PURE__ */ jsx(
+                TreeShakingTable,
+                {
+                  kind: tableKind,
+                  setEditorData,
+                  module: selectedModule,
+                  moduleGraph
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+const TreeShakingPage = ConnectManifestData(
+  fetchManifest,
+  [
+    ["moduleGraph", "data"],
+    ["root", "cwd"]
+  ],
+  Component
+);
+export {
+  TreeShakingPage
+};

package/dist/pages/TreeShaking/open-tag.d.ts

@@ -0,0 +1,11 @@
+import { SDK } from '@rsdoctor/types';
+export declare enum AttributeKey {
+    Module = "data-module",
+    Range = "data-range"
+}
+export interface OpenTagData {
+    module: number;
+    range: SDK.SourceRange;
+}
+export declare function getOpenTagText(module: number, range: SDK.SourceRange, text: string): string;
+export declare function parseOpenTag(dom: HTMLElement): OpenTagData | undefined;

package/dist/pages/TreeShaking/open-tag.js

@@ -0,0 +1,43 @@
+var AttributeKey = /* @__PURE__ */ ((AttributeKey2) => {
+  AttributeKey2["Module"] = "data-module";
+  AttributeKey2["Range"] = "data-range";
+  return AttributeKey2;
+})(AttributeKey || {});
+function getOpenTagText(module, range, text) {
+  return `<a data-href="${"data-module" /* Module */}=${module}&${"data-range" /* Range */}=${encodeURIComponent(JSON.stringify(range))}">${text}</a>`;
+}
+function parseOpenTag(dom) {
+  if (dom.tagName.toLocaleLowerCase() !== "a") {
+    return;
+  }
+  const hrefString = dom.getAttribute("data-href") ?? "";
+  const result = {
+    module: -1,
+    range: {
+      start: {
+        line: 1,
+        column: 0
+      },
+      end: {
+        line: 1,
+        column: 0
+      }
+    }
+  };
+  for (const item of hrefString.split("&")) {
+    const [key, value] = item.split("=");
+    if (key === "data-module" /* Module */) {
+      result.module = Number.parseInt(value, 10);
+      continue;
+    }
+    if (key === "data-range" /* Range */) {
+      result.range = JSON.parse(decodeURIComponent(value));
+    }
+  }
+  return result;
+}
+export {
+  AttributeKey,
+  getOpenTagText,
+  parseOpenTag
+};

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

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

package/dist/pages/TreeShaking/space.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { Card, Empty } from "antd";
+function Space() {
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      title: "Tree Shaking Analysis",
+      bodyStyle: { paddingTop: 0 },
+      className: "tree-shaking-page",
+      children: /* @__PURE__ */ jsx(Empty, { style: { marginTop: 30 } })
+    }
+  );
+}
+export {
+  Space
+};

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

@@ -0,0 +1,13 @@
+import { Module, ModuleGraph } from '@rsdoctor/graph';
+import React from 'react';
+import type { TableKind, SetEditorStatus } from './types';
+interface TableProps {
+    module: Module;
+    moduleGraph: ModuleGraph;
+    setEditorData: SetEditorStatus;
+    kind: TableKind;
+}
+export declare const SideEffectTable: React.FC<TableProps>;
+export declare const ExportTable: React.FC<TableProps>;
+export declare const TreeShakingTable: React.FC<TableProps>;
+export {};

package/dist/pages/TreeShaking/table.js

@@ -0,0 +1,319 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  Space,
+  Table,
+  Typography,
+  Divider,
+  Tooltip,
+  Button,
+  Input
+} from "antd";
+import { SearchOutlined } from "@ant-design/icons";
+import React, { useMemo, useState, useRef } from "react";
+import Highlighter from "react-highlight-words";
+import { Card } from "../../components/Card";
+import { ellipsisPath } from "./utils";
+import { isDef } from "../../utils";
+const tableHeight = 600;
+function getDeclarationElement(val, setEditorData) {
+  if (!val) {
+    return /* @__PURE__ */ jsx("div", { children: "Can not find declaration." });
+  }
+  const { module } = val;
+  const range = module.isPreferSource ? val.position.source : val.position.transformed;
+  return /* @__PURE__ */ jsx(Tooltip, { title: `${module.path}, line ${range.start.line}`, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "link",
+      onClick: () => setEditorData(module, [range], range.start.line),
+      children: "Move To"
+    }
+  ) });
+}
+function useSearchCell(dataIndex) {
+  const [searchText, setSearchText] = useState("");
+  const [searchedColumn, setSearchedColumn] = useState("");
+  const searchInput = useRef(null);
+  const handleSearch = (selectedKeys, confirm, dataIndex2) => {
+    confirm();
+    setSearchText(selectedKeys[0]);
+    setSearchedColumn(dataIndex2);
+  };
+  const handleReset = (clearFilters) => {
+    clearFilters();
+    setSearchText("");
+  };
+  return {
+    filterDropdown: ({
+      setSelectedKeys,
+      selectedKeys,
+      confirm,
+      clearFilters,
+      close
+    }) => /* @__PURE__ */ jsxs("div", { style: { padding: 8 }, onKeyDown: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref: searchInput,
+          placeholder: `Search ${dataIndex}`,
+          value: selectedKeys[0],
+          onChange: (e) => setSelectedKeys(e.target.value ? [e.target.value] : []),
+          onPressEnter: () => handleSearch(selectedKeys, confirm, dataIndex),
+          style: { marginBottom: 8, display: "block" }
+        }
+      ),
+      /* @__PURE__ */ jsxs(Space, { children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "primary",
+            onClick: () => handleSearch(selectedKeys, confirm, dataIndex),
+            icon: /* @__PURE__ */ jsx(SearchOutlined, {}),
+            size: "small",
+            style: { width: 90 },
+            children: "Search"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => clearFilters && handleReset(clearFilters),
+            size: "small",
+            style: { width: 90 },
+            children: "Reset"
+          }
+        ),
+        /* @__PURE__ */ jsx(Button, { type: "link", size: "small", onClick: close, children: "close" })
+      ] })
+    ] }),
+    filterIcon: (filtered) => /* @__PURE__ */ jsx(SearchOutlined, { style: { color: filtered ? "#1890ff" : void 0 } }),
+    onFilter: (value, record) => {
+      return record[dataIndex].toString().toLowerCase().includes(value.toLowerCase());
+    },
+    render: (text) => {
+      return searchedColumn === dataIndex ? /* @__PURE__ */ jsx(
+        Highlighter,
+        {
+          highlightStyle: { backgroundColor: "#ffc069", padding: 0 },
+          searchWords: [searchText],
+          autoEscape: true,
+          textToHighlight: text ? text.toString() : ""
+        }
+      ) : text;
+    }
+  };
+}
+const SideEffectTable = ({
+  module,
+  moduleGraph,
+  setEditorData
+}) => {
+  const sideEffects = useMemo(
+    () => moduleGraph.getModuleGraphModule(module).getSideEffects(),
+    [module]
+  );
+  const dataSource = sideEffects.map(({ variable, name, identifier }, i) => {
+    return {
+      key: i,
+      name,
+      identifier: module.isPreferSource ? identifier.position.source : identifier.position.transformed,
+      declaration: variable?.identifier
+    };
+  }).sort((pre, next) => {
+    if (pre.name === next.name) {
+      return pre.identifier.start.line > next.identifier.start.line ? 1 : -1;
+    }
+    return pre.name > next.name ? 1 : -1;
+  }).reduce((ans, item) => {
+    const lastItem = ans[ans.length - 1];
+    if (!lastItem || lastItem.name !== item.name) {
+      ans.push(item);
+      return ans;
+    }
+    if (!lastItem.children) {
+      lastItem.children = [];
+    }
+    lastItem.children.push(item);
+    return ans;
+  }, []);
+  const columns = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      key: "name",
+      align: "center",
+      ...useSearchCell("name")
+    },
+    {
+      title: "SideEffect",
+      dataIndex: "identifier",
+      key: "identifier",
+      align: "center",
+      render: (val) => {
+        return /* @__PURE__ */ jsx(Tooltip, { title: `Current File line ${val.start.line}`, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "link",
+            onClick: () => setEditorData(module, [val], val.start.line),
+            children: "Move To"
+          }
+        ) });
+      }
+    },
+    {
+      title: "Declaration",
+      dataIndex: "declaration",
+      key: "declaration",
+      align: "center",
+      render: (val) => {
+        return getDeclarationElement(val, setEditorData);
+      }
+    }
+  ];
+  const titleInfo = /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsxs(Space, { style: { fontWeight: 400 }, children: [
+    "Import",
+    /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: dataSource.length }),
+    "variables",
+    /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+    /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: sideEffects.length }),
+    "sideEffects"
+  ] }) });
+  return /* @__PURE__ */ jsx(
+    Card,
+    {
+      style: { marginBottom: 10 },
+      title: titleInfo,
+      className: "tree-shaking-export-table",
+      children: /* @__PURE__ */ jsx(
+        Table,
+        {
+          size: "small",
+          dataSource,
+          columns,
+          pagination: false,
+          scroll: { y: tableHeight }
+        }
+      )
+    }
+  );
+};
+const ExportTable = ({
+  module,
+  moduleGraph,
+  setEditorData
+}) => {
+  const exportsData = useMemo(
+    () => moduleGraph.getModuleGraphModule(module).getExports(),
+    [module]
+  );
+  const allUnUsedExports = exportsData.filter(
+    (item) => item.getSideEffects().length === 0
+  );
+  const titleInfo = /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsxs(Space, { style: { fontWeight: 400 }, children: [
+      "Export",
+      /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: exportsData.length })
+    ] }),
+    exportsData.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+      /* @__PURE__ */ jsxs(Typography.Text, { style: { fontWeight: 400 }, code: true, children: [
+        /* @__PURE__ */ jsx(Typography.Text, { children: "Unused" }),
+        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+        /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: allUnUsedExports.length })
+      ] }),
+      /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+      /* @__PURE__ */ jsxs(Typography.Text, { style: { fontWeight: 400 }, code: true, children: [
+        /* @__PURE__ */ jsx(Typography.Text, { children: "Used" }),
+        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+        /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: exportsData.length - allUnUsedExports.length })
+      ] })
+    ] }) : ""
+  ] });
+  const dataSource = exportsData.map((item, i) => {
+    const { variable } = item;
+    return {
+      key: i,
+      name: item.name,
+      declaration: variable?.identifier,
+      used: item.getSideEffects().map(({ module: module2, identifier }) => {
+        const range = module2?.isPreferSource ? identifier.position.source : identifier.position.transformed;
+        if (!module2 || !range) {
+          return;
+        }
+        return {
+          module: module2,
+          range
+        };
+      }).filter(isDef)
+    };
+  });
+  const columns = [
+    {
+      title: "Name",
+      dataIndex: "name",
+      key: "name",
+      align: "center",
+      ...useSearchCell("name")
+    },
+    {
+      title: "Declaration",
+      dataIndex: "declaration",
+      key: "declaration",
+      align: "center",
+      render: (val) => {
+        return getDeclarationElement(val, setEditorData);
+      }
+    },
+    {
+      title: "Info",
+      dataIndex: "used",
+      key: "used",
+      align: "center",
+      sorter: (a, b) => a.used.length - b.used.length,
+      sortDirections: ["descend", "ascend"],
+      render: (val) => /* @__PURE__ */ jsxs("span", { children: [
+        "Used ",
+        val.length,
+        " times"
+      ] })
+    }
+  ];
+  const expandElement = (data) => {
+    return /* @__PURE__ */ jsxs("div", { className: "tree-shaking-side-effect-list", children: [
+      /* @__PURE__ */ jsx(Typography.Text, { children: "List of SideEffect:" }),
+      data.used.map(({ module: module2, range }) => /* @__PURE__ */ jsx(Tooltip, { title: `${module2.path}:${range.start.line}`, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          className: "tree-shaking-side-effect-list-item",
+          type: "link",
+          onClick: () => {
+            setEditorData(module2, [range], range.start.line);
+          },
+          children: `${ellipsisPath(module2.path)}:${range.start.line}`
+        }
+      ) }, module2.id))
+    ] });
+  };
+  return /* @__PURE__ */ jsx(Card, { title: titleInfo, className: "tree-shaking-export-table", children: /* @__PURE__ */ jsx(
+    Table,
+    {
+      size: "small",
+      dataSource,
+      columns,
+      pagination: false,
+      scroll: { y: tableHeight },
+      expandable: {
+        expandedRowRender: expandElement,
+        rowExpandable: (val) => val.used.length > 0
+      }
+    }
+  ) });
+};
+const TreeShakingTable = (props) => {
+  return props.kind === "side-effect" ? /* @__PURE__ */ jsx(SideEffectTable, { ...props }) : /* @__PURE__ */ jsx(ExportTable, { ...props });
+};
+export {
+  ExportTable,
+  SideEffectTable,
+  TreeShakingTable
+};

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

@@ -0,0 +1,3 @@
+import type { Module, SourceRange } from '@rsdoctor/graph';
+export type TableKind = 'side-effect' | 'export';
+export type SetEditorStatus = (module: Module, ranges: SourceRange[], line?: number) => void;

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

@@ -0,0 +1,7 @@
+import { Module, ModuleGraph, Statement } from '@rsdoctor/graph';
+import { editor } from 'monaco-editor';
+export declare function useFileStructures(modules: Module[], moduleGraph: ModuleGraph, searchInput: string, selectedModule: Module, onItemClick: (file: string) => void, cwd: string): import("../../utils").DataNode[];
+export declare function getTreeFilesDefaultExpandedKeys(files: any[]): (string | number)[];
+export declare function ellipsisPath(full: string): string;
+export declare function getModulePositionString(statement: Statement, module: Module): string;
+export declare function getHoverMessageInModule(module: Module, moduleGraph: ModuleGraph): editor.IModelDecoration[];

package/dist/pages/TreeShaking/utils.js

@@ -0,0 +1,147 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo } from "react";
+import path from "path-browserify";
+import { escape, get } from "lodash-es";
+import { Module } from "@rsdoctor/graph";
+import { Tag, Space } from "antd";
+import { Range } from "monaco-editor";
+import { getOpenTagText } from "./open-tag";
+import {
+  createFileStructures,
+  mapFileKey,
+  getSelectionRange
+} from "../../utils";
+import { Keyword } from "../../components/Keyword";
+function useFileStructures(modules, moduleGraph, searchInput, selectedModule, onItemClick, cwd) {
+  const files = useMemo(
+    () => createFileStructures({
+      files: modules.map((item) => item.path),
+      cwd,
+      fileTitle(file, basename) {
+        const module = moduleGraph.getModules().find(
+          (item) => item.path === file && item.kind === Module.kind.Normal
+        );
+        const mgm = moduleGraph.getModuleGraphModule(module);
+        const infos = mgm.getExports();
+        const unused = infos.filter(
+          (info) => info.getSideEffects().length === 0
+        );
+        return /* @__PURE__ */ jsxs(Space, { style: { wordBreak: "break-all" }, children: [
+          /* @__PURE__ */ jsx(
+            Keyword,
+            {
+              text: basename,
+              keyword: file,
+              onClick: () => onItemClick(file)
+            }
+          ),
+          mgm.dynamic ? /* @__PURE__ */ jsx(Tag, { color: "cyan", children: "dynamic" }) : "",
+          unused.length > 0 ? /* @__PURE__ */ jsxs(Tag, { color: "green", children: [
+            unused.length,
+            " Unused"
+          ] }) : ""
+        ] });
+      }
+    }),
+    [searchInput, selectedModule]
+  );
+  return files;
+}
+function getTreeFilesDefaultExpandedKeys(files) {
+  return mapFileKey(files, 3, (node) => {
+    const resourcePath = get(node, "__RESOURCEPATH__");
+    const isNodeModules = resourcePath.indexOf("/node_modules/") > -1;
+    return !isNodeModules;
+  });
+}
+function ellipsisPath(full) {
+  let result = "";
+  let current = full;
+  for (let i = 0; i < 3; i++) {
+    result = result ? `${path.basename(current)}/${result}` : path.basename(current);
+    current = path.dirname(current);
+  }
+  return `...${result}`;
+}
+function getModulePositionString(statement, module) {
+  const maxLen = 30;
+  const { path: path2, isPreferSource } = module;
+  const start = isPreferSource ? statement.position.source.start : statement.position.transformed.start;
+  const suffix = `:${start.line ?? 1}:${start.column ?? 0}`;
+  return path2.length <= maxLen ? `${path2}${suffix}` : `...${path2.substring(path2.length - 30)}${suffix}`;
+}
+function getHoverMessageInModule(module, moduleGraph) {
+  const mgm = moduleGraph.getModuleGraphModule(module);
+  const exportLocals = mgm.getOwnExports();
+  const variables = exportLocals.map((item) => item.variable).filter((item) => Boolean(item));
+  if (exportLocals.length === 0 && variables.length === 0) {
+    return [];
+  }
+  function getVariableMessage(data) {
+    const exportData = data.getExportInfo();
+    if (!exportData) {
+      return "Can not find SideEffect info.";
+    }
+    const sideEffects = exportData.getSideEffects();
+    if (sideEffects.length === 0) {
+      return "Have no sideEffect.";
+    }
+    let content = `Used **${sideEffects.length}** times:
+
+<div data-code="tree-shaking-hover">
+<li>`;
+    for (const sideEffect of sideEffects) {
+      if (!sideEffect) {
+        continue;
+      }
+      const { identifier, module: module2 } = sideEffect;
+      if (!module2) {
+        continue;
+      }
+      const { id, isPreferSource: isPreferSource2 } = module2;
+      const lineCode = identifier.getLineCode();
+      content += `
+<ol>
+      ${getOpenTagText(
+        id,
+        isPreferSource2 ? identifier.position.source : identifier.position.transformed,
+        getModulePositionString(identifier, module2)
+      )}
+      ${lineCode ? `<pre>${escape(lineCode)}</pre>` : ""}
+      </ol>`;
+    }
+    content += "\n</li></div>";
+    return content;
+  }
+  const { isPreferSource } = module;
+  const declarationHovers = variables.map((item) => {
+    const position = isPreferSource ? item.identifier.position.source : item.identifier.position.transformed;
+    const range = position && getSelectionRange(position, Range);
+    if (!position || !range) {
+      return;
+    }
+    return {
+      range,
+      options: {
+        stickiness: 1,
+        inlineClassName: "tree-shaking-statement-declaration-identifier",
+        isWholeLine: false,
+        showIfCollapsed: true,
+        hoverMessage: {
+          supportHtml: true,
+          supportThemeIcons: true,
+          isTrusted: true,
+          value: getVariableMessage(item)
+        }
+      }
+    };
+  }).filter((item) => Boolean(item));
+  return declarationHovers;
+}
+export {
+  ellipsisPath,
+  getHoverMessageInModule,
+  getModulePositionString,
+  getTreeFilesDefaultExpandedKeys,
+  useFileStructures
+};

package/dist/pages/index.d.ts

@@ -6,3 +6,4 @@ export * as LoaderFiles from './WebpackLoaders/Analysis';
 export * as PluginsAnalyze from './WebpackPlugins';
 export * as ModuleResolve from './ModuleResolve';
 export * as RuleIndex from './Resources/RuleIndex';
+export * as TreeShaking from './TreeShaking';

package/dist/pages/index.js

@@ -6,6 +6,7 @@ import * as LoaderFiles from "./WebpackLoaders/Analysis";
 import * as PluginsAnalyze from "./WebpackPlugins";
 import * as ModuleResolve from "./ModuleResolve";
 import * as RuleIndex from "./Resources/RuleIndex";
+import * as TreeShaking from "./TreeShaking";
 export {
   BundleSize,
   LoaderFiles,
@@ -14,5 +15,6 @@ export {
   ModuleResolve,
   Overall,
   PluginsAnalyze,
-  RuleIndex
+  RuleIndex,
+  TreeShaking
 };

package/dist/utils/url.d.ts

@@ -4,3 +4,4 @@ export declare function changeOrigin(origin: string): string;
 export declare function getSharingUrl(manifestCloudUrl: string): string;
 export declare function getDemoUrl(): string | null;
 export declare const getShortPath: (path: string) => string;
+export declare function isDef<E = unknown>(data: E): data is NonNullable<E>;

package/dist/utils/url.js

@@ -61,11 +61,15 @@ const getShortPath = (path) => {
   }
   return path;
 };
+function isDef(data) {
+  return data !== void 0 && data !== null;
+}
 export {
   changeOrigin,
   getDemoUrl,
   getManifestUrlFromUrlQuery,
   getSharingUrl,
   getShortPath,
+  isDef,
   isJsDataUrl
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsdoctor/components",
-  "version": "0.1.9",
+  "version": "0.2.0",
   "main": "./dist/index.js",
   "license": "MIT",
   "module": "dist/index.js",
@@ -48,20 +48,24 @@
     "@monaco-editor/react": "4.6.0",
     "@types/lodash-es": "4.17.6",
     "@types/node": "^16",
+    "@types/path-browserify": "1.0.1",
     "@types/react": "^18",
+    "@types/react-highlight-words": "^0.16.7",
     "@types/url-parse": "1.4.8",
     "ansi-to-react": "6.1.6",
     "antd": "5.15.3",
     "axios": "^1.6.1",
     "dayjs": "1.11.6",
-    "echarts": "^5.4.3",
+    "echarts": "^5.5.0",
     "echarts-for-react": "^3.0.2",
     "i18next": "22.0.4",
     "lodash-es": "4.17.21",
     "monaco-editor": "0.34.1",
+    "path-browserify": "1.0.1",
     "rc-dialog": "9.1.0",
     "rc-tree": "5.7.2",
     "react": "18.2.0",
+    "react-highlight-words": "^0.20.0",
     "react-hyper-tree": "0.3.12",
     "react-i18next": "12.0.0",
     "react-json-view": "1.21.3",
@@ -71,9 +75,9 @@
     "terser": "^5.26.0",
     "typescript": "^5.2.2",
     "url-parse": "1.5.10",
-    "@rsdoctor/graph": "0.1.9",
-    "@rsdoctor/types": "0.1.9",
-    "@rsdoctor/utils": "0.1.9"
+    "@rsdoctor/graph": "0.2.0",
+    "@rsdoctor/types": "0.2.0",
+    "@rsdoctor/utils": "0.2.0"
   },
   "publishConfig": {
     "access": "public",