rspress-plugin-file-tree 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,19 @@
+# rspress-plugin-file-tree
+
+## 0.1.1
+
+### Patch Changes
+
+- 546dcf0: release beta
+- 5e28903: fixup publish config
+- Updated dependencies [546dcf0]
+- Updated dependencies [5e28903]
+  - rspress-plugin-devkit@0.1.1
+
+## 0.1.1-beta.0
+
+### Patch Changes
+
+- 546dcf0: release beta
+- Updated dependencies [546dcf0]
+  - rspress-plugin-devkit@0.1.1-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Linbudu
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,84 @@
+# rspress-plugin-file-tree
+
+Rspress plugin that add file tree view support.
+
+Write tree view using code block with language `tree`:
+
+````markdown
+```tree
+.
+├── rspress.config.ts
+├── src
+│   ├── components
+│   │   ├── FileTreeRender.tsx
+│   │   ├── Tree
+│   │   │   ├── Expand.tsx
+│   │   │   ├── FileIcon.tsx
+│   │   │   ├── Tree.tsx
+│   │   │   ├── TreeContext.tsx
+│   │   │   ├── TreeFile.tsx
+│   │   │   ├── TreeFolder.tsx
+│   │   │   ├── TreeFolderIcon.tsx
+│   │   │   ├── TreeIndents.tsx
+│   │   │   ├── TreeStatusIcon.tsx
+│   │   │   ├── index.less
+│   │   │   └── index.tsx
+│   │   ├── helpers.ts
+│   │   └── presets.ts
+│   ├── index.ts
+│   └── parser.ts
+└── tsconfig.json
+```
+````
+
+And it will be rendered as:
+
+<div align="center">
+  <img src="./image.png" alt="sample" width="400" height="300" />
+</div>
+
+> [!NOTE]
+>
+> **The renderer component was forked from [Geist UI](https://geist-ui.dev/) which created by [witt](https://github.com/unix), huge thanks to his great work!**
+
+## Usage
+
+```bash
+npm i rspress-plugin-file-tree
+pnpm add rspress-plugin-file-tree
+```
+
+```ts
+import * as path from 'path';
+import { defineConfig } from 'rspress/config';
+import fileTree from 'rspress-plugin-file-tree';
+
+export default defineConfig({
+  root: path.join(__dirname, 'docs'),
+  plugins: [fileTree()],
+});
+```
+
+## Configure
+
+## initialExpandDepth
+
+Initial expand depth of the tree view.
+
+- Type: `number`
+- Default: `0`
+
+```ts
+import * as path from 'path';
+import { defineConfig } from 'rspress/config';
+import fileTree from 'rspress-plugin-file-tree';
+
+export default defineConfig({
+  root: path.join(__dirname, 'docs'),
+  plugins: [
+    fileTree({
+      initialExpandDepth: Infinity,
+    }),
+  ],
+});
+```

package/dist/components/Tree/Expand.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type ShapeType = {
+    width: number;
+    height: number;
+};
+export declare const getRealShape: (el: HTMLElement | null) => ShapeType;
+export type ShapeResult = [ShapeType, () => void];
+export type ExpandProps = {
+    isExpanded?: boolean;
+    delay?: number;
+    parentExpanded?: boolean[];
+};
+declare const Expand: React.FC<React.PropsWithChildren<ExpandProps>>;
+export default Expand;

package/dist/components/Tree/Expand.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+export const getRealShape = (el) => {
+    const defaultShape = { width: 0, height: 0 };
+    if (!el || typeof window === 'undefined')
+        return defaultShape;
+    const rect = el.getBoundingClientRect();
+    const { width, height } = window.getComputedStyle(el);
+    const getCSSStyleVal = (str, parentNum) => {
+        if (!str)
+            return 0;
+        const strVal = str.includes('px')
+            ? +str.split('px')[0]
+            : str.includes('%')
+                ? +str.split('%')[0] * parentNum * 0.01
+                : str;
+        return Number.isNaN(+strVal) ? 0 : +strVal;
+    };
+    return {
+        width: getCSSStyleVal(`${width}`, rect.width),
+        height: getCSSStyleVal(`${height}`, rect.height),
+    };
+};
+const useRealShape = (ref) => {
+    const [state, setState] = useState({
+        width: 0,
+        height: 0,
+    });
+    const update = () => {
+        const { width, height } = getRealShape(ref.current);
+        setState({ width, height });
+    };
+    useEffect(() => update(), [ref.current]);
+    return [state, update];
+};
+const defaultProps = {
+    isExpanded: false,
+    delay: 200,
+};
+const Expand = ({ isExpanded, delay, parentExpanded = [], children, }) => {
+    const [height, setHeight] = useState(isExpanded ? 'auto' : '0');
+    const [selfExpanded, setSelfExpanded] = useState(isExpanded);
+    const [visible, setVisible] = useState(isExpanded);
+    const contentRef = useRef(null);
+    const entryTimer = useRef();
+    const leaveTimer = useRef();
+    const resetTimer = useRef();
+    const [state, updateShape] = useRealShape(contentRef);
+    const [parentClosed, setParentClosed] = useState(false);
+    useEffect(() => setHeight(`${state.height}px`), [state.height]);
+    useEffect(() => {
+        // show element or reset height.
+        // force an update once manually, even if the element does not change.
+        // (the height of the element might be "auto")
+        if (isExpanded) {
+            setVisible(isExpanded);
+        }
+        else {
+            updateShape();
+            setHeight(`${state.height}px`);
+        }
+        // show expand animation
+        entryTimer.current = window.setTimeout(() => {
+            setSelfExpanded(isExpanded);
+            clearTimeout(entryTimer.current);
+        }, 30);
+        // Reset height after animation
+        if (isExpanded) {
+            resetTimer.current = window.setTimeout(() => {
+                setHeight('auto');
+                clearTimeout(resetTimer.current);
+            }, delay);
+        }
+        else {
+            leaveTimer.current = window.setTimeout(() => {
+                setVisible(isExpanded);
+                clearTimeout(leaveTimer.current);
+            }, delay / 2);
+        }
+        return () => {
+            clearTimeout(entryTimer.current);
+            clearTimeout(leaveTimer.current);
+            clearTimeout(resetTimer.current);
+        };
+    }, [isExpanded]);
+    useEffect(() => {
+        const parentClosed = parentExpanded.some((i) => i === false);
+        setParentClosed(parentClosed);
+    }, [parentExpanded]);
+    return (_jsx("div", { className: clsx('rspress-file-tree-expand-container', {
+            'rspress-file-tree-expand-container-expanded': isExpanded,
+        }), style: {
+            height: 0,
+            visibility: visible && !parentClosed ? 'visible' : 'hidden',
+            transition: `height ${delay}ms ease`,
+            ...(selfExpanded
+                ? { height, visibility: parentClosed ? 'hidden' : 'visible' }
+                : {}),
+        }, children: _jsx("div", { ref: contentRef, className: clsx('rspress-file-tree-expand-content'), children: children }) }));
+};
+Expand.defaultProps = defaultProps;
+Expand.displayName = 'GeistExpand';
+export default Expand;

package/dist/components/Tree/FileIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface TreeFileIconProps {
+    color?: string;
+    width?: number;
+    height?: number;
+}
+declare const TreeFileIcon: React.FC<TreeFileIconProps>;
+export default TreeFileIcon;

package/dist/components/Tree/FileIcon.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { buildClassName } from '../presets';
+const defaultProps = {
+    width: 22,
+    height: 22,
+};
+const TreeFileIcon = ({ color, width, height, }) => {
+    return (_jsxs("svg", { className: buildClassName('file-icon'), viewBox: "0 0 24 24", width: width, height: height, stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", shapeRendering: "geometricPrecision", children: [_jsx("path", { d: "M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z" }), _jsx("path", { d: "M13 2v7h7" })] }));
+};
+TreeFileIcon.defaultProps = defaultProps;
+TreeFileIcon.displayName = 'GeistTreeFileIcon';
+export default TreeFileIcon;

package/dist/components/Tree/FileTreeRender.d.ts

@@ -0,0 +1,11 @@
+import Tree from './Tree';
+import TreeFile from './TreeFile';
+import TreeFolder from './TreeFolder';
+import './index.less';
+export type TreeComponentType = typeof Tree & {
+    File: typeof TreeFile;
+    Folder: typeof TreeFolder;
+};
+export type { TreeProps, TreeFile } from './Tree';
+declare const _default: TreeComponentType;
+export default _default;

package/dist/components/Tree/FileTreeRender.js

@@ -0,0 +1,7 @@
+import Tree from './Tree';
+import TreeFile from './TreeFile';
+import TreeFolder from './TreeFolder';
+import './index.less';
+Tree.File = TreeFile;
+Tree.Folder = TreeFolder;
+export default Tree;

package/dist/components/Tree/Tree.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+export declare const tuple: <T extends string[]>(...args: T) => T;
+declare const FileTreeValueType: ["directory", "file"];
+export type TreeFile = {
+    type: (typeof FileTreeValueType)[number];
+    name: string;
+    extra?: string;
+    files?: Array<TreeFile>;
+};
+interface Props {
+    tree?: TreeFile[];
+    initialExpand?: boolean;
+    onClick?: (path: string) => void;
+    className?: string;
+    initialExpandDepth?: number;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type TreeProps = Props & NativeAttrs;
+declare const Tree: React.FC<React.PropsWithChildren<TreeProps>>;
+export default Tree;

package/dist/components/Tree/Tree.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import TreeFile from './TreeFile';
+import TreeFolder from './TreeFolder';
+import { TreeContext } from './TreeContext';
+import { sortChildren } from '../helpers';
+import { buildClassName } from '../presets';
+import { useDark } from 'rspress/runtime';
+export const tuple = (...args) => args;
+const FileTreeValueType = tuple('directory', 'file');
+const directoryType = FileTreeValueType[0];
+const defaultProps = {
+    initialExpand: false,
+    className: '',
+};
+const makeChildren = (value = []) => {
+    if (!value || !value.length)
+        return null;
+    return value
+        .sort((a, b) => {
+        if (a.type !== b.type)
+            return a.type !== directoryType ? 1 : -1;
+        return `${a.name}`.charCodeAt(0) - `${b.name}`.charCodeAt(0);
+    })
+        .map((item, index) => {
+        if (item.type === directoryType)
+            return (_jsx(TreeFolder, { name: item.name, extra: item.extra, parentExpanded: [], children: makeChildren(item.files) }, `folder-${item.name}-${index}`));
+        return (_jsx(TreeFile, { name: item.name, extra: item.extra, parentExpanded: [] }, `file-${item.name}-${index}`));
+    });
+};
+const Tree = ({ children, onClick, initialExpand, initialExpandDepth, tree, className, ...props }) => {
+    if (!tree)
+        return null;
+    const isImperative = Boolean(tree.length > 0);
+    const onFileClick = (path) => {
+        onClick && onClick(path);
+    };
+    const initialValue = useMemo(() => ({
+        onFileClick,
+        initialExpand,
+        initialExpandDepth,
+        isImperative,
+    }), [initialExpand]);
+    const customChildren = isImperative
+        ? makeChildren(tree)
+        : sortChildren(children, TreeFolder);
+    const dark = useDark();
+    return (_jsx(TreeContext.Provider, { value: initialValue, children: _jsx("div", { "data-dark": String(dark), className: buildClassName(), ...props, children: customChildren }) }));
+};
+Tree.defaultProps = defaultProps;
+Tree.displayName = 'GeistTree';
+export default Tree;

package/dist/components/Tree/TreeContext.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface TreeConfig {
+    onFileClick?: (path: string) => void;
+    initialExpand: boolean;
+    initialExpandDepth?: number;
+    isImperative: boolean;
+}
+export declare const TreeContext: React.Context<TreeConfig>;
+export declare const useTreeContext: () => TreeConfig;

package/dist/components/Tree/TreeContext.js

@@ -0,0 +1,7 @@
+import React from 'react';
+const defaultContext = {
+    initialExpand: false,
+    isImperative: false,
+};
+export const TreeContext = React.createContext(defaultContext);
+export const useTreeContext = () => React.useContext(TreeContext);

package/dist/components/Tree/TreeFile.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface Props {
+    name: string;
+    extra?: string;
+    parentPath?: string;
+    level?: number;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type TreeFileProps = Props & NativeAttrs & {
+    parentExpanded: boolean[];
+};
+declare const TreeFile: React.FC<React.PropsWithChildren<TreeFileProps>>;
+export default TreeFile;

package/dist/components/Tree/TreeFile.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import TreeFileIcon from './FileIcon';
+import { useTreeContext } from './TreeContext';
+import TreeIndents from './TreeIndents';
+import { makeChildPath, stopPropagation } from '../helpers';
+import { buildClassName } from '../presets';
+const defaultProps = {
+    level: 0,
+    className: '',
+    parentPath: '',
+};
+const TreeFile = ({ name, parentPath, level, extra, className, parentExpanded, ...props }) => {
+    const { onFileClick } = useTreeContext();
+    const currentPath = useMemo(() => makeChildPath(name, parentPath), []);
+    const clickHandler = (event) => {
+        stopPropagation(event);
+        onFileClick && onFileClick(currentPath);
+    };
+    return (_jsx("div", { className: buildClassName('file'), onClick: clickHandler, ...props, children: _jsxs("div", { className: buildClassName('file-names'), style: {
+                marginLeft: `calc(1.875rem * ${level})`,
+            }, children: [_jsx(TreeIndents, { count: level }), _jsx("span", { className: buildClassName('file-icon'), children: _jsx(TreeFileIcon, {}) }), _jsxs("span", { className: buildClassName('file-name'), children: [name, extra && (_jsx("span", { className: buildClassName('file-extra'), children: extra }))] })] }) }));
+};
+TreeFile.defaultProps = defaultProps;
+TreeFile.displayName = 'GeistTreeFile';
+export default TreeFile;

package/dist/components/Tree/TreeFolder.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+interface Props {
+    name: string;
+    extra?: string;
+    parentPath?: string;
+    level?: number;
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type TreeFolderProps = Props & NativeAttrs & {
+    parentExpanded: boolean[];
+};
+declare const TreeFolder: React.FC<React.PropsWithChildren<TreeFolderProps>>;
+export default TreeFolder;

package/dist/components/Tree/TreeFolder.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import TreeFile from './TreeFile';
+import Expand from './Expand';
+import TreeIndents from './TreeIndents';
+import { useTreeContext } from './TreeContext';
+import TreeFolderIcon from './TreeFolderIcon';
+import TreeStatusIcon from './TreeStatusIcon';
+import { sortChildren, makeChildPath, stopPropagation, setChildrenProps, } from '../helpers';
+import { buildClassName } from '../presets';
+const defaultProps = {
+    level: 0,
+    className: '',
+    parentPath: '',
+};
+const TreeFolder = ({ name, children, parentPath, level: parentLevel, extra, className, parentExpanded = [], ...props }) => {
+    const { initialExpand, isImperative, initialExpandDepth = 0, } = useTreeContext();
+    const [expanded, setExpanded] = useState(() => {
+        return parentLevel + 1 <= initialExpandDepth;
+    });
+    const currentPath = useMemo(() => makeChildPath(name, parentPath), []);
+    const clickHandler = () => setExpanded(!expanded);
+    const nextChildren = setChildrenProps(children, {
+        parentPath: currentPath,
+        level: parentLevel + 1,
+        parentExpanded: [...parentExpanded, expanded],
+    }, [TreeFolder, TreeFile]);
+    const sortedChildren = isImperative
+        ? nextChildren
+        : sortChildren(nextChildren, TreeFolder);
+    return (_jsxs("div", { className: buildClassName('folder'), onClick: clickHandler, ...props, children: [_jsxs("div", { className: buildClassName('folder-names'), style: {
+                    marginLeft: `calc(1.875rem * ${parentLevel})`,
+                }, children: [_jsx(TreeIndents, { count: parentLevel }), _jsx("span", { className: buildClassName('folder-status'), children: _jsx(TreeStatusIcon, { active: expanded }) }), _jsx("span", { className: buildClassName('folder-icon'), children: _jsx(TreeFolderIcon, {}) }), _jsxs("span", { className: buildClassName('folder-name'), children: [name, extra && (_jsx("span", { className: buildClassName('folder-extra'), children: extra }))] })] }), _jsx(Expand, { isExpanded: expanded, parentExpanded: parentExpanded, children: _jsx("div", { className: buildClassName('folder-content'), onClick: stopPropagation, children: sortedChildren }) })] }));
+};
+TreeFolder.defaultProps = defaultProps;
+TreeFolder.displayName = 'GeistTreeFolder';
+export default TreeFolder;

package/dist/components/Tree/TreeFolderIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface TreeFolderIconProps {
+    color?: string;
+    width?: number;
+    height?: number;
+}
+declare const TreeFolderIcon: React.FC<TreeFolderIconProps>;
+export default TreeFolderIcon;

package/dist/components/Tree/TreeFolderIcon.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { buildClassName } from '../presets';
+const defaultProps = {
+    width: 22,
+    height: 22,
+};
+const TreeFolderIcon = ({ color, width, height, }) => {
+    return (_jsx("svg", { className: buildClassName('folder-icon'), viewBox: "0 0 24 24", width: width, height: height, stroke: "currentColor", strokeWidth: "1", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", shapeRendering: "geometricPrecision", children: _jsx("path", { d: "M2.707 7.454V5.62C2.707 4.725 3.469 4 4.409 4h4.843c.451 0 .884.17 1.204.474l.49.467c.126.12.296.186.473.186h8.399c.94 0 1.55.695 1.55 1.59v.737m-18.661 0h-.354a.344.344 0 00-.353.35l.508 11.587c.015.34.31.609.668.609h17.283c.358 0 .652-.269.667-.61L22 7.805a.344.344 0 00-.353-.35h-.278m-18.662 0h18.662" }) }));
+};
+TreeFolderIcon.defaultProps = defaultProps;
+TreeFolderIcon.displayName = 'GeistTreeFolderIcon';
+export default TreeFolderIcon;

package/dist/components/Tree/TreeIndents.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface Props {
+    count: number;
+}
+declare const TreeIndents: React.FC<Props>;
+export default TreeIndents;

package/dist/components/Tree/TreeIndents.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { buildClassName } from '../presets';
+const TreeIndents = ({ count }) => {
+    if (count === 0)
+        return null;
+    return (_jsx(_Fragment, { children: [...new Array(count)].map((_, index) => (_jsx("span", { className: buildClassName('indent'), style: {
+                left: `calc(-1.875rem * ${index + 1} + 0.75rem)`,
+            } }, `indent-${index}`))) }));
+};
+export default TreeIndents;

package/dist/components/Tree/TreeStatusIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface TreeStatusIconProps {
+    color?: string;
+    width?: number;
+    height?: number;
+    active?: boolean;
+}
+declare const TreeStatusIcon: React.FC<TreeStatusIconProps>;
+export default TreeStatusIcon;

package/dist/components/Tree/TreeStatusIcon.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { buildClassName } from '../presets';
+const defaultProps = {
+    width: 12,
+    height: 12,
+    active: false,
+};
+const TreeStatusIcon = ({ color, width, height, active, }) => {
+    return (_jsxs("svg", { className: buildClassName('folder-status-icon'), viewBox: "0 0 24 24", width: width, height: height, stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", fill: "none", shapeRendering: "geometricPrecision", children: [_jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }), !active && _jsx("path", { d: "M12 8v8" }), _jsx("path", { d: "M8 12h8" })] }));
+};
+TreeStatusIcon.defaultProps = defaultProps;
+TreeStatusIcon.displayName = 'GeistTreeStatusIcon';
+export default TreeStatusIcon;

package/dist/components/helpers.d.ts

@@ -0,0 +1,5 @@
+import React, { type ReactNode } from 'react';
+export declare const sortChildren: (children: ReactNode | undefined, folderComponentType: React.ElementType) => (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal)[];
+export declare const makeChildPath: (name: string, parentPath?: string) => string;
+export declare const stopPropagation: (event: React.MouseEvent) => void;
+export declare const setChildrenProps: (children: ReactNode | undefined, props: Record<string, unknown>, targetComponents?: Array<React.ElementType>) => ReactNode | undefined;

package/dist/components/helpers.js

@@ -0,0 +1,35 @@
+import React from 'react';
+export const sortChildren = (children, folderComponentType) => {
+    return React.Children.toArray(children).sort((a, b) => {
+        if (!React.isValidElement(a) || !React.isValidElement(b))
+            return 0;
+        if (a.type !== b.type)
+            return a.type !== folderComponentType ? 1 : -1;
+        return `${a.props.name}`.charCodeAt(0) - `${b.props.name}`.charCodeAt(0);
+    });
+};
+export const makeChildPath = (name, parentPath) => {
+    if (!parentPath)
+        return name;
+    return `${parentPath}/${name}`;
+};
+export const stopPropagation = (event) => {
+    event.stopPropagation();
+    event.nativeEvent.stopImmediatePropagation();
+};
+export const setChildrenProps = (children, props, targetComponents = []) => {
+    if (React.Children.count(children) === 0)
+        return [];
+    const allowAll = targetComponents.length === 0;
+    const clone = (child, props = {}) => React.cloneElement(child, props);
+    return React.Children.map(children, (item) => {
+        if (!React.isValidElement(item))
+            return item;
+        if (allowAll)
+            return clone(item, props);
+        const isAllowed = targetComponents.find((child) => child === item.type);
+        if (isAllowed)
+            return clone(item, props);
+        return item;
+    });
+};

package/dist/components/presets.d.ts

@@ -0,0 +1,2 @@
+export declare const presetClassName = "rp-file-tree";
+export declare function buildClassName(fragment?: string): string;

package/dist/components/presets.js

@@ -0,0 +1,4 @@
+export const presetClassName = 'rp-file-tree';
+export function buildClassName(fragment) {
+    return (fragment === null || fragment === void 0 ? void 0 : fragment.length) ? `${presetClassName}-${fragment}` : presetClassName;
+}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+import type { RspressPlugin } from '@rspress/shared';
+interface RspressPluginFileTreeOptions {
+    initialExpandDepth?: number;
+}
+export default function rspressPluginFileTree(options?: RspressPluginFileTreeOptions): RspressPlugin;
+export {};

package/dist/index.js

@@ -0,0 +1,31 @@
+import path from 'node:path';
+import { PresetConfigMutator, RemarkCodeBlockToGlobalComponentPluginFactory, } from 'rspress-plugin-devkit';
+import { parseInput } from './parser';
+export default function rspressPluginFileTree(options = {}) {
+    const { initialExpandDepth = 0 } = options;
+    const remarkFileTree = new RemarkCodeBlockToGlobalComponentPluginFactory({
+        components: [
+            {
+                lang: 'tree',
+                componentPath: path.join(__dirname, './components/Tree/FileTreeRender.tsx'),
+                propsProvider(code) {
+                    return {
+                        tree: parseInput(code),
+                        initialExpandDepth,
+                    };
+                },
+            },
+        ],
+    });
+    return {
+        name: 'rspress-plugin-file-tree',
+        config(config) {
+            return new PresetConfigMutator(config).disableMdxRs().toConfig();
+        },
+        markdown: {
+            remarkPlugins: [remarkFileTree.remarkPlugin],
+            globalComponents: remarkFileTree.mdxComponents,
+        },
+        builderConfig: remarkFileTree.builderConfig,
+    };
+}

package/dist/parser.d.ts

@@ -0,0 +1,7 @@
+type TreeItem = {
+    type: 'file' | 'directory';
+    name: string;
+    files?: TreeItem[];
+};
+export declare function parseInput(input: string): TreeItem[];
+export {};