@rsdoctor/components 1.5.11 → 1.5.13

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

@@ -1,31 +1,51 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CodepenCircleOutlined, ColumnHeightOutlined, InfoCircleOutlined } from "@ant-design/icons";
 import { SDK } from "@rsdoctor/types";
-import { Button, Card, Col, Divider, Empty, Popover, Row, Space, Tag, Tooltip, Tree, Typography } from "antd";
-import { omitBy, sumBy } from "es-toolkit/compat";
+import { Button, Card, Divider, Empty, Popover, Space, Tag, Tooltip, Tree, Typography } from "antd";
+import { debounce, omitBy, sumBy } from "es-toolkit/compat";
 import { dirname, relative } from "path";
-import { useEffect, useMemo, useState } from "react";
+import { createContext, memo, use, useCallback, useEffect, useMemo, useState } from "react";
 import { CodeViewer } from "../../../components/base/index.mjs";
 import { Badge } from "../../../components/Badge/index.mjs";
 import { KeywordInput } from "../../../components/Form/keyword.mjs";
-import { Keyword } from "../../../components/Keyword/index.mjs";
 import { ServerAPIProvider } from "../../../components/Manifest/index.mjs";
 import { TextDrawer } from "../../../components/TextDrawer/index.mjs";
 import { Size } from "../../../constants.mjs";
-import { createFileStructures, formatSize, isJsDataUrl, useI18n } from "../../../utils/index.mjs";
+import { createFileStructures, formatSize, isJsDataUrl, useElementSize, useI18n } from "../../../utils/index.mjs";
 import { ModuleAnalyzeComponent } from "../../ModuleAnalyze/index.mjs";
 import { ModuleGraphListContext } from "../config.mjs";
-import index_module from "./index.module.mjs";
+import asset_module from "./asset.module.mjs";
+import { ErrorBoundary } from "react-error-boundary";
 const { DirectoryTree: DirectoryTree } = Tree;
-let expandedModulesKeys = [];
 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 POPUPS_ENABLED_BY_DEFAULT = true;
