diff --git a/docs/typescript.md b/docs/typescript.md index 4f19d8cb0..3082e19be 100644 --- a/docs/typescript.md +++ b/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 }] diff --git a/lib/install/typescript.rb b/lib/install/typescript.rb index 8aa594562..3071e1793 100644 --- a/lib/install/typescript.rb +++ b/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 diff --git a/lib/install/vue.rb b/lib/install/vue.rb index 8a18c531c..ba3deca3b 100644 --- a/lib/install/vue.rb +++ b/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