storybookjs/storybook

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

Chiusa

#17.170 aperta il 7 gen 2022

 (0 commenti) (0 reazioni) (0 assegnatari)TypeScript (10.058 fork)batch import
bughelp wantedvue

Metriche repository

Star
 (89.909 stelle)
Metriche merge PR
 (Merge medio 7g 22h) (184 PR mergiate in 30 g)

Descrizione

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.

Guida contributor