rspress-plugin-file-tree 0.3.0 → 1.0.0

package/dist/components/FileTree/FileTree.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TreeNode } from '../tree-parser/types';
+interface FileTreeProps {
+    nodes: TreeNode[];
+}
+export declare const FileTree: React.FC<FileTreeProps>;
+export default FileTree;

package/dist/components/FileTree/FileTree.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+import FileTree_module from "./FileTree.module.js";
+import { FileTreeItem } from "./FileTreeItem.js";
+const FileTree = ({ nodes })=>/*#__PURE__*/ jsx("div", {
+        className: FileTree_module.container,
+        children: nodes.map((node, index)=>/*#__PURE__*/ jsx(FileTreeItem, {
+                node: node,
+                depth: 0
+            }, `${node.name}-${index}`))
+    });
+const FileTree_FileTree = FileTree;
+export { FileTree, FileTree_FileTree as default };

package/dist/components/FileTree/FileTree.module.js

@@ -0,0 +1,5 @@
+import "./FileTree_module.css";
+const FileTree_module = {
+    container: "container-ZPDb1C"
+};
+export { FileTree_module as default };

package/dist/components/FileTree/FileTreeItem.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TreeNode } from '../tree-parser/types';
+interface FileTreeItemProps {
+    node: TreeNode;
+    depth: number;
+}
+export declare const FileTreeItem: React.FC<FileTreeItemProps>;
+export {};

package/dist/components/FileTree/FileTreeItem.js