+const PopupContext = /*#__PURE__*/ createContext({
+    enabled: POPUPS_ENABLED_BY_DEFAULT
+});
+const DisablePopups = ({ children })=>/*#__PURE__*/ jsx(PopupContext.Provider, {
+        value: {
+            enabled: false
+        },
+        children: children
+    });
+const usePopupsEnabled = ()=>use(PopupContext)?.enabled ?? true;
+const asset_Tooltip = (props)=>{
+    const enabled = usePopupsEnabled();
+    if (enabled) return /*#__PURE__*/ jsx(Tooltip, {
+        ...props
+    });
+    return props.children ?? null;
+};
+const asset_Popover = (props)=>{
+    const enabled = usePopupsEnabled();
+    if (enabled) return /*#__PURE__*/ jsx(Popover, {
+        ...props
+    });
+    return props.children ?? null;
 };
 const EmptyCodeItem = ()=>/*#__PURE__*/ jsx(Empty, {
         description: `Do not have the module code.
@@ -46,7 +66,7 @@ const ModuleCodeViewer = ({ data })=>{
         text: "",
         buttonProps: {
             size: 'small',
-            icon: /*#__PURE__*/ jsx(Popover, {
+            icon: /*#__PURE__*/ jsx(asset_Popover, {
                 content: "Open the Codes Box",
                 children: /*#__PURE__*/ jsx(CodepenCircleOutlined, {})
             }),
@@ -79,7 +99,7 @@ const ModuleCodeViewer = ({ data })=>{
                             })),
                         defaultActiveTabKey: source['parsedSource'] ? 'parsedSource' : 'source',
                         onTabChange: (v)=>setTab(v),
-                        tabBarExtraContent: /*#__PURE__*/ jsx(Popover, {
+                        tabBarExtraContent: /*#__PURE__*/ jsx(asset_Popover, {
                             placement: "bottom",
                             title: /*#__PURE__*/ jsx(Typography.Title, {
                                 level: 5,
@@ -181,7 +201,7 @@ function getChildrenModule(node, mods) {
     });
     return mods;
 }
-const ModulesStatistics = ({ modules, chunks, filteredModules })=>{
+const ModulesStatistics = /*#__PURE__*/ memo(({ modules, chunks, filteredModules })=>{
     const { sourceSize, parsedSize, filteredParsedSize, filteredSourceSize } = useMemo(()=>({
             sourceSize: sumBy(modules, (e)=>e.size.sourceSize),
             parsedSize: sumBy(modules, (e)=>e.size.parsedSize),
@@ -193,7 +213,7 @@ const ModulesStatistics = ({ modules, chunks, filteredModules })=>{
     ]);
     return /*#__PURE__*/ jsxs(Space, {
         children: [
-            /*#__PURE__*/ jsx(Tooltip, {
+            /*#__PURE__*/ jsx(asset_Tooltip, {
                 title: `total modules count is ${modules.length}, the filtered modules count is ${filteredModules.length}`,
                 children: /*#__PURE__*/ jsxs(Space, {
                     children: [
@@ -217,7 +237,7 @@ const ModulesStatistics = ({ modules, chunks, filteredModules })=>{
             /*#__PURE__*/ jsx(Divider, {
                 type: "vertical"
             }),
-            /*#__PURE__*/ jsx(Tooltip, {
+            /*#__PURE__*/ jsx(asset_Tooltip, {
                 title: /*#__PURE__*/ jsxs(Space, {
                     direction: "vertical",
                     children: [
@@ -279,7 +299,7 @@ const ModulesStatistics = ({ modules, chunks, filteredModules })=>{
             /*#__PURE__*/ jsx(Divider, {
                 type: "vertical"
             }),
-            /*#__PURE__*/ jsx(Tooltip, {
+            /*#__PURE__*/ jsx(asset_Tooltip, {
                 title: /*#__PURE__*/ jsxs(Space, {
                     direction: "vertical",
                     children: [
@@ -318,104 +338,64 @@ const ModulesStatistics = ({ modules, chunks, filteredModules })=>{
             })
         ]
     });
+});
+const defaultTagStyle = {
+    margin: 'none',
+    marginInlineEnd: 0
 };
-const ConcatenatedTag = ({ moduleCount })=>/*#__PURE__*/ jsx(Tooltip, {
-        title: /*#__PURE__*/ jsx(Space, {
-            children: /*#__PURE__*/ jsxs(Typography.Text, {
-                style: {
-                    color: 'inherit'
-                },
-                children: [
-                    "This is a concatenated container module that includes ",
-                    moduleCount,
-                    ' ',
-                    "modules"
-                ]
-            })
-        }),
-        children: /*#__PURE__*/ jsx(Tag, {
-            color: "blue",
-            style: tagStyle,
-            children: "concatenated container"
-        })
-    });
-const TotalBundledSizeTag = ({ size })=>/*#__PURE__*/ jsx(Tooltip, {
+const AbstractTag = ({ color, tooltipTitle, style = defaultTagStyle, children })=>/*#__PURE__*/ jsx(asset_Tooltip, {
         title: /*#__PURE__*/ jsx(Space, {
             children: /*#__PURE__*/ jsx(Typography.Text, {
                 style: {
                     color: 'inherit'
                 },
-                children: "The total output size of all the files in this folder. If you enabled minification, this value shows the minified size."
+                children: tooltipTitle
             })
         }),
         children: /*#__PURE__*/ jsx(Tag, {
-            style: tagStyle,
-            color: 'geekblue',
-            children: `bundled size: ${formatSize(size)}`
+            color: color,
+            style: style || void 0,
+            children: children
         })
     });
-const BundledSizeTag = ({ size })=>/*#__PURE__*/ jsx(Tooltip, {
-        title: /*#__PURE__*/ jsx(Space, {
-            children: /*#__PURE__*/ jsx(Typography.Text, {
-                style: {
-                    color: 'inherit'
-                },
-                children: "The final output size of this file. If you enabled minification, this value shows the minified size."
-            })
-        }),
-        children: /*#__PURE__*/ jsx(Tag, {
-            color: 'geekblue',
-            children: `bundled size: ${formatSize(size)}`
-        })
+const ConcatenatedTag = ({ moduleCount })=>/*#__PURE__*/ jsx(AbstractTag, {
+        color: "blue",
+        tooltipTitle: `This is a concatenated container module that includes ${moduleCount} modules`,
+        children: "concatenated container"
     });
-const GzippedSizeTag = ({ size })=>/*#__PURE__*/ jsx(Tooltip, {
-        title: /*#__PURE__*/ jsx(Space, {
-            children: /*#__PURE__*/ jsx(Typography.Text, {
-                style: {
-                    color: 'inherit'
-                },
-                children: "The compressed file size that users actually download, as most web servers use gzip compression."
-            })
-        }),
-        children: /*#__PURE__*/ jsx(Tag, {
-            color: 'orange',
-            children: `gzipped: ${formatSize(size)}`
-        })
+const TotalBundledSizeTag = ({ size })=>/*#__PURE__*/ jsx(AbstractTag, {
+        color: "geekblue",
+        tooltipTitle: "The total output size of all the files in this folder. If you enabled minification, this value shows the minified size.",
+        children: `bundled size: ${formatSize(size)}`
     });
-const TotalSourceSizeTag = ({ size })=>/*#__PURE__*/ jsx(Tooltip, {
-        title: /*#__PURE__*/ jsx(Space, {
-            children: /*#__PURE__*/ jsx(Typography.Text, {
-                style: {
-                    color: 'inherit'
-                },
-                children: "The total original size of all the files in this folder, before any transformations and minification."
-            })
-        }),
-        children: /*#__PURE__*/ jsx(Tag, {
-            style: tagStyle,
-            color: 'cyan',
-            children: `source size: ${formatSize(size)}`
-        })
+const BundledSizeTag = ({ size })=>/*#__PURE__*/ jsx(AbstractTag, {
+        color: "geekblue",
+        style: null,
+        tooltipTitle: "The final output size of this file. If you enabled minification, this value shows the minified size.",
+        children: `bundled size: ${formatSize(size)}`
     });
-const SourceSizeTag = ({ size })=>/*#__PURE__*/ jsx(Tooltip, {
-        title: /*#__PURE__*/ jsx(Space, {
-            children: /*#__PURE__*/ jsx(Typography.Text, {
-                style: {
-                    color: 'inherit'
-                },
-                children: "The original size of this file, before any transformations and minification."
-            })
-        }),
-        children: /*#__PURE__*/ jsx(Tag, {
-            color: 'cyan',
-            children: `source size: ${formatSize(size)}`
-        })
+const GzippedSizeTag = ({ size })=>/*#__PURE__*/ jsx(AbstractTag, {
+        color: "orange",
+        style: null,
+        tooltipTitle: "The compressed file size that users actually download, as most web servers use gzip compression.",
+        children: `gzipped: ${formatSize(size)}`
+    });
+const TotalSourceSizeTag = ({ size })=>/*#__PURE__*/ jsx(AbstractTag, {
+        tooltipTitle: "The total original size of all the files in this folder, before any transformations and minification.",
+        color: "cyan",
+        children: `source size: ${formatSize(size)}`
+    });
+const SourceSizeTag = ({ size })=>/*#__PURE__*/ jsx(AbstractTag, {
+        color: "cyan",
+        style: null,
+        tooltipTitle: "The original size of this file, before any transformations and minification.",
+        children: `source size: ${formatSize(size)}`
     });
 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 [showModuleGraphViewer, setShowModuleGraphViewer] = useState(false);
     const filteredModules = useMemo(()=>{
         let res = includeModules.slice();
         if (moduleKeyword) {
@@ -429,197 +409,11 @@ const AssetDetail = ({ asset, chunks: includeChunks, modules: includeModules, mo
         moduleKeyword,
         moduleSizeLimit
     ]);
-    const fileStructures = useMemo(()=>{
-        const normalizePath = (path)=>path.replace(/\\/g, '/');
-        const res = createFileStructures({
-            files: filteredModules.map((e)=>e.path).filter(Boolean),
-            inlinedResourcePathKey: inlinedResourcePathKey,
-            fileTitle (file, basename) {
-                const mod = filteredModules.find((e)=>normalizePath(e.path) === normalizePath(file));
-                if (!mod) return basename;
-                const { parsedSize = 0, sourceSize = 0, gzipSize = 0 } = mod.size;
-                const isConcatenation = mod.kind === SDK.ModuleKind.Concatenation;
-                const containedOtherModules = !isConcatenation && 0 === parsedSize && includeModules.filter((e)=>e !== mod && e.modules && e.modules.indexOf(mod.id) > -1);
-                return /*#__PURE__*/ jsxs("div", {
-                    className: index_module["bundle-tree"],
-                    children: [
-                        /*#__PURE__*/ jsx(Popover, {
-                            content: `Open the ${basename}’s module reasons tree.`,
-                            placement: "bottom",
-                            children: /*#__PURE__*/ jsxs("div", {
-                                className: index_module.box,
-                                onClick: ()=>{
-                                    setModuleJumpList([
-                                        mod.id
-                                    ]);
-                                    setShow(true);
-                                },
-                                children: [
-                                    /*#__PURE__*/ jsx("div", {
-                                        className: index_module.keywords,
-                                        children: /*#__PURE__*/ jsx(Keyword, {
-                                            ellipsis: true,
-                                            text: basename,
-                                            keyword: ''
-                                        })
-                                    }),
-                                    /*#__PURE__*/ jsx("div", {
-                                        className: index_module.dividerDiv,
-                                        children: /*#__PURE__*/ jsx(Divider, {
-                                            className: index_module.divider,
-                                            dashed: true
-                                        })
-                                    })
-                                ]
-                            })
-                        }),
-                        /*#__PURE__*/ jsxs(Space, {
-                            children: [
-                                0 !== parsedSize ? /*#__PURE__*/ jsx(Fragment, {
-                                    children: 'number' == typeof gzipSize ? /*#__PURE__*/ jsx(Popover, {
-                                        placement: "bottom",
-                                        content: /*#__PURE__*/ jsx(SourceSizeTag, {
-                                            size: sourceSize
-                                        }),
-                                        children: /*#__PURE__*/ jsxs(Space, {
-                                            direction: "horizontal",
-                                            children: [
-                                                /*#__PURE__*/ jsx(BundledSizeTag, {
-                                                    size: parsedSize
-                                                }),
-                                                /*#__PURE__*/ jsx(GzippedSizeTag, {
-                                                    size: gzipSize
-                                                })
-                                            ]
-                                        })
-                                    }) : /*#__PURE__*/ jsxs(Space, {
-                                        direction: "horizontal",
-                                        children: [
-                                            /*#__PURE__*/ jsx(BundledSizeTag, {
-                                                size: parsedSize
-                                            }),
-                                            /*#__PURE__*/ jsx(SourceSizeTag, {
-                                                size: sourceSize
-                                            })
-                                        ]
-                                    })
-                                }) : 0 !== sourceSize ? /*#__PURE__*/ jsx(SourceSizeTag, {
-                                    size: sourceSize
-                                }) : null,
-                                isConcatenation ? /*#__PURE__*/ jsx(ConcatenatedTag, {
-                                    moduleCount: mod.modules?.length || 0
-                                }) : null,
-                                containedOtherModules && containedOtherModules.length ? /*#__PURE__*/ jsx(Tooltip, {
-                                    title: /*#__PURE__*/ jsxs(Space, {
-                                        direction: "vertical",
-                                        children: [
-                                            /*#__PURE__*/ jsx(Typography.Text, {
-                                                style: {
-                                                    color: 'inherit'
-                                                },
-                                                children: "This module is concatenated into another container module:"
-                                            }),
-                                            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(ModuleCodeViewer, {
-                                    data: mod
-                                })
-                            ]
-                        })
-                    ]
-                });
-            },
-            dirTitle (dir, defaultTitle) {
-                const mods = [];
-                const paths = getChildrenModule(dir, mods);
-                if (paths.length) {
-                    const normalizePath = (path)=>path.replace(/\\/g, '/');
-                    const mods = paths.map((e)=>includeModules.find((m)=>normalizePath(m.path) === normalizePath(e)));
-                    const parsedSize = sumBy(mods, (e)=>e?.size?.parsedSize || 0);
-                    const sourceSize = sumBy(mods, (e)=>e?.size?.sourceSize || 0);
-                    return /*#__PURE__*/ jsxs("div", {
-                        className: index_module["bundle-tree"],
-                        children: [
-                            /*#__PURE__*/ jsxs("div", {
-                                className: index_module.box,
-                                children: [
-                                    /*#__PURE__*/ jsx("div", {
-                                        className: index_module.keywords,
-                                        children: /*#__PURE__*/ jsx(Keyword, {
-                                            ellipsis: true,
-                                            text: defaultTitle,
-                                            keyword: ''
-                                        })
-                                    }),
-                                    /*#__PURE__*/ jsx("div", {
-                                        className: index_module.dividerDiv,
-                                        children: /*#__PURE__*/ jsx(Divider, {
-                                            className: index_module.divider,
-                                            dashed: true
-                                        })
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsx(Space, {
-                                children: parsedSize > 0 ? /*#__PURE__*/ jsxs(Fragment, {
-                                    children: [
-                                        /*#__PURE__*/ jsx(TotalBundledSizeTag, {
-                                            size: parsedSize
-                                        }),
-                                        /*#__PURE__*/ jsx(TotalSourceSizeTag, {
-                                            size: sourceSize
-                                        })
-                                    ]
-                                }) : /*#__PURE__*/ jsx(TotalSourceSizeTag, {
-                                    size: sourceSize
-                                })
-                            })
-                        ]
-                    });
-                }
-                return defaultTitle;
-            },
-            page: 'bundle'
-        });
-        return res;
-    }, [
-        filteredModules
-    ]);
     const onSearch = (value)=>setModuleKeyword(value);
+    const openModuleGraphViewer = useCallback((modId)=>{
+        setShowModuleGraphViewer(true);
+        setModuleJumpList(modId);
+    }, []);
     useEffect(()=>{
         setModuleKeyword('');
         setDefaultExpandAll(false);
@@ -637,25 +431,26 @@ const AssetDetail = ({ asset, chunks: includeChunks, modules: includeModules, mo
             setModuleJumpList
         },
         children: /*#__PURE__*/ jsxs(Card, {
-            className: index_module.bundle,
+            className: asset_module.bundle,
             title: `Modules of "${asset.path}"`,
-            bodyStyle: {
-                minHeight: height
+            style: {
+                '--body-min-height': height + 'px'
+            },
+            classNames: {
+                body: asset_module.bundleBody
             },
             size: "small",
             children: [
-                includeModules.length ? /*#__PURE__*/ jsxs(Row, {
+                includeModules.length ? /*#__PURE__*/ jsxs(Fragment, {
                     children: [
-                        /*#__PURE__*/ jsx(Col, {
-                            span: 24,
+                        /*#__PURE__*/ jsx("div", {
                             children: /*#__PURE__*/ jsx(ModulesStatistics, {
                                 modules: includeModules,
                                 chunks: includeChunks,
                                 filteredModules: filteredModules
                             })
                         }),
-                        /*#__PURE__*/ jsx(Col, {
-                            span: 24,
+                        /*#__PURE__*/ jsx("div", {
                             children: /*#__PURE__*/ jsxs(Space, {
                                 children: [
                                     /*#__PURE__*/ jsx(KeywordInput, {
@@ -670,34 +465,13 @@ const AssetDetail = ({ asset, chunks: includeChunks, modules: includeModules, mo
                                 ]
                             })
                         }),
-                        /*#__PURE__*/ jsx(Col, {
-                            span: 24,
-                            style: {
-                                marginTop: Size.BasePadding
-                            },
-                            children: filteredModules.length ? /*#__PURE__*/ jsx(DirectoryTree, {
-                                selectable: false,
-                                defaultExpandAll: defaultExpandAll || filteredModules.length <= 20,
-                                onExpand: (expandedKeys)=>{
-                                    expandedModulesKeys = expandedKeys;
-                                },
-                                defaultExpandParent: true,
-                                defaultExpandedKeys: expandedModulesKeys?.length ? expandedModulesKeys : 1 === fileStructures.length ? [
-                                    fileStructures[0].key
-                                ] : [],
-                                treeData: fileStructures,
-                                rootStyle: {
-                                    maxHeight: '500px',
-                                    overflow: 'auto',
-                                    border: '1px solid rgba(235, 237, 241)',
-                                    padding: '14px 20px'
-                                }
-                            }, `tree_${moduleKeyword}_${defaultExpandAll}_${asset.path}`) : /*#__PURE__*/ jsx(Empty, {
-                                description: /*#__PURE__*/ jsx(Typography.Text, {
-                                    strong: true,
-                                    children: `"${moduleKeyword}" can't match any modules`
-                                })
-                            })
+                        /*#__PURE__*/ jsx(AssetDetailTree, {
+                            assetPath: asset.path,
+                            includeModules: includeModules,
+                            filteredModules: filteredModules,
+                            defaultExpandAll: defaultExpandAll,
+                            moduleKeyword: moduleKeyword,
+                            openModuleGraphViewer: openModuleGraphViewer
                         })
                     ]
                 }) : /*#__PURE__*/ jsx(Empty, {
@@ -708,14 +482,307 @@ const AssetDetail = ({ asset, chunks: includeChunks, modules: includeModules, mo
                 }),
                 /*#__PURE__*/ jsx(ModuleGraphViewer, {
                     id: moduleJumpList?.length ? moduleJumpList[moduleJumpList.length - 1] : '',
-                    show: show,
-                    setShow: setShow,
+                    show: showModuleGraphViewer,
+                    setShow: setShowModuleGraphViewer,
                     cwd: root
                 })
             ]
         })
     });
 };
