Added TypeScript upgrade docs for Webpacker 5.1 (#2541)

rails · Apr 20, 2020 · f651362 · f651362
1 parent d08e9ef
commit f651362
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 13 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,7 +5,8 @@
 ## [[5.1.0]](https://github.com/rails/webpacker/compare/v5.0.1...v5.1.0) - 2020-04-19
 
 - Remove yarn integrity check [#2518](https://github.com/rails/webpacker/pull/2518)
-- Switch from ts-loader to babel-loader [#2449](https://github.com/rails/webpacker/pull/2449)
+- Switch from ts-loader to babel-loader [#2449](https://github.com/rails/webpacker/pull/2449)  
+  Please see the [TypeScript documentation](https://github.com/rails/webpacker/blob/master/docs/typescript.md) to upgrade existing projects to use typescript with 5.1
 - Resolve multi-word snakecase WEBPACKER_DEV_SERVER env values [#2528](https://github.com/rails/webpacker/pull/2528)
 
 ## [[5.0.1]](https://github.com/rails/webpacker/compare/v5.0.0...v5.0.1) - 2020-03-22

diff --git a/docs/typescript.md b/docs/typescript.md
@@ -1,18 +1,54 @@
-# Typescript
+# TypeScript
 
+## Installation
 
-## Typescript with React
+1. Run the TypeScript installer
 
-1. Setup react using Webpacker [react installer](../README.md#react). Then run the typescript installer
+```bash
+bundle exec rails webpacker:install:typescript
+```
+
+After that, a new file called `hello_typescript.ts` will be present in your `packs` directory (or rather the `source_entry_path` of your `webpacker.yml` configuration). You're now ready to write TypeScript. 
+
+## Upgrading to 5.1
+
+If you update your App to `webpacker >= 5.1` and had TypeScript installed before, you need to add some new/remove some old configurations:
+
+1. Remove old packages:
+    - `yarn remove ts-loader`
+
+2. Add new packages:
+    - `yarn add @babel/preset-typescript`
+
+3. Remove old configuration files: 
+    - Delete this file: `config/webpack/loaders/typescript.js`
+
+4. Remove the following lines from `config/webpack/environment.js`:
+    - `const typescript = require('./loaders/typescript')`
+    - `environment.loaders.prepend('typescript', typescript)`
+
+5. Add the TypeScript preset to your `babel.config.js`:
+    - This line `['@babel/preset-typescript', { 'allExtensions': true, 'isTSX': true }]` has to be added as the last item to the `presets` array in your `babel.config.js`
+
+### Upgrading to 5.1 for Vue users
+
+1. Remove old packages:
+    - `yarn remove ts-loader pnp-webpack-plugin`
+
+2. Follow point 3 and 4 from the `TypeScript with Vue components` section
+
+## TypeScript with React
+
+1. Setup react using Webpacker [react installer](../README.md#react). Then run the TypeScript installer
 
 ```bash
 bundle exec rails webpacker:install:typescript
 ```
 
-2. Rename the generated `hello_react.js` to `hello_react.tsx`. Make the file valid typescript and
-now you can use typescript, JSX with React.
+2. Rename the generated `hello_react.js` to `hello_react.tsx`. Make the file valid TypeScript and
+now you can use TypeScript, JSX with React.
 
-## Typescript with Vue components
+## TypeScript with Vue components
 
 1. Setup Vue using the Webpacker [Vue installer](../README.md#vue). Then run the TypeScript installer
 
@@ -21,7 +57,8 @@ bundle exec rails webpacker:install:typescript
 ```
 
 2. Rename generated `hello_vue.js` to `hello_vue.ts`.
-3. Change the generated `babel.config.js` from
+3. Install the right Babel preset: `yarn add babel-preset-typescript-vue`
+4. Change the generated `babel.config.js` from
 
 ```js
 ["@babel/preset-typescript", { "allExtensions": true, "isTSX": true }]
@@ -35,7 +72,7 @@ to
 
 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
+## HTML templates with TypeScript and Angular
 
 After you have installed Angular using `bundle exec rails webpacker:install:angular`
 you would need to follow these steps to add HTML templates support:

diff --git a/lib/install/typescript.rb b/lib/install/typescript.rb
@@ -34,9 +34,6 @@
   "#{Webpacker.config.source_entry_path}/hello_typescript.ts"
 
 say "Installing all typescript dependencies"
-run "yarn add typescript #{additional_packages}"
-
-say "Installing all typescript dev-dependencies"
-run "yarn add @babel/preset-typescript babel-preset-typescript-vue -D"
+run "yarn add typescript @babel/preset-typescript #{additional_packages}"
 
 say "Webpacker now supports typescript 🎉", :green