webpacker 5.0.1 → 6.0.0.pre.1

data/lib/install/examples/vue3/hello_vue.js

@@ -0,0 +1,15 @@
+/* eslint no-console: 0 */
+// Run this example by adding <%= javascript_pack_tag 'hello_vue' %> (and
+// <%= stylesheet_pack_tag 'hello_vue' %> if you have styles in your component)
+// to the head of your layout file,
+// like app/views/layouts/application.html.erb.
+// Create a div container with the id 'vue-app' <div id='vue-app'></div>
+// It renders <p>Hello Vue</p> into it.
+
+import { createApp } from "vue";
+import App from "../app.vue";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const app = createApp(App);
+  app.mount("#vue-app");
+});

data/lib/install/javascript/packs/application.css

@@ -0,0 +1,9 @@
+/* 
+Any CSS added to this file or imported from this file, e.g. `@import '../stylesheets/my-css.css'`,
+will be included in the "application" pack. Any CSS imported from application.js or as part of the 
+application.js dependency graph, e.g. `import '../stylesheets/my-css.css'` will also be included 
+in the "application" pack. 
+
+To reference this file, add <%= stylesheet_pack_tag 'application' %> to the appropriate
+layout file, like app/views/layouts/application.html.erb
+*/

data/lib/install/template.rb

@@ -4,15 +4,6 @@ copy_file "#{__dir__}/config/webpacker.yml", "config/webpacker.yml"
 say "Copying webpack core config"
 directory "#{__dir__}/config/webpack", "config/webpack"
 
-say "Copying postcss.config.js to app root directory"
-copy_file "#{__dir__}/config/postcss.config.js", "postcss.config.js"
-
-say "Copying babel.config.js to app root directory"
-copy_file "#{__dir__}/config/babel.config.js", "babel.config.js"
-
-say "Copying .browserslistrc to app root directory"
-copy_file "#{__dir__}/config/.browserslistrc", ".browserslistrc"
-
 if Dir.exists?(Webpacker.config.source_path)
   say "The JavaScript app source directory already exists"
 else
@@ -22,8 +13,9 @@ end
 
 apply "#{__dir__}/binstubs.rb"
 
-if File.exists?(".gitignore")
-  append_to_file ".gitignore" do
+git_ignore_path = Rails.root.join(".gitignore")
+if File.exists?(git_ignore_path)
+  append_to_file git_ignore_path do
     "\n"                   +
     "/public/packs\n"      +
     "/public/packs-test\n" +
@@ -34,16 +26,38 @@ if File.exists?(".gitignore")
   end
 end
 
-if Webpacker::VERSION =~ /^[0-9]+\.[0-9]+\.[0-9]+$/
-  say "Installing all JavaScript dependencies [#{Webpacker::VERSION}]"
-  run "yarn add @rails/webpacker@#{Webpacker::VERSION}"
-else
-  say "Installing all JavaScript dependencies [from prerelease rails/webpacker]"
-  run "yarn add @rails/webpacker@next"
+Dir.chdir(Rails.root) do
+  if Webpacker::VERSION =~ /^[0-9]+\.[0-9]+\.[0-9]+$/
+    say "Installing all JavaScript dependencies [#{Webpacker::VERSION}]"
+    run "yarn add @rails/webpacker@#{Webpacker::VERSION}"
+  else
+    say "Installing all JavaScript dependencies [from prerelease rails/webpacker]"
+    run "yarn add @rails/webpacker@next"
+  end
+
+  package_json = File.read("#{__dir__}/../../package.json")
+  webpack_version = package_json.match(/"webpack": "(.*)"/)[1]
+  webpack_cli_version = package_json.match(/"webpack-cli": "(.*)"/)[1]
+
+  # needed for experimental Yarn 2 support and should not harm Yarn 1
+  say "Installing webpack and webpack-cli as direct dependencies"
+  run "yarn add webpack@#{webpack_version} webpack-cli@#{webpack_cli_version}"
+
+  say "Installing dev server for live reloading"
+  run "yarn add --dev webpack-dev-server @webpack-cli/serve"
 end
 
