refactor(jsx-directive): use null instead of empty string (#441)

Co-authored-by: 三咲智子 Kevin Deng <sxzz@sxzz.moe>

.changeset/heavy-eyes-rescue.md

@@ -0,0 +1,6 @@
+---
+"@vue-macros/jsx-directive": patch
+"@vue-macros/volar": patch
+---
+
+refactor(jsx-directive): use null instead of empty string.

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

@@ -45,10 +45,10 @@ export function vForTransform(ast: Program, s: MagicString, offset = 0) {
       const hasScope = ['JSXElement', 'JSXFragment'].includes(`${parent?.type}`)
       s.appendLeft(
         node.start! + offset,
-        `${hasScope ? ' { ' : ''}${list}.map(${i}=> `
+        `${hasScope ? '{' : ''}${list}.map(${i} => `
       )
 
-      s.appendRight(node.end! + offset, `)${hasScope ? ' }' : ''}`)
+      s.appendRight(node.end! + offset, `)${hasScope ? '}' : ''}`)
       s.remove(attribute.start! + offset - 1, attribute.end! + offset)
     }
   })

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

@@ -47,7 +47,7 @@ export function vIfTransform(ast: Program, s: MagicString, offset = 0) {
       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
           )} ? `
@@ -57,7 +57,7 @@ export function vIfTransform(ast: Program, s: MagicString, offset = 0) {
         node.end! + offset,
         `${nodes[index + 1]?.attribute.name.name}`.startsWith('v-else')
           ? ' :'
-          : ` : ''${hasScope ? ' }' : ''}`
+          : ` : null${hasScope ? '}' : ''}`
       )
       s.remove(attribute.start! + offset - 1, attribute.end! + offset)
     } else if (attribute.name.name === 'v-else') {

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

@@ -6,9 +6,9 @@ const list = [1, 2, 3]
 
 export default () => (
   <>
-     { list.map((i, index)=> <div key={index}>
+    {list.map((i, index) => <div key={index}>
       <div>{i}</div>
-    </div>) }
+    </div>)}
   </>
 )
 "
@@ -20,9 +20,9 @@ const list = [1, 2, 3]
 
 defineRender(() => (
   <>
-     { list.map(i=> <div key={i}>
+    {list.map(i => <div key={i}>
       <div>{i}</div>
-    </div>) }
+    </div>)}
   </>
 ))
 </script>

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

@@ -7,7 +7,7 @@ exports[`jsx-vue-directive > v-if > ./fixtures/v-if/v-else.tsx 1`] = `
 
 export default () => (
   <>
-    { foo === 0 ? <div>0</div> :
+    {foo === 0 ? <div>0</div> :
     foo === 1 ? <div>1</div> :
     <div v-else={foo === 2}>2</div> }
   </>
@@ -23,7 +23,7 @@ const { foo = 2 } = defineProps<{
 
 defineRender(() => (
   <>
-    { foo === 0 ? <div>0</div> :
+    {foo === 0 ? <div>0</div> :
     foo === 1 ? <div>1</div> :
     <div v-else={foo === 2}>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 === 0 ? <div>0</div> :
     foo === 1 ? <div>1</div> :
-    foo === 2 ? <div>2</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> : '' }
+    {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> : '' }
-      { foo === 1 ? <div>1</div> : '' }
+      {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> : '' }
-    { foo === 1 ? <div>1</div> : '' }
+    {foo === 0 ? <div>0</div> : null}
+    {foo === 1 ? <div>1</div> : null}
   </>
 ))
 </script>
@@ -102,11 +102,11 @@ 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 === 0 ? <div>
+      {foo === 0 ? <div>0-0</div> :
       foo === 1 ? <div>0-1</div> :
       <div v-else>0-2</div> }
-    </div> : '' }
+    </div> : null}
   </>
 )
 "
@@ -120,11 +120,11 @@ const { foo = 0 } = defineProps<{
 
 defineRender(() => (
   <>
-    { foo === 0 ? <div>
-      { foo === 0 ? <div>0-0</div> :
+    {foo === 0 ? <div>
+      {foo === 0 ? <div>0-0</div> :
       foo === 1 ? <div>0-1</div> :
       <div v-else>0-2</div> }
-    </div> : '' }
+    </div> : null}
   </>
 ))
 </script>

packages/volar/src/jsx-directive.ts

@@ -86,7 +86,7 @@ function transformJsxDirective({
       ],
       '.map(',
       [itemText, source, attribute.pos + 8, FileRangeCapabilities.full],
-      '=>'
+      ' => '
     )
 
     replaceSourceRange(
@@ -130,7 +130,7 @@ function transformJsxDirective({
           attribute.end - expressionText.length - 1,
           FileRangeCapabilities.full,
         ],
-        '?'
+        ' ? '
       )
 
       const nextNode = nodes
@@ -155,17 +155,11 @@ function transformJsxDirective({
         source,
         node.end,
         node.end,
-        `${nextNodeHasElse ? ':' : `:''${parent ? '}' : ''}`}`
+        nextNodeHasElse ? ' : ' : ` : null${parent ? '}' : ''}`
       )
       replaceSourceRange(codes, source, attribute.pos, attribute.end)
     } else if (attribute.name.escapedText === 'v-else') {
-      replaceSourceRange(
-        codes,
-        source,
-        node.end,
-        node.end,
-        `${parent ? `}` : ''}`
-      )
+      replaceSourceRange(codes, source, node.end, node.end, parent ? '}' : '')
       replaceSourceRange(codes, source, attribute.pos, attribute.end)
     }
   }