Swap default package manager from yarn to NPM

See: #217

Author: ksylvest

README.md

@@ -2,7 +2,7 @@
 
 Use [Bun](https://bun.sh), [esbuild](https://esbuild.github.io), [rollup.js](https://rollupjs.org), or [Webpack](https://webpack.js.org) to bundle your JavaScript, then deliver it via the asset pipeline in Rails. This gem provides installers to get you going with the bundler of your choice in a new Rails application, and a convention to use `app/assets/builds` to hold your bundled output as artifacts that are not checked into source control (the installer adds this directory to `.gitignore` by default).
 
-You develop using this approach by running the bundler in watch mode in a terminal with `yarn build --watch` (and your Rails server in another, if you're not using something like [puma-dev](https://github.com/puma/puma-dev)). You can also use `./bin/dev`, which will start both the Rails server and the JS build watcher (along with a CSS build watcher, if you're also using `cssbundling-rails`).
+You develop using this approach by running the bundler in watch mode in a terminal with `npm run build -- --watch` (and your Rails server in another, if you're not using something like [puma-dev](https://github.com/puma/puma-dev)). You can also use `./bin/dev`, which will start both the Rails server and the JS build watcher (along with a CSS build watcher, if you're also using `cssbundling-rails`).
 
 Whenever the bundler detects changes to any of the JavaScript files in your project, it'll bundle `app/javascript/application.js` into `app/assets/builds/application.js` (and all other entry points configured). You can refer to the build output in your layout using the standard asset pipeline approach with `<%= javascript_include_tag "application", defer: true %>`.
 
@@ -19,6 +19,7 @@ If you're already using [`webpacker`](https://github.com/rails/webpacker) and yo
 If you want to use webpack features like [code splitting](https://webpack.js.org/guides/code-splitting/) and [hot module reloading](https://webpack.js.org/concepts/hot-module-replacement/), consider using the official fork of `webpacker`, [`shakapacker`](https://github.com/shakacode/shakapacker).
 
 ## Installation
+
 If you are installing esbuild, rollup, or webpack, you must already have node installed on your system. You will also need npx version 7.1.0 or later.
 
 If you are using Bun, then you must have the Bun runtime already installed on
@@ -36,7 +37,6 @@ To get started run:
 
 Or, in Rails 7+, you can preconfigure your new application to use a specific bundler with `rails new myapp -j [bun|esbuild|rollup|webpack]`.
 
-
 ## FAQ
 
 ### Is there a work-around for lack of glob syntax on Windows?
@@ -53,8 +53,8 @@ Suppose you have an image `app/javascript/images/example.png` that you need to r
 
 1. Create the image at `app/javascript/images/example.png`.
 1. In `package.json`, under `"scripts"` and `"build"`, add the additional arguments:
-    * `--loader:.png=file` This instructs esbuild to copy png files to the build directory.
-    * `--asset-names=[name]-[hash].digested` This tells esbuild to append `.digested` to the file name so that sprockets or propshaft will not append an additional digest hash to the file.
+   - `--loader:.png=file` This instructs esbuild to copy png files to the build directory.
+   - `--asset-names=[name]-[hash].digested` This tells esbuild to append `.digested` to the file name so that sprockets or propshaft will not append an additional digest hash to the file.
 1. When esbuild runs, it will copy the png file to something like `app/assets/builds/example-5SRKKTLZ.digested.png`.
 1. In frontend code, the image is available for import by its original name: `import Example from "../images/example.png"`.
 1. The image itself can now be referenced by its imported name, e.g. in React, `<img src={Example} />`.

docs/switch_from_webpacker.md

@@ -93,7 +93,7 @@ Webpacker includes [many dependencies](https://github.com/rails/webpacker/blob/5
 
 ```sh
 # From the CLI, remove Webpacker packages
-yarn remove @rails/webpacker webpack-dev-server
+npm uninstall @rails/webpacker webpack-dev-server
 ```
 
 ### Optional: Babel
@@ -191,32 +191,32 @@ yarn add css-loader sass sass-loader mini-css-extract-plugin webpack-remove-empt
 // In webpack.config.js
 
 // Extracts CSS into .css file
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 // Removes exported JavaScript files from CSS-only entries
 // in this example, entry.custom will create a corresponding empty custom.js file
-const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts');
+const RemoveEmptyScriptsPlugin = require("webpack-remove-empty-scripts");
 
 module.exports = {
   entry: {
     // add your css or sass entries
     application: [
-      './app/assets/javascripts/application.js',
-      './app/assets/stylesheets/application.scss',
+      "./app/assets/javascripts/application.js",
+      "./app/assets/stylesheets/application.scss",
     ],
-    custom: './app/assets/stylesheets/custom.scss',
+    custom: "./app/assets/stylesheets/custom.scss",
   },
   module: {
     rules: [
       // Add CSS/SASS/SCSS rule with loaders
       {
         test: /\.(?:sa|sc|c)ss$/i,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
+        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
       },
     ],
   },
   resolve: {
     // Add additional file types
-    extensions: ['.js', '.jsx', '.scss', '.css'],
+    extensions: [".js", ".jsx", ".scss", ".css"],
   },
   plugins: [
     // Include plugins

lib/install/Procfile.dev

@@ -1,2 +1,2 @@
 web: env RUBY_DEBUG_OPEN=true bin/rails server
-js: yarn build --watch
+js: npm run build -- --watch

lib/install/esbuild/install.rb

@@ -2,18 +2,18 @@
 apply "#{__dir__}/../install_procfile.rb"
 
 say "Install esbuild"
-run "yarn add --dev esbuild"
+run "npm install -D esbuild"
 
 say "Add build script"
 build_script = "esbuild app/javascript/*.* --bundle --sourcemap --format=esm --outdir=app/assets/builds --public-path=/assets"
 
 case `npx -v`.to_f
 when 7.1...8.0
   run %(npm set-script build "#{build_script}")
-  run %(yarn build)
+  run %(npm run build)
 when (8.0..)
   run %(npm pkg set scripts.build="#{build_script}")
-  run %(yarn build)
+  run %(npm run build)
 else
   say %(Add "scripts": { "build": "#{build_script}" } to your package.json), :green
 end

lib/install/install_procfile.rb

@@ -1,5 +1,5 @@
 if Rails.root.join("Procfile.dev").exist?
-  append_to_file "Procfile.dev", "js: yarn build --watch\n"
+  append_to_file "Procfile.dev", "js: npm run build -- --watch\n"
 else
   say "Add default Procfile.dev"
   copy_file "#{__dir__}/Procfile.dev", "Procfile.dev"

lib/install/rollup/install.rb

@@ -3,18 +3,18 @@
 
 say "Install rollup with config"
 copy_file "#{__dir__}/rollup.config.js", "rollup.config.js"
-run "yarn add --dev rollup @rollup/plugin-node-resolve"
+run "npm install -D rollup @rollup/plugin-node-resolve"
 
 say "Add build script"
 build_script = "rollup -c --bundleConfigAsCjs rollup.config.js"
 
 case `npx -v`.to_f
 when 7.1...8.0
   run %(npm set-script build "#{build_script}")
-  run %(yarn build)
+  run %(npm run build)
 when (8.0..)
   run %(npm pkg set scripts.build="#{build_script}")
-  run %(yarn build)
+  run %(npm run build)
 else
   say %(Add "scripts": { "build": "#{build_script}" } to your package.json), :green
 end

lib/install/webpack/install.rb

@@ -3,18 +3,18 @@
 
 say "Install Webpack with config"
 copy_file "#{__dir__}/webpack.config.js", "webpack.config.js"
-run "yarn add --dev webpack webpack-cli"
+run "npm install -D webpack webpack-cli"
 
 say "Add build script"
 build_script = "webpack --config webpack.config.js"
 
 case `npx -v`.to_f
 when 7.1...8.0
   run %(npm set-script build "#{build_script}")
-  run %(yarn build)
+  run %(npm run build)
 when (8.0..)
   run %(npm pkg set scripts.build="#{build_script}")
-  run %(yarn build)
+  run %(npm run build)
 else
   say %(Add "scripts": { "build": "#{build_script}" } to your package.json), :green
 end

lib/tasks/jsbundling/build.rake

@@ -15,7 +15,7 @@ namespace :javascript do
     end
   end
 
-  build_task.prereqs << :install unless ENV["SKIP_YARN_INSTALL"] || ENV["SKIP_BUN_INSTALL"]
+  build_task.prereqs << :install unless ENV["SKIP_BUN_INSTALL"] || ENV["SKIP_NPM_INSTALL"] || ENV["SKIP_YARN_INSTALL"]
 end
 
 module Jsbundling
@@ -25,19 +25,19 @@ module Jsbundling
     def install_command
       case tool
       when :bun then "bun install"
-      when :yarn then "yarn install"
       when :pnpm then "pnpm install"
       when :npm then "npm install"
+      when :yarn then "yarn install"
       else raise "jsbundling-rails: No suitable tool found for installing JavaScript dependencies"
       end
     end
 
     def build_command
       case tool
       when :bun then "bun run build"
-      when :yarn then "yarn build"
       when :pnpm then "pnpm build"
       when :npm then "npm run build"
+      when :yarn then "yarn build"
       else raise "jsbundling-rails: No suitable tool found for building JavaScript"
       end
     end
@@ -50,14 +50,14 @@ module Jsbundling
       case
       when File.exist?("bun.lockb")         then :bun
       when File.exist?("bun.lock")          then :bun
-      when File.exist?("yarn.lock")         then :yarn
       when File.exist?("pnpm-lock.yaml")    then :pnpm
       when File.exist?("package-lock.json") then :npm
+      when File.exist?("yarn.lock")         then :yarn
       end
     end
 
     def tool_determined_by_executable
-      %i[ bun yarn pnpm npm ].each do |exe|
+      %i[ bun pnpm npm yarn ].each do |exe|
         return exe if system "command -v #{exe} > /dev/null"
       end
     end

test/esbuild_installer_test.rb

@@ -10,19 +10,19 @@ class EsbuildInstallerTest < ActiveSupport::TestCase
       out, _err = run_installer
 
       File.read("Procfile.dev").tap do |procfile|
-        assert_match "js: yarn build --watch", procfile
+        assert_match "js: npm run build -- --watch", procfile
       end
 
       assert_match "STUBBED gem install foreman", out
-      assert_match %r{STUBBED yarn add.* esbuild}, out
+      assert_match %r{STUBBED npm install .* esbuild}, out
       assert_match %r{STUBBED npm (?:set-script build |pkg set scripts.build=)esbuild app/javascript/\*\.\*}, out
-      assert_match "STUBBED yarn build", out
+      assert_match "STUBBED npm run build", out
     end
   end
 
   private
     def run_installer
-      stub_bins("gem", "yarn", "npm")
+      stub_bins("gem","npm")
       run_command("bin/rails", "javascript:install:esbuild")
     end
 end

test/rollup_installer_test.rb

@@ -10,22 +10,22 @@ class RollupInstallerTest < ActiveSupport::TestCase
       out, _err = run_installer
 
       File.read("Procfile.dev").tap do |procfile|
-        assert_match "js: yarn build --watch", procfile
+        assert_match "js: npm run build -- --watch", procfile
       end
 
       assert_match "STUBBED gem install foreman", out
 
       assert File.exist?("rollup.config.js")
 
-      assert_match %r{STUBBED yarn add.* rollup}, out
+      assert_match %r{STUBBED npm install .* rollup}, out
       assert_match %r{STUBBED npm (?:set-script build |pkg set scripts.build=)rollup .*rollup.config.js}, out
-      assert_match "STUBBED yarn build", out
+      assert_match "STUBBED npm run build", out
     end
   end
 
   private
     def run_installer
-      stub_bins("gem", "yarn", "npm")
+      stub_bins("gem", "npm")
       run_command("bin/rails", "javascript:install:rollup")
     end
 end