@rsdoctor/components 1.5.17 → 1.5.18

package/dist/components/Alerts/bundle-alert.d.ts

@@ -1,5 +1,5 @@
 import { ViewMode } from '../../constants.js';
-import { AlertProps } from '../Alert/types.js';
+import type { AlertProps } from '../Alert/types.js';
 import type { Rule } from '@rsdoctor/types';
 interface BundleAlertProps {
     title: string;

package/dist/components/Alerts/bundle-alert.mjs

@@ -1,88 +1,89 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Empty, Tabs, Tag } from "antd";
+import { useEffect, useState } from "react";
 import { Card } from "../Card/index.mjs";
 import { ECMAVersionCheck } from "../Alert/ecma-version-check.mjs";
 import { Overview } from "../Overall/overview.mjs";
 import { AlertCollapse } from "./collapse.mjs";
 import { CommonList } from "./list.mjs";
 import bundle_alert_module from "./bundle-alert.module.mjs";
-import { useState } from "react";
 import { CrossChunksAlertCollapse } from "./collapse-cross-chunks.mjs";
 import { ModuleMixedChunksAlertCollapse } from "./collapse-module-mixed-chunks.mjs";
 import { SideEffectsOnlyImportsAlertCollapse } from "./collapse-side-effects-only-imports.mjs";
 import { CjsRequireAlertCollapse } from "./collapse-cjs-require.mjs";
 import { EsmResolvedToCjsAlertCollapse } from "./collapse-esm-cjs.mjs";
