Run typescript sources through full babel transpiling pipeline

Author: Vladimir Pouzanov

packages/gatsby-plugin-typescript/src/__tests__/gatsby-node.js

@@ -14,12 +14,17 @@ describe(`gatsby-plugin-typescript`, () => {
     expect(resolvableExtensions()).toMatchSnapshot()
   })
 
-  it(`modifies webpack config`, () => {
+  it(`modifies webpack config`, async () => {
+    const stage = ``
+    const program = {
+      directory: `.`,
+      browserslist: [],
+    }
     const config = {
       loader: jest.fn(),
     }
 
-    modifyWebpackConfig({ config }, { compilerOptions: {} })
+    await modifyWebpackConfig({ program, config, stage }, { compilerOptions: {} })
 
     expect(config.loader).toHaveBeenCalledTimes(1)
     const lastCall = config.loader.mock.calls.pop()

packages/gatsby-plugin-typescript/src/gatsby-node.js

@@ -1,5 +1,5 @@
+const genBabelConfig = require(`gatsby/dist/utils/babel-config`)
 const { transpileModule } = require(`typescript`)
-const path = require(`path`)
 
 const test = /\.tsx?$/
 const compilerDefaults = {
@@ -10,10 +10,12 @@ const compilerDefaults = {
 
 module.exports.resolvableExtensions = () => [`.ts`, `.tsx`]
 
-module.exports.modifyWebpackConfig = (
-  { config },
+module.exports.modifyWebpackConfig = async (
+  { program, config, stage },
   { compilerOptions, transpileOnly = true }
 ) => {
+  const babelConfig = await genBabelConfig(program, stage)
+
   // CommonJS to keep Webpack happy.
   const copts = Object.assign({}, compilerDefaults, compilerOptions, {
     module: `commonjs`,
@@ -23,16 +25,10 @@ module.exports.modifyWebpackConfig = (
   // error (i.e., not build) at something or other.
   const opts = { compilerOptions: copts, transpileOnly }
 
-  // Load gatsby babel plugin to extract graphql query
-  const extractQueryPlugin = path.resolve(
-    __dirname,
-    `../gatsby/dist/utils/babel-plugin-extract-graphql.js`
-  )
-
   config.loader(`typescript`, {
     test,
     loaders: [
-      `babel?${JSON.stringify({ plugins: [extractQueryPlugin] })}`,
+      `babel?${JSON.stringify(babelConfig)}`,
       `ts-loader?${JSON.stringify(opts)}`,
     ],
   })

packages/gatsby/src/utils/webpack-modify-validate.js

@@ -17,9 +17,9 @@ const validationWhitelist = Joi.object({
   responsiveLoader: Joi.any(),
 })
 
-export default (async function ValidateWebpackConfig(config, stage) {
+export default (async function ValidateWebpackConfig(program, config, stage) {
   // We don't care about the return as plugins just mutate the config directly.
-  await apiRunnerNode(`modifyWebpackConfig`, { config, stage })
+  await apiRunnerNode(`modifyWebpackConfig`, { program, config, stage })
 
   // console.log(JSON.stringify(config, null, 4))
 

packages/gatsby/src/utils/webpack.config.js

@@ -37,13 +37,12 @@ module.exports = async (
   webpackPort = 1500,
   pages = []
 ) => {
-  const babelStage = suppliedStage
   const directoryPath = withBasePath(directory)
 
   // We combine develop & develop-html stages for purposes of generating the
   // webpack config.
   const stage = suppliedStage
-  const babelConfig = await genBabelConfig(program, babelStage)
+  const babelConfig = await genBabelConfig(program, suppliedStage)
 
   function processEnv(stage, defaultNodeEnv) {
     debug(`Building env for "${stage}"`)
@@ -556,7 +555,7 @@ module.exports = async (
 
   // Use the suppliedStage again to let plugins distinguish between
   // server rendering the html.js and the frontend development config.
-  const validatedConfig = await webpackModifyValidate(config, suppliedStage)
+  const validatedConfig = await webpackModifyValidate(program, config, suppliedStage)
 
   return validatedConfig
 }