@rsdoctor/components 0.4.2 → 0.4.4

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

@@ -0,0 +1,156 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Col, Row, Space, Typography } from "antd";
+import { Client } from "@rsdoctor/types";
+import { Size } from "../../../../constants";
+import { DiffCard, Percent } from "../../../../components/Card/diff";
+import {
+  useDuplicatePackagesByErrors,
+  useModuleGraph,
+  useUniqModules
+} from "../../../../utils";
+import { DuplicatePackageDrawer } from "../../../../components/TextDrawer";
+import { getPackagesTableDataSource, PackagesStatistic } from "./packages";
+import { Graph } from "@rsdoctor/utils/common";
+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/pages/Resources/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 {};

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

@@ -0,0 +1,69 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useState } from "react";
+import { Col, Row, Typography, Segmented } from "antd";
+import { DiffOutlined } from "@ant-design/icons";
+import { DiffViewer } from "../../../../components/CodeViewer";
+import { Size } from "../../../../constants";
+import { TextDrawer } from "../../../../components/TextDrawer";
+const ViewChangesContent = ({
+  file,
+  data
+}) => {
+  const [group, setGroup] = useState(data[0].group);
+  const match = data.find((e) => e.group === group);
+  return /* @__PURE__ */ jsxs(
+    Row,
+    {
+      wrap: true,
+      gutter: [Size.BasePadding, Size.BasePadding],
+      style: { height: "100%" },
+      children: [
+        data.length > 1 ? /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsx(
+          Segmented,
+          {
+            style: { marginTop: Size.BasePadding },
+            value: group,
+            options: data.map((e) => e.group),
+            onChange: (e) => setGroup(e)
+          }
+        ) }) : null,
+        match ? /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsx(Col, { span: 12, children: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: match.baselineTitle || "Baseline" }) }),
+          /* @__PURE__ */ jsx(Col, { span: 12, children: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: match.currentTitle || "Current" }) }),
+          /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsx(
+            DiffViewer,
+            {
+              filepath: file,
+              before: match.baseline || "",
+              after: match.current || "",
+              editorProps: {
+                // eslint-disable-next-line financial/no-float-calculation
+                height: Math.floor(window.innerHeight / 1.25)
+              }
+            }
+          ) })
+        ] }, group) : null
+      ]
+    }
+  );
+};
+const ViewChanges = ({ text = "View Changes", ...props }) => {
+  return /* @__PURE__ */ jsx(
+    TextDrawer,
+    {
+      text,
+      buttonProps: {
+        size: "small",
+        icon: /* @__PURE__ */ jsx(DiffOutlined, {})
+      },
+      drawerProps: {
+        destroyOnClose: true,
+        title: `Content diff for "${props.file}"`
+      },
+      children: /* @__PURE__ */ jsx(ViewChangesContent, { ...props })
+    }
+  );
+};
+export {
+  ViewChanges
+};

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

@@ -0,0 +1,11 @@
+export declare enum UpdateType {
+    New = "New",
+    Changed = "Changed",
+    Deleted = "Deleted",
+    NotChanged = "Not Changed"
+}
+export declare enum SortType {
+    Name = "Sorted by Name",
+    Size = "Sorted by Size",
+    Delta = "Sorted by Delta"
+}

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

@@ -0,0 +1,17 @@
+var UpdateType = /* @__PURE__ */ ((UpdateType2) => {
+  UpdateType2["New"] = "New";
+  UpdateType2["Changed"] = "Changed";
+  UpdateType2["Deleted"] = "Deleted";
+  UpdateType2["NotChanged"] = "Not Changed";
+  return UpdateType2;
+})(UpdateType || {});
+var SortType = /* @__PURE__ */ ((SortType2) => {
+  SortType2["Name"] = "Sorted by Name";
+  SortType2["Size"] = "Sorted by Size";
+  SortType2["Delta"] = "Sorted by Delta";
+  return SortType2;
+})(SortType || {});
+export {
+  SortType,
+  UpdateType
+};

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

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

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

