refactor

Author: tlylt

README.md

@@ -1,3 +1,28 @@
 # Vue Tree
 
-A simple Vue component to beautify tree-like visualization.
+A simple Vue component to beautify tree-like visualization.
+
+Important note:
+User of this component must have `whitespace: 'preserve'` defined in the vue compilerOptions.
+
+vite.config.ts
+```ts
+  plugins: [vue(
+    {
+      template: {
+        compilerOptions: {
+          whitespace: "preserve",
+        },
+      }
+    }
+  )],
+```
+
+within ts/js
+```js
+const app = Vue.createApp({
+  compilerOptions: {
+    whitespace: 'preserve'
+  }
+})
+```

docs/api-examples.md

@@ -4,7 +4,7 @@ outline: deep
 
 <VueTree>
 C:/course/
-  textbook/
+textbook/
     index.md
     index.md
   reading.md
@@ -42,8 +42,9 @@ const { theme, page, frontmatter } = useData()
 
 <script setup>
 import { useData } from 'vitepress'
-import { VueTree } from '@tlylt/vue-tree'
-import '@tlylt/vue-tree/style.css'
+import { VueTree } from '../src/index'
+// import { VueTree } from '@tlylt/vue-tree'
+// import '@tlylt/vue-tree/style.css'
 
 const { site, theme, page, frontmatter } = useData()
 </script>

src/components/VueTree.vue

@@ -30,7 +30,7 @@ export default defineComponent({
             this.treeVisualized = this.treeRaw;
             this.treeVisualized = TreeNode.visualize(this.treeRaw);
         }
-    }
+    },
 });
 </script>
 

src/components/tree.ts

@@ -16,6 +16,7 @@ const TOKEN = {
   lastChild: '└── ',
   connector: '│   ',
   space: '    ',
+  newLine: '\n',
 };
 
 export class TreeNode {
@@ -74,7 +75,7 @@ export class TreeNode {
    * @return The dummy root node of the tree.
    */
   static parse(raw: string): TreeNode {
-    const lines = raw.split('\n').filter(line => line.trim() !== '');
+    const lines = raw.split(TOKEN.newLine).filter(line => line.trim() !== '');
     const rootNode = new TreeNode('.', null, [], -1); // dummy root node
     const prevParentStack = [rootNode];
     let prevLevel = rootNode.level;
@@ -113,10 +114,10 @@ export class TreeNode {
       return;
     }
     if (currNode.parent === null) {
-      result.push(`${currNode.content}\n`);
+      result.push(`${currNode.content}${TOKEN.newLine}`);
     } else {
       const tokens = [
-        '\n',
+        TOKEN.newLine,
         currNode.content,
         currNode.getPositionalToken(),
       ];