vitepress-plugin-file-tree 0.1.0 → 0.2.0

package/README.md

@@ -117,3 +117,24 @@ Use `::: file-tree` container to create a file tree.
 | `- …` or `- ...`       | Placeholder (non-clickable)              |
 
 Indentation uses 2 spaces per level. A copy button is included to copy the file tree as command-line style text.
+
+### Tree Fenced Code Syntax
+
+You can also use a fenced code block with the `tree` or `file-tree` language identifier,
+which accepts content in the format of the `tree` command-line tool output:
+
+````md
+```tree
+.
+├── src/
+│   ├── components/
+│   │   ├── Button.vue
+│   │   └── Input.vue
+│   └── index.ts
+├── package.json
+└── README.md
+```
+````
+
+The fenced code syntax supports the same node annotations as the container syntax
+(`**filename**`, `# comment`, `++/--`, trailing `/` for folders).

package/dist/client/browser/index.js

@@ -1,5 +1,5 @@
 import "../style.css";
-import { createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, vShow, withDirectives } from "vue";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, inject, mergeProps, normalizeClass, openBlock, ref, renderSlot, toDisplayString, unref, vShow, withDirectives } from "vue";
 import { VPCopyButton } from "vitepress-plugin-toolkit/client";
 //#region src/client/VPFileTree.vue
 const _hoisted_1$1 = { class: "vp-file-tree has-copy" };
@@ -14,10 +14,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		text: {}
 	},
 	setup(__props) {
+		const content = computed(() => decodeURIComponent(__props.text));
 		return (_ctx, _cache) => {
 			return openBlock(), createElementBlock("div", _hoisted_1$1, [
 				__props.title ? (openBlock(), createElementBlock("p", _hoisted_2$1, toDisplayString(__props.title), 1)) : createCommentVNode("v-if", true),
-				createVNode(unref(VPCopyButton), { text: __props.text }, null, 8, ["text"]),
+				createVNode(unref(VPCopyButton), { text: content.value }, null, 8, ["text"]),
 				renderSlot(_ctx.$slots, "default")
 			]);
 		};

package/dist/client/ssr/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, inject, mergeProps, ref, unref, useSSRContext } from "vue";
+import { computed, defineComponent, inject, mergeProps, ref, unref, useSSRContext } from "vue";
 import { ssrInterpolate, ssrRenderAttr, ssrRenderAttrs, ssrRenderClass, ssrRenderComponent, ssrRenderSlot, ssrRenderStyle } from "vue/server-renderer";
 import { VPCopyButton } from "vitepress-plugin-toolkit/client";
 //#region src/client/VPFileTree.vue
