From 1624e9630a270648c39299f63e61c6714965ad5f Mon Sep 17 00:00:00 2001
From: gaokefei <260480378@qq.com>
Date: Mon, 24 Jul 2023 01:53:11 +0800
Subject: [PATCH 01/11] feat: add jsx-vue-directive plugin

---
 docs/features/jsx-vue-directive.md            |  35 ++++++
 packages/jsx-vue-directive/README.md          |   3 +
 packages/jsx-vue-directive/package.json       |  98 +++++++++++++++
 packages/jsx-vue-directive/src/api.ts         |   1 +
 packages/jsx-vue-directive/src/core/index.ts  |  39 ++++++
 packages/jsx-vue-directive/src/core/v-for.ts  |  51 ++++++++
 packages/jsx-vue-directive/src/core/v-if.ts   |  65 ++++++++++
 packages/jsx-vue-directive/src/esbuild.ts     |   3 +
 packages/jsx-vue-directive/src/index.ts       |  37 ++++++
 packages/jsx-vue-directive/src/rollup.ts      |   3 +
 packages/jsx-vue-directive/src/vite.ts        |   3 +
 packages/jsx-vue-directive/src/webpack.ts     |   3 +
 .../tests/__snapshots__/v-for.test.ts.snap    |  25 ++++
 .../tests/__snapshots__/v-if.test.ts.snap     | 118 ++++++++++++++++++
 .../tests/fixtures/v-for/v-for.setup.tsx      |   7 ++
 .../tests/fixtures/v-for/v-for.vue            |  11 ++
 .../tests/fixtures/v-if/v-else-if.setup.tsx   |   9 ++
 .../tests/fixtures/v-if/v-else-if.vue         |  12 ++
 .../tests/fixtures/v-if/v-else.setup.tsx      |   9 ++
 .../tests/fixtures/v-if/v-else.vue            |  13 ++
 .../tests/fixtures/v-if/v-if-nested.setup.tsx |  11 ++
 .../tests/fixtures/v-if/v-if-nested.vue       |  15 +++
 .../tests/fixtures/v-if/v-if.setup.tsx        |  10 ++
 .../tests/fixtures/v-if/v-if.vue              |  12 ++
 .../jsx-vue-directive/tests/v-for.test.ts     |  17 +++
 packages/jsx-vue-directive/tests/v-if.test.ts |  17 +++
 packages/jsx-vue-directive/tsup.config.ts     |   1 +
 packages/macros/package.json                  |   1 +
 packages/macros/src/index.ts                  |   8 ++
 pnpm-lock.yaml                                |  65 +++++++++-
 30 files changed, 698 insertions(+), 4 deletions(-)
 create mode 100644 docs/features/jsx-vue-directive.md
 create mode 100644 packages/jsx-vue-directive/README.md
 create mode 100644 packages/jsx-vue-directive/package.json
 create mode 100644 packages/jsx-vue-directive/src/api.ts
 create mode 100644 packages/jsx-vue-directive/src/core/index.ts
 create mode 100644 packages/jsx-vue-directive/src/core/v-for.ts
 create mode 100644 packages/jsx-vue-directive/src/core/v-if.ts
 create mode 100644 packages/jsx-vue-directive/src/esbuild.ts
 create mode 100644 packages/jsx-vue-directive/src/index.ts
 create mode 100644 packages/jsx-vue-directive/src/rollup.ts
 create mode 100644 packages/jsx-vue-directive/src/vite.ts
 create mode 100644 packages/jsx-vue-directive/src/webpack.ts
 create mode 100644 packages/jsx-vue-directive/tests/__snapshots__/v-for.test.ts.snap
 create mode 100644 packages/jsx-vue-directive/tests/__snapshots__/v-if.test.ts.snap
 create mode 100644 packages/jsx-vue-directive/tests/fixtures/v-for/v-for.setup.tsx
 create mode 100644 packages/jsx-vue-directive/tests/fixtures/v-for/v-for.vue
 create mode 100644 packages/jsx-vue-directive/tests/fixtures/v-if/v-else-if.setup.tsx
 create mode 100644 packages/jsx-vue-directive/tests/fixtures/v-if/v-else-if.vue
 create mode 100644 packages/jsx-vue-directive/tests/fixtures/v-if/v-else.setup.tsx
 create mode 100644 packages/jsx-vue-directive/tests/fixtures/v-if/v-else.vue
 create mode 100644 packages/jsx-vue-directive/tests/fixtures/v-if/v-if-nested.setup.tsx
 create mode 100644 packages/jsx-vue-directive/tests/fixtures/v-if/v-if-nested.vue
 create mode 100644 packages/jsx-vue-directive/tests/fixtures/v-if/v-if.setup.tsx
 create mode 100644 packages/jsx-vue-directive/tests/fixtures/v-if/v-if.vue
 create mode 100644 packages/jsx-vue-directive/tests/v-for.test.ts
 create mode 100644 packages/jsx-vue-directive/tests/v-if.test.ts
 create mode 100644 packages/jsx-vue-directive/tsup.config.ts

