@rsdoctor/components 0.1.6 → 0.1.7

package/dist/components/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 "@rsdoctor/components";
+import { TextDrawer } from "@rsdoctor/components";
+import { Size } from "../../../constants";
+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/components/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/components/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/components/BundleDiff/DiffContainer/diff.d.ts

@@ -0,0 +1,23 @@
+import { Client } from '@rsdoctor/types';
+import React from 'react';
+export interface DiffCardProps extends Pick<DiffCardContentProps, 'formatter'> {
+    titles: Array<string> | [string | React.ReactNode];
+    datas: Array<DiffCardContentProps['data']>;
+    showPercentInTitle?: boolean;
+}
+export interface DiffCardContentProps {
+    data: Client.RsdoctorClientAssetsDiffItem;
+    formatter?(v: number, target: 'baseline' | 'current'): number | string | React.ReactNode;
+}
+export interface PercentProps {
+    percent: number;
+    state: Client.RsdoctorClientDiffState;
+    fontSize?: React.CSSProperties['fontSize'];
+}
+export declare const SizePercent: React.FC<{
+    baseline: number;
+    current: number;
+} & Omit<PercentProps, 'percent' | 'state'>>;
+export declare const Percent: React.FC<PercentProps>;
+export declare const DiffCardContent: React.FC<DiffCardContentProps>;
+export declare const DiffCard: React.FC<DiffCardProps>;

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

@@ -0,0 +1,114 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Client } from "@rsdoctor/types";
+import { Segmented, Space, Tooltip, Typography } from "antd";
+import { Graph } from "@rsdoctor/utils/common";
+import { useState } from "react";
+import { Color } from "../../../constants";
+import { StatisticCard } from "../../Card";
+import { formatSize } from "../../../utils";
+const SizePercent = ({ baseline, current, ...rest }) => {
+  const diff = Graph.diffSize(baseline, current);
+  return /* @__PURE__ */ jsx(Percent, { ...rest, ...diff });
+};
+const Percent = ({
+  percent,
+  state,
+  fontSize = 14
+}) => {
+  const _percent = +percent.toFixed(2);
+  if (_percent > 0) {
+    const percentText = `${_percent}`;
+    if (state === Client.RsdoctorClientDiffState.Up) {
+      return /* @__PURE__ */ jsxs(Typography.Text, { strong: true, style: { fontSize, color: Color.Red }, children: [
+        "+",
+        percentText,
+        "%"
+      ] });
+    }
+    if (state === Client.RsdoctorClientDiffState.Down) {
+      return /* @__PURE__ */ jsxs(Typography.Text, { strong: true, style: { fontSize, color: Color.Green }, children: [
+        "-",
+        percentText,
+        "%"
+      ] });
+    }
+  }
+  return null;
+};
+const DiffCardContent = ({
+  data,
+  formatter
+}) => {
+  const { percent, state, size } = data;
+  const { baseline, current } = size;
+  const bSize = formatter ? formatter(baseline, "baseline") : formatSize(baseline);
+  const cSize = formatter ? formatter(current, "current") : formatSize(current);
+  return /* @__PURE__ */ jsx(Space, { align: "start", children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", style: { textAlign: "left" }, children: [
+    /* @__PURE__ */ jsxs(Space, { children: [
+      /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 10, color: "inherit" }, keyboard: true, children: "Current" }),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: typeof cSize === "number" || typeof cSize === "string" ? `Value of Current is ${cSize}` : void 0,
+          children: /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 16, color: "inherit" }, strong: true, children: cSize })
+        }
+      ),
+      /* @__PURE__ */ jsx(Percent, { percent, state })
+    ] }),
+    /* @__PURE__ */ jsxs(Space, { children: [
+      /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 10, color: "inherit" }, keyboard: true, children: "Baseline" }),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          title: typeof bSize === "number" || typeof bSize === "string" ? `Value of Baseline is ${bSize}` : void 0,
+          children: /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 14 }, type: "secondary", children: bSize })
+        }
+      )
+    ] })
+  ] }) });
+};
+const DiffCard = ({
+  titles,
+  datas,
+  formatter,
+  showPercentInTitle
+}) => {
+  const [idx, setIdx] = useState(0);
+  return /* @__PURE__ */ jsx(
+    StatisticCard,
+    {
+      title: titles.length > 1 ? /* @__PURE__ */ jsx(
+        Segmented,
+        {
+          defaultValue: titles[idx],
+          options: showPercentInTitle ? titles.map((e, i) => {
+            const data = datas[i];
+            return {
+              label: /* @__PURE__ */ jsxs(Space, { children: [
+                /* @__PURE__ */ jsx(Typography.Text, { children: e }),
+                /* @__PURE__ */ jsx(Percent, { percent: data.percent, state: data.state })
+              ] }),
+              value: e
+            };
+          }) : titles,
+          onChange: (e) => {
+            setIdx(titles.indexOf(e));
+          },
+          size: "small",
+          style: { transition: "transform 0.3s ease" },
+          value: titles[idx] || titles[0]
+        }
+      ) : titles[idx],
+      value: /* @__PURE__ */ jsx(DiffCardContent, { data: datas[idx], formatter }),
+      statisticProps: {
+        style: { textAlign: "left" }
+      }
+    }
+  );
+};
+export {
+  DiffCard,
+  DiffCardContent,
+  Percent,
+  SizePercent
+};

package/dist/components/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/components/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 { Graph } from "@rsdoctor/utils/common";
+import { InfoCircleOutlined, LogoutOutlined } from "@ant-design/icons";
+import { SDK } from "@rsdoctor/types";
+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 { Size } from "../../../constants";
+const DiffContainer = ({
+  manifests
+}) => {
+  useEffect(() => {
+    console.log("BundleDiff Webpack 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/components/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>;