webpacker 5.1.0 → 5.3.0

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/yarn_install.rake

@@ -5,6 +5,12 @@ 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")
+    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

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
@@ -50,6 +52,8 @@ class Webpacker::Compiler
     end
 
     def watched_files_digest
+      warn "Webpacker::Compiler.watched_paths has been deprecated. Set additional_paths in webpacker.yml instead." unless watched_paths.empty?
+
       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("/"))
@@ -86,7 +90,7 @@ class Webpacker::Compiler
 
     def default_watched_paths
       [
-        *config.resolved_paths_globbed,
+        *config.additional_paths_globbed,
         config.source_path_globbed,
         "yarn.lock", "package.json",
         "config/webpack/**/*"
@@ -101,6 +105,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

@@ -27,12 +27,12 @@ class Webpacker::Configuration
     globbed_path_with_extensions(source_path.relative_path_from(root_path))
   end
 
-  def resolved_paths
-    fetch(:resolved_paths)
+  def additional_paths
+    fetch(:additional_paths) + resolved_paths
   end
 
-  def resolved_paths_globbed
-    resolved_paths.map { |p| globbed_path_with_extensions(p) }
+  def additional_paths_globbed
+    additional_paths.map { |p| globbed_path_with_extensions(p) }
   end
 
   def source_entry_path
@@ -76,6 +76,14 @@ class Webpacker::Configuration
   end
 
   private
+    def resolved_paths
+      paths = data.fetch(:resolved_paths, [])
+
+      warn "The resolved_paths option has been deprecated. Use additional_paths instead." unless paths.empty?
+
+      paths
+    end
+
     def fetch(key)
       data.fetch(key, defaults[key])
     end

data/lib/webpacker/dev_server_runner.rb

@@ -45,6 +45,7 @@ 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"]
@@ -52,9 +53,8 @@ module Webpacker
           ["yarn", "webpack-dev-server"]
         end
 
-        if ARGV.include?("--debug")
+        if @argv.include?("--debug-webpacker")
           cmd = [ "node", "--inspect-brk"] + cmd
-          ARGV.delete("--debug")
         end
 
         cmd += ["--config", @webpack_config]

data/lib/webpacker/helper.rb

@@ -46,7 +46,16 @@ module Webpacker::Helper
   #
   #  <%= image_pack_tag 'application.png', size: '16x10', alt: 'Edit Entry' %>
   #  <img alt='Edit Entry' src='/packs/application-k344a6d59eef8632c9d1.png' width='16' height='10' />
+  #
+  #  <%= image_pack_tag 'picture.png', srcset: { 'picture-2x.png' => '2x' } %>
+  #  <img srcset= "/packs/picture-2x-7cca48e6cae66ec07b8e.png 2x" src="/packs/picture-c38deda30895059837cf.png" >
   def image_pack_tag(name, **options)
+    if options[:srcset] && !options[:srcset].is_a?(String)
+      options[:srcset] = options[:srcset].map do |src_name, size|
+        "#{resolve_path_to_image(src_name)} #{size}"
+      end.join(", ")
+    end
+
     image_tag(resolve_path_to_image(name), options)
   end
 
@@ -61,7 +70,7 @@ module Webpacker::Helper
   end
 
   # Creates a script tag that references the named pack file, as compiled by webpack per the entries list
-  # in config/webpack/shared.js. By default, this list is auto-generated to match everything in
+  # in package/environments/base.js. By default, this list is auto-generated to match everything in
   # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
   #
   # Example:
@@ -73,10 +82,11 @@ module Webpacker::Helper
   end
 
   # Creates script tags that reference the js chunks from entrypoints when using split chunks API,
-  # as compiled by webpack per the entries list in config/webpack/shared.js.
+  # as compiled by webpack per the entries list in package/environments/base.js.
   # By default, this list is auto-generated to match everything in
   # app/javascript/packs/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up.
   # See: https://webpack.js.org/plugins/split-chunks-plugin/
+  #
   # Example:
   #
   #   <%= javascript_packs_with_chunks_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %> # =>
@@ -85,11 +95,15 @@ module Webpacker::Helper
   #   <script src="/packs/calendar-1016838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
   #   <script src="/packs/map~runtime-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
   #   <script src="/packs/map-16838bab065ae1e314.chunk.js" data-turbolinks-track="reload"></script>
+  #
   # DO:
-  # <%= javascript_packs_with_chunks_tag 'calendar', 'map' %>
+  #
+  #   <%= javascript_packs_with_chunks_tag 'calendar', 'map' %>
+  #
   # DON'T:
-  # <%= javascript_packs_with_chunks_tag 'calendar' %>
-  # <%= javascript_packs_with_chunks_tag 'map' %>
+  #
+  #   <%= javascript_packs_with_chunks_tag 'calendar' %>
+  #   <%= javascript_packs_with_chunks_tag 'map' %>
   def javascript_packs_with_chunks_tag(*names, **options)
     javascript_include_tag(*sources_from_manifest_entrypoints(names, type: :javascript), **options)
   end
@@ -97,6 +111,7 @@ module Webpacker::Helper
   # Creates a link tag, for preloading, that references a given Webpacker asset.
   # In production mode, the digested reference is automatically looked up.
   # See: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
+  #
   # Example:
   #
   #   <%= preload_pack_asset 'fonts/fa-regular-400.woff2' %> # =>
@@ -110,7 +125,7 @@ module Webpacker::Helper
   end
 
   # Creates a link tag that references the named pack file, as compiled by webpack per the entries list
-  # in config/webpack/shared.js. By default, this list is auto-generated to match everything in
+  # in package/environments/base.js. By default, this list is auto-generated to match everything in
   # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
   #
   # Note: If the development server is running and hot module replacement is active, this will return nothing.
@@ -132,7 +147,7 @@ module Webpacker::Helper
   end
 
   # Creates link tags that reference the css chunks from entrypoints when using split chunks API,
-  # as compiled by webpack per the entries list in config/webpack/shared.js.
+  # as compiled by webpack per the entries list in package/environments/base.js.
   # By default, this list is auto-generated to match everything in
   # app/javascript/packs/*.js and all the dependent chunks. In production mode, the digested reference is automatically looked up.
   # See: https://webpack.js.org/plugins/split-chunks-plugin/
@@ -143,11 +158,15 @@ module Webpacker::Helper
   #   <link rel="stylesheet" media="screen" href="/packs/3-8c7ce31a.chunk.css" />
   #   <link rel="stylesheet" media="screen" href="/packs/calendar-8c7ce31a.chunk.css" />
   #   <link rel="stylesheet" media="screen" href="/packs/map-8c7ce31a.chunk.css" />
+  #
   # DO:
-  # <%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %>
+  #
+  #   <%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %>
+  #
   # DON'T:
-  # <%= stylesheet_packs_with_chunks_tag 'calendar' %>
-  # <%= stylesheet_packs_with_chunks_tag 'map' %>
+  #
+  #   <%= stylesheet_packs_with_chunks_tag 'calendar' %>
+  #   <%= stylesheet_packs_with_chunks_tag 'map' %>
   def stylesheet_packs_with_chunks_tag(*names, **options)
     if current_webpacker_instance.config.extract_css?
       stylesheet_link_tag(*sources_from_manifest_entrypoints(names, type: :stylesheet), **options)

data/lib/webpacker/runner.rb

@@ -12,6 +12,7 @@ module Webpacker
       @app_path              = File.expand_path(".", Dir.pwd)
       @node_modules_bin_path = ENV["WEBPACKER_NODE_MODULES_BIN_PATH"] || `yarn bin`.chomp
       @webpack_config        = File.join(@app_path, "config/webpack/#{ENV["NODE_ENV"]}.js")
+      @webpacker_config      = File.join(@app_path, "config/webpacker.yml")
 
       unless File.exist?(@webpack_config)
         $stderr.puts "webpack config #{@webpack_config} not found, please run 'bundle exec rails webpacker:install' to install Webpacker with default configs or add the missing config file for your custom environment."

data/lib/webpacker/version.rb

@@ -1,4 +1,4 @@
 module Webpacker
   # Change the version in package.json too, please!
-  VERSION = "5.1.0".freeze
+  VERSION = "5.3.0".freeze
 end

data/lib/webpacker/webpack_runner.rb

@@ -5,6 +5,7 @@ module Webpacker
   class WebpackRunner < Webpacker::Runner
     def run
       env = Webpacker::Compiler.env
+      env["WEBPACKER_CONFIG"] = @webpacker_config
 
       cmd = if node_modules_bin_exist?
         ["#{@node_modules_bin_path}/webpack"]
@@ -12,9 +13,8 @@ module Webpacker
         ["yarn", "webpack"]
       end
 
-      if ARGV.include?("--debug")
+      if @argv.include?("--debug-webpacker")
         cmd = [ "node", "--inspect-brk"] + cmd
-        ARGV.delete("--debug")
       end
 
       cmd += ["--config", @webpack_config] + @argv

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "5.1.0",
+  "version": "5.3.0",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [
@@ -8,56 +8,56 @@
     "lib/install/config/webpacker.yml"
   ],
   "engines": {
-    "node": ">=10.13.0",
-    "yarn": ">=1 <2"
+    "node": ">=10.17.0",
+    "yarn": ">=1 <3"
   },
   "dependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.9.0",
+    "@babel/core": "^7.13.16",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.13.8",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-destructuring": "^7.8.8",
-    "@babel/plugin-transform-regenerator": "^7.8.7",
-    "@babel/plugin-transform-runtime": "^7.9.0",
-    "@babel/preset-env": "^7.9.0",
-    "@babel/runtime": "^7.9.2",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-dynamic-import-node": "^2.3.0",
+    "@babel/plugin-transform-destructuring": "^7.13.17",
+    "@babel/plugin-transform-regenerator": "^7.13.15",
+    "@babel/plugin-transform-runtime": "^7.13.15",
+    "@babel/preset-env": "^7.13.15",
+    "@babel/runtime": "^7.13.17",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
     "babel-plugin-macros": "^2.8.0",
-    "case-sensitive-paths-webpack-plugin": "^2.3.0",
-    "compression-webpack-plugin": "^3.1.0",
-    "core-js": "^3.6.4",
-    "css-loader": "^3.4.2",
-    "file-loader": "^6.0.0",
-    "flatted": "^2.0.1",
+    "case-sensitive-paths-webpack-plugin": "^2.4.0",
+    "compression-webpack-plugin": "^4.0.1",
+    "core-js": "^3.11.0",
+    "css-loader": "^3.6.0",
+    "file-loader": "^6.2.0",
+    "flatted": "^3.1.1",
     "glob": "^7.1.6",
-    "js-yaml": "^3.13.1",
+    "js-yaml": "^3.14.1",
     "mini-css-extract-plugin": "^0.9.0",
-    "node-sass": "^4.13.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
     "path-complete-extname": "^1.0.0",
     "pnp-webpack-plugin": "^1.6.4",
-    "postcss-flexbugs-fixes": "^4.2.0",
+    "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
     "postcss-safe-parser": "^4.0.2",
-    "regenerator-runtime": "^0.13.5",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^1.1.3",
-    "terser-webpack-plugin": "^2.3.5",
-    "webpack": "^4.42.1",
+    "regenerator-runtime": "^0.13.7",
+    "sass": "^1.32.11",
+    "sass-loader": "10.1.1",
+    "style-loader": "^1.3.0",
+    "terser-webpack-plugin": "^4.2.3",
+    "webpack": "^4.46.0",
     "webpack-assets-manifest": "^3.1.1",
-    "webpack-cli": "^3.3.11",
+    "webpack-cli": "^3.3.12",
     "webpack-sources": "^1.4.3"
   },
   "devDependencies": {
-    "eslint": "^6.8.0",
-    "eslint-config-airbnb": "^18.1.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.19.0",
-    "jest": "^25.1.0"
+    "eslint": "^7.25.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-react": "^7.23.2",
+    "jest": "^26.6.3"
   },
   "jest": {
     "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",

data/package/__tests__/config.js

@@ -23,6 +23,16 @@ describe('Config', () => {
     expect(config.publicPath).toEqual('http://foo.com/packs/')
   })
 
+  test('should return additional paths as listed in app config, with resolved paths', () => {
+    expect(config.additional_paths).toEqual(
+      [
+        'app/assets',
+        '/etc/yarn',
+        'app/elm'
+      ]
+    )
+  })
+
   test('should return extensions as listed in app config', () => {
     expect(config.extensions).toEqual([
       '.mjs',
@@ -37,7 +47,8 @@ describe('Config', () => {
       '.svg',
       '.gif',
       '.jpeg',
-      '.jpg'
+      '.jpg',
+      '.elm'
     ])
   })
 

data/package/__tests__/development.js

@@ -11,9 +11,10 @@ describe('Development environment', () => {
   describe('toWebpackConfig', () => {
     beforeEach(() => jest.resetModules())
 
-    test('should use development config and environment', () => {
+    test('should use development config and environment including devServer if WEBPACK_DEV_SERVER', () => {
       process.env.RAILS_ENV = 'development'
       process.env.NODE_ENV = 'development'
+      process.env.WEBPACK_DEV_SERVER = 'YES'
       const { environment } = require('../index')
 
       const config = environment.toWebpackConfig()
@@ -26,5 +27,17 @@ describe('Development environment', () => {
         }
       })
     })
+
+    test('should use development config and environment if WEBPACK_DEV_SERVER', () => {
+      process.env.RAILS_ENV = 'development'
+      process.env.NODE_ENV = 'development'
+      process.env.WEBPACK_DEV_SERVER = undefined
+      const { environment } = require('../index')
+
+      const config = environment.toWebpackConfig()
+      expect(config.output.path).toEqual(resolve('public', 'packs'))
+      expect(config.output.publicPath).toEqual('/packs/')
+      expect(config.devServer).toEqual(undefined)
+    })
   })
 })

data/package/config.js

@@ -4,9 +4,9 @@ const { readFileSync } = require('fs')
 const deepMerge = require('./utils/deep_merge')
 const { isArray, ensureTrailingSlash } = require('./utils/helpers')
 const { railsEnv } = require('./env')
+const configPath = require('./configPath')
 
 const defaultConfigPath = require.resolve('../lib/install/config/webpacker.yml')
-const configPath = resolve('config', 'webpacker.yml')
 
 const getDefaultConfig = () => {
   const defaultConfig = safeLoad(readFileSync(defaultConfigPath), 'utf8')
@@ -24,6 +24,9 @@ if (isArray(app.static_assets_extensions) && app.static_assets_extensions.length
 const config = deepMerge(defaults, app)
 config.outputPath = resolve(config.public_root_path, config.public_output_path)
 
+// Merge resolved_paths into additional_paths for backwards-compat
+config.additional_paths = config.additional_paths.concat(config.resolved_paths || [])
+
 // Ensure that the publicPath includes our asset host so dynamic imports
 // (code-splitting chunks and static assets) load from the CDN instead of a relative path.
 const getPublicPath = () => {