refactor: rename methods for adding js dependencies to be more generic (#610)

G-Rath · web-flow · commit 1c2d21fca547 · 2025-06-13T15:08:58.000+12:00
It's not longer a given that `yarn` is being used, and ultimately we're
planning to switch to NPM so might as well change the method names now
diff --git a/template.rb b/template.rb
@@ -381,22 +381,15 @@ def cleanup_package_json
   package_json.manager.install!
 end
 
-# Adds the given <code>packages</code> as dependencies using <code>yarn add</code>
+# Adds the given JavaScript <code>packages</code> as dependencies using the
+# appropriate package manager
 #
 # @param [Array<String>] packages
-def yarn_add_dependencies(packages)
-  puts "adding #{packages.join(" ")} as dependencies"
+# @param [:production, :dev] type
+def add_js_dependencies(packages, type: :production)
+  puts "adding #{packages.join(" ")} as #{type} dependencies"
 
-  package_json.manager.add!(packages)
-end
-
-# Adds the given <code>packages</code> as devDependencies using <code>yarn add --dev</code>
-#
-# @param [Array<String>] packages
-def yarn_add_dev_dependencies(packages)
-  puts "adding #{packages.join(" ")} as dev dependencies"
-
-  package_json.manager.add!(packages, type: :dev)
+  package_json.manager.add!(packages, type:)
 end
 
 # Add this template directory to source_paths so that Thor actions like
diff --git a/variants/accessibility/template.rb b/variants/accessibility/template.rb
@@ -5,4 +5,4 @@
 apply "spec/system/home_feature_spec.rb"
 copy_file "spec/support/shared_examples/an_accessible_page.rb"
 
-yarn_add_dev_dependencies %w[lighthouse]
+add_js_dependencies %w[lighthouse], type: :dev
diff --git a/variants/frontend-base-typescript/template.rb b/variants/frontend-base-typescript/template.rb
@@ -22,12 +22,12 @@ def rename_js_file_to_ts(file)
   node@18
 ].map { |name| "@types/#{name}" }
 
-yarn_add_dependencies types_packages + %w[@babel/preset-typescript typescript]
-yarn_add_dev_dependencies %w[
+add_js_dependencies types_packages + %w[@babel/preset-typescript typescript]
+add_js_dependencies %w[
   @stylistic/eslint-plugin-ts@3
   @typescript-eslint/eslint-plugin
   @typescript-eslint/parser
-]
+], type: :dev
 
 package_json.manager.remove!(["globals"])
 
diff --git a/variants/frontend-base/js-lint/template.rb b/variants/frontend-base/js-lint/template.rb
@@ -3,7 +3,7 @@
 
 add_yarn_package_extension_dependency("eslint-plugin-prettier", "eslint-config-prettier")
 
-yarn_add_dev_dependencies %w[
+add_js_dependencies %w[
   @eslint-community/eslint-plugin-eslint-comments
   @stylistic/eslint-plugin-js@3
   @eslint/js
@@ -16,7 +16,7 @@
   prettier
   prettier-config-ackama
   prettier-plugin-packagejson
-]
+], type: :dev
 
 copy_file "variants/frontend-base/eslint.config.js", "eslint.config.js"
 template "variants/frontend-base/.prettierignore.tt", ".prettierignore"
@@ -57,12 +57,12 @@
 end
 
 # SCSS Linting
-yarn_add_dev_dependencies %w[
+add_js_dependencies %w[
   postcss
   stylelint
   stylelint-scss
   stylelint-config-recommended-scss
-]
+], type: :dev
 copy_file "variants/frontend-base/.stylelintrc.js", ".stylelintrc.js"
 template "variants/frontend-base/.stylelintignore.tt", ".stylelintignore"
 
diff --git a/variants/frontend-base/sentry/template.rb b/variants/frontend-base/sentry/template.rb
@@ -1,7 +1,7 @@
 # Setup Sentry
 # ############
 
-yarn_add_dependencies %w[@sentry/browser dotenv-webpack]
+add_js_dependencies %w[@sentry/browser dotenv-webpack]
 
 prepend_to_file! "app/frontend/packs/application.js", "import * as Sentry from '@sentry/browser';"
 
diff --git a/variants/frontend-base/template.rb b/variants/frontend-base/template.rb
@@ -21,14 +21,14 @@
 # ensure the latest major versions of Shakapacker's peer dependencies are installed
 #
 # TODO: remove this once https://github.com/shakacode/shakapacker/pull/576 is landed
