fix(volar/jsx-directive): use getStart instead of pos for v-if and v-for (#949)

Author: zhiyuanzmj

packages/jsx-directive/tests/__snapshots__/v-for.test.ts.snap

@@ -11,7 +11,9 @@ const set = new Set(['1', '2', '3'])
 const object = { id: 1, name: 'admin' }
 let selected = 0
 
-const Comp = <>{__MACROS_renderList(4, (i) => <div>{i}</div>)}</>
+const Comp = () => {
+  return <>{__MACROS_renderList(4, (i) => <div>{i}</div>)}</>
+}
 
 defineRender(() => (
   <>

packages/jsx-directive/tests/fixtures/v-for/index.vue

@@ -7,7 +7,9 @@ const set = new Set(['1', '2', '3'])
 const object = { id: 1, name: 'admin' }
 let selected = 0
 
-const Comp = <div v-for={i in 4}>{i}</div>
+const Comp = () => {
+  return <div v-for={i in 4}>{i}</div>
+}
 
 defineRender(() => (
   <>

packages/volar/src/jsx-directive/v-for.ts

@@ -99,7 +99,13 @@ export function transformVFor(
       result.unshift('{')
     }
 
-    replaceSourceRange(codes, source, node.pos, node.pos, ...result)
+    replaceSourceRange(
+      codes,
+      source,
+      getStart(node, options),
+      getStart(node, options),
+      ...result,
+    )
 
     replaceSourceRange(
       codes,

packages/volar/src/jsx-directive/v-if.ts

@@ -23,9 +23,9 @@ export function transformVIf(
       replaceSourceRange(
         codes,
         source,
-        node.pos,
-        node.pos,
-        `${hasScope ? '{' : ' '}(`,
+        getStart(node, options),
+        getStart(node, options),
+        `${hasScope ? '{' : ''}(`,
         [
           getText(attribute.initializer.expression, options),
           source,