React-styleguidist: updateExample and relative paths

Created on 16 Aug 2017  路  3Comments  路  Source: styleguidist/react-styleguidist

This might be a feature as well, not sure.

What I'm trying to achieve is ability to include corresponding samples in every component: optionally embed a samples.js file into .md, but it won't work.

The structure I have is pretty common:

components/
    icon/
        icon.js
        icon.md
        samples.js

config:

    updateExample: function(props) {
        const { lang, settings } = props;

        if (settings.samples) {
            // this won't work since path is starting from the root of the document
            // const filepath = path.resolve('./samples.js');

            // this will work, but it doesn't make sense in other components 
            const filepath = path.resolve('./components/icon/samples.js'); 

            return {
                content: fs.readFileSync(filepath),
                lang,
                settings: {}
            }
        }
        return props;
    }

and md contents look simply like this:

```jsx samples```

Is there a workaround, other than providing file path in the settings in .md file?

bug good first issue help wanted

All 3 comments

@sapegin , lets extend props with filePath?
for example, we can replace this
https://github.com/styleguidist/react-styleguidist/blob/master/loaders/examples-loader.js#L31
to something like this

const examples = chunkify(source, (props) => config.updateExample(props, this.resourcePath));

or

const examples = chunkify(source, (props) => config.updateExample({...props, path: this.resourcePath }));

Please use fenced blocks with language tags (for example ```js) to make code examples more readable.

@stepancar I think the first is better because it鈥檚 immutable and everything inside the props聽you can change.

Are you guys interested in sending a pull request to fix that? ;-)

Was this page helpful?
0 / 5 - 0 ratings