storybookjs/storybook
GitHub で見るVueJS v2 w/ TSX - Storybook only acknowledges the JSDoc @slot block when it's inside/on the render function
Open
#17,170 opened on 2022年1月7日
bughelp wantedvue
説明
Describe the bug
When rendering a slot (default or otherwise) outside of a render function, the slot is not represented in the "Slots" section of the docs and any description added is ignored.
To Reproduce Environment:
- Vue 2.16.2
- TypeScript 4.2.2
- storybook/vue 6.3.6
- TSX-based Vue components (w/
renderfunctions instead of templates)
Simplified example of a Vue component w/ a slot that does not render in the Storybook output:
// foo-bar.tsx
import Vue from 'vue';
export const Link = Vue.extend({
name: 'foo-bar',
computed: {
renderedElement(): JSX.Element {
const Element = 'div';
return (
<Element>
{
/**
* @slot Default The content (usually text).
*/
this.$slots.default
}
</Element>
);
},
},
render(): JSX.Element {
return this.renderedElement;
},
});
//foo-bar.stories.ts
// (c) 2022 Cofense Inc.
import { Meta, Story } from '@storybook/vue';
import { FooBar } from '.';
export default {
title: 'FooBar',
component: FooBar,
argTypes: {
// Slots
default: {
control: 'text',
},
},
args: {
// Slots
default: 'Test',
},
} as Meta;
const Template: Story = (args, { argTypes: { default: slot, ...props } }) => ({
components: { FooBar },
props: Object.keys(props),
template: `
<foo-bar v-bind="$props">${args.default}</koi-link>
`,
});
export const All = Template.bind({});
This produces storybook output of:
Notice how the slot is represented as a prop and the description from the component is ignored.