Switch to NPM by default and away from a Yarn dependency

bridgetown-core/lib/bridgetown-core/commands/concerns/actions.rb

@@ -101,14 +101,19 @@ def ruby_configure(name, data = "")
                          before: %r!^end$!, verbose: false, force: false
       end
 
-      def add_yarn_for_gem(gemname)
-        say_status :add_yarn, gemname
+      def add_npm_for_gem(gemname)
+        say_status :add_npm, gemname
 
         Bundler.reset!
         Bridgetown::PluginManager.load_determined_bundler_environment
-        Bridgetown::PluginManager.install_yarn_dependencies(name: gemname)
+        Bridgetown::PluginManager.install_npm_dependencies(name: gemname)
       rescue SystemExit
-        say_status :add_yarn, "Package not added due to yarn error", :red
+        say_status :add_npm, "Package not added due to NPM error", :red
+      end
+      alias_method :add_yarn_for_gem, :add_npm_for_gem
+
+      def add_npm_package(package_details)
+        run "#{Bridgetown::PluginManager.package_manager} #{Bridgetown::PluginManager.package_manager_install_command} #{package_details}" # rubocop:disable Layout
       end
 
       def apply_from_url(url)

bridgetown-core/lib/bridgetown-core/commands/esbuild/esbuild.defaults.js.erb

