Switch from ts-loader to babel-loader (#2449)

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",

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
 

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",

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",

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

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

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: [