✨ Allow using defineSlots short syntax in Vue 3.3

[jd-solanki]

Clear and concise description of the problem

Hi 👋🏻

I'm fan of DX you bring to the vue ecosystem. Recently I upgraded to vue 3.3 and wanted to use defineSlots' short syntax but unfortunetly due to volar's limitation this isn't provided officially. However, I noticed Vue Macros still provides support for the short syntax if docs are up to date.

Problem I'm facing is described in volar's issue here.

Additionally, I wanted to ask does Vue Macros support compex types like Record for defineSlots? I'm using generic components feature and want to generate slots based on object like this.

Suggested solution

Enable shortcut syntax and complex type support along with volar support for Vue 3.3

Alternative

None

Additional context

Ref: vuejs/language-tools#3141

Validations

• Follow our Code of Conduct
• Read the Contributing Guide.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sxzz]

If I understand correctly, you want Vue 3.3 (Vue core) to support shortcut syntax for defineSlots, right?

Maybe you should report it to vue core repo instead of Vue Macros, since Vue Macros already supported shortcut syntax.

As complex types, maybe you can try it first. If there are some bugs, report them with a reproduction repo. I'll try to fix it!

[jd-solanki]

Hey,

Thanks for the quick response.

you want Vue 3.3 (Vue core) to support shortcut syntax for defineSlots, right

Yes, but I know it isn't support ATM and there's open issue for this in volar: vuejs/language-tools#3117

The point I'm trying to make is, defineSlots short syntax doesn't work for projects using vue 3.3+. Additionally, you already mentioned that this macro is disable for vue 3.3 here: https://vue-macros.sxzz.moe/macros/define-slots.html

That means if someone who is using vue 3.3, he/she won't able to use defineSlots short syntax.

Here's reproduction: https://github.com/jd-solanki/volar-vue-playground/blob/vue-macros-short-defineSlots/src/foo/Foo.vue

Note
Watch our for branch

I hope I made my point.

Additional Context

1. Aren't you at london ATM?
2. (Just a friendly question) I'm on the verge of the release for anu and can't figure out why I'm getting error Type '{}' has no call signatures in src/bar/Bar.vue slots. Let me know if you know the reason. I mentioned more details in issue I referenced above.

Thanks.

Happy coding 🙌🏻

[sxzz]

Hi, sorry for so long delay reply.

defineSlots is disabled in Vue 3.3, because Vue 3.3 will remove it in runtime, so it's unnecessary to transform in Vue Macros.

Currently, Volar don't support the short syntax of defineSlots, we can use @vue-macros/volar/define-slots for support.

It's worth mention that defineSlots is only designed for Volar (type system), for runtime, both Vue Macros and Vue 3.3 will just remove defineSlots macro only. The only difference between Vue Macros and the official version is Volar plugin.