Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TypeScript migration organization #5030

Closed
kroeder opened this issue Dec 18, 2018 · 42 comments · Fixed by #13450
Closed

TypeScript migration organization #5030

kroeder opened this issue Dec 18, 2018 · 42 comments · Fixed by #13450
Assignees
Labels
maintenance User-facing maintenance tasks typescript

Comments

@kroeder
Copy link
Member

kroeder commented Dec 18, 2018

What is this?

I want to use this issue for organizing the TypeScript migration process.

What is going to be migrated

I started with addon-notes and noticed it depends on channels and addons so I migrated them as well.
I'm not sure if we should migrate every lib but at least those that are used in addons or provide a public api that is used by other apps.

Let's discuss this if someone has other thoughts on this!

General

Package Task owner PR Status
babel-typescript @kroeder #5109 MERGED

Apps

Package Task owner PR Status
@storybook/angular @kroeder #6570 MERGED
@storybook/ember @aromanarguello #9020 MERGED
@storybook/html @emilio-martinez #7338 MERGED
@storybook/marko @gaetanmaisse #13449 WIP
@storybook/marionette @gaetanmaisse #13448 WIP
@storybook/mithril @hcz #8320 MERGED
@storybook/polymer @kroeder #8102 MERGED
@storybook/preact @lonyele #7527 MERGED
@storybook/rax @gaetanmaisse #13450 WIP
@storybook/react-native-server OUTDATED
@storybook/react-native @benoitdion #6448 MERGED
@storybook/react @kroeder #7054 MERGED
@storybook/riot @gaetanmaisse #13447 WIP
@storybook/svelte @aromanarguello #8770 MERGED
@storybook/vue @ndelangen #7578 MERGED

Libs

Package Task owner PR Status
@storybook/channels @kroeder #4977 MERGED
@storybook/channels-websocket @kroeder #5046 MERGED
@storybook/channels-postmessage @dandean #5154 MERGED
@storybook/addons @kroeder #5018 MERGED
@storybook/core-events @dandean #5140 MERGED
@storybook/node-logger @dandean #5153 MERGED
@storybook/client-logger @dandean #5151 MERGED
@storybook/components @gaetanmaisse #6095 #6500 MERGED
@storybook/api @ndelangen #5402 MERGED
@storybook/core @gaetanmaisse #12839 MERGED
@storybook/ui @ndelangen #9791 MERGED
@storybook/cli @gaetanmaisse #10802 MERGED

Addons

Package Task owner PR Status
@storybook/addon-a11y @gaetanmaisse #5738 MERGED
@storybook/addon-actions @gaetanmaisse #5459 MERGED
@storybook/addon-backgrounds @gaetanmaisse #5535 MERGED
@storybook/addon-centered @gaetanmaisse #6772 MERGED
@storybook/addon-cssresources @gaetanmaisse #5380 MERGED
@storybook/addon-events @lonyele #7190 MERGED
@storybook/addon-google-analytics @gaetanmaisse #5307 MERGED
@storybook/addon-graphql @lonyele #6935 MERGED
@storybook/addon-info @gaetanmaisse Replaced by addons-docs
@storybook/addon-jest @sairus2k #6403 MERGED
@storybook/addon-knobs @emilio-martinez #7180 MERGED
@storybook/addon-links @sairus2k #6246 MERGED
@storybook/addon-notes @kroeder #4758 MERGED
@storybook/addon-ondevice-backgrounds @lonyele #7736 MERGED
@storybook/addon-ondevice-knobs @wuweiweiwu WIP
@storybook/addon-ondevice-notes @lonyele #7737 MERGED
@storybook/addon-options @kroeder #6428 MERGED
@storybook/addon-storyshots @gaetanmaisse #7674 MERGED
@storybook/addon-storysource will be done in v2 PAUSED
@storybook/addon-viewport @gaetanmaisse #7177 MERGED

Deletion of DefinitelyTyped packages

As sources will now be written in TS storybook packages will export their own types definitions so we will be allowed to delete types from DefinitelyTyped (i.e. @types/storybook-XXX).

⚠️ Be sure that addon/lib was merged and publically available with an official release of Storybook before removing any types from DefinitelyTyped.

Package Task owner PR Status
storybook__addon-notes @gaetanmaisse #34111 MERGED
storybook__addon-a11y @gaetanmaisse #37358 MERGED
storybook__addon-actions @MichaelDeBoey #38447 MERGED
storybook__addon-backgrounds @MichaelDeBoey #38447 MERGED
storybook__addon-centered @MichaelDeBoey #38447 MERGED
storybook__addon-info - - -
storybook__addon-jest @MichaelDeBoey #38447 MERGED
storybook__addon-knobs @MichaelDeBoey #38447 MERGED
storybook__addon-links @MichaelDeBoey #38447 MERGED
storybook__addon-options @MichaelDeBoey #38447 MERGED
storybook__addon-storyshots @gaetanmaisse #41583 MERGED
storybook__addon-viewport @MichaelDeBoey #38447 MERGED
storybook__addons @MichaelDeBoey #38447 MERGED
storybook__channels @MichaelDeBoey #38447 MERGED
storybook__preact @MichaelDeBoey #38447 MERGED
storybook__react @MichaelDeBoey #39365 MERGED
storybook__react-native @MichaelDeBoey #38447 MERGED
storybook__vue @MichaelDeBoey #38447 MERGED

