fix(volar/jsx-directive): v-if and v-slot co-usage (#677)

vue-macros · May 7, 2024 · 1e91ca0 · 1e91ca0
1 parent fc27519
commit 1e91ca0
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 4 deletions.
diff --git a/.changeset/loud-laws-drop.md b/.changeset/loud-laws-drop.md
@@ -0,0 +1,5 @@
+---
+"@vue-macros/volar": patch
+---
+
+v-if and v-slot co-usage
diff --git a/packages/jsx-directive/tests/__snapshots__/v-slot.test.ts.snap b/packages/jsx-directive/tests/__snapshots__/v-slot.test.ts.snap
@@ -39,6 +39,12 @@ defineRender(() => (
       {expectTypeOf<string>(foo)}
     </span>,}}></Child>
 
+    <Child scopedSlots={{...(show) ? {'bottom': ({ foo }) => <span>
+        {foo}
+      </span>,} : null,}}
+      
+    ></Child>
+
     <Child<number> scopedSlots={{...(show) ? {'title': ({ foo }) => <span>
         {expectTypeOf<number>(foo)}
         {show}
@@ -97,6 +103,12 @@ defineRender(() => (
       {expectTypeOf<string>(foo)}
     </>,}}></Child>
 
+    <Child v-slots={{...(show) ? {'bottom': ({ foo }) => <>
+        {foo}
+      </>,} : null,}}
+      
+    ></Child>
+
     <Child<number> v-slots={{...(show) ? {'title': ({ foo }) => <>
         {expectTypeOf<number>(foo)}
         {show}

diff --git a/packages/jsx-directive/tests/fixtures/v-slot/index.vue b/packages/jsx-directive/tests/fixtures/v-slot/index.vue
@@ -35,6 +35,12 @@ defineRender(() => (
       {expectTypeOf<string>(foo)}
     </Child>
 
+    <Child>
+      <template v-if={show} v-slot:bottom={{ foo }}>
+        {foo}
+      </template>
+    </Child>
+
     <Child<number>>
       default
       <template v-if={show} v-slot:title={{ foo }}>

diff --git a/packages/volar/src/jsx-directive/v-slot.ts b/packages/volar/src/jsx-directive/v-slot.ts
@@ -122,12 +122,11 @@ export function transformVSlot(
         if (vIfAttribute && vIfAttributeName) {
           if (['v-if', 'v-else-if'].includes(vIfAttributeName)) {
             const nextIndex = index + (attributes[index + 1]?.[0] ? 1 : 2)
+            const nextAttribute = attributes[nextIndex]?.[1].vIfAttribute
             result.push(
               '}',
-              `${getText(
-                attributes[nextIndex]?.[1].vIfAttribute!.name,
-                options,
-              )}`.startsWith('v-else')
+              nextAttribute &&
+                `${getText(nextAttribute.name, options)}`.startsWith('v-else')
                 ? ' : '
                 : ' : null,',
             )