Replace webpack with importmapped Hotwire as default js (#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 <alex@tanda.co> * 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 (#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 (#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 <alex@tanda.co> Co-authored-by: André Luis Leal Cardoso Junior <andrehjr@gmail.com> Co-authored-by: Abhay Nikam <nikam.abhay1@gmail.com> Co-authored-by: Guillermo Iguaran <guilleiguaran@gmail.com>

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.