storybookjs/storybook

VueJS v2 w/ TSX - Storybook only acknowledges the JSDoc @slot block when it's inside/on the render function

Open

#17,170 创建于 2022年1月7日

在 GitHub 查看
 (0 评论) (0 反应) (0 负责人)TypeScript (89,909 star) (10,058 fork)batch import
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/ render functions 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.

贡献者指南