@rsdoctor/components 0.0.0-next-20240620044732

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

@@ -0,0 +1,302 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import {
+  Col,
+  Divider,
+  Row,
+  Select,
+  Space,
+  Table,
+  Tag,
+  Tooltip,
+  Typography
+} from "antd";
+import { includes, uniq, values } from "lodash-es";
+import { InfoCircleOutlined, FileSearchOutlined } from "@ant-design/icons";
+import { Graph } from "@rsdoctor/utils/common";
+import { beautifyModulePath, useUniqModules } from "@rsdoctor/components/utils";
+import { ViewChanges } from "./changes";
+import { UpdateType } from "./constants";
+import { Badge as Bdg, KeywordInput } from "@rsdoctor/components";
+import { ModuleHashPattern, getTargetColumnPropsForModuleRow } from "./row";
+import { Size } from "../../../constants";
+function getUpdateType(e) {
+  if (e.baseline && !e.current) {
+    return UpdateType.Deleted;
+  }
+  if (!e.baseline && e.current) {
+    return UpdateType.New;
+  }
+  if (e.baseline && e.current) {
+    if (e.baseline.size.sourceSize === e.current.size.sourceSize && e.baseline.size.parsedSize === e.current.size.parsedSize) {
+      return UpdateType.NotChanged;
+    }
+    return UpdateType.Changed;
+  }
+  throw new Error("Update Type not match");
+}
+const FileUpdateTypeTag = ({ type }) => {
+  if (type === UpdateType.NotChanged) {
+    return /* @__PURE__ */ jsx(Tooltip, { title: "It hasn't changed between Baseline and Current", children: /* @__PURE__ */ jsx(Tag, { color: "success", children: "Not Changed" }) });
+  }
+  if (type === UpdateType.Changed) {
+    return /* @__PURE__ */ jsx(Tooltip, { title: "It has been changed between Baseline and Current", children: /* @__PURE__ */ jsx(Tag, { color: "warning", children: "Changed" }) });
+  }
+  if (type === UpdateType.New) {
+    return /* @__PURE__ */ jsx(Tooltip, { title: "It is created in Current", children: /* @__PURE__ */ jsx(Tag, { color: "error", children: "New" }) });
+  }
+  if (type === UpdateType.Deleted) {
+    return /* @__PURE__ */ jsx(Tooltip, { title: "It has been deleted in Current", children: /* @__PURE__ */ jsx(Tag, { color: "error", children: "Deleted" }) });
+  }
+  return null;
+};
+const Modules = ({
+  baseline,
+  current
+}) => {
+  const bModules = useMemo(
+    () => useUniqModules(baseline.moduleGraph.modules),
+    [baseline]
+  );
+  const cModules = useMemo(
+    () => useUniqModules(current.moduleGraph.modules),
+    [current]
+  );
+  const bChunks = baseline.chunkGraph.chunks;
+  const cChunks = current.chunkGraph.chunks;
+  const bRoot = baseline.root;
+  const cRoot = current.root;
+  const [keyword, setKeyword] = useState();
+  const [selectedUpdateTypes, setSelectedUpdateTypes] = useState(
+    []
+  );
+  const dataSource = useMemo(() => {
+    const res = {};
+    bModules.forEach((mod) => {
+      const modPath = mod.webpackId?.replace(ModuleHashPattern, "") || mod.path?.replace(ModuleHashPattern, "");
+      if (!res[modPath]) {
+        res[modPath] = {
+          path: modPath,
+          baseline: mod
+        };
+      } else {
+        console.warn("[Baseline Module Exists]: ", mod, res);
+      }
+    });
+    cModules.forEach((mod) => {
+      const modPath = mod.webpackId?.replace(ModuleHashPattern, "") || mod.path?.replace(ModuleHashPattern, "");
+      if (!res[modPath]) {
+        res[modPath] = {
+          path: modPath
+        };
+      }
+      res[modPath].current = mod;
+    });
+    return values(res);
+  }, [bModules, cModules]);
+  const filteredDataSource = useMemo(() => {
+    let list = dataSource.slice();
+    if (keyword) {
+      list = list.filter((e) => e.path.indexOf(keyword) > -1);
+    }
+    if (selectedUpdateTypes.length) {
+      list = list.filter((e) => {
+        return includes(selectedUpdateTypes, getUpdateType(e));
+      });
+    }
+    return list;
+  }, [dataSource, keyword, selectedUpdateTypes]);
+  const { bFilteredModulesLength, cFilteredModulesLength } = useMemo(() => {
+    return {
+      bFilteredModulesLength: filteredDataSource.filter((e) => e.baseline).length,
+      cFilteredModulesLength: filteredDataSource.filter((e) => e.current).length
+    };
+  }, [filteredDataSource]);
+  return /* @__PURE__ */ jsxs(Row, { gutter: [Size.BasePadding, Size.BasePadding], children: [
+    /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsxs(Space, { wrap: true, children: [
+      /* @__PURE__ */ jsx(
+        KeywordInput,
+        {
+          icon: /* @__PURE__ */ jsx(FileSearchOutlined, {}),
+          label: "",
+          labelStyle: { width: 45 },
+          placeholder: "Search by name",
+          onChange: (e) => {
+            setKeyword(e);
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          mode: "multiple",
+          placeholder: "Filter by changed type",
+          style: { width: 200 },
+          options: values(UpdateType).map((e) => ({ label: e, value: e })),
+          allowClear: true,
+          onChange: (e) => {
+            setSelectedUpdateTypes(e);
+          }
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsx(
+      Table,
+      {
+        bordered: true,
+        sticky: { offsetHeader: 54 },
+        pagination: {
+          pageSize: 20,
+          size: "small"
+        },
+        scroll: { x: 1700 },
+        dataSource: filteredDataSource,
+        rowKey: (e) => e.path,
+        columns: [
+          {
+            fixed: "left",
+            title: /* @__PURE__ */ jsxs(
+              Tooltip,
+              {
+                title: /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+                  /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+                    "filtered modules is ",
+                    filteredDataSource.length,
+                    " (Current & Baseline)"
+                  ] }),
+                  /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+                    "total modules is ",
+                    dataSource.length,
+                    " (Current & Baseline)"
+                  ] })
+                ] }),
+                children: [
+                  /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "Modules" }),
+                  /* @__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) => {
+              const { alias, inNodeModules } = beautifyModulePath(
+                r.path,
+                r.baseline ? bRoot : cRoot
+              );
+              return /* @__PURE__ */ jsxs(Space, { children: [
+                /* @__PURE__ */ jsx(Tooltip, { title: r.path, children: /* @__PURE__ */ jsx(Typography.Text, { copyable: { text: r.path }, children: alias }) }),
+                /* @__PURE__ */ jsx(FileUpdateTypeTag, { type: getUpdateType(r) }),
+                inNodeModules ? /* @__PURE__ */ jsx(Tag, { color: "warning", children: "node_modules" }) : null
+              ] });
+            }
+          },
+          getTargetColumnPropsForModuleRow(
+            "current",
+            bFilteredModulesLength,
+            cFilteredModulesLength
+          ),
+          getTargetColumnPropsForModuleRow(
+            "baseline",
+            bFilteredModulesLength,
+            cFilteredModulesLength
+          ),
+          {
+            title: "in Assets",
+            render: (_v, r) => {
+              const b = [];
+              const c = [];
+              if (r.current) {
+                Graph.getChunksByModule(r.current, cChunks).forEach(
+                  (e) => e.assets.forEach((asset) => c.push(asset))
+                );
+              }
+              if (r.baseline) {
+                Graph.getChunksByModule(r.baseline, bChunks).forEach(
+                  (e) => e.assets.forEach((asset) => b.push(asset))
+                );
+              }
+              if (!b.length && !c.length)
+                return null;
+              return /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+                uniq(c).filter(Boolean).map((e) => /* @__PURE__ */ jsx(Bdg, { label: "Current", value: e }, `c_${e}`)),
+                uniq(b).filter(Boolean).map((e) => /* @__PURE__ */ jsx(Bdg, { label: "Baseline", value: e }, `b_${e}`))
+              ] });
+            }
+          },
+          {
+            title: "Actions",
+            width: 200,
+            render: (_v, r) => {
+              const isChanged = getUpdateType(r) === UpdateType.Changed;
+              return /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { maxWidth: 170 }, children: [
+                isChanged ? /* @__PURE__ */ jsx(
+                  ViewChanges,
+                  {
+                    text: "View Changes",
+                    file: r.path,
+                    data: [
+                      {
+                        baseline: baseline.moduleCodeMap[r.baseline?.id]?.source,
+                        current: current.moduleCodeMap[r.current?.id]?.source,
+                        group: "Source"
+                      },
+                      {
+                        baseline: baseline.moduleCodeMap[r.baseline?.id]?.transformed,
+                        current: current.moduleCodeMap[r.current?.id]?.transformed,
+                        group: "Transformed Source"
+                      },
+                      {
+                        baseline: baseline.moduleCodeMap[r.baseline?.id]?.parsedSource,
+                        current: current.moduleCodeMap[r.current?.id]?.parsedSource,
+                        group: "Parsed Source"
+                      }
+                    ]
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  ViewChanges,
+                  {
+                    text: "Current Result Viewer",
+                    file: r.path,
+                    data: [
+                      {
+                        baseline: current.moduleCodeMap[r.current?.id]?.source,
+                        current: current.moduleCodeMap[r.current?.id]?.transformed,
+                        baselineTitle: "Current Source",
+                        currentTitle: "Current Transformed Source",
+                        group: "Transformed Source"
+                      },
+                      {
+                        baseline: current.moduleCodeMap[r.current?.id]?.source,
+                        current: current.moduleCodeMap[r.current?.id]?.parsedSource,
+                        baselineTitle: "Current Source",
+                        currentTitle: "Current Parsed Source",
+                        group: "Parsed Source"
+                      }
+                    ]
+                  }
+                )
+              ] });
+            }
+          }
+        ]
+      }
+    ) })
+  ] });
+};
+export {
+  FileUpdateTypeTag,
+  Modules,
+  getUpdateType
+};

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

