React-styleguidist: Create an option for a compiler

[kof]

If someone has a certain babel configuration and wants to use the same code in the styleguide readme, we need to enable swaping out buble for babel.

[sapegin]

We need an option to swap Buble for anything, not for Babel. I will be happy to accept a pull request ;-)

[ambroselittle]

If I understood Bublé correctly, it has a nice singing voice, but it won't do things like decorators or imports. So that means styleguidist is a non starter for projects using those, correct? Until/if it supports Babel or the like? Am I missing anything.

[sapegin]

@ambroselittle We’re using Buble only for Markdown example. Your app code — your webpack loaders ;-) Styleguidist won’t support Babel by default again — it’s just to big to load on the frontend.

[ambroselittle]

Ah, I was getting a compiler error after pulling in a few components to test this out in the create-react-app approach. My main project doesn't use webpack for reasons beyond my control. So I guess I just need to find webpack config that uses babel and whatnot? Thanks.

[sapegin]

@ambroselittle With CRA it should just work — Styleguidist should load CRA webpack config automatically. Could you make a demo somewhere that I could debug?

[ambroselittle]

Okay, I created a separate issue for this with the repo: https://github.com/styleguidist/react-styleguidist/issues/495

[ambroselittle]

I couldn't comment on 495, but just by way of explanation/clarity for future folks new to the project who might land on this, I didn't understand (as I now have read explained here) the interaction between styleguidist and the hosting app. I was assuming that styleguidist was the source of the compilation error here and thought it needed to be told how to deal with the decorators.

I just expected it to "just work" as implied by the getting started, if you use CRA, but I understand more clearly now. I thought I could save myself some integration headache by creating a separate app and just pulling my components in to test styleguidist out.

Sorry for the mixup and thanks for the help.

[ghost]

need an option to swap Buble for anything, not for Babel

[okonet]

Styleguidist won’t support Babel _by default_ again — it’s just to big to load on the frontend.

I've stumbled upon https://github.com/lynaghk/babel/ and I think we could evaluate it at least.

[sapegin]

Keep in mind that you're quoting 2017 me, I've changed my opinion since then ;-)

There's also https://github.com/alangpierce/sucrase that looks very promising and does exactly what we need to run examples in modern browsers including JSX, TypeScript, and Flow. It could be a good default instead of Buble. According to Bundlephobia it's 40 KB minified gzipped. We'll still need an option to change it to real Babel or TypeScript for folks who need it.

[okonet]

Yeah I realize that just wanted to pin the link here so it's not lost. I'm really interested in a full-blown TS support in Styleguidist TBH so yeah, we need the parser to be a plugin.

[dweng0]

Has anyone done any work on this? I'd like to poke about with it. Pointers or suggestions would be great.

[okonet]

I think @sapegin has a WIP branch already somewhere

[dweng0]

OK, I was just going to go with creating an IoC Dependency injected option to provide the transpiler in the config or use the current default if its not set. But if there's a WIP I'll just see what that looks like instead.

[okonet]

I’m not 100% sure about that so you better look for it or wait for Artem’s answer

[sapegin]

@dweng0 yeah, it's done as part of #1553 but the whole branch is far from done, so feel free to extract it into a separate pull request so we can release it separately. It also changes the default compiler, which I think we should release as well with the new option, otherwise, transpiling imports would make the whole thing more complex than it should be.

[dweng0]

Cheers, I'll take a look and see if J can help out

[sapegin]

The pull request is here!

https://github.com/styleguidist/react-styleguidist/pull/1700

[poteirard]

I tested the alpha version in our react-components library and it works as expected 🎉

We've good some improvement!

With @latest

pnpm build  165.08s user 18.77s system 173% cpu 1:46.19 total

With @next

pnpm build  123.16s user 14.50s system 170% cpu 1:20.84 total

I guess the bottleneck it's in react-docgen-typescript in our case?

Thank you!