storybookjs/storybook

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

Fermée

#17 170 ouverte le 7 janv. 2022

 (0 commentaire) (0 réaction) (0 personne assignée)TypeScript (10 058 forks)batch import
bughelp wantedvue

Métriques du dépôt

Stars
 (89 909 étoiles)
Métriques de merge PR
 (Merge moyen 7j 22h) (184 PRs mergées en 30 j)

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.

Guide contributeur