@@ -155,7 +155,7 @@ const sassPlugin = (options) => ({
     // Process .scss and .sass files with Sass
     build.onLoad({ filter: /\.(sass|scss)$/ }, async (args) => {
       if (!sass) {
-        console.error("error: Sass is not installed. Try running `yarn add sass` and then building again.")
+        console.error("error: Sass is not installed. Try running `npm i sass -D` and then building again.")
         return
       }
 

bridgetown-core/lib/bridgetown-core/commands/esbuild/migrate-from-webpack.rb

@@ -18,7 +18,7 @@
 
   gsub_file "package.json", %r!    "postcss-focus-within": "^4.0.0",?!, ""
 
-  run "yarn add -D #{required_packages.join(" ")}"
+  add_npm_package "-D #{required_packages.join(" ")}"
 
   packages_to_remove = package_json["devDependencies"].slice(*redundant_packages).keys
   unless packages_to_remove.empty?

bridgetown-core/lib/bridgetown-core/commands/esbuild/update.rb

@@ -5,5 +5,5 @@
 say "🎉 esbuild configuration updated successfully!"
 say "You may need to add `$styles/` to the front of your main CSS imports."
 say "See https://www.bridgetownrb.com/docs/frontend-assets#esbuild-setup for details."
-say "⚠️ Don't forget to update the esbuild version in your `package.json` file to \"^0.19.2\""
-say "and run `yarn install`!"
+say "⚠️ Don't forget to update the esbuild version in your `package.json` file to \"^0.20.2\""
+say "and run `npm install`!"

bridgetown-core/lib/bridgetown-core/commands/new.rb

@@ -38,9 +38,9 @@ def self.banner
       class_option :"skip-bundle",
                    type: :boolean,
                    desc: "Skip 'bundle install'"
-      class_option :"skip-yarn",
+      class_option :"skip-npm",
                    type: :boolean,
-                   desc: "Skip 'yarn install'"
+                   desc: "Skip 'npm install'"
       class_option :"use-sass",
                    type: :boolean,
                    desc: "Set up a Sass configuration for your stylesheet"
@@ -180,8 +180,8 @@ def after_install(path, cli_path, options = {})
         @skipped_bundle = true # is set to false if bundle install worked
         bundle_install path unless options["skip-bundle"]
 
-        @skipped_yarn = true
-        yarn_install path unless options["skip-yarn"]
+        @skipped_npm = true
+        npm_install path unless options["skip-npm"]
 
         invoke(Apply, [], options) if options[:apply]
         invoke(Configure, options[:configure].split(","), {}) if options[:configure]
@@ -191,9 +191,9 @@ def after_install(path, cli_path, options = {})
         logger.info ""
         logger.info "Success!".green, "🎉 Your new Bridgetown site was " \
                                       "generated in #{cli_path.cyan}."
-        if options["skip-yarn"]
+        if options["skip-npm"]
           logger.info "You can now #{"cd".cyan} #{cli_path.cyan} to get started."
-          logger.info "You'll probably also want to #{"yarn install".cyan} " \
+          logger.info "You'll probably also want to #{"npm install".cyan} " \
                       "to load in your frontend assets."
         else
           logger.info "You can now #{"cd".cyan} #{cli_path.cyan} and run #{bt_start.cyan} " \
@@ -207,7 +207,7 @@ def after_install(path, cli_path, options = {})
           logger.info "You will need to run #{"bundle binstubs bridgetown-core".cyan} manually."
         end
 
-        logger.info "Yarn install skipped.".yellow if @skipped_yarn
+        logger.info "NPM install skipped.".yellow if @skipped_npm
       end
       # rubocop:enable Metrics/CyclomaticComplexity
       # rubocop:enable Metrics/PerceivedComplexity
@@ -240,15 +240,15 @@ def git_init(path)
         say_status :alert, "Could not load git. git init skipped.", :red
       end
 
-      def yarn_install(path)
+      def npm_install(path)
         unless Bridgetown.environment.test?
           inside(path) do
-            run "yarn install", abort_on_failure: true
+            run "npm install", abort_on_failure: true
           end
         end
-        @skipped_yarn = false
+        @skipped_npm = false
       rescue SystemExit
-        say_status :alert, "Could not load yarn. yarn install skipped.", :red
+        say_status :alert, "Could not load npm. NPM install skipped.", :red
       end
     end
   end

bridgetown-core/lib/bridgetown-core/configurations/bt-postcss.rb

@@ -16,7 +16,7 @@
 plugins = %w(postcss-mixins postcss-color-mod-function cssnano)
 
 say "Adding the following PostCSS plugins: #{plugins.join(' | ')}", :green
-run "yarn add -D #{plugins.join(' ')}"
+add_npm_package "-D #{plugins.join(' ')}"
 
 copy_file in_templates_dir("postcss.config.js"), "postcss.config.js", force: true
 

bridgetown-core/lib/bridgetown-core/configurations/cypress.rb

@@ -3,7 +3,7 @@
 # Install packages
 
 say "Installing Cypress...", :green
-run "yarn add -D cypress"
+add_npm_package "-D cypress"
 
 # Copy cypress files and tasks into place
 cypress_tasks = File.read(in_templates_dir("cypress_tasks"))

bridgetown-core/lib/bridgetown-core/configurations/cypress/cypress_tasks

@@ -1,12 +1,12 @@
 namespace :cy do
   desc "Open Cypress test runner"
   task :open do
-    system "yarn run cypress open"
+    system "npm run cypress open"
   end
 
   desc "Run Cypress tests headless"
   task :run do
-    system "yarn run cypress run"
+    system "npm run cypress run"
   end
 
   desc "Start server and open Cypress test runner"

bridgetown-core/lib/bridgetown-core/configurations/gh-pages/gh-pages.yml

@@ -19,9 +19,9 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v2
         with:
-          node-version: "16"
-          cache: "yarn"
-      - run: yarn install
+          node-version: "20"
+          cache: "npm"
+      - run: npm install
 
       - name: Build
         env:

bridgetown-core/lib/bridgetown-core/configurations/is-land.rb

@@ -2,7 +2,7 @@
 
 say_status "is-land", "Installing <is-land>..."
 
-run "yarn add @11ty/is-land"
+add_npm_package "@11ty/is-land"
 
 javascript_import do
   <<~JS

bridgetown-core/lib/bridgetown-core/configurations/lit.rb

@@ -13,7 +13,7 @@
 
 add_gem "bridgetown-lit-renderer", version: "2.1.0.beta2"
 
-run "yarn add lit esbuild-plugin-lit-css [email protected]"
+add_npm_package "lit esbuild-plugin-lit-css [email protected]"
 
 copy_file in_templates_dir("lit-ssr.config.js"), "config/lit-ssr.config.js"
 copy_file in_templates_dir("lit-components-entry.js"), "config/lit-components-entry.js"

bridgetown-core/lib/bridgetown-core/configurations/open-props.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
-run "yarn add open-props"
+add_npm_package "open-props"
 
 variables_import = <<~CSS
   @import "variables.css";

bridgetown-core/lib/bridgetown-core/configurations/purgecss.rb

@@ -4,7 +4,7 @@
 
 say_status :purgecss, "Installing PurgeCSS"
 
-run "yarn add -D purgecss"
+add_npm_package "-D purgecss"
 
 create_builder "purgecss.rb" do
   <<~RUBY

bridgetown-core/lib/bridgetown-core/configurations/ruby2js.rb

@@ -12,7 +12,7 @@
 say_status :ruby2js, "Installing Ruby2JS..."
 
 add_gem "ruby2js"
-run "yarn add -D @ruby2js/esbuild-plugin"
+add_npm_package "-D @ruby2js/esbuild-plugin"
 
 insert_into_file "esbuild.config.js",
                  after: 'const build = require("./config/esbuild.defaults.js")' do

bridgetown-core/lib/bridgetown-core/configurations/shoelace.rb

@@ -2,7 +2,7 @@
 
 say_status :shoelace, "Installing Shoelace..."
 
-run "yarn add @shoelace-style/shoelace"
+add_npm_package "@shoelace-style/shoelace"
 
 stylesheet_import = <<~CSS
   /* Import the base Shoelace stylesheet: */
@@ -42,9 +42,9 @@
   "shoelace:copy-assets": "mkdir -p src/shoelace-assets && cp -r node_modules/@shoelace-style/shoelace/dist/assets src/shoelace-assets",
   JS
 end
-gsub_file "package.json", %r{"esbuild": "node}, '"esbuild": "yarn shoelace:copy-assets && node'
+gsub_file "package.json", %r{"esbuild": "node}, '"esbuild": "npm run shoelace:copy-assets && node'
 gsub_file "package.json", %r{"esbuild-dev": "node},
-          '"esbuild-dev": "yarn shoelace:copy-assets && node'
+          '"esbuild-dev": "npm run shoelace:copy-assets && node'
 
 if File.exist?(".gitignore")
   append_to_file ".gitignore" do

bridgetown-core/lib/bridgetown-core/configurations/stimulus.rb

@@ -4,7 +4,7 @@
 
 say "Installing Stimulus...", :green
 
-run("yarn add @hotwired/stimulus")
+add_npm_package "@hotwired/stimulus"
 
 say 'Adding Stimulus to "frontend/javascript/index.js"...', :magenta
 

bridgetown-core/lib/bridgetown-core/configurations/turbo.rb

@@ -2,8 +2,7 @@
 
 say_status :turbo, "Installing Turbo..."
 
-run("yarn add @hotwired/turbo")
-run("yarn add turbo-shadow")
+add_npm_package "@hotwired/turbo turbo-shadow"
 
 say_status :turbo, 'Adding Turbo to "frontend/javascript/index.js"...', :magenta
 

bridgetown-core/lib/bridgetown-core/plugin_manager.rb

@@ -2,7 +2,7 @@
 
 module Bridgetown
   class PluginManager
-    YARN_DEPENDENCY_REGEXP = %r!(.+)@([^@]*)$!
+    NPM_DEPENDENCY_REGEXP = %r!(.+)@([^@]*)$!
 
     attr_reader :site, :loaders_manager
 
@@ -54,7 +54,7 @@ def self.load_determined_bundler_environment
 
     def self.require_gem(name)
       Bridgetown::Utils::RequireGems.require_with_graceful_fail(name)
-      plugins = Bridgetown::PluginManager.install_yarn_dependencies(name:)
+      plugins = Bridgetown::PluginManager.install_npm_dependencies(name:)
 
       plugin_to_register = if plugins.length == 1
                              plugins.first
@@ -70,10 +70,10 @@ def self.require_gem(name)
     end
 
     def self.package_manager
-      @package_manager ||= if File.exist?("yarn.lock")
-                             "yarn"
-                           elsif File.exist?("package-lock.json")
+      @package_manager ||= if File.exist?("package-lock.json")
                              "npm"
+                           elsif File.exist?("yarn.lock")
+                             "yarn"
                            elsif File.exist?("pnpm-lock.yaml")
                              "pnpm"
                            else
@@ -87,11 +87,11 @@ def self.package_manager_install_command
 
     # rubocop:disable Metrics/PerceivedComplexity, Metrics/CyclomaticComplexity
 
-    # Iterates through loaded gems and finds yard-add gemspec metadata.
-    # If that exact package hasn't been installed, execute yarn add
+    # Iterates through loaded gems and finds npm-add gemspec metadata.
+    # If that exact package hasn't been installed, execute npm i
     #
     # @return [Bundler::SpecSet]
-    def self.install_yarn_dependencies(required_gems = bundler_specs, name: nil)
+    def self.install_npm_dependencies(required_gems = bundler_specs, name: nil)
       return required_gems unless File.exist?("package.json")
 
       package_json = JSON.parse(File.read("package.json"))
@@ -106,34 +106,37 @@ def self.install_yarn_dependencies(required_gems = bundler_specs, name: nil)
 
       # all right, time to install the package
       gems_to_search.each do |loaded_gem|
-        yarn_dependency = find_yarn_dependency(loaded_gem)
-        next unless add_yarn_dependency?(yarn_dependency, package_json)
+        npm_dependency = find_npm_dependency(loaded_gem)
+        next unless add_npm_dependency?(npm_dependency, package_json)
 
         next if package_manager.empty?
 
-        cmd = "#{package_manager} #{package_manager_install_command} #{yarn_dependency.join("@")}"
+        cmd = "#{package_manager} #{package_manager_install_command} #{npm_dependency.join("@")}"
         system cmd
       end
 
       gems_to_search
     end
 
-    # rubocop:enable Metrics/PerceivedComplexity, Metrics/CyclomaticComplexity
-
-    def self.find_yarn_dependency(loaded_gem)
-      yarn_dependency = loaded_gem.to_spec&.metadata&.dig("yarn-add")&.match(YARN_DEPENDENCY_REGEXP)
-      return nil if yarn_dependency&.length != 3 || yarn_dependency[2] == ""
+    def self.find_npm_dependency(loaded_gem)
+      npm_metadata = loaded_gem.to_spec&.metadata&.dig("npm-add") ||
+        loaded_gem.to_spec&.metadata&.dig("yarn-add")
+      npm_dependency = npm_metadata&.match(NPM_DEPENDENCY_REGEXP)
+      return nil if npm_dependency&.length != 3 || npm_dependency[2] == ""
 
-      yarn_dependency[1..2]
+      npm_dependency[1..2]
     end
 
-    def self.add_yarn_dependency?(yarn_dependency, package_json)
-      return false if yarn_dependency.nil?
+    # rubocop:enable Metrics/PerceivedComplexity, Metrics/CyclomaticComplexity
+
+    def self.add_npm_dependency?(npm_dependency, package_json)
+      return false if npm_dependency.nil?
 
       # check matching version number is see if it's already installed
       if package_json["dependencies"]
-        current_version = package_json["dependencies"][yarn_dependency.first]
-        package_requires_updating?(current_version, yarn_dependency.last)
+        current_version = package_json["dependencies"][npm_dependency.first]
+        current_version = current_version.delete_prefix("^") if current_version
+        package_requires_updating?(current_version, npm_dependency.last)
       else
         true
       end

bridgetown-core/lib/site_template/README.md

@@ -20,14 +20,13 @@ Welcome to your new Bridgetown website! You can update this README file to provi
 - [Bridgetown Gem](https://rubygems.org/gems/bridgetown)
   - `gem install bridgetown -N`
 - [Node](https://nodejs.org)
-  - `>= 12`
-- [Yarn](https://yarnpkg.com)
+  - `>= 20`
 
 ## Install
 
 ```sh
 cd bridgetown-site-folder
-bundle install && yarn install
+bundle install && npm install
 ```
 > Learn more: [Bridgetown Getting Started Documentation](https://www.bridgetownrb.com/docs/).
 

bridgetown-core/lib/site_template/Rakefile.erb

@@ -28,12 +28,12 @@ end
 namespace :frontend do
   desc "Build the frontend with esbuild for deployment"
   task :build do
-    sh "yarn run esbuild"
+    sh "npm run esbuild"
   end
 
   desc "Watch the frontend with esbuild during development"
   task :dev do
-    sh "yarn run esbuild-dev"
+    sh "npm run esbuild-dev"
   rescue Interrupt
   end
 end

bridgetown-core/lib/site_template/src/index.md.erb

@@ -6,13 +6,13 @@ layout: default
 
 # Welcome to your new Bridgetown website.
 
-You can learn more about how to build and deploy your new website by reading the  [Bridgetown documentation](https://www.bridgetownrb.com/docs).
+You can learn more about how to build and deploy your new website by reading the [Bridgetown documentation](https://www.bridgetownrb.com/docs).
 
 You can choose a [theme](https://github.com/topics/bridgetown-theme) or add some [plugins](https://www.bridgetownrb.com/plugins/) to get started quickly.
 
-Be sure to check out the [Bridgetown Cards](https://bridgetown.cards) community site for helpful tips & tricks.
+Be sure to check out the [Bridgetown Community](https://community.bridgetown.pub) site if you have questions or are looking for helpful tips & tricks.
 
-If you run into any issues or have additional questions, please join us in our [Discord chat](https://discord.gg/4E6hktQGz4) or in [GitHub discussions](https://github.com/bridgetownrb/bridgetown/discussions).
+You're also invited to join us in our [Discord chat](https://discord.gg/4E6hktQGz4).
 
 _Have fun and **good luck**!_