@rsdoctor/components 0.4.6 → 0.4.7

package/dist/components/Alert/package-relation.js

@@ -225,7 +225,7 @@ const PackageRelationAlert = ({
             drawerProps: { title: data.title, width: TextDrawerWidth },
             children: /* @__PURE__ */ jsxs(Space, { direction: "vertical", className: "alert-space", children: [
               /* @__PURE__ */ jsxs(Space, { style: { marginBottom: Size.BasePadding / 2 }, children: [
-                /* @__PURE__ */ jsx(Title, { text: name, upperFisrt: false }),
+                /* @__PURE__ */ jsx(Title, { text: name, upperFirst: false }),
                 /* @__PURE__ */ jsx(Typography.Text, { strong: true, children: versions.length }),
                 /* @__PURE__ */ jsx(Typography.Text, { children: " versions was found: " }),
                 versions.map((e) => /* @__PURE__ */ jsx(Typography.Text, { strong: true, code: true, children: e }, e))

package/dist/components/BundleDiff/DiffContainer/row.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import { BundleDiffComponentCardProps, BundleDiffTableAssetsData, BundleDiffTableModulesData } from './types';
 export declare const ModuleHashPattern: RegExp;
 export declare const getSizeColumnPropsForModuleRow: (key: "baseline" | "current", sizeKey: "parsedSize" | "sourceSize") => ColumnType<BundleDiffTableModulesData>;
-export declare const getTargetColumnPropsForModuleRow: (key: "baseline" | "current", bMoudlesCount: number, cMoudlesCount: number) => ColumnGroupType<BundleDiffTableModulesData>;
+export declare const getTargetColumnPropsForModuleRow: (key: "baseline" | "current", bModulesCount: number, cModulesCount: number) => ColumnGroupType<BundleDiffTableModulesData>;
 export declare const ModuleRowForAsset: React.FC<{
     data: BundleDiffTableAssetsData;
 } & Pick<BundleDiffComponentCardProps, 'baseline' | 'current'>>;

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

@@ -44,13 +44,13 @@ const getSizeColumnPropsForModuleRow = (key, sizeKey) => {
     }
   };
 };
-const getTargetColumnPropsForModuleRow = (key, bMoudlesCount, cMoudlesCount) => {
+const getTargetColumnPropsForModuleRow = (key, bModulesCount, cModulesCount) => {
   const isB = key === "baseline";
   return {
     title: () => {
-      const count = isB ? bMoudlesCount : cMoudlesCount;
+      const count = isB ? bModulesCount : cModulesCount;
       const title = upperFirst(key);
-      const diff = Graph.diffSize(bMoudlesCount, cMoudlesCount);
+      const diff = Graph.diffSize(bModulesCount, cModulesCount);
       return /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(Typography.Text, { children: title }),
         /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
@@ -161,7 +161,7 @@ const ModuleRowForAsset = ({ data, baseline, current }) => {
     });
     return [...map.values()];
   }, [bModules, cModules, searchText]);
-  const { bMoudlesCount, cMoudlesCount, totalCount } = useMemo(() => {
+  const { bModulesCount, cModulesCount, 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);
@@ -172,8 +172,8 @@ const ModuleRowForAsset = ({ data, baseline, current }) => {
       totalCount2 = dataSource.filter(fileNameFilter).length;
     }
     return {
-      bMoudlesCount: b.length,
-      cMoudlesCount: c.length,
+      bModulesCount: b.length,
+      cModulesCount: c.length,
       totalCount: totalCount2
     };
   }, [dataSource, searchText]);
@@ -319,13 +319,13 @@ const ModuleRowForAsset = ({ data, baseline, current }) => {
         },
         getTargetColumnPropsForModuleRow(
           "current",
-          bMoudlesCount,
-          cMoudlesCount
+          bModulesCount,
+          cModulesCount
         ),
         getTargetColumnPropsForModuleRow(
           "baseline",
-          bMoudlesCount,
-          cMoudlesCount
+          bModulesCount,
+          cModulesCount
         ),
         {
           title: "Actions",

package/dist/components/Charts/TimelineCharts/index.js

@@ -16,7 +16,7 @@ const LINE_HEIGHT = 60;
 const TimelineCom = memo(({ loaderData, pluginsData, formatterFn, chartType = "normal" }) => {
   const data = [];
   let categories = [];
-  const [optionsData, setOptinsData] = useState({});
+  const [optionsData, setOptionsData] = useState({});
   echarts.use([
     CustomChart,
     TooltipComponent,
@@ -210,7 +210,7 @@ const TimelineCom = memo(({ loaderData, pluginsData, formatterFn, chartType = "n
         }
       ]
     };
-    setOptinsData(option);
+    setOptionsData(option);
   }, [loaderData, pluginsData]);
   return /* @__PURE__ */ jsx(
     ReactEChartsCore,

package/dist/components/Charts/tooltips.css

@@ -57,6 +57,6 @@
   flex: 1 1;
   padding-left: 4px;
 }
-.loader-tooltip-textbold {
+.loader-tooltip-text-bold {
   font-weight: 500;
 }

package/dist/components/Charts/utils.js

@@ -15,7 +15,7 @@ function getTooltipHtmlForLoader(loader) {
     </li>
     <li class="loader-tooltip-item">
       <span>duration</span>
-      <span class="loader-tooltip-textbold">${formatCosts(loader.costs)}</span>
+      <span class="loader-tooltip-text-bold">${formatCosts(loader.costs)}</span>
     </li>
     <li class="loader-tooltip-item">
       <span>filepath</span>
@@ -23,13 +23,13 @@ function getTooltipHtmlForLoader(loader) {
     </li>
     <li class="loader-tooltip-item">
       <span>start</span>
-      <span class="loader-tooltip-textbold">${dayjs(loader.startAt).format(
+      <span class="loader-tooltip-text-bold">${dayjs(loader.startAt).format(
     "YYYY/MM/DD HH:mm:ss"
   )}</span>
     </li>
     <li class="loader-tooltip-item">
       <span>end</span>
-      <span class="loader-tooltip-textbold">${dayjs(loader.endAt).format(
+      <span class="loader-tooltip-text-bold">${dayjs(loader.endAt).format(
     "YYYY/MM/DD HH:mm:ss"
   )}</span>
     </li>
@@ -52,19 +52,19 @@ function renderTotalLoadersTooltip(loaderName, loaders, cwd) {
   <div class="loader-tooltip-title">${loaderName}</div>
   <li class="loader-tooltip-item">
     <span>files</span>
-    <span class="loader-tooltip-textbold">${resources.length}</span>
+    <span class="loader-tooltip-text-bold">${resources.length}</span>
   </li>
   <li class="loader-tooltip-item">
     <span>files(node_modules)</span>
-    <span class="loader-tooltip-textbold">${nodeModulesResources.length}</span>
+    <span class="loader-tooltip-text-bold">${nodeModulesResources.length}</span>
   </li>
   <li class="loader-tooltip-item">
     <span>files(outside the cwd)</span>
-    <span class="loader-tooltip-textbold">${outsideResources.length}</span>
+    <span class="loader-tooltip-text-bold">${outsideResources.length}</span>
   </li>
   <li class="loader-tooltip-item">
     <span>duration(estimated)</span>
-    <span class="loader-tooltip-textbold">${formatCosts(duration)}</span>
+    <span class="loader-tooltip-text-bold">${formatCosts(duration)}</span>
   </li>
   <li class="loader-tooltip-item">
     <span>start(min)</span>

package/dist/components/CodeViewer/index.d.ts

@@ -1,4 +1,4 @@
 export * from './diff';
-export * from './hightlight';
+export * from './highlight';
 export * from './viewer';
 export * from './config';

package/dist/components/CodeViewer/index.js

@@ -1,4 +1,4 @@
 export * from "./diff";
-export * from "./hightlight";
+export * from "./highlight";
 export * from "./viewer";
 export * from "./config";

package/dist/components/Layout/progress.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { SDK } from '@rsdoctor/types';
 export interface ProgressProps {
-    progress: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.APIExtends.GetCompileProgess>;
+    progress: SDK.ServerAPI.InferResponseType<SDK.ServerAPI.APIExtends.GetCompileProgress>;
 }
 export declare const Progress: React.FC<Omit<ProgressProps, "progress"> & Partial<{
     body?: any;

package/dist/components/Layout/progress.js

@@ -27,14 +27,21 @@ const ProgressBase = ({ progress }) => {
           percent: 100,
           status: "active",
           size: "small",
-          format: () => /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize: 12 }, type: "secondary", children: `${per}% ${message}` })
+          format: () => /* @__PURE__ */ jsx(
+            Typography.Text,
+            {
+              style: { fontSize: 12 },
+              type: "secondary",
+              children: `${per}% ${message}`
+            }
+          )
         }
       ) })
     }
   );
 };
 const Progress = withServerAPI({
-  api: SDK.ServerAPI.APIExtends.GetCompileProgess,
+  api: SDK.ServerAPI.APIExtends.GetCompileProgress,
   responsePropName: "progress",
   Component: ProgressBase,
   fallbackComponent: () => null

package/dist/components/Status/failed.js

@@ -2,10 +2,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, Empty, Space, Typography } from "antd";
 import React from "react";
 const defaultTitle = "Load data failed, please try again";
-const defaultBottonText = "retry";
+const defaultButtonText = "retry";
 const FailedStatusComponent = ({
   title = defaultTitle,
-  buttonText = defaultBottonText,
+  buttonText = defaultButtonText,
   retry
 }) => {
   return /* @__PURE__ */ jsx(

package/dist/components/Title/index.d.ts

@@ -3,7 +3,7 @@ interface TitleProps {
     /**
      * @default true
      */
-    upperFisrt?: boolean;
+    upperFirst?: boolean;
     /**
      * @default 16
      */

package/dist/components/Title/index.js

@@ -1,8 +1,13 @@
 import { jsx } from "react/jsx-runtime";
 import { Typography } from "antd";
 import { upperFirst as upf } from "lodash-es";
-const Title = ({ upperFisrt = true, fontSize = 16, text, hash }) => {
-  const t = typeof text === "string" ? upperFisrt ? upf(text) : text : text;
+const Title = ({
+  upperFirst = true,
+  fontSize = 16,
+  text,
+  hash
+}) => {
+  const t = typeof text === "string" ? upperFirst ? upf(text) : text : text;
   return /* @__PURE__ */ jsx(Typography.Text, { style: { fontSize }, strong: true, children: hash ? /* @__PURE__ */ jsx("a", { href: hash, id: hash.replace(/^#/, ""), style: { color: "inherit" }, children: t }) : t });
 };
 export {

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

@@ -40,7 +40,7 @@ import {
   useI18n
 } from "../../../utils";
 import { ModuleGraphListContext } from "../config";
-let expanedModulesKeys = [];
+let expandedModulesKeys = [];
 const TAB_MAP = {
   source: "source code",
   transformed: "Transformed Code (After compile)",
@@ -77,7 +77,7 @@ const ModuleCodeViewer = ({
       text: "",
       buttonProps: {
         size: "small",
-        icon: /* @__PURE__ */ jsx(CodepenCircleOutlined, {}),
+        icon: /* @__PURE__ */ jsx(Popover, { content: "Open the Codes Box", children: /* @__PURE__ */ jsx(CodepenCircleOutlined, {}) }),
         type: "default"
       },
       buttonStyle: { padding: `0 4px` },
@@ -415,7 +415,7 @@ const AssetDetail = ({
               children: /* @__PURE__ */ jsx(Tag, { color: "green", children: "concatenated" })
             }
           ) : null,
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(Popover, { content: "Open the Module Graph Box", children: /* @__PURE__ */ jsx(
             Button,
             {
               size: "small",
@@ -425,7 +425,7 @@ const AssetDetail = ({
                 setShow(true);
               }
             }
-          ),
+          ) }),
           /* @__PURE__ */ jsx(ModuleCodeViewer, { data: mod })
         ] });
       },
@@ -436,9 +436,13 @@ const AssetDetail = ({
             (e) => includeModules.find((m) => m.path === e)
           );
           const parsedSize = sumBy(mods, (e) => e.size?.parsedSize || 0);
+          const sourceSize = sumBy(mods, (e) => e.size?.sourceSize || 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
+            parsedSize > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(Tag, { style: tagStyle, color: "orange", children: "Bundled:" + formatSize(parsedSize) }),
+              /* @__PURE__ */ jsx(Tag, { style: tagStyle, color: "lime", children: "Source:" + formatSize(sourceSize) })
+            ] }) : /* @__PURE__ */ jsx(Tag, { style: tagStyle, color: "lime", children: "Source:" + formatSize(sourceSize) })
           ] });
         }
         return defaultTitle;
@@ -497,12 +501,12 @@ const AssetDetail = ({
                 FileTree,
                 {
                   onExpand: (expandedKeys) => {
-                    expanedModulesKeys = expandedKeys;
+                    expandedModulesKeys = expandedKeys;
                   },
                   treeData: fileStructures,
                   autoExpandParent: true,
                   defaultExpandParent: true,
-                  defaultExpandedKeys: expanedModulesKeys?.length ? expanedModulesKeys : fileStructures.length === 1 ? [fileStructures[0].key] : [],
+                  defaultExpandedKeys: expandedModulesKeys?.length ? expandedModulesKeys : fileStructures.length === 1 ? [fileStructures[0].key] : [],
                   defaultExpandAll: defaultExpandAll || filteredModules.length <= 20
                 },
                 `tree_${moduleKeyword}_${defaultExpandAll}_${asset.path}`

package/dist/pages/ModuleAnalyze/{dependncy.js → dependency.js}

@@ -25,7 +25,7 @@ const DependencyTree = ({ dependencies, cwd, module }) => {
   }, [module]);
   return /* @__PURE__ */ jsx(Row, { justify: "start", align: "middle", children: /* @__PURE__ */ jsx(Col, { span: 24, children: treedata.length ? /* @__PURE__ */ jsx(FileTree, { treeData: treedata, needJumpto: true, cwd }) : /* @__PURE__ */ jsx(Empty, {}) }) });
 };
-var dependncy_default = memo(DependencyTree);
+var dependency_default = memo(DependencyTree);
 export {
-  dependncy_default as default
+  dependency_default as default
 };

package/dist/pages/ModuleAnalyze/fileTree.js

@@ -7,7 +7,17 @@ import {
   RightSquareTwoTone
 } from "@ant-design/icons";
 import { SDK } from "@rsdoctor/types";
-import { Badge, Button, Col, Empty, Popover, Radio, Row, Tag, Typography } from "antd";
+import {
+  Badge,
+  Button,
+  Col,
+  Empty,
+  Popover,
+  Radio,
+  Row,
+  Tag,
+  Typography
+} from "antd";
 import { useEffect, useState } from "react";
 import { ServerAPIProvider } from "../../components/Manifest";
 import { Title } from "../../components/Title";
@@ -16,9 +26,9 @@ import { useI18n } from "../../utils/hooks";
 import { ChunksTable } from "./chunks";
 import { FileTree } from "./components/fileTreeCom";
 import { clsNamePrefix } from "./constants";
-import DependencyTree from "./dependncy";
+import DependencyTree from "./dependency";
 import { getImporteds, getModuleReasonsTree } from "./utils";
-import { useCreatFileTreeData } from "./utils/hooks";
+import { useCreateFileTreeData } from "./utils/hooks";
 var ChartDimension = /* @__PURE__ */ ((ChartDimension2) => {
   ChartDimension2[ChartDimension2["Dependencies"] = 0] = "Dependencies";
   ChartDimension2[ChartDimension2["Chunks"] = 1] = "Chunks";
@@ -27,11 +37,21 @@ var ChartDimension = /* @__PURE__ */ ((ChartDimension2) => {
 const ModuleFilesTree = (props) => {
   const { curModule, modules, dependencies, cwd, selectedChunk = "" } = props;
   const { t } = useI18n();
-  const [importedModules, setImportedModules] = useState([]);
-  const [dimension, setDimension] = useState(0 /* Dependencies */);
+  const [importedModules, setImportedModules] = useState(
+    []
+  );
+  const [dimension, setDimension] = useState(
+    0 /* Dependencies */
+  );
   const [fold, setFold] = useState(true);
-  const { data: fileStructures } = useCreatFileTreeData(modules, importedModules, curModule);
-  const [reasonsTree, setReasonsTree] = useState({});
+  const { data: fileStructures } = useCreateFileTreeData(
+    modules,
+    importedModules,
+    curModule
+  );
+  const [reasonsTree, setReasonsTree] = useState(
+    {}
+  );
   useEffect(() => {
     const importeds = getImporteds(curModule, modules);
     setImportedModules(importeds);
@@ -62,7 +82,15 @@ const ModuleFilesTree = (props) => {
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
             /* @__PURE__ */ jsx(Badge, { status: "success", text: " " }),
-            /* @__PURE__ */ jsx(Popover, { content: "xxxx", title: "Concatenated Module Name", trigger: "hover", children: /* @__PURE__ */ jsx(Tag, { color: TAG_PALLETE.DARK_BLUE, children: "Concatenated" }) }),
+            /* @__PURE__ */ jsx(
+              Popover,
+              {
+                content: "*",
+                title: "Concatenated Module Name",
+                trigger: "hover",
+                children: /* @__PURE__ */ jsx(Tag, { color: TAG_PALLETE.DARK_BLUE, children: "Concatenated" })
+              }
+            ),
             /* @__PURE__ */ jsx(Typography.Text, { children: `: ${t("Concatenated Tag")}` })
           ] }),
           /* @__PURE__ */ jsxs("div", { children: [
@@ -82,7 +110,9 @@ const ModuleFilesTree = (props) => {
           FileTree,
           {
             cwd,
-            treeData: selectedChunk ? fileStructures.filter((_parent) => reasonsTree[_parent.id].indexOf(selectedChunk) >= 0) : fileStructures,
+            treeData: selectedChunk ? fileStructures.filter(
+              (_parent) => reasonsTree[_parent.id].indexOf(selectedChunk) >= 0
+            ) : fileStructures,
             needCode: true,
             needShowAllTree: true,
             needJumpto: true,
@@ -90,33 +120,66 @@ const ModuleFilesTree = (props) => {
           }
         ) : /* @__PURE__ */ jsx(Empty, { className: `${clsNamePrefix}-empty` })
       ] }) }) }),
-      /* @__PURE__ */ jsx(Col, { span: fold ? 6 : 12, children: /* @__PURE__ */ jsxs("div", { className: `${clsNamePrefix}-file-tree`, style: { padding: Size.BasePadding / 2 }, children: [
-        fold ? /* @__PURE__ */ jsx(Popover, { content: "Unfold [Dependencies & Chunks] Box.", children: /* @__PURE__ */ jsx(MenuFoldOutlined, { onClick: () => setFold(!fold), style: { marginRight: 8 } }) }) : /* @__PURE__ */ jsx(Popover, { content: "Fold [Dependencies & Chunks] Box.", children: /* @__PURE__ */ jsx(MenuUnfoldOutlined, { onClick: () => setFold(!fold), style: { marginRight: 8 } }) }),
-        /* @__PURE__ */ jsx(
-          Radio.Group,
-          {
-            options: [
+      /* @__PURE__ */ jsx(Col, { span: fold ? 6 : 12, children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `${clsNamePrefix}-file-tree`,
+          style: { padding: Size.BasePadding / 2 },
+          children: [
+            fold ? /* @__PURE__ */ jsx(Popover, { content: "Unfold [Dependencies & Chunks] Box.", children: /* @__PURE__ */ jsx(
+              MenuFoldOutlined,
               {
-                label: "Dependencies",
-                value: 0 /* Dependencies */
-              },
+                onClick: () => setFold(!fold),
+                style: { marginRight: 8 }
+              }
+            ) }) : /* @__PURE__ */ jsx(Popover, { content: "Fold [Dependencies & Chunks] Box.", children: /* @__PURE__ */ jsx(
+              MenuUnfoldOutlined,
               {
-                label: "Chunks",
-                value: 1 /* Chunks */
+                onClick: () => setFold(!fold),
+                style: { marginRight: 8 }
               }
-            ],
-            onChange: (e) => setDimension(e.target.value),
-            value: dimension,
-            optionType: "button",
-            buttonStyle: "solid",
-            size: "middle"
-          }
-        ),
-        !fold ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          dimension === 0 /* Dependencies */ && /* @__PURE__ */ jsx(Col, { span: 24, style: { marginTop: Size.BasePadding / 2 }, children: curModule ? /* @__PURE__ */ jsx(DependencyTree, { module: curModule, dependencies, cwd }) : /* @__PURE__ */ jsx(Empty, { className: `${clsNamePrefix}-empty` }) }),
-          dimension === 1 /* Chunks */ && /* @__PURE__ */ jsx(Col, { span: 18, style: { marginTop: Size.BasePadding / 2 }, children: curModule ? /* @__PURE__ */ jsx(ServerAPIProvider, { api: SDK.ServerAPI.API.GetChunksByModuleId, body: { moduleId: curModule.id }, children: (res) => /* @__PURE__ */ jsx(ChunksTable, { chunks: res }) }) : /* @__PURE__ */ jsx(Empty, { className: `${clsNamePrefix}-empty` }) })
-        ] }) : /* @__PURE__ */ jsx(Fragment, {})
-      ] }) })
+            ) }),
+            /* @__PURE__ */ jsx(
+              Radio.Group,
+              {
+                options: [
+                  {
+                    label: "Dependencies",
+                    value: 0 /* Dependencies */
+                  },
+                  {
+                    label: "Chunks",
+                    value: 1 /* Chunks */
+                  }
+                ],
+                onChange: (e) => setDimension(e.target.value),
+                value: dimension,
+                optionType: "button",
+                buttonStyle: "solid",
+                size: "middle"
+              }
+            ),
+            !fold ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              dimension === 0 /* Dependencies */ && /* @__PURE__ */ jsx(Col, { span: 24, style: { marginTop: Size.BasePadding / 2 }, children: curModule ? /* @__PURE__ */ jsx(
+                DependencyTree,
+                {
+                  module: curModule,
+                  dependencies,
+                  cwd
+                }
+              ) : /* @__PURE__ */ jsx(Empty, { className: `${clsNamePrefix}-empty` }) }),
+              dimension === 1 /* Chunks */ && /* @__PURE__ */ jsx(Col, { span: 18, style: { marginTop: Size.BasePadding / 2 }, children: curModule ? /* @__PURE__ */ jsx(
+                ServerAPIProvider,
+                {
+                  api: SDK.ServerAPI.API.GetChunksByModuleId,
+                  body: { moduleId: curModule.id },
+                  children: (res) => /* @__PURE__ */ jsx(ChunksTable, { chunks: res })
+                }
+              ) : /* @__PURE__ */ jsx(Empty, { className: `${clsNamePrefix}-empty` }) })
+            ] }) : /* @__PURE__ */ jsx(Fragment, {})
+          ]
+        }
+      ) })
     ] })
   ] });
 };

package/dist/pages/ModuleAnalyze/utils/hooks.d.ts

@@ -15,7 +15,7 @@ export type NewTreeNodeType = {
     children?: number[];
     needExpand?: boolean | string;
 };
-export declare function useCreatFileTreeData(modules: SDK.ModuleData[], importedModules: SDK.ModuleData[], curModule: SDK.ModuleData): {
+export declare function useCreateFileTreeData(modules: SDK.ModuleData[], importedModules: SDK.ModuleData[], curModule: SDK.ModuleData): {
     data: NewTreeNodeType[];
 };
 export declare function getContactMainModulePath(concatModules: number[], modules: SDK.ModuleData[]): string[];

package/dist/pages/ModuleAnalyze/utils/hooks.js

@@ -2,7 +2,7 @@ import { compact } from "lodash-es";
 import { useMemo } from "react";
 import { formatSize, getShortPath } from "../../../utils";
 import { getImporteds } from ".";
-function useCreatFileTreeData(modules, importedModules, curModule) {
+function useCreateFileTreeData(modules, importedModules, curModule) {
   return useMemo(() => {
     if (!importedModules || !importedModules?.length) {
       return { filterData: [], data: [] };
@@ -53,10 +53,12 @@ function getLeafs(imported, modules, fatherModule) {
   return leafs;
 }
 function getContactMainModulePath(concatModules, modules) {
-  const concatModulesPath = concatModules?.map((cm) => modules.filter((m) => m.id === cm)?.[0]);
+  const concatModulesPath = concatModules?.map(
+    (cm) => modules.filter((m) => m.id === cm)?.[0]
+  );
   return concatModulesPath?.map((m) => m.path);
 }
 export {
   getContactMainModulePath,
-  useCreatFileTreeData
+  useCreateFileTreeData
 };

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { BundleDiffComponentCardProps, BundleDiffTableAssetsData, BundleDiffTableModulesData } from './types';
 export declare const ModuleHashPattern: RegExp;
 export declare const getSizeColumnPropsForModuleRow: (key: "baseline" | "current", sizeKey: "parsedSize" | "sourceSize", sortByChanged?: boolean) => ColumnType<BundleDiffTableModulesData>;
-export declare const getTargetColumnPropsForModuleRow: (key: "baseline" | "current", bMoudlesCount: number, cMoudlesCount: number) => ColumnGroupType<BundleDiffTableModulesData>;
+export declare const getTargetColumnPropsForModuleRow: (key: "baseline" | "current", bModulesCount: number, cModulesCount: number) => ColumnGroupType<BundleDiffTableModulesData>;
 export declare const ModuleRowForAsset: React.FC<{
     data: BundleDiffTableAssetsData;
 } & Pick<BundleDiffComponentCardProps, 'baseline' | 'current'>>;

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

@@ -46,14 +46,14 @@ const getSizeColumnPropsForModuleRow = (key, sizeKey, sortByChanged) => {
     }
   };
 };
-const getTargetColumnPropsForModuleRow = (key, bMoudlesCount, cMoudlesCount) => {
+const getTargetColumnPropsForModuleRow = (key, bModulesCount, cModulesCount) => {
   const [sortByChanged, setSortByChanged] = useState(false);
   const isB = key === "baseline";
   return {
     title: () => {
-      const count = isB ? bMoudlesCount : cMoudlesCount;
+      const count = isB ? bModulesCount : cModulesCount;
       const title = upperFirst(key);
-      const diff = Graph.diffSize(bMoudlesCount, cMoudlesCount);
+      const diff = Graph.diffSize(bModulesCount, cModulesCount);
       return /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx(Typography.Text, { children: title }),
         /* @__PURE__ */ jsx(Divider, { type: "vertical" }),
@@ -169,7 +169,7 @@ const ModuleRowForAsset = ({ data, baseline, current }) => {
     });
     return [...map.values()];
   }, [bModules, cModules, searchText]);
-  const { bMoudlesCount, cMoudlesCount, totalCount } = useMemo(() => {
+  const { bModulesCount, cModulesCount, 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);
@@ -180,8 +180,8 @@ const ModuleRowForAsset = ({ data, baseline, current }) => {
       totalCount2 = dataSource.filter(fileNameFilter).length;
     }
     return {
-      bMoudlesCount: b.length,
-      cMoudlesCount: c.length,
+      bModulesCount: b.length,
+      cModulesCount: c.length,
       totalCount: totalCount2
     };
   }, [dataSource, searchText]);
@@ -327,13 +327,13 @@ const ModuleRowForAsset = ({ data, baseline, current }) => {
         },
         getTargetColumnPropsForModuleRow(
           "current",
-          bMoudlesCount,
-          cMoudlesCount
+          bModulesCount,
+          cModulesCount
         ),
         getTargetColumnPropsForModuleRow(
           "baseline",
-          bMoudlesCount,
-          cMoudlesCount
+          bModulesCount,
+          cModulesCount
         ),
         {
           title: "Actions",

package/dist/pages/TreeShaking/utils.d.ts

@@ -1,6 +1,6 @@
 import { Module, ModuleGraph, Statement } from '@rsdoctor/graph';
 import type { editor } from 'monaco-editor';
-export declare function useFileStructures(modules: Module[], moduleGraph: ModuleGraph, searchInput: string, selectedModule: Module, onItemClick: (file: string) => void, cwd: string): import("../..").DataNode[];
+export declare function useFileStructures(modules: Module[], moduleGraph: ModuleGraph, searchInput: string, selectedModule: Module, onItemClick: (file: string) => void, cwd: string): import("../../utils").DataNode[];
 export declare function getTreeFilesDefaultExpandedKeys(files: any[]): (string | number)[];
 export declare function ellipsisPath(full: string): string;
 export declare function getModulePositionString(statement: Statement, module: Module): string;

package/dist/utils/url.js

@@ -46,8 +46,8 @@ function getSharingUrl(manifestCloudUrl) {
   return url.toString();
 }
 function getDemoUrl() {
-  if (process.env.OFFICAL_DEMO_MANIFEST_PATH) {
-    return getSharingUrl(process.env.OFFICAL_DEMO_MANIFEST_PATH);
+  if (process.env.OFFICIAL_DEMO_MANIFEST_PATH) {
+    return getSharingUrl(process.env.OFFICIAL_DEMO_MANIFEST_PATH);
   }
   return null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rsdoctor/components",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "main": "./dist/index.js",
   "license": "MIT",
   "module": "dist/index.js",
@@ -49,7 +49,7 @@
     "@types/lodash-es": "4.17.12",
     "@types/node": "^16",
     "@types/path-browserify": "1.0.3",
-    "@types/react": "^18.3.8",
+    "@types/react": "^18.3.11",
     "@types/react-highlight-words": "^0.20.0",
     "@types/url-parse": "1.4.11",
     "ansi-to-react": "6.1.6",
@@ -64,7 +64,7 @@
     "path-browserify": "1.0.1",
     "rc-dialog": "9.1.0",
     "rc-tree": "5.7.2",
-    "react": "18.2.0",
+    "react": "18.3.1",
     "react-highlight-words": "^0.20.0",
     "react-hyper-tree": "0.3.12",
     "react-i18next": "12.0.0",
@@ -72,12 +72,12 @@
     "react-markdown": "^9.0.1",
     "react-router-dom": "6.4.3",
     "socket.io-client": "4.6.1",
-    "terser": "^5.33.0",
+    "terser": "^5.34.1",
     "typescript": "^5.2.2",
     "url-parse": "1.5.10",
-    "@rsdoctor/graph": "0.4.6",
-    "@rsdoctor/types": "0.4.6",
-    "@rsdoctor/utils": "0.4.6"
+    "@rsdoctor/graph": "0.4.7",
+    "@rsdoctor/types": "0.4.7",
+    "@rsdoctor/utils": "0.4.7"
   },
   "publishConfig": {
     "access": "public",