Activate TS strict mode

Why use TS strict mode?

Example on a11y addon: https://github.com/storybookjs/storybook/pull/9180/files

Initial steps for every migration

  1. Copy tsconfig.json from e.g. addon-notes into the root of the package
  2. Edit package.json of the package (TODO* We need to figure out how to handle tree shaking)
    2.1 Remove jsnext:main
    2.2 Add "types": "dist/%my-entry-point%.d.ts. If you have multiple files that export things, see: "My package has multiple files with exports"
  3. Rename
    3.1 .js files to .ts
    3.2 files that use jsx to .tsx

FAQ

How do I compile TypeScript?

Storybook already compiles TypeScript by using yarn dev.
I suggest using yarn dev:ts because you don't want to compile everything but TypeScript right now.

Could not find declaration file for module '...'

This means a package you are importing does not ship declaration files (types) for TypeScript.
This message is caused by noImplicitAny: true https://basarat.gitbooks.io/typescript/docs/options/noImplicitAny.html

image

Example:

import { WebSocket } from 'global';

For non-storybook packages

Install additional devDeps from @types, if available: @types/package-name
If there's no @types package, see "Write your own declaration"

For storybook packages

If a certain package is not in the list above, please add it.
See "Write your own declaration"

Write your own declaration

Add a typings.d.ts file to your src directory.
At least declare a module for a package that does not contain declarations.

// This makes anything that is importet from 'global' "any" so you don't have any type hints or checks
declare module 'global';

You can provide additional information. Depends on how important and how often a certain package is used.

See https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
Examples: https://www.typescriptlang.org/docs/handbook/declaration-files/templates.html

My package has multiple files with exports

If your package has exports from multiple files you need to create one file that exports all your public api things.

Example:

// file a
export { someFunction, PropertyInterface }

// file b
export { somethingElse, MoreToExport }
  1. Create a public_api.ts with
export * from "file-a.ts"
export * from "file-b.ts"
  1. Edit package.json
    2.1 Set
  "main": "dist/public_api.js",
  "types": "dist/public_api.d.ts",

My packages has a default export but it can't be imported

This likely means that you use a public_api.ts as mentioned above and another file in your package has a default export.

In @storybook/addons it is solved this way

// index.ts
export const addons = getAddonsStore();

// public_api.ts
import { addons } from '.';
export default addons;

One package can have only one default export and it seems to be that it has to be in your main file of your package.

@kroeder kroeder added in progress maintenance User-facing maintenance tasks typescript labels Dec 18, 2018
@kroeder kroeder self-assigned this Dec 18, 2018
@gaetanmaisse
Copy link
Member

Looks promising! 😄
Can I help on something? Maybe try to migrate an addon to TS after #5018 and #4977 will be merged?

@kroeder
Copy link
Member Author

kroeder commented Dec 18, 2018

Of course! I hope to get them finished by tomorrow. Just pick whatever addon you want and open a PR 👍

If you want to start right now you also can just migrate the updates into your branch later on

@gaetanmaisse
Copy link
Member

@kroeder you can update your post to set addon-google-analytics and addon-cssresources as migrated.

@kroeder
Copy link
Member Author

kroeder commented Feb 4, 2019

@gaetanmaisse done!

@backbone87
Copy link
Contributor

i can offer to do the @storybook/vue migration once the core package is done

@shilman shilman closed this as completed Mar 8, 2019
@shilman shilman reopened this Mar 8, 2019
@MichaelDeBoey
Copy link
Contributor

@ndelangen I just love to do some OSS work now and then 😉

@shilman
Copy link
Member

shilman commented Nov 23, 2019

Great work @MichaelDeBoey @gaetanmaisse 🙌 🙌 🙌

@shilman
Copy link
Member

shilman commented May 20, 2020

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

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

Closing this issue. Please re-open if you think there's still more to do.

@shilman shilman closed this as completed May 20, 2020
@shilman shilman reopened this May 20, 2020
@shilman
Copy link
Member

shilman commented May 21, 2020

We've just released zero-config typescript support in 6.0-beta. Please upgrade and test it!

Thanks for your help and support getting this stable for release!

@shilman
Copy link
Member

shilman commented Nov 4, 2020

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-beta.2 containing PR #12839 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Closing this issue. Please re-open if you think there's still more to do.

@gaetanmaisse
Copy link
Member

🥳 It's over! It's done.

🙇🏻 Thanks to all of you @aromanarguello @emilio-martinez @hcz @lonyele @ndelangen @dandean @sairus2k @wuweiweiwu @MichaelDeBoey! You're all part of this!

❤️ And a special big Thank You to @kroeder for having started and led this at the begginning and help me to make my first contributions to Storybook a few years ago.

🎉 🎆

@shilman
Copy link
Member

shilman commented Jan 14, 2021

Great Caesar's ghost!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.2.0-alpha.14 containing PR #13447 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb upgrade --prerelease

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
maintenance User-facing maintenance tasks typescript
Projects
None yet
Development

Successfully merging a pull request may close this issue.

10 participants