feat: support multiple spreadAttributes

Author: zhiyuanzmj

playground/virtual-dom/App.vue

@@ -1,6 +1,7 @@
 <script lang="tsx" setup>
 import { ref } from 'vue'
 import For from './for.vue'
+import Bind from './bind.vue'
 
 const count = ref(1)
 function Comp({ icon, getChildren }: any, { slots }: any) {
@@ -111,6 +112,11 @@ defineRender((
       <Comp3 />
       <Comp4 />
 
+      <div>
+        v-bind:
+        <Bind />
+      </div>
+
       <div>
         v-show:
         <span v-show={count.value}>

playground/virtual-dom/bind.vue

@@ -0,0 +1,23 @@
+<script setup lang="tsx">
+import { ref } from 'vue'
+
+function Comp(props: any) {
+  return (
+    <span>
+      {props}
+    </span>
+  )
+}
+
+const count = ref(0)
+defineRender(
+  <Comp
+    id={1}
+    v-model:value={count.value}
+    {...{ id: 2 }}
+    {...{
+      id: 3,
+    }}
+  />,
+)
+</script>

src/core/transform.ts

@@ -68,8 +68,11 @@ export function transformVueJsxVapor(
       ) {
         s.appendLeft(node.end! - 1, 'template')
       }
-      else if (node.type === 'JSXSpreadAttribute') {
-        s.appendLeft(node.start!, 'v-bind=')
+      else if (node.type === 'JSXSpreadAttribute' && parent?.type === 'JSXOpeningElement') {
+        const index = parent.attributes
+          .filter(attr => attr.type === 'JSXSpreadAttribute')
+          .findIndex(attr => attr === node)
+        s.appendLeft(node.start!, `${index ? `:v${index}` : 'v'}-bind=`)
         s.overwrite(node.start!, node.argument.start!, '"')
         s.overwrite(node.end! - 1, node.end!, '"')
       }
@@ -159,6 +162,7 @@ export function transformVueJsxVapor(
       code = code
         .replace('_cache', '_cache = []')
         .replaceAll(/_ctx\.(?!\$slots)/g, '')
+        .replaceAll(/{ "v\d+\-bind": ([\s\S]*) }/g, '$1')
         .replaceAll(/_resolveComponent\("(.*)"\)/g, ($0, $1) => `(() => { try { return ${$1} } catch { return ${$0} } })()`)
       return runtime === '"vue"' ? `(${code})()` : code
     }