+let defaultExpandedModulesKeys = [];
+const AssetDetailTree = /*#__PURE__*/ memo(({ filteredModules, includeModules, defaultExpandAll, moduleKeyword, openModuleGraphViewer, assetPath })=>{
+    const ITEM_HEIGHT = 30;
+    const PERMANENT_PERF_MODE = false;
+    const DISABLE_PERF_MODE_SCROLL_DELAY = 150;
+    const [performanceMode, setPerformanceMode] = useState(PERMANENT_PERF_MODE);
+    const [bundleTreeRef, { height: bundleTreeHeight, width: bundleTreeWidth }] = useElementSize();
+    const onScroll = useMemo(()=>{
+        if (PERMANENT_PERF_MODE) return;
+        const disablePerformanceMode = debounce(()=>{
+            setPerformanceMode(false);
+        }, DISABLE_PERF_MODE_SCROLL_DELAY);
+        const onScroll = ()=>{
+            setPerformanceMode(true);
+            disablePerformanceMode();
+        };
+        return onScroll;
+    }, []);
+    const treeData = useMemo(()=>{
+        const normalizePath = (path)=>path.replace(/\\/g, '/');
+        const filteredModulesMap = new Map();
+        const files = [];
+        for (const mod of filteredModules)if (mod.path) {
+            filteredModulesMap.set(normalizePath(mod.path), mod);
+            files.push(mod.path);
+        }
+        const includeModulesMap = new Map();
+        for (const mod of includeModules)if (mod.path) includeModulesMap.set(normalizePath(mod.path), mod);
+        const onFileEntryClick = (modId)=>openModuleGraphViewer([
+                modId
+            ]);
+        const treeData = createFileStructures({
+            files,
+            inlinedResourcePathKey: inlinedResourcePathKey,
+            fileTitle (file, basename) {
+                const mod = filteredModulesMap.get(normalizePath(file));
+                if (!mod) return basename;
+                return /*#__PURE__*/ jsx(AssetDetailTreeFileEntry, {
+                    mod: mod,
+                    basename: basename,
+                    includeModules: includeModules,
+                    onClick: onFileEntryClick
+                });
+            },
+            dirTitle (dir, defaultTitle) {
+                const paths = getChildrenModule(dir, []);
+                if (!paths.length) return defaultTitle;
+                const { parsedSize, sourceSize } = paths.reduce((acc, path)=>{
+                    const mod = includeModulesMap.get(normalizePath(path));
+                    if (mod) {
+                        acc.sourceSize += mod.size?.sourceSize || 0;
+                        acc.parsedSize += mod.size?.parsedSize || 0;
+                    }
+                    return acc;
+                }, {
+                    sourceSize: 0,
+                    parsedSize: 0
+                });
+                return /*#__PURE__*/ jsx(AssetDetailTreeDirEntry, {
+                    title: defaultTitle,
+                    parsedSize: parsedSize,
+                    sourceSize: sourceSize
+                });
+            },
+            page: 'bundle'
+        });
+        return treeData;
+    }, [
+        filteredModules,
+        openModuleGraphViewer
+    ]);
+    return /*#__PURE__*/ jsx(PopupContext.Provider, {
+        value: {
+            enabled: !performanceMode
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            className: asset_module.bundleTree,
+            style: {
+                marginTop: Size.BasePadding,
+                '--item-height': ITEM_HEIGHT + 'px'
+            },
+            children: /*#__PURE__*/ jsx("div", {
+                className: asset_module.bundleTreeViewport,
+                children: /*#__PURE__*/ jsx("div", {
+                    className: asset_module.bundleTreeInnerViewport,
+                    ref: bundleTreeRef,
+                    children: bundleTreeHeight > 0 && /*#__PURE__*/ jsx(Fragment, {
+                        children: filteredModules.length ? /*#__PURE__*/ jsx(DirectoryTree, {
+                            onScroll: onScroll,
+                            selectable: false,
+                            virtual: true,
+                            itemHeight: ITEM_HEIGHT,
+                            height: bundleTreeHeight,
+                            style: bundleTreeWidth ? {
+                                width: bundleTreeWidth + 'px'
+                            } : void 0,
+                            defaultExpandAll: defaultExpandAll || filteredModules.length <= 20,
+                            onExpand: (expandedKeys)=>{
+                                defaultExpandedModulesKeys = expandedKeys;
+                            },
+                            defaultExpandParent: true,
+                            defaultExpandedKeys: defaultExpandedModulesKeys?.length ? defaultExpandedModulesKeys : 1 === treeData.length ? [
+                                treeData[0].key
+                            ] : [],
+                            treeData: treeData
+                        }, `tree_${moduleKeyword}_${defaultExpandAll}_${assetPath}`) : /*#__PURE__*/ jsx(Empty, {
+                            description: /*#__PURE__*/ jsx(Typography.Text, {
+                                strong: true,
+                                children: `"${moduleKeyword}" can't match any modules`
+                            })
+                        })
+                    })
+                })
+            })
+        })
+    });
+});
+const AssetDetailTreeDirEntry = /*#__PURE__*/ memo(({ title, parsedSize, sourceSize })=>{
+    const render = ()=>/*#__PURE__*/ jsxs("div", {
+            className: asset_module.bundleTreeEntryContent,
+            children: [
+                /*#__PURE__*/ jsx(asset_Popover, {
+                    content: title,
+                    children: /*#__PURE__*/ jsx(Typography.Text, {
+                        className: asset_module.bundleTreeEntryTitle,
+                        children: title
+                    })
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: asset_module.divider
+                }),
+                /*#__PURE__*/ jsx(Space, {
+                    children: parsedSize > 0 ? /*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            /*#__PURE__*/ jsx(TotalBundledSizeTag, {
+                                size: parsedSize
+                            }),
+                            /*#__PURE__*/ jsx(TotalSourceSizeTag, {
+                                size: sourceSize
+                            })
+                        ]
+                    }) : /*#__PURE__*/ jsx(TotalSourceSizeTag, {
+                        size: sourceSize
+                    })
+                })
+            ]
+        });
+    const renderWithoutPopups = ()=>/*#__PURE__*/ jsx(DisablePopups, {
+            children: render()
+        });
+    return /*#__PURE__*/ jsx("div", {
+        className: asset_module.bundleTreeEntry,
+        children: /*#__PURE__*/ jsx(ErrorBoundary, {
+            fallbackRender: renderWithoutPopups,
+            children: render()
+        })
+    });
+});
+const AssetDetailTreeFileEntry = /*#__PURE__*/ memo(({ mod, basename, includeModules, onClick })=>{
+    const isConcatenation = mod.kind === SDK.ModuleKind.Concatenation;
+    const { parsedSize = 0, sourceSize = 0, gzipSize = 0 } = mod.size;
+    const renderSize = ()=>{
+        if (0 !== parsedSize) {
+            const sourceSizeTag = /*#__PURE__*/ jsx(SourceSizeTag, {
+                size: sourceSize
+            });
+            const bundledSizeTag = /*#__PURE__*/ jsx(BundledSizeTag, {
+                size: parsedSize
+            });
+            if ('number' == typeof gzipSize) return /*#__PURE__*/ jsx(asset_Popover, {
+                placement: "bottom",
+                content: sourceSizeTag,
+                children: /*#__PURE__*/ jsxs(Space, {
+                    direction: "horizontal",
+                    children: [
+                        bundledSizeTag,
+                        /*#__PURE__*/ jsx(GzippedSizeTag, {
+                            size: gzipSize
+                        })
+                    ]
+                })
+            });
+            return /*#__PURE__*/ jsxs(Space, {
+                direction: "horizontal",
+                children: [
+                    bundledSizeTag,
+                    sourceSizeTag
+                ]
+            });
+        }
+        if (0 !== sourceSize) return /*#__PURE__*/ jsx(SourceSizeTag, {
+            size: sourceSize
+        });
+        return null;
+    };
+    const renderContainedOtherModules = ()=>{
+        const containedOtherModules = !isConcatenation && 0 === parsedSize && includeModules.filter((e)=>e !== mod && e.modules && e.modules.indexOf(mod.id) > -1);
+        if (containedOtherModules && containedOtherModules.length) return /*#__PURE__*/ jsx(asset_Tooltip, {
+            title: /*#__PURE__*/ jsxs(Space, {
+                direction: "vertical",
+                children: [
+                    /*#__PURE__*/ jsx(Typography.Text, {
+                        style: {
+                            color: 'inherit'
+                        },
+                        children: "This module is concatenated into another container module:"
+                    }),
+                    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"
+            })
+        });
+        return null;
+    };
+    const render = ()=>/*#__PURE__*/ jsxs("div", {
+            className: asset_module.bundleTreeEntryContent,
+            children: [
+                /*#__PURE__*/ jsx(asset_Popover, {
+                    content: `Open the ${basename}’s module reasons tree.`,
+                    placement: "bottom",
+                    children: /*#__PURE__*/ jsxs("div", {
+                        className: asset_module.bundleTreeEntryTitleWrap,
+                        onClick: ()=>onClick(mod.id),
+                        children: [
+                            /*#__PURE__*/ jsx(asset_Popover, {
+                                content: basename,
+                                children: /*#__PURE__*/ jsx(Typography.Text, {
+                                    className: asset_module.bundleTreeEntryTitle,
+                                    children: basename
+                                })
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: asset_module.divider
+                            })
+                        ]
+                    })
+                }),
+                /*#__PURE__*/ jsxs(Space, {
+                    children: [
+                        renderSize(),
+                        isConcatenation && /*#__PURE__*/ jsx(ConcatenatedTag, {
+                            moduleCount: mod.modules?.length || 0
+                        }),
+                        renderContainedOtherModules(),
+                        /*#__PURE__*/ jsx(ModuleCodeViewer, {
+                            data: mod
+                        })
+                    ]
+                })
+            ]
+        });
+    const renderWithoutPopups = ()=>/*#__PURE__*/ jsx(DisablePopups, {
+            children: render()
+        });
+    return /*#__PURE__*/ jsx("div", {
+        className: asset_module.bundleTreeEntry,
+        children: /*#__PURE__*/ jsx(ErrorBoundary, {
+            fallbackRender: renderWithoutPopups,
+            children: render()
+        })
+    });
+});
 export { AssetDetail, ModuleCodeViewer, ModuleGraphViewer, ModulesStatistics, getChildrenModule };
 
 //# sourceMappingURL=asset.mjs.map