From 3b0daf7e104a28806ccefbcac0550f43890d4827 Mon Sep 17 00:00:00 2001
From: Peter Oesteritz <peter.oesteritz@debd.com>
Date: Thu, 6 Feb 2020 10:35:40 +0100
Subject: [PATCH 1/5] switch from ts-loader to babel-loader

---
 docs/testing.md                           |  3 +--
 docs/typescript.md                        | 24 ++++-------------------
 lib/install/config/webpack/environment.js |  1 +
 lib/install/loaders/typescript.js         | 11 -----------
 lib/install/typescript.rb                 | 22 ++++++++++-----------
 lib/webpacker/compiler.rb                 |  5 ++---
 package/rules/index.js                    |  4 +++-
 package/rules/typescript.js               | 21 ++++++++++++++++++++
 8 files changed, 43 insertions(+), 48 deletions(-)
 delete mode 100644 lib/install/loaders/typescript.js
 create mode 100644 package/rules/typescript.js

diff --git a/docs/testing.md b/docs/testing.md
index 49b6db97e..e77984050 100644
--- a/docs/testing.md
+++ b/docs/testing.md
@@ -10,8 +10,7 @@ Webpacker does not setup `Karma` by default, so you've to manually install it al
   "test": "NODE_ENV=test karma start"
 },
 "dependencies": {
-  "typescript": "^2.5.2",
-  "ts-loader": "^2.3.7"
+  "typescript": "^2.5.2"
 },
 "devDependencies": {
   "karma": "^1.7.1",
diff --git a/docs/typescript.md b/docs/typescript.md
index 04769c50f..9eda231ab 100644
--- a/docs/typescript.md
+++ b/docs/typescript.md
@@ -21,35 +21,19 @@ bundle exec rails webpacker:install:typescript
 ```
 
 2. Rename generated `hello_vue.js` to `hello_vue.ts`.
-3. Add the webpack plug-n-play plugin to your yarn packages with `yarn add pnp-webpack-plugin`.
-4. Change the generated `config/webpack/loaders/typescript.js` from
+3. Change the generated `babel.config.js` from
 
 ```js
-module.exports = {
-  test: /\.tsx?(\.erb)?$/,
-  use: [{
-    loader: 'ts-loader'
-  }]
-}
+["@babel/preset-typescript", { "allExtensions": true, "isTSX": true }]
 ```
 
 to
 
 ```js
-const PnpWebpackPlugin = require('pnp-webpack-plugin');
-
-module.exports = {
-  test: /\.tsx?(\.erb)?$/,
-  use: [{
-    loader: 'ts-loader',
-    options: PnpWebpackPlugin.tsLoaderOptions({
-      appendTsSuffixTo: [/\.vue$/]
-    })
-  }]
-}
+["babel-preset-typescript-vue", { "allExtensions": true, "isTSX": true }]
 ```
 
-and now you can use `<script lang="ts">` in your `.vue` component files. See [the pnp-webpack-plugin docs for the `ts-loader` integration](https://github.com/arcanis/pnp-webpack-plugin#ts-loader-integration) for more info.
+and now you can use `<script lang="ts">` in your `.vue` component files. See [the babel-preset-typescript-vue docs](https://www.npmjs.com/package/babel-preset-typescript-vue) for more info.
 
 ## HTML templates with Typescript and Angular
 
diff --git a/lib/install/config/webpack/environment.js b/lib/install/config/webpack/environment.js
index d16d9af74..cef89796d 100644
--- a/lib/install/config/webpack/environment.js
+++ b/lib/install/config/webpack/environment.js
@@ -1,3 +1,4 @@
 const { environment } = require('@rails/webpacker')
+environment.loaders.delete('typescript')
 
 module.exports = environment
diff --git a/lib/install/loaders/typescript.js b/lib/install/loaders/typescript.js
deleted file mode 100644
index a3cb0ef90..000000000
--- a/lib/install/loaders/typescript.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const PnpWebpackPlugin = require('pnp-webpack-plugin')
-
-module.exports = {
-  test: /\.tsx?(\.erb)?$/,
-  use: [
-    {
-      loader: 'ts-loader',
-      options: PnpWebpackPlugin.tsLoaderOptions()
-    }
-  ]
-}
diff --git a/lib/install/typescript.rb b/lib/install/typescript.rb
index fe6c4c65b..0fb0f65fd 100644
--- a/lib/install/typescript.rb
+++ b/lib/install/typescript.rb
@@ -15,17 +15,14 @@
   end
 end
 
-say "Copying typescript loader to config/webpack/loaders"
-copy_file "#{__dir__}/loaders/typescript.js", Rails.root.join("config/webpack/loaders/typescript.js").to_s
+say "Don't remove TypeScript loader"
+gsub_file Rails.root.join("config/webpack/environment.js").to_s,
+  /environment\.loaders\.delete\('typescript'\)\n/, ''
 
-say "Adding typescript loader to config/webpack/environment.js"
-insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "const typescript =  require('./loaders/typescript')\n",
-  after: /require\(('|")@rails\/webpacker\1\);?\n/
-
-insert_into_file Rails.root.join("config/webpack/environment.js").to_s,
-  "environment.loaders.prepend('typescript', typescript)\n",
-  before: "module.exports"
+say "Adding TypeScript preset to babel.config.js"
+insert_into_file Rails.root.join("babel.config.js").to_s,
+  ",\n      ['@babel/preset-typescript', { 'allExtensions': true, 'isTSX': true }]",
+  before: /\s*\].filter\(Boolean\),\n\s*plugins: \[/  
 
 say "Copying tsconfig.json to the Rails root directory for typescript"
 copy_file "#{__dir__}/examples/#{example_source}/tsconfig.json", "tsconfig.json"
@@ -41,6 +38,9 @@
   "#{Webpacker.config.source_entry_path}/hello_typescript.ts"
 
 say "Installing all typescript dependencies"
-run "yarn add typescript ts-loader #{additional_packages}"
+run "yarn add typescript #{additional_packages}"
+
+say "Installing all typescript dev-dependencies"
+run "yarn add @babel/preset-typescript babel-preset-typescript-vue -D"
 
 say "Webpacker now supports typescript 🎉", :green
diff --git a/lib/webpacker/compiler.rb b/lib/webpacker/compiler.rb
index da09bdecd..e87639598 100644
--- a/lib/webpacker/compiler.rb
+++ b/lib/webpacker/compiler.rb
@@ -20,9 +20,8 @@ def compile
     if stale?
       run_webpack.tap do |success|
         # We used to only record the digest on success
-        # However, the output file is still written on error, (at least with ts-loader), meaning that the
-        # digest should still be updated. If it's not, you can end up in a situation where a recompile doesn't
-        # take place when it should.
+        # However, the output file is still written on error, meaning that the digest should still be updated.
+        # If it's not, you can end up in a situation where a recompile doesn't take place when it should.
         # See https://github.com/rails/webpacker/issues/2113
         record_compilation_digest
       end
diff --git a/package/rules/index.js b/package/rules/index.js
index 923a38f1b..5e5aaa5e1 100644
--- a/package/rules/index.js
+++ b/package/rules/index.js
@@ -1,4 +1,5 @@
 const babel = require('./babel')
+const typescript = require('./typescript')
 const file = require('./file')
 const css = require('./css')
 const sass = require('./sass')
@@ -16,5 +17,6 @@ module.exports = {
   moduleCss,
   moduleSass,
   nodeModules,
-  babel
+  babel,
+  typescript
 }
diff --git a/package/rules/typescript.js b/package/rules/typescript.js
new file mode 100644
index 000000000..472ecbdcd
--- /dev/null
+++ b/package/rules/typescript.js
@@ -0,0 +1,21 @@
+const { join, resolve } = require('path')
+const { cache_path: cachePath, source_path: sourcePath, resolved_paths: resolvedPaths } = require('../config')
+const { nodeEnv } = require('../env')
+
+// Process application TypeScript code with Babel.
+// Uses application .babelrc to apply any transformations
+module.exports = {
+  test: /\.(ts|tsx)?$/,
+  include: [sourcePath, ...resolvedPaths].map((p) => resolve(p)),
+  exclude: /node_modules/,
+  use: [
+    {
+      loader: 'babel-loader',
+      options: {
+        cacheDirectory: join(cachePath, 'babel-loader-node-modules'),
+        cacheCompression: nodeEnv === 'production',
+        compact: nodeEnv === 'production'
+      }
+    }
+  ]
+}

From da5355b892b3a816e4941025d558baf3c9c7572a Mon Sep 17 00:00:00 2001
From: Peter Oesteritz <peter.oesteritz@debd.com>
Date: Thu, 6 Feb 2020 10:40:30 +0100
Subject: [PATCH 2/5] updated tests to match new typescript loader

---
 package/environments/__tests__/base.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/package/environments/__tests__/base.js b/package/environments/__tests__/base.js
index ca462e54f..d6a3756f1 100644
--- a/package/environments/__tests__/base.js
+++ b/package/environments/__tests__/base.js
@@ -40,8 +40,8 @@ describe('Environment', () => {
       const defaultRules = Object.keys(rules)
       const configRules = config.module.rules
 
-      expect(defaultRules.length).toEqual(7)
-      expect(configRules.length).toEqual(8)
+      expect(defaultRules.length).toEqual(8)
+      expect(configRules.length).toEqual(9)
     })
 
     test('should return default plugins', () => {

From 45511cae750de5b4128d8c0ca80734770c044b50 Mon Sep 17 00:00:00 2001
From: Peter Oesteritz <peter.oesteritz@debd.com>
Date: Thu, 6 Feb 2020 10:42:12 +0100
Subject: [PATCH 3/5] Rubocop fixes

---
 lib/install/typescript.rb | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/install/typescript.rb b/lib/install/typescript.rb
index 0fb0f65fd..d7b57714d 100644
--- a/lib/install/typescript.rb
+++ b/lib/install/typescript.rb
@@ -17,12 +17,12 @@
 
 say "Don't remove TypeScript loader"
 gsub_file Rails.root.join("config/webpack/environment.js").to_s,
-  /environment\.loaders\.delete\('typescript'\)\n/, ''
+  /environment\.loaders\.delete\('typescript'\)\n/, ""
 
 say "Adding TypeScript preset to babel.config.js"
 insert_into_file Rails.root.join("babel.config.js").to_s,
   ",\n      ['@babel/preset-typescript', { 'allExtensions': true, 'isTSX': true }]",
-  before: /\s*\].filter\(Boolean\),\n\s*plugins: \[/  
+  before: /\s*\].filter\(Boolean\),\n\s*plugins: \[/
 
 say "Copying tsconfig.json to the Rails root directory for typescript"
 copy_file "#{__dir__}/examples/#{example_source}/tsconfig.json", "tsconfig.json"

From 70a909b2e98a3c4555b5119b800182ef24930c17 Mon Sep 17 00:00:00 2001
From: Peter Oesteritz <peter.oesteritz@debd.com>
Date: Thu, 6 Feb 2020 16:50:09 +0100
Subject: [PATCH 4/5] added noEmit option to tsconfig, since this is not
 required anymore

---
 lib/install/examples/react/tsconfig.json      | 3 ++-
 lib/install/examples/typescript/tsconfig.json | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/lib/install/examples/react/tsconfig.json b/lib/install/examples/react/tsconfig.json
index 7425c2b4b..bd034ff63 100644
--- a/lib/install/examples/react/tsconfig.json
+++ b/lib/install/examples/react/tsconfig.json
@@ -8,7 +8,8 @@
     "moduleResolution": "node",
     "sourceMap": true,
     "target": "es5",
-    "jsx": "react"
+    "jsx": "react",
+    "noEmit": true
   },
   "exclude": [
     "**/*.spec.ts",
diff --git a/lib/install/examples/typescript/tsconfig.json b/lib/install/examples/typescript/tsconfig.json
index a2401db1b..4746f32a0 100644
--- a/lib/install/examples/typescript/tsconfig.json
+++ b/lib/install/examples/typescript/tsconfig.json
@@ -11,7 +11,8 @@
         "*": ["node_modules/*", "app/javascript/*"]
     },
     "sourceMap": true,
-    "target": "es5"
+    "target": "es5",
+    "noEmit": true
   },
   "exclude": [
     "**/*.spec.ts",

From 00a1e588e9dad6a1d70d4d900261dff0f5c11e6a Mon Sep 17 00:00:00 2001
From: Peter Oesteritz <peter.oesteritz@debd.com>
Date: Thu, 16 Apr 2020 08:23:10 +0200
Subject: [PATCH 5/5] include ts and tsx extensions by default

---
 lib/install/config/webpack/environment.js |  1 -
 lib/install/typescript.rb                 |  4 ----
 package/environments/__tests__/base.js    |  4 ++--
 package/rules/babel.js                    |  2 +-
 package/rules/index.js                    |  4 +---
 package/rules/typescript.js               | 21 ---------------------
 6 files changed, 4 insertions(+), 32 deletions(-)
 delete mode 100644 package/rules/typescript.js

diff --git a/lib/install/config/webpack/environment.js b/lib/install/config/webpack/environment.js
index cef89796d..d16d9af74 100644
--- a/lib/install/config/webpack/environment.js
+++ b/lib/install/config/webpack/environment.js
@@ -1,4 +1,3 @@
 const { environment } = require('@rails/webpacker')
-environment.loaders.delete('typescript')
 
 module.exports = environment
diff --git a/lib/install/typescript.rb b/lib/install/typescript.rb
index d7b57714d..ca7df08e9 100644
--- a/lib/install/typescript.rb
+++ b/lib/install/typescript.rb
@@ -15,10 +15,6 @@
   end
 end
 
-say "Don't remove TypeScript loader"
-gsub_file Rails.root.join("config/webpack/environment.js").to_s,
-  /environment\.loaders\.delete\('typescript'\)\n/, ""
-
 say "Adding TypeScript preset to babel.config.js"
 insert_into_file Rails.root.join("babel.config.js").to_s,
   ",\n      ['@babel/preset-typescript', { 'allExtensions': true, 'isTSX': true }]",
diff --git a/package/environments/__tests__/base.js b/package/environments/__tests__/base.js
index d6a3756f1..ca462e54f 100644
--- a/package/environments/__tests__/base.js
+++ b/package/environments/__tests__/base.js
@@ -40,8 +40,8 @@ describe('Environment', () => {
       const defaultRules = Object.keys(rules)
       const configRules = config.module.rules
 
-      expect(defaultRules.length).toEqual(8)
-      expect(configRules.length).toEqual(9)
+      expect(defaultRules.length).toEqual(7)
+      expect(configRules.length).toEqual(8)
     })
 
     test('should return default plugins', () => {
diff --git a/package/rules/babel.js b/package/rules/babel.js
index 79a464463..e398ba817 100644
--- a/package/rules/babel.js
+++ b/package/rules/babel.js
@@ -5,7 +5,7 @@ const { nodeEnv } = require('../env')
 // Process application Javascript code with Babel.
 // Uses application .babelrc to apply any transformations
 module.exports = {
-  test: /\.(js|jsx|mjs)?(\.erb)?$/,
+  test: /\.(js|jsx|mjs|ts|tsx)?(\.erb)?$/,
   include: [sourcePath, ...resolvedPaths].map((p) => resolve(p)),
   exclude: /node_modules/,
   use: [
diff --git a/package/rules/index.js b/package/rules/index.js
index 5e5aaa5e1..923a38f1b 100644
--- a/package/rules/index.js
+++ b/package/rules/index.js
@@ -1,5 +1,4 @@
 const babel = require('./babel')
-const typescript = require('./typescript')
 const file = require('./file')
 const css = require('./css')
 const sass = require('./sass')
@@ -17,6 +16,5 @@ module.exports = {
   moduleCss,
   moduleSass,
   nodeModules,
-  babel,
-  typescript
+  babel
 }
diff --git a/package/rules/typescript.js b/package/rules/typescript.js
deleted file mode 100644
index 472ecbdcd..000000000
--- a/package/rules/typescript.js
+++ /dev/null
@@ -1,21 +0,0 @@
-const { join, resolve } = require('path')
-const { cache_path: cachePath, source_path: sourcePath, resolved_paths: resolvedPaths } = require('../config')
-const { nodeEnv } = require('../env')
-
-// Process application TypeScript code with Babel.
-// Uses application .babelrc to apply any transformations
-module.exports = {
-  test: /\.(ts|tsx)?$/,
-  include: [sourcePath, ...resolvedPaths].map((p) => resolve(p)),
-  exclude: /node_modules/,
-  use: [
-    {
-      loader: 'babel-loader',
-      options: {
-        cacheDirectory: join(cachePath, 'babel-loader-node-modules'),
-        cacheCompression: nodeEnv === 'production',
-        compact: nodeEnv === 'production'
-      }
-    }
-  ]
-}