@rsdoctor/components 0.0.0-next-20240620044732

package/dist/pages/Overall/responsiveGridList.js

@@ -0,0 +1,28 @@
+import { jsx } from "react/jsx-runtime";
+import { Col, Grid, Row } from "antd";
+import { useMemo } from "react";
+import { Size } from "../../constants";
+const ResponsiveGridLayout = ({ children }) => {
+  const { sm, xxl } = Grid.useBreakpoint();
+  const gutters = useMemo(() => {
+    if (xxl) {
+      return [Size.BasePadding * 2, Size.BasePadding];
+    } else {
+      return [Size.BasePadding, Size.BasePadding];
+    }
+  }, [sm, xxl]);
+  return /* @__PURE__ */ jsx(
+    Row,
+    {
+      gutter: gutters,
+      wrap: true,
+      style: {
+        marginBottom: Size.BasePadding
+      },
+      children: children.map((e, i) => /* @__PURE__ */ jsx(Col, { xs: 24, sm: 24, md: 12, lg: 8, children: e }, i))
+    }
+  );
+};
+export {
+  ResponsiveGridLayout
+};

package/dist/pages/Resources/RuleIndex/constants.d.ts

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

package/dist/pages/Resources/RuleIndex/constants.js

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

package/dist/pages/Resources/RuleIndex/index.d.ts

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

package/dist/pages/Resources/RuleIndex/index.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Rule } from "@rsdoctor/types";
+import { Badge, Card, Space, Typography, Col, Row, Tag } from "antd";
+import ReactMarkdown from "react-markdown";
+import { values } from "lodash-es";
+import { Title } from "../../../components/Title";
+import { Size } from "../../../constants";
+import { useUrlQuery } from "../../../utils";
+const Page = () => {
+  const query = useUrlQuery();
+  const defaultErrorCode = query[Rule.RsdoctorRuleClientConstant.UrlQueryForErrorCode] || "";
+  const [ruleMessage, setRuleMessage] = useState(Rule.RuleErrorMap[defaultErrorCode]);
+  const dataSource = values(Rule.RuleErrorMap);
+  useEffect(() => {
+    window.scrollTo({ top: 0 });
+  }, []);
+  return /* @__PURE__ */ jsxs(Row, { gutter: Size.BasePadding / 2, children: [
+    /* @__PURE__ */ jsx(Col, { span: 8, children: /* @__PURE__ */ jsx(Card, { title: /* @__PURE__ */ jsx(Title, { text: "list of the error codes." }), bordered: true, children: /* @__PURE__ */ jsx(Space, { direction: "vertical", children: dataSource.map((e, i) => /* @__PURE__ */ jsxs(
+      Space,
+      {
+        style: { marginTop: i === 0 ? 0 : Size.BasePadding / 2, cursor: "pointer" },
+        onClick: () => setRuleMessage(e),
+        align: "center",
+        children: [
+          /* @__PURE__ */ jsx(Badge, { status: "default" }),
+          /* @__PURE__ */ jsx(Typography.Text, { code: true, children: /* @__PURE__ */ jsx("a", { children: e.code }) }),
+          /* @__PURE__ */ jsx(Typography.Text, { style: { color: ruleMessage && ruleMessage.code === e.code ? "#1890ff" : void 0 }, children: e.title })
+        ]
+      },
+      e.code
+    )) }) }) }),
+    /* @__PURE__ */ jsx(Col, { span: 16, children: ruleMessage ? /* @__PURE__ */ jsx(
+      Card,
+      {
+        title: /* @__PURE__ */ jsxs(Row, { justify: "space-between", children: [
+          /* @__PURE__ */ jsxs(Space, { children: [
+            /* @__PURE__ */ jsx(Typography.Text, { code: true, children: ruleMessage.code }),
+            /* @__PURE__ */ jsx(Typography.Text, { children: ruleMessage.title })
+          ] }),
+          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Tag, { children: ruleMessage.category }) })
+        ] }),
+        bodyStyle: { paddingTop: 0 },
+        bordered: true,
+        children: /* @__PURE__ */ jsx(Typography.Paragraph, { children: ruleMessage.type === "markdown" ? /* @__PURE__ */ jsx(ReactMarkdown, { children: ruleMessage.description }) : /* @__PURE__ */ jsx(Typography.Text, { children: ruleMessage.description }) })
+      }
+    ) : /* @__PURE__ */ jsx(Card, { title: "This page lists all the error codes emitted by the Rsdoctor.", bordered: true, children: /* @__PURE__ */ jsx(Typography.Text, { children: "click the error code in left bar to show more details." }) }) })
+  ] });
+};
+export * from "./constants";
+export {
+  Page
+};

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 {};