@rsdoctor/components 0.0.0-next-20240620044732

package/dist/components/Overall/NumberButton_module.css

@@ -0,0 +1,70 @@
+.errorNumber_3c2f5,
+.warningNumber_3c2f5,
+.successNumber_3c2f5 {
+  font-size: 36px;
+  font-weight: 500;
+  line-height: 54px;
+}
+
+.errorNumber_3c2f5,
+.errorText_3c2f5 {
+  color: #f5222d;
+}
+
+.warningNumber_3c2f5,
+.warningText_3c2f5 {
+  color: #fa8c16;
+}
+
+.successNumber_3c2f5,
+.successText_3c2f5 {
+  color: #52c41a;
+}
+
+.errorButton_3c2f5,
+.warningButton_3c2f5,
+.successButton_3c2f5 {
+  width: 100%;
+  height: 90px !important;
+  color: inherit;
+  font-size: inherit !important;
+  padding: 4px 0 8px !important;
+  border-radius: 12px !important;
+}
+
+.errorButton_3c2f5 {
+  background-color: rgba(245, 34, 45, 0.08);
+}
+.errorButton_3c2f5:hover {
+  background-color: rgba(245, 34, 45, 0.15) !important;
+}
+
+.warningButton_3c2f5 {
+  background-color: rgba(250, 139, 22, 0.08);
+}
+.warningButton_3c2f5:hover {
+  background-color: rgba(250, 139, 22, 0.15) !important;
+}
+
+.successButton_3c2f5 {
+  background-color: rgba(82, 196, 26, 0.08);
+}
+.successButton_3c2f5:hover {
+  background-color: rgba(82, 196, 26, 0.15) !important;
+}
+
+.errorText_3c2f5,
+.warningText_3c2f5,
+.successText_3c2f5 {
+  opacity: 0.75;
+  font-size: 13px;
+  padding-bottom: 6px;
+  margin-top: -2px;
+}
+
+.container_3c2f5 {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin-bottom: 16px;
+}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import { SDK } from '@rsdoctor/types';
+export declare const BundleOverall: React.FC<{
+    errors: SDK.ErrorsData;
+    cwd: string;
+}>;

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.RsdoctorClientRoutes.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,67 @@
+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 }) => {
+  const { t } = useI18n();
+  if (!summary?.costs?.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;
+}>>;