+const BUILTIN_RULE_TABS = [
+    {
+        key: 'E1001',
+        label: 'Duplicate Packages'
+    },
+    {
+        key: 'E1002',
+        label: 'Cross Chunks Package'
+    },
+    {
+        key: 'E1003',
+        label: 'Loader Performance Optimization'
+    },
+    {
+        key: 'E1004',
+        label: 'ECMA Version Check'
+    },
+    {
+        key: 'E1005',
+        label: 'Default Import Check'
+    },
+    {
+        key: 'E1006',
+        label: 'Module Mixed Chunks'
+    },
+    {
+        key: 'E1007',
+        label: 'Tree Shaking Side Effects Only'
+    },
+    {
+        key: 'E1008',
+        label: 'CJS Require Cannot Tree-Shake'
+    },
+    {
+        key: 'E1009',
+        label: 'ESM Import Resolved to CJS'
+    }
+];
 const BundleAlert = ({ title, dataSource, extraData })=>{
-    const firstKeyWithData = [
-        'E1001',
-        'E1002',
-        'E1003',
-        'E1004',
-        'E1005',
-        'E1006',
-        'E1007',
-        'E1008',
-        'E1009'
-    ].find((code)=>dataSource.some((d)=>d.code === code)) ?? 'E1001';
-    const [activeKey, setActiveKey] = useState(firstKeyWithData);
-    const tabData = [
-        {
-            key: 'E1001',
-            label: 'Duplicate Packages',
-            data: []
-        },
-        {
-            key: 'E1002',
-            label: 'Cross Chunks Package',
-            data: []
-        },
-        {
-            key: 'E1003',
-            label: 'Loader Performance Optimization',
-            data: []
-        },
-        {
-            key: 'E1004',
-            label: 'ECMA Version Check',
-            data: []
-        },
-        {
-            key: 'E1005',
-            label: 'Default Import Check',
-            data: []
-        },
-        {
-            key: 'E1006',
-            label: 'Module Mixed Chunks',
-            data: []
-        },
-        {
-            key: 'E1007',
-            label: 'Tree Shaking Side Effects Only',
-            data: []
-        },
-        {
-            key: 'E1008',
-            label: 'CJS Require Cannot Tree-Shake',
-            data: []
-        },
-        {
-            key: 'E1009',
-            label: 'ESM Import Resolved to CJS',
-            data: []
-        }
-    ];
+    const tabData = BUILTIN_RULE_TABS.map((tab)=>({
+            ...tab,
+            data: [],
+            tag: tab.key
+        }));
+    const customRulesData = [];
     dataSource.forEach((data)=>{
-        const target = tabData.find((td)=>td.key === data.code)?.data;
-        target?.push(data);
+        const target = tabData.find((td)=>td.key === data.code);
+        if (target) target.data.push(data);
+        else customRulesData.push(data);
+    });
+    if (customRulesData.length) tabData.push({
+        key: 'CUSTOM_RULES',
+        label: 'Custom Rules',
+        data: customRulesData,
+        tag: 'Custom'
     });
     tabData.sort((a, b)=>(b.data.length > 0 ? 1 : 0) - (a.data.length > 0 ? 1 : 0));
+    const defaultActiveKey = tabData[0]?.key ?? 'E1001';
+    const [activeKey, setActiveKey] = useState(defaultActiveKey);
+    const activeTab = tabData.find((tab)=>tab.key === activeKey);
+    const resolvedActiveKey = activeTab && (activeTab.data.length > 0 || 0 === dataSource.length) ? activeKey : defaultActiveKey;
+    useEffect(()=>{
+        setActiveKey(defaultActiveKey);
+    }, [
+        defaultActiveKey
+    ]);
     const tabItems = tabData.map((td)=>{
-        const tagStyle = activeKey === td.key ? {
+        const tagStyle = resolvedActiveKey === td.key ? {
             border: '1px solid #91D5FF',
             backgroundColor: '#E6F7FF'
         } : {};
-        const tagTextStyle = activeKey === td.key ? {
+        const tagTextStyle = resolvedActiveKey === td.key ? {
             color: '#1890FF'
         } : {};
         const LabelComponent = ()=>/*#__PURE__*/ jsx(Overview, {
@@ -112,7 +113,7 @@ const BundleAlert = ({ title, dataSource, extraData })=>{
                                 style: {
                                     ...tagTextStyle
                                 },
-                                children: td.key
+                                children: td.tag
                             })
                         })
                     ]
@@ -174,6 +175,12 @@ const BundleAlert = ({ title, dataSource, extraData })=>{
                     extraData: extraData
                 });
                 break;
+            case 'CUSTOM_RULES':
+                children = /*#__PURE__*/ jsx(CommonList, {
+                    data: td.data,
+                    showCode: true
+                });
+                break;
             default:
                 children = null;
                 break;
@@ -198,7 +205,7 @@ const BundleAlert = ({ title, dataSource, extraData })=>{
                                 backgroundColor: '#EAEDF1',
                                 borderRadius: '2px'
                             },
-                            children: td.key
+                            children: td.tag
                         }),
                         /*#__PURE__*/ jsx("span", {
                             children: td.label
@@ -225,7 +232,7 @@ const BundleAlert = ({ title, dataSource, extraData })=>{
                     onChange: setActiveKey,
                     tabBarGutter: 10,
                     type: "card",
-                    defaultActiveKey: tabData[0]?.key ?? 'E1001',
+                    activeKey: resolvedActiveKey,
                     items: tabItems
                 }) : /*#__PURE__*/ jsx("div", {
                     style: {

package/dist/components/Alerts/bundle-alert.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"components/Alerts/bundle-alert.mjs","sources":["../../../src/components/Alerts/bundle-alert.tsx"],"sourcesContent":["import { Tabs, Empty, Tag } from 'antd';\n\nimport { Card } from '../Card';\nimport { ECMAVersionCheck } from '../Alert/ecma-version-check';\nimport { Overview } from '../Overall/overview';\nimport { AlertCollapse } from './collapse';\nimport { CommonList } from './list';\nimport { ViewMode } from '../../constants';\n\nimport { AlertProps } from '../Alert/types';\n\nimport type { Rule } from '@rsdoctor/types';\n\nimport styles from './bundle-alert.module.scss';\nimport { CSSProperties, useState } from 'react';\nimport { CrossChunksAlertCollapse } from './collapse-cross-chunks';\nimport { ModuleMixedChunksAlertCollapse } from './collapse-module-mixed-chunks';\nimport { SideEffectsOnlyImportsAlertCollapse } from './collapse-side-effects-only-imports';\nimport { CjsRequireAlertCollapse } from './collapse-cjs-require';\nimport { EsmResolvedToCjsAlertCollapse } from './collapse-esm-cjs';\n\ninterface BundleAlertProps {\n  title: string;\n  cwd: string;\n  dataSource: Rule.RuleStoreDataItem[];\n  extraData: Omit<AlertProps, 'data'>;\n  viewMode: ViewMode;\n  setViewMode(mode: ViewMode): void;\n  extraCom?: React.JSX.Element | undefined;\n}\n\nexport const BundleAlert: React.FC<BundleAlertProps> = ({\n  title,\n  dataSource,\n  extraData,\n}) => {\n  const firstKeyWithData =\n    [\n      'E1001',\n      'E1002',\n      'E1003',\n      'E1004',\n      'E1005',\n      'E1006',\n      'E1007',\n      'E1008',\n      'E1009',\n    ].find((code) => dataSource.some((d) => d.code === code)) ?? 'E1001';\n  const [activeKey, setActiveKey] = useState(firstKeyWithData);\n  const tabData: Array<{\n    key: string;\n    label: string;\n    data: Array<Rule.RuleStoreDataItem>;\n  }> = [\n    {\n      key: 'E1001',\n      label: 'Duplicate Packages',\n      data: [],\n    },\n    {\n      key: 'E1002',\n      label: 'Cross Chunks Package',\n      data: [],\n    },\n    {\n      key: 'E1003',\n      label: 'Loader Performance Optimization',\n      data: [],\n    },\n    {\n      key: 'E1004',\n      label: 'ECMA Version Check',\n      data: [],\n    },\n    {\n      key: 'E1005',\n      label: 'Default Import Check',\n      data: [],\n    },\n    {\n      key: 'E1006',\n      label: 'Module Mixed Chunks',\n      data: [],\n    },\n    {\n      key: 'E1007',\n      label: 'Tree Shaking Side Effects Only',\n      data: [],\n    },\n    {\n      key: 'E1008',\n      label: 'CJS Require Cannot Tree-Shake',\n      data: [],\n    },\n    {\n      key: 'E1009',\n      label: 'ESM Import Resolved to CJS',\n      data: [],\n    },\n  ];\n\n  dataSource.forEach((data) => {\n    const target = tabData.find((td) => td.key === data.code)?.data;\n    target?.push(data);\n  });\n\n  tabData.sort(\n    (a, b) => (b.data.length > 0 ? 1 : 0) - (a.data.length > 0 ? 1 : 0),\n  );\n\n  const tabItems = tabData.map((td) => {\n    const tagStyle =\n      activeKey === td.key\n        ? ({\n            border: '1px solid #91D5FF',\n            backgroundColor: '#E6F7FF',\n          } as CSSProperties)\n        : {};\n\n    const tagTextStyle =\n      activeKey === td.key\n        ? {\n            color: '#1890FF',\n          }\n        : {};\n\n    const LabelComponent = () => (\n      <Overview\n        style={{\n          backgroundColor: 'transparent',\n          paddingLeft: 0,\n          paddingRight: 0,\n          width: '100%',\n        }}\n        title={<span className={styles.labelTitle}>{td.label}</span>}\n        description={\n          <div className={styles.labelDescription}>\n            <span>{td.data.length}</span>\n            <Tag\n              style={{ fontFamily: 'Menlo', borderRadius: '2px', ...tagStyle }}\n            >\n              <span style={{ ...tagTextStyle }}>{td.key}</span>\n            </Tag>\n          </div>\n        }\n      />\n    );\n\n    let children, description;\n    switch (td.key) {\n      case 'E1001':\n        children = <AlertCollapse data={td.data} extraData={extraData} />;\n        break;\n      case 'E1002':\n        children = (\n          <CrossChunksAlertCollapse data={td.data} extraData={extraData} />\n        );\n        break;\n      case 'E1003':\n        children = <CommonList data={td.data} />;\n        break;\n      case 'E1004':\n        description = (\n          <span>\n            No ECMA Version Check Rules were found. Please refer to\n            「https://rsdoctor.rs/guide/usage/rule-config」.\n          </span>\n        );\n        children = <ECMAVersionCheck data={td.data} />;\n        break;\n      case 'E1005':\n        children = <CommonList data={td.data} />;\n        break;\n      case 'E1006':\n        children = (\n          <ModuleMixedChunksAlertCollapse\n            data={td.data}\n            extraData={extraData}\n          />\n        );\n        break;\n      case 'E1007':\n        children = (\n          <SideEffectsOnlyImportsAlertCollapse\n            data={td.data}\n            extraData={extraData}\n          />\n        );\n        break;\n      case 'E1008':\n        children = (\n          <CjsRequireAlertCollapse data={td.data} extraData={extraData} />\n        );\n        break;\n      case 'E1009':\n        children = (\n          <EsmResolvedToCjsAlertCollapse data={td.data} extraData={extraData} />\n        );\n        break;\n      default:\n        children = null;\n        break;\n    }\n\n    if (!td.data.length) {\n      children = (\n        <Empty description={description} image={Empty.PRESENTED_IMAGE_SIMPLE} />\n      );\n    }\n\n    return {\n      key: td.key,\n      label: <LabelComponent />,\n      children: (\n        <Card\n          className={styles.card}\n          type=\"inner\"\n          title={\n            <>\n              <Tag\n                style={{\n                  fontFamily: 'Menlo',\n                  fontWeight: '700',\n                  fontSize: '13px',\n                  backgroundColor: '#EAEDF1',\n                  borderRadius: '2px',\n                }}\n              >\n                {td.key}\n              </Tag>\n              <span>{td.label}</span>\n            </>\n          }\n        >\n          {children}\n        </Card>\n      ),\n    };\n  });\n\n  return (\n    <Card style={{ width: '100%', borderRadius: '12px' }}>\n      <div className={styles.container}>\n        <div className={styles.title}>{title}</div>\n        {!dataSource.length ? (\n          <div\n            style={{\n              minHeight: '480px',\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n            }}\n          >\n            <Empty\n              description={'No Bundle Alerts Data'}\n              image={Empty.PRESENTED_IMAGE_SIMPLE}\n            />\n          </div>\n        ) : (\n          <Tabs\n            onChange={setActiveKey}\n            tabBarGutter={10}\n            type=\"card\"\n            defaultActiveKey={tabData[0]?.key ?? 'E1001'}\n            items={tabItems}\n          />\n        )}\n      </div>\n    </Card>\n  );\n};\n"],"names":["BundleAlert","title","dataSource","extraData","firstKeyWithData","code","d","activeKey","setActiveKey","useState","tabData","data","target","td","a","b","tabItems","tagStyle","tagTextStyle","LabelComponent","Overview","styles","Tag","children","description","AlertCollapse","CrossChunksAlertCollapse","CommonList","ECMAVersionCheck","ModuleMixedChunksAlertCollapse","SideEffectsOnlyImportsAlertCollapse","CjsRequireAlertCollapse","EsmResolvedToCjsAlertCollapse","Empty","Card","Tabs"],"mappings":"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"}
+{"version":3,"file":"components/Alerts/bundle-alert.mjs","sources":["../../../src/components/Alerts/bundle-alert.tsx"],"sourcesContent":["import { Tabs, Empty, Tag } from 'antd';\nimport { useEffect, useState } from 'react';\n\nimport { Card } from '../Card';\nimport { ECMAVersionCheck } from '../Alert/ecma-version-check';\nimport { Overview } from '../Overall/overview';\nimport { AlertCollapse } from './collapse';\nimport { CommonList } from './list';\nimport { ViewMode } from '../../constants';\n\nimport type { AlertProps } from '../Alert/types';\nimport type { CSSProperties } from 'react';\nimport type { Rule } from '@rsdoctor/types';\n\nimport styles from './bundle-alert.module.scss';\nimport { CrossChunksAlertCollapse } from './collapse-cross-chunks';\nimport { ModuleMixedChunksAlertCollapse } from './collapse-module-mixed-chunks';\nimport { SideEffectsOnlyImportsAlertCollapse } from './collapse-side-effects-only-imports';\nimport { CjsRequireAlertCollapse } from './collapse-cjs-require';\nimport { EsmResolvedToCjsAlertCollapse } from './collapse-esm-cjs';\n\ninterface BundleAlertProps {\n  title: string;\n  cwd: string;\n  dataSource: Rule.RuleStoreDataItem[];\n  extraData: Omit<AlertProps, 'data'>;\n  viewMode: ViewMode;\n  setViewMode(mode: ViewMode): void;\n  extraCom?: React.JSX.Element | undefined;\n}\n\nconst BUILTIN_RULE_TABS = [\n  {\n    key: 'E1001',\n    label: 'Duplicate Packages',\n  },\n  {\n    key: 'E1002',\n    label: 'Cross Chunks Package',\n  },\n  {\n    key: 'E1003',\n    label: 'Loader Performance Optimization',\n  },\n  {\n    key: 'E1004',\n    label: 'ECMA Version Check',\n  },\n  {\n    key: 'E1005',\n    label: 'Default Import Check',\n  },\n  {\n    key: 'E1006',\n    label: 'Module Mixed Chunks',\n  },\n  {\n    key: 'E1007',\n    label: 'Tree Shaking Side Effects Only',\n  },\n  {\n    key: 'E1008',\n    label: 'CJS Require Cannot Tree-Shake',\n  },\n  {\n    key: 'E1009',\n    label: 'ESM Import Resolved to CJS',\n  },\n];\n\nexport const BundleAlert: React.FC<BundleAlertProps> = ({\n  title,\n  dataSource,\n  extraData,\n}) => {\n  const tabData: Array<{\n    key: string;\n    label: string;\n    data: Array<Rule.RuleStoreDataItem>;\n    tag: string;\n  }> = BUILTIN_RULE_TABS.map((tab) => ({ ...tab, data: [], tag: tab.key }));\n  const customRulesData: Array<Rule.RuleStoreDataItem> = [];\n\n  dataSource.forEach((data) => {\n    const target = tabData.find((td) => td.key === data.code);\n    if (target) {\n      target.data.push(data);\n    } else {\n      customRulesData.push(data);\n    }\n  });\n\n  if (customRulesData.length) {\n    tabData.push({\n      key: 'CUSTOM_RULES',\n      label: 'Custom Rules',\n      data: customRulesData,\n      tag: 'Custom',\n    });\n  }\n\n  tabData.sort(\n    (a, b) => (b.data.length > 0 ? 1 : 0) - (a.data.length > 0 ? 1 : 0),\n  );\n\n  const defaultActiveKey = tabData[0]?.key ?? 'E1001';\n  const [activeKey, setActiveKey] = useState(defaultActiveKey);\n  const activeTab = tabData.find((tab) => tab.key === activeKey);\n  const resolvedActiveKey =\n    activeTab && (activeTab.data.length > 0 || dataSource.length === 0)\n      ? activeKey\n      : defaultActiveKey;\n\n  useEffect(() => {\n    setActiveKey(defaultActiveKey);\n  }, [defaultActiveKey]);\n\n  const tabItems = tabData.map((td) => {\n    const tagStyle =\n      resolvedActiveKey === td.key\n        ? ({\n            border: '1px solid #91D5FF',\n            backgroundColor: '#E6F7FF',\n          } as CSSProperties)\n        : {};\n\n    const tagTextStyle =\n      resolvedActiveKey === td.key\n        ? {\n            color: '#1890FF',\n          }\n        : {};\n\n    const LabelComponent = () => (\n      <Overview\n        style={{\n          backgroundColor: 'transparent',\n          paddingLeft: 0,\n          paddingRight: 0,\n          width: '100%',\n        }}\n        title={<span className={styles.labelTitle}>{td.label}</span>}\n        description={\n          <div className={styles.labelDescription}>\n            <span>{td.data.length}</span>\n            <Tag\n              style={{ fontFamily: 'Menlo', borderRadius: '2px', ...tagStyle }}\n            >\n              <span style={{ ...tagTextStyle }}>{td.tag}</span>\n            </Tag>\n          </div>\n        }\n      />\n    );\n\n    let children, description;\n    switch (td.key) {\n      case 'E1001':\n        children = <AlertCollapse data={td.data} extraData={extraData} />;\n        break;\n      case 'E1002':\n        children = (\n          <CrossChunksAlertCollapse data={td.data} extraData={extraData} />\n        );\n        break;\n      case 'E1003':\n        children = <CommonList data={td.data} />;\n        break;\n      case 'E1004':\n        description = (\n          <span>\n            No ECMA Version Check Rules were found. Please refer to\n            「https://rsdoctor.rs/guide/usage/rule-config」.\n          </span>\n        );\n        children = <ECMAVersionCheck data={td.data} />;\n        break;\n      case 'E1005':\n        children = <CommonList data={td.data} />;\n        break;\n      case 'E1006':\n        children = (\n          <ModuleMixedChunksAlertCollapse\n            data={td.data}\n            extraData={extraData}\n          />\n        );\n        break;\n      case 'E1007':\n        children = (\n          <SideEffectsOnlyImportsAlertCollapse\n            data={td.data}\n            extraData={extraData}\n          />\n        );\n        break;\n      case 'E1008':\n        children = (\n          <CjsRequireAlertCollapse data={td.data} extraData={extraData} />\n        );\n        break;\n      case 'E1009':\n        children = (\n          <EsmResolvedToCjsAlertCollapse data={td.data} extraData={extraData} />\n        );\n        break;\n      case 'CUSTOM_RULES':\n        children = <CommonList data={td.data} showCode />;\n        break;\n      default:\n        children = null;\n        break;\n    }\n\n    if (!td.data.length) {\n      children = (\n        <Empty description={description} image={Empty.PRESENTED_IMAGE_SIMPLE} />\n      );\n    }\n\n    return {\n      key: td.key,\n      label: <LabelComponent />,\n      children: (\n        <Card\n          className={styles.card}\n          type=\"inner\"\n          title={\n            <>\n              <Tag\n                style={{\n                  fontFamily: 'Menlo',\n                  fontWeight: '700',\n                  fontSize: '13px',\n                  backgroundColor: '#EAEDF1',\n                  borderRadius: '2px',\n                }}\n              >\n                {td.tag}\n              </Tag>\n              <span>{td.label}</span>\n            </>\n          }\n        >\n          {children}\n        </Card>\n      ),\n    };\n  });\n\n  return (\n    <Card style={{ width: '100%', borderRadius: '12px' }}>\n      <div className={styles.container}>\n        <div className={styles.title}>{title}</div>\n        {!dataSource.length ? (\n          <div\n            style={{\n              minHeight: '480px',\n              display: 'flex',\n              justifyContent: 'center',\n              alignItems: 'center',\n            }}\n          >\n            <Empty\n              description={'No Bundle Alerts Data'}\n              image={Empty.PRESENTED_IMAGE_SIMPLE}\n            />\n          </div>\n        ) : (\n          <Tabs\n            onChange={setActiveKey}\n            tabBarGutter={10}\n            type=\"card\"\n            activeKey={resolvedActiveKey}\n            items={tabItems}\n          />\n        )}\n      </div>\n    </Card>\n  );\n};\n"],"names":["BUILTIN_RULE_TABS","BundleAlert","title","dataSource","extraData","tabData","tab","customRulesData","data","target","td","a","b","defaultActiveKey","activeKey","setActiveKey","useState","activeTab","resolvedActiveKey","useEffect","tabItems","tagStyle","tagTextStyle","LabelComponent","Overview","styles","Tag","children","description","AlertCollapse","CrossChunksAlertCollapse","CommonList","ECMAVersionCheck","ModuleMixedChunksAlertCollapse","SideEffectsOnlyImportsAlertCollapse","CjsRequireAlertCollapse","EsmResolvedToCjsAlertCollapse","Empty","Card","Tabs"],"mappings":"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"}

package/dist/components/Alerts/list.d.ts

@@ -1,4 +1,5 @@
 import type { Rule } from '@rsdoctor/types';
 export declare const CommonList: (props: {
     data: Array<Rule.RuleStoreDataItem>;
+    showCode?: boolean;
 }) => import("react").JSX.Element[];

package/dist/components/Alerts/list.mjs

@@ -1,10 +1,10 @@
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "antd";
 import { Overview } from "../Overall/overview.mjs";
 import { useRuleIndexNavigate } from "../../utils/index.mjs";
 import list_module from "./list.module.mjs";
 const CommonList = (props)=>{
-    const { data } = props;
+    const { data, showCode } = props;
     return data.map((d)=>{
         const { code, link, description } = d;
         const navigate = useRuleIndexNavigate(code, link);
@@ -12,12 +12,20 @@ const CommonList = (props)=>{
             style: {
                 background: '#fff'
             },
-            description: /*#__PURE__*/ jsx("div", {
+            description: /*#__PURE__*/ jsxs("div", {
                 className: list_module.description,
-                children: description || ''
+                children: [
+                    showCode ? /*#__PURE__*/ jsx("div", {
+                        className: list_module.code,
+                        children: code
+                    }) : null,
+                    /*#__PURE__*/ jsx("div", {
+                        children: description || ''
+                    })
+                ]
             }),
             icon: /*#__PURE__*/ jsx(Button, {
-                onClick: ()=>navigate,
+                onClick: navigate,
                 type: "link",
                 children: "more"
             })

package/dist/components/Alerts/list.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"components/Alerts/list.mjs","sources":["../../../src/components/Alerts/list.tsx"],"sourcesContent":["import { Button } from 'antd';\n\nimport { Overview } from '../Overall/overview';\nimport { useRuleIndexNavigate } from '../../utils';\n\nimport type { Rule } from '@rsdoctor/types';\n\nimport styles from './list.module.scss';\n\nexport const CommonList = (props: { data: Array<Rule.RuleStoreDataItem> }) => {\n  const { data } = props;\n  return data.map((d) => {\n    const { code, link, description } = d;\n    const navigate = useRuleIndexNavigate(code, link);\n\n    return (\n      <Overview\n        style={{\n          background: '#fff',\n        }}\n        description={\n          <div className={styles.description}>{description || ''}</div>\n        }\n        icon={\n          <Button onClick={() => navigate} type=\"link\">\n            more\n          </Button>\n        }\n      />\n    );\n  });\n};\n"],"names":["CommonList","props","data","d","code","link","description","navigate","useRuleIndexNavigate","Overview","styles","Button"],"mappings":";;;;;AASO,MAAMA,aAAa,CAACC;IACzB,MAAM,EAAEC,IAAI,EAAE,GAAGD;IACjB,OAAOC,KAAK,GAAG,CAAC,CAACC;QACf,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGH;QACpC,MAAMI,WAAWC,qBAAqBJ,MAAMC;QAE5C,OAAO,WAAP,GACE,IAACI,UAAQA;YACP,OAAO;gBACL,YAAY;YACd;YACA,2BACE,IAAC;gBAAI,WAAWC,YAAAA,WAAkB;0BAAGJ,eAAe;;YAEtD,oBACE,IAACK,QAAMA;gBAAC,SAAS,IAAMJ;gBAAU,MAAK;0BAAO;;;IAMrD;AACF"}
+{"version":3,"file":"components/Alerts/list.mjs","sources":["../../../src/components/Alerts/list.tsx"],"sourcesContent":["import { Button } from 'antd';\n\nimport { Overview } from '../Overall/overview';\nimport { useRuleIndexNavigate } from '../../utils';\n\nimport type { Rule } from '@rsdoctor/types';\n\nimport styles from './list.module.scss';\n\nexport const CommonList = (props: {\n  data: Array<Rule.RuleStoreDataItem>;\n  showCode?: boolean;\n}) => {\n  const { data, showCode } = props;\n  return data.map((d) => {\n    const { code, link, description } = d;\n    const navigate = useRuleIndexNavigate(code, link);\n\n    return (\n      <Overview\n        style={{\n          background: '#fff',\n        }}\n        description={\n          <div className={styles.description}>\n            {showCode ? <div className={styles.code}>{code}</div> : null}\n            <div>{description || ''}</div>\n          </div>\n        }\n        icon={\n          <Button onClick={navigate} type=\"link\">\n            more\n          </Button>\n        }\n      />\n    );\n  });\n};\n"],"names":["CommonList","props","data","showCode","d","code","link","description","navigate","useRuleIndexNavigate","Overview","styles","Button"],"mappings":";;;;;AASO,MAAMA,aAAa,CAACC;IAIzB,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGF;IAC3B,OAAOC,KAAK,GAAG,CAAC,CAACE;QACf,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,WAAW,EAAE,GAAGH;QACpC,MAAMI,WAAWC,qBAAqBJ,MAAMC;QAE5C,OAAO,WAAP,GACE,IAACI,UAAQA;YACP,OAAO;gBACL,YAAY;YACd;YACA,2BACE,KAAC;gBAAI,WAAWC,YAAAA,WAAkB;;oBAC/BR,WAAW,WAAXA,GAAW,IAAC;wBAAI,WAAWQ,YAAAA,IAAW;kCAAGN;yBAAc;kCACxD,IAAC;kCAAKE,eAAe;;;;YAGzB,oBACE,IAACK,QAAMA;gBAAC,SAASJ;gBAAU,MAAK;0BAAO;;;IAM/C;AACF"}

package/dist/components/Alerts/list.module.mjs

@@ -1,6 +1,7 @@
 import "./list_module.css";
 const list_module = {
-    description: "description-h4sYv3"
+    description: "description-h4sYv3",
+    code: "code-ocfe7Q"
 };
 export default list_module;
 

package/dist/components/Alerts/list.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"components/Alerts/list.module.mjs","sources":["../../../src/components/Alerts/list.module.scss"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./list_module.css\"\nexport default {\"description\":\"description-h4sYv3\"};"],"names":[],"mappings":";AAEA,oBAAe;IAAC,aAAc;AAAoB"}
+{"version":3,"file":"components/Alerts/list.module.mjs","sources":["../../../src/components/Alerts/list.module.scss"],"sourcesContent":["// extracted by LIB_CSS_EXTRACT_LOADER\nimport \"./list_module.css\"\nexport default {\"description\":\"description-h4sYv3\",\"code\":\"code-ocfe7Q\"};"],"names":[],"mappings":";AAEA,oBAAe;IAAC,aAAc;IAAqB,MAAO;AAAa"}

package/dist/components/Alerts/list_module.css

@@ -6,5 +6,13 @@
   line-height: 16px;
 }
 
+.code-ocfe7Q {
+  color: #1890ff;
+  margin-bottom: 4px;
+  font-family: Menlo, Monaco, Consolas, Courier New, monospace;
+  font-size: 13px;
+  font-weight: 600;
+}
+
 
 /*# sourceMappingURL=list_module.css.map */

package/dist/components/Alerts/list_module.css.map

@@ -1 +1 @@
-{"version":3,"sources":["webpack://./src/components/Alerts/list.module.scss"],"names":[],"mappings":"AAAA;EACE,qBAAqB;EACrB,sBAAsB;EACtB,eAAe;EACf,gBAAgB;EAChB,iBAAiB;AACnB","sourcesContent":[".description{font-size:14px;font-weight:400;line-height:16px;white-space:pre-wrap;word-break:break-word}"],"sourceRoot":""}
+{"version":3,"sources":["webpack://./src/components/Alerts/list.module.scss"],"names":[],"mappings":"AAAA;EACE,qBAAqB;EACrB,sBAAsB;EACtB,eAAe;EACf,gBAAgB;EAChB,iBAAiB;AACnB;;AANwG;EAStG,cAAc;EACd,kBAAkB;EAClB,4DAA4D;EAC5D,eAAe;EACf,gBAAgB;AAClB","sourcesContent":[".description{font-size:14px;font-weight:400;line-height:16px;white-space:pre-wrap;word-break:break-word}.code{margin-bottom:4px;color:#1890ff;font-family:Menlo,Monaco,Consolas,\"Courier New\",monospace;font-size:13px;font-weight:600}"],"sourceRoot":""}

package/dist/components/Charts/TreeMap.mjs

@@ -13,6 +13,7 @@ import { ServerAPIProvider } from "../Manifest/index.mjs";
 import { ModuleAnalyzeComponent } from "../../pages/ModuleAnalyze/index.mjs";
 import treemap_module from "./treemap.module.mjs";
 import { TREE_COLORS } from "./constants.mjs";
+import { isJavaScriptAsset } from "../../utils/assets.mjs";
 __rspack_external_echarts_core_d2845954.use([
     TreemapChart,
     TooltipComponent,
@@ -426,7 +427,27 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
     const [moduleId, setModuleId] = useState('');
     const [showAnalyze, setShowAnalyze] = useState(false);
     const [chunkSearchQuery, setChunkSearchQuery] = useState('');
+    const [showOnlyJavaScriptAssets, setShowOnlyJavaScriptAssets] = useState(false);
     const containerRef = react.useRef(null);
+    const visibleAssetNames = useMemo(()=>{
+        if (!showOnlyJavaScriptAssets) return assetNames;
+        return assetNames.filter(isJavaScriptAsset);
+    }, [
+        assetNames,
+        showOnlyJavaScriptAssets
+    ]);
+    const visibleAssetNamesKey = useMemo(()=>visibleAssetNames.join('\0'), [
+        visibleAssetNames
+    ]);
+    const previousVisibleAssetNamesKeyRef = react.useRef(void 0);
+    useEffect(()=>{
+        if (previousVisibleAssetNamesKeyRef.current === visibleAssetNamesKey) return;
+        previousVisibleAssetNamesKeyRef.current = visibleAssetNamesKey;
+        setCheckedAssets(visibleAssetNames);
+    }, [
+        visibleAssetNames,
+        visibleAssetNamesKey
+    ]);
     const handleChartClick = useCallback((params)=>{
         onChartClick?.(params);
         const data = params.data;
@@ -484,7 +505,7 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
         };
     }, []);
     const filteredTreeData = useMemo(()=>{
-        let filtered = treeData.filter((item)=>checkedAssets.includes(item.name));
+        let filtered = treeData.filter((item)=>visibleAssetNames.includes(item.name) && checkedAssets.includes(item.name));
         if (chunkSearchQuery.trim()) {
             const searchLower = chunkSearchQuery.toLowerCase();
             filtered = filtered.filter((item)=>item.name.toLowerCase().includes(searchLower));
@@ -493,7 +514,8 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
     }, [
         treeData,
         checkedAssets,
-        chunkSearchQuery
+        chunkSearchQuery,
+        visibleAssetNames
     ]);
     const searchResults = useMemo(()=>{
         if (!searchQuery.trim()) return [];
@@ -629,19 +651,27 @@ const AssetTreemapWithFilterInner = ({ treeData, onChartClick, bundledSize = tru
                                         }
                                     }),
                                     /*#__PURE__*/ jsx(Checkbox, {
-                                        indeterminate: checkedAssets.length > 0 && checkedAssets.length < assetNames.length,
-                                        checked: checkedAssets.length === assetNames.length,
-                                        onChange: (e)=>setCheckedAssets(e.target.checked ? assetNames : []),
+                                        indeterminate: checkedAssets.length > 0 && checkedAssets.length < visibleAssetNames.length,
+                                        checked: visibleAssetNames.length > 0 && checkedAssets.length === visibleAssetNames.length,
+                                        onChange: (e)=>setCheckedAssets(e.target.checked ? visibleAssetNames : []),
                                         className: treemap_module["all-none-checkbox"],
                                         children: "All"
                                     }),
+                                    /*#__PURE__*/ jsx(Checkbox, {
+                                        checked: showOnlyJavaScriptAssets,
+                                        onChange: (e)=>{
+                                            setShowOnlyJavaScriptAssets(e.target.checked);
+                                        },
+                                        className: treemap_module["all-none-checkbox"],
+                                        children: "JS only"
+                                    }),
                                     /*#__PURE__*/ jsx("div", {
                                         className: treemap_module["chunk-list"],
                                         style: {
                                             maxHeight: 180,
                                             overflowY: 'auto'
                                         },
-                                        children: assetNames.filter((name)=>name.toLowerCase().includes(chunkSearchQuery.toLowerCase())).map((name)=>/*#__PURE__*/ jsxs("div", {
+                                        children: visibleAssetNames.filter((name)=>name.toLowerCase().includes(chunkSearchQuery.toLowerCase())).map((name)=>/*#__PURE__*/ jsxs("div", {
                                                 className: treemap_module["chunk-item"],
                                                 style: {
                                                     height: 15,