vitepress-plugin-file-tree 0.1.1 → 0.3.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" };
@@ -7,17 +7,18 @@ const _hoisted_2$1 = {
 	key: 0,
 	class: "vp-file-tree-title"
 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "VPFileTree",
 	props: {
 		title: {},
 		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")
 			]);
 		};
@@ -35,7 +36,7 @@ const _hoisted_4 = {
 	key: 0,
 	class: "group"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	__name: "VPFileTreeNode",
 	props: {
 		type: {},

package/dist/client/ssr/index.js

@@ -1,8 +1,8 @@
-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
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _sfc_main = /*@__PURE__*/ defineComponent({
 	__name: "VPFileTree",
 	__ssrInlineRender: true,
 	props: {
@@ -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>`);
 		};
@@ -28,7 +29,7 @@ _sfc_main.setup = (props, ctx) => {
 };
 //#endregion
 //#region src/client/VPFileTreeNode.vue
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$1 = /*@__PURE__*/ defineComponent({
 	__name: "VPFileTreeNode",
 	__ssrInlineRender: true,
 	props: {

package/dist/node/index.d.ts

@@ -1,6 +1,9 @@
 import { PluginSimple } from "markdown-it";
 
-//#region src/node/fileTreePlugin.d.ts
+//#region src/node/plugin.d.ts
+declare const fileTree: (options?: unknown) => import("vitepress-tuck").VitepressPlugin;
+//#endregion
+//#region src/node/types.d.ts
 /**
  * File tree node structure
  *
@@ -24,24 +27,20 @@ interface FileTreeNode {
 interface FileTreeAttrs {
   title?: string;
 }
+//#endregion
+//#region src/node/fileTreeToCMDText.d.ts
 /**
- * Parse raw file tree content to node tree structure
+ * Convert file tree to command line text format
  *
- * 解析原始文件树内容为节点树结构
+ * 将文件树转换为命令行文本格式
  *
- * @param content - Raw file tree text content / 文件树的原始文本内容
- * @returns File tree node array / 文件树节点数组
+ * @param nodes - File tree nodes / 文件树节点
+ * @param prefix - Line prefix / 行前缀
+ * @returns CMD text / CMD 文本
  */
-declare function parseFileTreeRawContent(content: string): FileTreeNode[];
-/**
- * Parse single node info string, extract filename, comment, type, etc.
- *
- * 解析单个节点的 info 字符串，提取文件名、注释、类型等属性
- *
- * @param info - Node description string / 节点描述字符串
- * @returns File tree node props / 文件树节点属性
- */
-declare function parseFileTreeNodeInfo(info: string): Omit<FileTreeNode, 'children' | 'level'>;
+declare function fileTreeToCMDText(nodes: FileTreeNode[], prefix?: string): string;
+//#endregion
+//#region src/node/markdown.d.ts
 /**
  * @example
  * ```ts
@@ -58,7 +57,49 @@ declare function parseFileTreeNodeInfo(info: string): Omit<FileTreeNode, 'childr
  */
 declare const fileTreeMarkdownPlugin: PluginSimple;
 //#endregion
-//#region src/node/index.d.ts
-declare const _default: (option?: unknown) => import("vitepress-tuck").VitepressPlugin;
+//#region src/node/parseContentWithContainer.d.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 / 文件树节点数组
+ */
+declare function parseContentWithContainer(content: string): FileTreeNode[];
+//#endregion
+//#region src/node/parseContentWithFence.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.
+ *
+ * 解析单个节点的 info 字符串，提取文件名、注释、类型等属性
+ *
+ * @param info - Node description string / 节点描述字符串
+ * @returns File tree node props / 文件树节点属性
+ */
+declare function parseNodeInfo(info: string): Omit<FileTreeNode, 'children' | 'level'>;
 //#endregion
-export { type FileTreeAttrs, type FileTreeNode, _default as default, fileTreeMarkdownPlugin, parseFileTreeNodeInfo, parseFileTreeRawContent };
+export { FileTreeAttrs, FileTreeNode, fileTree as default, fileTree, fileTreeMarkdownPlugin, fileTreeToCMDText, parseContentWithContainer, parseContentWithFence, parseNodeInfo };

package/dist/node/index.js

@@ -1,40 +1,28 @@
 import { definePlugin } from "vitepress-tuck";
-import { removeTrailingSlash } from "@pengzhanbo/utils";
 import { createContainerSyntaxPlugin, stringifyAttrs } from "vitepress-plugin-toolkit";
-//#region src/node/fileTreePlugin.ts
+import { removeTrailingSlash } from "@pengzhanbo/utils";
+//#region src/node/fileTreeToCMDText.ts
 /**
-* Parse raw file tree content to node tree structure
+* Convert file tree to command line text format
 *
-* 解析原始文件树内容为节点树结构
+* 将文件树转换为命令行文本格式
 *
-* @param content - Raw file tree text content / 文件树的原始文本内容
-* @returns File tree node array / 文件树节点数组
+* @param nodes - File tree nodes / 文件树节点
+* @param prefix - Line prefix / 行前缀
+* @returns CMD text / CMD 文本
 */
-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);
+function fileTreeToCMDText(nodes, prefix = "") {
+	let content = prefix ? "" : ".\n";
+	for (let i = 0, l = nodes.length; i < l; i++) {
+		const { filename, children } = nodes[i];
+		content += `${prefix + (i === l - 1 ? "└── " : "├── ")}${filename}\n`;
+		const child = children.filter((n) => n.filename !== "…");
+		if (child.length) content += fileTreeToCMDText(child, prefix + (i === l - 1 ? "    " : "│   "));
 	}
-	return root.children;
+	return content;
 }
+//#endregion
+//#region src/node/parseNodeInfo.ts
 /**
 * Regex for focus marker
 *
@@ -49,7 +37,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,25 +76,108 @@ function parseFileTreeNodeInfo(info) {
 		diff
 	};
 }
+//#endregion
+//#region src/node/parseContentWithContainer.ts
 /**
-* Convert file tree to command line text format
+* Parse the content from the `::: file-tree` container into a node tree structure.
 *
-* 将文件树转换为命令行文本格式
+* 从 `::: file-tree` 容器中解析内容为节点树结构
 *
-* @param nodes - File tree nodes / 文件树节点
-* @param prefix - Line prefix / 行前缀
-* @returns CMD text / CMD 文本
+* @param content - Raw file tree text content / 文件树的原始文本内容
+* @returns File tree node array / 文件树节点数组
 */
-function fileTreeToCMDText(nodes, prefix = "") {
-	let content = prefix ? "" : ".\n";
-	for (let i = 0, l = nodes.length; i < l; i++) {
-		const { filename, children } = nodes[i];
-		content += `${prefix + (i === l - 1 ? "└── " : "├── ")}${filename}\n`;
-		const child = children.filter((n) => n.filename !== "…");
-		if (child.length) content += fileTreeToCMDText(child, prefix + (i === l - 1 ? "    " : "│   "));
+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 content;
+	return root.children;
 }
+//#endregion
+//#region src/node/parseContentWithFence.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/markdown.ts
 /**
 * @example
 * ```ts
@@ -150,18 +221,28 @@ ${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
-var node_default = definePlugin(() => ({
+//#region src/node/plugin.ts
+const fileTree = definePlugin(() => ({
 	name: "vitepress-plugin-file-tree",
 	client: { enhance: "enhanceAppWithFileTree" },
 	markdown: { config: (md) => {
@@ -173,4 +254,7 @@ var node_default = definePlugin(() => ({
 	}
 }));
 //#endregion
-export { node_default as default, fileTreeMarkdownPlugin, parseFileTreeNodeInfo, parseFileTreeRawContent };
+//#region src/node/index.ts
+var node_default = fileTree;
+//#endregion
+export { node_default as default, fileTree, fileTreeMarkdownPlugin, fileTreeToCMDText, parseContentWithContainer, parseContentWithFence, parseNodeInfo };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vitepress-plugin-file-tree",
   "type": "module",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "Render file tree structure in your VitePress site.",
   "author": "pengzhanbo <q942450674@outlook.com> (https://github.com/pengzhanbo/)",
   "license": "MIT",
@@ -35,8 +35,8 @@
   "dependencies": {
     "@pengzhanbo/utils": "^3.7.3",
     "@vueuse/core": "^14.3.0",
-    "vitepress-plugin-toolkit": "0.1.1",
-    "vitepress-tuck": "0.1.1"
+    "vitepress-plugin-toolkit": "0.3.0",
+    "vitepress-tuck": "0.3.0"
   },
   "publishConfig": {
     "access": "public",