-say "Installing dev server for live reloading"
-run "yarn add --dev webpack-dev-server"
+insert_into_file Rails.root.join("package.json").to_s, before: /\n}\n*$/ do
+  <<~JSON.chomp
+  ,
+    "babel": {
+      "presets": ["./node_modules/@rails/webpacker/package/babel/preset.js"]
+    },
+    "browserslist": [
+      "defaults"
+    ]
+  JSON
+end
 
 if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
   say "You need to allow webpack-dev-server host as allowed origin for connect-src.", :yellow

data/lib/tasks/webpacker.rake

@@ -6,19 +6,10 @@ tasks = {
   "webpacker:clobber"                 => "Removes the webpack compiled output directory",
   "webpacker:check_node"              => "Verifies if Node.js is installed",
   "webpacker:check_yarn"              => "Verifies if Yarn is installed",
-  "webpacker:check_binstubs"          => "Verifies that webpack & webpack-dev-server are present",
+  "webpacker:check_binstubs"          => "Verifies that bin/webpack is present",
   "webpacker:binstubs"                => "Installs Webpacker binstubs in this application",
   "webpacker:verify_install"          => "Verifies if Webpacker is installed",
-  "webpacker:yarn_install"            => "Support for older Rails versions. Install all JavaScript dependencies as specified via Yarn",
-  "webpacker:install:react"           => "Installs and setup example React component",
-  "webpacker:install:vue"             => "Installs and setup example Vue component",
-  "webpacker:install:angular"         => "Installs and setup example Angular component",
-  "webpacker:install:elm"             => "Installs and setup example Elm component",
-  "webpacker:install:svelte"          => "Installs and setup example Svelte component",
-  "webpacker:install:stimulus"        => "Installs and setup example Stimulus component",
-  "webpacker:install:erb"             => "Installs Erb loader with an example",
-  "webpacker:install:coffee"          => "Installs CoffeeScript loader with an example",
-  "webpacker:install:typescript"      => "Installs Typescript loader with an example"
+  "webpacker:yarn_install"            => "Support for older Rails versions. Install all JavaScript dependencies as specified via Yarn"
 }.freeze
 
 desc "Lists all available tasks in Webpacker"

data/lib/tasks/webpacker/binstubs.rake

@@ -1,13 +1,15 @@
 binstubs_template_path = File.expand_path("../../install/binstubs.rb", __dir__).freeze
-bin_path = ENV["BUNDLE_BIN"] || "./bin"
+bin_path = ENV["BUNDLE_BIN"] || Rails.root.join("bin")
 
 namespace :webpacker do
   desc "Installs Webpacker binstubs in this application"