diff --git a/docs/features/jsx-vue-directive.md b/docs/features/jsx-vue-directive.md
new file mode 100644
index 000000000..5e2189304
--- /dev/null
+++ b/docs/features/jsx-vue-directive.md
@@ -0,0 +1,35 @@
+# exportProps
+
+<StabilityLevel level="experimental" />
+
+`v-if` & `v-for` directive for jsx.
+
+|   Features   |     Supported      |
+| :----------: | :----------------: |
+|    Vue 3     | :white_check_mark: |
+|    Nuxt 3    | :white_check_mark: |
+|    Vue 2     | :white_check_mark: |
+| Volar(v-for) |        :x:         |
+
+## Usage
+
+```vue
+<script setup lang="tsx">
+const { foo = 0, list=[1, 2, 3] } = defineProps<{
+  foo: number,
+  list: number[]
+}>()
+
+export default () => <>
+  <div v-if={foo===0}>
+    <div v-if={foo===0}>0-0</div>
+    <div v-else-if={foo===1}>0-1</div>
+    <div v-else>0-2</div>
+  </div>
+
+  <div v-for={(i, index) in list} key={index}>
+    {i}
+  </div>
+</>
+</script>
+```
diff --git a/packages/jsx-vue-directive/README.md b/packages/jsx-vue-directive/README.md
new file mode 100644
index 000000000..c41ea6464
--- /dev/null
+++ b/packages/jsx-vue-directive/README.md
@@ -0,0 +1,3 @@
+# @vue-macros/jsx-vue-directive [![npm](https://img.shields.io/npm/v/@vue-macros/jsx-vue-directive.svg)](https://npmjs.com/package/@vue-macros/jsx-vue-directive)
+
+Please refer to [README.md](https://github.com/sxzz/unplugin-vue-macros#readme)
diff --git a/packages/jsx-vue-directive/package.json b/packages/jsx-vue-directive/package.json
new file mode 100644
index 000000000..f8648f32f
--- /dev/null
+++ b/packages/jsx-vue-directive/package.json
@@ -0,0 +1,98 @@
+{
+  "name": "@vue-macros/jsx-vue-directive",
+  "version": "0.1.0",
+  "packageManager": "pnpm@8.2.0",
+  "description": "jsx-vue-directive feature from Vue Macros.",
+  "keywords": [
+    "vue-macros",
+    "macros",
+    "vue",
+    "sfc",
+    "setup",
+    "script-setup",
+    "jsx-vue-directive",
+    "unplugin"
+  ],
+  "license": "MIT",
+  "homepage": "https://github.com/sxzz/unplugin-vue-macros#readme",
+  "bugs": {
+    "url": "https://github.com/sxzz/unplugin-vue-macros/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sxzz/unplugin-vue-macros.git",
+    "directory": "packages/jsx-vue-directive"
+  },
+  "author": "三咲智子 <sxzz@sxzz.moe>",
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "dev": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs"
+    },
+    "./api": {
+      "dev": "./src/api.ts",
+      "types": "./dist/api.d.ts",
+      "require": "./dist/api.js",
+      "import": "./dist/api.mjs"
+    },
+    "./esbuild": {
+      "dev": "./src/esbuild.ts",
+      "types": "./dist/esbuild.d.ts",
+      "require": "./dist/esbuild.js",
+      "import": "./dist/esbuild.mjs"
+    },
+    "./rollup": {
+      "dev": "./src/rollup.ts",
+      "types": "./dist/rollup.d.ts",
+      "require": "./dist/rollup.js",
+      "import": "./dist/rollup.mjs"
+    },
+    "./vite": {
+      "dev": "./src/vite.ts",
+      "types": "./dist/vite.d.ts",
+      "require": "./dist/vite.js",
+      "import": "./dist/vite.mjs"
+    },
+    "./webpack": {
+      "dev": "./src/webpack.ts",
+      "types": "./dist/webpack.d.ts",
+      "require": "./dist/webpack.js",
+      "import": "./dist/webpack.mjs"
+    },
+    "./*": [
+      "./*",
+      "./*.d.ts"
+    ]
+  },
+  "typesVersions": {
+    "<=4.9": {
+      "*": [
+        "./dist/*",
+        "./*"
+      ]
+    }
+  },
+  "scripts": {
+    "build": "tsup && tsx ../../scripts/postbuild.mts",
+    "dev": "DEV=true tsup"
+  },
+  "dependencies": {
+    "@vue-macros/common": "workspace:~",
+    "unplugin": "^1.3.1"
+  },
+  "devDependencies": {
+    "rollup": "^3.20.3",
+    "vue": "^3.3.0-alpha.9"
+  },
+  "engines": {
+    "node": ">=14.19.0"
+  }
+}
diff --git a/packages/jsx-vue-directive/src/api.ts b/packages/jsx-vue-directive/src/api.ts
new file mode 100644
index 000000000..46d458ad7
--- /dev/null
+++ b/packages/jsx-vue-directive/src/api.ts
@@ -0,0 +1 @@
+export * from './core'
diff --git a/packages/jsx-vue-directive/src/core/index.ts b/packages/jsx-vue-directive/src/core/index.ts
new file mode 100644
index 000000000..74e83efb2
--- /dev/null
+++ b/packages/jsx-vue-directive/src/core/index.ts
@@ -0,0 +1,39 @@
+import { type Program } from '@babel/types'
+import {
+  MagicString,
+  babelParse,
+  getLang,
+  getTransformResult,
+  parseSFC,
+} from '@vue-macros/common'
+import { vIfTransform } from './v-if'
+import { vForTransform } from './v-for'
+
+export function transformJsxVueDirective(code: string, id: string) {
+  const lang = getLang(id)
+  let asts: { ast: Program; offset: number }[] = []
+  if (lang === 'vue') {
+    const { scriptSetup, getSetupAst, script, getScriptAst } = parseSFC(
+      code,
+      id
+    )
+    if (script) {
+      asts.push({ ast: getScriptAst()!, offset: script.loc.start.offset })
+    }
+    if (scriptSetup) {
+      asts.push({ ast: getSetupAst()!, offset: scriptSetup.loc.start.offset })
+    }
+  } else if (['jsx', 'tsx'].includes(lang)) {
+    asts = [{ ast: babelParse(code, lang), offset: 0 }]
+  } else {
+    return null
+  }
+
+  const s = new MagicString(code)
+  for (const { ast, offset } of asts) {
+    vIfTransform(ast, s, offset)
+    vForTransform(ast, s, offset)
+  }
+
+  return getTransformResult(s, id)
+}
diff --git a/packages/jsx-vue-directive/src/core/v-for.ts b/packages/jsx-vue-directive/src/core/v-for.ts
new file mode 100644
index 000000000..ea599a2e0
--- /dev/null
+++ b/packages/jsx-vue-directive/src/core/v-for.ts
@@ -0,0 +1,51 @@
+import {
+  type JSXAttribute,
+  type JSXElement,
+  type Node,
+  type Program,
+} from '@babel/types'
+import { type MagicString, walkAST } from '@vue-macros/common'
+
+export function vForTransform(ast: Program, s: MagicString, offset = 0) {
+  if (!s.slice(ast.start! + offset, ast.end! + offset).includes('v-for')) return
+
+  const nodes: {
+    node: JSXElement
+    attribute: JSXAttribute
+  }[] = []
+
+  walkAST<Node>(ast, {
+    enter(node) {
+      if (node.type !== 'JSXElement') return
+
+      const attribute = node.openingElement.attributes.find(
+        (i) => i.type === 'JSXAttribute' && ['v-for'].includes(`${i.name.name}`)
+      ) as JSXAttribute
+      if (attribute) {
+        nodes.push({
+          node,
+          attribute,
+        })
+      }
+    },
+  })
+
+  nodes.forEach(({ node, attribute }) => {
+    if (`${attribute.name.name}` === 'v-for') {
+      if (!attribute.value) return
+      const [i, list] = s
+        .slice(
+          attribute.value.start! + offset + 1,
+          attribute.value.end! + offset - 1
+        )
+        .split(/\s+in\s+/)
+
+      s.appendLeft(node.start! + offset, ` { ${list}.map(${i}=> `)
+
+      s.appendRight(node.end! + offset, ') }')
+      s.remove(attribute.start! + offset - 1, attribute.end! + offset)
+    }
+  })
+
+  return s
+}
diff --git a/packages/jsx-vue-directive/src/core/v-if.ts b/packages/jsx-vue-directive/src/core/v-if.ts
new file mode 100644
index 000000000..51b92033e
--- /dev/null
+++ b/packages/jsx-vue-directive/src/core/v-if.ts
@@ -0,0 +1,65 @@
+import {
+  type JSXAttribute,
+  type JSXElement,
+  type Node,
+  type Program,
+} from '@babel/types'
+import { type MagicString, walkAST } from '@vue-macros/common'
+
+export function vIfTransform(ast: Program, s: MagicString, offset = 0) {
+  if (!s.slice(ast.start! + offset, ast.end! + offset).includes('v-if')) return
+
+  const nodeMap = new Map<
+    any,
+    {
+      node: JSXElement
+      attribute: JSXAttribute
+    }[]
+  >()
+
+  walkAST<Node>(ast, {
+    enter(node, parent) {
+      if (node.type !== 'JSXElement') return
+
+      const attribute = node.openingElement.attributes.find(
+        (i) =>
+          i.type === 'JSXAttribute' &&
+          ['v-if', 'v-else-if', 'v-else'].includes(`${i.name.name}`)
+      ) as JSXAttribute
+      if (attribute) {
+        if (!nodeMap.has(parent)) nodeMap.set(parent, [])
+
+        nodeMap.get(parent)?.push({
+          node,
+          attribute,
+        })
+      }
+    },
+  })
+
+  const nodes = [...nodeMap.values()].flat()
+  nodes.forEach(({ node, attribute }, index) => {
+    if (['v-if', 'v-else-if'].includes(`${attribute.name.name}`)) {
+      if (attribute.value)
+        s.appendLeft(
+          node.start! + offset,
+          `${attribute.name.name === 'v-if' ? '{ ' : ''}${s.slice(
+            attribute.value.start! + offset + 1,
+            attribute.value.end! + offset - 1
+          )} ? `
+        )
+
+      s.appendRight(
+        node.end! + offset,
+        `${nodes[index + 1]?.attribute.name.name}`.startsWith('v-else')
+          ? ' :'
+          : " : '' }"
+      )
+      s.remove(attribute.start! + offset - 1, attribute.end! + offset)
+    } else {
+      s.appendRight(node.end! + offset, ' }')
+    }
+  })
+
+  return s
+}
diff --git a/packages/jsx-vue-directive/src/esbuild.ts b/packages/jsx-vue-directive/src/esbuild.ts
new file mode 100644
index 000000000..71f1e0952
--- /dev/null
+++ b/packages/jsx-vue-directive/src/esbuild.ts
@@ -0,0 +1,3 @@
+import unplugin from '.'
+
+export default unplugin.esbuild
diff --git a/packages/jsx-vue-directive/src/index.ts b/packages/jsx-vue-directive/src/index.ts
new file mode 100644
index 000000000..35d8d2e87
--- /dev/null
+++ b/packages/jsx-vue-directive/src/index.ts
@@ -0,0 +1,37 @@
+import { createUnplugin } from 'unplugin'
+import { createFilter, detectVueVersion } from '@vue-macros/common'
+import { type BaseOptions, type MarkRequired } from '@vue-macros/common'
+import { transformJsxVueDirective } from './core'
+
+export type Options = BaseOptions
+export type OptionsResolved = MarkRequired<Options, 'version'>
+
+function resolveOption(options: Options): OptionsResolved {
+  const version = options.version || detectVueVersion()
+  return {
+    ...options,
+    version,
+  }
+}
+
+const name = 'unplugin-jsx-vue-directive'
+
+export default createUnplugin<Options | undefined, false>(
+  (userOptions = {}) => {
+    const options = resolveOption(userOptions)
+    const filter = createFilter(options)
+
+    return {
+      name,
+      enforce: 'pre',
+
+      transformInclude(id) {
+        return filter(id)
+      },
+
+      transform(code, id) {
+        return transformJsxVueDirective(code, id)
+      },
+    }
+  }
+)
diff --git a/packages/jsx-vue-directive/src/rollup.ts b/packages/jsx-vue-directive/src/rollup.ts
new file mode 100644
index 000000000..ed6909cd3
--- /dev/null
+++ b/packages/jsx-vue-directive/src/rollup.ts
@@ -0,0 +1,3 @@
+import unplugin from '.'
+
+export default unplugin.rollup
diff --git a/packages/jsx-vue-directive/src/vite.ts b/packages/jsx-vue-directive/src/vite.ts
new file mode 100644
index 000000000..589f4b964
--- /dev/null
+++ b/packages/jsx-vue-directive/src/vite.ts
@@ -0,0 +1,3 @@
+import unplugin from '.'
+
+export default unplugin.vite
diff --git a/packages/jsx-vue-directive/src/webpack.ts b/packages/jsx-vue-directive/src/webpack.ts
new file mode 100644
index 000000000..83091ee31
--- /dev/null
+++ b/packages/jsx-vue-directive/src/webpack.ts
@@ -0,0 +1,3 @@
+import unplugin from '.'
+
+export default unplugin.webpack
diff --git a/packages/jsx-vue-directive/tests/__snapshots__/v-for.test.ts.snap b/packages/jsx-vue-directive/tests/__snapshots__/v-for.test.ts.snap
new file mode 100644
index 000000000..1e20a6f1c
--- /dev/null
+++ b/packages/jsx-vue-directive/tests/__snapshots__/v-for.test.ts.snap
@@ -0,0 +1,25 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`jsx-vue-directive > v-for > ./fixtures/v-for/v-for.setup.tsx 1`] = `
+"const list = [1, 2, 3]
+
+export default () => <>
+   { list.map((i, index)=> <div key={index}>
+    <div>{i}</div>
+  </div>) }  
+</>"
+`;
+
+exports[`jsx-vue-directive > v-for > ./fixtures/v-for/v-for.vue 1`] = `
+"<script setup lang=\\"tsx\\">
+const list = [1, 2, 3]
+
+defineRender(() => 
+  <>
+     { list.map(i=> <div key={i}>
+      <div>{i}</div>
+    </div>) }
+  </>
+)
+</script>"
+`;
diff --git a/packages/jsx-vue-directive/tests/__snapshots__/v-if.test.ts.snap b/packages/jsx-vue-directive/tests/__snapshots__/v-if.test.ts.snap
new file mode 100644
index 000000000..47f5ad269
--- /dev/null
+++ b/packages/jsx-vue-directive/tests/__snapshots__/v-if.test.ts.snap
@@ -0,0 +1,118 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-else.setup.tsx 1`] = `
+"const { foo = 2 } = defineProps<{
+  foo: number
+}>()
+
+export default () => <>
+  { foo===0 ? <div>0</div> :  
+  foo===1 ? <div>1</div> :
+  <div v-else={foo===2}>2</div> }   
+</>
+"
+`;
+
+exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-else.vue 1`] = `
+"<script setup lang=\\"tsx\\">
+const { foo = 2 } = defineProps<{
+  foo: number
+}>()
+
+defineRender(()=> 
+  <>
+    { foo===0 ? <div>0</div> :
+    foo===1 ? <div>1</div> :
+    <div v-else={foo===2}>2</div> }   
+  </>
+)
+</script>"
+`;
+
+exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-else-if.setup.tsx 1`] = `
+"const { foo = 0 } = defineProps<{
+  foo: number
+}>()
+
+export default () => <>
+  { foo===0 ? <div>0</div> :  
+  foo===1 ? <div>1</div> :
+  foo===2 ? <div>2</div> : '' }  
+</>"
+`;
+
+exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-else-if.vue 1`] = `
+"<script setup lang=\\"tsx\\">
+const { foo = 0 } = defineProps<{
+  foo: number
+}>()
+
+defineRender(() => 
+  <>
+    { foo===0 ? <div>0</div> :  
+    foo===1 ? <div>1</div> : '' }  
+  </>
+)
+</script>"
+`;
+
+exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-if.setup.tsx 1`] = `
+"const { foo } = defineProps<{
+  foo: number
+}>()
+
+export default () => {
+  return <>
+    { foo===0 ? <div>0</div> : '' }
+    { foo===1 ? <div>1</div> : '' }
+  </>
+}
+"
+`;
+
+exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-if.vue 1`] = `
+"<script setup lang=\\"tsx\\">
+const { foo } = defineProps<{
+  foo: number
+}>()
+
+defineRender(()=> 
+  <>
+    { foo===0 ? <div>0</div> : '' }  
+    { foo===1 ? <div>1</div> : '' }
+  </>
+)
+</script>"
+`;
+
+exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-if-nested.setup.tsx 1`] = `
+"const { foo = 0 } = defineProps<{
+  foo: number
+}>()
+
+export default () => <>
+  { foo===0 ? <div>
+    { foo===0 ? <div>0-0</div> :
+    foo===1 ? <div>0-1</div> :
+    <div v-else>0-2</div> }
+  </div> : '' }
+</>"
+`;
+
+exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-if-nested.vue 1`] = `
+"<script setup lang=\\"tsx\\">
+const { foo = 0 } = defineProps<{
+  foo: number
+}>()
+
+defineRender(() => 
+  <>
+    { foo===0 ? <div>
+      { foo===0 ? <div>0-0</div> :
+      foo===1 ? <div>0-1</div> :
+      <div v-else>0-2</div> }
+    </div> : '' }  
+  </>
+)
+</script>"
+`;
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-for/v-for.setup.tsx b/packages/jsx-vue-directive/tests/fixtures/v-for/v-for.setup.tsx
new file mode 100644
index 000000000..f907ab426
--- /dev/null
+++ b/packages/jsx-vue-directive/tests/fixtures/v-for/v-for.setup.tsx
@@ -0,0 +1,7 @@
+const list = [1, 2, 3]
+
+export default () => <>
+  <div v-for={(i, index) in list} key={index}>
+    <div>{i}</div>
+  </div>  
+</>
\ No newline at end of file
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-for/v-for.vue b/packages/jsx-vue-directive/tests/fixtures/v-for/v-for.vue
new file mode 100644
index 000000000..6ea94efd2
--- /dev/null
+++ b/packages/jsx-vue-directive/tests/fixtures/v-for/v-for.vue
@@ -0,0 +1,11 @@
+<script setup lang="tsx">
+const list = [1, 2, 3]
+
+defineRender(() => 
+  <>
+    <div v-for={i in list} key={i}>
+      <div>{i}</div>
+    </div>
+  </>
+)
+</script>
\ No newline at end of file
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-if/v-else-if.setup.tsx b/packages/jsx-vue-directive/tests/fixtures/v-if/v-else-if.setup.tsx
new file mode 100644
index 000000000..81ac59bd3
--- /dev/null
+++ b/packages/jsx-vue-directive/tests/fixtures/v-if/v-else-if.setup.tsx
@@ -0,0 +1,9 @@
+const { foo = 0 } = defineProps<{
+  foo: number
+}>()
+
+export default () => <>
+  <div v-if={foo===0}>0</div>  
+  <div v-else-if={foo===1}>1</div>
+  <div v-else-if={foo===2}>2</div>  
+</>
\ No newline at end of file
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-if/v-else-if.vue b/packages/jsx-vue-directive/tests/fixtures/v-if/v-else-if.vue
new file mode 100644
index 000000000..23dbe1fc2
--- /dev/null
+++ b/packages/jsx-vue-directive/tests/fixtures/v-if/v-else-if.vue
@@ -0,0 +1,12 @@
+<script setup lang="tsx">
+const { foo = 0 } = defineProps<{
+  foo: number
+}>()
+
+defineRender(() => 
+  <>
+    <div v-if={foo===0}>0</div>  
+    <div v-else-if={foo===1}>1</div>  
+  </>
+)
+</script>
\ No newline at end of file
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-if/v-else.setup.tsx b/packages/jsx-vue-directive/tests/fixtures/v-if/v-else.setup.tsx
new file mode 100644
index 000000000..f47e4e80d
--- /dev/null
+++ b/packages/jsx-vue-directive/tests/fixtures/v-if/v-else.setup.tsx
@@ -0,0 +1,9 @@
+const { foo = 2 } = defineProps<{
+  foo: number
+}>()
+
+export default () => <>
+  <div v-if={foo===0}>0</div>  
+  <div v-else-if={foo===1}>1</div>
+  <div v-else={foo===2}>2</div>   
+</>
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-if/v-else.vue b/packages/jsx-vue-directive/tests/fixtures/v-if/v-else.vue
new file mode 100644
index 000000000..979dd5520
--- /dev/null
+++ b/packages/jsx-vue-directive/tests/fixtures/v-if/v-else.vue
@@ -0,0 +1,13 @@
+<script setup lang="tsx">
+const { foo = 2 } = defineProps<{
+  foo: number
+}>()
+
+defineRender(()=> 
+  <>
+    <div v-if={foo===0}>0</div>
+    <div v-else-if={foo===1}>1</div>
+    <div v-else={foo===2}>2</div>   
+  </>
+)
+</script>
\ No newline at end of file
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-if/v-if-nested.setup.tsx b/packages/jsx-vue-directive/tests/fixtures/v-if/v-if-nested.setup.tsx
new file mode 100644
index 000000000..a7d6fad9f
--- /dev/null
+++ b/packages/jsx-vue-directive/tests/fixtures/v-if/v-if-nested.setup.tsx
@@ -0,0 +1,11 @@
+const { foo = 0 } = defineProps<{
+  foo: number
+}>()
+
+export default () => <>
+  <div v-if={foo===0}>
+    <div v-if={foo===0}>0-0</div>
+    <div v-else-if={foo===1}>0-1</div>
+    <div v-else>0-2</div>
+  </div>
+</>
\ No newline at end of file
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-if/v-if-nested.vue b/packages/jsx-vue-directive/tests/fixtures/v-if/v-if-nested.vue
new file mode 100644
index 000000000..45d47b782
--- /dev/null
+++ b/packages/jsx-vue-directive/tests/fixtures/v-if/v-if-nested.vue
@@ -0,0 +1,15 @@
+<script setup lang="tsx">
+const { foo = 0 } = defineProps<{
+  foo: number
+}>()
+
+defineRender(() => 
+  <>
+    <div v-if={foo===0}>
+      <div v-if={foo===0}>0-0</div>
+      <div v-else-if={foo===1}>0-1</div>
+      <div v-else>0-2</div>
+    </div>  
+  </>
+)
+</script>
\ No newline at end of file
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-if/v-if.setup.tsx b/packages/jsx-vue-directive/tests/fixtures/v-if/v-if.setup.tsx
new file mode 100644
index 000000000..96a802bd5
--- /dev/null
+++ b/packages/jsx-vue-directive/tests/fixtures/v-if/v-if.setup.tsx
@@ -0,0 +1,10 @@
+const { foo } = defineProps<{
+  foo: number
+}>()
+
+export default () => {
+  return <>
+    <div v-if={foo===0}>0</div>
+    <div v-if={foo===1}>1</div>
+  </>
+}
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-if/v-if.vue b/packages/jsx-vue-directive/tests/fixtures/v-if/v-if.vue
new file mode 100644
index 000000000..c01f05689
--- /dev/null
+++ b/packages/jsx-vue-directive/tests/fixtures/v-if/v-if.vue
@@ -0,0 +1,12 @@
+<script setup lang="tsx">
+const { foo } = defineProps<{
+  foo: number
+}>()
+
+defineRender(()=> 
+  <>
+    <div v-if={foo===0}>0</div>  
+    <div v-if={foo===1}>1</div>
+  </>
+)
+</script>
\ No newline at end of file
diff --git a/packages/jsx-vue-directive/tests/v-for.test.ts b/packages/jsx-vue-directive/tests/v-for.test.ts
new file mode 100644
index 000000000..a3a38be69
--- /dev/null
+++ b/packages/jsx-vue-directive/tests/v-for.test.ts
@@ -0,0 +1,17 @@
+import { describe } from 'vitest'
+import { testFixtures } from 'packages/test-utils/src'
+import { transformJsxVueDirective } from '../src/api'
+
+describe('jsx-vue-directive', () => {
+  describe('v-for', async () => {
+    await testFixtures(
+      import.meta.glob('./fixtures/v-for/*.{vue,jsx,tsx}', {
+        eager: true,
+        as: 'raw',
+      }),
+      (args, id, code) => {
+        return transformJsxVueDirective(code, id)?.code
+      }
+    )
+  })
+})
diff --git a/packages/jsx-vue-directive/tests/v-if.test.ts b/packages/jsx-vue-directive/tests/v-if.test.ts
new file mode 100644
index 000000000..45bf9f5f5
--- /dev/null
+++ b/packages/jsx-vue-directive/tests/v-if.test.ts
@@ -0,0 +1,17 @@
+import { describe } from 'vitest'
+import { testFixtures } from 'packages/test-utils/src'
+import { transformJsxVueDirective } from '../src/api'
+
+describe('jsx-vue-directive', () => {
+  describe('v-if', async () => {
+    await testFixtures(
+      import.meta.glob('./fixtures/v-if/*.{vue,jsx,tsx}', {
+        eager: true,
+        as: 'raw',
+      }),
+      (args, id, code) => {
+        return transformJsxVueDirective(code, id)?.code
+      }
+    )
+  })
+})
diff --git a/packages/jsx-vue-directive/tsup.config.ts b/packages/jsx-vue-directive/tsup.config.ts
new file mode 100644
index 000000000..1605eae16
--- /dev/null
+++ b/packages/jsx-vue-directive/tsup.config.ts
@@ -0,0 +1 @@
+export { default } from '../../tsup.config.js'
diff --git a/packages/macros/package.json b/packages/macros/package.json
index 0227ea428..39b89784c 100644
--- a/packages/macros/package.json
+++ b/packages/macros/package.json
@@ -101,6 +101,7 @@
     "@vue-macros/setup-component": "workspace:*",
     "@vue-macros/setup-sfc": "workspace:*",
     "@vue-macros/short-emits": "workspace:*",
