@rsdoctor/components 0.0.2-beta.0

package/dist/constants.js

@@ -0,0 +1,71 @@
+var Theme = /* @__PURE__ */ ((Theme2) => {
+  Theme2["Light"] = "light";
+  Theme2["Dark"] = "dark";
+  return Theme2;
+})(Theme || {});
+var PageState = /* @__PURE__ */ ((PageState2) => {
+  PageState2[PageState2["Success"] = 0] = "Success";
+  PageState2[PageState2["Pending"] = 1] = "Pending";
+  PageState2[PageState2["Fail"] = 2] = "Fail";
+  return PageState2;
+})(PageState || {});
+var ComponentState = /* @__PURE__ */ ((ComponentState2) => {
+  ComponentState2[ComponentState2["Success"] = 0] = "Success";
+  ComponentState2[ComponentState2["Pending"] = 1] = "Pending";
+  ComponentState2[ComponentState2["Updating"] = 2] = "Updating";
+  ComponentState2[ComponentState2["Fail"] = 3] = "Fail";
+  return ComponentState2;
+})(ComponentState || {});
+var ViewMode = /* @__PURE__ */ ((ViewMode2) => {
+  ViewMode2["List"] = "list";
+  ViewMode2["Group"] = "group";
+  return ViewMode2;
+})(ViewMode || {});
+var Language = /* @__PURE__ */ ((Language2) => {
+  Language2["Cn"] = "cn";
+  Language2["En"] = "en";
+  return Language2;
+})(Language || {});
+var APILoaderMode4Dev = /* @__PURE__ */ ((APILoaderMode4Dev2) => {
+  APILoaderMode4Dev2["Local"] = "local";
+  APILoaderMode4Dev2["Remote"] = "remote";
+  APILoaderMode4Dev2["Default"] = "default";
+  return APILoaderMode4Dev2;
+})(APILoaderMode4Dev || {});
+var Size = /* @__PURE__ */ ((Size2) => {
+  Size2[Size2["BasePadding"] = 24] = "BasePadding";
+  Size2[Size2["BaseBorderRadius"] = 8] = "BaseBorderRadius";
+  Size2[Size2["NavBarHeight"] = 54] = "NavBarHeight";
+  return Size2;
+})(Size || {});
+var Color = /* @__PURE__ */ ((Color2) => {
+  Color2["Red"] = "rgb(207, 19, 34)";
+  Color2["Green"] = "#52c41a";
+  Color2["Yellow"] = "#faad14";
+  Color2["Blue"] = "#1677ff";
+  return Color2;
+})(Color || {});
+const drawerWidth = (
+  // eslint-disable-next-line financial/no-float-calculation
+  typeof window === "undefined" ? 0 : window.innerWidth * 0.85 >= 1100 ? window.innerWidth * 0.85 : 1100
+);
+const TAG_PALLETE = {
+  COLOR_A: "#90DCE9",
+  COLOR_B: "green",
+  COLOR_C: "#4EAAB9",
+  COLOR_D: "#B7E9F4",
+  COLOR_E: "#2E7CBE",
+  DARK_BLUE: "#1554ad"
+};
+export {
+  APILoaderMode4Dev,
+  Color,
+  ComponentState,
+  Language,
+  PageState,
+  Size,
+  TAG_PALLETE,
+  Theme,
+  ViewMode,
+  drawerWidth
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from './components';
+export * from './utils';
+export * as Constants from './constants';

package/dist/index.js

@@ -0,0 +1,6 @@
+export * from "./components";
+export * from "./utils";
+import * as Constants from "./constants";
+export {
+  Constants
+};

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

@@ -0,0 +1,26 @@
+import { SDK } from '@rsdoctor/types';
+import React from 'react';
+import { DataNode } from '../../../utils';
+export declare const ModuleCodeViewer: React.FC<{
+  data: SDK.ModuleData;
+}>;
+export declare const ModuleGraphViewer: React.FC<{
+  id: number | string;
+  show: boolean;
+  setShow: (_show: boolean) => void;
+  cwd: string;
+}>;
+export declare function getChildrenModule(node: DataNode): string[];
+export declare const ModulesStatistics: React.FC<{
+  modules: SDK.ModuleData[];
+  chunks: SDK.ChunkData[];
+  filteredModules: SDK.ModuleData[];
+}>;
+export declare const AssetDetail: React.FC<{
+  asset: SDK.AssetData;
+  chunks: SDK.ChunkData[];
+  modules: SDK.ModuleData[];
+  moduleSizeLimit?: number;
+  height?: number;
+  root: string;
+}>;

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

@@ -0,0 +1,405 @@
+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 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 { dirname, relative } from "path";
+import { useEffect, useMemo, useState } from "react";
+import { ServerAPIProvider } from "../../../components/Manifest";
+import { ModuleAnalyzeComponent } from "../../ModuleAnalyze";
+import { Badge as Bdg } from "../../../components/Badge";
+import { FileTree } from "../../../components/FileTree";
+import { KeywordInput } from "../../../components/Form/keyword";
+import { Keyword } from "../../../components/Keyword";
+import { TextDrawer } from "../../../components/TextDrawer";
+import { Size, drawerWidth } from "../../../constants";
+import { createFileStructures, formatSize, getOriginalLanguage, isJsDataUrl, useI18n } from "../../../utils";
+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)"
+};
+const ModuleCodeViewer = ({ data }) => {
+  const [tab, setTab] = useState("parsedSource");
+  const { t } = useI18n();
+  const TAB_LAB_MAP = {
+    source: "source code",
+    transformed: `transformed(${t("After Compile")})`,
+    parsedSource: `parsedSource(${t("After Bundle")})`
+  };
+  if (!data)
+    return null;
+  const { path } = data;
+  return /* @__PURE__ */ jsx(
+    TextDrawer,
+    {
+      text: "",
+      buttonProps: {
+        size: "small",
+        icon: /* @__PURE__ */ jsx(CodepenOutlined, {}),
+        type: "default"
+      },
+      buttonStyle: { padding: `0 4px` },
+      drawerProps: {
+        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(
+              Editor,
+              {
+                theme: "vs-dark",
+                language: getOriginalLanguage(path),
+                height: window.innerHeight / 1.5,
+                value: source[tab],
+                options: {
+                  readOnly: true,
+                  domReadOnly: true,
+                  fontSize: 14,
+                  wordWrap: "bounded",
+                  minimap: {
+                    enabled: false
+                  }
+                }
+              }
+            );
+          } })
+        }
+      )
+    }
+  );
+};
+const ModuleGraphViewer = ({ id, show, setShow, cwd }) => {
+  if (!id)
+    return null;
+  return /* @__PURE__ */ jsx(Drawer, { open: show, maskClosable: true, width: drawerWidth, onClose: () => setShow(false), children: /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetAllModuleGraph, body: {}, children: (modules) => /* @__PURE__ */ jsx(ModuleAnalyzeComponent, { cwd, moduleId: id, modules }) }) });
+};
+const inlinedResourcePathKey = "__RESOURCEPATH__";
+function getChildrenModule(node) {
+  const mods = [];
+  node.children && node.children.forEach((n) => {
+    if (n.isLeaf) {
+      mods.push(n[inlinedResourcePathKey]);
+    } else {
+      getChildrenModule(n);
+    }
+  });
+  return mods;
+}
+const ModulesStatistics = ({ modules, chunks, filteredModules }) => {
+  const { sourceSize, parsedSize, filteredParsedSize, filteredSourceSize } = useMemo(() => {
+    return {
+      sourceSize: sumBy(modules, (e) => e.size.sourceSize),
+      parsedSize: sumBy(modules, (e) => e.size.parsedSize),
+      filteredSourceSize: sumBy(filteredModules, (e) => e.size.sourceSize),
+      filteredParsedSize: sumBy(filteredModules, (e) => e.size.parsedSize)
+    };
+  }, [modules, filteredModules]);
+  return /* @__PURE__ */ jsxs(Space, { children: [
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        title: `total modules count is ${modules.length}, the filtered modules count is ${filteredModules.length}`,
+        children: /* @__PURE__ */ jsxs(Space, { children: [
+          /* @__PURE__ */ jsxs(Typography.Text, { type: "secondary", style: { fontSize: 12, fontWeight: 400 }, children: [
+            "Modules: ",
+            filteredModules.length,
+            " / ",
+            modules.length
+          ] }),
+          /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        title: /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+          /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+            "Total modules parsed size: ",
+            formatSize(parsedSize)
+          ] }),
+          /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+            "Total modules source size: ",
+            formatSize(sourceSize)
+          ] }),
+          /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+            "Filtered modules parsed size: ",
+            formatSize(filteredParsedSize)
+          ] }),
+          /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+            "Filtered modules source size: ",
+            formatSize(filteredSourceSize)
+          ] })
+        ] }),
+        children: /* @__PURE__ */ jsxs(Space, { children: [
+          /* @__PURE__ */ jsxs(Typography.Text, { type: "secondary", style: { fontSize: 12, fontWeight: 400 }, children: [
+            "Modules Size:",
+            " ",
+            filteredParsedSize === parsedSize ? formatSize(parsedSize) : `${formatSize(filteredParsedSize)} / ${formatSize(parsedSize)}`
+          ] }),
+          /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
+    /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        title: /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+          /* @__PURE__ */ jsxs(Typography.Text, { style: { color: "inherit" }, children: [
+            "this asset includes ",
+            chunks.length,
+            " chunks: "
+          ] }),
+          chunks.map((e) => /* @__PURE__ */ jsx(Bdg, { label: "chunk", value: e.name }, e.name))
+        ] }),
+        children: /* @__PURE__ */ jsxs(Space, { children: [
+          /* @__PURE__ */ jsxs(Typography.Text, { type: "secondary", style: { fontSize: 12, fontWeight: 400 }, children: [
+            "Chunks: ",
+            chunks.length
+          ] }),
+          /* @__PURE__ */ jsx(InfoCircleOutlined, {})
+        ] })
+      }
+    )
+  ] });
+};
+const AssetDetail = ({ asset, chunks: includeChunks, modules: includeModules, moduleSizeLimit, height, root }) => {
+  const [moduleKeyword, setModuleKeyword] = useState("");
+  const [defaultExpandAll, setDefaultExpandAll] = useState(false);
+  const [moduleJumpList, setModuleJumpList] = useState([]);
+  const [show, setShow] = useState(false);
+  const filteredModules = useMemo(() => {
+    let res = includeModules.slice();
+    if (moduleKeyword) {
+      const regexp = new RegExp(moduleKeyword, "i");
+      res = res.filter((e) => regexp.test(e.path));
+    }
+    if (moduleSizeLimit) {
+      res = res.filter((e) => e.size.parsedSize >= moduleSizeLimit);
+    }
+    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;
+        const { parsedSize = 0, sourceSize = 0 } = mod.size;
+        const isConcatenation = mod.kind === SDK.ModuleKind.Concatenation;
+        const containedOtherModules = !isConcatenation && parsedSize === 0 && includeModules.filter((e) => e !== mod && e.modules && e.modules.indexOf(mod.id) > -1);
+        return /* @__PURE__ */ jsxs(Space, { children: [
+          /* @__PURE__ */ jsx(Keyword, { ellipsis: true, style: { maxWidth: 500 }, text: basename, keyword: moduleKeyword }),
+          parsedSize !== 0 ? /* @__PURE__ */ jsx(
+            Bdg,
+            {
+              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) })
+              ] })
+            }
+          ) : sourceSize !== 0 ? (
+            // fallback to display tag for source size
+            /* @__PURE__ */ jsx(Bdg, { label: "source size", value: formatSize(sourceSize), type: "default" })
+          ) : 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,
+                " modules"
+              ] }) }),
+              children: /* @__PURE__ */ jsx(Tag, { color: "#46b5c8", children: "concatenated" })
+            }
+          ) : null,
+          containedOtherModules && containedOtherModules.length ? /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              title: /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+                /* @__PURE__ */ jsx(Typography.Text, { style: { color: "inherit" }, children: "this is a concatenated module, it is be contained in these modules below:" }),
+                containedOtherModules.map(({ id, path }) => {
+                  if (isJsDataUrl(path)) {
+                    return /* @__PURE__ */ jsx(
+                      Typography.Paragraph,
+                      {
+                        ellipsis: { rows: 4 },
+                        style: { color: "inherit", maxWidth: "100%" },
+                        code: true,
+                        children: path
+                      },
+                      id
+                    );
+                  }
+                  const p = relative(dirname(mod.path), path);
+                  if (p.startsWith("javascript;charset=utf-8;base64,")) {
+                    return /* @__PURE__ */ jsx(Typography.Text, { style: { color: "inherit", maxWidth: "100%" }, code: true, children: p[0] === "." ? p : `./${p}` }, id);
+                  }
+                  return /* @__PURE__ */ jsx(Typography.Text, { style: { color: "inherit" }, code: true, children: p[0] === "." ? p : `./${p}` }, id);
+                })
+              ] }),
+              children: /* @__PURE__ */ jsx(Tag, { color: "#46b5c8", children: "concatenated" })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              icon: /* @__PURE__ */ jsx(DeploymentUnitOutlined, {}),
+              onClick: () => {
+                setModuleJumpList([mod.id]);
+                setShow(true);
+              },
+              children: "module explorer"
+            }
+          ),
+          /* @__PURE__ */ jsx(ModuleCodeViewer, { data: mod })
+        ] });
+      },
+      dirTitle(dir, defaultTitle) {
+        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;
+          });
+          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
+          ] });
+        }
+        return defaultTitle;
+      }
+    });
+    return res;
+  }, [filteredModules]);
+  const onSearch = (value) => setModuleKeyword(value);
+  useEffect(() => {
+    setModuleKeyword("");
+    setDefaultExpandAll(false);
+  }, [asset]);
+  useEffect(() => {
+    setDefaultExpandAll(false);
+  }, [moduleKeyword]);
+  return /* @__PURE__ */ jsx(ModuleGraphListContext.Provider, { value: { moduleJumpList, setModuleJumpList }, children: /* @__PURE__ */ jsxs(Card, { title: `Modules of "${asset.path}"`, bodyStyle: { overflow: "scroll", height }, size: "small", children: [
+    includeModules.length ? /* @__PURE__ */ jsxs(Row, { children: [
+      /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsx(ModulesStatistics, { modules: includeModules, chunks: includeChunks, filteredModules }) }),
+      /* @__PURE__ */ jsx(Col, { span: 24, children: /* @__PURE__ */ jsxs(Space, { children: [
+        /* @__PURE__ */ jsx(KeywordInput, { placeholder: "search module by keyword", onChange: onSearch }, asset.path),
+        /* @__PURE__ */ jsx(Button, { onClick: () => setDefaultExpandAll(true), size: "small", icon: /* @__PURE__ */ jsx(ColumnHeightOutlined, {}), children: "expand all" })
+      ] }) }),
+      /* @__PURE__ */ jsx(Col, { span: 24, style: { marginTop: Size.BasePadding }, children: filteredModules.length ? /* @__PURE__ */ jsx(
+        FileTree,
+        {
+          onExpand: (expandedKeys) => {
+            expanedModulesKeys = expandedKeys;
+          },
+          treeData: fileStructures,
+          autoExpandParent: true,
+          defaultExpandParent: true,
+          defaultExpandedKeys: (expanedModulesKeys == null ? void 0 : expanedModulesKeys.length) ? expanedModulesKeys : fileStructures.length === 1 ? [fileStructures[0].key] : [],
+          defaultExpandAll: defaultExpandAll || filteredModules.length <= 20
+        },
+        `tree_${moduleKeyword}_${defaultExpandAll}_${asset.path}`
+      ) : /* @__PURE__ */ jsx(
+        Empty,
+        {
+          description: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: `"${moduleKeyword}" can't match any modules` })
+        }
+      ) })
+    ] }) : /* @__PURE__ */ jsx(Empty, { description: /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: `"${asset.path}" don't has any modules` }) }),
+    /* @__PURE__ */ jsx(
+      ModuleGraphViewer,
+      {
+        id: (moduleJumpList == null ? void 0 : moduleJumpList.length) ? moduleJumpList[moduleJumpList.length - 1] : "",
+        show,
+        setShow,
+        cwd: root
+      }
+    )
+  ] }) });
+};
+export {
+  AssetDetail,
+  ModuleCodeViewer,
+  ModuleGraphViewer,
+  ModulesStatistics,
+  getChildrenModule
+};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { SDK } from '@rsdoctor/types';
+export declare const BundleCards: React.FC<{
+  cwd: string;
+  errors: SDK.ErrorsData;
+  summary: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.API.GetAssetsSummary>;
+}>;

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

