@rsdoctor/components 0.0.2-beta.0

package/dist/components/Overall/bundle.js

@@ -0,0 +1,167 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Space, Typography, Tag, Row, Col, Descriptions } from "antd";
+import { useMemo } from "react";
+import { Client, SDK } from "@rsdoctor/types";
+import { ExceptionOutlined } from "@ant-design/icons";
+import { useNavigate } from "react-router-dom";
+import { createFileStructures, formatSize, useDuplicatePackagesByErrors, useI18n } from "../../utils";
+import { DuplicatePackageDrawerWithServer, TextDrawer } from "../TextDrawer";
+import { Card } from "../Card";
+import { ServerAPIProvider } from "../Manifest";
+import { FileTree } from "../FileTree";
+import listStyles from "./list.module";
+import cardStyles from "./card.module";
+import numberButtonStyles from "./NumberButton.module";
+import { NumberButton } from "./NumberButton";
+const getFilesWithDrawer = (data) => {
+  const fileStructures = useMemo(() => {
+    if (!data.files.length)
+      return [];
+    return createFileStructures({
+      files: data.files.map((e) => e.path),
+      fileTitle(file, basename) {
+        const { size, initial } = data.files.find((e) => e.path === file);
+        return /* @__PURE__ */ jsxs(Space, { children: [
+          /* @__PURE__ */ jsx(Typography.Text, { children: basename }),
+          /* @__PURE__ */ jsx(Tag, { color: "success", style: { marginRight: 0 }, children: formatSize(size) }),
+          initial ? /* @__PURE__ */ jsx(Tag, { color: "cyan", children: "initial" }) : null
+        ] });
+      }
+    });
+  }, [data.files]);
+  return /* @__PURE__ */ jsx(Fragment, { children: data.files.length ? /* @__PURE__ */ jsx(
+    TextDrawer,
+    {
+      buttonProps: {
+        size: "small"
+      },
+      buttonStyle: {
+        fontSize: "inherit"
+      },
+      text: /* @__PURE__ */ jsxs(Fragment, { children: [
+        data.count,
+        " ",
+        /* @__PURE__ */ jsx(ExceptionOutlined, {})
+      ] }),
+      children: /* @__PURE__ */ jsx(FileTree, { treeData: fileStructures, defaultExpandAll: true })
+    }
+  ) : data.count });
+};
+const BundleDescriptions = ({ res }) => {
+  const items = [
+    {
+      key: "total-files-count",
+      label: "Total files",
+      children: res.all.total.count
+    },
+    {
+      key: "total-files-size",
+      label: "",
+      children: ""
+    },
+    {
+      key: "js-files-count",
+      label: "JS files",
+      children: getFilesWithDrawer(res.js.total)
+    },
+    {
+      key: "js-files-size",
+      label: "JS size",
+      children: formatSize(res.js.total.size)
+    },
+    {
+      key: "css-files-count",
+      label: "CSS files",
+      children: getFilesWithDrawer(res.css.total)
+    },
+    {
+      key: "css-files-size",
+      label: "CSS size",
+      children: formatSize(res.css.total.size)
+    },
+    {
+      key: "font-files-count",
+      label: "Font files",
+      children: getFilesWithDrawer(res.fonts.total)
+    },
+    {
+      key: "font-files-size",
+      label: "Font size",
+      children: formatSize(res.fonts.total.size)
+    },
+    {
+      key: "html-files-count",
+      label: "HTML files",
+      children: getFilesWithDrawer(res.html.total)
+    },
+    {
+      key: "html-files-size",
+      label: "HTML size",
+      children: formatSize(res.html.total.size)
+    },
+    {
+      key: "image-files-count",
+      label: "Image files",
+      children: getFilesWithDrawer(res.imgs.total)
+    },
+    {
+      key: "image-files-size",
+      label: "Image size",
+      children: formatSize(res.imgs.total.size)
+    },
+    {
+      key: "media-files-count",
+      label: "Media files",
+      children: getFilesWithDrawer(res.media.total)
+    },
+    {
+      key: "media-files-size",
+      label: "Media size",
+      children: formatSize(res.media.total.size)
+    }
+  ];
+  return /* @__PURE__ */ jsx(Descriptions, { className: listStyles.root, size: "small", column: 2, items });
+};
+const BundleOverall = ({ errors, cwd }) => {
+  const { t } = useI18n();
+  const navigate = useNavigate();
+  const duplicatePackages = useDuplicatePackagesByErrors(errors);
+  return /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetAssetsSummary, body: { withFileContent: false }, children: (res) => {
+    const totalSizeStr = formatSize(res.all.total.size);
+    return /* @__PURE__ */ jsxs(Card, { title: t("Bundle Overall"), className: cardStyles.card, children: [
+      /* @__PURE__ */ jsxs(Row, { gutter: 16, children: [
+        /* @__PURE__ */ jsx(Col, { span: 12, className: numberButtonStyles.container, children: /* @__PURE__ */ jsx(
+          NumberButton,
+          {
+            theme: "success",
+            number: totalSizeStr,
+            description: "Total Size",
+            numberFontSize: "30px",
+            onClick: () => {
+              navigate(Client.DoctorClientRoutes.BundleSize);
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Col, { span: 12, className: numberButtonStyles.container, children: /* @__PURE__ */ jsx(
+          DuplicatePackageDrawerWithServer,
+          {
+            cwd,
+            duplicatePackages,
+            button: /* @__PURE__ */ jsx(
+              NumberButton,
+              {
+                theme: duplicatePackages.length === 0 ? "success" : "warning",
+                number: duplicatePackages.length,
+                description: "Duplicate Packages"
+              }
+            )
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsx(BundleDescriptions, { res })
+    ] });
+  } });
+};
+export {
+  BundleOverall
+};

package/dist/components/Overall/card.module.js

@@ -0,0 +1,5 @@
+import "./card_module.css";
+var card_module_default = { "card": "card_3bba1" };
+export {
+  card_module_default as default
+};

package/dist/components/Overall/card_module.css

@@ -0,0 +1,6 @@
+.card_3bba1 {
+  min-height: 440px;
+}
+.card_3bba1 .ant-card-body {
+  padding-bottom: 16px;
+}

package/dist/components/Overall/compile.d.ts

@@ -0,0 +1,5 @@
+import { SDK } from '@rsdoctor/types';
+import React from 'react';
+export declare const CompileOverall: React.FC<{
+  summary: SDK.SummaryData;
+}>;

package/dist/components/Overall/compile.js

@@ -0,0 +1,68 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Summary } from "@rsdoctor/utils/common";
+import { Divider, Progress, Space, Typography } from "antd";
+import { formatCosts, useI18n } from "../../utils";
+import { Card } from "../Card";
+import { BootstrapChartContainer } from "../Charts/bootstrap";
+import { DoneChartContainer } from "../Charts/done";
+import { MinifyChartContainer } from "../Charts/minify";
+import cardStyles from "./card.module";
+import styles from "./compile.module";
+const Stage = ({ children, name, showDivider = true }) => {
+  return /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+    /* @__PURE__ */ jsx(Typography.Text, { style: { color: "inherit" }, children: name }),
+    showDivider ? /* @__PURE__ */ jsx(Divider, { type: "vertical" }) : null,
+    children
+  ] });
+};
+const getProgressColor = (percent) => {
+  if (percent < 33.3) {
+    return { "0%": "#95de64", "100%": "#5cdbd3" };
+  }
+  return { "0%": "#ff9c6e", "100%": "#ff7875" };
+};
+const CompileOverall = ({ summary }) => {
+  var _a;
+  const { t } = useI18n();
+  if (!((_a = summary == null ? void 0 : summary.costs) == null ? void 0 : _a.length))
+    return null;
+  const maxCosts = Math.max(...summary.costs.map((item) => item.costs));
+  return /* @__PURE__ */ jsx(Card, { title: t("Compile Overall"), className: cardStyles.card, children: /* @__PURE__ */ jsx(Space, { style: { wordBreak: "break-all", width: "100%" }, size: 20, direction: "vertical", children: summary.costs.map((e) => {
+    const { name, costs } = e;
+    const percent = costs * 100 / maxCosts;
+    const ProgressBar = /* @__PURE__ */ jsx(
+      Progress,
+      {
+        className: styles.progress,
+        percent,
+        status: "normal",
+        strokeColor: getProgressColor(percent),
+        format: () => formatCosts(costs)
+      }
+    );
+    switch (name) {
+      case Summary.SummaryCostsDataName.Bootstrap:
+        return /* @__PURE__ */ jsxs(Stage, { name: "Bootstrap ~ BeforeCompile", children: [
+          /* @__PURE__ */ jsx(BootstrapChartContainer, { summary }),
+          ProgressBar
+        ] }, name);
+      case Summary.SummaryCostsDataName.Compile:
+        return /* @__PURE__ */ jsx(Stage, { name: "Compile", showDivider: false, children: ProgressBar }, name);
+      case Summary.SummaryCostsDataName.Done:
+        return /* @__PURE__ */ jsxs(Stage, { name: "AfterCompile ~ Done", children: [
+          /* @__PURE__ */ jsx(DoneChartContainer, { summary }),
+          ProgressBar
+        ] }, name);
+      case Summary.SummaryCostsDataName.Minify:
+        return /* @__PURE__ */ jsxs(Stage, { name: "Minify", children: [
+          /* @__PURE__ */ jsx(MinifyChartContainer, { summary }),
+          ProgressBar
+        ] }, name);
+      default:
+        return null;
+    }
+  }) }) });
+};
+export {
+  CompileOverall
+};

package/dist/components/Overall/compile.module.js

@@ -0,0 +1,5 @@
+import "./compile_module.css";
+var compile_module_default = { "progress": "progress_61324" };
+export {
+  compile_module_default as default
+};

package/dist/components/Overall/compile_module.css

@@ -0,0 +1,4 @@
+.progress_61324 .ant-progress-text {
+  opacity: 0.8;
+  font-size: 13px;
+}

package/dist/components/Overall/index.d.ts

@@ -0,0 +1,3 @@
+export * from './bundle';
+export * from './compile';
+export * from './project';

package/dist/components/Overall/index.js

@@ -0,0 +1,3 @@
+export * from "./bundle";
+export * from "./compile";
+export * from "./project";

package/dist/components/Overall/list.module.js

@@ -0,0 +1,5 @@
+import "./list_module.css";
+var list_module_default = { "root": "root_17e15" };
+export {
+  list_module_default as default
+};

package/dist/components/Overall/list_module.css

@@ -0,0 +1,7 @@
+.root_17e15 .ant-descriptions-item-label,
+.root_17e15 .ant-descriptions-item-content {
+  font-size: 13px;
+}
+.root_17e15 .ant-descriptions-item {
+  padding-bottom: 6px !important;
+}

package/dist/components/Overall/project.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SDK } from '@rsdoctor/types';
+export declare const ProjectOverall: React.FC<{
+  configs: SDK.ConfigData;
+  cwd: string;
+  envinfo: SDK.EnvInfo;
+  alerts: SDK.ErrorsData;
+}>;

package/dist/components/Overall/project.js

@@ -0,0 +1,73 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Space, Row, Col, Descriptions } from "antd";
+import { filter } from "lodash-es";
+import { useI18n } from "../../utils";
+import { WebpackConfigurationViewer } from "../Configuration";
+import { Card } from "../Card";
+import listStyles from "./list.module";
+import cardStyles from "./card.module";
+import numberButtonStyles from "./NumberButton.module";
+import { TextDrawer } from "../TextDrawer";
+import { BundleAlerts, CompileAlerts, OverlayAlertsWithTips } from "../Alerts";
+import { NumberButton } from "./NumberButton";
+const ProjectOverall = ({ configs = [], cwd, envinfo, alerts = [] }) => {
+  const { t } = useI18n();
+  const warns = filter(alerts, (e) => e.level === "warn").length;
+  const errors = alerts.length - warns;
+  const items = [
+    ...Object.keys(envinfo).map((key) => {
+      const regexp = /Version$/;
+      const isVersion = regexp.test(key);
+      return {
+        key,
+        label: isVersion ? key.replace(regexp, "") : key,
+        children: envinfo ? envinfo[key] : void 0
+      };
+    }),
+    ...configs.filter((item) => !!item.version).map((config) => {
+      const { name, version } = config;
+      return {
+        key: name,
+        label: name,
+        children: version
+      };
+    }),
+    {
+      key: "cwd",
+      label: "cwd",
+      children: cwd
+    }
+  ];
+  return /* @__PURE__ */ jsxs(Card, { title: t("Project Overall"), extra: /* @__PURE__ */ jsx(WebpackConfigurationViewer, {}), className: cardStyles.card, children: [
+    /* @__PURE__ */ jsxs(Row, { gutter: 16, children: [
+      /* @__PURE__ */ jsx(Col, { span: 12, className: numberButtonStyles.container, children: /* @__PURE__ */ jsx(
+        TextDrawer,
+        {
+          button: /* @__PURE__ */ jsx(NumberButton, { theme: errors === 0 ? "success" : "error", number: errors, description: "Errors" }),
+          drawerProps: { title: "Errors List" },
+          children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [
+            /* @__PURE__ */ jsx(OverlayAlertsWithTips, { defaultOpen: false }),
+            /* @__PURE__ */ jsx(BundleAlerts, { filter: (r) => r.level === "error" }),
+            /* @__PURE__ */ jsx(CompileAlerts, { filter: (r) => r.level === "error" })
+          ] })
+        }
+      ) }),
+      /* @__PURE__ */ jsx(Col, { span: 12, className: numberButtonStyles.container, children: /* @__PURE__ */ jsx(
+        TextDrawer,
+        {
+          button: /* @__PURE__ */ jsx(NumberButton, { theme: warns === 0 ? "success" : "warning", number: warns, description: "Warnings" }),
+          drawerProps: { title: "Warnings List" },
+          children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { width: "100%" }, children: [
+            /* @__PURE__ */ jsx(OverlayAlertsWithTips, { defaultOpen: false }),
+            /* @__PURE__ */ jsx(BundleAlerts, { filter: (r) => r.level === "warn" }),
+            /* @__PURE__ */ jsx(CompileAlerts, { filter: (r) => r.level === "warn" })
+          ] })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsx(Descriptions, { className: listStyles.root, items, size: "small", column: 1 })
+  ] });
+};
+export {
+  ProjectOverall
+};

package/dist/components/Plugins/webpack.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { SDK } from '@rsdoctor/types';
+interface WebpackPluginsTableDataItem {
+  tapName: string;
+  hook: string;
+  key: string;
+  hookData: SDK.PluginHookData[];
+}
+export interface WebpackPluginsDataTableProps {
+  dataSource: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetPluginData>;
+}
+export declare function useWebpackPluginsDataSource(plugin: SDK.PluginData, selectedTapNames: string[], selectedHooks: string[]): {
+  dataSource: WebpackPluginsTableDataItem[];
+  tapNames: string[];
+  hooks: string[];
+};
+export declare const WebpackPluginsDataTable: React.FC<WebpackPluginsDataTableProps>;
+export {};

package/dist/components/Plugins/webpack.js

@@ -0,0 +1,76 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { Table, Tooltip } from "antd";
+import { flatten, includes, map, sumBy, uniq, values } from "lodash-es";
+import { formatCosts } from "../../utils";
+function useWebpackPluginsDataSource(plugin, selectedTapNames, selectedHooks) {
+  const tapNames = useMemo(() => uniq(map(flatten(values(plugin)), (e) => e.tapName)), [plugin]);
+  const hooks = useMemo(() => Object.keys(plugin), [plugin]);
+  const dataSource = useMemo(() => {
+    if (!tapNames.length)
+      return [];
+    return tapNames.reduce((total, tapName) => {
+      if (selectedTapNames.length && !includes(selectedTapNames, tapName)) {
+        return total;
+      }
+      hooks.forEach((hook) => {
+        if (selectedHooks.length && !includes(selectedHooks, hook)) {
+          return;
+        }
+        const hookData = plugin[hook].filter((e) => e.tapName === tapName);
+        if (hookData.length === 0)
+          return;
+        total.push({
+          tapName,
+          hook,
+          key: `${tapName}${hook}`,
+          hookData
+        });
+      });
+      return total;
+    }, []);
+  }, [plugin, selectedTapNames, selectedHooks]);
+  return {
+    dataSource,
+    tapNames,
+    hooks
+  };
+}
+const WebpackPluginsDataTable = ({ dataSource }) => {
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      dataSource,
+      rowKey: (v) => `${v.tapName}_${v.hook}`,
+      columns: [
+        {
+          title: `Plugin Tap Name`,
+          render: (_v, r) => r.tapName
+        },
+        {
+          title: `Hook`,
+          render: (_v, r) => r.hook
+        },
+        {
+          title: "calls",
+          render: (_v, r) => /* @__PURE__ */ jsx(Tooltip, { title: `"${r.hook}" has been called ${r.data.length} times by "${r.tapName}"`, children: r.data.length }),
+          sorter(a, b) {
+            return a.data.length - b.data.length;
+          }
+        },
+        {
+          title: "duration(total)",
+          render: (_v, r) => formatCosts(sumBy(r.data, (e) => e.costs)),
+          sorter(a, b) {
+            return sumBy(a.data, (e) => e.costs) - sumBy(b.data, (e) => e.costs);
+          },
+          defaultSortOrder: "descend"
+        }
+      ]
+    }
+  );
+};
+export {
+  WebpackPluginsDataTable,
+  useWebpackPluginsDataSource
+};

package/dist/components/Resolver/analysis.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SDK } from '@rsdoctor/types';
+export declare const ResolverFiles: React.FC<{
+  filename: string;
+  cwd: string;
+  resolver: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetResolverFileTree>;
+}>;
+export declare const ResolverAnalysisBase: React.FC<{
+  project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;
+}>;
+export declare const ResolverAnalysis: React.FC<Omit<{
+  project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;
+}, "project"> & Partial<{
+  body?: any;
+}>>;

package/dist/components/Resolver/analysis.js

@@ -0,0 +1,160 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useMemo, useState } from "react";
+import { get, map } from "lodash-es";
+import { Button, Card, Col, Row, Space, Table, Typography } from "antd";
+import { CloseCircleOutlined, FileSearchOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
+import { Resolver } from "@rsdoctor/utils/common";
+import { SDK } from "@rsdoctor/types";
+import { Size } from "../../constants";
+import { createFileStructures, formatCosts, mapFileKey } from "../../utils";
+import { FileTree } from "../FileTree";
+import { KeywordInput } from "../Form/keyword";
+import { DiffViewer } from "../CodeViewer";
+import { ServerAPIProvider, withServerAPI } from "../Manifest";
+const height = 735;
+const ResolverDetailsPanel = ({
+  filepath,
+  before,
+  after,
+  resolvers
+}) => {
+  const [collapsed, setCollapsed] = useState(false);
+  return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsx(Col, { flex: 1, children: /* @__PURE__ */ jsx(Card, { title: "Resolve Diff Viewer", children: /* @__PURE__ */ jsx(DiffViewer, { filepath, before, after, editorProps: { height } }) }) }),
+    /* @__PURE__ */ jsx(Col, { span: collapsed ? 2 : 7, children: /* @__PURE__ */ jsx(
+      Card,
+      {
+        title: collapsed ? "..." : "Resolve Details",
+        extra: /* @__PURE__ */ jsx(
+          Button,
+          {
+            onClick: () => setCollapsed(!collapsed),
+            size: "small",
+            icon: collapsed ? /* @__PURE__ */ jsx(MenuFoldOutlined, {}) : /* @__PURE__ */ jsx(MenuUnfoldOutlined, {})
+          }
+        ),
+        style: collapsed ? { width: 80 } : void 0,
+        children: collapsed ? null : /* @__PURE__ */ jsx(
+          Table,
+          {
+            style: { width: "100%", height, overflowY: "scroll", wordBreak: "break-all" },
+            size: "small",
+            pagination: false,
+            bordered: true,
+            rowKey: (e) => e.request,
+            columns: [
+              {
+                title: "Source Code",
+                width: 200,
+                render: (_v, r) => /* @__PURE__ */ jsx(Typography.Text, { copyable: true, children: /* @__PURE__ */ jsx(Typography.Text, { code: true, strong: true, children: r.request }) })
+              },
+              {
+                title: "Duration",
+                width: 80,
+                render: (_v, r) => /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: formatCosts(r.costs) }),
+                sorter: (a, b) => a.costs - b.costs,
+                sortDirections: ["descend", "ascend"]
+              },
+              {
+                title: "Resolve Result",
+                render: (_v, r) => {
+                  if (Resolver.isResolveSuccessData(r))
+                    return /* @__PURE__ */ jsx(Typography.Text, { copyable: true, children: r.result });
+                  return /* @__PURE__ */ jsx(CloseCircleOutlined, { style: { color: "#f50" } });
+                }
+              }
+            ],
+            dataSource: resolvers
+          }
+        )
+      }
+    ) })
+  ] });
+};
+const ResolverFiles = (props) => {
+  const { resolver, cwd } = props;
+  const [filepath, setFilepath] = useState("");
+  const inlinedResourcePathKey = "__RESOURCEPATH__";
+  const n = "/node_modules/";
+  const paths = useMemo(() => {
+    return map(resolver, (e) => e.issuerPath).filter(Boolean);
+  }, [resolver]);
+  const filterPaths = useMemo(() => {
+    return paths.filter((e) => props.filename ? e.indexOf(props.filename) > -1 : true);
+  }, [props.filename, paths]);
+  const allNodeModules = filterPaths.length && filterPaths.every((e) => e.indexOf(n) > -1);
+  const files = useMemo(() => {
+    return createFileStructures({
+      files: filterPaths.length ? filterPaths : paths,
+      cwd,
+      fileTitle(file, basename) {
+        return /* @__PURE__ */ jsx("div", { onClick: () => setFilepath(file), children: basename });
+      }
+    });
+  }, [props.filename]);
+  return /* @__PURE__ */ jsxs(Row, { justify: "start", align: "top", wrap: false, gutter: Size.BasePadding, children: [
+    /* @__PURE__ */ jsx(Col, { span: 7, children: /* @__PURE__ */ jsx(Card, { title: "Files", children: /* @__PURE__ */ jsx(
+      FileTree,
+      {
+        style: { width: "100%", height, overflow: "scroll" },
+        treeData: files,
+        defaultExpandedKeys: mapFileKey(
+          files,
+          allNodeModules ? 1 : 4,
+          allNodeModules ? void 0 : (node) => {
+            const resourcePath = get(node, inlinedResourcePathKey);
+            const isNodeModules = resourcePath.indexOf(n) > -1;
+            if (filterPaths.length && filterPaths.every((e) => e.indexOf(n) > -1)) {
+              return true;
+            }
+            return !isNodeModules;
+          }
+        )
+      },
+      `tree_${props.filename}`
+    ) }) }),
+    filepath && /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetResolverFileDetails, body: { filepath }, children: (resolvers) => /* @__PURE__ */ jsx(ResolverDetailsPanel, __spreadValues({}, resolvers)) })
+  ] });
+};
+const ResolverAnalysisBase = ({ project }) => {
+  const { root: cwd } = project;
+  const [filename, setFilename] = useState("");
+  return /* @__PURE__ */ jsxs("div", { style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx(Space, { style: { marginTop: Size.BasePadding, marginBottom: Size.BasePadding }, children: /* @__PURE__ */ jsx(
+      KeywordInput,
+      {
+        icon: /* @__PURE__ */ jsx(FileSearchOutlined, {}),
+        label: "Filename",
+        placeholder: "search filename by keyword",
+        onChange: (e) => setFilename(e)
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetResolverFileTree, children: (resolver) => /* @__PURE__ */ jsx(ResolverFiles, { filename, resolver, cwd }) })
+  ] });
+};
+const ResolverAnalysis = withServerAPI({
+  api: SDK.ServerAPI.API.GetProjectInfo,
+  responsePropName: "project",
+  Component: ResolverAnalysisBase
+});
+export {
+  ResolverAnalysis,
+  ResolverAnalysisBase,
+  ResolverFiles
+};

package/dist/components/Select/index.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface LoaderNamesSelectProps {
+  style?: React.CSSProperties;
+  onChange: (loaders: string[]) => void;
+  loaderNames: string[];
+}
+export declare const LoaderNamesSelect: React.FC<LoaderNamesSelectProps>;
+export declare const LoaderCommonSelect: React.FC<{
+  onChange(value: {
+    loaders: string[];
+    filename: string;
+  }): void;
+  loaderNames: string[];
+}>;
+export {};