Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

docs not processing jsdocs in non-SFC component #11338

Closed
greggunner opened this issue Jun 27, 2020 · 1 comment
Closed

docs not processing jsdocs in non-SFC component #11338

greggunner opened this issue Jun 27, 2020 · 1 comment

Comments

@greggunner
Copy link

Describe the bug
When creating a vanilla render based component (Component.js) instead of a Component.vue, the JSDocs are not being processed by the docs addon.

To Reproduce
Steps to reproduce the behavior:

  1. Create a default project for vue with the docs addon
  2. Create a javascript file for your component and add basic JSDoc documentation
  3. Create a default story for your component
  4. Run storybook

Expected behavior
Should output on the Docs tab, the props, events, and other JSDocs supported by the vue-docgen-api and vue-docgen-loader.

Screenshots
Expected output:

image

Actual Output:

image

Code snippets
Test.stories.js

import Test from "./Test";

export default {
    title: "Test",
    component: Test
};

export const Default = () => ({
    components: {
        Test
    },
    template: '<test name="TEST NAME"></test>'
});

Test.js

export default {
    name: "Test",
    render(h){
        return h('div', this.name);
    },
    props: {
        /**
         * The name to display
         */
        name: {
            type: String
        }
    }
}

.storybook/main.js

const path = require("path");

module.exports = {
    stories: ['../src/components/*.stories.js'],
    addons: [
        '@storybook/addon-docs/vue/preset'
    ]
};

System:

Environment Info:

System:
OS: Windows 10 10.0.18363
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Binaries:
Node: 12.17.0 - C:\platforms\nodejs\node.EXE
Yarn: 1.22.4 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.14.4 - C:\platforms\nodejs\npm.CMD
Browsers:
Edge: 44.18362.449.0

Additional context
Add any other context about the problem here.

@greggunner
Copy link
Author

OK, it appears I was able to resolve this by changing the webpack config and adding in a rule based on the documentation from https://github.com/pocka/vue-docgen-loader.

My main.js now looks like:

const path = require("path");

module.exports = {
    stories: ['../src/components/**/*.stories.@(js|mdx)'],
    addons: [
        '@storybook/addon-docs/preset'
    ],
    webpackFinal: async (config, { configType }) => {

        config.module.rules.push({
            test: /\.js$/,
            include: path.resolve(__dirname, '../src'),
            use: 'vue-docgen-loader',
            enforce: 'post'
        })

        // Return the altered config
        return config;
    },
};

Will close this issue.

# for free to join this conversation on GitHub. Already have an account? # to comment
Projects
None yet
Development

No branches or pull requests

2 participants