@@ -0,0 +1,154 @@
+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 { Size } from "../../../constants";
+import { StatisticCard } from "../../../components/Card/statistic";
+import { DuplicatePackageDrawerWithServer } from "../../../components/TextDrawer";
+import { SizeCard } from "../../../components/Card/size";
+const height = 100;
+const AssetCard = ({ showProgress = false, data, total }) => {
+  return /* @__PURE__ */ jsx(SizeCard, { files: data.files, total, showProgress });
+};
+const AssetCardContainer = ({ titles, datas }) => {
+  const [idx, setIdx] = useState(0);
+  return /* @__PURE__ */ jsx(
+    StatisticCard,
+    {
+      title: titles.length > 1 ? /* @__PURE__ */ jsx(
+        Segmented,
+        {
+          defaultValue: titles[idx],
+          options: titles,
+          onChange: (e) => {
+            setIdx(titles.indexOf(e));
+          },
+          size: "small",
+          style: { transition: "transform 0.3s ease" },
+          value: titles[idx] || titles[0]
+        }
+      ) : titles[idx],
+      value: datas.map((e, i) => /* @__PURE__ */ createElement(AssetCard, __spreadProps(__spreadValues({}, e), { key: i })))[idx]
+    }
+  );
+};
+const BundleCards = ({ cwd, errors, summary }) => {
+  const duplicatePackages = useDuplicatePackagesByErrors(errors);
+  const arr = [
+    /* @__PURE__ */ jsx(
+      AssetCardContainer,
+      {
+        titles: ["Total Files"],
+        datas: [
+          {
+            data: summary.all.total,
+            total: summary.all.total.size
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AssetCardContainer,
+      {
+        titles: ["Total JS", "Initial JS"],
+        datas: [
+          {
+            data: summary.js.total,
+            total: summary.all.total.size,
+            showProgress: true
+          },
+          {
+            data: summary.js.initial,
+            total: summary.all.total.size,
+            showProgress: true
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AssetCardContainer,
+      {
+        titles: ["Total CSS", "Initial CSS"],
+        datas: [
+          {
+            data: summary.css.total,
+            total: summary.all.total.size,
+            showProgress: true
+          },
+          {
+            data: summary.css.initial,
+            total: summary.all.total.size,
+            showProgress: true
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AssetCardContainer,
+      {
+        titles: ["Images", "Fonts", "Media"],
+        datas: [
+          {
+            data: summary.imgs.total,
+            total: summary.all.total.size,
+            showProgress: true
+          },
+          {
+            data: summary.fonts.total,
+            total: summary.all.total.size,
+            showProgress: true
+          },
+          {
+            data: summary.media.total,
+            total: summary.all.total.size,
+            showProgress: true
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      AssetCardContainer,
+      {
+        titles: ["HTML Files"],
+        datas: [
+          {
+            data: summary.html.total,
+            total: summary.all.total.size,
+            showProgress: true
+          }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      StatisticCard,
+      {
+        title: "Duplicate Packages",
+        value: /* @__PURE__ */ jsx(DuplicatePackageDrawerWithServer, { buttonStyle: { height }, duplicatePackages, cwd })
+      }
+    )
+  ];
+  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)) });
+};
+export {
+  BundleCards
+};

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

@@ -0,0 +1,5 @@
+export interface CodeEditorProps {
+  content?: string;
+  path: string;
+}
+export declare function CodeEditor(props: CodeEditorProps): import("react/jsx-runtime").JSX.Element;