@@ -0,0 +1,180 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  Button,
+  Card,
+  Divider,
+  FloatButton,
+  Popconfirm,
+  Space,
+  Tabs,
+  Tooltip,
+  Typography
+} from "antd";
+import { useEffect } from "react";
+import { InfoCircleOutlined, LogoutOutlined } from "@ant-design/icons";
+import { SDK } from "@rsdoctor/types";
+import { Size } from "../../../../constants";
+import { DiffCards } from "./cards";
+import { Overview } from "./overview";
+import { Assets } from "./assets";
+import { Modules } from "./modules";
+import { Packages } from "./packages";
+import { DiffServerAPIProvider } from "../DiffServerAPIProvider";
+import { Graph } from "@rsdoctor/utils/common";
+const DiffContainer = ({
+  manifests
+}) => {
+  useEffect(() => {
+    console.log("BundleDiff Manifests: ", manifests);
+  }, [manifests]);
+  return /* @__PURE__ */ jsx(
+    DiffServerAPIProvider,
+    {
+      api: SDK.ServerAPI.API.GetBundleDiffSummary,
+      manifests,
+      children: (baselineSummary, currentSummary) => {
+        const onlyBaseline = baselineSummary.chunkGraph === currentSummary.chunkGraph;
+        const baselineChunkGraph = baselineSummary.chunkGraph;
+        const currentChunkGraph = onlyBaseline ? baselineChunkGraph : currentSummary.chunkGraph;
+        const assetsDiffResult = Graph.getAssetsDiffResult(
+          baselineChunkGraph,
+          currentChunkGraph
+        );
+        return /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs(FloatButton.Group, { children: [
+            /* @__PURE__ */ jsx(
+              Tooltip,
+              {
+                placement: "leftBottom",
+                title: /* @__PURE__ */ jsx(Space, { direction: "vertical", children: [
+                  { title: "Baseline", data: baselineSummary },
+                  { title: "Current", data: currentSummary }
+                ].map(({ title, data }) => {
+                  return /* @__PURE__ */ jsx(Card, { size: "small", children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+                    /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: title }),
+                    /* @__PURE__ */ jsxs(Space, { style: { fontSize: 10 }, children: [
+                      /* @__PURE__ */ jsx(
+                        Typography.Text,
+                        {
+                          style: {
+                            fontSize: "inherit",
+                            width: 30,
+                            display: "inline-block"
+                          },
+                          children: "Hash"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+                      /* @__PURE__ */ jsx(
+                        Typography.Text,
+                        {
+                          type: "secondary",
+                          style: { fontSize: "inherit" },
+                          children: data.hash || "-"
+                        }
+                      )
+                    ] }),
+                    data.cloudManifestUrl ? /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "link",
+                        size: "small",
+                        style: { padding: 0, fontSize: 10 },
+                        onClick: () => window.open(data.cloudManifestUrl),
+                        children: "Open File"
+                      }
+                    ) : null
+                  ] }) }, title);
+                }) }),
+                children: /* @__PURE__ */ jsx(FloatButton, { icon: /* @__PURE__ */ jsx(InfoCircleOutlined, {}) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Popconfirm,
+              {
+                title: /* @__PURE__ */ jsxs(Typography.Text, { children: [
+                  "Are you sure to",
+                  /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: " re-upload " }),
+                  "json files for bundle diff?"
+                ] }),
+                onConfirm: () => {
+                },
+                okText: "Yes",
+                cancelText: "Cancel",
+                placement: "topLeft",
+                trigger: "hover",
+                children: /* @__PURE__ */ jsx(FloatButton, { icon: /* @__PURE__ */ jsx(LogoutOutlined, {}) })
+              }
+            ),
+            /* @__PURE__ */ jsx(FloatButton.BackTop, {})
+          ] }),
+          /* @__PURE__ */ jsx(
+            DiffCards,
+            {
+              baseline: baselineSummary,
+              current: currentSummary,
+              onlyBaseline,
+              assetsDiffResult
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Tabs,
+            {
+              defaultActiveKey: "Overview",
+              tabBarStyle: { marginBottom: Size.BasePadding / 3 },
+              items: [
+                {
+                  label: "Overview",
+                  key: "Overview",
+                  children: /* @__PURE__ */ jsx(Overview, { assetsDiffResult })
+                },
+                {
+                  label: "Assets",
+                  key: "Assets",
+                  children: /* @__PURE__ */ jsx(
+                    Assets,
+                    {
+                      outputFilename: baselineSummary.outputFilename,
+                      baseline: baselineSummary,
+                      current: currentSummary
+                    }
+                  )
+                },
+                {
+                  label: "Modules",
+                  key: "Modules",
+                  children: /* @__PURE__ */ jsx(
+                    Modules,
+                    {
+                      baseline: baselineSummary,
+                      current: currentSummary,
+                      onlyBaseline,
+                      assetsDiffResult
+                    }
+                  )
+                },
+                {
+                  label: "Packages",
+                  key: "Packages",
+                  children: /* @__PURE__ */ jsx(
+                    Packages,
+                    {
+                      baseline: baselineSummary.packageGraph,
+                      current: currentSummary.packageGraph
+                    }
+                  )
+                }
+              ].map((el) => ({
+                ...el,
+                label: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: el.label })
+              }))
+            }
+          )
+        ] });
+      }
+    }
+  );
+};
+export {
+  DiffContainer
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { BundleDiffComponentCardProps, BundleDiffTableModulesData } from './types';
+import { UpdateType } from './constants';
+export declare function getUpdateType(e: BundleDiffTableModulesData): UpdateType;
+export declare const FileUpdateTypeTag: React.FC<{
+    type: UpdateType;
+}>;
+export declare const Modules: React.FC<BundleDiffComponentCardProps>;