@@ -0,0 +1,5 @@
+import { Client } from '@rsdoctor/types';
+import React from 'react';
+export declare const Overview: React.FC<{
+    assetsDiffResult: Client.RsdoctorClientAssetsDiffResult;
+}>;

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

@@ -0,0 +1,178 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Space, Table, Tag, Typography } from "antd";
+import React from "react";
+import { formatDiffSize } from "./utils";
+import { Color, Size } from "../../../constants";
+import { formatSize } from "../../../utils";
+import { Percent } from "./diff";
+const Overview = ({ assetsDiffResult }) => {
+  const dataSource = [
+    {
+      type: "JS",
+      data: assetsDiffResult.js
+    },
+    {
+      type: "CSS",
+      data: assetsDiffResult.css
+    },
+    {
+      type: "Imgs",
+      data: assetsDiffResult.imgs
+    },
+    {
+      type: "Fonts",
+      data: assetsDiffResult.fonts
+    },
+    {
+      type: "Media",
+      data: assetsDiffResult.media
+    },
+    {
+      type: "HTML",
+      data: assetsDiffResult.html
+    },
+    {
+      type: "Others",
+      data: assetsDiffResult.others
+    }
+  ];
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      bordered: true,
+      pagination: false,
+      dataSource,
+      rowKey: (v) => v.type,
+      style: { marginTop: Size.BasePadding - Size.BasePadding / 4 },
+      columns: [
+        {
+          title: `File Type`,
+          dataIndex: "type",
+          key: "type",
+          render: (v) => /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: v })
+        },
+        {
+          title: `Size`,
+          dataIndex: "data",
+          key: "size",
+          children: [
+            {
+              title: "Current",
+              dataIndex: "data",
+              key: "csize",
+              render: (v) => {
+                const total = /* @__PURE__ */ jsxs(React.Fragment, { children: [
+                  /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: formatSize(v.total.size.current) }),
+                  /* @__PURE__ */ jsx(Percent, { percent: v.total.percent, state: v.total.state }),
+                  formatDiffSize(
+                    v.total.size.baseline,
+                    v.total.size.current,
+                    v.total.state
+                  )
+                ] });
+                if (v.initial) {
+                  return /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+                    /* @__PURE__ */ jsxs(Space, { children: [
+                      /* @__PURE__ */ jsx(Tag, { color: Color.Blue, children: "Total" }),
+                      total
+                    ] }),
+                    /* @__PURE__ */ jsxs(Space, { children: [
+                      /* @__PURE__ */ jsx(Tag, { color: Color.Blue, children: "Initial" }),
+                      /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: formatSize(v.initial.size.current) }),
+                      /* @__PURE__ */ jsx(
+                        Percent,
+                        {
+                          percent: v.initial.percent,
+                          state: v.initial.state
+                        }
+                      ),
+                      formatDiffSize(
+                        v.initial.size.baseline,
+                        v.initial.size.current,
+                        v.initial.state
+                      )
+                    ] })
+                  ] });
+                }
+                return /* @__PURE__ */ jsx(Space, { children: total });
+              }
+            },
+            {
+              title: "Baseline",
+              dataIndex: "data",
+              key: "bsize",
+              render: (v) => {
+                const total = /* @__PURE__ */ jsx(Typography.Text, { children: formatSize(v.total.size.baseline) });
+                if (v.initial) {
+                  return /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+                    /* @__PURE__ */ jsxs(Space, { children: [
+                      /* @__PURE__ */ jsx(Tag, { color: Color.Blue, children: "Total" }),
+                      total
+                    ] }),
+                    /* @__PURE__ */ jsxs(Space, { children: [
+                      /* @__PURE__ */ jsx(Tag, { color: Color.Blue, children: "Initial" }),
+                      /* @__PURE__ */ jsx(Typography.Text, { children: formatSize(v.initial.size.baseline) })
+                    ] })
+                  ] });
+                }
+                return total;
+              }
+            }
+          ]
+        },
+        {
+          title: `Count`,
+          dataIndex: "data",
+          key: "count",
+          children: [
+            {
+              title: "Current",
+              dataIndex: "data",
+              key: "ccount",
+              render: (v) => {
+                const total = /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: v.total.count.current });
+                if (v.initial) {
+                  return /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+                    /* @__PURE__ */ jsxs(Space, { children: [
+                      /* @__PURE__ */ jsx(Tag, { color: Color.Blue, children: "Total" }),
+                      total
+                    ] }),
+                    /* @__PURE__ */ jsxs(Space, { children: [
+                      /* @__PURE__ */ jsx(Tag, { color: Color.Blue, children: "Initial" }),
+                      /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: v.initial.count.current })
+                    ] })
+                  ] });
+                }
+                return /* @__PURE__ */ jsx(Space, { children: total });
+              }
+            },
+            {
+              title: "Baseline",
+              dataIndex: "data",
+              key: "bcount",
+              render: (v) => {
+                const total = /* @__PURE__ */ jsx(Typography.Text, { children: v.total.count.baseline });
+                if (v.initial) {
+                  return /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+                    /* @__PURE__ */ jsxs(Space, { children: [
+                      /* @__PURE__ */ jsx(Tag, { color: Color.Blue, children: "Total" }),
+                      total
+                    ] }),
+                    /* @__PURE__ */ jsxs(Space, { children: [
+                      /* @__PURE__ */ jsx(Tag, { color: Color.Blue, children: "Initial" }),
+                      /* @__PURE__ */ jsx(Typography.Text, { children: v.initial.count.baseline })
+                    ] })
+                  ] });
+                }
+                return /* @__PURE__ */ jsx(Space, { children: total });
+              }
+            }
+          ]
+        }
+      ]
+    }
+  );
+};
+export {
+  Overview
+};

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

@@ -0,0 +1,19 @@
+import { SDK } from '@rsdoctor/types';
+import React from 'react';
+import { UpdateType } from './constants';
+export declare const PackagesStatistic: React.FC<{
+    dataSource: ReturnType<typeof getPackagesTableDataSource>;
+}>;
+export declare const getPackagesTableDataSource: ({ baseline, current, }: {
+    baseline: SDK.PackageGraphData;
+    current: SDK.PackageGraphData;
+}) => {
+    updateType: UpdateType;
+    name: string;
+    baseline?: SDK.PackageData[] | undefined;
+    current?: SDK.PackageData[] | undefined;
+}[];
+export declare const Packages: React.FC<{
+    baseline: SDK.PackageGraphData;
+    current: SDK.PackageGraphData;
+}>;