@rsdoctor/components 0.1.0 → 0.1.2

package/README.md

@@ -1,11 +1,18 @@
-# Rsdoctor
+# Rsdoctor Components
 
-Rsdoctor is a tool for diagnosing and analyzing the build process and build artifacts to help developers quickly identify and solve problems.
+This package is the Rsdoctor reporting platform’s components.
 
-It also supports Webpack and Rspack builders, as well as various build frameworks, such as Rsbuild.
+## features
+
+- Rsdoctor is a one-stop tool for diagnosing and analyzing the build process and build artifacts.
+- Rsdoctor is a tool that supports Webpack and Rspack build analysis.
+- Rsdoctor is an analysis tool that can display the time-consuming and behavioral details of the compilation.
+- Rsdoctor is a tool that provides bundle Diff and other anti-degradation capabilities simultaneously.
 
 ## Documentation
 
+https://rsdoctor.dev/
+
 ## Contributing
 
 Please read the [Contributing Guide](https://github.com/web-infra-dev/rsdoctor/blob/main/CONTRIBUTING.md).

package/dist/components/Alert/change.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import { CodeChangeAlertProps } from './types';
 interface FixedProps {
-  setIsFixed(val: boolean): void;
+    setIsFixed(val: boolean): void;
 }
 export declare const CodeChangeDrawerContent: React.FC<CodeChangeAlertProps & FixedProps>;
 export declare const CodeChangeAlert: React.FC<CodeChangeAlertProps>;
-export {};
+export {};

package/dist/components/Alert/file-relation.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { FileRelationAlertProps } from './types';
-export declare const FileRelationAlert: React.FC<FileRelationAlertProps>;
+export declare const FileRelationAlert: React.FC<FileRelationAlertProps>;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import { AlertProps } from './types';
 import './index.sass';
-export declare const Alert: React.FC<AlertProps>;
+export declare const Alert: React.FC<AlertProps>;

package/dist/components/Alert/link.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { LinkAlertProps } from './types';
-export declare const LinkRuleAlert: React.FC<LinkAlertProps>;
+export declare const LinkRuleAlert: React.FC<LinkAlertProps>;

package/dist/components/Alert/package-relation.d.ts

@@ -2,16 +2,16 @@ import React from 'react';
 import { SDK } from '@rsdoctor/types';
 import { PackageRelationAlertProps } from './types';
 export declare const PackageRelationReasons: React.FC<{
-  data: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetPackageRelationAlertDetails>;
-  cwd: string;
+    data: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetPackageRelationAlertDetails>;
+    cwd: string;
 }>;
 export declare const PackageRelationReasonsWithServer: React.FC<Omit<{
-  data: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetPackageRelationAlertDetails>;
-  cwd: string;
+    data: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetPackageRelationAlertDetails>;
+    cwd: string;
 }, "data"> & Partial<{
-  body: {
-    id: string | number;
-    target: SDK.PackageBasicData;
-  };
+    body: {
+        id: string | number;
+        target: SDK.PackageBasicData;
+    };
 }>>;
-export declare const PackageRelationAlert: React.FC<PackageRelationAlertProps>;
+export declare const PackageRelationAlert: React.FC<PackageRelationAlertProps>;

package/dist/components/Alert/package-relation.js

@@ -1,11 +1,26 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createElement } from "react";
 import React, { useState } from "react";
-import { Space, Alert, Button, Typography, Divider, Tabs, Row, Col, Timeline, Card, Tag, Empty, Popover } from "antd";
+import {
+  Space,
+  Alert,
+  Button,
+  Typography,
+  Divider,
+  Tabs,
+  Row,
+  Col,
+  Timeline,
+  Card,
+  Tag,
+  Empty,
+  Popover,
+  Grid
+} from "antd";
 import { sumBy } from "lodash-es";
 import { Rule, SDK } from "@rsdoctor/types";
 import { ExpandAltOutlined, InfoCircleOutlined } from "@ant-design/icons";
-import { useRuleIndexNavigate, formatSize, useI18n, useWindowWidth } from "../../utils";
+import { useRuleIndexNavigate, formatSize, useI18n } from "../../utils";
 import { TextDrawer } from "../TextDrawer";
 import { Title } from "../Title";
 import { Size, Color } from "../../constants";
