rspress-plugin-file-tree 0.4.0 → 1.0.1

package/dist/index.js

@@ -1,31 +1,99 @@
-import path from 'node:path';
-import { PresetConfigMutator, RemarkCodeBlockToGlobalComponentPluginFactory, } from 'rspress-plugin-devkit';
-import { parseInput } from './parser';
-export default function rspressPluginFileTree(options = {}) {
+import node_path from "node:path";
+import { RemarkCodeBlockToGlobalComponentPluginFactory } from "rspress-plugin-devkit";
+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] : '';
+}
+const PACKAGE_ROOT = node_path.resolve(__dirname, '../');
+function rspressPluginFileTree(options = {}) {
     const { initialExpandDepth = 0 } = options;
     const remarkFileTree = new RemarkCodeBlockToGlobalComponentPluginFactory({
         components: [
             {
                 lang: 'tree',
-                componentPath: path.join(__dirname, '../components/Tree/FileTreeRender.tsx'),
-                propsProvider(code) {
+                componentPath: node_path.join(PACKAGE_ROOT, 'dist/components/FileTree/FileTree'),
+                propsProvider (code) {
                     return {
-                        tree: parseInput(code),
-                        initialExpandDepth,
+                        nodes: parseTreeContent(code).nodes,
+                        initialExpandDepth
                     };
-                },
-            },
-        ],
+                }
+            }
+        ]
     });
     return {
         name: 'rspress-plugin-file-tree',
-        config(config) {
-            return new PresetConfigMutator(config).disableMdxRs().toConfig();
-        },
         markdown: {
-            remarkPlugins: [remarkFileTree.remarkPlugin],
-            globalComponents: remarkFileTree.mdxComponents,
+            remarkPlugins: [
+                remarkFileTree.remarkPlugin
+            ],
+            globalComponents: remarkFileTree.mdxComponents
         },
-        builderConfig: remarkFileTree.builderConfig,
+        globalStyles: node_path.join(PACKAGE_ROOT, 'dist/components/FileTree/FileTree.css'),
+        builderConfig: remarkFileTree.builderConfig
     };
 }
+export default rspressPluginFileTree;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "rspress-plugin-file-tree",
-  "version": "0.4.0",
+  "version": "1.0.1",
   "description": "Rspress plugin that add support for file tree component.",
   "files": [
-    "dist",
-    "components"
+    "dist"
   ],
+  "type": "module",
   "keywords": [
     "rspress",
     "plugin",
@@ -28,20 +28,23 @@
     "access": "public"
   },
   "dependencies": {
-    "@rspress/shared": "^1.17.1",
-    "rspress-plugin-devkit": "^0.3.0"
+    "rspress-plugin-devkit": "^1.0.0"
   },
   "devDependencies": {
+    "@rsbuild/plugin-less": "^1.2.1",
+    "@rsbuild/plugin-react": "^1.1.1",
+    "@rslib/core": "^0.19.1",
     "@types/node": "^20.12.5",
     "@types/react": "^18.2.74",
+    "material-icon-theme": "^5.30.0",
     "typescript": "^5.4.4"
   },
   "peerDependencies": {
-    "rspress": "*"
+    "@rspress/core": "^2.0.0-rc.4 || ^2.0.0"
   },
   "scripts": {
-    "build": "tsc --declarationMap false",
-    "dev": "tsc -w",
+    "build": "rslib build",
+    "dev": "rslib build -w",
     "docs:build": "rspress build",
     "docs:dev": "rspress dev"
   }

package/components/Tree/Expand.tsx