@@ -0,0 +1,80 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { getFileIcon, getFolderIcon } from "../folder-icons.js";
+import FileTreeItem_module from "./FileTreeItem.module.js";
+import { RemoteSvgIcon } from "./RemoteSvgIcon.js";
+const INDENT_SIZE = 12;
+const FileTreeItem = ({ node, depth })=>{
+    const [expanded, setExpanded] = useState(true);
+    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
+                    })
+                ]
+            }),
+            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}`))
+                ]
+            })
+        ]
+    });
+};
+export { FileTreeItem };

package/dist/components/FileTree/FileTreeItem.module.js

@@ -0,0 +1,11 @@
+import "./FileTreeItem_module.css";
+const FileTreeItem_module = {
+    item: "item-mfHlfR",
+    row: "row-AOLrYw",
+    chevron: "chevron-Zi120f",
+    iconWrapper: "iconWrapper-SwAXs4",
+    name: "name-ItNtUc",
+    children: "children-yp3kEz",
+    indentGuide: "indentGuide-bjr2fi"
+};
+export { FileTreeItem_module as default };

package/dist/components/FileTree/FileTreeItem_module.css

@@ -0,0 +1,71 @@
+.item-mfHlfR {
+  flex-direction: column;
+  display: flex;
+  position: relative;
+}
+
+.row-AOLrYw {
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  height: 22px;
+  color: inherit;
+  opacity: .8;
+  align-items: center;
+  gap: 6px;
+  padding-right: 12px;
+  transition: opacity .1s;
+  display: flex;
+}
+
+.row-AOLrYw:hover {
+  background-color: var(--rp-c-text-code-bg);
+  opacity: 1;
+}
+
+.chevron-Zi120f {
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  transition: transform .15s;
+  display: flex;
+  transform: rotate(0);
+}
+
+.chevron-Zi120f[data-expanded="true"] {
+  transform: rotate(90deg);
+}
+
+.iconWrapper-SwAXs4 {
+  flex-shrink: 0;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+  display: inline-flex;
+}
+
+.name-ItNtUc {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.children-yp3kEz {
+  flex-direction: column;
+  display: flex;
+  position: relative;
+}
+
+.indentGuide-bjr2fi {
+  background-color: var(--rp-c-divider);
+  opacity: .1;
+  pointer-events: none;
+  width: 1px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 6px;
+}
+

package/dist/components/FileTree/FileTree_module.css

@@ -0,0 +1,12 @@
+.container-ZPDb1C {
+  box-sizing: border-box;
+  border-radius: var(--rp-radius);
+  border: var(--rp-code-block-border, 1px solid var(--rp-c-divider-light));
+  min-height: 100%;
+  box-shadow: var(--rp-code-block-shadow, none);
+  padding: 8px;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 22px;
+}
+

package/dist/components/FileTree/RemoteSvgIcon.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface RemoteSvgIconProps {
+    content: () => Promise<{
+        default: string;
+    } | string>;
+    size?: 'sm' | 'md';
+    delay?: number;
+    className?: string;
+}
+export declare const RemoteSvgIcon: React.FC<RemoteSvgIconProps>;
+export {};

package/dist/components/FileTree/RemoteSvgIcon.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+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
+        }
+    });
+};
+export { RemoteSvgIcon };

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

@@ -0,0 +1,4 @@
+import { FileTree } from './FileTree';
+export default FileTree;
+export { FileTree };
+export { FileTreeItem } from './FileTreeItem';

package/dist/components/FileTree/index.js

@@ -0,0 +1,4 @@
+import { FileTree } from "./FileTree.js";
+import { FileTreeItem } from "./FileTreeItem.js";
+const components_FileTree = FileTree;
+export { FileTree, FileTreeItem, components_FileTree as default };

package/dist/components/folder-icons.d.ts

@@ -0,0 +1,32 @@
+/// <reference path="../../src/env.d.ts" />
+export interface FolderIconDefinition {
+    name: string;
+    content: () => Promise<typeof import('*.svg')>;
+}
+export interface FileIconDefinition {
+    name: string;
+    content: () => Promise<typeof import('*.svg')>;
+    matcher: RegExp;
+}
+/**
+ * Special folder icons mapping
+ * Maps folder names to their corresponding icons
+ */
+export declare const FOLDER_ICONS: Record<string, FolderIconDefinition>;
+/**
+ * Default folder icon
+ */
+export declare const DEFAULT_FOLDER_ICON: FolderIconDefinition;
+/**
+ * Default file icon
+ */
+export declare const DEFAULT_FILE_ICON: FileIconDefinition;
+/**
+ * Get folder icon by folder name
+ */
+export declare function getFolderIcon(name: string): FolderIconDefinition;
+/**
+ * Get file icon by file name
+ * Searches through all supported languages for matching icon
+ */
+export declare function getFileIcon(fileName: string): FileIconDefinition;

package/dist/components/folder-icons.js

@@ -0,0 +1,177 @@
+import { SUPPORTED_LANGUAGES } from "./languages.js";
+const FOLDER_ICONS = {
+    src: {
+        name: 'folder-src',
+        content: ()=>import("material-icon-theme/icons/folder-src.svg?raw")
+    },
+    source: {
+        name: 'folder-src',
+        content: ()=>import("material-icon-theme/icons/folder-src.svg?raw")
+    },
+    components: {
+        name: 'folder-components',
+        content: ()=>import("material-icon-theme/icons/folder-components.svg?raw")
+    },
+    component: {
+        name: 'folder-components',
+        content: ()=>import("material-icon-theme/icons/folder-components.svg?raw")
+    },
+    hooks: {
+        name: 'folder-hook',
+        content: ()=>import("material-icon-theme/icons/folder-hook.svg?raw")
+    },
+    hook: {
+        name: 'folder-hook',
+        content: ()=>import("material-icon-theme/icons/folder-hook.svg?raw")
+    },
+    utils: {
+        name: 'folder-utils',
+        content: ()=>import("material-icon-theme/icons/folder-utils.svg?raw")
+    },
+    util: {
+        name: 'folder-utils',
+        content: ()=>import("material-icon-theme/icons/folder-utils.svg?raw")
+    },
+    lib: {
+        name: 'folder-lib',
+        content: ()=>import("material-icon-theme/icons/folder-lib.svg?raw")
+    },
+    libs: {
+        name: 'folder-lib',
+        content: ()=>import("material-icon-theme/icons/folder-lib.svg?raw")
+    },
+    core: {
+        name: 'folder-core',
+        content: ()=>import("material-icon-theme/icons/folder-core.svg?raw")
+    },
+    runtime: {
+        name: 'folder-core',
+        content: ()=>import("material-icon-theme/icons/folder-core.svg?raw")
+    },
+    locales: {
+        name: 'folder-i18n',
+        content: ()=>import("material-icon-theme/icons/folder-i18n.svg?raw")
+    },
+    locale: {
+        name: 'folder-i18n',
+        content: ()=>import("material-icon-theme/icons/folder-i18n.svg?raw")
+    },
+    i18n: {
+        name: 'folder-i18n',
+        content: ()=>import("material-icon-theme/icons/folder-i18n.svg?raw")
+    },
+    assets: {
+        name: 'folder-images',
+        content: ()=>import("material-icon-theme/icons/folder-images.svg?raw")
+    },
+    images: {
+        name: 'folder-images',
+        content: ()=>import("material-icon-theme/icons/folder-images.svg?raw")
+    },
+    styles: {
+        name: 'folder-css',
+        content: ()=>import("material-icon-theme/icons/folder-css.svg?raw")
+    },
+    css: {
+        name: 'folder-css',
+        content: ()=>import("material-icon-theme/icons/folder-css.svg?raw")
+    },
+    test: {
+        name: 'folder-test',
+        content: ()=>import("material-icon-theme/icons/folder-test.svg?raw")
+    },
+    tests: {
+        name: 'folder-test',
+        content: ()=>import("material-icon-theme/icons/folder-test.svg?raw")
+    },
+    __tests__: {
+        name: 'folder-test',
+        content: ()=>import("material-icon-theme/icons/folder-test.svg?raw")
+    },
+    config: {
+        name: 'folder-config',
+        content: ()=>import("material-icon-theme/icons/folder-config.svg?raw")
+    },
+    configs: {
+        name: 'folder-config',
+        content: ()=>import("material-icon-theme/icons/folder-config.svg?raw")
+    },
+    api: {
+        name: 'folder-api',
+        content: ()=>import("material-icon-theme/icons/folder-api.svg?raw")
+    },
+    apis: {
+        name: 'folder-api',
+        content: ()=>import("material-icon-theme/icons/folder-api.svg?raw")
+    },
+    public: {
+        name: 'folder-public',
+        content: ()=>import("material-icon-theme/icons/folder-public.svg?raw")
+    },
+    dist: {
+        name: 'folder-dist',
+        content: ()=>import("material-icon-theme/icons/folder-dist.svg?raw")
+    },
+    build: {
+        name: 'folder-dist',
+        content: ()=>import("material-icon-theme/icons/folder-dist.svg?raw")
+    },
+    node_modules: {
+        name: 'folder-node',
+        content: ()=>import("material-icon-theme/icons/folder-node.svg?raw")
+    },
+    types: {
+        name: "folder-typescript",
+        content: ()=>import("material-icon-theme/icons/folder-typescript.svg?raw")
+    },
+    typings: {
+        name: "folder-typescript",
+        content: ()=>import("material-icon-theme/icons/folder-typescript.svg?raw")
+    },
+    pages: {
+        name: 'folder-views',
+        content: ()=>import("material-icon-theme/icons/folder-views.svg?raw")
+    },
+    views: {
+        name: 'folder-views',
+        content: ()=>import("material-icon-theme/icons/folder-views.svg?raw")
+    },
+    routes: {
+        name: 'folder-routes',
+        content: ()=>import("material-icon-theme/icons/folder-routes.svg?raw")
+    },
+    docs: {
+        name: 'folder-docs',
+        content: ()=>import("material-icon-theme/icons/folder-docs.svg?raw")
+    },
+    services: {
+        name: 'folder-app',
+        content: ()=>import("material-icon-theme/icons/folder-app.svg?raw")
+    },
+    app: {
+        name: 'folder-app',
+        content: ()=>import("material-icon-theme/icons/folder-app.svg?raw")
+    }
+};
+const DEFAULT_FOLDER_ICON = {
+    name: 'folder',
+    content: ()=>import("material-icon-theme/icons/folder.svg?raw")
+};
+const DEFAULT_FILE_ICON = {
+    name: 'file',
+    content: ()=>import("material-icon-theme/icons/file.svg?raw"),
+    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;
+}
+export { DEFAULT_FILE_ICON, DEFAULT_FOLDER_ICON, FOLDER_ICONS, getFileIcon, getFolderIcon };

package/dist/components/languages.d.ts

@@ -0,0 +1,7 @@
+import { FileIconDefinition } from './folder-icons';
+interface LanguageDefinition {
+    id: string;
+    icons: FileIconDefinition[];
+}
+export declare const SUPPORTED_LANGUAGES: LanguageDefinition[];
+export {};

package/dist/components/languages.js

@@ -0,0 +1,98 @@
+const SUPPORTED_LANGUAGES = [
+    {
+        id: "javascript",
+        icons: [
+            {
+                name: "javascript",
+                content: ()=>import("material-icon-theme/icons/javascript.svg?raw"),
+                matcher: /^.*\.js$/
+            },
+            {
+                name: "javascript-beta",
+                content: ()=>import("material-icon-theme/icons/javascript.svg?raw"),
+                matcher: /^.*\.cjs$/
+            },
+            {
+                name: "javascript-beta",
+                content: ()=>import("material-icon-theme/icons/javascript.svg?raw"),
+                matcher: /^.*\.mjs$/
+            }
+        ]
+    },
+    {
+        id: "typescript",
+        icons: [
+            {
+                name: "typescript",
+                content: ()=>import("material-icon-theme/icons/typescript.svg?raw"),
+                matcher: /^.*\.ts$/
+            },
+            {
+                name: "typescript-beta",
+                content: ()=>import("material-icon-theme/icons/typescript.svg?raw"),
+                matcher: /^.*\.mts$/
+            },
+            {
+                name: "typescript-beta",
+                content: ()=>import("material-icon-theme/icons/typescript.svg?raw"),
+                matcher: /^.*\.cts$/
+            },
+            {
+                name: 'react_ts',
+                content: ()=>import("material-icon-theme/icons/react_ts.svg?raw"),
+                matcher: /^.*\.tsx$/
+            }
+        ]
+    },
+    {
+        id: 'react',
+        icons: [
+            {
+                name: 'react',
+                content: ()=>import("material-icon-theme/icons/react.svg?raw"),
+                matcher: /^.*\.jsx$/
+            }
+        ]
+    },
+    {
+        id: 'css',
+        icons: [
+            {
+                name: 'css',
+                content: ()=>import("material-icon-theme/icons/css.svg?raw"),
+                matcher: /^.*\.css$/
+            },
+            {
+                name: 'less',
+                content: ()=>import("material-icon-theme/icons/less.svg?raw"),
+                matcher: /^.*\.less$/
+            },
+            {
+                name: 'sass',
+                content: ()=>import("material-icon-theme/icons/sass.svg?raw"),
+                matcher: /^.*\.scss$/
+            }
+        ]
+    },
+    {
+        id: 'json',
+        icons: [
+            {
+                name: 'json',
+                content: ()=>import("material-icon-theme/icons/json.svg?raw"),
+                matcher: /^.*\.json$/
+            }
+        ]
+    },
+    {
+        id: 'markdown',
+        icons: [
+            {
+                name: 'markdown',
+                content: ()=>import("material-icon-theme/icons/markdown.svg?raw"),
+                matcher: /^.*\.(md|mdx)$/
+            }
+        ]
+    }
+];
+export { SUPPORTED_LANGUAGES };

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

@@ -0,0 +1,12 @@
+import { ParsedTree } from './types';
+/**
+ * Parse tree-style directory structure text into TreeNode array
+ *
+ * Supported formats:
+ * doc_build
+ * ├── file.ts
+ * └── folder
+ *     ├── nested.ts
+ *     └── another.ts
+ */
+export declare function parseTreeContent(content: string): ParsedTree;

package/dist/components/tree-parser/tree-parser.js

@@ -0,0 +1,68 @@
+function parseTreeContent(content) {
+    const lines = content.split('\n').filter((line)=>line.trim());
+    const nodes = [];
+    const stack = [];
+    for (const line of lines){
+        const indent = calculateIndent(line);
+        const fullName = extractName(line);
+        const commentMatch = fullName.match(/^(.*?)(?:\s*\/\/\s*(.*))?$/);
+        const name = commentMatch ? commentMatch[1].trim() : fullName;
+        if (!name) continue;
+        const isDirectory = isDirectoryName(name);
+        const node = {
+            name: name.replace(/\/$/, ''),
+            type: isDirectory ? 'directory' : 'file',
+            children: [],
+            extension: isDirectory ? void 0 : getExtension(name)
+        };
+        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 ('    ' === line.substring(i, i + 4)) {
+            indent++;
+            i += 4;
+            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 isDirectoryName(name) {
+    const cleanName = name.split(/\s+\/\//)[0].trim();
+    if (cleanName.endsWith('/')) return true;
+    const lastPart = cleanName.split('/').pop() || cleanName;
+    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] : '';
+}
+export { parseTreeContent };

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

@@ -0,0 +1,10 @@
+export interface TreeNode {
+    name: string;
+    type: 'file' | 'directory';
+    children: TreeNode[];
+    extension?: string;
+}
+export interface ParsedTree {
+    nodes: TreeNode[];
+    raw: string;
+}