@@ -10,11 +10,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 		text: {}
 	},
 	setup(__props) {
+		const content = computed(() => decodeURIComponent(__props.text));
 		return (_ctx, _push, _parent, _attrs) => {
 			_push(`<div${ssrRenderAttrs(mergeProps({ class: "vp-file-tree has-copy" }, _attrs))}>`);
 			if (__props.title) _push(`<p class="vp-file-tree-title">${ssrInterpolate(__props.title)}</p>`);
 			else _push(`<!---->`);
-			_push(ssrRenderComponent(unref(VPCopyButton), { text: __props.text }, null, _parent));
+			_push(ssrRenderComponent(unref(VPCopyButton), { text: content.value }, null, _parent));
 			ssrRenderSlot(_ctx.$slots, "default", {}, null, _push, _parent);
 			_push(`</div>`);
 		};

package/dist/node/index.d.ts

@@ -1,6 +1,23 @@
 import { PluginSimple } from "markdown-it";
 
 //#region src/node/fileTreePlugin.d.ts
+/**
+ * @example
+ * ```ts
+ * import { fileTreeMarkdownPlugin } from 'vitepress-plugin-file-tree'
+ * import { defineConfig } from 'vitepress'
+ * export default defineConfig({
+ *   markdown: {
+ *     config: (md) => {
+ *       md.use(fileTreeMarkdownPlugin)
+ *     },
+ *   },
+ * })
+ * ```
+ */
+declare const fileTreeMarkdownPlugin: PluginSimple;
+//#endregion
+//#region src/node/types.d.ts
 /**
  * File tree node structure
  *
@@ -24,15 +41,52 @@ interface FileTreeNode {
 interface FileTreeAttrs {
   title?: string;
 }
+//#endregion
+//#region src/node/container.d.ts
 /**
- * Parse raw file tree content to node tree structure
+ * Parse the content from the `::: file-tree` container into a node tree structure.
  *
- * 解析原始文件树内容为节点树结构
+ * 从 `::: file-tree` 容器中解析内容为节点树结构
  *
  * @param content - Raw file tree text content / 文件树的原始文本内容
  * @returns File tree node array / 文件树节点数组
  */
-declare function parseFileTreeRawContent(content: string): FileTreeNode[];
+declare function parseContentWithContainer(content: string): FileTreeNode[];
+/**
+ * Convert file tree to command line text format
+ *
+ * 将文件树转换为命令行文本格式
+ *
+ * @param nodes - File tree nodes / 文件树节点
+ * @param prefix - Line prefix / 行前缀
+ * @returns CMD text / CMD 文本
+ */
+declare function fileTreeToCMDText(nodes: FileTreeNode[], prefix?: string): string;
+//#endregion
+//#region src/node/fence.d.ts
+/**
+ * Parse `tree` command output format into a structured file tree node array.
+ *
+ * Converts text like:
+ * ```
+ * .
+ * ├── src
+ * │   ├── index.ts
+ * │   └── utils.ts
+ * └── package.json  # project config
+ * ```
+ *
+ * into a `FileTreeNode[]` tree structure, with support for inline comments
+ * (text after `#`) on each entry.
+ *
+ * 将 `tree` 命令行输出格式解析为结构化的文件树节点数组
+ *
+ * @param content - Raw `tree` command output text / `tree` 命令输出的原始文本
+ * @returns Structured file tree node array / 结构化的文件树节点数组
+ */
+declare function parseContentWithFence(content: string): FileTreeNode[];
+//#endregion
+//#region src/node/parseNodeInfo.d.ts
 /**
  * Parse single node info string, extract filename, comment, type, etc.
  *
@@ -41,24 +95,9 @@ declare function parseFileTreeRawContent(content: string): FileTreeNode[];
  * @param info - Node description string / 节点描述字符串
  * @returns File tree node props / 文件树节点属性
  */
-declare function parseFileTreeNodeInfo(info: string): Omit<FileTreeNode, 'children' | 'level'>;
-/**
- * @example
- * ```ts
- * import { fileTreeMarkdownPlugin } from 'vitepress-plugin-file-tree'
- * import { defineConfig } from 'vitepress'
- * export default defineConfig({
- *   markdown: {
- *     config: (md) => {
- *       md.use(fileTreeMarkdownPlugin)
- *     },
- *   },
- * })
- * ```
- */
-declare const fileTreeMarkdownPlugin: PluginSimple;
+declare function parseNodeInfo(info: string): Omit<FileTreeNode, 'children' | 'level'>;
 //#endregion
 //#region src/node/index.d.ts
 declare const _default: (option?: unknown) => import("vitepress-tuck").VitepressPlugin;
 //#endregion
-export { type FileTreeAttrs, type FileTreeNode, _default as default, fileTreeMarkdownPlugin, parseFileTreeNodeInfo, parseFileTreeRawContent };
+export { FileTreeAttrs, FileTreeNode, _default as default, fileTreeMarkdownPlugin, fileTreeToCMDText, parseContentWithContainer, parseContentWithFence, parseNodeInfo };

package/dist/node/index.js

@@ -1,40 +1,7 @@
 import { definePlugin } from "vitepress-tuck";
-import { removeTrailingSlash } from "@pengzhanbo/utils";
 import { createContainerSyntaxPlugin, stringifyAttrs } from "vitepress-plugin-toolkit";
-//#region src/node/fileTreePlugin.ts
-/**
-* Parse raw file tree content to node tree structure
-*
-* 解析原始文件树内容为节点树结构
-*
-* @param content - Raw file tree text content / 文件树的原始文本内容
-* @returns File tree node array / 文件树节点数组
-*/
-function parseFileTreeRawContent(content) {
-	const root = {
-		level: -1,
-		children: []
-	};
-	const stack = [root];
-	const lines = content.trimEnd().split("\n");
-	const spaceLength = lines[0]?.match(/^\s*/)?.[0].length ?? 0;
-	for (const line of lines) {
-		const match = line.match(/^(\s*)-(.*)$/);
-		if (!match) continue;
-		const level = Math.floor((match[1].length - spaceLength) / 2);
-		const info = match[2].trim();
-		while (stack.length > 0 && stack[stack.length - 1].level >= level) stack.pop();
-		const parent = stack[stack.length - 1];
-		const node = {
-			level,
-			children: [],
-			...parseFileTreeNodeInfo(info)
-		};
-		parent.children.push(node);
-		stack.push(node);
-	}
-	return root.children;
-}
+import { removeTrailingSlash } from "@pengzhanbo/utils";
+//#region src/node/parseNodeInfo.ts
 /**
 * Regex for focus marker
 *
@@ -49,7 +16,7 @@ const RE_FOCUS = /^\*\*(.*)\*\*(?:$|\s+)/;
 * @param info - Node description string / 节点描述字符串
 * @returns File tree node props / 文件树节点属性
 */
-function parseFileTreeNodeInfo(info) {
+function parseNodeInfo(info) {
 	let filename = "";
 	let comment = "";
 	let focus = false;
@@ -88,6 +55,41 @@ function parseFileTreeNodeInfo(info) {
 		diff
 	};
 }
+//#endregion
+//#region src/node/container.ts
+/**
+* Parse the content from the `::: file-tree` container into a node tree structure.
+*
+* 从 `::: file-tree` 容器中解析内容为节点树结构
+*
+* @param content - Raw file tree text content / 文件树的原始文本内容
+* @returns File tree node array / 文件树节点数组
+*/
+function parseContentWithContainer(content) {
+	const root = {
+		level: -1,
+		children: []
+	};
+	const stack = [root];
+	const lines = content.trimEnd().split("\n");
+	const spaceLength = lines[0]?.match(/^\s*/)?.[0].length ?? 0;
+	for (const line of lines) {
+		const match = line.match(/^(\s*)-(.*)$/);
+		if (!match) continue;
+		const level = Math.floor((match[1].length - spaceLength) / 2);
+		const info = match[2].trim();
+		while (stack.length > 0 && stack[stack.length - 1].level >= level) stack.pop();
+		const parent = stack[stack.length - 1];
+		const node = {
+			level,
+			children: [],
+			...parseNodeInfo(info)
+		};
+		parent.children.push(node);
+		stack.push(node);
+	}
+	return root.children;
+}
 /**
 * Convert file tree to command line text format
 *
@@ -107,6 +109,73 @@ function fileTreeToCMDText(nodes, prefix = "") {
 	}
 	return content;
 }
+//#endregion
+//#region src/node/fence.ts
+/**
+* Regex for matching a single line of `tree` command output.
+*
+* Matches lines like:
+*   ├── filename
+*   │   ├── filename
+*   │   └── filename
+*   └── filename  # optional comment
+*
+* - Group 1: prefix segments, each is either `│   ` (has next sibling) or `    ` (last sibling)
+* - Group 2: branch marker, either `├── ` (non-last) or `└── ` (last)
+* - Group 3: the filename with optional comment
+*
+* 匹配 `tree` 命令输出的单行正则
+*/
+const TREE_LINE_RE = /^((?:│ {3}| {4})*)([├└]── )(.+)$/u;
+/**
+* Parse `tree` command output format into a structured file tree node array.
+*
+* Converts text like:
+* ```
+* .
+* ├── src
+* │   ├── index.ts
+* │   └── utils.ts
+* └── package.json  # project config
+* ```
+*
+* into a `FileTreeNode[]` tree structure, with support for inline comments
+* (text after `#`) on each entry.
+*
+* 将 `tree` 命令行输出格式解析为结构化的文件树节点数组
+*
+* @param content - Raw `tree` command output text / `tree` 命令输出的原始文本
+* @returns Structured file tree node array / 结构化的文件树节点数组
+*/
+function parseContentWithFence(content) {
+	const root = {
+		level: -1,
+		children: []
+	};
+	const stack = [root];
+	const lines = content.trimEnd().split("\n");
+	const start = lines[0]?.trim() === "." ? 1 : 0;
+	for (let i = start; i < lines.length; i++) {
+		const match = lines[i].match(TREE_LINE_RE);
+		if (!match) continue;
+		const prefix = match[1];
+		const info = match[3].trim();
+		const level = prefix.length / 4;
+		while (stack.length > 0 && stack[stack.length - 1].level >= level) stack.pop();
+		const parent = stack[stack.length - 1];
+		if (parent !== root && parent.type === "file") parent.type = "folder";
+		const node = {
+			level,
+			children: [],
+			...parseNodeInfo(info)
+		};
+		parent.children.push(node);
+		stack.push(node);
+	}
+	return root.children;
+}
+//#endregion
+//#region src/node/fileTreePlugin.ts
 /**
 * @example
 * ```ts
@@ -150,14 +219,24 @@ ${renderedComment}${children.length > 0 ? renderFileTree(children, meta) : ""}
 	}).join("\n");
 	createContainerSyntaxPlugin(md, "file-tree", (tokens, index) => {
 		const token = tokens[index];
-		const nodes = parseFileTreeRawContent(token.content);
+		const nodes = parseContentWithContainer(token.content);
 		const meta = token.meta;
-		const text = fileTreeToCMDText(nodes).trim();
+		const text = encodeURIComponent(fileTreeToCMDText(nodes).trim());
 		return `<VPFileTree${stringifyAttrs({
 			title: meta.title,
 			text
 		})}>${renderFileTree(nodes, meta)}</VPFileTree>`;
 	});
+	const rawFence = md.renderer.rules.fence;
+	md.renderer.rules.fence = (...args) => {
+		const [tokens, index] = args;
+		const token = tokens[index];
+		const info = token.info.trim();
+		if (!info.startsWith("file-tree") && !info.startsWith("tree")) return rawFence(...args);
+		const text = token.content.trim();
+		const nodes = parseContentWithFence(text);
+		return `<VPFileTree text="${encodeURIComponent(text)}">${renderFileTree(nodes, {})}</VPFileTree>`;
+	};
 };
 //#endregion
 //#region src/node/index.ts
@@ -173,4 +252,4 @@ var node_default = definePlugin(() => ({
 	}
 }));
 //#endregion
-export { node_default as default, fileTreeMarkdownPlugin, parseFileTreeNodeInfo, parseFileTreeRawContent };
+export { node_default as default, fileTreeMarkdownPlugin, fileTreeToCMDText, parseContentWithContainer, parseContentWithFence, parseNodeInfo };

package/package.json

@@ -1,10 +1,15 @@
 {
   "name": "vitepress-plugin-file-tree",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Render file tree structure in your VitePress site.",
   "author": "pengzhanbo <q942450674@outlook.com> (https://github.com/pengzhanbo/)",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pengzhanbo/vitepress-tuck.git",
+    "directory": "packages/plugin-file-tree"
+  },
   "keywords": [
     "vitepress",
     "vitepress-plugin",
@@ -30,11 +35,12 @@
   "dependencies": {
     "@pengzhanbo/utils": "^3.7.3",
     "@vueuse/core": "^14.3.0",
-    "vitepress-plugin-toolkit": "0.1.0",
-    "vitepress-tuck": "0.1.0"
+    "vitepress-plugin-toolkit": "0.2.0",
+    "vitepress-tuck": "0.2.0"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "provenance": true
   },
   "scripts": {
     "clean": "rimraf --glob ./dist",