Replace webpack with importmapped Hotwire as default js (rails#42999)

* Turbolinks is being replaced with Hotwire

* Make --webpack opt-in

* Don't use specific webpacker installers any more in preparation for next Webpacker

* Update railties/lib/rails/app_updater.rb

Co-authored-by: Alex Ghiculescu <[email protected]>

* Trailing whitespace

* Convert to Turbo data attribute for tracking

* Default is no webpack, no hotwire

* Swap out turbolinks references for hotwire

* Drop explicit return

* Only generate package.json if using webpack

* Only create package.json in webpack mode

* Only create app/javascript in webpack mode

* Generate correct style/js links based on js mode

* Fix tests from changed output format

Not sure why these are showing up in this PR, though.

* Rubocopping

* Stick with webpack for the test app for now

* Adjust tests

* Replace minitest-reporters with minitest-ci (rails#43016)

minitest-reporters is used to create junit xml reports on CI.

But when it loads before rails minitest plugin makes
`Rails::TestUnitReporter` not being added as a reporter.

minitest-ci is now only loaded at ci and does not interferes with
rails minitest plugins. And keeps junit reports workings

* Too heavy handed to actually run bundle

Just like we don't auto-migrate

* Pin js frameworks in importmap

Instead of having importmap preconfigure it.

* Match updated app/javascript path

* No need for the explaining comment

* Fixes test cases for replace webpack with importmapped Hotwire as default js (rails#42999)

* Fix rubocop issues

* Fix more railities test cases

* Fix plugin generator railties shared test cases

* Fix Action Text install generator asset pipeline spec

* They're modules, not files

* Let dev use the latest release as well

So we don't have to replace unexisting dev releases with latest release

* Make Webpack responsible for generating all the JS files it needs

Webpacker 6 has already moved from app/javascript to app/packs.

* Don't add rails/ujs by default any longer

All the ajax/form functionality has been superseded by Turbo. The rest lives in a weird inbetween land we need to address through other means.

* Use new importmap location

* Switch to using turbo-rails and stimulus-rails directly

The hotwire-rails gem does not offer enough value for its indirection

* Use latest Webpacker

* Prevent version resolution requests from getting swallowed

* Use ESM syntax for imports

* Move management of yarn, package.json, etc to Webpacker 6

* Update for Webpacker 6

* Move bin/setup addition to Webpacker as well

* Remove dead tests

* Bump to Webpacker 6.0.0.rc.2

* No longer relevant given the new default is no webpacker

* Rely on Webpacker 6

* No longer relevant

* No longer relevant

* Make cable channel generator work for both webpacker and importmap setups

* Fix tests

* For tests testing importmap way

* Use Webpacker 6 dummy

* RuboCopping

* One more bump to fix webpack-dev-server

* Another bump. Hopefully the last one!

* Also enough to not want turbo tracking on

* Fix tests

* Latest

* Fix tests

* Fix more tests

* Fix tests

Co-authored-by: Alex Ghiculescu <[email protected]>
Co-authored-by: André Luis Leal Cardoso Junior <[email protected]>
Co-authored-by: Abhay Nikam <[email protected]>
Co-authored-by: Guillermo Iguaran <[email protected]>

Author: 5 people

Gemfile

@@ -14,8 +14,10 @@ gem "selenium-webdriver", ">= 4.0.0.alpha7"
 
 gem "rack-cache", "~> 1.2"
 gem "sass-rails"
-gem "turbolinks", "~> 5"
-gem "webpacker", "~> 5.0", require: ENV["SKIP_REQUIRE_WEBPACKER"] != "true"
+gem "stimulus-rails"
+gem "turbo-rails"
+gem "webpacker", "~> 6.0.0.rc.5", require: ENV["SKIP_REQUIRE_WEBPACKER"] != "true"
+gem "importmap-rails"
 # require: false so bcrypt is loaded only when has_secure_password is used.
 # This is to avoid Active Model (and by extension the entire framework)
 # being dependent on a binary library.
@@ -111,8 +113,8 @@ instance_eval File.read local_gemfile if File.exist? local_gemfile
 
 group :test do
   gem "minitest-bisect"
+  gem "minitest-ci", require: false
   gem "minitest-retry"
-  gem "minitest-reporters"
 
   platforms :mri do
     gem "stackprof"

Gemfile.lock

@@ -110,7 +110,6 @@ GEM
     addressable (2.7.0)
       public_suffix (>= 2.0.2, < 5.0)
     amq-protocol (2.3.2)
-    ansi (1.5.0)
     ast (2.4.2)
     aws-eventstream (1.1.1)
     aws-partitions (1.469.0)
@@ -287,6 +286,8 @@ GEM
     image_processing (1.12.1)
       mini_magick (>= 4.9.5, < 5)
       ruby-vips (>= 2.0.17, < 3)
+    importmap-rails (0.3.4)
+      rails (>= 6.0.0)
     jmespath (1.4.0)
     json (2.5.1)
     jwt (2.2.3)
@@ -312,11 +313,8 @@ GEM
     minitest-bisect (1.5.1)
       minitest-server (~> 1.0)
       path_expander (~> 1.1)
-    minitest-reporters (1.4.3)
-      ansi
-      builder
-      minitest (>= 5.0)
-      ruby-progressbar
+    minitest-ci (3.4.0)
+      minitest (>= 5.0.6)
     minitest-retry (0.2.2)
       minitest (>= 5.0)
     minitest-server (1.0.6)
@@ -479,6 +477,8 @@ GEM
       sprockets (>= 3.0.0)
     sqlite3 (1.4.2)
     stackprof (0.2.17)
+    stimulus-rails (0.3.9)
+      rails (>= 6.0.0)
     sucker_punch (3.0.1)
       concurrent-ruby (~> 1.0)
     terser (1.1.4)
@@ -490,9 +490,8 @@ GEM
     thor (1.1.0)
     tilt (2.0.10)
     trailblazer-option (0.1.1)
-    turbolinks (5.2.1)
-      turbolinks-source (~> 5.2)
-    turbolinks-source (5.2.0)
+    turbo-rails (0.7.4)
+      rails (>= 6.0.0)
     tzinfo (2.0.4)
       concurrent-ruby (~> 1.0)
     uber (0.1.0)
@@ -512,7 +511,7 @@ GEM
       addressable (>= 2.3.6)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (5.4.0)
+    webpacker (6.0.0.rc.5)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
@@ -553,12 +552,13 @@ DEPENDENCIES
   google-cloud-storage (~> 1.11)
   hiredis
   image_processing (~> 1.2)
+  importmap-rails
   json (>= 2.0.0)
   kindlerb (~> 1.2.0)
   libxml-ruby
   listen (~> 3.3)
   minitest-bisect
-  minitest-reporters
+  minitest-ci
   minitest-retry
   mysql2 (~> 0.5)!
   nokogiri (>= 1.8.1, != 1.11.0)
@@ -592,17 +592,18 @@ DEPENDENCIES
   sprockets-export
   sqlite3 (~> 1.4)
   stackprof
+  stimulus-rails
   sucker_punch
   terser (>= 1.1.4)
-  turbolinks (~> 5)
+  turbo-rails
   tzinfo-data
   w3c_validators (~> 1.3.6)
   wdm (>= 0.1.0)
   webdrivers
   webmock
-  webpacker (~> 5.0)
+  webpacker (~> 6.0.0.rc.5)
   webrick
   websocket-client-simple!
 
 BUNDLED WITH
-   2.2.19
+   2.2.25

actioncable/lib/action_cable/helpers/action_cable_helper.rb

@@ -8,14 +8,15 @@ module ActionCableHelper
       #
       #   <head>
       #     <%= action_cable_meta_tag %>
-      #     <%= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload' %>
+      #     <%= javascript_include_tag 'application', 'data-turbo-track' => 'reload' %>
       #   </head>
       #
       # This is then used by Action Cable to determine the URL of your WebSocket server.
       # Your JavaScript can then connect to the server without needing to specify the
       # URL directly:
       #
-      #   window.Cable = require("@rails/actioncable")
+      #   import Cable from "@rails/actioncable"
+      #   window.Cable = Cable
       #   window.App = {}
       #   App.cable = Cable.createConsumer()
       #

actioncable/lib/rails/generators/channel/USAGE

@@ -10,4 +10,4 @@ Example:
     creates a Chat channel class, test and JavaScript asset:
         Channel:    app/channels/chat_channel.rb
         Test:       test/channels/chat_channel_test.rb
-        Assets:     app/javascript/channels/chat_channel.js
+        Assets:     $JAVASCRIPT_PATH/channels/chat_channel.js

actioncable/lib/rails/generators/channel/channel_generator.rb

@@ -18,11 +18,23 @@ def create_channel_file
 
         if options[:assets]
           if behavior == :invoke
-            template "javascript/index.js", "app/javascript/channels/index.js"
-            template "javascript/consumer.js", "app/javascript/channels/consumer.js"
+            if defined?(Webpacker::Engine)
+              template "javascript/index.js", "#{Webpacker.config.source_path}/channels/index.js"
+              template "javascript/consumer.js", "#{Webpacker.config.source_path}/channels/consumer.js"
+            else
+              template "javascript/consumer.js", "app/javascript/channels/consumer.js"
+            end
           end
 
-          js_template "javascript/channel", File.join("app/javascript/channels", class_path, "#{file_name}_channel")
+          if defined?(Webpacker::Engine)
+            js_template "javascript/channel", File.join(Webpacker.config.source_path, "channels", class_path, "#{file_name}_channel")
+          else
+            channel_js_path = File.join("app/javascript/channels", class_path, "#{file_name}_channel")
+            js_template "javascript/channel", channel_js_path
+            gsub_file "#{channel_js_path}.js", /\.\/consumer/, "channels/consumer"
+
+            append_to_file "app/javascript/application.js", %(\nimport "channels/#{file_name}_channel"\n)
+          end
         end
 
         generate_application_cable_files

actiontext/lib/generators/action_text/install/install_generator.rb

@@ -10,45 +10,52 @@ class InstallGenerator < ::Rails::Generators::Base
 
       def install_javascript_dependencies
         if defined?(Webpacker::Engine)
-          rails_command "app:binstub:yarn", inline: true
-
           say "Installing JavaScript dependencies", :green
-          yarn_command "add #{js_dependencies.map { |name, version| "#{name}@#{version}" }.join(" ")}", capture: true
+          yarn_command "add #{js_dependencies.map { |name, version| "#{name}@#{version}" }.join(" ")}"
         end
       end
 
       def append_javascript_dependencies
         if defined?(Webpacker::Engine)
-          in_root do
-            if (app_javascript_pack_path = Pathname.new("app/javascript/packs/application.js")).exist?
-              js_dependencies.each_key do |dependency|
-                line = %[require("#{dependency}")]
-
-                unless app_javascript_pack_path.read.include? line
-                  say "Adding #{dependency} to #{app_javascript_pack_path}", :green
-                  append_to_file app_javascript_pack_path, "\n#{line}"
-                end
+          if (app_javascript_pack_path = Pathname.new("#{Webpacker.config.source_entry_path}/application.js")).exist?
+            js_dependencies.each_key do |dependency|
+              line = %[import "#{dependency}"]
+
+              unless app_javascript_pack_path.read.include? line
+                say "Adding #{dependency} to #{app_javascript_pack_path}", :green
+                append_to_file app_javascript_pack_path, "\n#{line}"
               end
-            else
-              say <<~WARNING, :red
-                WARNING: Action Text can't locate your JavaScript bundle to add its package dependencies.
+            end
+          else
+            say <<~WARNING, :red
+              WARNING: Action Text can't locate your JavaScript bundle to add its package dependencies.
 
-                Add these lines to any bundles:
+              Add these lines to any bundles:
 
-                require("trix")
-                require("@rails/actiontext")
+              import "trix"
+              import "@rails/actiontext"
 
-                Alternatively, install and setup the webpacker gem then rerun `bin/rails action_text:install`
-                to have these dependencies added automatically.
-              WARNING
-            end
+              Alternatively, install and setup the webpacker gem then rerun `bin/rails action_text:install`
+              to have these dependencies added automatically.
+            WARNING
           end
         else
-          if (application_javascript_path = Rails.root.join("app/assets/javascripts/application.js")).exist?
+          if (application_javascript_path = Rails.root.join("app/javascript/application.js")).exist?
             insert_into_file application_javascript_path.to_s, %(\nimport "trix"\nimport "@rails/actiontext")
           else
             say <<~INSTRUCTIONS, :green
-              You must import the @rails/actiontext.js and trix.js JavaScript files in your application entrypoint.
+              You must import the @rails/actiontext and trix JavaScript modules in your application entrypoint.
+            INSTRUCTIONS
+          end
+
+          if (importmap_path = Rails.root.join("config/importmap.rb")).exist?
+            insert_into_file \
+              importmap_path.to_s,
+              %(  pin "trix"\n  pin "@rails/actiontext", to: "actiontext.js"\n\n),
+              after: "Rails.application.config.importmap.draw do\n"
+          else
+            say <<~INSTRUCTIONS, :green
+              You must add @rails/actiontext and trix to your importmap to reference them via ESM.
             INSTRUCTIONS
           end
         end
@@ -66,9 +73,8 @@ def create_actiontext_files
 
       def enable_image_processing_gem
         if (gemfile_path = Rails.root.join("Gemfile")).exist?
-          say "Ensure image_processing gem has been enabled so image uploads will work"
+          say "Ensure image_processing gem has been enabled so image uploads will work (remember to bundle!)"
           uncomment_lines gemfile_path, /gem "image_processing"/
-          run "bundle install"
         end
       end
 

guides/source/action_text_overview.md

@@ -55,8 +55,8 @@ After the installation is complete, a Rails app using Webpacker should have the
 
     ```js
     // application.js
-    require("trix")
-    require("@rails/actiontext")
+    import "trix"
+    import "@rails/actiontext"
     ```
 
 2. The `trix` stylesheet should be imported into `actiontext.scss`.

guides/source/asset_pipeline.md

@@ -317,12 +317,12 @@ familiar `javascript_include_tag` and `stylesheet_link_tag`:
 ```
 
 If using the turbolinks gem, which is included by default in Rails, then
-include the 'data-turbolinks-track' option which causes turbolinks to check if
+include the 'data-turbo-track' option which causes Turbo to check if
 an asset has been updated and if so loads it into the page:
 
 ```erb
-<%= stylesheet_link_tag "application", media: "all", "data-turbolinks-track" => "reload" %>
-<%= javascript_include_tag "application", "data-turbolinks-track" => "reload" %>
+<%= stylesheet_link_tag "application", media: "all", "data-turbo-track" => "reload" %>
+<%= javascript_include_tag "application", "data-turbo-track" => "reload" %>
 ```
 
 In regular views you can access images in the `app/assets/images` directory

guides/source/getting_started.md

@@ -206,7 +206,6 @@ of the files and folders that Rails creates by default:
 |Gemfile<br>Gemfile.lock|These files allow you to specify what gem dependencies are needed for your Rails application. These files are used by the Bundler gem. For more information about Bundler, see the [Bundler website](https://bundler.io).|
 |lib/|Extended modules for your application.|
 |log/|Application log files.|
-|package.json|This file allows you to specify what npm dependencies are needed for your Rails application. This file is used by Yarn. For more information about Yarn, see the [Yarn website](https://yarnpkg.com/lang/en/).|
 |public/|Contains static files and compiled assets. When your app is running, this directory will be exposed as-is.|
 |Rakefile|This file locates and loads tasks that can be run from the command line. The task definitions are defined throughout the components of Rails. Rather than changing `Rakefile`, you should add your own tasks by adding files to the `lib/tasks` directory of your application.|
 |README.md|This is a brief instruction manual for your application. You should edit this file to tell others what your application does, how to set it up, and so on.|

guides/source/upgrading_ruby_on_rails.md

@@ -44,7 +44,7 @@ Repeat this process until you reach your target Rails version.
 To move between versions:
 
 1. Change the Rails version number in the `Gemfile` and run `bundle update`.
-2. Change the versions for Rails JavaScript packages in `package.json` and run `yarn install`.
+2. Change the versions for Rails JavaScript packages in `package.json` and run `yarn install`, if running on Webpacker.
 3. Run the [Update task](#the-update-task).
 4. Run your tests.