Skip to content
New issue

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

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

Already on GitHub? Sign in 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.

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

No branches or pull requests

2 participants