Update docs vuese markdown render replace with parser and markdown-re…

…nder

package.json

@@ -60,6 +60,8 @@
     "@vitejs/plugin-vue": "^4.6.2",
     "@vue/compiler-sfc": "^3.3.13",
     "@vuese/cli": "^2.14.3",
+    "@vuese/markdown-render": "^2.11.3",
+    "@vuese/parser": "^2.10.3",
     "auto-changelog": "^2.4.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-component": "^1.1.1",

vuese-watcher.js

@@ -5,26 +5,57 @@
  * so that Vitepress dev will refresh the docs for components
  */
 
+import fs from 'fs'
+import path from 'path'
 import chokidar from 'chokidar'
-import { exec } from 'child_process'
+import { parser } from '@vuese/parser'
+import { Render } from '@vuese/markdown-render'
 
 const componentsDir = 'src/components'
 const components = ['FlatmapVuer.vue', 'MultiFlatmapVuer.vue']
-
+const outputDir = 'docs/components'
 
 const watcher = chokidar.watch(components, {
   cwd: componentsDir,
   ignoreInitial: true,
 })
 
-watcher.on('change', (path) => {
-  console.log(`The component ${path} has changed!`)
+function generateMarkdown(file) {
+  const fileWithPath = `${componentsDir}/${file}`
+  const fileContent = fs.readFileSync(fileWithPath, 'utf-8')
+
+  try {
+    const parserResult = parser(fileContent)
+    const r = new Render(parserResult)
+    const renderResult = r.render()
+    const markdownResult = r.renderMarkdown()
+    const markdownContent = markdownResult.content
+    const componentName = path.basename(fileWithPath, '.vue')
 
-  exec('npm run vuese-gen', (error, stdout, stderr) => {
-    if (error) {
-      console.error(`Error executing vuese command: ${error}`)
-      return
+    if (!fs.existsSync(outputDir)) {
+      fs.mkdirSync(outputDir)
     }
-    console.log(`Vuese generated ${stdout}`)
-  })
+
+    fs.writeFile(`${outputDir}/${componentName}.md`, markdownContent, (err) => {
+      if (err) {
+        console.error(`Error writing markdown file for ${componentName}`, err)
+      } else {
+        console.log(`Markdown file for ${componentName} is generated!`)
+      }
+    })
+  } catch(e) {
+    console.error(e)
+  }
+}
+
+// Run on first load
+components.forEach((component) => {
+  console.log(`Write markdown file for ${component} on first load.`)
+  generateMarkdown(component)
+})
+
+// Run on file change
+watcher.on('change', (file) => {
+  console.log(`The component ${file} has changed!`)
+  generateMarkdown(file)
 })