JSX slot support

[b12f]

As mentioned in #99, I'd like to add JSX slot support. Would you be all right with the following syntax:

        {/** @slot Use this slot header */}
        <slot name="header"></slot>

or alternatively

        {/** 
           @slot Use this slot header
         */}
        <slot name="header"></slot>

Also, would you want me to add this in script-handlers/slotHandler.ts, or split that file into a jsSlotHandler.ts and jsxSlotHandler.ts? Cause the jsx checks might get a bit larger since they could occur anywhere in the component. In fact, we might even have to check called functions, dependencies and mixins.

[elevatebart]

This should be done in the slotHandler. And an e2e test should be useful.
Why not as well add a unit test so that debugging and fixing is easier?
For some reason I am hitting the same hickup as you are.

Recast doe not seem to cooperate well with JSX. I will dig more.
Thank you for the reminder

[b12f]

Yeah I'll add e2e tests. I think for now I'll just add basic JSX support (<slot> tags anywhere in the current component) since this feature can easily grow out of proportions.

I don't see the code handling class-based components anywhere, as slotHandler.ts checks for objectExpression, not classExpression. I've thought about checking either/or, and then instead of checking inside of the render function only, visiting the whole component. Might take a small performance hit, but I think both classic createElement functions and JSX can occur outside of render(). Is that cool or would you like that in a second PR?

[elevatebart]

I cooked up a little PR here if you want it as a starting point ;)

[elevatebart]

Still need to be able to add the description though.

[vue-styleguidist-bot]

🎉 This issue has been resolved in version 3.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