+    "@vue-macros/jsx-vue-directive": "workspace:*",
     "unplugin": "^1.3.1",
     "unplugin-combine": "^0.6.0",
     "unplugin-vue-define-options": "workspace:*"
diff --git a/packages/macros/src/index.ts b/packages/macros/src/index.ts
index 2e94496b1..dc6cd59e7 100644
--- a/packages/macros/src/index.ts
+++ b/packages/macros/src/index.ts
@@ -16,6 +16,7 @@ import VueSetupBlock from '@vue-macros/setup-block'
 import VueSetupComponent from '@vue-macros/setup-component'
 import VueSetupSFC from '@vue-macros/setup-sfc'
 import VueShortEmits from '@vue-macros/short-emits'
+import JsxVueDirective from '@vue-macros/jsx-vue-directive'
 import { detectVueVersion } from '@vue-macros/common'
 import { Devtools } from '@vue-macros/devtools'
 
@@ -42,6 +43,7 @@ import { type Options as OptionsSetupBlock } from '@vue-macros/setup-block'
 import { type Options as OptionsSetupComponent } from '@vue-macros/setup-component'
 import { type Options as OptionsSetupSFC } from '@vue-macros/setup-sfc'
 import { type Options as OptionsShortEmits } from '@vue-macros/short-emits'
