chore(gatsby): convert babel-loader-helpers to typescript #25100

Kornil · 2020-06-18T15:15:07Z

Convert babel-loader-helpers to TS.

On line 101 and 109, I get a type error that I am not able to fix related to @babel/core types not allowing createConfigItem to have a name key in its payload.

I'm not sure why tests are failing, other than the imports, the types shouldn't have affected prod. Any insights on what is causing it? Switching back the babel-loader imports doesn't do anything.

Related Issues

#21995

ascorbic

Thanks for this. The typecheck tests are failing for this, largely because you'll need to update the babel tests to cast the Mock types. Make sure you run yarn typecheck to ensure it's all working.

ascorbic · 2020-06-18T16:27:22Z

packages/gatsby/src/utils/babel-loader-helpers.ts

@@ -16,13 +29,23 @@ const loadCachedConfig = () => {
  return pluginBabelConfig
 }

-const getCustomOptions = stage => {
+export const getCustomOptions = (stage: string): IBabelStage["options"] => {


There's a string enum Stage which should be used for the argument here. You'll find it in commands/types.ts

ascorbic · 2020-06-18T16:27:50Z

packages/gatsby/src/utils/babel-loader-helpers.ts

  const index = _.findIndex(
    items,
-    i => i.file.resolved === itemToMerge.file.resolved
+    i => i.file!.resolved === itemToMerge.file!.resolved


Can you use optional chaining rather than not-null assertion here and elsewhere, so avoid potential runtime errors

…atsby-babel-loader-helpers

Kornil · 2020-06-18T20:35:43Z

Thank you @ascorbic for the review. I updated the test types, the snapshots, and used the Stage enum instead of the string I had before. I also took the opportunity to clean up the babelrc reducer types since they had a duplicate stage key (introduced by me in a previous PR).

I added a 👍 on your comments to indicate I solved the issues. If you feel the feedback was addressed properly, feel free to resolve the conversations!

ascorbic · 2020-06-19T08:34:32Z

packages/gatsby/src/utils/babel-loader-helpers.ts

-  pluginBabelConfig.stages[stage].plugins.forEach(plugin => {
+  const reduxPlugins: PluginItem[] = []
+  const reduxPresets: PluginItem[] = []
+  pluginBabelConfig.stages[stage!].plugins.forEach(plugin => {
    reduxPlugins.push(
      babel.createConfigItem([resolve(plugin.name), plugin.options], {
        name: plugin.name,


Looks like this is an error. It seems it's correct that name isn't a valid key. It accepts just dirname and type: https://babeljs.io/docs/en/babel-core#createconfigitem

What do you think would be the best option here? I'm not sure how it will affect prod to remove the name key.

ascorbic

Just a few nits, though we'll need to check what's goign on with the name prop, which seems to be an error.

ascorbic · 2020-06-19T08:39:40Z

packages/gatsby/src/utils/babel-loader-helpers.ts

  const pluginBabelConfig = loadCachedConfig()
  return pluginBabelConfig.stages[stage].options
 }

-const prepareOptions = (babel, options = {}, resolve = require.resolve) => {
-  let pluginBabelConfig = loadCachedConfig()
+type prepareOptionsType = (


Rather than typing the whole function like this, can you just type the options object?

ascorbic · 2020-06-19T08:41:31Z

packages/gatsby/src/utils/babel-loader-helpers.ts

-  pluginBabelConfig.stages[stage].plugins.forEach(plugin => {
+  const reduxPlugins: PluginItem[] = []
+  const reduxPresets: PluginItem[] = []
+  pluginBabelConfig.stages[stage!].plugins.forEach(plugin => {


If you've typed the options, and the stage key as optional you'll need a runtime null check for stage rather than this assertion.

ascorbic · 2020-06-19T08:41:56Z

packages/gatsby/src/utils/babel-loader-helpers.ts

    reduxPlugins.push(
      babel.createConfigItem([resolve(plugin.name), plugin.options], {
        name: plugin.name,
        type: `plugin`,
      })
    )
  })
-  pluginBabelConfig.stages[stage].presets.forEach(preset => {
+  pluginBabelConfig.stages[stage!].presets.forEach(preset => {


Same. If you've done a runtime check then this will have been narrowed to exclude null.

ascorbic · 2020-06-19T08:42:46Z

packages/gatsby/src/utils/babel-loader-helpers.ts

@@ -98,17 +122,34 @@ const prepareOptions = (babel, options = {}, resolve = require.resolve) => {
  ]
 }

-const mergeConfigItemOptions = ({ items, itemToMerge, type, babel }) => {
+type mergeConfigItemOptionsType = ({


As above, rather than typing the whole function like this, type the props object.

…atsby-babel-loader-helpers

Kornil · 2020-06-19T16:51:48Z

Addressed the second wave of feedback, let me know your opinion about the name issue on line 98 and 106.

imjoshin · 2022-07-25T14:21:19Z

Hey! Thanks so much for opening this pull request!

Sadly this PR got stale and didn't have any activity for some time. We're trying to do better with PR reviews! To get a better overview of all actionable PRs we're going through all open PRs and triage them. Since we won't be able to do everything and adding new features always means added maintenance burden, we have to be more picky about what's beneficial for the average user and the project itself longterm.

We think this is a great PR and would love to see it land in Gatsby. We're closing this PR for now but if you're able to rebase onto the latest master branch and try it out with the latest next versions, we'd be happy to review the PR when its re-opened.

We absolutely want to have you as a contributor and are sorry for any inconveniences we caused with replying too late to this PR.

Thanks for submitting to Gatsby! 💜

Kornil added 3 commits June 18, 2020 17:09

Add types

08e7f9d

Fix imports

9496013

Add non-null assertion

8370a90

Kornil added the topic: TypeScript migration label Jun 18, 2020

Kornil requested a review from a team as a code owner June 18, 2020 15:15

gatsbot bot added the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Jun 18, 2020

ascorbic removed the status: triage needed Issue or pull request that need to be triaged and assigned to a reviewer label Jun 18, 2020

ascorbic reviewed Jun 18, 2020

View reviewed changes

blainekasten mentioned this pull request Jun 18, 2020

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

Closed

Kornil added 5 commits June 18, 2020 22:22

Merge branch 'master' of github.com:gatsbyjs/gatsby into typescript-g…

efe0469

…atsby-babel-loader-helpers

Update types

fa7886f

Fix test file types

e4d126b

Use proper Stage enum

7264a45

Update snaps

bfc2b6a

ascorbic reviewed Jun 19, 2020

View reviewed changes

Kornil added 2 commits June 19, 2020 18:50

Address feedback

36a13d7

Merge branch 'master' of github.com:gatsbyjs/gatsby into typescript-g…

10b458e

…atsby-babel-loader-helpers

Kornil requested a review from ascorbic June 19, 2020 17:48

LekoArts added topic: TypeScript Issues and PRs related to TS in general, public typings or gatsby-plugin-typescript and removed topic: TypeScript migration labels May 28, 2021

imjoshin closed this Jul 25, 2022

Kornil mentioned this pull request Jul 26, 2022

chore(gatsby): convert babel-loader-helpers to typescript #36237

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(gatsby): convert babel-loader-helpers to typescript #25100

chore(gatsby): convert babel-loader-helpers to typescript #25100

Kornil commented Jun 18, 2020 •

edited

Loading

ascorbic left a comment •

edited

Loading

ascorbic Jun 18, 2020

ascorbic Jun 18, 2020

Kornil commented Jun 18, 2020

ascorbic Jun 19, 2020

Kornil Jun 19, 2020 •

edited

Loading

ascorbic left a comment

ascorbic Jun 19, 2020

ascorbic Jun 19, 2020

ascorbic Jun 19, 2020

ascorbic Jun 19, 2020

Kornil commented Jun 19, 2020

imjoshin commented Jul 25, 2022

chore(gatsby): convert babel-loader-helpers to typescript #25100

chore(gatsby): convert babel-loader-helpers to typescript #25100

Conversation

Kornil commented Jun 18, 2020 • edited Loading

Related Issues

ascorbic left a comment • edited Loading

Choose a reason for hiding this comment

ascorbic Jun 18, 2020

Choose a reason for hiding this comment

ascorbic Jun 18, 2020

Choose a reason for hiding this comment

Kornil commented Jun 18, 2020

ascorbic Jun 19, 2020

Choose a reason for hiding this comment

Kornil Jun 19, 2020 • edited Loading

Choose a reason for hiding this comment

ascorbic left a comment

Choose a reason for hiding this comment

ascorbic Jun 19, 2020

Choose a reason for hiding this comment

ascorbic Jun 19, 2020

Choose a reason for hiding this comment

ascorbic Jun 19, 2020

Choose a reason for hiding this comment

ascorbic Jun 19, 2020

Choose a reason for hiding this comment

Kornil commented Jun 19, 2020

imjoshin commented Jul 25, 2022

Kornil commented Jun 18, 2020 •

edited

Loading

ascorbic left a comment •

edited

Loading

Kornil Jun 19, 2020 •

edited

Loading