@rsdoctor/components 0.0.2-beta.0 → 0.0.2-beta.2

package/dist/components/TextDrawer/index.js

@@ -1,22 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Drawer } from "antd";
 import React, { useState } from "react";
@@ -26,26 +7,26 @@ const TextDrawer = (props) => {
   return /* @__PURE__ */ jsxs(React.Fragment, { children: [
     props.button ? /* @__PURE__ */ jsx("div", { onClick: () => setVisible(!visible), children: props.button }) : /* @__PURE__ */ jsx(
       Button,
-      __spreadProps(__spreadValues({
-        type: "link"
-      }, props.buttonProps), {
+      {
+        type: "link",
+        ...props.buttonProps,
         onClick: () => setVisible(!visible),
-        style: __spreadValues({ padding: 0 }, props.buttonStyle),
+        style: { padding: 0, ...props.buttonStyle },
         children: props.text
-      })
+      }
     ),
     /* @__PURE__ */ jsx(
       Drawer,
-      __spreadProps(__spreadValues({
+      {
         maskClosable: true,
         width: drawerWidth,
-        zIndex: 999
-      }, props.drawerProps), {
+        zIndex: 999,
+        ...props.drawerProps,
         open: visible,
         onClose: () => setVisible(false),
         destroyOnClose: true,
         children: props.children
-      })
+      }
     )
   ] });
 };

package/dist/components/worker/ecmaversion/client.js

@@ -1,10 +1,9 @@
-const import_meta = {};
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { BadgeColorMap, BadgeType } from "../../Badge";
 import { ECMAVersion } from "@rsdoctor/utils/ruleUtils";
 import { master } from "../../../utils/worker";