@@ -21,7 +36,13 @@ const PackageRelationReasons = ({ data, cwd }) => {
       {
         title: `The reasons for importing this version`,
         style: { height: "100%" },
-        extra: /* @__PURE__ */ jsx(Popover, { content: /* @__PURE__ */ jsx(Typography.Text, { children: t("DuplicatePakCodeExplain") }), children: /* @__PURE__ */ jsx("a", { href: "#", children: "Explain" }) }),
+        extra: /* @__PURE__ */ jsx(
+          Popover,
+          {
+            content: /* @__PURE__ */ jsx(Typography.Text, { children: t("DuplicatePakCodeExplain") }),
+            children: /* @__PURE__ */ jsx("a", { href: "#", children: "Explain" })
+          }
+        ),
         bodyStyle: { overflow: "scroll" },
         children: data.length ? /* @__PURE__ */ jsxs(React.Fragment, { children: [
           /* @__PURE__ */ jsx("div", { style: { marginBottom: Size.BasePadding }, children: /* @__PURE__ */ jsx(Typography.Text, { type: "secondary", strong: true, children: "Click the file path below to show the reason in code viewer." }) }),
@@ -45,7 +66,10 @@ const PackageRelationReasons = ({ data, cwd }) => {
                       setIndex(i);
                     },
                     strong: i === index,
-                    style: { color: i === index ? Color.Blue : "inherit", display: "block" },
+                    style: {
+                      color: i === index ? Color.Blue : "inherit",
+                      display: "block"
+                    },
                     children: text
                   }
                 )
@@ -72,110 +96,180 @@ const PackageRelationAlert = ({
   const navigate = useRuleIndexNavigate(code, data.link);
   const totalSize = sumBy(packages, (e) => e.targetSize.sourceSize);
   const totalSizeStr = formatSize(totalSize);
-  const windowWith = useWindowWidth();
+  const { xs, lg, xxl } = Grid.useBreakpoint();
   const { name } = packages.find((e) => !!e.target.name).target;
   const versions = packages.map((item) => item.target.version);
   return /* @__PURE__ */ jsx(
     Alert,
     {
-      showIcon: true,
-      message: /* @__PURE__ */ jsxs(Space, { children: [
-        /* @__PURE__ */ jsx(Typography.Text, { code: true, strong: true, onClick: navigate, style: { cursor: "pointer" }, children: /* @__PURE__ */ jsx("a", { children: code }) }),
-        /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: Rule.RuleErrorMap[code]?.title || data.title }),
-        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
-        /* @__PURE__ */ jsxs(Typography.Text, { children: [
-          /* @__PURE__ */ jsx(Typography.Text, { strong: true, code: true, children: name }),
-          /* @__PURE__ */ jsxs(Typography.Text, { strong: true, children: [
-            " ",
-            data.packages.length
-          ] }),
-          /* @__PURE__ */ jsx(Typography.Text, { children: " versions was found" })
-        ] }),
-        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
-        /* @__PURE__ */ jsx(
-          Bdg,
-          {
-            label: "total size",
-            value: totalSizeStr,
-            type: "error",
-            tooltip: `total size of ${data.packages.length} versions is ${totalSizeStr}`
-          }
-        )
-      ] }),
+      showIcon: !xs,
+      message: /* @__PURE__ */ jsxs(
+        Space,
+        {
+          wrap: true,
+          split: xs ? null : /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+          align: "center",
+          children: [
+            /* @__PURE__ */ jsxs(Space, { wrap: false, children: [
+              /* @__PURE__ */ jsx(
+                Typography.Text,
+                {
+                  code: true,
+                  strong: true,
+                  onClick: navigate,
+                  style: { cursor: "pointer" },
+                  children: /* @__PURE__ */ jsx("a", { children: code })
+                }
+              ),
+              /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: Rule.RuleErrorMap[code]?.title || data.title })
+            ] }),
+            /* @__PURE__ */ jsxs(
+              Typography.Paragraph,
+              {
+                ellipsis: { rows: 1 },
+                style: { marginBottom: 0 },
+                children: [
+                  /* @__PURE__ */ jsx(Typography.Text, { strong: true, code: true, children: name }),
+                  /* @__PURE__ */ jsxs(Typography.Text, { strong: true, children: [
+                    " ",
+                    data.packages.length
+                  ] }),
+                  /* @__PURE__ */ jsx(Typography.Text, { children: " versions was found" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Bdg,
+              {
+                label: "total size",
+                value: totalSizeStr,
+                type: "error",
+                tooltip: `total size of ${data.packages.length} versions is ${totalSizeStr}`
+              }
+            )
+          ]
+        }
+      ),
       description: /* @__PURE__ */ jsx(Space, { direction: "vertical", wrap: false, children: data.packages.map(({ target: el, targetSize: size }) => {
         const sizeStr = formatSize(size.sourceSize);
         const parsedSizeStr = size.parsedSize ? formatSize(size.parsedSize) : null;
         const name2 = `${el.name}@${el.version}`;
-        return /* @__PURE__ */ jsxs(Space, { style: { wordBreak: "break-all" }, align: "center", children: [
-          /* @__PURE__ */ jsx(Typography.Text, { style: { marginLeft: 4 }, children: "└" }),
-          /* @__PURE__ */ jsx(Bdg, { label: el.name, value: `v${el.version}`, tooltip: name2 }),
-          /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
-          /* @__PURE__ */ jsx(
-            Bdg,
-            {
-              label: /* @__PURE__ */ jsxs("div", { color: "rgb(255, 255, 255)", children: [
-                "Source Size ",
-                /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+        return /* @__PURE__ */ jsxs(
+          Space,
+          {
+            style: { wordBreak: "break-all" },
+            align: "center",
+            split: xs ? null : /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+            wrap: true,
+            children: [
+              /* @__PURE__ */ jsxs(Space, { wrap: false, children: [
+                /* @__PURE__ */ jsx(Typography.Text, { style: { marginLeft: 4 }, children: "└" }),
+                /* @__PURE__ */ jsx(
+                  Bdg,
+                  {
+                    label: el.name,
+                    value: `v${el.version}`,
+                    tooltip: name2
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxs(Space, { children: [
+                /* @__PURE__ */ jsx(
+                  Bdg,
+                  {
+                    label: /* @__PURE__ */ jsxs("div", { color: "rgb(255, 255, 255)", children: [
+                      "Source Size ",
+                      /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+                    ] }),
+                    value: sizeStr,
+                    tooltip: `The bundle size of "${name2}" is ${sizeStr}, this is source size.`,
+                    type: "error"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Bdg,
+                  {
+                    label: "Bundled size",
+                    value: parsedSizeStr || "CONCATENATED",
+                    tooltip: `The bundle size of "${name2}" is ${sizeStr}, this is after bundled, concatenated module cannot get bundled size. `,
+                    type: "error"
+                  }
+                )
               ] }),
-              value: sizeStr,
-              tooltip: `The bundle size of "${name2}" is ${sizeStr}, this is source size.`,
-              type: "error"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Bdg,
-            {
-              label: "Bundled size",
-              value: parsedSizeStr || "CONCATENATED",
-              tooltip: `The bundle size of "${name2}" is ${sizeStr}, this is after bundled, concatenated module cannot get bundled size. `,
-              type: "error"
-            }
-          ),
-          /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
-          /* @__PURE__ */ jsx(
-            Typography.Paragraph,
-            {
-              style: { marginBottom: 0, width: windowWith > 1500 ? "40rem" : windowWith > 1200 ? "30rem" : "20rem" },
-              copyable: { text: el.root },
-              ellipsis: { rows: 1, expandable: true, symbol: /* @__PURE__ */ jsx(ExpandAltOutlined, {}), tooltip: el.root },
-              code: true,
-              children: el.root
-            }
-          )
-        ] }, el.version);
+              /* @__PURE__ */ jsx(
+                Typography.Paragraph,
+                {
+                  style: {
+                    marginBottom: 0,
+                    width: xxl ? "40rem" : lg ? "30rem" : "20rem"
+                  },
+                  copyable: { text: el.root },
+                  ellipsis: {
+                    rows: 1,
+                    expandable: true,
+                    symbol: /* @__PURE__ */ jsx(ExpandAltOutlined, {}),
+                    tooltip: el.root
+                  },
+                  code: true,
+                  children: el.root
+                }
+              )
+            ]
+          },
+          el.version
+        );
       }) }),
       type: level === "warn" ? "info" : level,
       action: /* @__PURE__ */ jsxs(React.Fragment, { children: [
-        packages && packages.length > 0 ? /* @__PURE__ */ jsx(TextDrawer, { text: "Show Relations", buttonProps: { size: "small" }, drawerProps: { title: data.title }, children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", className: "alert-space", children: [
-          /* @__PURE__ */ jsxs(Space, { style: { marginBottom: Size.BasePadding / 2 }, children: [
-            /* @__PURE__ */ jsx(Title, { text: name, upperFisrt: false }),
-            /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: versions.length }),
-            /* @__PURE__ */ jsx(Typography.Text, { children: " versions was found: " }),
-            versions.map((e) => /* @__PURE__ */ jsx(Typography.Text, { strong: true, code: true, children: e }, e))
-          ] }),
-          /* @__PURE__ */ jsx(
-            Tabs,
-            {
-              type: "card",
-              size: "middle",
-              className: "tabs-space",
-              defaultActiveKey: versions[0],
-              items: packages.map((pkg) => {
-                const { target, targetSize } = pkg;
-                return {
-                  label: /* @__PURE__ */ jsxs(Space, { children: [
-                    /* @__PURE__ */ jsx(Typography.Text, { children: `${name}@${target.version}` }),
-                    /* @__PURE__ */ jsx(Tag, { color: Color.Red, children: formatSize(targetSize.sourceSize) })
-                  ] }),
-                  key: `${target.root}${target.name}${target.version}`,
-                  children: getPackageRelationContentComponent({ data, package: pkg })
-                };
-              })
-            }
-          )
-        ] }) }) : null,
+        packages && packages.length > 0 ? /* @__PURE__ */ jsx(
+          TextDrawer,
+          {
+            text: "Show Relations",
+            buttonProps: { size: "small" },
+            drawerProps: { title: data.title },
+            children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", className: "alert-space", children: [
+              /* @__PURE__ */ jsxs(Space, { style: { marginBottom: Size.BasePadding / 2 }, children: [
+                /* @__PURE__ */ jsx(Title, { text: name, upperFisrt: false }),
+                /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: versions.length }),
+                /* @__PURE__ */ jsx(Typography.Text, { children: " versions was found: " }),
+                versions.map((e) => /* @__PURE__ */ jsx(Typography.Text, { strong: true, code: true, children: e }, e))
+              ] }),
+              /* @__PURE__ */ jsx(
+                Tabs,
+                {
+                  type: "card",
+                  size: "middle",
+                  className: "tabs-space",
+                  defaultActiveKey: versions[0],
+                  items: packages.map((pkg) => {
+                    const { target, targetSize } = pkg;
+                    return {
+                      label: /* @__PURE__ */ jsxs(Space, { children: [
+                        /* @__PURE__ */ jsx(Typography.Text, { children: `${name}@${target.version}` }),
+                        /* @__PURE__ */ jsx(Tag, { color: Color.Red, children: formatSize(targetSize.sourceSize) })
+                      ] }),
+                      key: `${target.root}${target.name}${target.version}`,
+                      children: getPackageRelationContentComponent({
+                        data,
+                        package: pkg
+                      })
+                    };
+                  })
+                }
+              )
+            ] })
+          }
+        ) : null,
         /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
-        /* @__PURE__ */ jsx(Button, { type: "link", onClick: navigate, size: "small", icon: /* @__PURE__ */ jsx(InfoCircleOutlined, {}) })
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "link",
+            onClick: navigate,
+            size: "small",
+            icon: /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+          }
+        )
       ] })
     }
   );

package/dist/components/Alert/types.d.ts

@@ -1,31 +1,31 @@
 import { Rule } from '@rsdoctor/types';
 import React from 'react';
 export interface AlertProps extends Omit<PackageRelationAlertProps, 'data'> {
-  data: Rule.RuleStoreDataItem;
-  cwd: string;
+    data: Rule.RuleStoreDataItem;
+    cwd: string;
 }
 export interface PackageRelationAlertProps {
-  data: Rule.PackageRelationDiffRuleStoreData;
-  getPackageRelationContentComponent: React.FC<{
     data: Rule.PackageRelationDiffRuleStoreData;
-    package: Rule.PackageRelationData;
-  }>;
-  cwd: string;
+    getPackageRelationContentComponent: React.FC<{
+        data: Rule.PackageRelationDiffRuleStoreData;
+        package: Rule.PackageRelationData;
+    }>;
+    cwd: string;
 }
 export interface FileRelationAlertProps {
-  data: Rule.FileRelationRuleStoreData;
+    data: Rule.FileRelationRuleStoreData;
 }
 export interface CodeChangeAlertProps {
-  data: Rule.CodeChangeRuleStoreData;
-  cwd: string;
+    data: Rule.CodeChangeRuleStoreData;
+    cwd: string;
 }
 export interface CodeViewAlertProps {
-  data: Rule.CodeViewRuleStoreData;
-  cwd: string;
+    data: Rule.CodeViewRuleStoreData;
+    cwd: string;
 }
 export interface LinkAlertProps {
-  data: Rule.LinkRuleStoreData;
+    data: Rule.LinkRuleStoreData;
 }
 export interface EMOAlertProps {
-  data: Rule.EMORuleStoreData;
-}
+    data: Rule.EMORuleStoreData;
+}

package/dist/components/Alert/view.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { CodeViewAlertProps } from './types';
 export declare const CodeViewDrawerContent: React.FC<CodeViewAlertProps>;
-export declare const CodeViewAlert: React.FC<CodeViewAlertProps>;
+export declare const CodeViewAlert: React.FC<CodeViewAlertProps>;

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Rule, SDK } from '@rsdoctor/types';
 interface BundleAlertsProps {
-  filter?(alert: Rule.RuleStoreDataItem): boolean;
-  project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;
+    filter?(alert: Rule.RuleStoreDataItem): boolean;
+    project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;
 }
 export declare const BundleAlertsBase: React.FC<BundleAlertsProps>;
 export declare const BundleAlerts: React.FC<Omit<BundleAlertsProps, "project"> & Partial<{
-  body?: any;
+    body?: any;
 }>>;
-export {};
+export {};

package/dist/components/Alerts/common.d.ts

@@ -3,13 +3,13 @@ import { Rule } from '@rsdoctor/types';
 import { ViewMode } from '../../constants';
 import { AlertProps } from '../Alert/types';
 interface CommonAlertsContainerProps {
-  title: string;
-  cwd: string;
-  dataSource: Rule.RuleStoreDataItem[];
-  extraData: Omit<AlertProps, 'data'>;
-  viewMode: ViewMode;
-  setViewMode(mode: ViewMode): void;
-  extraCom?: JSX.Element | undefined;
+    title: string;
+    cwd: string;
+    dataSource: Rule.RuleStoreDataItem[];
+    extraData: Omit<AlertProps, 'data'>;
+    viewMode: ViewMode;
+    setViewMode(mode: ViewMode): void;
+    extraCom?: JSX.Element | undefined;
 }
 export declare const CommonAlertsContainer: React.FC<CommonAlertsContainerProps>;
-export {};
+export {};

package/dist/components/Alerts/common.js

@@ -12,36 +12,59 @@ const LevelMap = {
   warn: 1,
   error: 2
 };
-const CommonAlertsList = ({ dataSource, extraData }) => {
+const CommonAlertsList = ({
+  dataSource,
+  extraData
+}) => {
   const _dataSource = useMemo(
     () => dataSource.slice().sort((a, b) => {
       return LevelMap[b.level] - LevelMap[a.level];
     }),
     [dataSource]
   );
-  return /* @__PURE__ */ jsx(Space, { direction: "vertical", style: { wordBreak: "break-all", width: "100%" }, children: _dataSource.map((err, i) => {
-    return /* @__PURE__ */ jsx(Alert, { data: err, ...extraData }, i);
-  }) });
+  return /* @__PURE__ */ jsx(
+    Space,
+    {
+      direction: "vertical",
+      style: { wordBreak: "break-all", width: "100%" },
+      children: _dataSource.map((err, i) => {
+        return /* @__PURE__ */ jsx(Alert, { data: err, ...extraData }, i);
+      })
+    }
+  );
 };
-const CommonAlertsGroup = ({ dataSource, extraData }) => {
-  const _dataSource = useMemo(() => values(groupBy(dataSource, (e) => e.code)), [dataSource]);
-  return /* @__PURE__ */ jsx(Space, { direction: "vertical", style: { wordBreak: "break-all", width: "100%" }, children: /* @__PURE__ */ jsx(Collapse, { children: _dataSource.map((el) => {
-    const [first] = el;
-    return /* @__PURE__ */ jsx(
-      Collapse.Panel,
-      {
-        header: /* @__PURE__ */ jsxs(Space, { children: [
-          /* @__PURE__ */ jsx(Typography.Text, { code: true, strong: true, style: { cursor: "pointer" }, children: first.code }),
-          /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: Rule.RuleErrorMap[first.code]?.title || first.title }),
-          /* @__PURE__ */ jsx(Bdg, { label: "count", value: el.length, type: "error" })
-        ] }),
-        children: /* @__PURE__ */ jsx(Space, { direction: "vertical", size: 16, children: el.map((err, i) => {
-          return /* @__PURE__ */ jsx(Alert, { data: err, ...extraData }, i);
-        }) })
-      },
-      first.code
-    );
-  }) }) });
+const CommonAlertsGroup = ({
+  dataSource,
+  extraData
+}) => {
+  const _dataSource = useMemo(
+    () => values(groupBy(dataSource, (e) => e.code)),
+    [dataSource]
+  );
+  return /* @__PURE__ */ jsx(
+    Space,
+    {
+      direction: "vertical",
+      style: { wordBreak: "break-all", width: "100%" },
+      children: /* @__PURE__ */ jsx(Collapse, { children: _dataSource.map((el) => {
+        const [first] = el;
+        return /* @__PURE__ */ jsx(
+          Collapse.Panel,
+          {
+            header: /* @__PURE__ */ jsxs(Space, { children: [
+              /* @__PURE__ */ jsx(Typography.Text, { code: true, strong: true, style: { cursor: "pointer" }, children: first.code }),
+              /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: Rule.RuleErrorMap[first.code]?.title || first.title }),
+              /* @__PURE__ */ jsx(Bdg, { label: "count", value: el.length, type: "error" })
+            ] }),
+            children: /* @__PURE__ */ jsx(Space, { direction: "vertical", size: 16, style: { width: "100%" }, children: el.map((err, i) => {
+              return /* @__PURE__ */ jsx(Alert, { data: err, ...extraData }, i);
+            }) })
+          },
+          first.code
+        );
+      }) })
+    }
+  );
 };
 const CommonAlertsContainer = ({
   title,

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Rule, SDK } from '@rsdoctor/types';
 interface CompileAlertsProps {
-  filter?(alert: Rule.RuleStoreDataItem): boolean;
-  project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;
+    filter?(alert: Rule.RuleStoreDataItem): boolean;
+    project: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetProjectInfo>;
 }
 export declare const CompileAlerts: React.FC<Omit<CompileAlertsProps, "project"> & Partial<{
-  body?: any;
+    body?: any;
 }>>;
-export {};
+export {};

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

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

package/dist/components/Alerts/overlay.d.ts

@@ -2,25 +2,25 @@ import React from 'react';
 import { SDK } from '@rsdoctor/types';
 import 'rc-dialog/assets/index.css';
 export declare const OverlayAlertsModal: React.FC<{
-  alerts: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetOverlayAlerts>;
-  open: boolean;
-  onClose(): void;
+    alerts: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetOverlayAlerts>;
+    open: boolean;
+    onClose(): void;
 }>;
 export declare const OverlayAlertsTips: React.FC<{
-  alerts: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetOverlayAlerts>;
-  defaultOpen?: boolean;
+    alerts: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetOverlayAlerts>;
+    defaultOpen?: boolean;
 }>;
 export declare const OverlayAlertsButton: React.FC<{
-  alerts: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetOverlayAlerts>;
+    alerts: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetOverlayAlerts>;
 }>;
 export declare const OverlayAlertsWithButton: React.FC<Omit<{
-  alerts: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetOverlayAlerts>;
+    alerts: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetOverlayAlerts>;
 }, "alerts"> & Partial<{
-  body?: any;
+    body?: any;
 }>>;
 export declare const OverlayAlertsWithTips: React.FC<Omit<{
-  alerts: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetOverlayAlerts>;
-  defaultOpen?: boolean | undefined;
+    alerts: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetOverlayAlerts>;
+    defaultOpen?: boolean | undefined;
 }, "alerts"> & Partial<{
-  body?: any;
-}>>;
+    body?: any;
+}>>;