Core: Zero-config TypeScript loading #10813

mrmckeb · 2020-05-17T11:09:37Z

What I did

Added support for TypeScript to the core of Storybook.

Vue support based on: storybookjs/presets#122.

How to test

Projects should work with TypeScript with zero config.

github-actions · 2020-05-17T11:11:45Z

	Fails
🚫	PR is marked with "BREAKING CHANGE" label.

Generated by 🚫 dangerJS against 7a4724b

yannbf · 2020-05-17T12:17:54Z

This is awesome stuff! 🙌
Let me know if I can assist on testing or something! :)

graup · 2020-05-18T05:21:17Z

I added a component to the vue-kitchensink using typescript (pushed to your branch on @shilman's request). Seems to work fine 👍

I'm also testing this with a vue-cli+babel+ts project of mine and running into some problems there, will do some more tests and report back later today!

Fix react-docgen handling in zero-config typescript preset

shilman · 2020-05-20T03:56:14Z

Problem

There seems to be a performance regression that's causing cypress to fail.

Some numbers from a month ago:

preview (generated-entry): 470ms
- pushTomanager: 200ms
manager: 1100ms
- telejson parse: 150ms
- setStories: 900ms

Next (today)

preview (generated-entry): 540ms
- pushTomanager: 250ms
manager: 1250ms
- telejson parse: 120ms
- setStories: 870ms

This branch

preview (generated-entry): 2300ms
- pushTomanager: 1900ms
manager: 2700ms
- telejson parse: 1200s
- setStories: 1300ms

Solution

There are a couple different issues here.

Args is serializing a lot more data over the channel than before
react-docgen-typescript is creating a lot more data than react-docgen due to imported types (e.g. styled components can have hundreds of ArgTypes)

Worked with @mrmckeb on a tentative solution, which is to exclude ArgTypes that come from node_modules by default. We'll document this as part of the release.

As a secondary issue, worked on #10373 with @tmeasday to reduce the data sent over the channel by "normalizing" story parameters (e.g. sending component-level parameters once per component rather than once per story). The benefits of that work are only being partially realized, and will follow up in a separate issue: #10844

… into mrmckeb/issue10790

ndelangen · 2020-05-20T09:54:02Z

lib/core/src/server/preview/babel-loader-preview.js

+export const createBabelLoader = (options, framework) => ({
+  test: useBaseTsSupport(framework) ? /\.(mjs|tsx?|jsx?)$/ : /\.(mjs|jsx?)$/,


I think is a problem?

shilman · 2020-05-21T01:59:36Z

FYI I'm merging this with unaccepted Chromatic baselines because I want to get it out ASAP but also want to work through the changes one by one.

@ndelangen @mrmckeb @patricklafrance @tmeasday

matheo · 2020-05-23T01:17:12Z

lib/core/types/index.ts

+   *
+   * @example `['./src/*.stories.(j|t)sx?']`
+   */
+  stories: string[];


@ndelangen stories can be a function returning an array of strings right?

If that's possible, we can add that @ndelangen @shilman :)

I'm hoping this is temporary @matheo, as this would be exported differently once we convert core to TS.

All preset properties can be a T | (T, Options) => T | (T, Options) => Promise<T>

@ndelangen That applies to addons and stories?

Specifically we're looking at the options here: https://github.com/storybookjs/storybook/blob/next/lib/core/types/index.ts#L8-L32

addons & presets are the exception.
they are: string[].

everything else is T | (T, Options) => T | (T, Options) => Promise<T>

the technical reason is, as we "discover" presets/addons, we don't know the whole list yet, and so we can't pass it in. I figured it'd be too complex and confusing for presets to receive an incomplete list of presets.

RuneKR · 2020-06-30T20:03:57Z

This PR undo the work that have been done in previous pull requests to increase the performance of docgen and it breaks compatibility with "path alias" that worked in previous versions.

This plugin is the issue: react-docgen-typescript-loader #7998

https://github.com/storybookjs/presets/blob/32b0e861bbea7a0972d2bd99f5cb6a6851a85ce1/packages/preset-typescript/CHANGELOG.md

shilman · 2020-07-01T00:03:20Z

@RuneKR please read about the rationale for the change here:

https://github.com/storybookjs/storybook/blob/next/addons/docs/react/README.md#typescript-props-with-react-docgen

if you want to use the old settings, you can do that by setting typescript: { reactDocgen: 'react-docgen' } in your .storybook/main.js.

mrmckeb added BREAKING CHANGE core typescript labels May 17, 2020

shilman changed the title ~~feat: add root TypeScript support~~ Core: Add zero-config TypeScript support May 17, 2020

mrmckeb force-pushed the mrmckeb/issue10790 branch 2 times, most recently from 0d7b7fe to c918123 Compare May 17, 2020 12:01

mrmckeb added angular react vue configuration babel / webpack labels May 17, 2020

feat: add root TypeScript support

8310948

mrmckeb force-pushed the mrmckeb/issue10790 branch from c918123 to 8310948 Compare May 17, 2020 13:33

Add vue typescript component to kitchen sink

e7a460f

shilman changed the title ~~Core: Add zero-config TypeScript support~~ Core: Zero-config TypeScript support May 18, 2020

shilman and others added 13 commits May 18, 2020 13:22

Fix docgen preset

bb84352

Clean up typescriptOptions handling for docgen

322380f

Clean up react-ts example and addon-essentials for testing

267a01e

React: Switch to react-docgen as the default config

688dc43

Update failing tests

daf193a

Update main.js typescript docgen handling

1e621e3

Update addon-jest.testresults.json

0b5b8c8

Merge pull request #10816 from storybookjs/10790-fix-react-docgen-preset

d8431d3

Fix react-docgen handling in zero-config typescript preset

Merge branch 'next' into mrmckeb/issue10790

e88c51d

Update package.json

6a19a43

FIX angular example tests

811b66b

FIX problem with building all examples in CI (offset was wrong)

5eda5b9

Add vue-cli example application

ef2d51c

shilman added 6 commits May 20, 2020 09:01

Debug CI

ce38dee

Fix typescript-preset filtering

7948a71

Build: Increase parallelism

bdbd62a

Attempt to unify ts-loader version for e2e tests

ebd8535

Update yarn.lock

5f95289

Increase cypress navigation timeout for debugging

c7dfb35

shilman and others added 3 commits May 20, 2020 15:21

Fix presets for windows paths

bd7d479

Typescript: Filter out node_modules for docgen by default

3f4d4ef

feat: improve shared types

ee085e5

mrmckeb requested a review from usulpro as a code owner May 20, 2020 08:15

shilman and others added 3 commits May 20, 2020 16:35

Zero-config typescript: Updated MIGRATION and storybook documentation

4a4ccb4

Merge branch 'mrmckeb/issue10790' of github.com:storybookjs/storybook…

1336f76

… into mrmckeb/issue10790

fix: correct TSDoc error in shared types

6dfb786

ndelangen reviewed May 20, 2020

View reviewed changes

Migrate sfc_vue fixture to use babel-preset-vue

3671955

mrmckeb requested a review from stijnkoopal as a code owner May 20, 2020 10:43

graup added 3 commits May 20, 2020 20:33

Apply babel fix to vue fixture as well

7b8e614

Revert removal of babel-preset-vue

b50442f

Revert removel of babel-preset-vue from app/vue

7a4724b

graup mentioned this pull request May 20, 2020

framework-preset-vue requires babel-preset-vue but does not depend on it #4475

Closed

shilman merged commit 7336aa4 into next May 21, 2020

shilman mentioned this pull request May 21, 2020

Storybook zero-config typescript support #10790

Closed

12 tasks

matheo reviewed May 23, 2020

View reviewed changes

mrmckeb deleted the mrmckeb/issue10790 branch May 25, 2020 06:33

shilman mentioned this pull request May 30, 2020

Storybook 6.0 Release 🏆 #9311

Closed

graup mentioned this pull request May 29, 2021

Storybook vue type checking not working #14987

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Core: Zero-config TypeScript loading #10813

Core: Zero-config TypeScript loading #10813

mrmckeb commented May 17, 2020 •

edited by shilman

Loading

github-actions bot commented May 17, 2020 •

edited

Loading

yannbf commented May 17, 2020

graup commented May 18, 2020

shilman commented May 20, 2020 •

edited

Loading

ndelangen May 20, 2020

shilman commented May 21, 2020

matheo May 23, 2020

mrmckeb May 25, 2020

ndelangen May 25, 2020

mrmckeb May 25, 2020

ndelangen May 25, 2020

ndelangen May 25, 2020

RuneKR commented Jun 30, 2020 •

edited

Loading

shilman commented Jul 1, 2020

		export const createBabelLoader = (options, framework) => ({
		test: useBaseTsSupport(framework) ? /\.(mjs\|tsx?\|jsx?)$/ : /\.(mjs\|jsx?)$/,

Core: Zero-config TypeScript loading #10813

Core: Zero-config TypeScript loading #10813

Conversation

mrmckeb commented May 17, 2020 • edited by shilman Loading

What I did

How to test

github-actions bot commented May 17, 2020 • edited Loading

yannbf commented May 17, 2020

graup commented May 18, 2020

shilman commented May 20, 2020 • edited Loading

Problem

Some numbers from a month ago:

Next (today)

This branch

Solution

ndelangen May 20, 2020

Choose a reason for hiding this comment

shilman commented May 21, 2020

matheo May 23, 2020

Choose a reason for hiding this comment

mrmckeb May 25, 2020

Choose a reason for hiding this comment

ndelangen May 25, 2020

Choose a reason for hiding this comment

mrmckeb May 25, 2020

Choose a reason for hiding this comment

ndelangen May 25, 2020

Choose a reason for hiding this comment

ndelangen May 25, 2020

Choose a reason for hiding this comment

RuneKR commented Jun 30, 2020 • edited Loading

shilman commented Jul 1, 2020

mrmckeb commented May 17, 2020 •

edited by shilman

Loading

github-actions bot commented May 17, 2020 •

edited

Loading

shilman commented May 20, 2020 •

edited

Loading

RuneKR commented Jun 30, 2020 •

edited

Loading