fix(jsx-directive): add bracket for ternary expression in v-if (#559)

vue-macros · Nov 16, 2023 · a4b1b6b · a4b1b6b
1 parent f3c68c8
commit a4b1b6b
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 24 deletions.
diff --git a/.changeset/thick-crews-begin.md b/.changeset/thick-crews-begin.md
@@ -0,0 +1,6 @@
+---
+'@vue-macros/jsx-directive': patch
+'@vue-macros/volar': patch
+---
+
+Fix the incorrect execution order of the ternary expression in v-if.
diff --git a/packages/jsx-directive/src/core/v-if.ts b/packages/jsx-directive/src/core/v-if.ts
@@ -14,10 +14,10 @@ export function transformVIf(
       if (attribute.value)
         s.appendLeft(
           node.start! + offset,
-          `${attribute.name.name === 'v-if' && hasScope ? '{' : ''}${s.slice(
+          `${attribute.name.name === 'v-if' && hasScope ? '{' : ' '}(${s.slice(
             attribute.value.start! + offset + 1,
             attribute.value.end! + offset - 1
-          )} ? `
+          )}) ? `
         )
 
       s.appendRight(

diff --git a/packages/jsx-directive/tests/__snapshots__/v-if.test.ts.snap b/packages/jsx-directive/tests/__snapshots__/v-if.test.ts.snap
@@ -7,8 +7,8 @@ exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-else.tsx 1`] = `
 
 export default () => (
   <>
-    {foo === 0 ? <div>0</div> :
-    foo === 1 ? <div>1</div> :
+    {(foo === 0) ? <div>0</div> :
+     (foo === 1) ? <div>1</div> :
     <div>2</div>}
   </>
 )
@@ -23,8 +23,8 @@ const { foo = 2 } = defineProps<{
 
 defineRender(() => (
   <>
-    {foo === 0 ? <div>0</div> :
-    foo === 1 ? <div>1</div> :
+    {(foo === 0) ? <div>0</div> :
+     (foo === 1) ? <div>1</div> :
     <div>2</div>}
   </>
 ))
@@ -39,9 +39,9 @@ exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-else-if.tsx 1`] = `
 
 export default () => (
   <>
-    {foo === 0 ? <div>0</div> :
-    foo === 1 ? <div>1</div> :
-    foo === 2 ? <div>2</div> : null}
+    {(foo === 0) ? <div>0</div> :
+     (foo === 1) ? <div>1</div> :
+     (foo === 2) ? <div>2</div> : null}
   </>
 )
 "
@@ -55,8 +55,8 @@ const { foo = 0 } = defineProps<{
 
 defineRender(() => (
   <>
-    {foo === 0 ? <div>0</div> :
-    foo === 1 ? <div>1</div> : null}
+    {(foo === 0) ? <div>0</div> :
+     (foo === 1) ? <div>1</div> : null}
   </>
 ))
 </script>
@@ -71,8 +71,8 @@ exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-if.tsx 1`] = `
 export default () => {
   return (
     <>
-      {foo === 0 ? <div>0</div> : null}
-      {foo === 1 ? <div>1</div> : null}
+      {(foo === 0) ? <div>0</div> : null}
+      {(foo === 1) ? <div>1</div> : null}
     </>
   )
 }
@@ -87,8 +87,8 @@ const { foo } = defineProps<{
 
 defineRender(() => (
   <>
-    {foo === 0 ? <div>0</div> : null}
-    {foo === 1 ? <div>1</div> : null}
+    {(foo === 0) ? <div>0</div> : null}
+    {(foo ? true : false) ? <div>1</div> : null}
   </>
 ))
 </script>
@@ -102,9 +102,9 @@ exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-if-nested.tsx 1`] = `
 
 export default () => (
   <>
-    {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>0-2</div>}
     </div> : null}
   </>
@@ -120,9 +120,9 @@ const { foo = 0 } = defineProps<{
 
 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>0-2</div>}
     </div> : null}
   </>

diff --git a/packages/jsx-directive/tests/fixtures/v-if/v-if.vue b/packages/jsx-directive/tests/fixtures/v-if/v-if.vue
@@ -6,7 +6,7 @@ const { foo } = defineProps<{
 defineRender(() => (
   <>
     <div v-if={foo === 0}>0</div>
-    <div v-if={foo === 1}>1</div>
+    <div v-if={foo ? true : false}>1</div>
   </>
 ))
 </script>
diff --git a/packages/volar/src/jsx-directive.ts b/packages/volar/src/jsx-directive.ts
@@ -48,14 +48,14 @@ function transformVIf({
         source,
         node.pos,
         node.pos,
-        `${hasScope ? `{` : ' '}`,
+        `${hasScope ? `{` : ' '}(`,
         [
           expressionText,
           source,
           attribute.end - expressionText.length - 1,
           FileRangeCapabilities.full,
         ],
-        ' ? '
+        ') ? '
       )
 
       const nextAttribute = nodes[index + 1]?.attribute