components not parsed by babel

[Andarist]

So my intention is to transpile svg with babel and from what I can see you try to parse components found with a pattern on your own and deduce from the output if the file exports a React Component. It would be great to load components files first with other webpack loaders and then decide if its exporting a React component.

• Your style guide config (styleguide.config.js).

module.exports = {
	components: 'src/components/**/[A-Z]*.{js,svg}',
	showCode: true,
	showUsage: true,
	webpackConfig: config,
	styleguideComponents: {
		Wrapper: path.join(__dirname, './Wrapper'),
	},
}

• Webpack version.
  latest

[sapegin]

What issues you have with the current approach? It’s handled by react-docgen and it only works with the source code.

[Andarist]

Well, I can't do any pre-compilation on my source files - in example svg -> js conversion. Transformed files could be stringified and passed to the react-docgen just fine. While I've managed to work around (for now) my svg problem, I think it would be nice to support i.e. babel macros, codegens etc and that would require transpiling stuff before passing it to react-docgen

[sapegin]

Have you tested that your transpiled code actually works with react-docgen?

I think it would be nice to support i.e. babel macros, codegens etc

Sure, it may be a good idea.

[Andarist]

Have you tested that your transpiled code actually works with react-docgen?

Yeah, I've worked around the issue with:

"icons": "babel src/components/Icons -x \".svg\" --out-dir src/components/Icons --no-babelrc --plugins react-svg,syntax-jsx",
"styleguide": "npm run icons && cross-env BABEL_ENV=es NODE_ENV=development styleguidist server",

and it works fine, but would be better to include this in more standard build pipeline - directly in styleguidist/webpack/babel configs instead of making an additional ninja script ;)

[sapegin]

We can add a config option like transformSource(code) => transformedCode, sou you could apply any transformations like Babel before we send code to react-docgen, but it shouldn’t be some magic that we’ll enable by default — it works as is in 99% cases.

[piotrwitek]

@sapegin this would be really useful as I could use this transformer solution to handle a different use case:

• I'd like to use Examples that I have written in seperate files with TypeScript, so then I can use them in code blocks, currently I have to use require, which is not and acceptable solution for me (because I want to see original component code in the code block, not just a require statement)

I need the transform to strip types and transpile it to ES6 before loading the source, otherwise it will have syntax errors.
Is this a good solution for my case, or you would suggest a different path?

[sapegin]

@piotrwitek This issue is about transforming source code, not examples. I think you’re talking about #462.

[piotrwitek]

@sapegin now I got it (after reading development section), thanks and sorry for the noise

[Andarist]

We can add a config option like transformSource(code) => transformedCode, sou you could apply any transformations like Babel before we send code to react-docgen, but it shouldn’t be some magic that we’ll enable by default — it works as is in 99% cases.

That would certainly make a better integration point.

[sapegin]

@Andarist A pull request would make it much sooner ;-)

[Andarist]

Sure thing, I'm willing to do this - just having many open PRs/ideas right now, so if anyone wants to do that before I get to it (eventually) feel free to do so!

[sapegin]

I’m closing this for now. Feel free to submit a pull request if you need this.