feat: compile as template

Signed-off-by: Neko Ayaka <[email protected]>

Author: nekomeowww

package.json

@@ -30,8 +30,10 @@
     "@antfu/eslint-config": "^2.21.0",
     "@codemirror/view": "^6.28.4",
     "@types/node": "^20.14.10",
+    "@vue/compiler-sfc": "^3.4.31",
     "builtin-modules": "^3.3.0",
     "eslint": "^8.57.0",
+    "hast-util-to-html": "^9.0.1",
     "obsidian": "^1.5.7",
     "rehype-raw": "^7.0.0",
     "rehype-stringify": "^10.0.0",

pnpm-lock.yaml

@@ -2,12 +2,14 @@ import { Plugin } from 'obsidian'
 import type { EditorView, PluginValue, ViewUpdate } from '@codemirror/view'
 import { ViewPlugin } from '@codemirror/view'
 import { type App, createApp, defineComponent, h } from 'vue'
+import { compileTemplate } from '@vue/compiler-sfc'
 
 import { unified } from 'unified'
 import RemarkParse from 'remark-parse'
 import RemarkRehype from 'remark-rehype'
 import RehypeRaw from 'rehype-raw'
 import { remove } from 'unist-util-remove'
+import { toHtml } from 'hast-util-to-html'
 
 function sleep(ms: number) {
   return new Promise(resolve => setTimeout(resolve, ms))
@@ -60,8 +62,26 @@ class VueViewPlugin implements PluginValue {
       .use(() => tree => remove(tree, (node, _, parent) => parent?.type === 'root' && node.type === 'text'))
       .run(parsedMarkdownAst)
 
-    // eslint-disable-next-line no-console
-    console.log('transformedHast', transformedHast)
+    let index = 0
+    for (const node of transformedHast.children) {
+      index++
+
+      const componentTemplateStr = toHtml(node)
+
+      const { code, errors } = compileTemplate({
+        isProd: false,
+        source: componentTemplateStr,
+        filename: `some-${index}`,
+        id: index.toString(),
+      })
+      if (errors.length) {
+        console.error(errors)
+        throw new Error('Failed to compile template')
+      }
+
+      // eslint-disable-next-line no-console
+      console.log(code)
+    }
 
     this.vueInstance?.unmount()