Gatsby: [Umbrella] TypeScript Migration (Help wanted!)

[blainekasten]

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

• Only use named exports, no export default.
• When importing a package, always try to find community maintained types instead of typing ourselves. Look at the DefinitelyTyped github repository.
• Opt for using Interfaces for objects and functions.
• Type aliases should be used for primitives, unions and tuples
• Interface declaration merging is an anti-pattern and should not be used internally.
• Use Array<type> rather than type[] syntax, as it's clearer and matches built-in types such as Map.
• Use TypeScript's helper types, such as Record, rather than defining your own.
• Every function should type its input and output (even if it’s inferrable)
• Enums are great, but beware they map to index numbers if not redefined. This can cause weird problems for public APIs that interop to normal JS.
• The any type can be used for stubbing module types that would be out of scope to migrate. But it should not be used for any functional input/outputs. The end goal of this migration is to have ZERO any types in the codebase. See if unknown makes more sense in that context. Don't use @ts-ignore comments.
• Lastly and most imporantly, we want to have simple types whenever possible. Primarily we should try to avoid Generics. Generic code can be highly reusable, but that can also come with the greater chance of breaking things. If you do need to use generics, please either give them default values or ensure the generic value can be inferred. Code should be simple when possible. DRY is not always best.

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

• [x] packages/babel-plugin-remove-graphql-queries

  • [x] src
  • [x] /index.js (@zachtylr21 in #23954)
    

    - [x] /murmur.js (@zachtylr21 in #22458)

• [ ] packages/babel-preset-gatsby

  • [ ] src
  • [x] /utils/path-serializer.js (@MichaelDeBoey in #22035)
  • [x] /dependencies.js + test (@MichaelDeBoey in #22038)
    

    - [ ] /index.js + test

• [ ] packages/gatsby

  • [x] /cache-dir DONT DO
  • [ ] src/bootstrap
  • [x] load-plugins (@Eyas in #22504)
    
    
    
    • [x] /index.js
    
    
    • [x] /load.js
    
    
    • [x] /validate.js
    
    
  • [ ] load-themes/index.js
  • [x] get-config-file.js (@mottox2 in #22472)
  • [x] graphql-runner.js (@rayriffy in #22860)
  • [x] index.js (@ascorbic in #24816)
  • [x] log-line-function.js (@gabrieluizramos in #23677 )
  • [x] page-hot-reloader.js (@jeffreymeng in #27330)
  • [x] prefer-default.js (@gabrieluizramos in #23677)
  • [x] redirects-writer.js (@mottox2 in #22530)
  • [x] remove-stale-jobs.js (@gabrieluizramos in #23538)
  • [x] requires-writer.js (@alexpyzhianov in #24289)
  • [x] resolve-module-exports.js (@Eyas in #24519)
  • [x] schema-hot-reloader.js (@mottox2 in #22497)
  • [x] src/commands
  • [x] /build.js (@devrchancay in #23695)
  • [x] /build-html.js (@blainekasten in #20535)
  • [x] /build-javascript.js (@mottox2 in #22028)
  • [x] /build-utils.js (@mottox2 in #22262)
  • [x] /clean.js (@mottox2 in #22036)
  • [x] /develop (@blainekasten in #19923)
  • [x] /develop-static.js (@blainekasten in #22106)
  • [x] /repl.js (@mottox2 in #22037)
  • [x] /serve.js (@mottox2 in #22209)
  • [ ] src/db
  • [x] common/query.js
  • [x] loki/* DONT DO
  • [ ] index.js (@arthurjdam in #22725)
  • [x] nodes.js (@pvdz in #25199)
  • [ ] sanitize-node.js (@arthurjdam in #22725)
  • [x] src/internal-plugins DONT DO
  • [x] src/joi-schemas/joi.js (@arthurjdam in #22738)
  • [ ] src/query
  • [x] /better-queue-custom-store.js + test (@chooban in #25389)
  • [x] /error-parser.js + test (@LekoArts in #20597)
  • [ ] /file-parser.js + test (@martingreilinger )
  • [ ] /graphql-errors.js (@jeffreymeng)
  • [x] /graphql-runner.js (@ascorbic in #21956)
  • [ ] /index.js + test - data-tracking.js
  • [ ] /query-compiler.js + test (@mohinderps)
  • [x] /query-runner.js (@mottox2 in #22427)
  • [ ] /query-watcher.js (@ArcaneDiver in #27324)
  • [x] /queue.js (@chooban in #25389)
  • [x] /redirects-writer.js (@PerfectPan in #23332), (@taejs in #23785 - this was closed as duplicate)
  • [x] /utils.js + test (@kawamataryo #22171
  • [ ] src/redux
  • [ ] /actions
    
    
    
    • [x] add-page-dependency.js (@MichaelDeBoey in #22062)
    
    
    • [x] index.js (@MichaelDeBoey in #22063)
    
    
    • [x] internal.js (@blainekasten in #20457)
    
    
    • [ ] public.js (@jlkiri in #22274)
    
    
    • [x] restricted.js (@1natsu172 in #22297)
    
    
    • [x] types.js (@1natsu172 in #22297)
    
    
  • [x] machines/page-component.js (@kornil in #23277)
  • [x] /reducers
    
    
    
    • [x] babelrc.js (@kornil in #24115)
    
    
    • [x] component-data-dependencies.js (@kornil in #24028)
    
    
    • [x] components.js (@Kornil in #24045)
    
    
    • [x] config.js (@pieh in #23620)
    
    
    • [x] flattened-plugins.js (@alisson-suzigan #24062)
    
    
    • [x] index.js (@alisson-suzigan in #23877)
    
    
    • [x] inference-metadata.js (@kornil in #24381)
    
    
    • [x] jobs.js (@kornil in #24209)
    
    
    • [x] jobsv2.js (@gabrieluizramos in #23708)
    
    
    • [x] last-actions.js (@alisson-suzigan in #23771)
    
    
    • [x] nodes-by-type.js (@alisson-suzigan #24419)
    
    
    • [x] nodes-touched.js (@carrotderek in #24247)
    
    
    • [x] nodes.js (@alisson-suzigan in #23771)
    
    
    • [x] page-data-stats.js (@carrotderek in #24082)
    
    
    • [x] page-data.js(@taejs in #23738)
    
    
    • [x] pages.js (@hiwelo in #23701)
    
    
    • [x] program.js (@tgallacher in #24941)
    
    
    • [x] redirects.js (@akshitkrnagpal in #22810)
    
    
    • [x] resolved-nodes.js (@alisson-suzigan in #24062)
    
    
    • [x] schema-customization.js (@kornil in #24259)
    
    
    • [x] schema.js (@hiwelo in #23591)
    
    
    • [x] static-query-components.js (@hiwelo in #23475)
    
    
    • [x] status.js (@hiwelo in #23474)
    
    
    • [x] themes.js (@taejs in #23716)
    
    
    • [x] webpack-compilation-hash.js (@chrisq21 in #23439)
    
    
    • [x] webpack.js (@hiwelo in #23566)
    
    
  • [x] index.js (@blainekasten in #20457)
  • [x] nodes.js (@blainekasten in #21010)
  • [x] persist.js (@blainekasten in #20457)
  • [x] plugin-runner.js (@kawamataryo in #22476)
  • [x] run-fast-filters.js (@pvdz in #25055)
  • [ ] src/schema
  • [ ] extensions/index.js
  • [ ] infer/
    
    
    
    • [ ] add-inferred-fields.js
    
    
    • [x] build-example-data.js (@chooban in #23389)
    
    
    • [ ] index.js
    
    
    • [x] inference-metadata.js (@chooban in #23264)
    
    
    • [x] is-32-bit-integer.js (@Pittan in #22138)
    
    
    • [x] is-file.js (@chooban in #23093)
    
    
    • [x] type-conflict-reporter.js (@chooban in #23264)
    
    
  • [ ] types/
    
    
    
    • [x] built-in-types.js (@mottox2 in #22391)
    
    
    • [x] date.js (@sasurau4 in #22430)
    
    
    • [x] derived-types.js (@sasurau4 in #22442)
    
    
    • [x] filter.js (@sasurau4 in #22493)
    
    
    • [x] node-interface.js (@alisson-suzigan in #26733)
    
    
    • [x] pagination.js (@alisson-suzigan in #23717)
    
    
    • [ ] sort.js
    
    
    • [x] type-builders.js (@PerfectPan in #23892)
    
    
    • [ ] type-defs.js
    
    
  • [x] context.js
  • [ ] index.js
  • [ ] node-model.js
  • [ ] print.js (@LinnJS)
  • [x] resolvers.js
  • [ ] schema-composer.js
  • [x] schema.js (@alisson-suzigan in #23717)
  • [ ] src/utils
  • [x] tracer/
    
    
    
    • [x] index.js (@kawamataryo #22296 )
    
    
    • [x] jaeger-local.js (@chooban in #23656)
    
    
    • [x] zipkin-local.js (@kawamataryo)
    
    
  • [x] worker/
    
    
    
    • [x] child.js ( @kawamataryo #22583 )
    
    
    • [x] page-data.js (@kawamataryo #22155)
    
    
    • [x] pool.js (@kawamataryo #22150)
    
    
    • [x] render-html.js( @kawamataryo #22263 )
    
    
  • [x] /api-browser-docs.js (@gabrieluizramos in #23688)
  • [x] /api-node-docs.js (@gabrieluizramos in #23688)
  • [ ] /api-node-helpers-docs.js
  • [x] /api-runner-error-parser.js (@LekoArts in #20597)
  • [ ] /api-runner-node.js
  • [x] /app-data.js (@kawamataryo in #22076 )
  • [ ] /babel-loader-helpers.js (#kornil in #25100)
  • [ ] /babel-loader.js
  • [x] /babel-parse-to-ast.js (@john015 in #22480)
  • [x] /browserlist.js (@kawamataryo in #22089 )
  • [x] /cache.ts (@mattkane in #20626)
  • [x] /create-node-id.js (@Pittan in #22096)
  • [x] /create-schema-customization.js (@mottox2 in #22392)
  • [x] /detect-port-in-use-and-prompt.js (@mottox2 in #22061)
  • [x] /eslint-config.js (@dvrylc in #22294)
  • [x] /gatsby-dependents.js (@dvrylc in #22422)
  • [x] /gatsby-webpack-eslint-graphql-schema-reload-plugin.js (@sasurau4 #22408)
  • [x] /gatsby-webpack-stats-extractor.js (@sasurau4 #22404)
  • [x] /get-cache.js (@cola119 in #22094)
  • [x] /get-latest-apis.js (@cola119 in #22097)
  • [x] /get-public-path.js (@cola119 in #22093)
  • [x] /get-ssl-cert.js (@mottox2 in #22447)
  • [x] /get-static-dir.js (@mottox2 in #22083)
  • [x] /get-value-at.js (@martijnjanssen in #22182)
  • [x] /is-32-bit-integer.js (@Pittan in #22138)
  • [x] /jobs-manager.js (@martijnjanssen in #22189)
  • [x] /js-chunk-names.js (@mottox2 in #22289)
  • [x] /local-eslint-config-finder.js (@mottox2 in #22403)
  • [x] /merge-gatsby-config.js(@taejs in #23789)
  • [x] /normalize-page-path.js (@martijnjanssen in #22188)
  • [x] /page-data.js (@hiwelo in ~#23436~ #23991)
  • [x] /page-html.js (@kawamataryo in #22118)
  • [x] /path.js (@kawamataryo in #22130)
  • [x] /prepare-regex.js (@mottox2 in #22133)
  • [ ] /profile.js
  • [x] /reach-router-add-basecontext-export-loader.js
  • [x] /source-nodes.js
  • [x] /stack-trace-utils.js (@sasurau4 in #22251)
  • [x] /test-require-error.js (@sasurau4 in #22265)
  • [x] /webpack-error-utils.js (@sasurau4 in #22278)
  • [x] /webpack-helpers.js (@sasurau4 in #22279)
  • [x] /webpack-hmr-hooks-patch.js (@sasurau4 in #22280)
  • [x] /webpack-plugins.js (@sasurau4 in #22378)
  • [x] /webpack-utils.js (@sasurau4 in #22381)
  • [ ] /webpack.config.js
    

    - [x] /websocket-manager.js (@Eyas in #22510)

• [x] packages/gatsby-cli

  • [x] src/reporter
  • [x] loggers
    
    
    
    • [x] ink (@arthurjdam in #22782)
    
    
    • [x] components (@arthurjdam in #22782)
      
      
      
      
      
      • [x] develop.js (@arthurjdam in #22782)
      
      
      
      • [x] error.js (@Naturalclar in #22098)
      
      
      
      • [x] messages.js (@cola119 in #22084)
      
      
      
      • [x] progress-bar.js (@Naturalclar in #22081)
      
      
      
      • [x] spinner.js (@Naturalclar in #22080)
      
      
      
    
    
    • [x] cli.js (@arthurjdam in #22782)
    
    
    • [x] context.js (@arthurjdam in #22782)
    
    
    • [x] index.js (@arthurjdam in #22782)
    
    
    • [x] ipc/index.js (@anoriqq in #23960)
    
    
    • [x] json/index.js (@wiput1999 in #24140)
    
    
    • [x] yurnalist/index.js (@blainekasten in #24224)
    
    
  • [x] redux (@Kornil in #22292)
    
    
    
    • [x] actions.js
    
    
    • [x] index.js
    
    
    • [x] reducer.js
    
    
  • [x] constants.js (@cola119 in #22084)
  • [x] errors.js (@blainekasten in #24226)
  • [x] index.js (@blainekasten in #22869)
  • [x] prepare-stack-trace.js (@blainekasten in #24226)
  • [x] types.js (@blainekasten in #22869)
  • [x] src/structured-errors (@LekoArts in #20597)
  • [x] construct-error.js
  • [x] error-map.js
  • [x] error-schema.js
  • [x] src/util
  • [x] calc-elapsed-time.js (@Naturalclar in #22081)
  • [x] configstore.js (@mottox2 in #22180 renamed to package-manager)
  • [x] ensure-windows-drive-letter-is-uppercase.js (@mottox2 in #22140)
  • [x] is-tty.js (@mottox2 in #22129)
  • [x] version.js (@mottox2 in #22176)
  • [x] src/create-cli.js (@alexpyzhianov in #23650)
  • [x] src/did-you-mean.js (@mottox2 in #22068)
  • [x] src/index.js (@blainekasten in #19923)
    

    - [x] src/init-starter.js (@mottox2 in #22086)

• [x] packages/gatsby-core-utils

  • [x] src/
  • [x] /ci.js (@danielkov in #22047)
  • [x] /cpu-core-count.js (@danielkov in #22048)
  • [x] /create-content-digest.js (@danielkov in #22049)
  • [x] /create-require-from-path.js (@danielkov in #22050)
  • [x] /get-config-file.js (@danielkov in #22051)
  • [x] /get-gatsby-version.js (@danielkov in #22052)
  • [x] /index.js (@danielkov in #22053)
  • [x] /path.js (@danielkov in #22054)
  • [x] /physical-cpu-count.js (@blainekasten in #22122)
    

    - [x] /url.js (@danielkov in #22056)

• [ ] packages/gatsby-link (@herecydev in #22027)

  • [ ] src/
  • [ ] /index.js + test
    

    - [ ] /parse-path.js + test

• [x] packages/gatsby-page-utils

  • [x] src/
  • [x] /create-path.js + test
  • [x] /ignore-path.js + test
  • [x] /index.js
  • [x] /validate-path.js + test
    

    - [x] /watch-directory.js

• [x] packages/gatsby-telemetry (@Eyas in #22532)

  • [x] src/
  • [x] error-helpers.js + test
  • [x] /event-storage.js
  • [x] /flush.js (@blainekasten in #25886)
  • [x] /index.js
  • [x] /is-truthy.js + test (@blainekasten in #25884)
  • [x] /postinstall.js
  • [x] /repository-id.js + test (@mottox2 in #22474)
  • [x] /send.js
  • [x] /showAnalyticsNotification.js
  • [x] /store.js
    

    - [x] /telemetry.js + test

• [x] packages/gatsby-react-router-scroll (@blainekasten in #24306)

  • [x] src/
  • [x] /index.js
  • [x] /ScrollBehaviorContext.js
  • [x] /ScrollContainer.js
  • [x] /StateStorage.js

[herecydev]

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

[blainekasten]

@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]

@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]

@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]

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

[blainekasten]

@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]

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]

@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]

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

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

[jlkiri]

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

[robertrbairdii]

@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]

@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]

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

[MichaelDeBoey]

@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]

@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]

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

[danielkov]

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]

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

[danielkov]

@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]

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

[Naturalclar]

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

[moonmeister]

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

[cola119]

I'd like to work on

• packages/gatsby-cli/src/reporter/loggers/ink/components/messages.js (edited)
• packages/gatsby-cli/src/reporter/constants.js

[wardpeet]

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]

Hello! I'd like to work on

• packages/gatsby/src/utils/create-node-id.js

[cola119]

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

[MichaelDeBoey]

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]

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

[martijnjanssen]

I'm working on jobs-manager.js

[1natsu172]

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

[grgr-dkrk]

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

[1natsu172]

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

[Kornil]

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

[dvrylc]

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

[dvrylc]

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

[zachtylr21]

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

[parikshitgupta1]

There are quite a few globals/window variables: __BASE_PATH__, ___navigate, ___push, ___replace, __PATH_PREFIX__, ___loader.

[zachtylr21]

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

[parikshitgupta1]

@zachtylr21 alright

[zachtylr21]

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

[AmyShackles]

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]

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

[LekoArts]

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

[Eyas]

Hi @blainekasten I'm sending PRs for:

• gatsby src/load-plugins #22504
• gatsby websocket-manager #22510
• gatsby-telemetry #22532
• gatsby-link #22563

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

[kevinrmendez]

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

[y7usuf]

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

[JustFly1984]

@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]

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

[grikomsn]

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]

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

[chooban]

Morning. I'm taking a pass at src/schema/infer/is-file.js this morning. Something hopefully small to get my head around first!

I'm also having a go at src/schema/infer/inference-metadata. I think it's nearly done, but trying to add types is giving me a few issues in terms of reachable code.

Added #23093 for is-file. It's an untested change, so might need a prequel PR to first add tests.

[blainekasten]

Hello everyone!

Just wanted to drop in and say a HUUUUUUGE thank you! The response from the community has been amazing and (a little) overwhelming 😅. But keep it coming! Ya'll are invaluable and speeding up this conversion 100x.

• To those who have submitted PR's, thank you!
• To those who's PRs have not yet been reviewed, we will get there! Some take more work than others and we have a lot to work through (including other features we want to launch for everyone!)
• To those looking to get involved, please do! Don't hesitate to put your name on a file in the description and start working on it. We want everyone's involvement.

We're making great progress. Let's keep it up!

[zachtylr21]

I made a PR for babel-plugin-remove-graphql-queries/murmur.js but I'm not sure how to get my name by the file in the description. Can anyone help with that?

[moonmeister]

@zachtylr21 Done! Thanks for the work. Once you get that PR merged and join the gatsby org you'll be able to do it all by yourself!! :partying_face:

[chooban]

I just noticed that the lint-staged action won't trigger if there are only changes to a TS file: https://github.com/gatsbyjs/gatsby/blob/master/package.json#L78

[alexpyzhianov]

Hey! Are there any specific issues with src/create-cli.js in gatsby-cli? I'd like to take it on if it's ok

[PerfectPan]

Hi！I made a PR for gatsby/src/query/redirects-writer.js. Can any one help me check out in the list?Thanks a lot! BTW, it is my first PR in gatsby, so I am worried about screwing it up. Any advice will help me a lot.

[hiwelo]

Hi folks! I'm happy to join the effort, and if nobody is currently looking at src/utils/page-data.js I'm happy to give it a try to start helping :+1:

[chrisq21]

Hey everyone 👋 Just made a small PR for redux/reducers/webpack-compilation-hash #23439 . Could someone add it to the list please?

[hiwelo]

If there is nobody on it at the moment, tomorrow I might work on small reducers like redux/reducers/webpack, redux/reducers/status (#23474), redux/reducers/static-query-components (#23475), redux/reducers/schema (#23476) and so on :)

[RaphaelGuimaraes]

I would like to contribute with log-line-function.js to start, ok?

[gabrieluizramos]

Hi there! 👋
I would love to join in! Can I start with the src/bootstrap/remove-stale-jobs.js at the packages/gatsby? 😄

[hiwelo]

~Just checked the file list; the PR for gatsby/src/utils/page-data.js (#23436) is missing~
(just saw I can update the list myself now, thanks!)

And I just pushed the gatsby/src/utils/webpack.ts migration (#23566)

[pieh]

I'll do packages/gatsby/src/redux/reducers/config.js (as part of some fixes)

[zachtylr21]

@moonmeister Thanks for doing that! I should probably mention that the PR number for murmur.js is #22458, if you want to put that next to my name as well.

[hiwelo]

Had a small issue with my fork so I had to close #23476 and open #23591 instead.
Same code, but new PR to review. Sorry for that.

Also this one should be ready for review (fixed last conflict with current master): #23436

[chooban]

I have a migrated gatsby/src/utils/tracer/jaeger-local ready to push up, but on reading the docs it seems like the file is there as an example for someone to feed back into gatsby, not as a part of the application itself. If it were to be migrated, and the documentation updated to point to the TS file instead, would feeding that file into gatsby as config still work?

I realise I could try and setup a jaeger instance to try it, but also someone more knowedgeable might answer it in far less time! :)

[pieh]

@chooban In the documentation we point to dist directory. dist directory will be javascript file (compiled from typescript) - so this should be fine and the documentation won't need changes. It will be good to verify that those config files work correctly, but other than that - it should be fine!

[Deborah-Digges]

Hello 👋 May I start with page-hot-reloader.js?

I'm excited to help migrate Gatsby to Typescript

[alisson-suzigan]

Hi folks!
I'd like to contribute too. Can I start with src/schema/types/pagination.js?

[gabrieluizramos]

@alisson-suzigan Hi bro, I'm happy to see you here ❤️

[devrchancay]

I will take the file src/commands/build.js
wish me luck 🤓

[hiwelo]

Hey folks!
I'm currently working on gatsby/src/reducers/program.js and I have a series of questions.

At the moment, it seems like there is a lot of elements from the js source file that is not matching the interface described in IGatsbyState.
It should welcome an IProgram object, but there seems to have a series of lacking elements.

In the JS file, the state is initialized with a state prop that I can't find in the IProgram interface. I replaced it with status, that might be a typo.
But then, the SET_PROGRAM_EXTENSIONS action is setting an extensions prop that is not at all existing in the IProgram interface. Do you have an idea what would be its content?

Also, what's mandatory does not seem to match what's initialized.

@blainekasten: would you have more insight in this interface? It seems like you created it. I'm happy to have a quick chat on Discord if it's easier :)

[alisson-suzigan]

Hi there,
Now I'd like to work in these files:

• packages/gatsby/src/redux/reducers/index.js
• packages/gatsby/src/redux/reducers/nodes.js
• packages/gatsby/src/redux/reducers/last-action.js

Is that ok?

[purelledhand]

Hi! I'd like to work on 🙌

• packages/gatsby/src/schema/types/sort.js

[taejs]

I investigated these files( /babel-loader-helpers.js and
/babel-loader.js) can be migrated,
But it's likely to be hard because babel-loader doesn't provide their type.

[chooban]

src/utils/profile.js is in the list but the contents of the file are entirely commented out. I could push up a PR to delete it? ;)

[zachtylr21]

I'd like to finish the package I was working on and convert babel-plugin-remove-graphql-queries/src/index.js

[chooban]

Added #23823 for source-nodes.

[devrchancay]

I will take the file src/create-cli.js

[alexpyzhianov]

@devrchancay Hey! Sorry for the confusion, but I've already done some initial work on it https://github.com/gatsbyjs/gatsby/pull/23650, but you can join in on it by all means

[devrchancay]

okay no problem i will take something else 🤔

It is good that many of us are contributing

[anoriqq]

I'll work on gatsby-cli/src/reporter/loggers/ipc/index.js!

[dshubhadeep]

Hi
I would like to work on gatsby/src/query/queue.js

[Kornil]

@hiwelo Still working on gatsby/redux/reducer/component.js?
I've worked on page-component and it is quite related, let me know if I can help.

[hiwelo]

@Kornil I am not working in gatsby/redux/reducer/component. Afaik, this file is not assigned at the moment :)

(I worked on gatsby/redux/reducer/static-query-components, but I don't recall having a look at this one at all so far)

[carrotderek]

I'd love to start contributing! I can pick up gatsby\packages\gatsby\src\redux\reducers\page-data-stats.js to get my feet wet.

[Kornil]

I'm gonna attempt gatsby's babelrc.js reducer

[carrotderek]

I can pick up nodes-touched and nodes-by-touch reducers.

[wiput1999]

@alisson-suzigan I've done gatsby-cli/src/reporter/loggers/json/index.js PR #24140 but I forgot to add my name in the list. I'm sorry about that

[Kornil]

Hey @carrotderek I've seen you assigned yourself to schema-customization, I just did it, didn't see your name there sooner, forgive me.

[alexpyzhianov]

Taking requires-writer.js from gatsby

[blainekasten]

Huge milestone! gatsby-cli is 100% converted to TypeScript! Thank you everyone for your incredible work 💜💜💜

[muescha]

since some files are referenced from the docs: should also a link change in docs also considered include an PR?

[tgallacher]

Happy to take a stab at the program reducer (src/redux/reducers/program.js). See #24941

[muescha]

i see this PRs are merged, but files are still unchecked:

index.js (@ascorbic in #24816)
queue.js (@chooban in #25389)
date.js (@sasurau4 in #22430)
derived-types.js (@sasurau4 in #22442)

[meritozh]

just a suggestion. how about use https://github.com/airbnb/ts-migrate ?

[chooban]

One of the comments (hi, @pvdz!) I had on a PR a little while back was to use Array<string> instead of string[] to bring things in-line with Map, Set, etc. We ended up going in the same direction on a work project, and I wrote a codemod to do the work for me.

Has that style decision been formalised, and would you like a PR to change them all over at once?

[pvdz]

@chooban Actually, yes :) But the lack of a codemod made it a little harder.

Does your codemod happen to come with a lint rule to prevent future regressions? Can you post the codemod?

[chooban]

function transform(file, api) {
  const j = api.jscodeshift

  const root = j(file.source)

  root
    .find(j.TSTypeAnnotation, {
      typeAnnotation: {
        type: 'TSArrayType',
      },
    })
    .replaceWith(p => {
      return j.tsTypeAnnotation(
        j.tsTypeReference(
          j.identifier(
            'Array'
          ),
          j.tsTypeParameterInstantiation([p.node.typeAnnotation.elementType])
        )
      )
    })

  return root.toSource()
}

module.exports = transform
module.exports.parser = 'tsx'

This is what I came up with. It's the second codemod I've written, so if anyone looks at it and thinks "why is it so complex?" then I'd love some pointers!

There's no lint rule yet, but it doesn't look like it would be too difficult to do. 🤞 I'll see if I can get one of those written as well.

Turns out there's already a rule for it, and it's fixable: https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/array-type.md It's also more accurate than my codemod. Interesting. I'll need to run some of these other fixes in our codebase in the AST Explorer to see why I missed them.

[chooban]

I've added #26738.

[gburiticato]

How can I help?

[bmds]

Would like to take a stab at packages/gatsby/src/utils/api-node-helpers-docs.js and /packages/gatsby-link/src/parse-path.js

packages/gatsby/src/utils/profile.js seems like a pointless change although could just update the extension while i was on other things

[ThakurKarthik]

@LekoArts @blainekasten I would like to work on these

packages/gatsby/src/schema/schema-composer.js
packages/gatsby/src/schema/types/type-defs.js

as i am new to typescript I will start with these files.
Thanks !

[jlkiri]

I'm sorry if anyone wants to take src/redux/actions/public.js (@jlkiri in #22274) - you can take it - I might not have free time to finish it for a while.

[jeffreymeng]

I’m down to try refactoring gatsby/src/bootstrap/page-hot-reloader.js

[soosgyul]

I might have jumped a gun but I quickly refactored the gatsby-link/src/parse-path.js and test. Pr can be seen here:
https://github.com/gatsbyjs/gatsby/pull/27264

[clovis1122]

I'll help with load-themes/index.js.

[khushijindal]

I want to work with gatsby/packages/gatsby/src/schema/schema-composer.js

[LekoArts]

@khushijindal There's already a PR open for it :) https://github.com/gatsbyjs/gatsby/pull/27241

---

Please look at previous comments and the PRs so that y'all don't work on the same things :) Thanks for all the contributions!

[khushijindal]

@khushijindal There's already a PR open for it :) #27241

Please look at previous comments and the PRs so that y'all don't work on the same things :) Thanks for all the contributions!

Actually, it was not marked in the above file that is why. Cool, I'll look for something else XD.

[ArcaneDiver]

Hey i'll be happy to help with the migration of gatsby/src/query/query-watcher.js

[LinnJS]

Would love to pick something up if it’s not already taken. Feel free to assign me whatever is free!

[neobats]

Id be delighted to help with this, but this would be one of my first open source contributions and I'm not sure where to start. Is there still some potentially low-hanging fruit available?

[ascorbic]

@LinnJS and @neobats : feel free to claim any file listed above that doesn't have a name against it. Just add a comment here saying you're working on it, like @ArcaneDiver did.

Tips to get involved: first read the contribution docs, and see how to set up your local environment. Read the instrcutions in this issue for a guide on our TypeScript code style. After you've claimed the file to work on, convert it locally and ensure there are no 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!

[alisson-suzigan]

The node-interface.js file was already migrated and merged in this PR.

[martingreilinger]

I will help with /src/query/file-parser.js and test

[LinnJS]

I will take print.js!

[jeffreymeng]

I'll work on /src/query/graphql-errors.js

[mohinderps]

Hey, I would like to work on src/query/query-compiler.js

[b5710546232]

Hey, I would like to work on /api-node-helpers-docs.js :)

[nicolaspita]

Hi, I'll take on bootstrap/load-themes/index.js

[davad]

I'll work on src/schema/node-model.js and src/schema/schema-composer.js

[simplywondrous]

I'll work on src/schema/index.js and src/schema/infer/index.js.

Also, src/schema/schema.js is checked as done but the associated PR doesn't actually type the file (just changes one line so it works for a different typed file)

[naoking99]

Hi, I'd like to work on packages/gatsby/src/utils/babel-loader.js.

[ThakurKarthik]

Hey @davad I was already working on schema-compose.js here https://github.com/gatsbyjs/gatsby/pull/27241 . Thanks !

[ThakurKarthik]

Hey @LekoArts I would like to work on gatsby/src/utils/webpack.config.js Thanks.

[ThakurKarthik]

Hey @LekoArts @ascorbic I need some help here https://github.com/gatsbyjs/gatsby/pull/27241 I am not sure what is breaking in circleci, can you point me where is the issue. Thanks !

[prathyushasai]

Are either src/utils/api-runner-node.js or src/utils/api-node-helpers-docs.js open?

I would like to work on one of them if they are.

[ibotdotout]

I will work on packages/babel-preset-gatsby/index.js + test