storybookjs/storybook

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

Fechada

#17.170 aberto em 7 de jan. de 2022

 (0 comentário) (0 reação) (0 responsável)TypeScript (10.058 forks)batch import
bughelp wantedvue

Métricas do repositório

Stars
 (89.909 estrelas)
Métricas de merge de PR
 (Mesclagem média 7d 22h) (184 fundiu PRs em 30d)

Description

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.

Guia do colaborador