@rsdoctor/components 0.4.3 → 0.4.4

package/dist/components/Alerts/common.js

@@ -3,7 +3,7 @@ import { Collapse, Space, Radio, Typography, Tooltip } from "antd";
 import { useMemo } from "react";
 import { AppstoreOutlined, UnorderedListOutlined } from "@ant-design/icons";
 import { Rule } from "@rsdoctor/types";
-import { groupBy, values } from "lodash-es";
+import { groupBy, sumBy, values } from "lodash-es";
 import { Size, ViewMode } from "../../constants";
 import { Alert } from "../Alert";
 import { Card } from "../Card";
@@ -37,10 +37,21 @@ const CommonAlertsGroup = ({
   dataSource,
   extraData
 }) => {
-  const _dataSource = useMemo(
-    () => values(groupBy(dataSource, (e) => e.code)),
-    [dataSource]
-  );
+  const _dataSource = useMemo(() => {
+    const sortedDataSource = dataSource.toSorted((a, b) => {
+      let sizeA = 0;
+      let sizeB = 0;
+      if (a.type === "package-relation") {
+        sizeA = sumBy(a.packages, (e) => e.targetSize.sourceSize);
+      }
+      if (b.type === "package-relation") {
+        sizeB = sumBy(b.packages, (e) => e.targetSize.sourceSize);
+      }
+      return sizeB - sizeA;
+    });
+    const groups = groupBy(sortedDataSource, (e) => e.code);
+    return values(groups);
+  }, [dataSource]);
   return /* @__PURE__ */ jsx(
     Space,
     {

package/dist/pages/Resources/BundleDiff/DiffContainer/assets.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SDK } from '@rsdoctor/types';
+export declare const Assets: React.FC<{
+    outputFilename: string;
+    baseline: SDK.ServerAPI.ResponseTypes[SDK.ServerAPI.API.GetBundleDiffSummary];
+    current: SDK.ServerAPI.ResponseTypes[SDK.ServerAPI.API.GetBundleDiffSummary];
+}>;

package/dist/pages/Resources/BundleDiff/DiffContainer/assets.js

@@ -0,0 +1,505 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import {
+  Button,
+  Col,
+  Divider,
+  Row,
+  Select,
+  Space,
+  Table,
+  Tag,
+  Tooltip,
+  Typography
+} from "antd";
+import { flatten, includes, keys, sumBy, values } from "lodash-es";
+import {
+  CheckSquareOutlined,
+  InfoCircleOutlined,
+  MinusSquareOutlined,
+  PlusSquareOutlined,
+  SortAscendingOutlined,
+  FileSearchOutlined,
+  AppstoreAddOutlined
+} from "@ant-design/icons";
+import { Constants, Client } from "@rsdoctor/types";
+import { formatPercent, formatSize } from "../../../../utils";
+import { Color, Size } from "../../../../constants";
+import { Percent, SizePercent } from "../../../../components/Card/diff";
+import { KeywordInput } from "../../../../components/Form/keyword";
+import { ModuleRowForAsset } from "./row";
+import { ViewChanges } from "./changes";
+import { UpdateType, SortType } from "./constants";
+import { formatDiffSize } from "./utils";
+import { Graph } from "@rsdoctor/utils/common";
+const fileTypes = {
+  JS: [Constants.JSExtension],
+  CSS: [Constants.CSSExtension],
+  HTML: [Constants.HtmlExtension],
+  Imgs: Constants.ImgExtensions,
+  Fonts: Constants.FontExtensions,
+  Media: Constants.MediaExtensions,
+  Others: []
+};
+const definedExtensions = flatten(values(fileTypes));
+const Name = ({ data: r }) => {
+  const name = /* @__PURE__ */ jsxs(Space, { children: [
+    /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: r.alias }),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        title: /* @__PURE__ */ jsxs(Space, { style: { color: "inherit" }, direction: "vertical", children: [
+          r.current ? /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+            "Current realpath: ",
+            r.current.path
+          ] }) : null,
+          r.baseline ? /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+            "Baseline realpath: ",
+            r.baseline.path
+          ] }) : null
+        ] }),
+        children: /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+      }
+    )
+  ] });
+  if (r.baseline && !r.current) {
+    return /* @__PURE__ */ jsxs(Space, { children: [
+      /* @__PURE__ */ jsx(MinusSquareOutlined, { style: { color: Color.Red } }),
+      name
+    ] });
+  }
+  if (!r.baseline && r.current) {
+    return /* @__PURE__ */ jsxs(Space, { children: [
+      /* @__PURE__ */ jsx(PlusSquareOutlined, { style: { color: Color.Green } }),
+      name
+    ] });
+  }
+  if (r.baseline && r.current) {
+    return /* @__PURE__ */ jsxs(Space, { children: [
+      /* @__PURE__ */ jsx(CheckSquareOutlined, { style: { color: Color.Yellow } }),
+      name
+    ] });
+  }
+  return name;
+};
+const Assets = ({ baseline, current, outputFilename }) => {
+  const bOutPutFileName = outputFilename;
+  const [keyword, setKeyword] = useState();
+  const [selectedFileTypes, setSelectedFileTypes] = useState([]);
+  const [selectedUpdateTypes, setSelectedUpdateTypes] = useState(
+    []
+  );
+  const [selectedSortType, setSelectedSortType] = useState(
+    SortType.Size
+  );
+  const [selectedBAsset, setSelectedBAsset] = useState(null);
+  const [selectedCAsset, setSelectedCAsset] = useState(null);
+  const { assets: bAssets } = baseline.chunkGraph;
+  const { assets: cAssets } = current.chunkGraph;
+  const dataSource = useMemo(() => {
+    const res = {};
+    if (selectedBAsset && selectedCAsset) {
+      res.choose = {
+        alias: `${selectedBAsset} 
+ ${selectedCAsset}`,
+        current: cAssets.find((c) => c.path === selectedCAsset),
+        baseline: bAssets.find((b) => b.path === selectedBAsset)
+      };
+      return values(res);
+    }
+    bAssets.forEach((asset) => {
+      const alias = Graph.formatAssetName(asset.path, bOutPutFileName);
+      if (!res[alias]) {
+        res[alias] = {
+          alias,
+          baseline: asset
+        };
+      } else {
+        console.warn("[Baseline Asset Exists]: ", asset, res);
+      }
+    });
+    cAssets.forEach((asset) => {
+      const alias = Graph.formatAssetName(asset.path, bOutPutFileName);
+      if (!res[alias]) {
+        res[alias] = { alias };
+      }
+      res[alias].current = asset;
+    });
+    return values(res);
+  }, [bAssets, cAssets, selectedBAsset, selectedCAsset]);
+  const filteredDataSource = useMemo(() => {
+    let list = dataSource.slice();
+    if (keyword) {
+      list = list.filter((e) => e.alias.indexOf(keyword) > -1);
+    }
+    if (selectedFileTypes.length) {
+      const exts = flatten(
+        selectedFileTypes.map((e) => fileTypes[e])
+      );
+      const hasOthers = selectedFileTypes.indexOf("Others") > -1;
+      list = list.filter((e) => {
+        const asset = e.baseline || e.current;
+        if (Graph.isAssetMatchExtensions(asset, exts)) {
+          return true;
+        }
+        if (hasOthers) {
+          return !Graph.isAssetMatchExtensions(asset, definedExtensions);
+        }
+        return false;
+      });
+    }
+    if (selectedUpdateTypes.length) {
+      list = list.filter((e) => {
+        if (e.baseline && !e.current) {
+          return includes(selectedUpdateTypes, UpdateType.Deleted);
+        }
+        if (!e.baseline && e.current) {
+          return includes(selectedUpdateTypes, UpdateType.New);
+        }
+        if (e.baseline && e.current) {
+          if (e.baseline.size === e.current.size) {
+            return includes(selectedUpdateTypes, UpdateType.NotChanged);
+          }
+          return includes(selectedUpdateTypes, UpdateType.Changed);
+        }
+        return false;
+      });
+    }
+    if (selectedSortType) {
+      if (selectedSortType === SortType.Name) {
+        list.sort((a, b) => {
+          return a.alias.localeCompare(b.alias);
+        });
+      } else {
+        const { prev, others } = list.reduce(
+          (t, c) => {
+            if (c.current) {
+              if (c.baseline) {
+                t.prev.unshift(c);
+              } else {
+                t.prev.push(c);
+              }
+            } else {
+              t.others.push(c);
+            }
+            return t;
+          },
+          {
+            prev: [],
+            others: []
+          }
+        );
+        list = [
+          ...prev.sort((a, b) => {
+            if (b.current && a.current) {
+              if (selectedSortType === SortType.Delta) {
+                const { percent: percentA } = Graph.diffAssetsByExtensions(
+                  baseline.chunkGraph,
+                  current.chunkGraph,
+                  (asset) => Graph.formatAssetName(asset.path, bOutPutFileName) === a.alias
+                );
+                const { percent: percentB } = Graph.diffAssetsByExtensions(
+                  baseline.chunkGraph,
+                  current.chunkGraph,
+                  (asset) => Graph.formatAssetName(asset.path, bOutPutFileName) === b.alias
+                );
+                return percentB - percentA;
+              }
+              return b.current.size - a.current.size;
+            }
+            return -1;
+          }),
+          ...others
+        ];
+      }
+    }
+    return list;
+  }, [
+    dataSource,
+    keyword,
+    selectedFileTypes,
+    selectedUpdateTypes,
+    selectedSortType
+  ]);
+  const cSize = useMemo(
+    () => sumBy(filteredDataSource, (e) => e.current ? e.current.size : 0) || 0,
+    [filteredDataSource]
+  );
+  const bSize = useMemo(
+    () => sumBy(filteredDataSource, (e) => e.baseline ? e.baseline.size : 0) || 0,
+    [filteredDataSource]
+  );
+  return /* @__PURE__ */ jsxs(Row, { gutter: [Size.BasePadding, Size.BasePadding], children: [
+    /* @__PURE__ */ jsxs(Col, { span: 24, children: [
+      /* @__PURE__ */ jsxs(Space, { wrap: true, children: [
+        /* @__PURE__ */ jsx(
+          KeywordInput,
+          {
+            icon: /* @__PURE__ */ jsx(FileSearchOutlined, {}),
+            label: "",
+            labelStyle: { width: 45 },
+            placeholder: "Search by file name",
+            onChange: (e) => {
+              setKeyword(e);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            mode: "multiple",
+            placeholder: "Filter by file type",
+            style: { width: 250 },
+            options: keys(fileTypes).map((e) => ({ label: e, value: e })),
+            allowClear: true,
+            onChange: (e) => {
+              setSelectedFileTypes(e);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            mode: "multiple",
+            placeholder: "Filter by file changed type",
+            style: { width: 200 },
+            options: values(UpdateType).map((e) => ({ label: e, value: e })),
+            allowClear: true,
+            onChange: (e) => {
+              setSelectedUpdateTypes(e);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Select,
+          {
+            suffixIcon: /* @__PURE__ */ jsx(SortAscendingOutlined, {}),
+            options: values(SortType).map((e) => ({ label: e, value: e })),
+            value: selectedSortType,
+            onChange: (e) => {
+              setSelectedSortType(e);
+            }
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Row, { style: { marginTop: 10 }, gutter: [6, 6], children: [
+        /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(Button, { children: "Select Baseline Asset and Current Asset to Diff " }) }),
+        /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            allowClear: true,
+            placeholder: "select baseline assets",
+            showSearch: true,
+            style: { width: 300 },
+            options: values(baseline.chunkGraph.assets).map((e) => ({
+              label: e.path,
+              value: e.path
+            })),
+            onChange: (e) => setSelectedBAsset(e)
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsx(
+          Select,
+          {
+            allowClear: true,
+            placeholder: "select current assets",
+            showSearch: true,
+            style: { width: 300 },
+            options: values(current.chunkGraph.assets).map((e) => ({
+              label: e.path,
+              value: e.path
+            })),
+            onChange: (e) => setSelectedCAsset(e)
+          }
+        ) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsx(
+      Table,
+      {
+        bordered: true,
+        sticky: { offsetHeader: 54 },
+        pagination: {
+          pageSize: 20,
+          size: "small"
+        },
+        dataSource: filteredDataSource,
+        rowKey: (e) => e.alias,
+        expandable: {
+          expandedRowRender: (r) => {
+            return /* @__PURE__ */ jsx("div", { style: { margin: Size.BasePadding / 3 }, children: /* @__PURE__ */ jsx(
+              ModuleRowForAsset,
+              {
+                data: r,
+                baseline,
+                current
+              }
+            ) });
+          },
+          columnTitle: /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              title: "Click to expand row to see the modules which the chunk contains",
+              placement: "left",
+              children: /* @__PURE__ */ jsx(AppstoreAddOutlined, { style: { cursor: "pointer" } })
+            }
+          )
+        },
+        columns: [
+          {
+            title: /* @__PURE__ */ jsxs(
+              Tooltip,
+              {
+                title: /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+                  /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+                    "filtered assets is ",
+                    filteredDataSource.length
+                  ] }),
+                  /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+                    "total assets is ",
+                    dataSource.length
+                  ] })
+                ] }),
+                children: [
+                  /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Assets" }),
+                  /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+                  /* @__PURE__ */ jsxs(
+                    Typography.Text,
+                    {
+                      type: "secondary",
+                      style: { fontSize: 10, fontWeight: 400, marginRight: 4 },
+                      children: [
+                        filteredDataSource.length,
+                        "/",
+                        dataSource.length
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+                ]
+              }
+            ),
+            render: (_v, r) => /* @__PURE__ */ jsx(Name, { data: r })
+          },
+          {
+            title: () => {
+              const cs = formatSize(cSize);
+              const diff = Graph.diffSize(bSize, cSize);
+              return /* @__PURE__ */ jsxs(
+                Tooltip,
+                {
+                  title: `Current size is ${cs}, Delta is ${formatPercent(diff.percent)}`,
+                  children: [
+                    /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Current" }),
+                    /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+                    /* @__PURE__ */ jsxs(
+                      Typography.Text,
+                      {
+                        style: { fontSize: 10, fontWeight: 400, marginRight: 4 },
+                        children: [
+                          /* @__PURE__ */ jsx(
+                            Typography.Text,
+                            {
+                              style: { fontSize: "inherit", marginRight: 8 },
+                              children: cs
+                            }
+                          ),
+                          /* @__PURE__ */ jsx(
+                            SizePercent,
+                            {
+                              fontSize: "inherit",
+                              baseline: bSize,
+                              current: cSize
+                            }
+                          ),
+                          formatDiffSize(
+                            bSize,
+                            cSize,
+                            bSize > cSize ? Client.RsdoctorClientDiffState.Down : Client.RsdoctorClientDiffState.Up,
+                            { fontSize: 10, fontWeight: 400, marginLeft: 4 }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+                  ]
+                }
+              );
+            },
+            render: (_v, r) => {
+              if (r.current) {
+                const { percent, state } = Graph.diffAssetsByExtensions(
+                  baseline.chunkGraph,
+                  current.chunkGraph,
+                  (asset) => Graph.formatAssetName(asset.path, bOutPutFileName) === r.alias
+                );
+                const isInitial = Graph.isInitialAsset(
+                  r.current,
+                  current.chunkGraph.chunks
+                );
+                return /* @__PURE__ */ jsxs(Space, { children: [
+                  /* @__PURE__ */ jsx(Typography.Text, { children: formatSize(r.current.size) }),
+                  /* @__PURE__ */ jsx(Percent, { percent, state }),
+                  isInitial ? /* @__PURE__ */ jsx(Tag, { color: Color.Blue, children: "initial" }) : null
+                ] });
+              }
+              return "-";
+            }
+          },
+          {
+            title: () => {
+              const bs = formatSize(bSize);
+              return /* @__PURE__ */ jsxs(Tooltip, { title: `Baseline size is ${bs}`, children: [
+                /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Baseline" }),
+                /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+                /* @__PURE__ */ jsx(
+                  Typography.Text,
+                  {
+                    style: { fontSize: 10, fontWeight: 400, marginRight: 4 },
+                    children: bs
+                  }
+                ),
+                /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+              ] });
+            },
+            render: (_v, r) => {
+              if (r.baseline) {
+                const isInitial = Graph.isInitialAsset(
+                  r.baseline,
+                  baseline.chunkGraph.chunks
+                );
+                return /* @__PURE__ */ jsxs(Space, { children: [
+                  /* @__PURE__ */ jsx(Typography.Text, { children: formatSize(r.baseline.size) }),
+                  isInitial ? /* @__PURE__ */ jsx(Tag, { color: Color.Blue, children: "initial" }) : null
+                ] });
+              }
+              return "-";
+            }
+          },
+          {
+            title: "Actions",
+            key: "actions",
+            render: (_v, r) => {
+              return /* @__PURE__ */ jsx(
+                ViewChanges,
+                {
+                  file: r.alias,
+                  data: [
+                    {
+                      baseline: r.baseline?.content,
+                      current: r.current?.content,
+                      group: "assets"
+                    }
+                  ]
+                }
+              );
+            }
+          }
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  Assets
+};

package/dist/pages/Resources/BundleDiff/DiffContainer/cards.d.ts

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