Props, Events and slots are not showed in info pannel

[throrin19]

Describe the bug

The Info(Vue) tab in story book does not show the props part. The only information I have in that part is the source code of my story

To Reproduce Steps to reproduce the behavior:

1. Configure webpack.config.json like that :

   module.exports async ({ config }) => {
   config.module.rules.push({
       test: /\.vue$/,
       loader: 'storybook-addon-vue-info/loader',
       enforce: 'post'
   });
   
   config.module.rules.push({
       test: /\.stories\.js$/,
       loaders: [require.resolve('@storybook/addon-storysource/loader')],
       enforce: 'pre'
   });
   
   return config;
   }

2. Add this line in addons.js :

   import 'storybook-addon-vue-info/lib/register';

3. My Story :

   import { storiesOf } from '@storybook/vue';
   import { withInfo } from 'storybook-addon-vue-info';
   import { withKnobs, text, object } from '@storybook/addon-knobs';
   
   import langManager from 'libs/i18n';
   
   storiesOf('Components/Dialogs/AqListDialog', module)
      .addDecorator(withKnobs)
      .addDecorator(withInfo)
      .add('Example', () => ({
          i18n        : langManager.getI18n(),
          data() {
              return {
                  showDialog : false,
              };
          },
          props : {
              title     : {
                  default : text('title', 'List Dialog'),
              },
              emptyIcon : {
                  default : text('Empty icon', 'people'),
              },
              items : {
                  default : object('Items', [
                      {
                          name        : 'Jean Claude',
                          subTitle    : 'jean.claude@test.fr',
                      },
                  ]),
              },
              itemName : {
                  default : text('Item Name', 'name'),
              },
              itemSubTitle : {
                  default : text('Item Sub Title', 'subTitle'),
              },
          },
          template : `
              <v-app>
                  <v-container grid-list-md>
                      <v-btn @click="showDialog = true">Show Modal</v-btn>
                      <aq-list-dialog
                          v-model="showDialog"
                          :items="items"
                          :item-name="itemName"
                          :item-sub-title="itemSubTitle"
                          :empty-icon="emptyIcon"
                          :title="title" />
                  </v-container>
              </v-app>
              `,
          propsDescription : {
              AqListDialog : {
                  items           : 'Items to show in the dialog',
                  itemName        : 'Attribute used to show the element name.',
                  itemSubTitle    : 'Attribute used to show the element subTitle.',
                  emptyIcon       : 'Icon showed if list is empty',
                  title           : 'Modal title',
              },
          },
      }), {
          info : true,
      });

4. No props are showed in the info panel

Expected behavior A clear and concise description of what you expected to happen.

Screenshots

Versions

• storybook-addon-vue-info: 1.0.1
• @storybook/vue: 5.0.5

[throrin19]

I fix my problem for props part. But I can't find how to show events and slots informations.

For Props, I pass this config in info bloc because my components are registered globally :

{
    info : {
        components : {
            MyComponent, // I import that in my story page
        }
    },
}

[pocka]

@throrin19

The only information I have in that part is the source code of my story

It seems that the addon fails to determine which components to show props/events/slots. Parsing and lookup function may have an issue.

But I can't find how to show events and slots informations.

When it shows only props tables, it means our custom loader doesn't work. I think Storybook could not find your webpack config: it should be webpack.config.js, not webpack.config.json.

[throrin19]

When it shows only props tables, it means our custom loader doesn't work. I think Storybook could not find your webpack config: it should be webpack.config.js, not webpack.config.json.

Sorry, It's webpack.config.js I just make a mistake in my first issue message.

[pocka]

Sorry, It's webpack.config.js I just make a mistake in my first issue message.

Okay, then, it seems that vue-docgen-api failed to parse your component. For this thing, I've filed #85.

[pocka]

@throrin19 I've just released v1.1.0 which emits warnings when vue-docgen-api fails to parse. Please try it then check if there're any warnings.

[pocka]

It looks like vue-docgen-api failed to parse at below line because of custom alias.

import langManager from 'libs/i18n';