支持当修改文档后自动重新编译生成vue组件

web/package-lock.json

@@ -24,6 +24,7 @@
         "@vue/cli-plugin-eslint": "^4.5.0",
         "@vue/cli-service": "^4.5.0",
         "babel-eslint": "^10.1.0",
+        "chokidar": "^3.5.3",
         "eslint": "^6.7.2",
         "eslint-plugin-vue": "^6.2.2",
         "less": "^3.12.2",
@@ -3524,7 +3525,6 @@
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
       "dev": true,
-      "optional": true,
       "engines": {
         "node": ">=8"
       }
@@ -4138,7 +4138,6 @@
           "url": "https://paulmillr.com/funding/"
         }
       ],
-      "optional": true,
       "dependencies": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -4160,7 +4159,6 @@
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
       "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
       "dev": true,
-      "optional": true,
       "dependencies": {
         "fill-range": "^7.0.1"
       },
@@ -4173,7 +4171,6 @@
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
       "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
       "dev": true,
-      "optional": true,
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -4186,7 +4183,6 @@
       "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
       "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "dev": true,
-      "optional": true,
       "dependencies": {
         "is-glob": "^4.0.1"
       },
@@ -4199,7 +4195,6 @@
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true,
-      "optional": true,
       "engines": {
         "node": ">=0.12.0"
       }
@@ -4209,7 +4204,6 @@
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
       "dev": true,
-      "optional": true,
       "dependencies": {
         "is-number": "^7.0.0"
       },
@@ -8606,7 +8600,6 @@
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
       "dev": true,
-      "optional": true,
       "dependencies": {
         "binary-extensions": "^2.0.0"
       },
@@ -12109,7 +12102,6 @@
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
       "dev": true,
-      "optional": true,
       "dependencies": {
         "picomatch": "^2.2.1"
       },
@@ -18943,8 +18935,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
       "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
