Inconsistent exports between SFC and components

[shilman]

Describe the bug

SFCs export component.__docgenInfo whereas components export component.options.__docgenInfo, making it complicated to display prop tables across both kinds.

To Reproduce

I am working on two repos:

• https://github.com/storybookjs/storybook/tree/next/examples/vue-kitchen-sink
• https://github.com/shilman/evergarden/tree/add-docs-page

The former uses SFCs and the latter uses regular components. I didn't set up either project and am not familiar enough with Vue to know whether they are following proper conventions, but this issue assumes they are. Both repos repos use @storybook/addon-docs to show prop tables.

Expected behavior

Both repos should show prop tables for all stories that define the component parameter.

Outputs

vue-kitchen-sink shows prop tables as expected. When I log component inside vue-docgen-loader, it's of the form:

component: {
  exports: { name, ..., __docgenInfo },
  options: { name, ..., __docgenInfo }
}

When I log it inside the prop table extraction, it's of the form:

component: {
  beforeCreate,
  ...
  __docgenInfo
}

Thus, the prop table extraction code, which expects component.__docgenInfo succeeds.

In contrast, the evergarden code has the following structure inside the loader:

component: {
  options: {
    options: { __docgenInfo }
  }
}

And when I log it inside the props table extraction:

component: {
   name,
   options: { __docgenInfo }
   ...
}

Therefore, the prop tables don't extract properly.

Versions

vue-kitchen-sink:

• vue-docgen-loader: 1.2.0
• vue-docgen-api: 4.1.0
• webpack: 4.41.0
• vue-loader (omit if you don't use it): 15.7.2

evergarden:

• vue-docgen-loader: 1.2.0
• vue-docgen-api: 4.1.2
• webpack: 4.41.0
• vue-loader (omit if you don't use it): 15.7.1

Additional context

cc @Aaron-Pool

[pocka]

@shilman
Sorry for inconvenience 😢

This loader started from SFC support only, then plain component (non-SFC) support was added. Since the current implementation for plain components is based on the SFC version, I should more research on the Vue's component spec...

Immediate solution is adding conditionals (ex. isSFC) for the code injection will, but I think we shouldn't do it because it might break other use-cases such as functional components and Vue.extend style components

[shilman]

Not at all! Thanks for figuring out addon-info for Vue and for building and maintaining this library! 🙏😁

[pocka]

#8 should fix this. I'll release it in 1.3.0-beta today.