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

Open
kroeder opened this Issue Dec 18, 2018 · 4 comments

Comments

3 participants
@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 IN PROGRESS

Apps

Package Task owner PR Status
@storybook/angular @kroeder #5109 IN PROGRESS

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

Addons

Package Task owner PR Status
@storybook/addon-a11y
@storybook/addon-actions @gaetanmaisse #5459 MERGED
@storybook/addon-backgrounds @gaetanmaisse #5535 MERGED
@storybook/addon-centered
@storybook/addon-cssresources @gaetanmaisse #5380 MERGED
@storybook/addon-events
@storybook/addon-google-analytics @gaetanmaisse #5307 MERGED
@storybook/addon-graphql
@storybook/addon-info
@storybook/addon-jest
@storybook/addon-knobs
@storybook/addon-links
@storybook/addon-notes @kroeder #4758 MERGED
@storybook/addon-ondevice-backgrounds
@storybook/addon-ondevice-knobs
@storybook/addon-ondevice-notes
@storybook/addon-options
@storybook/addon-storyshots
@storybook/addon-storysource
@storybook/addon-viewport

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.

@gaetanmaisse

This comment has been minimized.

Copy link
Contributor

gaetanmaisse commented Dec 18, 2018

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

@kroeder

This comment has been minimized.

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

This comment has been minimized.

Copy link
Contributor

gaetanmaisse commented Jan 28, 2019

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

@kroeder

This comment has been minimized.

Copy link
Member Author

kroeder commented Feb 4, 2019

@gaetanmaisse done!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment