fix: use jsx parser

src/index.ts

@@ -1,55 +1,49 @@
-import type { AstPath, Plugin, Printer } from 'prettier'
+import type { Literal } from 'npm:@types/unist@2'
+import type { AstPath, Parser, Plugin, Printer } from 'prettier'
 import { builders, utils } from 'prettier/doc'
 import _md from 'prettier/plugins/markdown'
 
-interface Node {
-  type: string
-  value: string
-  position: {
-    start: { line: number; column: number; offset: number }
-    end: { line: number; column: number; offset: number }
-  }
-}
-
 const md = _md as unknown as Plugin & {
+  parsers: Record<'markdown' | 'mdx' | 'remark', Parser>
   printers: { mdast: Printer & Required<Pick<Printer, 'embed'>> }
 }
 
 const wrappedRE = /^\s*<(script|style)\b/
 
 export default {
   ...md,
+  parsers: {
+    ...md.parsers,
+    markdown: md.parsers.mdx,
+  },
   printers: {
     ...md.printers,
     mdast: {
       ...md.printers.mdast,
 
-      embed: (path: AstPath<Node>, options) => {
+      embed: (path: AstPath<Literal<string>>, options) => {
         const { node } = path
+        if (node.type !== 'jsx') return md.printers.mdast.embed(path, options)
 
-        if (node.type === 'html') {
+        return async (textToDoc) => {
           const isWrapped = !wrappedRE.test(node.value)
 
-          return async (textToDoc) => {
-            const doc0 = await textToDoc(
-              isWrapped ? `<template>${node.value}</template>` : node.value,
-              { parser: 'vue' },
-            )
-            if (!isWrapped) return doc0
+          const doc0 = await textToDoc(
+            isWrapped ? `<template>${node.value}</template>` : node.value,
+            { parser: 'vue' },
+          )
+          if (!isWrapped) return doc0
 
-            const doc1 = findGroup(doc0, (doc) => Array.isArray(doc.contents))
-            if (!doc1) return doc0
+          const doc1 = findGroup(doc0, (doc) => Array.isArray(doc.contents))
+          if (!doc1) return doc0
 
-            const doc2 = findGroup(doc1, (doc) => doc1 !== doc)
-            if (!doc2) return doc0
+          const doc2 = findGroup(doc1, (doc) => doc1 !== doc)
+          if (!doc2) return doc0
 
-            doc1.contents = doc2.contents
+          doc1.contents = doc2.contents
 
-            return doc0
-          }
+          return doc0
         }
-
-        return md.printers.mdast.embed(path, options)
       },
     },
   },

tests/index.test.ts

@@ -5,6 +5,10 @@ import { assertEquals } from '@std/assert'
 Deno.test('plugin', async (t) => {
   await t.step('should format vue in markdown', async () => {
     const code = `
+---
+yaml:  frontmatter
+---
+
 #  *Test*
 
 ## 1
@@ -13,7 +17,7 @@ Deno.test('plugin', async (t) => {
 
 ## 2
 
- <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul>
+ <template v-for="item in items" :key="item.id"> <p>{{  item.name  }}</p> </template>
 
 ## 3
 
@@ -25,14 +29,30 @@ Deno.test('plugin', async (t) => {
 
 ## 5
 
-<script setup lang="ts">import { defineProps } from 'vue'; const props = defineProps<{ name: string, age: number }>();</script>
+  <script setup lang="ts">import { defineProps } from 'vue'; const props = defineProps<{ name: string, age: number }>();</script>
 
 ## 6
 
-<style scoped>h1 { color: red; }</style>
+  <style scoped>h1 { color: red; }</style>
+
+## 7
+
+Inline vue code <strong>  {{  item.name  }}  </strong> <em>  italic  </em> <pre>  code  </pre>
+
+## 8
+
+Comments <!-- comment -->
+
+<!-- multiline
+comment
+-->
 `
 
     const expected = `
+---
+yaml: frontmatter
+---
+
 # _Test_
 
 ## 1
@@ -46,9 +66,9 @@ Deno.test('plugin', async (t) => {
 
 ## 2
 
-<ul>
-  <li v-for="item in items" :key="item.id">{{ item.name }}</li>
-</ul>
+<template v-for="item in items" :key="item.id">
+  <p>{{ item.name }}</p>
+</template>
 
 ## 3
 
@@ -82,6 +102,18 @@ h1 {
   color: red;
 }
 </style>
+
+## 7
+
+Inline vue code <strong> {{ item.name }} </strong> <em> italic </em> <pre>  code  </pre>
+
+## 8
+
+Comments <!-- comment -->
+
+<!-- multiline
+comment
+-->
 `.trimStart()
 
     const result = await prettier.format(code, {
@@ -92,3 +124,6 @@ h1 {
     assertEquals(result, expected)
   })
 })
+
+// TODO:
+// - handle liquidNode (tc 7)