fix(jsx-directive/v-slot): default slot and v-if slot co-usage (#590

) * fix(v-slot): default slot and v-if slot co-usage * chore: add changeset
vue-macros · Dec 21, 2023 · d1a3b4d · d1a3b4d
1 parent 16beecf
commit d1a3b4d
Show file tree

Hide file tree

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

diff --git a/packages/jsx-directive/tests/__snapshots__/v-slot.test.ts.snap b/packages/jsx-directive/tests/__snapshots__/v-slot.test.ts.snap
@@ -29,16 +29,17 @@ defineRender(() => (
     <Comp  scopedSlots={{'default': () => <span> </span>,}} />
     <Child  scopedSlots={{'bottom': ({ foo }) => <span> </span>,}} />
 
-    <Child scopedSlots={{'default': () => <span>default</span>,...(show) ? {'bottom': ({ foo }) => <span>
+    <Child scopedSlots={{...(show) ? {'title': ({ foo }) => <span>
         {show}
-      </span>,} : (show === false) ? {'bot-tom': ({ foo }) => <span>
+      </span>,} : (show === false) ? {'center': ({ foo }) => <span>
         {foo}
-      </span>,} : {'title': () => <span> </span>,},}}
+      </span>,} : {'bottom': () => <span> </span>,},'bot-tom': () => <span>bottom</span>,default: () => <span>
+      default
       
       
       
       
-    ></Child>
+    </span>}}></Child>
   </div>
 ))
 </script>
@@ -74,16 +75,17 @@ defineRender(() => (
     <Comp  v-slots={{'default': () => <> </>,}} />
     <Child  v-slots={{'bottom': ({ foo }) => <> </>,}} />
 
-    <Child v-slots={{'default': () => <>default</>,...(show) ? {'bottom': ({ foo }) => <>
+    <Child v-slots={{...(show) ? {'title': ({ foo }) => <>
         {show}
-      </>,} : (show === false) ? {'bot-tom': ({ foo }) => <>
+      </>,} : (show === false) ? {'center': ({ foo }) => <>
         {foo}
-      </>,} : {'title': () => <> </>,},}}
+      </>,} : {'bottom': () => <> </>,},'bot-tom': () => <>bottom</>,default: () => <>
+      default
       
       
       
       
-    ></Child>
+    </>}}></Child>
   </div>
 ))
 </script>

diff --git a/packages/jsx-directive/tests/fixtures/v-slot/child.vue b/packages/jsx-directive/tests/fixtures/v-slot/child.vue
@@ -3,6 +3,7 @@ defineSlots<{
   default: () => any
   title: (props: { foo: 1 }) => any
   bottom: (props: { foo: 1 }) => any
+  center: (props: { foo: 1 }) => any
   'bot-tom': (props: { foo: 1 }) => any
 }>()
 </script>

diff --git a/packages/jsx-directive/tests/fixtures/v-slot/index.vue b/packages/jsx-directive/tests/fixtures/v-slot/index.vue
@@ -27,14 +27,15 @@ defineRender(() => (
     <Child v-slot:bottom={{ foo }} />
 
     <Child>
-      <template v-slot>default</template>
-      <template v-if={show} v-slot:bottom={{ foo }}>
+      default
+      <template v-if={show} v-slot:title={{ foo }}>
         {show}
       </template>
-      <template v-else-if={show === false} v-slot:bot-tom={{ foo }}>
+      <template v-else-if={show === false} v-slot:center={{ foo }}>
         {foo}
       </template>
-      <template v-else v-slot:title />
+      <template v-else v-slot:bottom />
+      <template v-slot:bot-tom>bottom</template>
     </Child>
   </div>
 ))

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