-yarn_add_dependencies [
+add_js_dependencies [
   "babel-loader@10",
   "compression-webpack-plugin@11",
   "webpack-assets-manifest@6",
   "webpack-cli@6",
   "webpack-merge@6"
 ]
-yarn_add_dev_dependencies ["webpack-dev-server@5"]
+add_js_dependencies ["webpack-dev-server@5"], type: :dev
 
 # this is added by shakapacker:install, but we've already got one (with some extra tags)
 # in our template, so remove theirs otherwise the app will error when rendering this
@@ -107,7 +107,7 @@
 gsub_file! "app/views/layouts/application.html.erb", "<body>", body_open_tag_with_img_example, force: true
 
 # shakapacker will automatically configure webpack to use these so long as the dependencies are present
-yarn_add_dependencies %w[
+add_js_dependencies %w[
   css-loader
   css-minimizer-webpack-plugin
   mini-css-extract-plugin
@@ -116,7 +116,7 @@
 ]
 
 # Setup Turbo
-yarn_add_dependencies %w[
+add_js_dependencies %w[
   @hotwired/turbo-rails
 ]
 prepend_to_file! "app/frontend/packs/application.js" do
diff --git a/variants/frontend-bootstrap-typescript/template.rb b/variants/frontend-bootstrap-typescript/template.rb
@@ -1,5 +1,5 @@
 source_paths.unshift(File.dirname(__FILE__))
 
-yarn_add_dependencies %w[@types/bootstrap]
+add_js_dependencies %w[@types/bootstrap]
 
 rename_js_file_to_ts "app/frontend/js/bootstrap"
diff --git a/variants/frontend-bootstrap/template.rb b/variants/frontend-bootstrap/template.rb
@@ -1,6 +1,6 @@
 source_paths.unshift(File.dirname(__FILE__))
 
-yarn_add_dependencies(["bootstrap", "@popperjs/core"])
+add_js_dependencies(["bootstrap", "@popperjs/core"])
 
 copy_file "app/frontend/js/bootstrap.js", force: true
 insert_into_file! "app/frontend/packs/application.js", "import '../js/bootstrap';", before: 'import "../stylesheets/application.scss";'
diff --git a/variants/frontend-react-typescript/template.rb b/variants/frontend-react-typescript/template.rb
@@ -1,7 +1,7 @@
 source_paths.unshift(File.dirname(__FILE__))
 
 package_json.manager.remove!(["prop-types"])
-yarn_add_dependencies %w[@types/react @types/react-dom]
+add_js_dependencies %w[@types/react @types/react-dom]
 
 rename_js_file_to_ts "app/frontend/packs/server_rendering"
 
diff --git a/variants/frontend-react/template.rb b/variants/frontend-react/template.rb
@@ -14,20 +14,20 @@
            "'@testing-library/dom'",
            "'@testing-library/react'"
 
-yarn_add_dependencies %w[
+add_js_dependencies %w[
   @babel/preset-react
   babel-plugin-transform-react-remove-prop-types
   react
   react-dom
   prop-types
 ]
 
-yarn_add_dev_dependencies %w[
+add_js_dependencies %w[
   @testing-library/react
   eslint-plugin-react
   eslint-plugin-react-hooks
   eslint-plugin-jsx-a11y
-]
+], type: :dev
 copy_file "eslint.config.js", force: true
 copy_file "babel.config.js", force: true
 
diff --git a/variants/frontend-stimulus-typescript/template.rb b/variants/frontend-stimulus-typescript/template.rb
@@ -8,12 +8,12 @@
 add_yarn_package_extension_dependency("@jest/test-result", "jest-resolve")
 add_yarn_package_extension_dependency("jest-cli", "@types/yargs")
 
-yarn_add_dependencies ["@babel/plugin-transform-typescript"]
-yarn_add_dev_dependencies [
+add_js_dependencies ["@babel/plugin-transform-typescript"]
+add_js_dependencies [
   "@types/jest@#{JEST_MAJOR_VERSION}",
   "ts-jest@#{JEST_MAJOR_VERSION}",
   "ts-node"
-]
+], type: :dev
 
 copy_file "eslint.config.js", force: true
 
diff --git a/variants/frontend-stimulus/template.rb b/variants/frontend-stimulus/template.rb
@@ -2,7 +2,7 @@
 
 TERMINAL.puts_header "Setting up stimulus.js"
 
-yarn_add_dependencies %w[
+add_js_dependencies %w[
   @hotwired/stimulus
   @hotwired/stimulus-webpack-helpers
 ]
@@ -46,7 +46,7 @@
   EO_JS_SETUP
 end
 
-yarn_add_dev_dependencies %W[
+add_js_dependencies %W[
   @testing-library/dom
   @testing-library/jest-dom
   @testing-library/user-event
@@ -56,7 +56,7 @@
   eslint-plugin-testing-library
   jest-environment-jsdom
   jest@#{JEST_MAJOR_VERSION}
-]
+], type: :dev
 
 copy_file "eslint.config.js", force: true
 copy_file "jest.config.js"
