@rsdoctor/components 0.4.3 → 0.4.4

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

@@ -0,0 +1,377 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { InfoCircleOutlined, SearchOutlined } from "@ant-design/icons";
+import {
+  Button,
+  Divider,
+  Input,
+  Space,
+  Table,
+  Tag,
+  Tooltip,
+  Typography
+} from "antd";
+import { upperFirst } from "lodash-es";
+import { useMemo, useRef, useState } from "react";
+import { Client } from "@rsdoctor/types";
+import { Color } from "../../../../constants";
+import {
+  beautifyModulePath,
+  formatPercent,
+  formatSize
+} from "../../../../utils";
+import { ViewChanges } from "./changes";
+import { FileUpdateTypeTag, getUpdateType } from "./modules";
+import { UpdateType } from "./constants";
+import { formatDiffSize } from "./utils";
+import { Graph } from "@rsdoctor/utils/common";
+const ModuleHashPattern = /[a-fA-F0-9]{20,}/;
+const getSizeColumnPropsForModuleRow = (key, sizeKey, sortByChanged) => {
+  const sortByChangedFn = (a, b) => (a.current?.size[sizeKey] || 0) - (a.baseline?.size[sizeKey] || 0) - (b.current?.size[sizeKey] || 0) + (b.baseline?.size[sizeKey] || 0);
+  const sorterFn = sortByChanged ? (a, b) => sortByChangedFn(a, b) : (a, b) => (a[key]?.size[sizeKey] || 0) - (b[key]?.size[sizeKey] || 0);
+  return {
+    width: 200,
+    sorter: (a, b) => sorterFn(a, b),
+    render: (_v, r) => {
+      if (!r[key])
+        return "-";
+      const size = r[key].size[sizeKey];
+      return /* @__PURE__ */ jsxs(Space, { children: [
+        /* @__PURE__ */ jsx(Typography.Text, { children: formatSize(size) }),
+        key === "current" ? formatDiffSize(
+          r.baseline?.size[sizeKey] || 0,
+          size,
+          (r.baseline?.size[sizeKey] || 0) > size ? Client.RsdoctorClientDiffState.Down : Client.RsdoctorClientDiffState.Up
+        ) : null
+      ] });
+    }
+  };
+};
+const getTargetColumnPropsForModuleRow = (key, bMoudlesCount, cMoudlesCount) => {
+  const [sortByChanged, setSortByChanged] = useState(false);
+  const isB = key === "baseline";
+  return {
+    title: () => {
+      const count = isB ? bMoudlesCount : cMoudlesCount;
+      const title = upperFirst(key);
+      const diff = Graph.diffSize(bMoudlesCount, cMoudlesCount);
+      return /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(Typography.Text, { children: title }),
+        /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+        /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            title: /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+              /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+                title,
+                " modules is ",
+                count
+              ] }),
+              isB ? null : /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+                "Percent is ",
+                formatPercent(diff.percent)
+              ] })
+            ] }),
+            children: /* @__PURE__ */ jsxs(Space, { children: [
+              /* @__PURE__ */ jsx(
+                Typography.Text,
+                {
+                  type: "secondary",
+                  style: { fontSize: 10, fontWeight: 400 },
+                  children: count
+                }
+              ),
+              /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+            ] })
+          }
+        )
+      ] });
+    },
+    children: [
+      {
+        title: "Source Size",
+        ...getSizeColumnPropsForModuleRow(key, "sourceSize", sortByChanged)
+      },
+      {
+        title: "Parsed Size",
+        defaultSortOrder: isB ? void 0 : "descend",
+        ...getSizeColumnPropsForModuleRow(key, "parsedSize", sortByChanged)
+      }
+    ],
+    filterSearch: true,
+    filters: [
+      {
+        text: "Show Changed",
+        value: UpdateType.NotChanged
+      },
+      {
+        text: "Show All",
+        value: "All"
+      }
+    ],
+    onFilter(v, r) {
+      if (v === UpdateType.NotChanged) {
+        setSortByChanged(true);
+      } else {
+        setSortByChanged(false);
+      }
+      return v === UpdateType.NotChanged ? getUpdateType(r) !== v : true;
+    }
+  };
+};
+const ModuleRowForAsset = ({ data, baseline, current }) => {
+  const { modules: bTotalModules } = baseline.moduleGraph;
+  const { modules: cTotalModules } = current.moduleGraph;
+  const { chunks: bToTalChunks } = baseline.chunkGraph;
+  const { chunks: cToTalChunks } = current.chunkGraph;
+  const bRoot = baseline.root;
+  const cRoot = current.root;
+  const [searchText, setSearchText] = useState("");
+  const searchInput = useRef(null);
+  const handleSearch = (selectedKeys, confirm) => {
+    confirm();
+    setSearchText(selectedKeys[0]);
+  };
+  const handleReset = (clearFilters) => {
+    clearFilters();
+    setSearchText("");
+  };
+  const isBaseline = "__is_baseline__";
+  const bModules = useMemo(
+    () => data.baseline ? Graph.getModulesByAsset(data.baseline, bToTalChunks, bTotalModules).map((e) => ({
+      ...e,
+      [isBaseline]: true
+    })).filter((cModule) => !cModule.concatenationModules?.length) : [],
+    [data, baseline]
+  );
+  const cModules = useMemo(
+    () => data.current ? Graph.getModulesByAsset(data.current, cToTalChunks, cTotalModules).map((e) => ({
+      ...e,
+      [isBaseline]: false
+    })).filter((cModule) => !cModule.concatenationModules?.length) : [],
+    [data, current]
+  );
+  const getPathInfo = (r) => beautifyModulePath(r.path, r.__is_baseline__ ? bRoot : cRoot);
+  const dataSource = useMemo(() => {
+    const mods = [...bModules, ...cModules];
+    const map = /* @__PURE__ */ new Map();
+    mods.forEach((mod) => {
+      const modPath = mod.webpackId?.replace(ModuleHashPattern, "") || mod.path?.replace(ModuleHashPattern, "");
+      let t = map.get(modPath);
+      if (!t) {
+        t = { path: modPath };
+      }
+      if (mod[isBaseline]) {
+        t.baseline = mod;
+      } else {
+        t.current = mod;
+      }
+      map.set(modPath, t);
+    });
+    return [...map.values()];
+  }, [bModules, cModules, searchText]);
+  const { bMoudlesCount, cMoudlesCount, totalCount } = useMemo(() => {
+    const fileNameFilter = (e) => getPathInfo(e).alias.indexOf(searchText) > -1;
+    let b = dataSource.filter((e) => e.baseline);
+    let c = dataSource.filter((e) => e.current);
+    let totalCount2 = dataSource.length;
+    if (searchText) {
+      b = b.filter(fileNameFilter);
+      c = c.filter(fileNameFilter);
+      totalCount2 = dataSource.filter(fileNameFilter).length;
+    }
+    return {
+      bMoudlesCount: b.length,
+      cMoudlesCount: c.length,
+      totalCount: totalCount2
+    };
+  }, [dataSource, searchText]);
+  return /* @__PURE__ */ jsx(
+    Table,
+    {
+      dataSource,
+      rowKey: (e) => e.path,
+      size: "small",
+      pagination: {
+        size: "small"
+      },
+      bordered: true,
+      scroll: { x: 1500 },
+      columns: [
+        {
+          fixed: "left",
+          title: () => {
+            return /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsxs(Typography.Text, { children: [
+                "Modules of ",
+                `"${data.alias}"`
+              ] }),
+              /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+              /* @__PURE__ */ jsxs(
+                Tooltip,
+                {
+                  title: /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+                    /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+                      "filtered modules: ",
+                      totalCount
+                    ] }),
+                    /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+                      "total modules: ",
+                      dataSource.length
+                    ] })
+                  ] }),
+                  children: [
+                    /* @__PURE__ */ jsxs(
+                      Typography.Text,
+                      {
+                        type: "secondary",
+                        style: { fontSize: 10, fontWeight: 400, marginRight: 4 },
+                        children: [
+                          totalCount,
+                          "/",
+                          dataSource.length
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+                  ]
+                }
+              )
+            ] });
+          },
+          filterDropdown({
+            setSelectedKeys,
+            selectedKeys,
+            confirm,
+            clearFilters
+          }) {
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: { padding: 8 },
+                onKeyDown: (e) => e.stopPropagation(),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Input,
+                    {
+                      ref: searchInput,
+                      placeholder: `Search by file name`,
+                      value: selectedKeys[0],
+                      onChange: (e) => setSelectedKeys(e.target.value ? [e.target.value] : []),
+                      onPressEnter: () => handleSearch(selectedKeys, confirm),
+                      style: { marginBottom: 8, display: "block" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(Space, { children: [
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "primary",
+                        onClick: () => handleSearch(selectedKeys, confirm),
+                        icon: /* @__PURE__ */ jsx(SearchOutlined, {}),
+                        size: "small",
+                        style: { width: 90 },
+                        children: "Search"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        onClick: () => {
+                          clearFilters && handleReset(clearFilters);
+                          setSelectedKeys([]);
+                          handleSearch([], confirm);
+                        },
+                        size: "small",
+                        style: { width: 90 },
+                        children: "Reset"
+                      }
+                    )
+                  ] })
+                ]
+              }
+            );
+          },
+          filterSearch: true,
+          filterIcon: (filtered) => /* @__PURE__ */ jsxs(Space, { children: [
+            /* @__PURE__ */ jsx(
+              Typography.Text,
+              {
+                type: searchText ? void 0 : "secondary",
+                style: { fontWeight: 400 },
+                children: searchText || "Search by file name"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SearchOutlined,
+              {
+                style: { color: filtered ? Color.Blue : void 0 }
+              }
+            )
+          ] }),
+          onFilterDropdownOpenChange: (visible) => {
+            if (visible) {
+              setTimeout(() => searchInput.current?.focus(), 100);
+            }
+          },
+          onFilter(v, r) {
+            return getPathInfo(r).alias.indexOf(v) > -1;
+          },
+          render: (_v, r) => {
+            const { alias, inNodeModules } = getPathInfo(r);
+            return /* @__PURE__ */ jsxs(Space, { children: [
+              /* @__PURE__ */ jsx(Tooltip, { title: r.path, children: /* @__PURE__ */ jsx(Typography.Text, { copyable: { text: r.path }, children: alias }) }),
+              inNodeModules ? /* @__PURE__ */ jsx(Tag, { color: "warning", children: "node_modules" }) : null,
+              /* @__PURE__ */ jsx(FileUpdateTypeTag, { type: getUpdateType(r) })
+            ] });
+          }
+        },
+        getTargetColumnPropsForModuleRow(
+          "current",
+          bMoudlesCount,
+          cMoudlesCount
+        ),
+        getTargetColumnPropsForModuleRow(
+          "baseline",
+          bMoudlesCount,
+          cMoudlesCount
+        ),
+        {
+          title: "Actions",
+          width: 200,
+          render: (_v, r) => {
+            return /* @__PURE__ */ jsx(Space, { direction: "vertical", style: { maxWidth: 170 }, children: /* @__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"
+                  }
+                ]
+              }
+            ) });
+          }
+        }
+      ]
+    }
+  );
+};
+export {
+  ModuleHashPattern,
+  ModuleRowForAsset,
+  getSizeColumnPropsForModuleRow,
+  getTargetColumnPropsForModuleRow
+};

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

@@ -0,0 +1,44 @@
+import { Client, Manifest, SDK } from '@rsdoctor/types';
+import { UpdateType } from './constants';
+import { InferServerAPIBody } from '../../../../components/Manifest/api';
+export type BundleDiffServerAPIProviderComponentCommonProps<T extends SDK.ServerAPI.API | SDK.ServerAPI.APIExtends> = {
+    manifests?: Manifest.RsdoctorManifest[];
+    api: T;
+    children: (baseline: SDK.ServerAPI.InferResponseType<T>, current: SDK.ServerAPI.InferResponseType<T>) => JSX.Element;
+} & InferServerAPIBody<T>;
+export interface BundleDiffContainerProps {
+    manifests: Manifest.RsdoctorManifest[];
+}
+export interface BundleDiffComponentCommonProps {
+    baseline: Manifest.RsdoctorManifest;
+    current: Manifest.RsdoctorManifest;
+    onlyBaseline: boolean;
+    assetsDiffResult: Client.RsdoctorClientAssetsDiffResult;
+}
+export interface BundleDiffComponentCardProps {
+    baseline: SDK.ServerAPI.ResponseTypes[SDK.ServerAPI.API.GetBundleDiffSummary];
+    current: SDK.ServerAPI.ResponseTypes[SDK.ServerAPI.API.GetBundleDiffSummary];
+    onlyBaseline: boolean;
+    assetsDiffResult: Client.RsdoctorClientAssetsDiffResult;
+}
+export interface BundleDiffTableOverviewData {
+    total: Client.RsdoctorClientAssetsDiffItem;
+    initial?: Client.RsdoctorClientAssetsDiffItem;
+}
+export interface BundleDiffTableAssetsData {
+    alias: string;
+    baseline?: SDK.AssetData;
+    current?: SDK.AssetData;
+}
+export interface BundleDiffTableModulesData {
+    path: string;
+    baseline?: SDK.ModuleData;
+    current?: SDK.ModuleData;
+    __is_baseline__?: boolean;
+}
+export interface BundleDiffTablePackagesData {
+    name: string;
+    updateType: UpdateType;
+    baseline?: SDK.PackageData[];
+    current?: SDK.PackageData[];
+}

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

@@ -0,0 +1,2 @@
+import { Client } from '@rsdoctor/types';
+export declare const formatDiffSize: (bSize: number, cSize: number, state: Client.RsdoctorClientDiffState, propsStyle?: Record<string, string | number>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,24 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Client } from "@rsdoctor/types";
+import { Typography } from "antd";
+import { Color } from "../../../../constants";
+import { formatSize } from "../../../../utils";
+const formatDiffSize = (bSize, cSize, state, propsStyle) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: cSize - bSize === 0 ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsxs(
+    Typography.Text,
+    {
+      strong: true,
+      style: {
+        color: state === Client.RsdoctorClientDiffState.Up ? Color.Red : Color.Green,
+        ...propsStyle
+      },
+      children: [
+        state === Client.RsdoctorClientDiffState.Up ? "+" : "-",
+        formatSize(Math.abs(cSize - bSize))
+      ]
+    }
+  ) });
+};
+export {
+  formatDiffSize
+};

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

@@ -0,0 +1,3 @@
+import { SDK } from '@rsdoctor/types';
+import { BundleDiffServerAPIProviderComponentCommonProps } from '../DiffContainer/types';
+export declare const DiffServerAPIProvider: <T extends SDK.ServerAPI.API | SDK.ServerAPI.APIExtends>(props: BundleDiffServerAPIProviderComponentCommonProps<T>) => JSX.Element;

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

@@ -0,0 +1,36 @@
+import { Fragment, jsx } from "react/jsx-runtime";
+import { Client } from "@rsdoctor/types";
+import { ServerAPIProvider } from "../../../../components/Manifest";
+import { fetchManifest, useUrlQuery } from "../../../../utils";
+const DiffServerAPIProvider = (props) => {
+  const { api, body, children, manifests } = props;
+  const query = useUrlQuery();
+  const [baselineFile, currentFile] = query[Client.RsdoctorClientUrlQuery.BundleDiffFiles]?.split(",") || [];
+  if (manifests?.length) {
+    return /* @__PURE__ */ jsx(Fragment, { children: children(manifests[0].data, manifests[1].data) });
+  }
+  return /* @__PURE__ */ jsx(
+    ServerAPIProvider,
+    {
+      api,
+      body,
+      manifestLoader: baselineFile ? () => fetchManifest(baselineFile) : void 0,
+      children: (baseline) => {
+        return /* @__PURE__ */ jsx(
+          ServerAPIProvider,
+          {
+            api,
+            body,
+            manifestLoader: currentFile ? () => fetchManifest(currentFile) : void 0,
+            children: (current) => {
+              return children(baseline, current);
+            }
+          }
+        );
+      }
+    }
+  );
+};
+export {
+  DiffServerAPIProvider
+};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Client, Manifest } from '@rsdoctor/types';
+export declare const name = "Bundle Diff";
+export declare const route = Client.RsdoctorClientRoutes.BundleDiff;
+export declare const BundleDiffContext: React.Context<{
+    manifests: Manifest.RsdoctorManifest[];
+    setManifests(_manifests: Manifest.RsdoctorManifest[]): void;
+    loading: boolean;
+    setLoading(_loading: boolean): void;
+    withLoading(_func: (...args: unknown[]) => Promise<unknown> | unknown): Promise<void>;
+}>;

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

@@ -0,0 +1,19 @@
+import React from "react";
+import { Client } from "@rsdoctor/types";
+const name = "Bundle Diff";
+const route = Client.RsdoctorClientRoutes.BundleDiff;
+const BundleDiffContext = React.createContext({
+  manifests: [],
+  setManifests(_manifests) {
+  },
+  loading: false,
+  setLoading(_loading) {
+  },
+  async withLoading(_func) {
+  }
+});
+export {
+  BundleDiffContext,
+  name,
+  route
+};

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

@@ -0,0 +1,3 @@
+import React from 'react';
+export * from './constants';
+export declare const Page: React.FC;

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

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { DiffContainer } from "./DiffContainer";
+export * from "./constants";
+const Page = () => {
+  return /* @__PURE__ */ jsx(DiffContainer, { manifests: [] });
+};
+export {
+  Page
+};

package/dist/pages/index.d.ts

@@ -7,3 +7,4 @@ export * as PluginsAnalyze from './WebpackPlugins';
 export * as ModuleResolve from './ModuleResolve';
 export * as RuleIndex from './Resources/RuleIndex';
 export * as TreeShaking from './TreeShaking';
+export * as BundleDiff from './Resources/BundleDiff';

package/dist/pages/index.js

@@ -7,7 +7,9 @@ import * as PluginsAnalyze from "./WebpackPlugins";
 import * as ModuleResolve from "./ModuleResolve";
 import * as RuleIndex from "./Resources/RuleIndex";
 import * as TreeShaking from "./TreeShaking";
+import * as BundleDiff from "./Resources/BundleDiff";
 export {
+  BundleDiff,
   BundleSize,
   LoaderFiles,
   LoaderTimeline,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsdoctor/components",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "main": "./dist/index.js",
   "license": "MIT",
   "module": "dist/index.js",
@@ -44,7 +44,7 @@
     "dist/"
   ],
   "devDependencies": {
-    "@ant-design/icons": "5.3.5",
+    "@ant-design/icons": "5.5.1",
     "@monaco-editor/react": "4.6.0",
     "@types/lodash-es": "4.17.12",
     "@types/node": "^16",
@@ -75,9 +75,9 @@
     "terser": "^5.31.6",
     "typescript": "^5.2.2",
     "url-parse": "1.5.10",
-    "@rsdoctor/graph": "0.4.3",
-    "@rsdoctor/types": "0.4.3",
-    "@rsdoctor/utils": "0.4.3"
+    "@rsdoctor/graph": "0.4.4",
+    "@rsdoctor/types": "0.4.4",
+    "@rsdoctor/utils": "0.4.4"
   },
   "publishConfig": {
     "access": "public",