Switch from ts-loader to babel-loader

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/config/webpack/environment.js

@@ -1,3 +1,4 @@
 const { environment } = require('@rails/webpacker')
+environment.loaders.delete('typescript')
 
 module.exports = environment

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

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/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', () => {

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
 }

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'
+      }
+    }
+  ]
+}