-const getECMAVersionDetectWorker = () => new Worker(new URL("./worker.ts", import_meta.url));
+const getECMAVersionDetectWorker = () => new Worker(new URL("./worker.js", import.meta.url));
 function useECMAVersionDetectWorker(props) {
   const { code } = props;
   const [version, setVersion] = useState();

package/dist/components/worker/ecmaversion/worker.js

@@ -1,11 +1,11 @@
-import { parser } from "@rsdoctor/utils/ruleUtils";
-import { handleMessageInWorker } from "../../../utils/worker";
+const { parser, ECMAVersion } = require("@rsdoctor/utils/ruleUtils");
+const { handleMessageInWorker } = require("../../../utils/worker");
 const cache = /* @__PURE__ */ new Map();
 handleMessageInWorker({
   workerName: "ecmaversion",
   handler: (code) => {
     if (cache.has(code))
-      return cache.get(code);
+      return cache.get(code) || "";
     const version = parser.utils.detectECMAVersion(code);
     cache.set(code, version);
     return version;

package/dist/components/worker/jsequal/client.js

@@ -1,10 +1,9 @@
-const import_meta = {};
 import { jsx } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { Tag } from "antd";
 import { master } from "../../../utils/worker";
 import { useI18n } from "../../../utils";
-const getJSEqualWorker = () => new Worker(new URL("./worker.ts", import_meta.url));
+const getJSEqualWorker = () => new Worker(new URL("./worker.js", import.meta.url));
 function useJSEqualWorker(props) {
   const { input, output } = props;
   const [isEqual, setIsEqual] = useState(false);

package/dist/components/worker/jsequal/worker.js

@@ -1,52 +1,23 @@
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __commonJS = (cb, mod) => function __require() {
-  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
-};
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
-import { minify as terserMinify } from "terser";
-import { handleMessageInWorker } from "../../../utils/worker";
-var require_worker = __commonJS({
-  "src/components/worker/jsequal/worker.ts"(exports) {
-    const cache = /* @__PURE__ */ new Map();
-    function minify(code) {
-      return terserMinify(code, {
-        module: true,
-        compress: false,
-        mangle: false,
-        sourceMap: false
-      }).then((res) => res.code);
-    }
-    handleMessageInWorker({
-      workerName: "jsequal",
-      handler: (_0) => __async(exports, [_0], function* ({ input = "", output = "" }) {
-        const key = input + output;
-        if (cache.has(key))
-          return cache.get(key);
-        const [inputMinified, outputMinified] = yield Promise.all([minify(input), minify(output)]);
-        const isEqual = inputMinified === outputMinified;
-        cache.set(key, isEqual);
-        return isEqual;
-      })
-    });
+const { minify: terserMinify } = require("terser");
+const { handleMessageInWorker } = require("../../../utils/worker");
+const cache = /* @__PURE__ */ new Map();
+function minify(code) {
+  return terserMinify(code, {
+    module: true,
+    compress: false,
+    mangle: false,
+    sourceMap: false
+  }).then((res) => res.code);
+}
+handleMessageInWorker({
+  workerName: "jsequal",
+  handler: async ({ input = "", output = "" }) => {
+    const key = input + output;
+    if (cache.has(key))
+      return cache.get(key) || "";
+    const [inputMinified, outputMinified] = await Promise.all([minify(input), minify(output)]);
+    const isEqual = inputMinified === outputMinified;
+    cache.set(key, isEqual);
+    return isEqual;
   }
 });
-export default require_worker();

package/dist/config.d.ts

@@ -9,9 +9,9 @@ export interface Config {
     bundleAlerts: ViewMode;
     compileAlerts: ViewMode;
   };
-  json: Manifest.DoctorManifest;
+  json: Manifest.RsdoctorManifest;
   setTheme(theme: Config['theme']): void;
-  setManifest(json: Manifest.DoctorManifest): void;
+  setManifest(json: Manifest.RsdoctorManifest): void;
   setPageState(state: PageState): void;
   setViewMode(mode: Partial<Config['viewMode']>, saveStorage?: boolean): void;
 }

package/dist/config.js

@@ -1,19 +1,3 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
 import { createContext } from "react";
 import { getLocaleFromStorage, getThemeFromStorage, getViewModeFromStorage } from "./utils/storage";
 import { PageState } from "./constants";
@@ -32,7 +16,9 @@ const defaultConfig = {
   setViewMode() {
   }
 };
-const ConfigContext = createContext(__spreadValues({}, defaultConfig));
+const ConfigContext = createContext({
+  ...defaultConfig
+});
 export {
   ConfigContext,
   defaultConfig

package/dist/constants.d.ts

@@ -32,7 +32,7 @@ export declare enum Size {
   NavBarHeight = 54,
 }
 export declare enum Color {
-  Red = "rgb(207, 19, 34)",
+  Red = "#e17055",
   Green = "#52c41a",
   Yellow = "#faad14",
   Blue = "#1677ff",
@@ -45,4 +45,6 @@ export declare const TAG_PALLETE: {
   COLOR_D: string;
   COLOR_E: string;
   DARK_BLUE: string;
-};
+};
+export declare const MAIN_BG = "";
+export declare const ROOT_BG_COLOR = "rgb(105, 177, 255)";

package/dist/constants.js

@@ -39,7 +39,7 @@ var Size = /* @__PURE__ */ ((Size2) => {
   return Size2;
 })(Size || {});
 var Color = /* @__PURE__ */ ((Color2) => {
-  Color2["Red"] = "rgb(207, 19, 34)";
+  Color2["Red"] = "#e17055";
   Color2["Green"] = "#52c41a";
   Color2["Yellow"] = "#faad14";
   Color2["Blue"] = "#1677ff";
@@ -57,12 +57,16 @@ const TAG_PALLETE = {
   COLOR_E: "#2E7CBE",
   DARK_BLUE: "#1554ad"
 };
+const MAIN_BG = "";
+const ROOT_BG_COLOR = "rgb(105, 177, 255)";
 export {
   APILoaderMode4Dev,
   Color,
   ComponentState,
   Language,
+  MAIN_BG,
   PageState,
+  ROOT_BG_COLOR,
   Size,
   TAG_PALLETE,
   Theme,

package/dist/pages/BundleSize/components/asset.js

@@ -1,28 +1,9 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CodepenOutlined, ColumnHeightOutlined, DeploymentUnitOutlined, InfoCircleOutlined } from "@ant-design/icons";
+import { CodepenCircleOutlined, ColumnHeightOutlined, DeploymentUnitOutlined, InfoCircleOutlined } from "@ant-design/icons";
 import Editor from "@monaco-editor/react";
 import { SDK } from "@rsdoctor/types";
 import { Button, Card, Col, Divider, Drawer, Empty, Popover, Row, Space, Tag, Tooltip, Typography } from "antd";
-import { sumBy } from "lodash-es";
+import { omitBy, sumBy } from "lodash-es";
 import { dirname, relative } from "path";
 import { useEffect, useMemo, useState } from "react";
 import { ServerAPIProvider } from "../../../components/Manifest";
@@ -38,16 +19,20 @@ import { ModuleGraphListContext } from "../config";
 let expanedModulesKeys = [];
 const TAB_MAP = {
   source: "source code",
-  transformed: "transformed code (After compile)",
-  parsedSource: "parsed code (After bundle and tree-shaking)"
+  transformed: "Transformed Code (After compile)",
+  parsedSource: "Bundled Code (After bundle and tree-shaking)"
+};
+const tagStyle = {
+  "margin": "none",
+  "marginInlineEnd": 0
 };
 const ModuleCodeViewer = ({ data }) => {
-  const [tab, setTab] = useState("parsedSource");
+  const [tab, setTab] = useState("source");
   const { t } = useI18n();
   const TAB_LAB_MAP = {
-    source: "source code",
-    transformed: `transformed(${t("After Compile")})`,
-    parsedSource: `parsedSource(${t("After Bundle")})`
+    source: "Source Code",
+    transformed: `Transformed Code(${t("After Compile")})`,
+    parsedSource: `Bundled Code(${t("After Bundled")})`
   };
   if (!data)
     return null;
@@ -58,7 +43,7 @@ const ModuleCodeViewer = ({ data }) => {
       text: "",
       buttonProps: {
         size: "small",
-        icon: /* @__PURE__ */ jsx(CodepenOutlined, {}),
+        icon: /* @__PURE__ */ jsx(CodepenCircleOutlined, {}),
         type: "default"
       },
       buttonStyle: { padding: `0 4px` },
@@ -66,45 +51,47 @@ const ModuleCodeViewer = ({ data }) => {
         destroyOnClose: true,
         title: `Code of "${path}"`
       },
-      children: /* @__PURE__ */ jsx(
-        Card,
-        {
-          className: "code-size-card",
-          style: { width: "100%" },
-          tabList: [{ tab: "source" }, { tab: "transformed" }, { tab: "parsedSource" }].map((e) => __spreadProps(__spreadValues({}, e), {
-            tab: TAB_LAB_MAP[e.tab],
-            key: e.tab
-          })),
-          activeTabKey: tab,
-          onTabChange: (v) => setTab(v),
-          tabBarExtraContent: /* @__PURE__ */ jsx(
-            Popover,
-            {
-              placement: "bottom",
-              title: /* @__PURE__ */ jsx(Typography.Title, { level: 5, children: "Explain" }),
-              content: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", marginBottom: 30 }, children: [
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "source: " }),
-                  /* @__PURE__ */ jsx(Typography.Text, { children: TAB_MAP.source })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "transformed: " }),
-                  /* @__PURE__ */ jsx(Typography.Text, { children: TAB_MAP.transformed })
-                ] }),
-                /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "parsedSource: " }),
-                  /* @__PURE__ */ jsx(Typography.Text, { children: TAB_MAP.parsedSource })
-                ] }),
-                /* @__PURE__ */ jsx("br", {}),
-                /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "More" }),
-                /* @__PURE__ */ jsx(Typography.Text, { children: t("CodeModeExplain") })
-              ] }) }),
-              trigger: "hover",
-              children: /* @__PURE__ */ jsx("a", { href: "#", children: "Explain" })
-            }
-          ),
-          children: /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetModuleCodeByModuleId, body: { moduleId: data.id }, children: (source) => {
-            return /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetModuleCodeByModuleId, body: { moduleId: data.id }, children: (source) => {
+        return /* @__PURE__ */ jsx(Fragment, { children: !source["source"] && !source["parsedSource"] && !source["transformed"] ? /* @__PURE__ */ jsx(Empty, { description: "No Code. Rspack builder not support code yet. And if you upload the stats.json to analysis, it's also no code to show." }) : /* @__PURE__ */ jsx(
+          Card,
+          {
+            className: "code-size-card",
+            style: { width: "100%" },
+            tabList: Object.keys(omitBy(source, (s) => !s)).map((k) => ({ tab: k })).map(
+              (e) => ({
+                ...e,
+                tab: TAB_LAB_MAP[e.tab],
+                key: e.tab
+              })
+            ),
+            onTabChange: (v) => setTab(v),
+            tabBarExtraContent: /* @__PURE__ */ jsx(
+              Popover,
+              {
+                placement: "bottom",
+                title: /* @__PURE__ */ jsx(Typography.Title, { level: 5, children: "Explain" }),
+                content: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", marginBottom: 30 }, children: [
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "source: " }),
+                    /* @__PURE__ */ jsx(Typography.Text, { children: TAB_MAP.source })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "transformed: " }),
+                    /* @__PURE__ */ jsx(Typography.Text, { children: TAB_MAP.transformed })
+                  ] }),
+                  /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "parsedSource: " }),
+                    /* @__PURE__ */ jsx(Typography.Text, { children: TAB_MAP.parsedSource })
+                  ] }),
+                  /* @__PURE__ */ jsx("br", {}),
+                  /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: "More" }),
+                  /* @__PURE__ */ jsx(Typography.Text, { children: t("CodeModeExplain") })
+                ] }) }),
+                trigger: "hover",
+                children: /* @__PURE__ */ jsx("a", { href: "#", children: "Explain" })
+              }
+            ),
+            children: /* @__PURE__ */ jsx(
               Editor,
               {
                 theme: "vs-dark",
@@ -121,10 +108,10 @@ const ModuleCodeViewer = ({ data }) => {
                   }
                 }
               }
