@rsdoctor/components 0.0.0-next-20240620044732

package/dist/components/BundleDiff/DiffContainer/assets.js

@@ -0,0 +1,507 @@
+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 { Graph } from "@rsdoctor/utils/common";
+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 "@rsdoctor/components/utils";
+import { Percent, SizePercent } from "@rsdoctor/components/elements";
+import { KeywordInput } from "@rsdoctor/components";
+import { ModuleRowForAsset } from "./row";
+import { ViewChanges } from "./changes";
+import { UpdateType, SortType } from "./constants";
+import { formatDiffSize } from "./utils";
+import { Color, Size } from "../../../constants";
+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/components/BundleDiff/DiffContainer/cards.d.ts

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

package/dist/components/BundleDiff/DiffContainer/cards.js

@@ -0,0 +1,156 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DuplicatePackageDrawer } from "@rsdoctor/components";
+import { DiffCard, Percent } from "@rsdoctor/components/elements";
+import {
+  useDuplicatePackagesByErrors,
+  useModuleGraph,
+  useUniqModules
+} from "@rsdoctor/components/utils";
+import { Client } from "@rsdoctor/types";
+import { Graph } from "@rsdoctor/utils/common";
+import { Col, Row, Space, Typography } from "antd";
+import { Size } from "../../../constants";
+import { PackagesStatistic, getPackagesTableDataSource } from "./packages";
+const DiffCards = ({
+  baseline,
+  current,
+  assetsDiffResult
+}) => {
+  const baselineMod = useUniqModules(baseline.moduleGraph.modules);
+  const currentMod = useUniqModules(current.moduleGraph.modules);
+  const baselineDup = useDuplicatePackagesByErrors(baseline.errors);
+  const currentDup = useDuplicatePackagesByErrors(current.errors);
+  const baselineModuleGraph = useModuleGraph(baseline.moduleGraph);
+  const currentModuleGraph = useModuleGraph(current.moduleGraph);
+  const baselineCwd = baseline.root;
+  const currentCwd = current.root;
+  const packages = getPackagesTableDataSource({
+    baseline: baseline.packageGraph,
+    current: current.packageGraph
+  });
+  const arr = [
+    {
+      title: ["Bundle Size"],
+      value: [assetsDiffResult.all.total]
+    },
+    {
+      title: ["Total JS", "Initial JS"],
+      value: [assetsDiffResult.js.total, assetsDiffResult.js.initial]
+    },
+    {
+      title: ["Total CSS", "Initial CSS"],
+      value: [assetsDiffResult.css.total, assetsDiffResult.css.initial]
+    },
+    {
+      title: ["Images", "Fonts", "Media"],
+      value: [
+        assetsDiffResult.imgs.total,
+        assetsDiffResult.fonts.total,
+        assetsDiffResult.media.total
+      ]
+    },
+    { title: ["HTML"], value: [assetsDiffResult.html.total] },
+    { title: ["Others"], value: [assetsDiffResult.others.total] }
+  ];
+  return /* @__PURE__ */ jsxs(
+    Row,
+    {
+      gutter: [Size.BasePadding, Size.BasePadding],
+      wrap: true,
+      style: { marginBottom: Size.BasePadding },
+      children: [
+        arr.map((e) => {
+          return /* @__PURE__ */ jsx(Col, { style: { minWidth: 335 }, children: /* @__PURE__ */ jsx(DiffCard, { titles: e.title, datas: e.value, showPercentInTitle: true }) }, e.title.join(","));
+        }),
+        /* @__PURE__ */ jsx(Col, { style: { minWidth: 335 }, children: /* @__PURE__ */ jsx(
+          DiffCard,
+          {
+            titles: ["Duplicate Packages"],
+            datas: [
+              {
+                size: {
+                  baseline: baselineDup.length,
+                  current: currentDup.length
+                },
+                count: {
+                  baseline: baselineDup.length,
+                  current: currentDup.length
+                },
+                percent: 0,
+                state: Client.RsdoctorClientDiffState.Equal
+              }
+            ],
+            formatter: (_v, target) => /* @__PURE__ */ jsx(
+              DuplicatePackageDrawer,
+              {
+                duplicatePackages: target === "baseline" ? baselineDup : currentDup,
+                moduleGraph: target === "baseline" ? baselineModuleGraph : currentModuleGraph,
+                cwd: target === "baseline" ? baselineCwd : currentCwd,
+                buttonProps: { size: "small" },
+                moduleCodeMap: target === "baseline" ? baseline.moduleCodeMap : current.moduleCodeMap
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Col, { style: { minWidth: 335 }, children: /* @__PURE__ */ jsx(
+          DiffCard,
+          {
+            titles: ["Modules"],
+            datas: [
+              {
+                size: {
+                  baseline: baselineMod.length,
+                  current: currentMod.length
+                },
+                count: {
+                  baseline: baselineMod.length,
+                  current: currentMod.length
+                },
+                percent: 0,
+                state: Client.RsdoctorClientDiffState.Equal
+              }
+            ],
+            formatter: (v, t) => {
+              if (t === "baseline")
+                return v;
+              const diff = Graph.diffSize(baselineMod.length, currentMod.length);
+              return /* @__PURE__ */ jsxs(Space, { style: { fontSize: "inherit" }, children: [
+                /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: "inherit" }, children: v }),
+                /* @__PURE__ */ jsx(Percent, { ...diff })
+              ] });
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx(Col, { style: { minWidth: 335 }, children: /* @__PURE__ */ jsx(
+          DiffCard,
+          {
+            titles: [
+              /* @__PURE__ */ jsxs(Space, { children: [
+                /* @__PURE__ */ jsx(Typography.Text, { style: { color: "inherit" }, children: "Packages" }),
+                /* @__PURE__ */ jsx(PackagesStatistic, { dataSource: packages })
+              ] }, "0")
+            ],
+            datas: [
+              {
+                size: {
+                  baseline: packages.filter((e) => e.baseline).length,
+                  current: packages.filter((e) => e.current).length
+                },
+                count: {
+                  baseline: packages.filter((e) => e.baseline).length,
+                  current: packages.filter((e) => e.current).length
+                },
+                percent: 0,
+                state: Client.RsdoctorClientDiffState.Equal
+              }
+            ],
+            formatter: (v, t) => t === "baseline" ? v : /* @__PURE__ */ jsx(Space, { children: v })
+          }
+        ) })
+      ]
+    }
+  );
+};
+export {
+  DiffCards
+};

package/dist/components/BundleDiff/DiffContainer/changes.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+interface ViewChangesContentProps {
+    file: string;
+    data: {
+        baseline?: string | void;
+        current: string | void;
+        baselineTitle?: string;
+        currentTitle?: string;
+        group: string;
+    }[];
+}
+export declare const ViewChanges: React.FC<ViewChangesContentProps & {
+    text?: string;
+}>;
+export {};