search

gatsbyjs / gatsby

The best React-based framework with performance, scalability and security built in.
https://www.gatsbyjs.com
MIT License
55.19k stars 10.33k forks source link

[Umbrella] TypeScript Migration (Help wanted!) #21995

Closed blainekasten closed 1 year ago

blainekasten commented 4 years ago

Hello Community!

Gatsby is rewriting our core codebase in TypeScript! Checkout the RFC: #21798

We would love love love your help! This work is incredibly important in Gatsby being a stable product and you could be a part of it! We are looking for community members who would be willing to jump into the codebase in transition files from .js to .ts and add the proper typings. We have a few guidelines we are wanting to stick to when doing this:

Gatsby TS Guidelines

If you're interested in getting involved, check out the list below. If you're interested in doing something, please respond as a comment, i'll put your name by a file so others know it's "claimed", when the PR is merged i'll check the box.

Tips to get involved: first read the contribution docs, and see how to set up your local environment. After you've claimed the file to work on, convert it locally and ensure there are no typing or lint errors displayed in your IDE. Run yarn typecheck and yarn lint:code in the root before opening the PR, which will show any errors. Once you're ready, open the PR and one of us will review it. Thanks, and good luck!

File list

herecydev commented 4 years ago

I'll happily pick up gatsby-link. Been meaning to learn some more around there!

blainekasten commented 4 years ago

@herecydev That sounds great! I'll put your name down! That one is relatively small and isolated, so feel free to do that whole package in one PR if you want.

herecydev commented 4 years ago

@blainekasten just a few preliminary comments. There are quite a few globals/window variables: __BASE_PATH__, ___navigate, ___push, ___replace, __PATH_PREFIX__, ___loader. Is there a strategy about making those available to typescript? I believe they're all defined from within the gatsby package.

blainekasten commented 4 years ago

@herecydev those variables are def meant to be like "private" "secret" variables.. So I don't think we'll expose any types from gatsby package as they are only meant to be used in a few places. I think the best course of action would just be to define types for them in the gatsby-link package.

aminkhp commented 4 years ago

I'm excited to contribute, which package do you suggest for starting?

blainekasten commented 4 years ago

@aminkhp awesome!! I would love it if we could just start chunking off individual files in PRs. Want to tackle gatsby-core-utils? I would love if you just did one file per PR as they are all very isolated.

robertrbairdii commented 4 years ago

I'd be happy to contribute some types. I'd be able to tackle gatsby-page-utils.

I took a peek at gatsby-core-utils by the way, and it looks like true-case-path is just an empty file. I'm not sure if that's intentional, but it might be worth deleting from the repo and removing from the list? https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-core-utils/src/true-case-path.js

blainekasten commented 4 years ago

@robertrbairdii Great! If you could chunk up the work and submit 1 PR for each line I had, that would be fantastic.

Good point re the gatsby-core-utils. cc @aminkhp

mottox2 commented 4 years ago

I'd like to try src/commands/build-javascript.js.

ADDITION: I'd also like to tackle babel-preset-gatsby

jlkiri commented 4 years ago

I spent some time in src/redux/actions/public.js before, so I think I can help with it.

robertrbairdii commented 4 years ago

