From 06470897b33276f67ad53eb7c47379bf5eb27ad8 Mon Sep 17 00:00:00 2001
From: Austaras <austaras@outlook.com>
Date: Wed, 13 Nov 2019 01:32:44 +0800
Subject: [PATCH] feat(gatsby-plugin-typescript): add support for optional
 chaining and nullish coalescing operator (#19302)

* add plugin

* add optional chaining

* fix test

* explicitely assert babel plugins

* update lock file
---
 packages/gatsby-plugin-typescript/package.json    |  2 ++
 .../src/__tests__/gatsby-node.js                  | 15 +++++++++++++--
 .../gatsby-plugin-typescript/src/gatsby-node.js   |  6 ++++++
 yarn.lock                                         |  8 ++++++++
 4 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/packages/gatsby-plugin-typescript/package.json b/packages/gatsby-plugin-typescript/package.json
index 4555ec1354ca1..f28d7e30fe156 100644
--- a/packages/gatsby-plugin-typescript/package.json
+++ b/packages/gatsby-plugin-typescript/package.json
@@ -10,6 +10,8 @@
     "Noah Lange <noahrlange@gmail.com>"
   ],
   "dependencies": {
+    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.4.4",
+    "@babel/plugin-proposal-optional-chaining": "^7.6.0",
     "@babel/preset-typescript": "^7.7.2",
     "@babel/runtime": "^7.7.2",
     "babel-plugin-remove-graphql-queries": "^2.7.15"
diff --git a/packages/gatsby-plugin-typescript/src/__tests__/gatsby-node.js b/packages/gatsby-plugin-typescript/src/__tests__/gatsby-node.js
index b5e94400893f3..6feabab22706a 100644
--- a/packages/gatsby-plugin-typescript/src/__tests__/gatsby-node.js
+++ b/packages/gatsby-plugin-typescript/src/__tests__/gatsby-node.js
@@ -13,8 +13,8 @@ describe(`gatsby-plugin-typescript`, () => {
   })
 
   describe(`onCreateBabelConfig`, () => {
-    it(`sets the correct babel preset`, () => {
-      const actions = { setBabelPreset: jest.fn() }
+    it(`sets the correct babel preset and plugin`, () => {
+      const actions = { setBabelPreset: jest.fn(), setBabelPlugin: jest.fn() }
       const options = {
         isTSX: true,
         jsxPragma: `jsx`,
@@ -25,6 +25,17 @@ describe(`gatsby-plugin-typescript`, () => {
         name: expect.stringContaining(path.join(`@babel`, `preset-typescript`)),
         options,
       })
+      expect(actions.setBabelPlugin).toHaveBeenCalledTimes(2)
+      expect(actions.setBabelPlugin).toHaveBeenCalledWith({
+        name: expect.stringContaining(
+          path.join(`@babel`, `plugin-proposal-optional-chaining`)
+        ),
+      })
+      expect(actions.setBabelPlugin).toHaveBeenCalledWith({
+        name: expect.stringContaining(
+          path.join(`@babel`, `plugin-proposal-nullish-coalescing-operator`)
+        ),
+      })
     })
   })
 
diff --git a/packages/gatsby-plugin-typescript/src/gatsby-node.js b/packages/gatsby-plugin-typescript/src/gatsby-node.js
index e8abc45920a47..a530ee259d046 100644
--- a/packages/gatsby-plugin-typescript/src/gatsby-node.js
+++ b/packages/gatsby-plugin-typescript/src/gatsby-node.js
@@ -5,6 +5,12 @@ function onCreateBabelConfig({ actions }, options) {
     name: require.resolve(`@babel/preset-typescript`),
     options,
   })
+  actions.setBabelPlugin({
+    name: require.resolve(`@babel/plugin-proposal-optional-chaining`),
+  })
+  actions.setBabelPlugin({
+    name: require.resolve(`@babel/plugin-proposal-nullish-coalescing-operator`),
+  })
 }
 
 function onCreateWebpackConfig({ actions, loaders }) {
diff --git a/yarn.lock b/yarn.lock
index 1b5c7c9384a3f..e86cbc44ba46e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -622,6 +622,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.2.0"
 
+"@babel/plugin-proposal-nullish-coalescing-operator@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.4.4.tgz#41c360d59481d88e0ce3a3f837df10121a769b39"
+  integrity sha512-Amph7Epui1Dh/xxUxS2+K22/MUi6+6JVTvy3P58tja3B6yKTSjwwx0/d83rF7551D6PVSSoplQb8GCwqec7HRw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.2.0"
+
 "@babel/plugin-proposal-numeric-separator@^7.0.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.2.0.tgz#646854daf4cd22fd6733f6076013a936310443ac"