-            );
-          } })
-        }
-      )
+            )
+          }
+        ) });
+      } })
     }
   );
 };
@@ -241,13 +228,11 @@ const AssetDetail = ({ asset, chunks: includeChunks, modules: includeModules, mo
     }
     return res;
   }, [includeModules, moduleKeyword, moduleSizeLimit]);
-  const avgSize = sumBy(includeModules, (e) => e.size.parsedSize || 0) / includeModules.length;
   const fileStructures = useMemo(() => {
     const res = createFileStructures({
       files: filteredModules.map((e) => e.path).filter(Boolean),
       inlinedResourcePathKey,
       fileTitle(file, basename) {
-        var _a;
         const mod = filteredModules.find((e) => e.path === file);
         if (!mod)
           return basename;
@@ -257,29 +242,28 @@ const AssetDetail = ({ asset, chunks: includeChunks, modules: includeModules, mo
         return /* @__PURE__ */ jsxs(Space, { children: [
           /* @__PURE__ */ jsx(Keyword, { ellipsis: true, style: { maxWidth: 500 }, text: basename, keyword: moduleKeyword }),
           parsedSize !== 0 ? /* @__PURE__ */ jsx(
-            Bdg,
+            Tooltip,
             {
-              label: "parsed size",
-              value: formatSize(parsedSize),
-              type: parsedSize >= avgSize ? "error" : "default",
-              tooltip: /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
-                /* @__PURE__ */ jsx(Bdg, { label: "parsed size", value: formatSize(parsedSize) }),
-                /* @__PURE__ */ jsx(Bdg, { label: "source size", value: formatSize(sourceSize) })
-              ] })
+              title: /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+                /* @__PURE__ */ jsx(Tag, { color: "orange", children: "Parsed Size:" + formatSize(parsedSize) }),
+                /* @__PURE__ */ jsx(Tag, { color: "volcano", children: "Source Size:" + formatSize(sourceSize) })
+              ] }),
+              color: "white",
+              children: /* @__PURE__ */ jsx(Tag, { color: "purple", style: tagStyle, children: "Parsed: " + formatSize(parsedSize) })
             }
           ) : sourceSize !== 0 ? (
             // fallback to display tag for source size
-            /* @__PURE__ */ jsx(Bdg, { label: "source size", value: formatSize(sourceSize), type: "default" })
+            /* @__PURE__ */ jsx(Tag, { color: "geekblue", children: "Source Size:" + formatSize(sourceSize) })
           ) : null,
           isConcatenation ? /* @__PURE__ */ jsx(
             Tooltip,
             {
               title: /* @__PURE__ */ jsx(Space, { children: /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
                 "this is a concatenated module, it contains ",
-                (_a = mod.modules) == null ? void 0 : _a.length,
+                mod.modules?.length,
                 " modules"
               ] }) }),
-              children: /* @__PURE__ */ jsx(Tag, { color: "#46b5c8", children: "concatenated" })
+              children: /* @__PURE__ */ jsx(Tag, { color: "green", style: tagStyle, children: "concatenated" })
             }
           ) : null,
           containedOtherModules && containedOtherModules.length ? /* @__PURE__ */ jsx(
@@ -307,7 +291,7 @@ const AssetDetail = ({ asset, chunks: includeChunks, modules: includeModules, mo
                   return /* @__PURE__ */ jsx(Typography.Text, { style: { color: "inherit" }, code: true, children: p[0] === "." ? p : `./${p}` }, id);
                 })
               ] }),
