@rsdoctor/components 0.0.0-next-20240620044732

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

@@ -0,0 +1,545 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+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 { omitBy, 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: "Bundled Code (After bundle and tree-shaking)"
+};
+const tagStyle = {
+  margin: "none",
+  marginInlineEnd: 0
+};
+const ModuleCodeViewer = ({
+  data
+}) => {
+  const [tab, setTab] = useState("parsedSource");
+  const { t } = useI18n();
+  const TAB_LAB_MAP = {
+    source: "Source Code",
+    transformed: `Transformed Code(${t("After Compile")})`,
+    parsedSource: `Bundled Code(${t("After Bundled")})`
+  };
+  if (!data)
+    return null;
+  const { path } = data;
+  return /* @__PURE__ */ jsx(
+    TextDrawer,
+    {
+      text: "",
+      buttonProps: {
+        size: "small",
+        icon: /* @__PURE__ */ jsx(CodepenCircleOutlined, {}),
+        type: "default"
+      },
+      buttonStyle: { padding: `0 4px` },
+      drawerProps: {
+        destroyOnClose: true,
+        title: `Code of "${path}"`
+      },
+      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__ */ jsxs(Typography.Text, { strong: true, children: [
+                              "Transformed:",
+                              " "
+                            ] }),
+                            /* @__PURE__ */ jsx(Typography.Text, { children: TAB_MAP.transformed })
+                          ] }),
+                          /* @__PURE__ */ jsxs("div", { children: [
+                            /* @__PURE__ */ jsxs(Typography.Text, { strong: true, children: [
+                              "Bundled Source:",
+                              " "
+                            ] }),
+                            /* @__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",
+                    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 bundled 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 bundled 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 fileStructures = useMemo(() => {
+    const res = createFileStructures({
+      files: filteredModules.map((e) => e.path).filter(Boolean),
+      inlinedResourcePathKey,
+      fileTitle(file, basename) {
+        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(
+            Tooltip,
+            {
+              title: /* @__PURE__ */ jsxs(Space, { direction: "vertical", children: [
+                /* @__PURE__ */ jsx(Tag, { color: "orange", children: "Bundled Size:" + formatSize(parsedSize) }),
+                /* @__PURE__ */ jsx(Tag, { color: "volcano", children: "Source Size:" + formatSize(sourceSize) })
+              ] }),
+              color: "white",
+              children: /* @__PURE__ */ jsx(Tag, { color: "purple", style: tagStyle, children: "Bundled: " + formatSize(parsedSize) })
+            }
+          ) : sourceSize !== 0 ? (
+            // fallback to display tag for source size
+            /* @__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",
+                " ",
+                mod.modules?.length,
+                " modules"
+              ] }) }),
+              children: /* @__PURE__ */ jsx(Tag, { color: "green", style: tagStyle, 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: "green", children: "concatenated" })
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "small",
+              icon: /* @__PURE__ */ jsx(DeploymentUnitOutlined, {}),
+              onClick: () => {
+                setModuleJumpList([mod.id]);
+                setShow(true);
+              }
+            }
+          ),
+          /* @__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) => e.size?.parsedSize || 0);
+          return /* @__PURE__ */ jsxs(Space, { children: [
+            /* @__PURE__ */ jsx(Typography.Text, { children: defaultTitle }),
+            parsedSize > 0 ? /* @__PURE__ */ jsx(Tag, { style: tagStyle, color: "orange", children: "Bundled:" + formatSize(parsedSize) }) : 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?.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}" doesn't have any modules`
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ModuleGraphViewer,
+              {
+                id: 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,143 @@
+import { jsx } from "react/jsx-runtime";
+import { createElement } from "react";
+import { useState } from "react";
+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, tagBgColor }) => {
+  const { token } = useToken();
+  const _tagBgColor = tagBgColor || token.colorPrimaryBorderHover;
+  return /* @__PURE__ */ jsx(SizeCard, { files: data.files, total, showProgress, tagBgColor: _tagBgColor });
+};
+const AssetCardContainer = ({ titles, datas, bgColor }) => {
+  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, { ...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(
+      AssetCardContainer,
+      {
+        titles: ["Total Files"],
+        datas: [
+          {
+            data: summary.all.total,
+            total: summary.all.total.size,
+            showProgress: true
+          }
+        ]
+      }
+    ),
+    /* @__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: 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/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;