feat: support double quote in v-for

Author: zhiyuanzmj

src/core/common.ts

@@ -20,9 +20,10 @@ export function overwrite(
   end: number | undefined,
   content: string,
   s: MagicString,
+  method: 'prependLeft' | 'prependRight' | 'appendLeft' | 'appendRight' = 'prependLeft',
 ) {
   if (start === end) {
-    s.prependLeft(start!, content)
+    s[method](start!, content)
   }
   else {
     s.overwrite(start!, end!, content)

src/core/transform.ts

@@ -45,7 +45,9 @@ export function transformVueJsxVapor(
         && /("|<.*?\/.*?>)/.test(s.sliceNode(node.expression))
       ) {
         rootNodes.unshift({
-          node: node.expression,
+          node: parent.name.name === 'v-for' && node.expression.type === 'BinaryExpression'
+            ? node.expression.right
+            : node.expression,
           postCallbacks: [],
           isAttributeValue: true,
         })
@@ -176,7 +178,7 @@ export function transformVueJsxVapor(
     postCallbacks?.forEach(callback => callback?.())
 
     const result = compile(node)
-      .replaceAll(/__PLACEHOLDER_(\d)/g, (_, $1) => placeholders[$1])
+      .replaceAll(/__PLACEHOLDER_(\d+)/g, (_, $1) => placeholders[$1])
     if (isAttributeValue) {
       s.overwriteNode(node, `__PLACEHOLDER_${placeholders.push(result) - 1}`)
     }

src/core/v-for.ts

@@ -1,6 +1,7 @@
 import type { MagicString } from '@vue-macros/common'
 import type { CallExpression, Node } from '@babel/types'
 import type { RootNodes } from './transform'
+import { overwrite } from './common'
 
 export function transformVFor(
   node: CallExpression,
@@ -12,27 +13,28 @@ export function transformVFor(
   if (
     argument.type !== 'FunctionExpression'
     && argument.type !== 'ArrowFunctionExpression'
+    || callee.type !== 'MemberExpression'
   )
     return
+  rootNodes.unshift(
+    {
+      node: callee.object,
+      isAttributeValue: true,
+    },
+    {
+      node: {
+        ...argument.body,
+        type: 'ReturnStatement',
+      },
+      isAttributeValue: true,
+    },
+  )
 
   const start = parent?.type === 'JSXExpressionContainer' ? parent.start! : node.start!
   const end = parent?.type === 'JSXExpressionContainer' ? parent.end! : node.end!
-
-  const left = s.sliceNode(argument.params)
-  const right = callee.type === 'MemberExpression'
-    ? s.sliceNode(callee.object)
-    : null
-  const directive = ` v-for="(${left}) in ${right}"`
-
-  rootNodes.unshift({
-    node: {
-      ...argument.body,
-      type: 'ReturnStatement',
-    },
-    isAttributeValue: true,
-  })
   return () => {
-    s.overwrite(start, argument.body.start!, `<template${directive}><component :is="()=>`)
+    overwrite(start, callee.object.start!, `<template v-for="(${s.sliceNode(argument.params)}) in `, s, 'appendRight')
+    s.overwrite(callee.object.end!, argument.body.start!, `"><component :is="()=>`)
     s.overwrite(argument.body.end!, end, `"/></template>`)
   }
 }