Install babel-preset-typescript-vue automatically

docs/typescript.md

@@ -35,7 +35,7 @@ If you update your App to `webpacker >= 5.1` and had TypeScript installed before
 1. Remove old packages:
     - `yarn remove ts-loader pnp-webpack-plugin`
 
-2. Follow point 3 and 4 from the `TypeScript with Vue components` section
+2. Follow point 3 from the `TypeScript with Vue components` section
 
 ## TypeScript with React
 
@@ -57,8 +57,7 @@ bundle exec rails webpacker:install:typescript
 ```
 
 2. Rename generated `hello_vue.js` to `hello_vue.ts`.
-3. Install the right Babel preset: `yarn add babel-preset-typescript-vue`
-4. Change the generated `babel.config.js` from
+3. Change the generated `babel.config.js` from
 
 ```js
 ["@babel/preset-typescript", { "allExtensions": true, "isTSX": true }]

lib/install/typescript.rb

@@ -1,6 +1,6 @@
 require "webpacker/configuration"
 
-additional_packages = ""
+additional_packages = []
 example_source = "typescript"
 
 # Additional configuration is required for React projects
@@ -10,9 +10,13 @@
   package["dependencies"] ||= {}
 
   if package["dependencies"].keys.include?("react")
-    additional_packages = "@types/react @types/react-dom"
+    additional_packages << ["@types/react", "@types/react-dom"]
     example_source = "react"
   end
+
+  if package["dependencies"].keys.include?("vue")
+    additional_packages << "babel-preset-typescript-vue"
+  end
 end
 
 say "Adding TypeScript preset to babel.config.js"
@@ -34,6 +38,6 @@
   "#{Webpacker.config.source_entry_path}/hello_typescript.ts"
 
 say "Installing all typescript dependencies"
-run "yarn add typescript @babel/preset-typescript #{additional_packages}"
+run "yarn add typescript @babel/preset-typescript #{additional_packages.join(" ")}"
 
 say "Webpacker now supports typescript 🎉", :green

lib/install/vue.rb

@@ -1,5 +1,18 @@
 require "webpacker/configuration"
 
+additional_packages = ""
+
+# Additional configuration is required for Vue projects
+package_json = Rails.root.join("package.json")
+if File.exist?(package_json)
+  package = JSON.parse(File.read(package_json))
+  package["dependencies"] ||= {}
+
+  if package["dependencies"].keys.include?("typescript")
+    additional_packages = "babel-preset-typescript-vue"
+  end
+end
+
 say "Copying vue loader to config/webpack/loaders"
 copy_file "#{__dir__}/loaders/vue.js", Rails.root.join("config/webpack/loaders/vue.js").to_s
 
@@ -33,7 +46,7 @@
   "#{Webpacker.config.source_path}/app.vue"
 
 say "Installing all Vue dependencies"
-run "yarn add vue vue-loader vue-template-compiler"
+run "yarn add vue vue-loader vue-template-compiler #{additional_packages}"
 
 if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
   say "You need to enable unsafe-eval rule.", :yellow