@@ -1,149 +0,0 @@
-import React, { useEffect, useRef, useState, MutableRefObject } from 'react';
-import clsx from 'clsx';
-
-export type ShapeType = {
-  width: number;
-  height: number;
-};
-
-export const getRealShape = (el: HTMLElement | null): ShapeType => {
-  const defaultShape: ShapeType = { width: 0, height: 0 };
-  if (!el || typeof window === 'undefined') return defaultShape;
-
-  const rect = el.getBoundingClientRect();
-  const { width, height } = window.getComputedStyle(el);
-
-  const getCSSStyleVal = (str: string, parentNum: number) => {
-    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),
-  };
-};
-
-export type ShapeResult = [ShapeType, () => void];
-
-const useRealShape = <T extends HTMLElement>(
-  ref: MutableRefObject<T | null>,
-): ShapeResult => {
-  const [state, setState] = useState<ShapeType>({
-    width: 0,
-    height: 0,
-  });
-  const update = () => {
-    const { width, height } = getRealShape(ref.current);
-    setState({ width, height });
-  };
-  useEffect(() => update(), [ref.current]);
-
-  return [state, update];
-};
-
-export type ExpandProps = {
-  isExpanded?: boolean;
-  delay?: number;
-  parentExpanded?: boolean[];
-};
-
-const defaultProps = {
-  isExpanded: false,
-  delay: 200,
-};
-
-const Expand: React.FC<React.PropsWithChildren<ExpandProps>> = ({
-  isExpanded,
-  delay,
-  parentExpanded = [],
-  children,
-}: React.PropsWithChildren<ExpandProps> & typeof defaultProps) => {
-  const [height, setHeight] = useState<string>(isExpanded ? 'auto' : '0');
-  const [selfExpanded, setSelfExpanded] = useState<boolean>(isExpanded);
-  const [visible, setVisible] = useState<boolean>(isExpanded);
-  const contentRef = useRef<HTMLDivElement>(null);
-  const entryTimer = useRef<number>();
-  const leaveTimer = useRef<number>();
-  const resetTimer = useRef<number>();
-  const [state, updateShape] = useRealShape<HTMLDivElement>(contentRef);
-
-  const [parentClosed, setParentClosed] = useState<boolean>(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 (
-    <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' }
-          : {}),
-      }}
-    >
-      <div
-        ref={contentRef}
-        className={clsx('rspress-file-tree-expand-content')}
-      >
-        {children}
-      </div>
-    </div>
-  );
-};
-
-Expand.defaultProps = defaultProps;
-Expand.displayName = 'GeistExpand';
-export default Expand;

package/components/Tree/FileIcon.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import { buildClassName } from '../presets';
-
-export interface TreeFileIconProps {
-  color?: string;
-  width?: number;
-  height?: number;
-}
-
-const defaultProps = {
-  width: 22,
-  height: 22,
-};
-
-const TreeFileIcon: React.FC<TreeFileIconProps> = ({
-  color,
-  width,
-  height,
-}: TreeFileIconProps & typeof defaultProps) => {
-  return (
-    <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"
-    >
-      <path d="M13 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V9z" />
-      <path d="M13 2v7h7" />
-    </svg>
-  );
-};
-
-TreeFileIcon.defaultProps = defaultProps;
-TreeFileIcon.displayName = 'GeistTreeFileIcon';
-export default TreeFileIcon;

package/components/Tree/FileTreeRender.tsx

@@ -1,16 +0,0 @@
-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;
-};
-
-(Tree as TreeComponentType).File = TreeFile;
-(Tree as TreeComponentType).Folder = TreeFolder;
-
-export type { TreeProps, TreeFile } from './Tree';
-export default Tree as TreeComponentType;

package/components/Tree/Tree.tsx

@@ -1,112 +0,0 @@
-import React, { 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 = <T extends string[]>(...args: T) => args;
-
-const FileTreeValueType = tuple('directory', 'file');
-
-const directoryType = FileTreeValueType[0];
-
-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;
-}
-
-const defaultProps = {
-  initialExpand: false,
-  className: '',
-};
-
-type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export type TreeProps = Props & NativeAttrs;
-
-const makeChildren = (value: Array<TreeFile> = []) => {
-  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 (
-          <TreeFolder
-            name={item.name}
-            extra={item.extra}
-            key={`folder-${item.name}-${index}`}
-            parentExpanded={[]}
-          >
-            {makeChildren(item.files)}
-          </TreeFolder>
-        );
-      return (
-        <TreeFile
-          name={item.name}
-          extra={item.extra}
-          key={`file-${item.name}-${index}`}
-          parentExpanded={[]}
-        />
-      );
-    });
-};
-
-const Tree: React.FC<React.PropsWithChildren<TreeProps>> = ({
-  children,
-  onClick,
-  initialExpand,
-  initialExpandDepth,
-  tree,
-  className,
-  ...props
-}: React.PropsWithChildren<TreeProps> & typeof defaultProps) => {
-  if (!tree) return null;
-
-  const isImperative = Boolean(tree.length > 0);
-  const onFileClick = (path: string) => {
-    onClick && onClick(path);
-  };
-
-  const initialValue = useMemo(
-    () => ({
-      onFileClick,
-      initialExpand,
-      initialExpandDepth,
-      isImperative,
-    }),
-    [initialExpand],
-  );
-
-  const customChildren = isImperative
-    ? makeChildren(tree)
-    : sortChildren(children, TreeFolder);
-
-  const dark = useDark();
-
-  return (
-    <TreeContext.Provider value={initialValue}>
-      <div data-dark={String(dark)} className={buildClassName()} {...props}>
-        {customChildren}
-      </div>
-    </TreeContext.Provider>
-  );
-};
-
-Tree.defaultProps = defaultProps;
-Tree.displayName = 'GeistTree';
-export default Tree;

