rspress-plugin-file-tree 1.0.0 → 1.0.2

package/dist/components/FileTree/FileTree.js

@@ -1,7 +1,527 @@
-import { jsx } from "react/jsx-runtime";
-import "react";
-import FileTree_module from "./FileTree.module.js";
-import { FileTreeItem } from "./FileTreeItem.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+var __webpack_modules__ = {};
+var __webpack_module_cache__ = {};
+function __webpack_require__(moduleId) {
+    var cachedModule = __webpack_module_cache__[moduleId];
+    if (void 0 !== cachedModule) return cachedModule.exports;
+    var module = __webpack_module_cache__[moduleId] = {
+        exports: {}
+    };
+    __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+    return module.exports;
+}
+__webpack_require__.m = __webpack_modules__;
+(()=>{
+    __webpack_require__.add = function(modules) {
+        Object.assign(__webpack_require__.m, modules);
+    };
+})();
+const FileTree_module = {
+    container: "container-ZPDb1C"
+};
+const SUPPORTED_LANGUAGES = [
+    {
+        id: "javascript",
+        icons: [
+            {
+                name: "javascript",
+                content: ()=>import("../../0~311.js").then((mod)=>({
+                            default: mod.javascriptraw_namespaceObject
+                        })),
+                matcher: /^.*\.js$/
+            },
+            {
+                name: "javascript-beta",
+                content: ()=>import("../../0~311.js").then((mod)=>({
+                            default: mod.javascriptraw_namespaceObject
+                        })),
+                matcher: /^.*\.cjs$/
+            },
+            {
+                name: "javascript-beta",
+                content: ()=>import("../../0~311.js").then((mod)=>({
+                            default: mod.javascriptraw_namespaceObject
+                        })),
+                matcher: /^.*\.mjs$/
+            }
+        ]
+    },
+    {
+        id: "typescript",
+        icons: [
+            {
+                name: "typescript",
+                content: ()=>import("../../0~687.js").then((mod)=>({
+                            default: mod.typescriptraw_namespaceObject
+                        })),
+                matcher: /^.*\.ts$/
+            },
+            {
+                name: "typescript-beta",
+                content: ()=>import("../../0~687.js").then((mod)=>({
+                            default: mod.typescriptraw_namespaceObject
+                        })),
+                matcher: /^.*\.mts$/
+            },
+            {
+                name: "typescript-beta",
+                content: ()=>import("../../0~687.js").then((mod)=>({
+                            default: mod.typescriptraw_namespaceObject
+                        })),
+                matcher: /^.*\.cts$/
+            },
+            {
+                name: 'react_ts',
+                content: ()=>import("../../0~453.js").then((mod)=>({
+                            default: mod.react_tsraw_namespaceObject
+                        })),
+                matcher: /^.*\.tsx$/
+            }
+        ]
+    },
+    {
+        id: 'react',
+        icons: [
+            {
+                name: 'react',
+                content: ()=>import("../../0~3.js").then((mod)=>({
+                            default: mod.reactraw_namespaceObject
+                        })),
+                matcher: /^.*\.jsx$/
+            }
+        ]
+    },
+    {
+        id: 'css',
+        icons: [
+            {
+                name: 'css',
+                content: ()=>import("../../0~659.js").then((mod)=>({
+                            default: mod.cssraw_namespaceObject
+                        })),
+                matcher: /^.*\.css$/
+            },
+            {
+                name: 'less',
+                content: ()=>import("../../0~225.js").then((mod)=>({
+                            default: mod.lessraw_namespaceObject
+                        })),
+                matcher: /^.*\.less$/
+            },
+            {
+                name: 'sass',
+                content: ()=>import("../../0~670.js").then((mod)=>({
+                            default: mod.sassraw_namespaceObject
+                        })),
+                matcher: /^.*\.scss$/
+            }
+        ]
+    },
+    {
+        id: 'json',
+        icons: [
+            {
+                name: 'json',
+                content: ()=>import("../../0~706.js").then((mod)=>({
+                            default: mod.jsonraw_namespaceObject
+                        })),
+                matcher: /^.*\.json$/
+            }
+        ]
+    },
+    {
+        id: 'markdown',
+        icons: [
+            {
+                name: 'markdown',
+                content: ()=>import("../../0~497.js").then((mod)=>({
+                            default: mod.markdownraw_namespaceObject
+                        })),
+                matcher: /^.*\.(md|mdx)$/
+            }
+        ]
+    },
+    {
+        id: 'html',
+        icons: [
+            {
+                name: 'html',
+                content: ()=>import("../../0~301.js").then((mod)=>({
+                            default: mod.htmlraw_namespaceObject
+                        })),
+                matcher: /^.*\.html?$/
+            }
+        ]
+    }
+];
+const FOLDER_ICONS = {
+    src: {
+        name: 'folder-src',
+        content: ()=>import("../../0~603.js").then((mod)=>({
+                    default: mod.folder_srcraw_namespaceObject
+                }))
+    },
+    source: {
+        name: 'folder-src',
+        content: ()=>import("../../0~603.js").then((mod)=>({
+                    default: mod.folder_srcraw_namespaceObject
+                }))
+    },
+    components: {
+        name: 'folder-components',
+        content: ()=>import("../../0~299.js").then((mod)=>({
+                    default: mod.folder_componentsraw_namespaceObject
+                }))
+    },
+    component: {
+        name: 'folder-components',
+        content: ()=>import("../../0~299.js").then((mod)=>({
+                    default: mod.folder_componentsraw_namespaceObject
+                }))
+    },
+    hooks: {
+        name: 'folder-hook',
+        content: ()=>import("../../0~40.js").then((mod)=>({
+                    default: mod.folder_hookraw_namespaceObject
+                }))
+    },
+    hook: {
+        name: 'folder-hook',
+        content: ()=>import("../../0~40.js").then((mod)=>({
+                    default: mod.folder_hookraw_namespaceObject
+                }))
+    },
+    utils: {
+        name: 'folder-utils',
+        content: ()=>import("../../0~288.js").then((mod)=>({
+                    default: mod.folder_utilsraw_namespaceObject
+                }))
+    },
+    util: {
+        name: 'folder-utils',
+        content: ()=>import("../../0~288.js").then((mod)=>({
+                    default: mod.folder_utilsraw_namespaceObject
+                }))
+    },
+    lib: {
+        name: 'folder-lib',
+        content: ()=>import("../../0~2.js").then((mod)=>({
+                    default: mod.folder_libraw_namespaceObject
+                }))
+    },
+    libs: {
+        name: 'folder-lib',
+        content: ()=>import("../../0~2.js").then((mod)=>({
+                    default: mod.folder_libraw_namespaceObject
+                }))
+    },
+    core: {
+        name: 'folder-core',
+        content: ()=>import("../../0~164.js").then((mod)=>({
+                    default: mod.folder_coreraw_namespaceObject
+                }))
+    },
+    runtime: {
+        name: 'folder-core',
+        content: ()=>import("../../0~164.js").then((mod)=>({
+                    default: mod.folder_coreraw_namespaceObject
+                }))
+    },
+    locales: {
+        name: 'folder-i18n',
+        content: ()=>import("../../0~511.js").then((mod)=>({
+                    default: mod.folder_i18nraw_namespaceObject
+                }))
+    },
+    locale: {
+        name: 'folder-i18n',
+        content: ()=>import("../../0~511.js").then((mod)=>({
+                    default: mod.folder_i18nraw_namespaceObject
+                }))
+    },
+    i18n: {
+        name: 'folder-i18n',
+        content: ()=>import("../../0~511.js").then((mod)=>({
+                    default: mod.folder_i18nraw_namespaceObject
+                }))
+    },
+    assets: {
+        name: 'folder-images',
+        content: ()=>import("../../0~433.js").then((mod)=>({
+                    default: mod.folder_imagesraw_namespaceObject
+                }))
+    },
+    images: {
+        name: 'folder-images',
+        content: ()=>import("../../0~433.js").then((mod)=>({
+                    default: mod.folder_imagesraw_namespaceObject
+                }))
+    },
+    styles: {
+        name: 'folder-css',
+        content: ()=>import("../../0~854.js").then((mod)=>({
+                    default: mod.folder_cssraw_namespaceObject
+                }))
+    },
+    css: {
+        name: 'folder-css',
+        content: ()=>import("../../0~854.js").then((mod)=>({
+                    default: mod.folder_cssraw_namespaceObject
+                }))
+    },
+    test: {
+        name: 'folder-test',
+        content: ()=>import("../../0~43.js").then((mod)=>({
+                    default: mod.folder_testraw_namespaceObject
+                }))
+    },
+    tests: {
+        name: 'folder-test',
+        content: ()=>import("../../0~43.js").then((mod)=>({
+                    default: mod.folder_testraw_namespaceObject
+                }))
+    },
+    __tests__: {
+        name: 'folder-test',
+        content: ()=>import("../../0~43.js").then((mod)=>({
+                    default: mod.folder_testraw_namespaceObject
+                }))
+    },
+    config: {
+        name: 'folder-config',
+        content: ()=>import("../../0~729.js").then((mod)=>({
+                    default: mod.folder_configraw_namespaceObject
+                }))
+    },
+    configs: {
+        name: 'folder-config',
+        content: ()=>import("../../0~729.js").then((mod)=>({
+                    default: mod.folder_configraw_namespaceObject
+                }))
+    },
+    api: {
+        name: 'folder-api',
+        content: ()=>import("../../0~97.js").then((mod)=>({
+                    default: mod.folder_apiraw_namespaceObject
+                }))
+    },
+    apis: {
+        name: 'folder-api',
+        content: ()=>import("../../0~97.js").then((mod)=>({
+                    default: mod.folder_apiraw_namespaceObject
+                }))
+    },
+    public: {
+        name: 'folder-public',
+        content: ()=>import("../../0~830.js").then((mod)=>({
+                    default: mod.folder_publicraw_namespaceObject
+                }))
+    },
+    dist: {
+        name: 'folder-dist',
+        content: ()=>import("../../0~879.js").then((mod)=>({
+                    default: mod.folder_distraw_namespaceObject
+                }))
+    },
+    build: {
+        name: 'folder-dist',
+        content: ()=>import("../../0~879.js").then((mod)=>({
+                    default: mod.folder_distraw_namespaceObject
+                }))
+    },
+    node_modules: {
+        name: 'folder-node',
+        content: ()=>import("../../0~863.js").then((mod)=>({
+                    default: mod.folder_noderaw_namespaceObject
+                }))
+    },
+    types: {
+        name: "folder-typescript",
+        content: ()=>import("../../0~616.js").then((mod)=>({
+                    default: mod.folder_typescriptraw_namespaceObject
+                }))
+    },
+    typings: {
+        name: "folder-typescript",
+        content: ()=>import("../../0~616.js").then((mod)=>({
+                    default: mod.folder_typescriptraw_namespaceObject
+                }))
+    },
+    pages: {
+        name: 'folder-views',
+        content: ()=>import("../../0~819.js").then((mod)=>({
+                    default: mod.folder_viewsraw_namespaceObject
+                }))
+    },
+    views: {
+        name: 'folder-views',
+        content: ()=>import("../../0~819.js").then((mod)=>({
+                    default: mod.folder_viewsraw_namespaceObject
+                }))
+    },
+    routes: {
+        name: 'folder-routes',
+        content: ()=>import("../../0~457.js").then((mod)=>({
+                    default: mod.folder_routesraw_namespaceObject
+                }))
+    },
+    docs: {
+        name: 'folder-docs',
+        content: ()=>import("../../0~768.js").then((mod)=>({
+                    default: mod.folder_docsraw_namespaceObject
+                }))
+    },
+    services: {
+        name: 'folder-app',
+        content: ()=>import("../../0~142.js").then((mod)=>({
+                    default: mod.folder_appraw_namespaceObject
+                }))
+    },
+    app: {
+        name: 'folder-app',
+        content: ()=>import("../../0~142.js").then((mod)=>({
+                    default: mod.folder_appraw_namespaceObject
+                }))
+    }
+};
+const DEFAULT_FOLDER_ICON = {
+    name: 'folder',
+    content: ()=>import("../../0~96.js").then((mod)=>({
+                default: mod.folderraw_namespaceObject
+            }))
+};
+const DEFAULT_FILE_ICON = {
+    name: 'file',
+    content: ()=>import("../../0~326.js").then((mod)=>({
+                default: mod.fileraw_namespaceObject
+            })),
+    matcher: /^.*$/
+};
+function getFolderIcon(name) {
+    const lowerName = name.toLowerCase();
+    return FOLDER_ICONS[lowerName] || DEFAULT_FOLDER_ICON;
+}
+function getFileIcon(fileName) {
+    for (const language of SUPPORTED_LANGUAGES)for (const icon of language.icons)if (icon.matcher.test(fileName)) return {
+        name: icon.name,
+        content: icon.content,
+        matcher: icon.matcher
+    };
+    return DEFAULT_FILE_ICON;
+}
+const FileTreeItem_module = {
+    item: "item-mfHlfR",
+    row: "row-AOLrYw",
+    chevron: "chevron-Zi120f",
+    iconWrapper: "iconWrapper-SwAXs4",
+    name: "name-ItNtUc",
+    comment: "comment-_zMtnb",
+    children: "children-yp3kEz",
+    indentGuide: "indentGuide-bjr2fi"
+};
+const RemoteSvgIcon = ({ content, className })=>{
+    const [svgContent, setSvgContent] = useState('');
+    useEffect(()=>{
+        let cancelled = false;
+        content().then((mod)=>{
+            if (cancelled) return;
+            const svg = 'string' == typeof mod ? mod : mod.default;
+            setSvgContent(svg);
+        });
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        content
+    ]);
+    if (!svgContent) return null;
+    return /*#__PURE__*/ jsx("span", {
+        className: className,
+        dangerouslySetInnerHTML: {
+            __html: svgContent
+        }
+    });
+};
+const INDENT_SIZE = 12;
+const FileTreeItem = ({ node, depth })=>{
+    const hasChildren = 'directory' === node.type && node.children.length > 0;
+    const [expanded, setExpanded] = useState(hasChildren);
+    const icon = useMemo(()=>{
+        if ('directory' === node.type) return getFolderIcon(node.name);
+        return getFileIcon(node.name);
+    }, [
+        node.name,
+        node.type
+    ]);
+    const isDirectory = 'directory' === node.type;
+    const toggle = (e)=>{
+        e.stopPropagation();
+        if (isDirectory) setExpanded((p)=>!p);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: FileTreeItem_module.item,
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: FileTreeItem_module.row,
+                onClick: toggle,
+                style: {
+                    paddingLeft: `${depth * INDENT_SIZE}px`
+                },
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: FileTreeItem_module.chevron,
+                        "data-expanded": expanded,
+                        style: {
+                            visibility: isDirectory ? 'visible' : 'hidden'
+                        },
+                        children: /*#__PURE__*/ jsx("svg", {
+                            width: "16",
+                            height: "16",
+                            viewBox: "0 0 16 16",
+                            fill: "currentColor",
+                            children: /*#__PURE__*/ jsx("path", {
+                                fillRule: "evenodd",
+                                clipRule: "evenodd",
+                                d: "M10.072 8.024L5.715 3.667l.618-.62L11 8.024l-4.667 4.977-.618-.62L10.072 8.024z"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: FileTreeItem_module.iconWrapper,
+                        children: /*#__PURE__*/ jsx(RemoteSvgIcon, {
+                            content: icon.content,
+                            className: FileTreeItem_module.iconWrapper
+                        })
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        className: FileTreeItem_module.name,
+                        children: node.name
+                    }),
+                    node.comment && /*#__PURE__*/ jsx("span", {
+                        className: FileTreeItem_module.comment,
+                        children: node.comment
+                    })
+                ]
+            }),
+            isDirectory && node.children.length > 0 && expanded && /*#__PURE__*/ jsxs("div", {
+                className: FileTreeItem_module.children,
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        className: FileTreeItem_module.indentGuide,
+                        style: {
+                            left: `${depth * INDENT_SIZE + 6}px`
+                        }
+                    }),
+                    node.children.map((child, index)=>/*#__PURE__*/ jsx(FileTreeItem, {
+                            node: child,
+                            depth: depth + 1
+                        }, `${child.name}-${index}`))
+                ]
+            })
+        ]
+    });
+};
 const FileTree = ({ nodes })=>/*#__PURE__*/ jsx("div", {
         className: FileTree_module.container,
         children: nodes.map((node, index)=>/*#__PURE__*/ jsx(FileTreeItem, {
@@ -10,4 +530,5 @@ const FileTree = ({ nodes })=>/*#__PURE__*/ jsx("div", {
             }, `${node.name}-${index}`))
     });
 const FileTree_FileTree = FileTree;
-export { FileTree, FileTree_FileTree as default };
+export default FileTree_FileTree;
+export { __webpack_require__, FileTree };

package/dist/components/tree-parser/types.d.ts

@@ -3,6 +3,7 @@ export interface TreeNode {
     type: 'file' | 'directory';
     children: TreeNode[];
     extension?: string;
+    comment?: string;
 }
 export interface ParsedTree {
     nodes: TreeNode[];

package/dist/index.js

@@ -1,6 +1,137 @@
 import node_path from "node:path";
 import { RemarkCodeBlockToGlobalComponentPluginFactory } from "rspress-plugin-devkit";
-import { parseTreeContent } from "./components/tree-parser/tree-parser.js";
+function parseTreeContent(content) {
+    let lines = content.split('\n').filter((line)=>line.trim());
+    if (lines.length > 0 && '.' === lines[0].trim()) lines = lines.slice(1);
+    const nodes = [];
+    const stack = [];
+    for (const line of lines){
+        const indent = calculateIndent(line);
+        const fullName = extractName(line);
+        const { name, comment } = extractNameAndComment(fullName);
+        if (!name) continue;
+        const isDirectory = isDirectoryName(name);
+        const node = {
+            name: name.replace(/\/$/, ''),
+            type: isDirectory ? 'directory' : 'file',
+            children: [],
+            extension: isDirectory ? void 0 : getExtension(name),
+            comment
+        };
+        while(stack.length > 0 && stack[stack.length - 1].indent >= indent)stack.pop();
+        if (0 === stack.length) nodes.push(node);
+        else stack[stack.length - 1].node.children.push(node);
+        if ('directory' === node.type) stack.push({
+            node,
+            indent
+        });
+    }
+    return {
+        nodes,
+        raw: content
+    };
+}
+function calculateIndent(line) {
+    let indent = 0;
+    let i = 0;
+    while(i < line.length){
+        const char = line[i];
+        if ('│' === char && '│   ' === line.substring(i, i + 4)) {
+            indent++;
+            i += 4;
+            continue;
+        }
+        if ('│' === char && ' ' === line[i + 1]) {
+            indent++;
+            i += 2;
+            continue;
+        }
+        if ('    ' === line.substring(i, i + 4)) {
+            indent++;
+            i += 4;
+            continue;
+        }
+        if ('  ' === line.substring(i, i + 2)) {
+            indent++;
+            i += 2;
+            continue;
+        }
+        if ('├' === char || '└' === char) {
+            if ('├──' === line.substring(i, i + 3) || '└──' === line.substring(i, i + 3)) indent++;
+        }
+        break;
+    }
+    return indent;
+}
+function extractName(line) {
+    return line.replace(/^[\s│]*/g, '').replace(/^[├└]──\s*/, '').trim();
+}
+function extractNameAndComment(fullName) {
+    const trimmed = fullName.trim();
+    if (!trimmed) return {
+        name: '',
+        comment: void 0
+    };
+    if (/^\.{2,}$/.test(trimmed)) return {
+        name: trimmed,
+        comment: void 0
+    };
+    const doubleSpaceMatch = trimmed.match(/^(.+?)\s{2,}(.+)$/);
+    if (doubleSpaceMatch) {
+        const potentialName = doubleSpaceMatch[1].trim();
+        const potentialComment = doubleSpaceMatch[2].trim();
+        if (isValidName(potentialName)) return {
+            name: potentialName,
+            comment: potentialComment
+        };
+    }
+    const singleSpaceMatch = trimmed.match(/^(.+?\.[a-zA-Z0-9]+)\s+([^.].*)$/);
+    if (singleSpaceMatch) {
+        const potentialName = singleSpaceMatch[1].trim();
+        const potentialComment = singleSpaceMatch[2].trim();
+        return {
+            name: potentialName,
+            comment: potentialComment
+        };
+    }
+    const hiddenFileMatch = trimmed.match(/^(\.[^\s]+)\s+(.+)$/);
+    if (hiddenFileMatch) return {
+        name: hiddenFileMatch[1].trim(),
+        comment: hiddenFileMatch[2].trim()
+    };
+    const dirCommentMatch = trimmed.match(/^([\w][\w.\s-]*?)\s+([^a-zA-Z0-9].*)$/);
+    if (dirCommentMatch) {
+        const potentialName = dirCommentMatch[1].trim();
+        if (!/\.[a-zA-Z0-9]+$/.test(potentialName)) return {
+            name: potentialName,
+            comment: dirCommentMatch[2].trim()
+        };
+    }
+    return {
+        name: trimmed,
+        comment: void 0
+    };
+}
+function isValidName(name) {
+    if (!name) return false;
+    if (name.endsWith('/')) return true;
+    if (/\.[a-zA-Z0-9]+$/.test(name)) return true;
+    if (name.startsWith('.')) return true;
+    if (/^[\w\s.-]+$/.test(name)) return true;
+    return false;
+}
+function isDirectoryName(name) {
+    if (name.endsWith('/')) return true;
+    const lastPart = name.split('/').pop() || name;
+    if (/^\.{2,}$/.test(lastPart)) return false;
+    if (lastPart.startsWith('.')) return false;
+    if (/\.[a-zA-Z0-9]+$/.test(lastPart)) return false;
+    return true;
+}
+function getExtension(name) {
+    const match = name.match(/\.([^.]+)$/);
+    return match ? match[1] : '';
+}
 const PACKAGE_ROOT = node_path.resolve(__dirname, '../');
 function rspressPluginFileTree(options = {}) {
     const { initialExpandDepth = 0 } = options;
@@ -26,7 +157,8 @@ function rspressPluginFileTree(options = {}) {
             ],
             globalComponents: remarkFileTree.mdxComponents
         },
+        globalStyles: node_path.join(PACKAGE_ROOT, 'dist/components/FileTree/FileTree.css'),
         builderConfig: remarkFileTree.builderConfig
     };
 }
-export { rspressPluginFileTree as default };
+export default rspressPluginFileTree;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rspress-plugin-file-tree",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Rspress plugin that add support for file tree component.",
   "files": [
     "dist"