-  task binstubs: [:check_node, :check_yarn] do
+  task binstubs: [:check_node, :check_yarn] do |task|
+    prefix = task.name.split(/#|webpacker:binstubs/).first
+
     if Rails::VERSION::MAJOR >= 5
-      exec "#{RbConfig.ruby} #{bin_path}/rails app:template LOCATION=#{binstubs_template_path}"
+      exec "#{RbConfig.ruby} #{bin_path}/rails #{prefix}app:template LOCATION=#{binstubs_template_path}"
     else
-      exec "#{RbConfig.ruby} #{bin_path}/rake rails:template LOCATION=#{binstubs_template_path}"
+      exec "#{RbConfig.ruby} #{bin_path}/rake #{prefix}rails:template LOCATION=#{binstubs_template_path}"
     end
   end
 end

data/lib/tasks/webpacker/check_binstubs.rake

@@ -1,10 +1,10 @@
 namespace :webpacker do
-  desc "Verifies that webpack & webpack-dev-server are present."
+  desc "Verifies that bin/webpack is present"
   task :check_binstubs do
-    unless File.exist?("bin/webpack")
-      $stderr.puts "webpack binstubs not found.\n"\
+    unless File.exist?(Rails.root.join("bin/webpack"))
+      $stderr.puts "webpack binstub not found.\n"\
            "Have you run rails webpacker:install ?\n"\
-           "Make sure the bin directory or binstubs are not included in .gitignore\n"\
+           "Make sure the bin directory and bin/webpack are not included in .gitignore\n"\
            "Exiting!"
       exit!
     end

data/lib/tasks/webpacker/check_node.rake

@@ -3,7 +3,7 @@ namespace :webpacker do
   desc "Verifies if Node.js is installed"
   task :check_node do
     begin
-      node_version = `node -v || nodejs -v`
+      node_version = `node -v || nodejs -v`.strip
       raise Errno::ENOENT if node_version.blank?
 
       pkg_path = Pathname.new("#{__dir__}/../../../package.json").realpath

data/lib/tasks/webpacker/check_yarn.rake

@@ -3,19 +3,18 @@ namespace :webpacker do
   desc "Verifies if Yarn is installed"
   task :check_yarn do
     begin
-      yarn_version = `yarn --version`
+      yarn_version = `yarn --version`.strip
       raise Errno::ENOENT if yarn_version.blank?
 
       pkg_path = Pathname.new("#{__dir__}/../../../package.json").realpath
       yarn_range = JSON.parse(pkg_path.read)["engines"]["yarn"]
       is_valid = SemanticRange.satisfies?(yarn_version, yarn_range) rescue false
-      is_unsupported = SemanticRange.satisfies?(yarn_version, ">=2.0.0") rescue false
+      is_unsupported = SemanticRange.satisfies?(yarn_version, ">=3.0.0") rescue false
 
       unless is_valid
         $stderr.puts "Webpacker requires Yarn \"#{yarn_range}\" and you are using #{yarn_version}"
         if is_unsupported
           $stderr.puts "This version of Webpacker does not support Yarn #{yarn_version}. Please downgrade to a supported version of Yarn https://yarnpkg.com/lang/en/docs/install/"
-          $stderr.puts "For information on using Webpacker with Yarn 2.0, see https://github.com/rails/webpacker/issues/2112"
         else
           $stderr.puts "Please upgrade Yarn https://yarnpkg.com/lang/en/docs/install/"
         end

data/lib/tasks/webpacker/compile.rake

@@ -10,8 +10,10 @@ end
 def enhance_assets_precompile
   # yarn:install was added in Rails 5.1
   deps = yarn_install_available? ? [] : ["webpacker:yarn_install"]
-  Rake::Task["assets:precompile"].enhance(deps) do
-    Rake::Task["webpacker:compile"].invoke
+  Rake::Task["assets:precompile"].enhance(deps) do |task|
+    prefix = task.name.split(/#|assets:precompile/).first
+
+    Rake::Task["#{prefix}webpacker:compile"].invoke
   end
 end
 

data/lib/tasks/webpacker/info.rake

@@ -3,17 +3,19 @@ require "webpacker/version"
 namespace :webpacker do
   desc "Provide information on Webpacker's environment"
   task :info do
-    $stdout.puts "Ruby: #{`ruby --version`}"
-    $stdout.puts "Rails: #{Rails.version}"
-    $stdout.puts "Webpacker: #{Webpacker::VERSION}"
-    $stdout.puts "Node: #{`node --version`}"
-    $stdout.puts "Yarn: #{`yarn --version`}"
+    Dir.chdir(Rails.root) do
+      $stdout.puts "Ruby: #{`ruby --version`}"
+      $stdout.puts "Rails: #{Rails.version}"
+      $stdout.puts "Webpacker: #{Webpacker::VERSION}"
+      $stdout.puts "Node: #{`node --version`}"
+      $stdout.puts "Yarn: #{`yarn --version`}"
 
-    $stdout.puts "\n"
-    $stdout.puts "@rails/webpacker: \n#{`npm list @rails/webpacker version`}"
+      $stdout.puts "\n"
+      $stdout.puts "@rails/webpacker: \n#{`npm list @rails/webpacker version`}"
 
-    $stdout.puts "Is bin/webpack present?: #{File.exist? 'bin/webpack'}"
-    $stdout.puts "Is bin/webpack-dev-server present?: #{File.exist? 'bin/webpack-dev-server'}"
-    $stdout.puts "Is bin/yarn present?: #{File.exist? 'bin/yarn'}"
+      $stdout.puts "Is bin/webpack present?: #{File.exist? 'bin/webpack'}"
+      $stdout.puts "Is bin/webpack-dev-server present?: #{File.exist? 'bin/webpack-dev-server'}"
+      $stdout.puts "Is bin/yarn present?: #{File.exist? 'bin/yarn'}"
+    end
   end
 end

data/lib/tasks/webpacker/install.rake

@@ -1,13 +1,15 @@
 install_template_path = File.expand_path("../../install/template.rb", __dir__).freeze
-bin_path = ENV["BUNDLE_BIN"] || "./bin"
+bin_path = ENV["BUNDLE_BIN"] || Rails.root.join("bin")
 
 namespace :webpacker do
   desc "Install Webpacker in this application"
-  task install: [:check_node, :check_yarn] do
+  task install: [:check_node, :check_yarn] do |task|
+    prefix = task.name.split(/#|webpacker:install/).first
+
     if Rails::VERSION::MAJOR >= 5
-      exec "#{RbConfig.ruby} #{bin_path}/rails app:template LOCATION=#{install_template_path}"
+      exec "#{RbConfig.ruby} #{bin_path}/rails #{prefix}app:template LOCATION=#{install_template_path}"
     else
-      exec "#{RbConfig.ruby} #{bin_path}/rake rails:template LOCATION=#{install_template_path}"
+      exec "#{RbConfig.ruby} #{bin_path}/rake #{prefix}rails:template LOCATION=#{install_template_path}"
     end
   end
 end

data/lib/tasks/webpacker/verify_install.rake

@@ -4,7 +4,8 @@ namespace :webpacker do
   desc "Verifies if Webpacker is installed"
   task verify_install: [:check_node, :check_yarn, :check_binstubs] do
     unless Webpacker.config.config_path.exist?
-      $stderr.puts "Configuration config/webpacker.yml file not found. \n"\
+      path = Webpacker.config.config_path.relative_path_from(Pathname.new(pwd)).to_s
+      $stderr.puts "Configuration #{path} file not found. \n"\
            "Make sure webpacker:install is run successfully before " \
            "running dependent tasks"
       exit!

data/lib/tasks/webpacker/yarn_install.rake

@@ -5,6 +5,14 @@ namespace :webpacker do
     node_env = ENV.fetch("NODE_ENV") do
       valid_node_envs.include?(Rails.env) ? Rails.env : "production"
     end
-    system({ "NODE_ENV" => node_env }, "yarn install --no-progress --frozen-lockfile")
+    Dir.chdir(Rails.root) do
+      yarn_flags =
+        if `yarn --version`.start_with?("1")
+          "--no-progress --frozen-lockfile"
+        else
+          "--immutable"
+        end
+      system({ "NODE_ENV" => node_env }, "yarn install #{yarn_flags}")
+    end
   end
 end

data/lib/webpacker/commands.rb

@@ -23,7 +23,7 @@ class Webpacker::Commands
         .each_with_index
         .drop_while do |(mtime, _), index|
           max_age = [0, Time.now - Time.at(mtime)].max
-          max_age < age && index < count
+          max_age < age || index < count
         end
         .each do |(_, files), index|
           files.each do |file|

data/lib/webpacker/compiler.rb

@@ -4,6 +4,8 @@ require "digest/sha1"
 class Webpacker::Compiler
   # Additional paths that test compiler needs to watch
   # Webpacker::Compiler.watched_paths << 'bower_components'
+  #
+  # Deprecated. Use additional_paths in the YAML configuration instead.
   cattr_accessor(:watched_paths) { [] }
 
   # Additional environment variables that the compiler is being run with
@@ -20,9 +22,8 @@ class Webpacker::Compiler
     if stale?
       run_webpack.tap do |success|
         # We used to only record the digest on success
-        # However, the output file is still written on error, (at least with ts-loader), meaning that the
-        # digest should still be updated. If it's not, you can end up in a situation where a recompile doesn't
-        # take place when it should.
+        # However, the output file is still written on error, meaning that the digest should still be updated.
+        # If it's not, you can end up in a situation where a recompile doesn't take place when it should.
         # See https://github.com/rails/webpacker/issues/2113
         record_compilation_digest
       end
@@ -51,9 +52,12 @@ class Webpacker::Compiler
     end
 
     def watched_files_digest
-      files = Dir[*default_watched_paths, *watched_paths].reject { |f| File.directory?(f) }
-      file_ids = files.sort.map { |f| "#{File.basename(f)}/#{Digest::SHA1.file(f).hexdigest}" }
-      Digest::SHA1.hexdigest(file_ids.join("/"))
+      warn "Webpacker::Compiler.watched_paths has been deprecated. Set additional_paths in webpacker.yml instead." unless watched_paths.empty?
+      Dir.chdir File.expand_path(config.root_path) do
+        files = Dir[*default_watched_paths, *watched_paths].reject { |f| File.directory?(f) }
+        file_ids = files.sort.map { |f| "#{File.basename(f)}/#{Digest::SHA1.file(f).hexdigest}" }
+        Digest::SHA1.hexdigest(file_ids.join("/"))
+      end
     end
 
     def record_compilation_digest
@@ -87,8 +91,8 @@ class Webpacker::Compiler
 
     def default_watched_paths
       [
-        *config.resolved_paths_globbed,
-        config.source_path_globbed,
+        *config.additional_paths,
+        "#{config.source_path}/**/*",
         "yarn.lock", "package.json",
         "config/webpack/**/*"
       ].freeze
@@ -102,6 +106,7 @@ class Webpacker::Compiler
       return env unless defined?(ActionController::Base)
 
       env.merge("WEBPACKER_ASSET_HOST"        => ENV.fetch("WEBPACKER_ASSET_HOST", ActionController::Base.helpers.compute_asset_host),
-                "WEBPACKER_RELATIVE_URL_ROOT" => ENV.fetch("WEBPACKER_RELATIVE_URL_ROOT", ActionController::Base.relative_url_root))
+                "WEBPACKER_RELATIVE_URL_ROOT" => ENV.fetch("WEBPACKER_RELATIVE_URL_ROOT", ActionController::Base.relative_url_root),
+                "WEBPACKER_CONFIG" => webpacker.config_path.to_s)
     end
 end

data/lib/webpacker/configuration.rb

@@ -23,16 +23,8 @@ class Webpacker::Configuration
     root_path.join(fetch(:source_path))
   end
 
-  def source_path_globbed
-    globbed_path_with_extensions(source_path.relative_path_from(root_path))
-  end
-
-  def resolved_paths
-    fetch(:resolved_paths)
-  end
-
-  def resolved_paths_globbed
-    resolved_paths.map { |p| globbed_path_with_extensions(p) }
+  def additional_paths
+    fetch(:additional_paths)
   end
 
   def source_entry_path
@@ -59,26 +51,18 @@ class Webpacker::Configuration
     root_path.join(fetch(:cache_path))
   end
 
-  def extensions
-    fetch(:extensions)
-  end
-
   def check_yarn_integrity=(value)
-    data[:check_yarn_integrity] = value
-  end
-
-  def check_yarn_integrity?
-    fetch(:check_yarn_integrity)
+    warn <<~EOS
+      Webpacker::Configuration#check_yarn_integrity=(value) is obsolete. The integrity
+      check has been removed from Webpacker (https://github.com/rails/webpacker/pull/2518)
+      so changing this setting will have no effect.
+    EOS
   end
 
   def webpack_compile_output?
     fetch(:webpack_compile_output)
   end
 
-  def extract_css?
-    fetch(:extract_css)
-  end
-
   private
     def fetch(key)
       data.fetch(key, defaults[key])
@@ -106,8 +90,4 @@ class Webpacker::Configuration
       @defaults ||= \
         HashWithIndifferentAccess.new(YAML.load_file(File.expand_path("../../install/config/webpacker.yml", __FILE__))[env])
     end
-
-    def globbed_path_with_extensions(path)
-      "#{path}/**/*{#{extensions.join(',')}}"
-    end
 end

data/lib/webpacker/dev_server_proxy.rb

@@ -11,7 +11,9 @@ class Webpacker::DevServerProxy < Rack::Proxy
 
   def perform_request(env)
     if env["PATH_INFO"].start_with?("/#{public_output_uri_path}") && dev_server.running?
-      env["HTTP_HOST"] = env["HTTP_X_FORWARDED_HOST"] = env["HTTP_X_FORWARDED_SERVER"] = dev_server.host_with_port
+      env["HTTP_HOST"] = env["HTTP_X_FORWARDED_HOST"] = dev_server.host
+      env["HTTP_X_FORWARDED_SERVER"] = dev_server.host_with_port
+      env["HTTP_PORT"] = env["HTTP_X_FORWARDED_PORT"] = dev_server.port.to_s
       env["HTTP_X_FORWARDED_PROTO"] = env["HTTP_X_FORWARDED_SCHEME"] = dev_server.protocol
       unless dev_server.https?
         env["HTTPS"] = env["HTTP_X_FORWARDED_SSL"] = "off"

data/lib/webpacker/dev_server_runner.rb

@@ -8,11 +8,13 @@ module Webpacker
   class DevServerRunner < Webpacker::Runner
     def run
       load_config
+      detect_unsupported_switches!
       detect_port!
       execute_cmd
     end
 
     private
+
       def load_config
         app_root = Pathname.new(@app_path)
 
@@ -27,6 +29,7 @@ module Webpacker
         @hostname          = dev_server.host
         @port              = dev_server.port
         @pretty            = dev_server.pretty?
+        @https             = dev_server.https?
 
       rescue Errno::ENOENT, NoMethodError
         $stdout.puts "webpack dev_server configuration not found in #{@config.config_path}[#{ENV["RAILS_ENV"]}]."
@@ -34,6 +37,21 @@ module Webpacker
         exit!
       end
 
+      UNSUPPORTED_SWITCHES = %w[--host --port]
+      private_constant :UNSUPPORTED_SWITCHES
+      def detect_unsupported_switches!
+        unsupported_switches = UNSUPPORTED_SWITCHES & @argv
+        if unsupported_switches.any?
+          $stdout.puts "The following CLI switches are not supported by Webpacker: #{unsupported_switches.join(' ')}. Please edit your command and try again."
+          exit!
+        end
+
+        if @argv.include?("--https") && !@https
+          $stdout.puts "Please set https: true in webpacker.yml to use the --https command line flag."
+          exit!
+        end
+      end
+
       def detect_port!
         server = TCPServer.new(@hostname, @port)
         server.close
@@ -45,20 +63,21 @@ module Webpacker
 
       def execute_cmd
         env = Webpacker::Compiler.env
+        env["WEBPACKER_CONFIG"] = @webpacker_config
 
         cmd = if node_modules_bin_exist?
-          ["#{@node_modules_bin_path}/webpack-dev-server"]
+          ["#{@node_modules_bin_path}/webpack", "serve"]
         else
-          ["yarn", "webpack-dev-server"]
+          ["yarn", "webpack", "serve"]
         end
 
-        if ARGV.include?("--debug")
+        if @argv.include?("--debug-webpacker")
           cmd = [ "node", "--inspect-brk"] + cmd
-          ARGV.delete("--debug")
         end
 
         cmd += ["--config", @webpack_config]
         cmd += ["--progress", "--color"] if @pretty
+        cmd += @argv
 
         Dir.chdir(@app_path) do
           Kernel.exec env, *cmd