-              children: /* @__PURE__ */ jsx(Tag, { color: "#46b5c8", children: "concatenated" })
+              children: /* @__PURE__ */ jsx(Tag, { color: "green", children: "concatenated" })
             }
           ) : null,
           /* @__PURE__ */ jsx(
@@ -318,8 +302,7 @@ const AssetDetail = ({ asset, chunks: includeChunks, modules: includeModules, mo
               onClick: () => {
                 setModuleJumpList([mod.id]);
                 setShow(true);
-              },
-              children: "module explorer"
+              }
             }
           ),
           /* @__PURE__ */ jsx(ModuleCodeViewer, { data: mod })
@@ -329,20 +312,10 @@ const AssetDetail = ({ asset, chunks: includeChunks, modules: includeModules, mo
         const paths = getChildrenModule(dir);
         if (paths.length) {
           const mods = paths.map((e) => includeModules.find((m) => m.path === e));
-          const parsedSize = sumBy(mods, (e) => {
-            var _a;
-            return ((_a = e.size) == null ? void 0 : _a.parsedSize) || 0;
-          });
+          const parsedSize = sumBy(mods, (e) => e.size?.parsedSize || 0);
           return /* @__PURE__ */ jsxs(Space, { children: [
             /* @__PURE__ */ jsx(Typography.Text, { children: defaultTitle }),
-            parsedSize > 0 ? /* @__PURE__ */ jsx(
-              Bdg,
-              {
-                label: "parsed size",
-                value: formatSize(parsedSize),
-                type: parsedSize >= avgSize ? "error" : "default"
-              }
-            ) : null
+            parsedSize > 0 ? /* @__PURE__ */ jsx(Tag, { style: tagStyle, color: "orange", children: "Parsed:" + formatSize(parsedSize) }) : null
           ] });
         }
         return defaultTitle;
@@ -374,7 +347,7 @@ const AssetDetail = ({ asset, chunks: includeChunks, modules: includeModules, mo
           treeData: fileStructures,
           autoExpandParent: true,
           defaultExpandParent: true,
-          defaultExpandedKeys: (expanedModulesKeys == null ? void 0 : expanedModulesKeys.length) ? expanedModulesKeys : fileStructures.length === 1 ? [fileStructures[0].key] : [],
+          defaultExpandedKeys: expanedModulesKeys?.length ? expanedModulesKeys : fileStructures.length === 1 ? [fileStructures[0].key] : [],
           defaultExpandAll: defaultExpandAll || filteredModules.length <= 20
         },
         `tree_${moduleKeyword}_${defaultExpandAll}_${asset.path}`
@@ -388,7 +361,7 @@ const AssetDetail = ({ asset, chunks: includeChunks, modules: includeModules, mo
     /* @__PURE__ */ jsx(
       ModuleGraphViewer,
       {
-        id: (moduleJumpList == null ? void 0 : moduleJumpList.length) ? moduleJumpList[moduleJumpList.length - 1] : "",
+        id: moduleJumpList?.length ? moduleJumpList[moduleJumpList.length - 1] : "",
         show,
         setShow,
         cwd: root

package/dist/pages/BundleSize/components/cards.js

@@ -1,36 +1,20 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { jsx } from "react/jsx-runtime";
 import { createElement } from "react";
 import { useState } from "react";
-import { Col, Row, Segmented } from "antd";
-import { useDuplicatePackagesByErrors } from "../../../utils";
+import { Col, Row, Segmented, theme } from "antd";
+import { useDuplicatePackagesByErrors, useWindowWidth } from "../../../utils";
 import { Size } from "../../../constants";
 import { StatisticCard } from "../../../components/Card/statistic";
 import { DuplicatePackageDrawerWithServer } from "../../../components/TextDrawer";
 import { SizeCard } from "../../../components/Card/size";
+const { useToken } = theme;
 const height = 100;
-const AssetCard = ({ showProgress = false, data, total }) => {
-  return /* @__PURE__ */ jsx(SizeCard, { files: data.files, total, showProgress });
+const AssetCard = ({ showProgress = false, data, total, tagBgColor }) => {
+  const { token } = useToken();
+  const _tagBgColor = tagBgColor || token.colorPrimaryBorderHover;
+  return /* @__PURE__ */ jsx(SizeCard, { files: data.files, total, showProgress, tagBgColor: _tagBgColor });
 };
-const AssetCardContainer = ({ titles, datas }) => {
+const AssetCardContainer = ({ titles, datas, bgColor }) => {
   const [idx, setIdx] = useState(0);
   return /* @__PURE__ */ jsx(
     StatisticCard,
@@ -48,11 +32,15 @@ const AssetCardContainer = ({ titles, datas }) => {
           value: titles[idx] || titles[0]
         }
       ) : titles[idx],
-      value: datas.map((e, i) => /* @__PURE__ */ createElement(AssetCard, __spreadProps(__spreadValues({}, e), { key: i })))[idx]
+      value: datas.map((e, i) => /* @__PURE__ */ createElement(AssetCard, { ...e, key: i, tagBgColor: bgColor?.tagBgColor }))[idx],
+      boxProps: {
+        style: { background: bgColor?.bgColor }
+      }
     }
   );
 };
 const BundleCards = ({ cwd, errors, summary }) => {
+  const windowWith = useWindowWidth();
   const duplicatePackages = useDuplicatePackagesByErrors(errors);
   const arr = [
     /* @__PURE__ */ jsx(
@@ -62,7 +50,8 @@ const BundleCards = ({ cwd, errors, summary }) => {
         datas: [
           {
             data: summary.all.total,
-            total: summary.all.total.size
+            total: summary.all.total.size,
+            showProgress: true
           }
         ]
       }
@@ -147,7 +136,7 @@ const BundleCards = ({ cwd, errors, summary }) => {
       }
     )
   ];
-  return /* @__PURE__ */ jsx(Row, { gutter: [Size.BasePadding, Size.BasePadding], wrap: true, style: { marginBottom: Size.BasePadding }, children: arr.map((e, i) => /* @__PURE__ */ jsx(Col, { style: { minWidth: 300 }, children: e }, i)) });
+  return /* @__PURE__ */ jsx(Row, { gutter: windowWith > 1200 && windowWith < 1400 ? [Size.BasePadding * 2, Size.BasePadding] : [Size.BasePadding, Size.BasePadding], wrap: true, style: { marginBottom: Size.BasePadding }, children: arr.map((e, i) => /* @__PURE__ */ jsx(Col, { span: windowWith > 1500 ? 4 : windowWith > 1200 ? 8 : 8, children: e }, i)) });
 };
 export {
   BundleCards

package/dist/pages/BundleSize/components/index.d.ts

@@ -4,7 +4,7 @@ import './index.sass';
 interface WebpackModulesOverallProps {
   cwd: string;
   errors: SDK.ErrorsData;
-  summary: Client.DoctorClientAssetsSummary;
+  summary: Client.RsdoctorClientAssetsSummary;
   entryPoints: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetEntryPoints>;
 }
 export declare const WebpackModulesOverallBase: React.FC<WebpackModulesOverallProps>;