@blainekasten I was looking at the .babelrc while converting gatsby-page-utils and I noticed that there is no reference to @babel/plugin-transform-typescript in babel-preset-gatsby-package (https://github.com/gatsbyjs/gatsby/blob/master/packages/babel-preset-gatsby-package/index.js ). And running a test build, the converted .ts files don't make it to the /dist folder.

The babel config at the root of the repo has an override for it https://github.com/gatsbyjs/gatsby/blob/master/.babelrc.js#L12 And that config seems to be imported by other packages such as https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby/babel.config.js

As far as I know, you can only pass the extensions as an argument through the CLI, so we would have to add the --extensions flag to each babel reference in the scripts section of all the package.json of the packages being converted. You could then either provide the override as is done in the root .babelrc or add @babel/plugin-transform-typescript in babel-preset-gatsby-package and allow values like isTSX to be configured via options passed in to the package.

I think this will block getting some of the TS conversions merged in and published.

herecydev commented 4 years ago

@robertrbairdii I came to the same findings on my PR: https://github.com/gatsbyjs/gatsby/pull/22027

It wasn't obvious at first, but lucky there is some prior art in the gatsby-cli project to look at. It might be worth a ticket to sweep through all the packages to support ts, which will make the files more approachable as a whole

danielkov commented 4 years ago

I would love to help out and I don't have any preferences. Can you recommend me some parts to migrate?

MichaelDeBoey commented 4 years ago

@danielkov Seeing by @blainekasten's comment (https://github.com/gatsbyjs/gatsby/issues/21995#issuecomment-595965697), I think you could start in gatsby-core-utils

danielkov commented 4 years ago

@MichaelDeBoey I also have my eyes on gatsby-cli/src/structured-errors if nobody else is on it and then move onto gatsby-core-utils in another PR. Does that sound good?

MichaelDeBoey commented 4 years ago

@danielkov That one's already taken by @LekoArts in #20597

danielkov commented 4 years ago

I see #22031 is addressing one of the files of gatsby-core-utils. Should I wait for that merge, or start independently and resolve conflicts when done?

MichaelDeBoey commented 4 years ago

@danielkov You can just start working on it. The conflicts can be fixed before merging. 🙂

danielkov commented 4 years ago

@MichaelDeBoey my currently open PRs include all the closed ones at the moment. If you have the time will you double check that this is now correct?

kawamataryo commented 4 years ago

I'd like to work on src/utils/app-data.js, utils/browserslist

Naturalclar commented 4 years ago

I'd like to work on components/spinner.js

moonmeister commented 4 years ago

Where are we at with converting plugins to typescript? things like source plugins, manifest, offline, etc...

cola119 commented 4 years ago

I'd like to work on

wardpeet commented 4 years ago

Where are we at with converting plugins to typescript? things like source plugins, manifest, offline, etc...

We're not going to convert those (yet)? As we think it might be harder for people to contribute on those. Gatsby core packages are mostly only managed by us so we think it's worth doing it as it makes our lives easier when working on it.

@blainekasten I'm not 100% sure if we should refactor browser parts like gatsby-link, gatsby-image & our cache-dir. This might lead to bigger bundles.

Pittan commented 4 years ago

Hello! I'd like to work on

cola119 commented 4 years ago

I'd like to try

MichaelDeBoey commented 4 years ago

I'd like to try

  • packages/gatsby/src/utils/get-cache.js
  • packages/gatsby/src/utils/get-latest-apis.js
  • packages/gatsby/src/utils/get-public-path.js

@cola119 I suggest you first create a PR for all other files you're working on, so other people can maybe take a look at those file in the meantime if they want. Just don't think we want to wait for something, when somebody else could work on it

sasurau4 commented 4 years ago

I'll work on stack-trace-utils.js

martijnjanssen commented 4 years ago

I'm working on jobs-manager.js

1natsu172 commented 4 years ago

I'll take on src/redux/actions/types.js

grgr-dkrk commented 4 years ago

I'd like to try packages/gatsby-image/src/index.js.

1natsu172 commented 4 years ago

redux/actions/restricted.js also depends on redux/actions/types.js, so I will take it.

Kornil commented 4 years ago

I'm taking care of the /redux folder on gatsby-cli on https://github.com/gatsbyjs/gatsby/pull/22292

dvrylc commented 4 years ago

I'd like to start with packages/gatsby/src/utils/eslint-config.js - #22294

dvrylc commented 4 years ago

I'm working on packages/gatsby/src/utils/gatsby-dependents.js - #22422

zachdtaylor commented 4 years ago

I'd love to help with this, @blainekasten. Any suggestions for a first time contributor?

parikshitgupta1 commented 4 years ago

There are quite a few globals/window variables: BASE_PATH_, navigate, push, replace, PATH_PREFIX_, loader.

zachdtaylor commented 4 years ago

If nobody is opposed, @blainekasten, I think I'll try converting babel-plugin-remove-graphql-queries/src/murmur.js.

parikshitgupta1 commented 4 years ago

@zachtylr21 alright

zachdtaylor commented 4 years ago

@parikshitgupta1 Oh, was your previous comment directed at me? I can work on those too, if needed.

AmyShackles commented 4 years ago

If you’re still looking for help, I’d love to do what I can. Anything specific you’d like help converting that hasn’t been assigned yet?

parikshitgupta1 commented 4 years ago

Hey @AmyShackles thanks for asking, although from my side there's nothing left, although let's see in the thread.

LekoArts commented 4 years ago

Feel free to take whatever item from that list. We appreciate any PR, no matter if small/easy or big/complicated file :)

Eyas commented 4 years ago

Hi @blainekasten I'm sending PRs for:

Some of them are bigger than I hoped, but their dependencies ended up being hard to disentangle.

kevinrmendez commented 4 years ago

I would love to contribute! Is there any small/easy file I can start working on? I am still getting familiar with Gatsby :D

josephgoksu commented 4 years ago

I'm here to help. Anyone asking for help specifically or I'll pick one.

JustFly1984 commented 4 years ago

@blainekasten

I wanted to give back my 2 cents to community. Last weekend I had to dig deep to gatsby.js codebase, cos I had this annoying issue with type checking in my project: #22070

So I had time on last weekend to start huge refactoring. I have no time to continue now, but I had refactored to typescript gatsby-telemetry gatsby-core-utils and partially other projects.

https://github.com/gatsbyjs/gatsby/pull/22817

I hope it will give some ideas, If needed I can explain my findings and decisions, either here, or on skype: justfly1984

smkamranqadri commented 4 years ago

Would like to contribute, any suggestions to where to start?

grikomsn commented 4 years ago

I'd like to try working on packages\gatsby\src\bootstrap\prefer-default.js first to get to know more about how things work, if that's okay.

Update: submitted PR https://github.com/gatsbyjs/gatsby/pull/22958

kpfromer commented 4 years ago

I would really like to contribute! Could I possibly convert packages/gatsby/reducers/themes.js?