fix(jsx-directive): v-slot and v-else-if co-usage (#613)

* fix(jsx-directive): v-slot and v-else-if co-usage * chore: add changeset
vue-macros · Jan 6, 2024 · 699402e · 699402e
1 parent 3a14145
commit 699402e
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 14 deletions.
diff --git a/.changeset/rare-trainers-fetch.md b/.changeset/rare-trainers-fetch.md
@@ -0,0 +1,6 @@
+---
+"@vue-macros/jsx-directive": patch
+"@vue-macros/volar": patch
+---
+
+v-slot and v-else-if co-usage
diff --git a/packages/jsx-directive/src/core/v-slot.ts b/packages/jsx-directive/src/core/v-slot.ts
@@ -78,7 +78,7 @@ export function transformVSlot(
 
         if (vIfAttribute) {
           if (['v-if', 'v-else-if'].includes(`${vIfAttribute.name.name}`)) {
-            const nextIndex = index + (attributes[index + 1][0] ? 1 : 2)
+            const nextIndex = index + (attributes[index + 1]?.[0] ? 1 : 2)
             result.push(
               '}',
               `${attributes[nextIndex]?.[1].vIfAttribute?.name.name}`.startsWith(

diff --git a/packages/volar/src/jsx-directive/v-slot.ts b/packages/volar/src/jsx-directive/v-slot.ts
@@ -45,12 +45,18 @@ export function transformVSlot({
         if (
           ['v-if', 'v-else-if'].includes(vIfAttributeName) &&
           vIfAttribute.initializer &&
-          ts.isJsxExpression(vIfAttribute.initializer)
+          ts.isJsxExpression(vIfAttribute.initializer) &&
+          vIfAttribute.initializer.expression
         ) {
           result.push(
-            `(${vIfAttribute.initializer.expression?.getText(
-              sfc[source]?.ast,
-            )}) ? {`,
+            '(',
+            [
+              vIfAttribute.initializer.expression.getText(sfc[source]?.ast),
+              source,
+              vIfAttribute.initializer.expression.getStart(sfc[source]?.ast),
+              FileRangeCapabilities.full,
+            ],
+            ') ? {',
           )
         } else if ('v-else' === vIfAttributeName) {
           result.push('{')
@@ -63,18 +69,12 @@ export function transformVSlot({
         .split(' ')[0]
       const isNamespace = attributeName.startsWith(':')
       attributeName = attributeName.slice(1)
-      const hasSpecialChart = !/^[A-Z_a-z]\w*$/.test(attributeName)
       result.push(
-        ' ',
         isNamespace
           ? [
-              hasSpecialChart ? `'${attributeName}'` : attributeName,
+              `'${attributeName}'`,
               source,
-              [
-                attribute.name.getStart(sfc[source]?.ast) +
-                  (hasSpecialChart ? 6 : 7),
-                attribute.name.end,
-              ],
+              attribute.name.getStart(sfc[source]?.ast) + 6,
               FileRangeCapabilities.full,
             ]
           : 'default',
@@ -114,7 +114,7 @@ export function transformVSlot({
 
       if (vIfAttribute && vIfAttributeName) {
         if (['v-if', 'v-else-if'].includes(vIfAttributeName)) {
-          const nextIndex = index + (attributes[index + 1][0] ? 1 : 2)
+          const nextIndex = index + (attributes[index + 1]?.[0] ? 1 : 2)
           result.push(
             '}',
             `${attributes[nextIndex]?.[1].vIfAttribute?.name.getText(