-      "dev": true,
+      "dev": true
-      "optional": true
     },
     "bindings": {
       "version": "1.5.0",
@@ -19454,7 +19445,6 @@
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
       "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
       "dev": true,
-      "optional": true,
       "requires": {
         "anymatch": "~3.1.2",
         "braces": "~3.0.2",
@@ -19471,7 +19461,6 @@
           "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
           "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
           "dev": true,
-          "optional": true,
           "requires": {
             "fill-range": "^7.0.1"
           }
@@ -19481,7 +19470,6 @@
           "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
           "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
           "dev": true,
-          "optional": true,
           "requires": {
             "to-regex-range": "^5.0.1"
           }
@@ -19491,7 +19479,6 @@
           "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
           "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-glob": "^4.0.1"
           }
@@ -19500,15 +19487,13 @@
           "version": "7.0.0",
           "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
           "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-          "dev": true,
+          "dev": true
-          "optional": true
         },
         "to-regex-range": {
           "version": "5.0.1",
           "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
           "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
           "dev": true,
-          "optional": true,
           "requires": {
             "is-number": "^7.0.0"
           }
@@ -22941,7 +22926,6 @@
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
       "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
       "dev": true,
-      "optional": true,
       "requires": {
         "binary-extensions": "^2.0.0"
       }
@@ -25800,7 +25784,6 @@
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
       "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
       "dev": true,
-      "optional": true,
       "requires": {
         "picomatch": "^2.2.1"
       }

web/package.json

@@ -8,7 +8,8 @@
     "lint": "vue-cli-service lint",
     "buildLibrary": "vue-cli-service build --target lib --name simpleMindMap ../simple-mind-map/full.js --dest ../simple-mind-map/dist",
     "format": "prettier --write src/* src/*/* src/*/*/* src/*/*/*/*",
-    "buildDoc": "node ./scripts/buildDoc.js"
+    "buildDoc": "node ./scripts/buildDoc.js",
+    "autoBuildDoc": "node ./scripts/autoBuildDoc.js"
   },
   "dependencies": {
     "@toast-ui/editor": "^3.1.5",
@@ -27,6 +28,7 @@
     "@vue/cli-plugin-eslint": "^4.5.0",
     "@vue/cli-service": "^4.5.0",
     "babel-eslint": "^10.1.0",
+    "chokidar": "^3.5.3",
     "eslint": "^6.7.2",
     "eslint-plugin-vue": "^6.2.2",
     "less": "^3.12.2",

web/scripts/autoBuildDoc.js

@@ -0,0 +1,38 @@
+const chokidar = require('chokidar')
+const path = require('path')
+const fs = require('fs')
+const { exec } = require('node:child_process')
+const { transformMdToVue } = require('./transformMdToVue')
+
+const reBuildAll = () => {
+  exec(
+    'node ./buildDoc.js',
+    {
+      cwd: path.resolve(__dirname)
+    },
+    (error, msg) => {
+      console.log(error, msg)
+    }
+  )
+}
+
+const buildOne = file => {
+  let content = fs.readFileSync(file, 'utf-8')
+  let doc = transformMdToVue(content)
+  let destPath = path.join(path.dirname(file), './index.vue')
+  fs.writeFileSync(destPath, doc)
+}
+
+chokidar
+  .watch(path.join(__dirname, '../src/pages/Doc/'), {
+    ignoreInitial: true
+  })
+  .on('all', (event, file) => {
+    if (/\.md$/.test(file)) {
+      if (event === 'change') {
+        buildOne(file)
+      } else {
+        reBuildAll()
+      }
+    }
+  })

web/scripts/buildDoc.js

@@ -1,24 +1,7 @@
 // 编译文档
 const path = require('path')
 const fs = require('fs')
-const hljs = require('highlight.js')
+const { transformMdToVue } = require('./transformMdToVue')
-const md = require('markdown-it')({
-  highlight: function(str, lang) {
-    if (lang && hljs.getLanguage(lang)) {
-      try {
-        return (
-          '<pre class="hljs"><code>' +
-          hljs.highlight(lang, str, true).value +
-          '</code></pre>'
-        )
-      } catch (__) {}
-    }
-
-    return (
-      '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>'
-    )
-  }
-}).use(require('markdown-it-checkbox'))
 
 // 文档语言种类
 let langList = ['zh', 'en']
@@ -48,15 +31,12 @@ const compilerDir = (dir, dirName, routerList) => {
 const compilerFile = (dir, file, dirName, routerList) => {
   let filePath = path.join(dir, file)
   let destPath = path.join(dir, './index.vue')
-  let templatePath = path.join(__dirname, '../src/pages/Doc/Template.vue')
   let content = fs.readFileSync(filePath, 'utf-8')
   let title = /(^|\n\r)\s*#\s+([^\n\r]+)/g.exec(content)
   if (title && title[2]) {
     addRouter(dirName, routerList, title[2])
   }
-  let result = md.render(content)
+  let doc = transformMdToVue(content)
-  let template = fs.readFileSync(templatePath, 'utf-8')
-  let doc = template.replace('$$$$', result)
   fs.writeFileSync(destPath, doc)
 }
 

web/scripts/transformMdToVue.js

@@ -0,0 +1,31 @@
+const path = require('path')
+const fs = require('fs')
+const hljs = require('highlight.js')
+const md = require('markdown-it')({
+  highlight: function(str, lang) {
+    if (lang && hljs.getLanguage(lang)) {
+      try {
+        return (
+          '<pre class="hljs"><code>' +
+          hljs.highlight(str, {
+            language: lang, 
+            ignoreIllegals: true
+          }).value +
+          '</code></pre>'
+        )
+      } catch (__) {}
+    }
+
+    return (
+      '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>'
+    )
+  }
+}).use(require('markdown-it-checkbox'))
+
+const templatePath = path.join(__dirname, '../src/pages/Doc/Template.vue')
+
+exports.transformMdToVue = (content) => {
+    let result = md.render(content)
+    let template = fs.readFileSync(templatePath, 'utf-8')
+    return template.replace('$$$$', result)
+}