package/components/Tree/TreeContext.tsx

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

package/components/Tree/TreeFile.tsx

@@ -1,69 +0,0 @@
-import React, { useMemo } from 'react';
-import TreeFileIcon from './FileIcon';
-import { useTreeContext } from './TreeContext';
-import TreeIndents from './TreeIndents';
-import { makeChildPath, stopPropagation } from '../helpers';
-import { buildClassName } from '../presets';
-
-interface Props {
-  name: string;
-  extra?: string;
-  parentPath?: string;
-  level?: number;
-  className?: string;
-}
-
-const defaultProps = {
-  level: 0,
-  className: '',
-  parentPath: '',
-};
-
-type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export type TreeFileProps = Props &
-  NativeAttrs & {
-    parentExpanded: boolean[];
-  };
-
-const TreeFile: React.FC<React.PropsWithChildren<TreeFileProps>> = ({
-  name,
-  parentPath,
-  level,
-  extra,
-  className,
-  parentExpanded,
-  ...props
-}: React.PropsWithChildren<TreeFileProps> & typeof defaultProps) => {
-  const { onFileClick } = useTreeContext();
-  const currentPath = useMemo(() => makeChildPath(name, parentPath), []);
-  const clickHandler = (event: React.MouseEvent) => {
-    stopPropagation(event);
-    onFileClick && onFileClick(currentPath);
-  };
-
-  return (
-    <div className={buildClassName('file')} onClick={clickHandler} {...props}>
-      <div
-        className={buildClassName('file-names')}
-        style={{
-          marginLeft: `calc(1.875rem * ${level})`,
-        }}
-      >
-        <TreeIndents count={level} />
-        <span className={buildClassName('file-icon')}>
-          <TreeFileIcon />
-        </span>
-        <span className={buildClassName('file-name')}>
-          {name}
-          {extra && (
-            <span className={buildClassName('file-extra')}>{extra}</span>
-          )}
-        </span>
-      </div>
-    </div>
-  );
-};
-
-TreeFile.defaultProps = defaultProps;
-TreeFile.displayName = 'GeistTreeFile';
-export default TreeFile;

package/components/Tree/TreeFolder.tsx

@@ -1,108 +0,0 @@
-import React, { useEffect, 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';
-
-interface Props {
-  name: string;
-  extra?: string;
-  parentPath?: string;
-  level?: number;
-  className?: string;
-}
-
-const defaultProps = {
-  level: 0,
-  className: '',
-  parentPath: '',
-};
-
-type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
-export type TreeFolderProps = Props &
-  NativeAttrs & {
-    parentExpanded: boolean[];
-  };
-
-const TreeFolder: React.FC<React.PropsWithChildren<TreeFolderProps>> = ({
-  name,
-  children,
-  parentPath,
-  level: parentLevel,
-  extra,
-  className,
-  parentExpanded = [],
-  ...props
-}: React.PropsWithChildren<TreeFolderProps> & typeof defaultProps) => {
-  const {
-    initialExpand,
-    isImperative,
-    initialExpandDepth = 0,
-  } = useTreeContext();
-  const [expanded, setExpanded] = useState<boolean>(() => {
-    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 (
-    <div className={buildClassName('folder')} onClick={clickHandler} {...props}>
-      <div
-        className={buildClassName('folder-names')}
-        style={{
-          marginLeft: `calc(1.875rem * ${parentLevel})`,
-        }}
-      >
-        <TreeIndents count={parentLevel} />
-        <span className={buildClassName('folder-status')}>
-          <TreeStatusIcon active={expanded} />
-        </span>
-        <span className={buildClassName('folder-icon')}>
-          <TreeFolderIcon />
-        </span>
-        <span className={buildClassName('folder-name')}>
-          {name}
-          {extra && (
-            <span className={buildClassName('folder-extra')}>{extra}</span>
-          )}
-        </span>
-      </div>
-      <Expand isExpanded={expanded} parentExpanded={parentExpanded}>
-        <div
-          className={buildClassName('folder-content')}
-          onClick={stopPropagation}
-        >
-          {sortedChildren}
-        </div>
-      </Expand>
-    </div>
-  );
-};
-
-TreeFolder.defaultProps = defaultProps;
-TreeFolder.displayName = 'GeistTreeFolder';
-export default TreeFolder;