From 7755023b6ff59c8a74ba04471711480749416e7a Mon Sep 17 00:00:00 2001
From: Peter Oesteritz <peter.oesteritz@icloud.com>
Date: Sun, 19 Apr 2020 20:44:34 +0200
Subject: [PATCH] Switch from ts-loader to babel-loader (#2449)

---
 docs/testing.md                               |  3 +--
 docs/typescript.md                            | 24 ++++---------------
 lib/install/examples/react/tsconfig.json      |  3 ++-
 lib/install/examples/typescript/tsconfig.json |  3 ++-
 lib/install/loaders/typescript.js             | 11 ---------
 lib/install/typescript.rb                     | 20 +++++++---------
 lib/webpacker/compiler.rb                     |  5 ++--
 package/rules/babel.js                        |  2 +-
 8 files changed, 20 insertions(+), 51 deletions(-)
 delete mode 100644 lib/install/loaders/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/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",
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..ca7df08e9 100644
--- a/lib/install/typescript.rb
+++ b/lib/install/typescript.rb
@@ -15,17 +15,10 @@
   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 "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 +34,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/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: [