feat: support jsx in attribute

Author: zhiyuanzmj

playground/dom/App.vue

@@ -3,25 +3,29 @@ import { ref } from 'vue'
 import For from './for.vue'
 
 const count = ref(1)
-
-function Comp() {
-  return count.value
-    ? (
-      <div>
-        Comp1: 1
-      </div>
-      )
-    : 2
+function Comp({ icon, getChildren }: any, { slots }: any) {
+  const Children = getChildren?.()
+  return (
+    <div>
+      Comp:
+      <icon />
+      <Children />
+      <slot />
+      <slots.bottom />
+    </div>
+  )
 }
 
 function Comp1() {
-  return count.value
-    ? null
-    : Array.from({ length: count.value }).map((_, index) => (
-      <span>
-        {index}
-      </span>
-    ))
+  return (
+    !count.value
+      ? null
+      : Array.from({ length: count.value }).map((_, index) => (
+        <span>
+          {index}
+        </span>
+      ))
+  )
 }
 
 function Comp2() {
@@ -57,15 +61,45 @@ function Comp4() {
   )
 }
 
-defineRender(() => (
+const Component = <div>Component</div>
+
+defineRender((
   <>
-    <form onSubmit_prevent>
+    <form onSubmit_prevent class="flex items-center">
       <input
-        v-bind:value={count.value}
+        {...{
+          ...{ value: count.value },
+          ...count.value ? { for: 'id' } : {},
+        }}
         onInput={count.value = $event.target.value}
       />
       {/* Function Components */}
-      <Comp />
+      <component is={Component} />
+      <Comp
+        v-permission="post"
+        v-model_number={count.value}
+        icon={(
+          <i id="id">
+            {count.value
+              ? (
+                <span>
+                  {count.value}
+                </span>
+                )
+              : null}
+            +
+          </i>
+        )}
+        getChildren={() => {
+          const A = <div>A</div>
+          return A
+        }}
+      >
+        "default slot"
+        <template v-slot:bottom>
+          <div>"bottom slot"</div>
+        </template>
+      </Comp>
       <Comp1 />
       <Comp2 />
       <Comp3 />

playground/dom/package.json

@@ -9,6 +9,7 @@
     "@vue-macros/reactivity-transform": "^0.4.2",
     "@vue-macros/volar": "^0.18.10",
     "unplugin-vue-jsx-vapor": "workspace:*",
+    "unplugin-vue-macros": "^2.7.10",
     "vite": "^5.0.4",
     "vite-plugin-inspect": "^0.8.1"
   }

playground/dom/vite.config.ts

@@ -1,17 +1,22 @@
 import { defineConfig } from 'vite'
 import Inspect from 'vite-plugin-inspect'
 import Vue from '@vitejs/plugin-vue'
-import defineRender from '@vue-macros/define-render/vite'
 import VueJsxVapor from 'unplugin-vue-jsx-vapor/vite'
 import { compile } from '@vue/compiler-dom'
+import VueMacros from 'unplugin-vue-macros/vite'
 
 export default defineConfig({
   plugins: [
-    Vue(),
     VueJsxVapor({
       compile,
     }),
-    defineRender(),
+    VueMacros({
+      exportRender: true,
+      jsxDirective: false,
+      plugins: {
+        vue: Vue(),
+      },
+    }),
     Inspect(),
   ],
 })