Storybook: Add support for decorators for full zero configuration typescript

[fernandopasik]

Is your feature request related to a problem? Please describe.
Since the objective is to provide zero configuration for typescript one feature is decorators.

Describe the solution you'd like
To add @babel/plugin-proposal-decorators to the core
https://github.com/storybookjs/storybook/blob/next/lib/core/src/server/common/babel.js

Describe alternatives you've considered
Could have a project config, but since we want to provide zero config for typescript including decorators plugin seems small and reasonable.

Are you able to assist bring the feature to reality?
Yes, I can prepare a PR and modify
https://github.com/storybookjs/storybook/blob/next/lib/core/src/server/common/babel.js

[fernandopasik]

Have a branch ready if this is agreed
https://github.com/storybookjs/storybook/tree/decorators-support

[shilman]

Nice @fernandopasik 👍 I don't use decorators and don't have a strong opinion on this. Is this officially part of the Typescript spec? @ndelangen @mrmckeb @tmeasday

[fernandopasik]

Yes, decorators are part of the language for a while.
https://www.typescriptlang.org/docs/handbook/decorators.html

[fernandopasik]

I've use them regularly with web-components as they are included in lit-html and lit-element.
https://lit-element.polymer-project.org/guide/decorators

I was wondering if creating a separate web-components-ts-kitchen-sink or migrating the existing one to typescript, to have a working example in the repo.

[shilman]

@fernandopasik thanks for the clarification, that's great, and let's do it! (unless somebody strongly objects).

regarding web components + typescript example: @tooppaaa and a few others are overhauling the example setup in storybook to make it much more lightweight. once that's done (hopefully in the next couple weeks?), it would be awesome if you could follow that format to add a web-components + typescript example 🙏

[fernandopasik]

Cool, is there a PR I can look for the new format of the examples?

[fernandopasik]

I've created a PR with a couple of lines to modify the babel config #11063
I could create a second one with the new kitchen example app based on the refactor of the examples.

[shilman]

Awesome @fernandopasik 🙏

[mrmckeb]

@shilman, they are supported behind an experimental flag in TypeScript. Opinions aside, I think we should support them ;)

[shilman]

If it's experimental, do you think we should figure out how to make it experimental in Storybook too? For example, we could add an opt-in preset that adds both the dependency and the configuration. We already get slammed all the time on Storybook install size, and it doesn't excite me to add experimental stuff just because we can

[fernandopasik]

For angular development are used quite often as well.
In the branch you mentioned about the revamp of the examples they are used also in several occasions.

https://github.com/storybookjs/storybook/pull/10913/files#diff-8b989a93ea2eb835431322332a2990a4R3

[fernandopasik]

Also, the @babel/plugin-proposal-decorators is already in yarn.lock
https://raw.githubusercontent.com/storybookjs/storybook/next/yarn.lock

That's why in my PR I didn't touch yarn.lock

[mrmckeb]

We could, like the Babel preset for TypeScript, just document that you need to add this plugin if you want to use experimental decorators?

[mrmckeb]

My only concern about adding it is that the more we have by default, the harder it is for users to override if they have a different project setup.

[fernandopasik]

What about having a prop in main.js to override the babel config, like the one for webpackFinal?

[fernandopasik]

Sorry I didn't mean as override, more like extend. It would be a waste to have to include all the good choices already made in the core babel configuration.

[mrmckeb]

Currently you can _extend_ the base Babel config, not replace, unless you modify the final config with webpackFinal. I'm currently trying to solve a related issue with this for the CRA preset - in that case the new defaults are duplicated in the CRA preset.

[pumano]

Would love to see when it works out of the box. I think it should be supported by default because vue has vue-class-component and vue-property-decorator also angular use decorators out of the box and Mobx.

[mrmckeb]

@shilman I think we can merge the related PR (#11063) :)

[fernandopasik]

fixed by #11063

[shilman]

Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.24 containing PR #11063 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.