+import { type Options as OptionsJsxVueDirective } from '@vue-macros/jsx-vue-directive'
 
 export interface FeatureOptionsMap {
   betterDefine: OptionsBetterDefine
@@ -61,6 +63,7 @@ export interface FeatureOptionsMap {
   setupComponent: OptionsSetupComponent
   setupSFC: OptionsSetupSFC
   shortEmits: OptionsShortEmits
+  jsxVueDirective: OptionsJsxVueDirective
 }
 export type FeatureName = keyof FeatureOptionsMap
 export type FeatureOptions = FeatureOptionsMap[FeatureName]
@@ -113,6 +116,7 @@ function resolveOptions({
   setupComponent,
   setupSFC,
   shortEmits,
+  jsxVueDirective,
 }: Options): OptionsResolved {
   function resolveSubOptions<K extends FeatureName>(
     options: OptionalSubOptions<FeatureOptionsMap[K]>,
@@ -185,6 +189,9 @@ function resolveOptions({
       { version },
       version < 3.3
     ),
+    jsxVueDirective: resolveSubOptions<'jsxVueDirective'>(jsxVueDirective, {
+      version,
+    }),
   }
 }
 
@@ -256,6 +263,7 @@ export default createCombinePlugin<Options | undefined>(
       framework === 'vite'
         ? Devtools({ nuxtContext: options.nuxtContext })
         : undefined,
+      resolvePlugin(JsxVueDirective, framework, options.jsxVueDirective),
     ].filter(Boolean)
 
     return {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2e474e408..1c455ea9b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'
 
+settings:
+  autoInstallPeers: false
+  excludeLinksFromLockfile: false
+
 overrides:
   vue@^3.2.0: ^3.3.0-alpha.6
   '@vue/compiler-sfc@^3.2.0': ^3.3.0-alpha.6
@@ -362,6 +366,22 @@ importers:
         specifier: ^1.3.1
         version: 1.3.1
 
+  packages/jsx-vue-directive:
+    dependencies:
+      '@vue-macros/common':
+        specifier: workspace:~
+        version: link:../common
+      unplugin:
+        specifier: ^1.3.1
+        version: 1.3.1
+    devDependencies:
+      rollup:
+        specifier: ^3.20.3
+        version: 3.20.3
+      vue:
+        specifier: ^3.3.0-alpha.9
+        version: 3.3.0-alpha.9
+
   packages/macros:
     dependencies:
       '@vue-macros/better-define':
@@ -400,6 +420,9 @@ importers:
       '@vue-macros/hoist-static':
         specifier: workspace:*
         version: link:../hoist-static
+      '@vue-macros/jsx-vue-directive':
+        specifier: workspace:*
+        version: link:../jsx-vue-directive
       '@vue-macros/named-template':
         specifier: workspace:*
         version: link:../named-template
@@ -2985,7 +3008,7 @@ packages:
       tinyws: 0.1.0(ws@8.13.0)
       unimport: 3.0.6
       vite: 4.2.1(@types/node@18.15.11)
-      vite-plugin-inspect: 0.7.22(rollup@3.20.3)(vite@4.2.1)
+      vite-plugin-inspect: 0.7.22(vite@4.2.1)
       vite-plugin-vue-inspector: 3.4.0(vite@4.2.1)
       wait-on: 7.0.1
       which: 3.0.0
@@ -3153,6 +3176,19 @@ packages:
       rollup: 2.79.1
     dev: true
 
+  /@rollup/pluginutils@5.0.2:
+    resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      rollup: ^1.20.0||^2.0.0||^3.0.0
+    peerDependenciesMeta:
+      rollup:
+        optional: true
+    dependencies:
+      '@types/estree': 1.0.0
+      estree-walker: 2.0.2
+      picomatch: 2.3.1
+
   /@rollup/pluginutils@5.0.2(rollup@3.20.2):
     resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==}
     engines: {node: '>=14.0.0'}
@@ -3504,7 +3540,7 @@ packages:
     hasBin: true
     dependencies:
       '@ampproject/remapping': 2.2.1
-      '@rollup/pluginutils': 5.0.2(rollup@3.20.3)
+      '@rollup/pluginutils': 5.0.2
       '@unocss/config': 0.51.4
       '@unocss/core': 0.51.4
       '@unocss/preset-uno': 0.51.4
@@ -3663,7 +3699,7 @@ packages:
         optional: true
     dependencies:
       '@ampproject/remapping': 2.2.1
-      '@rollup/pluginutils': 5.0.2(rollup@3.20.3)
+      '@rollup/pluginutils': 5.0.2
       '@unocss/config': 0.51.4
       '@unocss/core': 0.51.4
       '@unocss/inspector': 0.51.4
@@ -9301,7 +9337,7 @@ packages:
   /unimport@3.0.6:
     resolution: {integrity: sha512-GYxGJ1Bri1oqx8VFDjdgooGzeK7jBk3bvhXmamTIpu3nONOcUMGwZbX7X0L5RA7OWMXpR4vzpSQP7pXUzJg1/Q==}
     dependencies:
-      '@rollup/pluginutils': 5.0.2(rollup@3.20.3)
+      '@rollup/pluginutils': 5.0.2
       escape-string-regexp: 5.0.0
       fast-glob: 3.2.12
       local-pkg: 0.4.3
@@ -9565,6 +9601,27 @@ packages:
       - supports-color
     dev: true
 
+  /vite-plugin-inspect@0.7.22(vite@4.2.1):
+    resolution: {integrity: sha512-Z4y3MPuvn//0/XcpNLwTBqjfSt+c2utIFZu8Dw+nbR2HrPoIrKHedvSuqC8mLzxOpRKRoW60HWvZUDz8J2zRIA==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      vite: ^3.1.0 || ^4.0.0
+    peerDependenciesMeta:
+      vite:
+        optional: true
+    dependencies:
+      '@antfu/utils': 0.7.2
+      '@rollup/pluginutils': 5.0.2
+      debug: 4.3.4
+      fs-extra: 11.1.1
+      picocolors: 1.0.0
+      sirv: 2.0.2
+      vite: 4.2.1(@types/node@18.15.11)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+    dev: true
+
   /vite-plugin-pwa@0.14.7(vite@4.2.1)(workbox-window@6.5.4):
     resolution: {integrity: sha512-dNJaf0fYOWncmjxv9HiSa2xrSjipjff7IkYE5oIUJ2x5HKu3cXgA8LRgzOwTc5MhwyFYRSU0xyN0Phbx3NsQYw==}
     peerDependencies:

From 41b18e82151cbdfc155fc7890d29c497718a5e2d Mon Sep 17 00:00:00 2001
From: gaokefei <260480378@qq.com>
Date: Mon, 24 Jul 2023 02:12:59 +0800
Subject: [PATCH 02/11] chore: typo

---
 packages/macros/src/index.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/macros/src/index.ts b/packages/macros/src/index.ts
index 25df995df..00af5d1d4 100644
--- a/packages/macros/src/index.ts
+++ b/packages/macros/src/index.ts
@@ -5,6 +5,7 @@ import {
   type PluginType,
   createCombinePlugin,
 } from 'unplugin-combine'
+
 import { detectVueVersion } from '@vue-macros/common'
 import { Devtools } from '@vue-macros/devtools'
 

From 5a9e03c289860a9e6b636d5e6d2f153f383b0d4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Mon, 24 Jul 2023 12:16:16 +0800
Subject: [PATCH 03/11] refactor: rename pkg

---
 packages/jsx-directive/README.md              |  3 +
 .../package.json                              | 57 ++++++++++++-------
 .../src/api.ts                                |  0
 .../src/core/index.ts                         |  0
 .../src/core/v-for.ts                         |  0
 .../src/core/v-if.ts                          |  0
 .../src/esbuild.ts                            |  0
 .../src/index.ts                              |  8 ++-
 .../src/rollup.ts                             |  0
 .../src/vite.ts                               |  0
 .../src/webpack.ts                            |  0
 .../tests/__snapshots__/v-for.test.ts.snap    |  0
 .../tests/__snapshots__/v-if.test.ts.snap     |  0
 .../tests/fixtures/v-for/v-for.setup.tsx      |  0
 .../tests/fixtures/v-for/v-for.vue            |  0
 .../tests/fixtures/v-if/v-else-if.setup.tsx   |  0
 .../tests/fixtures/v-if/v-else-if.vue         |  0
 .../tests/fixtures/v-if/v-else.setup.tsx      |  0
 .../tests/fixtures/v-if/v-else.vue            |  0
 .../tests/fixtures/v-if/v-if-nested.setup.tsx |  0
 .../tests/fixtures/v-if/v-if-nested.vue       |  0
 .../tests/fixtures/v-if/v-if.setup.tsx        |  0
 .../tests/fixtures/v-if/v-if.vue              |  0
 .../tests/v-for.test.ts                       |  0
 .../tests/v-if.test.ts                        |  0
 .../tsup.config.ts                            |  0
 packages/jsx-vue-directive/README.md          |  3 -
 packages/macros/package.json                  |  2 +-
 pnpm-lock.yaml                                | 11 ++--
 29 files changed, 51 insertions(+), 33 deletions(-)
 create mode 100644 packages/jsx-directive/README.md
 rename packages/{jsx-vue-directive => jsx-directive}/package.json (56%)
 rename packages/{jsx-vue-directive => jsx-directive}/src/api.ts (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/src/core/index.ts (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/src/core/v-for.ts (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/src/core/v-if.ts (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/src/esbuild.ts (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/src/index.ts (84%)
 rename packages/{jsx-vue-directive => jsx-directive}/src/rollup.ts (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/src/vite.ts (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/src/webpack.ts (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/tests/__snapshots__/v-for.test.ts.snap (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/tests/__snapshots__/v-if.test.ts.snap (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/tests/fixtures/v-for/v-for.setup.tsx (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/tests/fixtures/v-for/v-for.vue (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/tests/fixtures/v-if/v-else-if.setup.tsx (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/tests/fixtures/v-if/v-else-if.vue (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/tests/fixtures/v-if/v-else.setup.tsx (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/tests/fixtures/v-if/v-else.vue (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/tests/fixtures/v-if/v-if-nested.setup.tsx (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/tests/fixtures/v-if/v-if-nested.vue (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/tests/fixtures/v-if/v-if.setup.tsx (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/tests/fixtures/v-if/v-if.vue (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/tests/v-for.test.ts (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/tests/v-if.test.ts (100%)
 rename packages/{jsx-vue-directive => jsx-directive}/tsup.config.ts (100%)
 delete mode 100644 packages/jsx-vue-directive/README.md

diff --git a/packages/jsx-directive/README.md b/packages/jsx-directive/README.md
new file mode 100644
index 000000000..f1aaec9a7
--- /dev/null
+++ b/packages/jsx-directive/README.md
@@ -0,0 +1,3 @@
+# @vue-macros/jsx-directive [![npm](https://img.shields.io/npm/v/@vue-macros/jsx-directive.svg)](https://npmjs.com/package/@vue-macros/jsx-directive)
+
+Please refer to [README.md](https://github.com/sxzz/vue-macros#readme)
diff --git a/packages/jsx-vue-directive/package.json b/packages/jsx-directive/package.json
similarity index 56%
rename from packages/jsx-vue-directive/package.json
rename to packages/jsx-directive/package.json
index f8648f32f..e78c3f8bf 100644
--- a/packages/jsx-vue-directive/package.json
+++ b/packages/jsx-directive/package.json
@@ -1,8 +1,8 @@
 {
-  "name": "@vue-macros/jsx-vue-directive",
-  "version": "0.1.0",
-  "packageManager": "pnpm@8.2.0",
-  "description": "jsx-vue-directive feature from Vue Macros.",
+  "name": "@vue-macros/jsx-directive",
+  "version": "0.0.0",
+  "packageManager": "pnpm@8.6.7",
+  "description": "jsx-directive feature from Vue Macros.",
   "keywords": [
     "vue-macros",
     "macros",
@@ -10,18 +10,18 @@
     "sfc",
     "setup",
     "script-setup",
-    "jsx-vue-directive",
+    "jsx-directive",
     "unplugin"
   ],
   "license": "MIT",
-  "homepage": "https://github.com/sxzz/unplugin-vue-macros#readme",
+  "homepage": "https://github.com/sxzz/vue-macros#readme",
   "bugs": {
-    "url": "https://github.com/sxzz/unplugin-vue-macros/issues"
+    "url": "https://github.com/sxzz/vue-macros/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/sxzz/unplugin-vue-macros.git",
-    "directory": "packages/jsx-vue-directive"
+    "url": "git+https://github.com/sxzz/vue-macros.git",
+    "directory": "packages/jsx-directive"
   },
   "author": "三咲智子 <sxzz@sxzz.moe>",
   "files": [
@@ -33,37 +33,55 @@
   "exports": {
     ".": {
       "dev": "./src/index.ts",
-      "types": "./dist/index.d.ts",
+      "types": {
+        "require": "./dist/index.d.ts",
+        "import": "./dist/index.d.mts"
+      },
       "require": "./dist/index.js",
       "import": "./dist/index.mjs"
     },
     "./api": {
       "dev": "./src/api.ts",
-      "types": "./dist/api.d.ts",
+      "types": {
+        "require": "./dist/api.d.ts",
+        "import": "./dist/api.d.mts"
+      },
       "require": "./dist/api.js",
       "import": "./dist/api.mjs"
     },
     "./esbuild": {
       "dev": "./src/esbuild.ts",
-      "types": "./dist/esbuild.d.ts",
+      "types": {
+        "require": "./dist/esbuild.d.ts",
+        "import": "./dist/esbuild.d.mts"
+      },
       "require": "./dist/esbuild.js",
       "import": "./dist/esbuild.mjs"
     },
     "./rollup": {
       "dev": "./src/rollup.ts",
-      "types": "./dist/rollup.d.ts",
+      "types": {
+        "require": "./dist/rollup.d.ts",
+        "import": "./dist/rollup.d.mts"
+      },
       "require": "./dist/rollup.js",
       "import": "./dist/rollup.mjs"
     },
     "./vite": {
       "dev": "./src/vite.ts",
-      "types": "./dist/vite.d.ts",
+      "types": {
+        "require": "./dist/vite.d.ts",
+        "import": "./dist/vite.d.mts"
+      },
       "require": "./dist/vite.js",
       "import": "./dist/vite.mjs"
     },
     "./webpack": {
       "dev": "./src/webpack.ts",
-      "types": "./dist/webpack.d.ts",
+      "types": {
+        "require": "./dist/webpack.d.ts",
+        "import": "./dist/webpack.d.mts"
+      },
       "require": "./dist/webpack.js",
       "import": "./dist/webpack.mjs"
     },
@@ -73,7 +91,7 @@
     ]
   },
   "typesVersions": {
-    "<=4.9": {
+    "*": {
       "*": [
         "./dist/*",
         "./*"
@@ -81,7 +99,7 @@
     }
   },
   "scripts": {
-    "build": "tsup && tsx ../../scripts/postbuild.mts",
+    "build": "tsup && tsx ../../scripts/postbuild.ts",
     "dev": "DEV=true tsup"
   },
   "dependencies": {
@@ -89,10 +107,9 @@
     "unplugin": "^1.3.1"
   },
   "devDependencies": {
-    "rollup": "^3.20.3",
-    "vue": "^3.3.0-alpha.9"
+    "vue": "^3.3.4"
   },
   "engines": {
-    "node": ">=14.19.0"
+    "node": ">=16.14.0"
   }
 }
diff --git a/packages/jsx-vue-directive/src/api.ts b/packages/jsx-directive/src/api.ts
similarity index 100%
rename from packages/jsx-vue-directive/src/api.ts
rename to packages/jsx-directive/src/api.ts
diff --git a/packages/jsx-vue-directive/src/core/index.ts b/packages/jsx-directive/src/core/index.ts
similarity index 100%
rename from packages/jsx-vue-directive/src/core/index.ts
rename to packages/jsx-directive/src/core/index.ts
diff --git a/packages/jsx-vue-directive/src/core/v-for.ts b/packages/jsx-directive/src/core/v-for.ts
similarity index 100%
rename from packages/jsx-vue-directive/src/core/v-for.ts
rename to packages/jsx-directive/src/core/v-for.ts
diff --git a/packages/jsx-vue-directive/src/core/v-if.ts b/packages/jsx-directive/src/core/v-if.ts
similarity index 100%
rename from packages/jsx-vue-directive/src/core/v-if.ts
rename to packages/jsx-directive/src/core/v-if.ts
diff --git a/packages/jsx-vue-directive/src/esbuild.ts b/packages/jsx-directive/src/esbuild.ts
similarity index 100%
rename from packages/jsx-vue-directive/src/esbuild.ts
rename to packages/jsx-directive/src/esbuild.ts
diff --git a/packages/jsx-vue-directive/src/index.ts b/packages/jsx-directive/src/index.ts
similarity index 84%
rename from packages/jsx-vue-directive/src/index.ts
rename to packages/jsx-directive/src/index.ts
index 35d8d2e87..c8e561006 100644
--- a/packages/jsx-vue-directive/src/index.ts
+++ b/packages/jsx-directive/src/index.ts
@@ -1,6 +1,10 @@
 import { createUnplugin } from 'unplugin'
-import { createFilter, detectVueVersion } from '@vue-macros/common'
-import { type BaseOptions, type MarkRequired } from '@vue-macros/common'
+import {
+  type BaseOptions,
+  type MarkRequired,
+  createFilter,
+  detectVueVersion,
+} from '@vue-macros/common'
 import { transformJsxVueDirective } from './core'
 
 export type Options = BaseOptions
diff --git a/packages/jsx-vue-directive/src/rollup.ts b/packages/jsx-directive/src/rollup.ts
similarity index 100%
rename from packages/jsx-vue-directive/src/rollup.ts
rename to packages/jsx-directive/src/rollup.ts
diff --git a/packages/jsx-vue-directive/src/vite.ts b/packages/jsx-directive/src/vite.ts
similarity index 100%
rename from packages/jsx-vue-directive/src/vite.ts
rename to packages/jsx-directive/src/vite.ts
diff --git a/packages/jsx-vue-directive/src/webpack.ts b/packages/jsx-directive/src/webpack.ts
similarity index 100%
rename from packages/jsx-vue-directive/src/webpack.ts
rename to packages/jsx-directive/src/webpack.ts
diff --git a/packages/jsx-vue-directive/tests/__snapshots__/v-for.test.ts.snap b/packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap
similarity index 100%
rename from packages/jsx-vue-directive/tests/__snapshots__/v-for.test.ts.snap
rename to packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap
diff --git a/packages/jsx-vue-directive/tests/__snapshots__/v-if.test.ts.snap b/packages/jsx-directive/tests/__snapshots__/v-if.test.ts.snap
similarity index 100%
rename from packages/jsx-vue-directive/tests/__snapshots__/v-if.test.ts.snap
rename to packages/jsx-directive/tests/__snapshots__/v-if.test.ts.snap
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-for/v-for.setup.tsx b/packages/jsx-directive/tests/fixtures/v-for/v-for.setup.tsx
similarity index 100%
rename from packages/jsx-vue-directive/tests/fixtures/v-for/v-for.setup.tsx
rename to packages/jsx-directive/tests/fixtures/v-for/v-for.setup.tsx
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-for/v-for.vue b/packages/jsx-directive/tests/fixtures/v-for/v-for.vue
similarity index 100%
rename from packages/jsx-vue-directive/tests/fixtures/v-for/v-for.vue
rename to packages/jsx-directive/tests/fixtures/v-for/v-for.vue
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-if/v-else-if.setup.tsx b/packages/jsx-directive/tests/fixtures/v-if/v-else-if.setup.tsx
similarity index 100%
rename from packages/jsx-vue-directive/tests/fixtures/v-if/v-else-if.setup.tsx
rename to packages/jsx-directive/tests/fixtures/v-if/v-else-if.setup.tsx
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-if/v-else-if.vue b/packages/jsx-directive/tests/fixtures/v-if/v-else-if.vue
similarity index 100%
rename from packages/jsx-vue-directive/tests/fixtures/v-if/v-else-if.vue
rename to packages/jsx-directive/tests/fixtures/v-if/v-else-if.vue
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-if/v-else.setup.tsx b/packages/jsx-directive/tests/fixtures/v-if/v-else.setup.tsx
similarity index 100%
rename from packages/jsx-vue-directive/tests/fixtures/v-if/v-else.setup.tsx
rename to packages/jsx-directive/tests/fixtures/v-if/v-else.setup.tsx
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-if/v-else.vue b/packages/jsx-directive/tests/fixtures/v-if/v-else.vue
similarity index 100%
rename from packages/jsx-vue-directive/tests/fixtures/v-if/v-else.vue
rename to packages/jsx-directive/tests/fixtures/v-if/v-else.vue
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-if/v-if-nested.setup.tsx b/packages/jsx-directive/tests/fixtures/v-if/v-if-nested.setup.tsx
similarity index 100%
rename from packages/jsx-vue-directive/tests/fixtures/v-if/v-if-nested.setup.tsx
rename to packages/jsx-directive/tests/fixtures/v-if/v-if-nested.setup.tsx
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-if/v-if-nested.vue b/packages/jsx-directive/tests/fixtures/v-if/v-if-nested.vue
similarity index 100%
rename from packages/jsx-vue-directive/tests/fixtures/v-if/v-if-nested.vue
rename to packages/jsx-directive/tests/fixtures/v-if/v-if-nested.vue
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-if/v-if.setup.tsx b/packages/jsx-directive/tests/fixtures/v-if/v-if.setup.tsx
similarity index 100%
rename from packages/jsx-vue-directive/tests/fixtures/v-if/v-if.setup.tsx
rename to packages/jsx-directive/tests/fixtures/v-if/v-if.setup.tsx
diff --git a/packages/jsx-vue-directive/tests/fixtures/v-if/v-if.vue b/packages/jsx-directive/tests/fixtures/v-if/v-if.vue
similarity index 100%
rename from packages/jsx-vue-directive/tests/fixtures/v-if/v-if.vue
rename to packages/jsx-directive/tests/fixtures/v-if/v-if.vue
diff --git a/packages/jsx-vue-directive/tests/v-for.test.ts b/packages/jsx-directive/tests/v-for.test.ts
similarity index 100%
rename from packages/jsx-vue-directive/tests/v-for.test.ts
rename to packages/jsx-directive/tests/v-for.test.ts
diff --git a/packages/jsx-vue-directive/tests/v-if.test.ts b/packages/jsx-directive/tests/v-if.test.ts
similarity index 100%
rename from packages/jsx-vue-directive/tests/v-if.test.ts
rename to packages/jsx-directive/tests/v-if.test.ts
diff --git a/packages/jsx-vue-directive/tsup.config.ts b/packages/jsx-directive/tsup.config.ts
similarity index 100%
rename from packages/jsx-vue-directive/tsup.config.ts
rename to packages/jsx-directive/tsup.config.ts
diff --git a/packages/jsx-vue-directive/README.md b/packages/jsx-vue-directive/README.md
deleted file mode 100644
index c41ea6464..000000000
--- a/packages/jsx-vue-directive/README.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# @vue-macros/jsx-vue-directive [![npm](https://img.shields.io/npm/v/@vue-macros/jsx-vue-directive.svg)](https://npmjs.com/package/@vue-macros/jsx-vue-directive)
-
-Please refer to [README.md](https://github.com/sxzz/unplugin-vue-macros#readme)
diff --git a/packages/macros/package.json b/packages/macros/package.json
index 97d4814e8..fbe37ed3e 100644
--- a/packages/macros/package.json
+++ b/packages/macros/package.json
@@ -112,13 +112,13 @@
     "@vue-macros/export-expose": "workspace:*",
     "@vue-macros/export-props": "workspace:*",
     "@vue-macros/hoist-static": "workspace:*",
+    "@vue-macros/jsx-directive": "workspace:*",
     "@vue-macros/named-template": "workspace:*",
     "@vue-macros/reactivity-transform": "workspace:*",
     "@vue-macros/setup-block": "workspace:*",
     "@vue-macros/setup-component": "workspace:*",
     "@vue-macros/setup-sfc": "workspace:*",
     "@vue-macros/short-emits": "workspace:*",
-    "@vue-macros/jsx-vue-directive": "workspace:*",
     "unplugin": "^1.4.0",
     "unplugin-combine": "^0.7.0",
     "unplugin-vue-define-options": "workspace:*"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 36c1973c1..6b983e754 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -399,7 +399,7 @@ importers:
         specifier: ^1.4.0
         version: 1.4.0
 
-  packages/jsx-vue-directive:
+  packages/jsx-directive:
     dependencies:
       '@vue-macros/common':
         specifier: workspace:~
@@ -408,11 +408,8 @@ importers:
         specifier: ^1.3.1
         version: 1.4.0
     devDependencies:
-      rollup:
-        specifier: ^3.20.3
-        version: 3.26.2
       vue:
-        specifier: ^3.3.0-alpha.9
+        specifier: ^3.3.4
         version: 3.3.4
 
   packages/macros:
@@ -459,9 +456,9 @@ importers:
       '@vue-macros/hoist-static':
         specifier: workspace:*
         version: link:../hoist-static
-      '@vue-macros/jsx-vue-directive':
+      '@vue-macros/jsx-directive':
         specifier: workspace:*
-        version: link:../jsx-vue-directive
+        version: link:../jsx-directive
       '@vue-macros/named-template':
         specifier: workspace:*
         version: link:../named-template

From 052099bbef73ca3d6270091cec4ebb913845b350 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Mon, 24 Jul 2023 12:18:55 +0800
Subject: [PATCH 04/11] docs: fix

---
 docs/features/jsx-directive.md       | 37 ++++++++++++++++++++++++++++
 docs/features/jsx-vue-directive.md   | 35 --------------------------
 docs/zh-CN/features/jsx-directive.md | 37 ++++++++++++++++++++++++++++
 3 files changed, 74 insertions(+), 35 deletions(-)
 create mode 100644 docs/features/jsx-directive.md
 delete mode 100644 docs/features/jsx-vue-directive.md
 create mode 100644 docs/zh-CN/features/jsx-directive.md

diff --git a/docs/features/jsx-directive.md b/docs/features/jsx-directive.md
new file mode 100644
index 000000000..f8fc5b2f7
--- /dev/null
+++ b/docs/features/jsx-directive.md
@@ -0,0 +1,37 @@
+# jsxDirective
+
+<StabilityLevel level="experimental" />
+
+`v-if` and `v-for` directive for jsx.
+
+|   Features   |     Supported      |
+| :----------: | :----------------: |
+|    Vue 3     | :white_check_mark: |
+|    Nuxt 3    | :white_check_mark: |
+|    Vue 2     | :white_check_mark: |
+| Volar(v-for) |        :x:         |
+
+## Usage
+
+```vue
+<script setup lang="tsx">
+const { foo, list } = defineProps<{
+  foo: number
+  list: number[]
+}>()
+
+defineRender(() => (
+  <>
+    <div v-if={foo === 0}>
+      <div v-if={foo === 0}>0-0</div>
+      <div v-else-if={foo === 1}>0-1</div>
+      <div v-else>0-2</div>
+    </div>
+
+    <div v-for={(i, index) in list} key={index}>
+      {i}
+    </div>
+  </>
+))
+</script>
+```
diff --git a/docs/features/jsx-vue-directive.md b/docs/features/jsx-vue-directive.md
deleted file mode 100644
index 5e2189304..000000000
--- a/docs/features/jsx-vue-directive.md
+++ /dev/null
@@ -1,35 +0,0 @@
-# exportProps
-
-<StabilityLevel level="experimental" />
-
-`v-if` & `v-for` directive for jsx.
-
-|   Features   |     Supported      |
-| :----------: | :----------------: |
-|    Vue 3     | :white_check_mark: |
-|    Nuxt 3    | :white_check_mark: |
-|    Vue 2     | :white_check_mark: |
-| Volar(v-for) |        :x:         |
-
-## Usage
-
-```vue
-<script setup lang="tsx">
-const { foo = 0, list=[1, 2, 3] } = defineProps<{
-  foo: number,
-  list: number[]
-}>()
-
-export default () => <>
-  <div v-if={foo===0}>
-    <div v-if={foo===0}>0-0</div>
-    <div v-else-if={foo===1}>0-1</div>
-    <div v-else>0-2</div>
-  </div>
-
-  <div v-for={(i, index) in list} key={index}>
-    {i}
-  </div>
-</>
-</script>
-```
diff --git a/docs/zh-CN/features/jsx-directive.md b/docs/zh-CN/features/jsx-directive.md
new file mode 100644
index 000000000..f8fc5b2f7
--- /dev/null
+++ b/docs/zh-CN/features/jsx-directive.md
@@ -0,0 +1,37 @@
+# jsxDirective
+
+<StabilityLevel level="experimental" />
+
+`v-if` and `v-for` directive for jsx.
+
+|   Features   |     Supported      |
+| :----------: | :----------------: |
+|    Vue 3     | :white_check_mark: |
+|    Nuxt 3    | :white_check_mark: |
+|    Vue 2     | :white_check_mark: |
+| Volar(v-for) |        :x:         |
+
+## Usage
+
+```vue
+<script setup lang="tsx">
+const { foo, list } = defineProps<{
+  foo: number
+  list: number[]
+}>()
+
+defineRender(() => (
+  <>
+    <div v-if={foo === 0}>
+      <div v-if={foo === 0}>0-0</div>
+      <div v-else-if={foo === 1}>0-1</div>
+      <div v-else>0-2</div>
+    </div>
+
+    <div v-for={(i, index) in list} key={index}>
+      {i}
+    </div>
+  </>
+))
+</script>
+```

From e1963af923aa53b8de5dd4b8f9e990bc066345b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Mon, 24 Jul 2023 12:22:34 +0800
Subject: [PATCH 05/11] chore: modify author

---
 packages/jsx-directive/package.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/jsx-directive/package.json b/packages/jsx-directive/package.json
index e78c3f8bf..84d3556f8 100644
--- a/packages/jsx-directive/package.json
+++ b/packages/jsx-directive/package.json
@@ -23,7 +23,10 @@
     "url": "git+https://github.com/sxzz/vue-macros.git",
     "directory": "packages/jsx-directive"
   },
-  "author": "三咲智子 <sxzz@sxzz.moe>",
+  "author": "zhiyuanzmj",
+  "contributors": [
+    "三咲智子 <sxzz@sxzz.moe>"
+  ],
   "files": [
     "dist"
   ],

From 2aa7d25e3730f1c849d5725a7cc3b39794515b4b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Mon, 24 Jul 2023 12:24:03 +0800
Subject: [PATCH 06/11] docs: add entry

---
 docs/.vitepress/locales/common.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/.vitepress/locales/common.ts b/docs/.vitepress/locales/common.ts
index bbb673244..f51d8dfa2 100644
--- a/docs/.vitepress/locales/common.ts
+++ b/docs/.vitepress/locales/common.ts
@@ -173,6 +173,10 @@ export const sidebar = (lang: string): DefaultTheme.SidebarItem[] => {
               text: 'exportExpose',
               link: `${urlPrefix}/features/export-expose`,
             },
+            {
+              text: 'jsxDirective',
+              link: `${urlPrefix}/features/jsx-directive`,
+            },
           ],
         },
       ],

From 53289090d59d2a1136dc0591b082c0648df995fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Mon, 24 Jul 2023 13:12:49 +0800
Subject: [PATCH 07/11] style: format

---
 packages/jsx-directive/src/core/index.ts      |   7 +-
 packages/jsx-directive/src/core/v-for.ts      |   9 +-
 packages/jsx-directive/src/core/v-if.ts       |  10 +-
 packages/jsx-directive/src/index.ts           |   4 +
 .../tests/__snapshots__/v-for.test.ts.snap    |  20 ++--
 .../tests/__snapshots__/v-if.test.ts.snap     | 102 ++++++++++--------
 .../tests/fixtures/v-for/v-for.setup.tsx      |  12 ++-
 .../tests/fixtures/v-for/v-for.vue            |   6 +-
 .../tests/fixtures/v-if/v-else-if.setup.tsx   |  12 ++-
 .../tests/fixtures/v-if/v-else-if.vue         |  10 +-
 .../tests/fixtures/v-if/v-else.setup.tsx      |  12 ++-
 .../tests/fixtures/v-if/v-else.vue            |  12 +--
 .../tests/fixtures/v-if/v-if-nested.setup.tsx |  16 +--
 .../tests/fixtures/v-if/v-if-nested.vue       |  14 +--
 .../tests/fixtures/v-if/v-if.setup.tsx        |  10 +-
 .../tests/fixtures/v-if/v-if.vue              |  10 +-
 16 files changed, 149 insertions(+), 117 deletions(-)

diff --git a/packages/jsx-directive/src/core/index.ts b/packages/jsx-directive/src/core/index.ts
index 74e83efb2..7aeffc440 100644
--- a/packages/jsx-directive/src/core/index.ts
+++ b/packages/jsx-directive/src/core/index.ts
@@ -11,7 +11,10 @@ import { vForTransform } from './v-for'
 
 export function transformJsxVueDirective(code: string, id: string) {
   const lang = getLang(id)
-  let asts: { ast: Program; offset: number }[] = []
+  let asts: {
+    ast: Program
+    offset: number
+  }[] = []
   if (lang === 'vue') {
     const { scriptSetup, getSetupAst, script, getScriptAst } = parseSFC(
       code,
@@ -26,7 +29,7 @@ export function transformJsxVueDirective(code: string, id: string) {
   } else if (['jsx', 'tsx'].includes(lang)) {
     asts = [{ ast: babelParse(code, lang), offset: 0 }]
   } else {
-    return null
+    return
   }
 
   const s = new MagicString(code)
diff --git a/packages/jsx-directive/src/core/v-for.ts b/packages/jsx-directive/src/core/v-for.ts
index ea599a2e0..3f91b3551 100644
--- a/packages/jsx-directive/src/core/v-for.ts
+++ b/packages/jsx-directive/src/core/v-for.ts
@@ -7,7 +7,7 @@ import {
 import { type MagicString, walkAST } from '@vue-macros/common'
 
 export function vForTransform(ast: Program, s: MagicString, offset = 0) {
-  if (!s.slice(ast.start! + offset, ast.end! + offset).includes('v-for')) return
+  if (!s.sliceNode(ast, { offset }).includes('v-for')) return
 
   const nodes: {
     node: JSXElement
@@ -19,8 +19,9 @@ export function vForTransform(ast: Program, s: MagicString, offset = 0) {
       if (node.type !== 'JSXElement') return
 
       const attribute = node.openingElement.attributes.find(
-        (i) => i.type === 'JSXAttribute' && ['v-for'].includes(`${i.name.name}`)
-      ) as JSXAttribute
+        (i): i is JSXAttribute =>
+          i.type === 'JSXAttribute' && ['v-for'].includes(`${i.name.name}`)
+      )
       if (attribute) {
         nodes.push({
           node,
@@ -46,6 +47,4 @@ export function vForTransform(ast: Program, s: MagicString, offset = 0) {
       s.remove(attribute.start! + offset - 1, attribute.end! + offset)
     }
   })
-
-  return s
 }
diff --git a/packages/jsx-directive/src/core/v-if.ts b/packages/jsx-directive/src/core/v-if.ts
index 51b92033e..d9f52120b 100644
--- a/packages/jsx-directive/src/core/v-if.ts
+++ b/packages/jsx-directive/src/core/v-if.ts
@@ -7,10 +7,10 @@ import {
 import { type MagicString, walkAST } from '@vue-macros/common'
 
 export function vIfTransform(ast: Program, s: MagicString, offset = 0) {
-  if (!s.slice(ast.start! + offset, ast.end! + offset).includes('v-if')) return
+  if (!s.sliceNode(ast, { offset }).includes('v-if')) return
 
   const nodeMap = new Map<
-    any,
+    Node,
     {
       node: JSXElement
       attribute: JSXAttribute
@@ -27,9 +27,9 @@ export function vIfTransform(ast: Program, s: MagicString, offset = 0) {
           ['v-if', 'v-else-if', 'v-else'].includes(`${i.name.name}`)
       ) as JSXAttribute
       if (attribute) {
-        if (!nodeMap.has(parent)) nodeMap.set(parent, [])
+        if (!nodeMap.has(parent!)) nodeMap.set(parent!, [])
 
-        nodeMap.get(parent)?.push({
+        nodeMap.get(parent!)?.push({
           node,
           attribute,
         })
@@ -60,6 +60,4 @@ export function vIfTransform(ast: Program, s: MagicString, offset = 0) {
       s.appendRight(node.end! + offset, ' }')
     }
   })
-
-  return s
 }
diff --git a/packages/jsx-directive/src/index.ts b/packages/jsx-directive/src/index.ts
index c8e561006..7497d408d 100644
--- a/packages/jsx-directive/src/index.ts
+++ b/packages/jsx-directive/src/index.ts
@@ -2,6 +2,8 @@ import { createUnplugin } from 'unplugin'
 import {
   type BaseOptions,
   type MarkRequired,
+  REGEX_LANG_JSX,
+  REGEX_NODE_MODULES,
   createFilter,
   detectVueVersion,
 } from '@vue-macros/common'
@@ -13,6 +15,8 @@ export type OptionsResolved = MarkRequired<Options, 'version'>
 function resolveOption(options: Options): OptionsResolved {
   const version = options.version || detectVueVersion()
   return {
+    include: [REGEX_LANG_JSX],
+    exclude: [REGEX_NODE_MODULES],
     ...options,
     version,
   }
diff --git a/packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap b/packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap
index 1e20a6f1c..fd6632536 100644
--- a/packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap
+++ b/packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap
@@ -3,23 +3,27 @@
 exports[`jsx-vue-directive > v-for > ./fixtures/v-for/v-for.setup.tsx 1`] = `
 "const list = [1, 2, 3]
 
-export default () => <>
-   { list.map((i, index)=> <div key={index}>
-    <div>{i}</div>
-  </div>) }  
-</>"
+export default () => (
+  <>
+     { list.map((i, index)=> <div key={index}>
+      <div>{i}</div>
+    </div>) }
+  </>
+)
+"
 `;
 
 exports[`jsx-vue-directive > v-for > ./fixtures/v-for/v-for.vue 1`] = `
 "<script setup lang=\\"tsx\\">
 const list = [1, 2, 3]
 
-defineRender(() => 
+defineRender(() => (
   <>
      { list.map(i=> <div key={i}>
       <div>{i}</div>
     </div>) }
   </>
-)
-</script>"
+))
+</script>
+"
 `;
diff --git a/packages/jsx-directive/tests/__snapshots__/v-if.test.ts.snap b/packages/jsx-directive/tests/__snapshots__/v-if.test.ts.snap
index 47f5ad269..994bd9a28 100644
--- a/packages/jsx-directive/tests/__snapshots__/v-if.test.ts.snap
+++ b/packages/jsx-directive/tests/__snapshots__/v-if.test.ts.snap
@@ -5,11 +5,13 @@ exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-else.setup.tsx 1`] = `
   foo: number
 }>()
 
-export default () => <>
-  { foo===0 ? <div>0</div> :  
-  foo===1 ? <div>1</div> :
-  <div v-else={foo===2}>2</div> }   
-</>
+export default () => (
+  <>
+    { foo === 0 ? <div>0</div> :
+    foo === 1 ? <div>1</div> :
+    <div v-else={foo === 2}>2</div> }
+  </>
+)
 "
 `;
 
@@ -19,14 +21,15 @@ const { foo = 2 } = defineProps<{
   foo: number
 }>()
 
-defineRender(()=> 
+defineRender(() => (
   <>
-    { foo===0 ? <div>0</div> :
-    foo===1 ? <div>1</div> :
-    <div v-else={foo===2}>2</div> }   
+    { foo === 0 ? <div>0</div> :
+    foo === 1 ? <div>1</div> :
+    <div v-else={foo === 2}>2</div> }
   </>
-)
-</script>"
+))
+</script>
+"
 `;
 
 exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-else-if.setup.tsx 1`] = `
@@ -34,11 +37,14 @@ exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-else-if.setup.tsx 1`] = `
   foo: number
 }>()
 
-export default () => <>
-  { foo===0 ? <div>0</div> :  
-  foo===1 ? <div>1</div> :
-  foo===2 ? <div>2</div> : '' }  
-</>"
+export default () => (
+  <>
+    { foo === 0 ? <div>0</div> :
+    foo === 1 ? <div>1</div> :
+    foo === 2 ? <div>2</div> : '' }
+  </>
+)
+"
 `;
 
 exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-else-if.vue 1`] = `
@@ -47,13 +53,14 @@ const { foo = 0 } = defineProps<{
   foo: number
 }>()
 
-defineRender(() => 
+defineRender(() => (
   <>
-    { foo===0 ? <div>0</div> :  
-    foo===1 ? <div>1</div> : '' }  
+    { foo === 0 ? <div>0</div> :
+    foo === 1 ? <div>1</div> : '' }
   </>
-)
-</script>"
+))
+</script>
+"
 `;
 
 exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-if.setup.tsx 1`] = `
@@ -62,10 +69,12 @@ exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-if.setup.tsx 1`] = `
 }>()
 
 export default () => {
-  return <>
-    { foo===0 ? <div>0</div> : '' }
-    { foo===1 ? <div>1</div> : '' }
-  </>
+  return (
+    <>
+      { foo === 0 ? <div>0</div> : '' }
+      { foo === 1 ? <div>1</div> : '' }
+    </>
+  )
 }
 "
 `;
@@ -76,13 +85,14 @@ const { foo } = defineProps<{
   foo: number
 }>()
 
-defineRender(()=> 
+defineRender(() => (
   <>
-    { foo===0 ? <div>0</div> : '' }  
-    { foo===1 ? <div>1</div> : '' }
+    { foo === 0 ? <div>0</div> : '' }
+    { foo === 1 ? <div>1</div> : '' }
   </>
-)
-</script>"
+))
+</script>
+"
 `;
 
 exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-if-nested.setup.tsx 1`] = `
@@ -90,13 +100,16 @@ exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-if-nested.setup.tsx 1`] =
   foo: number
 }>()
 
-export default () => <>
-  { foo===0 ? <div>
-    { foo===0 ? <div>0-0</div> :
-    foo===1 ? <div>0-1</div> :
-    <div v-else>0-2</div> }
-  </div> : '' }
-</>"
+export default () => (
+  <>
+    { foo === 0 ? <div>
+      { foo === 0 ? <div>0-0</div> :
+      foo === 1 ? <div>0-1</div> :
+      <div v-else>0-2</div> }
+    </div> : '' }
+  </>
+)
+"
 `;
 
 exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-if-nested.vue 1`] = `
@@ -105,14 +118,15 @@ const { foo = 0 } = defineProps<{
   foo: number
 }>()
 
-defineRender(() => 
+defineRender(() => (
   <>
-    { foo===0 ? <div>
-      { foo===0 ? <div>0-0</div> :
-      foo===1 ? <div>0-1</div> :
+    { foo === 0 ? <div>
+      { foo === 0 ? <div>0-0</div> :
+      foo === 1 ? <div>0-1</div> :
       <div v-else>0-2</div> }
-    </div> : '' }  
+    </div> : '' }
   </>
-)
-</script>"
+))
+</script>
+"
 `;
diff --git a/packages/jsx-directive/tests/fixtures/v-for/v-for.setup.tsx b/packages/jsx-directive/tests/fixtures/v-for/v-for.setup.tsx
index f907ab426..8ca0a7613 100644
--- a/packages/jsx-directive/tests/fixtures/v-for/v-for.setup.tsx
+++ b/packages/jsx-directive/tests/fixtures/v-for/v-for.setup.tsx
@@ -1,7 +1,9 @@
 const list = [1, 2, 3]
 
-export default () => <>
-  <div v-for={(i, index) in list} key={index}>
-    <div>{i}</div>
-  </div>  
-</>
\ No newline at end of file
+export default () => (
+  <>
+    <div v-for={(i, index) in list} key={index}>
+      <div>{i}</div>
+    </div>
+  </>
+)
diff --git a/packages/jsx-directive/tests/fixtures/v-for/v-for.vue b/packages/jsx-directive/tests/fixtures/v-for/v-for.vue
index 6ea94efd2..7eeca3ffd 100644
--- a/packages/jsx-directive/tests/fixtures/v-for/v-for.vue
+++ b/packages/jsx-directive/tests/fixtures/v-for/v-for.vue
@@ -1,11 +1,11 @@
 <script setup lang="tsx">
 const list = [1, 2, 3]
 
-defineRender(() => 
+defineRender(() => (
   <>
     <div v-for={i in list} key={i}>
       <div>{i}</div>
     </div>
   </>
-)
-</script>
\ No newline at end of file
+))
+</script>
diff --git a/packages/jsx-directive/tests/fixtures/v-if/v-else-if.setup.tsx b/packages/jsx-directive/tests/fixtures/v-if/v-else-if.setup.tsx
index 81ac59bd3..d5a33d750 100644
--- a/packages/jsx-directive/tests/fixtures/v-if/v-else-if.setup.tsx
+++ b/packages/jsx-directive/tests/fixtures/v-if/v-else-if.setup.tsx
@@ -2,8 +2,10 @@ const { foo = 0 } = defineProps<{
   foo: number
 }>()
 
-export default () => <>
-  <div v-if={foo===0}>0</div>  
-  <div v-else-if={foo===1}>1</div>
-  <div v-else-if={foo===2}>2</div>  
-</>
\ No newline at end of file
+export default () => (
+  <>
+    <div v-if={foo === 0}>0</div>
+    <div v-else-if={foo === 1}>1</div>
+    <div v-else-if={foo === 2}>2</div>
+  </>
+)
diff --git a/packages/jsx-directive/tests/fixtures/v-if/v-else-if.vue b/packages/jsx-directive/tests/fixtures/v-if/v-else-if.vue
index 23dbe1fc2..da1af84cc 100644
--- a/packages/jsx-directive/tests/fixtures/v-if/v-else-if.vue
+++ b/packages/jsx-directive/tests/fixtures/v-if/v-else-if.vue
@@ -3,10 +3,10 @@ const { foo = 0 } = defineProps<{
   foo: number
 }>()
 
-defineRender(() => 
+defineRender(() => (
   <>
-    <div v-if={foo===0}>0</div>  
-    <div v-else-if={foo===1}>1</div>  
+    <div v-if={foo === 0}>0</div>
+    <div v-else-if={foo === 1}>1</div>
   </>
-)
-</script>
\ No newline at end of file
+))
+</script>
diff --git a/packages/jsx-directive/tests/fixtures/v-if/v-else.setup.tsx b/packages/jsx-directive/tests/fixtures/v-if/v-else.setup.tsx
index f47e4e80d..942017f0b 100644
--- a/packages/jsx-directive/tests/fixtures/v-if/v-else.setup.tsx
+++ b/packages/jsx-directive/tests/fixtures/v-if/v-else.setup.tsx
@@ -2,8 +2,10 @@ const { foo = 2 } = defineProps<{
   foo: number
 }>()
 
-export default () => <>
-  <div v-if={foo===0}>0</div>  
-  <div v-else-if={foo===1}>1</div>
-  <div v-else={foo===2}>2</div>   
-</>
+export default () => (
+  <>
+    <div v-if={foo === 0}>0</div>
+    <div v-else-if={foo === 1}>1</div>
+    <div v-else={foo === 2}>2</div>
+  </>
+)
diff --git a/packages/jsx-directive/tests/fixtures/v-if/v-else.vue b/packages/jsx-directive/tests/fixtures/v-if/v-else.vue
index 979dd5520..044834c51 100644
--- a/packages/jsx-directive/tests/fixtures/v-if/v-else.vue
+++ b/packages/jsx-directive/tests/fixtures/v-if/v-else.vue
@@ -3,11 +3,11 @@ const { foo = 2 } = defineProps<{
   foo: number
 }>()
 
-defineRender(()=> 
+defineRender(() => (
   <>
-    <div v-if={foo===0}>0</div>
-    <div v-else-if={foo===1}>1</div>
-    <div v-else={foo===2}>2</div>   
+    <div v-if={foo === 0}>0</div>
+    <div v-else-if={foo === 1}>1</div>
+    <div v-else={foo === 2}>2</div>
   </>
-)
-</script>
\ No newline at end of file
+))
+</script>
diff --git a/packages/jsx-directive/tests/fixtures/v-if/v-if-nested.setup.tsx b/packages/jsx-directive/tests/fixtures/v-if/v-if-nested.setup.tsx
index a7d6fad9f..1d6c049b8 100644
--- a/packages/jsx-directive/tests/fixtures/v-if/v-if-nested.setup.tsx
+++ b/packages/jsx-directive/tests/fixtures/v-if/v-if-nested.setup.tsx
@@ -2,10 +2,12 @@ const { foo = 0 } = defineProps<{
   foo: number
 }>()
 
-export default () => <>
-  <div v-if={foo===0}>
-    <div v-if={foo===0}>0-0</div>
-    <div v-else-if={foo===1}>0-1</div>
-    <div v-else>0-2</div>
-  </div>
-</>
\ No newline at end of file
+export default () => (
+  <>
+    <div v-if={foo === 0}>
+      <div v-if={foo === 0}>0-0</div>
+      <div v-else-if={foo === 1}>0-1</div>
+      <div v-else>0-2</div>
+    </div>
+  </>
+)
diff --git a/packages/jsx-directive/tests/fixtures/v-if/v-if-nested.vue b/packages/jsx-directive/tests/fixtures/v-if/v-if-nested.vue
index 45d47b782..481f61217 100644
--- a/packages/jsx-directive/tests/fixtures/v-if/v-if-nested.vue
+++ b/packages/jsx-directive/tests/fixtures/v-if/v-if-nested.vue
@@ -3,13 +3,13 @@ const { foo = 0 } = defineProps<{
   foo: number
 }>()
 
-defineRender(() => 
+defineRender(() => (
   <>
-    <div v-if={foo===0}>
-      <div v-if={foo===0}>0-0</div>
-      <div v-else-if={foo===1}>0-1</div>
+    <div v-if={foo === 0}>
+      <div v-if={foo === 0}>0-0</div>
+      <div v-else-if={foo === 1}>0-1</div>
       <div v-else>0-2</div>
-    </div>  
+    </div>
   </>
-)
-</script>
\ No newline at end of file
+))
+</script>
diff --git a/packages/jsx-directive/tests/fixtures/v-if/v-if.setup.tsx b/packages/jsx-directive/tests/fixtures/v-if/v-if.setup.tsx
index 96a802bd5..29561a3fe 100644
--- a/packages/jsx-directive/tests/fixtures/v-if/v-if.setup.tsx
+++ b/packages/jsx-directive/tests/fixtures/v-if/v-if.setup.tsx
@@ -3,8 +3,10 @@ const { foo } = defineProps<{
 }>()
 
 export default () => {
-  return <>
-    <div v-if={foo===0}>0</div>
-    <div v-if={foo===1}>1</div>
-  </>
+  return (
+    <>
+      <div v-if={foo === 0}>0</div>
+      <div v-if={foo === 1}>1</div>
+    </>
+  )
 }
diff --git a/packages/jsx-directive/tests/fixtures/v-if/v-if.vue b/packages/jsx-directive/tests/fixtures/v-if/v-if.vue
index c01f05689..7a34fef18 100644
--- a/packages/jsx-directive/tests/fixtures/v-if/v-if.vue
+++ b/packages/jsx-directive/tests/fixtures/v-if/v-if.vue
@@ -3,10 +3,10 @@ const { foo } = defineProps<{
   foo: number
 }>()
 
-defineRender(()=> 
+defineRender(() => (
   <>
-    <div v-if={foo===0}>0</div>  
-    <div v-if={foo===1}>1</div>
+    <div v-if={foo === 0}>0</div>
+    <div v-if={foo === 1}>1</div>
   </>
-)
-</script>
\ No newline at end of file
+))
+</script>

From 8d16db5e789bb68ee3a0a1f474e54526048aae03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Mon, 24 Jul 2023 13:13:08 +0800
Subject: [PATCH 08/11] fix: integration

---
 packages/macros/src/index.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/macros/src/index.ts b/packages/macros/src/index.ts
index 00af5d1d4..d0ddc99cd 100644
--- a/packages/macros/src/index.ts
+++ b/packages/macros/src/index.ts
@@ -48,6 +48,9 @@ import VueExportProps, {
 import VueHoistStatic, {
   type Options as OptionsHoistStatic,
 } from '@vue-macros/hoist-static'
+import VueJsxDirective, {
+  type Options as OptionsJsxDirective,
+} from '@vue-macros/jsx-directive'
 import VueNamedTemplate, {
   type Options as OptionsNamedTemplate,
 } from '@vue-macros/named-template'
@@ -66,9 +69,6 @@ import VueSetupSFC, {
 import VueShortEmits, {
   type Options as OptionsShortEmits,
 } from '@vue-macros/short-emits'
-import JsxVueDirective, { 
-  type Options as OptionsJsxVueDirective 
-} from '@vue-macros/jsx-vue-directive'
 
 export interface FeatureOptionsMap {
   betterDefine: OptionsBetterDefine
@@ -84,13 +84,13 @@ export interface FeatureOptionsMap {
   exportExpose: OptionsExportExpose
   exportProps: OptionsExportProps
   hoistStatic: OptionsHoistStatic
+  jsxDirective: OptionsJsxDirective
   namedTemplate: OptionsNamedTemplate
   reactivityTransform: OptionsReactivityTransform
   setupBlock: OptionsSetupBlock
   setupComponent: OptionsSetupComponent
   setupSFC: OptionsSetupSFC
   shortEmits: OptionsShortEmits
-  jsxVueDirective: OptionsJsxVueDirective
 }
 export type FeatureName = keyof FeatureOptionsMap
 export type FeatureOptions = FeatureOptionsMap[FeatureName]
@@ -139,13 +139,13 @@ export function resolveOptions({
   exportExpose,
   exportProps,
   hoistStatic,
+  jsxDirective,
   namedTemplate,
   reactivityTransform,
   setupBlock,
   setupComponent,
   setupSFC,
   shortEmits,
-  jsxVueDirective,
 }: Options): OptionsResolved {
   function resolveSubOptions<K extends FeatureName>(
     options: OptionalSubOptions<FeatureOptionsMap[K]>,
@@ -209,6 +209,9 @@ export function resolveOptions({
       { version },
       false
     ),
+    jsxDirective: resolveSubOptions<'jsxDirective'>(jsxDirective, {
+      version,
+    }),
     hoistStatic: resolveSubOptions<'hoistStatic'>(hoistStatic, { version }),
     namedTemplate: resolveSubOptions<'namedTemplate'>(namedTemplate, {
       version,
@@ -228,9 +231,6 @@ export function resolveOptions({
       { version },
       version < 3.3
     ),
-    jsxVueDirective: resolveSubOptions<'jsxVueDirective'>(jsxVueDirective, {
-      version,
-    }),
   }
 }
 
@@ -307,6 +307,7 @@ export default createCombinePlugin<Options | undefined>(
       ),
       resolvePlugin(VueHoistStatic, framework, options.hoistStatic),
       resolvePlugin(VueDefineOptions, framework, options.defineOptions),
+      resolvePlugin(VueJsxDirective, framework, options.jsxDirective),
       options.plugins.vue,
       options.plugins.vueJsx,
       resolvePlugin(VueDefineRender, framework, options.defineRender),
@@ -315,7 +316,6 @@ export default createCombinePlugin<Options | undefined>(
       framework === 'vite'
         ? Devtools({ nuxtContext: options.nuxtContext })
         : undefined,
-      resolvePlugin(JsxVueDirective, framework, options.jsxVueDirective),
     ].filter(Boolean)
 
     return {

From a50a064ce45c262c23a5ad1eb8698039dbc74a41 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Mon, 24 Jul 2023 13:17:44 +0800
Subject: [PATCH 09/11] chore: ignore TS errors

---
 packages/jsx-directive/tests/fixtures/v-for/v-for.setup.tsx | 1 +
 packages/jsx-directive/tests/fixtures/v-for/v-for.vue       | 1 +
 2 files changed, 2 insertions(+)

diff --git a/packages/jsx-directive/tests/fixtures/v-for/v-for.setup.tsx b/packages/jsx-directive/tests/fixtures/v-for/v-for.setup.tsx
index 8ca0a7613..da86c63b5 100644
--- a/packages/jsx-directive/tests/fixtures/v-for/v-for.setup.tsx
+++ b/packages/jsx-directive/tests/fixtures/v-for/v-for.setup.tsx
@@ -1,3 +1,4 @@
+// @ts-nocheck
 const list = [1, 2, 3]
 
 export default () => (
diff --git a/packages/jsx-directive/tests/fixtures/v-for/v-for.vue b/packages/jsx-directive/tests/fixtures/v-for/v-for.vue
index 7eeca3ffd..1a02d3b31 100644
--- a/packages/jsx-directive/tests/fixtures/v-for/v-for.vue
+++ b/packages/jsx-directive/tests/fixtures/v-for/v-for.vue
@@ -1,4 +1,5 @@
 <script setup lang="tsx">
+// @ts-nocheck
 const list = [1, 2, 3]
 
 defineRender(() => (

From 3b3af0f9eba35990992e98ebf3618c15595f91ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Mon, 24 Jul 2023 13:20:39 +0800
Subject: [PATCH 10/11] test: update snapshot

---
 packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap b/packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap
index fd6632536..46ae1546e 100644
--- a/packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap
+++ b/packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap
@@ -1,7 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`jsx-vue-directive > v-for > ./fixtures/v-for/v-for.setup.tsx 1`] = `
-"const list = [1, 2, 3]
+"// @ts-nocheck
+const list = [1, 2, 3]
 
 export default () => (
   <>
@@ -15,6 +16,7 @@ export default () => (
 
 exports[`jsx-vue-directive > v-for > ./fixtures/v-for/v-for.vue 1`] = `
 "<script setup lang=\\"tsx\\">
+// @ts-nocheck
 const list = [1, 2, 3]
 
 defineRender(() => (

From d07214f8c3e08703fccad83af1bb1bf48f796360 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=B8=89=E5=92=B2=E6=99=BA=E5=AD=90=20Kevin=20Deng?=
 <sxzz@sxzz.moe>
Date: Mon, 24 Jul 2023 13:25:35 +0800
Subject: [PATCH 11/11] chore: add changeset

---
 .changeset/brave-badgers-cheer.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/brave-badgers-cheer.md

diff --git a/.changeset/brave-badgers-cheer.md b/.changeset/brave-badgers-cheer.md
new file mode 100644
index 000000000..f47434bdd
--- /dev/null
+++ b/.changeset/brave-badgers-cheer.md
@@ -0,0 +1,6 @@
+---
+'@vue-macros/jsx-directive': minor
+'unplugin-vue-macros': minor
+---
+
+add jsx-directive plugin