webpacker 5.2.1 → 6.0.0.beta.4

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 additional_paths
-    fetch(:additional_paths) + resolved_paths
-  end
-
-  def additional_paths_globbed
-    additional_paths.map { |p| globbed_path_with_extensions(p) }
+    fetch(:additional_paths)
   end
 
   def source_entry_path
@@ -59,31 +51,19 @@ class Webpacker::Configuration
     root_path.join(fetch(:cache_path))
   end
 
-  def extensions
-    fetch(:extensions)
-  end
-
   def check_yarn_integrity=(value)
-    warn "Webpacker::Configuration#check_yarn_integrity=(value) has been deprecated. The integrity check has been removed from Webpacker so changing this setting will have no effect."
+    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 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
@@ -110,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_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
@@ -46,19 +64,22 @@ module Webpacker
       def execute_cmd
         env = Webpacker::Compiler.env
         env["WEBPACKER_CONFIG"] = @webpacker_config
+        env["WEBPACK_DEV_SERVER"] = "true"
 
         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-webpacker")
           cmd = [ "node", "--inspect-brk"] + cmd
+          @argv.delete "--debug-webpacker"
         end
 
         cmd += ["--config", @webpack_config]
         cmd += ["--progress", "--color"] if @pretty
+        cmd += @argv
 
         Dir.chdir(@app_path) do
           Kernel.exec env, *cmd

data/lib/webpacker/helper.rb

@@ -12,15 +12,9 @@ module Webpacker::Helper
   #
   # Example:
   #
-  #   # When extract_css is false in webpacker.yml and the file is a css:
-  #   <%= asset_pack_path 'calendar.css' %>  # => nil
-  #
-  #   # When extract_css is true in webpacker.yml or the file is not a css:
   #   <%= asset_pack_path 'calendar.css' %> # => "/packs/calendar-1016838bab065ae1e122.css"
   def asset_pack_path(name, **options)
-    if current_webpacker_instance.config.extract_css? || !stylesheet?(name)
-      path_to_asset(current_webpacker_instance.manifest.lookup!(name), options)
-    end
+    path_to_asset(current_webpacker_instance.manifest.lookup!(name), options)
   end
 
   # Computes the absolute path for a given Webpacker asset.
@@ -29,15 +23,24 @@ module Webpacker::Helper
   #
   # Example:
   #
-  #   # When extract_css is false in webpacker.yml and the file is a css:
-  #   <%= asset_pack_url 'calendar.css' %> # => nil
-  #
-  #   # When extract_css is true in webpacker.yml or the file is not a css:
   #   <%= asset_pack_url 'calendar.css' %> # => "http://example.com/packs/calendar-1016838bab065ae1e122.css"
   def asset_pack_url(name, **options)
-    if current_webpacker_instance.config.extract_css? || !stylesheet?(name)
-      url_to_asset(current_webpacker_instance.manifest.lookup!(name), options)
-    end
+    url_to_asset(current_webpacker_instance.manifest.lookup!(name), options)
+  end
+
+  # Computes the relative path for a given Webpacker image with the same automated processing as image_pack_tag.
+  # Returns the relative path using manifest.json and passes it to path_to_asset helper.
+  # This will use path_to_asset internally, so most of their behaviors will be the same.
+  def image_pack_path(name, **options)
+    resolve_path_to_image(name, **options)
+  end
+
+  # Computes the absolute path for a given Webpacker image with the same automated
+  # processing as image_pack_tag. Returns the relative path using manifest.json
+  # and passes it to path_to_asset helper. This will use path_to_asset internally,
+  # so most of their behaviors will be the same.
+  def image_pack_url(name, **options)
+    resolve_path_to_image(name, **options.merge(protocol: :request))
   end
 
   # Creates an image tag that references the named pack file.
@@ -71,7 +74,7 @@ module Webpacker::Helper
 
   # Creates a script tag that references the named pack file, 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. In production mode, the digested reference is automatically looked up.
+  # app/packs/entrypoints/*.js. In production mode, the digested reference is automatically looked up.
   #
   # Example:
   #
@@ -84,7 +87,7 @@ module Webpacker::Helper
   # Creates script tags that reference the js chunks from entrypoints when using split chunks API,
   # 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.
+  # app/packs/entrypoints/*.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:
@@ -126,30 +129,23 @@ module Webpacker::Helper
 
   # Creates a link tag that references the named pack file, 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. In production mode, the digested reference is automatically looked up.
+  # app/packs/entrypoints/*.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.
   # In that setup you need to configure your styles to be inlined in your JavaScript for hot reloading.
   #
   # Examples:
   #
-  #   # When extract_css is false in webpacker.yml:
-  #   <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
-  #   nil
-  #
-  #   # When extract_css is true in webpacker.yml:
   #   <%= stylesheet_pack_tag 'calendar', 'data-turbolinks-track': 'reload' %> # =>
   #   <link rel="stylesheet" media="screen" href="/packs/calendar-1016838bab065ae1e122.css" data-turbolinks-track="reload" />
   def stylesheet_pack_tag(*names, **options)
-    if current_webpacker_instance.config.extract_css?
-      stylesheet_link_tag(*sources_from_manifest_entries(names, type: :stylesheet), **options)
-    end
+    stylesheet_link_tag(*sources_from_manifest_entries(names, type: :stylesheet), **options)
   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 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.
+  # app/packs/entrypoints/*.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/
   #
   # Examples:
@@ -168,16 +164,10 @@ module Webpacker::Helper
   #   <%= 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)
-    end
+    stylesheet_link_tag(*sources_from_manifest_entrypoints(names, type: :stylesheet), **options)
   end
 
   private
-    def stylesheet?(name)
-      File.extname(name) == ".css"
-    end
-
     def sources_from_manifest_entries(names, type:)
       names.map { |name| current_webpacker_instance.manifest.lookup!(name, type: type) }.flatten
     end
@@ -186,10 +176,10 @@ module Webpacker::Helper
       names.map { |name| current_webpacker_instance.manifest.lookup_pack_with_chunks!(name, type: type) }.flatten.uniq
     end
 
-    def resolve_path_to_image(name)
+    def resolve_path_to_image(name, **options)
       path = name.starts_with?("media/images/") ? name : "media/images/#{name}"
-      path_to_asset(current_webpacker_instance.manifest.lookup!(path))
+      path_to_asset(current_webpacker_instance.manifest.lookup!(path), options)
     rescue
-      path_to_asset(current_webpacker_instance.manifest.lookup!(name))
+      path_to_asset(current_webpacker_instance.manifest.lookup!(name), options)
     end
 end

data/lib/webpacker/manifest.rb

@@ -23,7 +23,7 @@ class Webpacker::Manifest
 
     manifest_pack_type = manifest_type(pack_type[:type])
     manifest_pack_name = manifest_name(name, manifest_pack_type)
-    find("entrypoints")[manifest_pack_name][manifest_pack_type]
+    find("entrypoints")[manifest_pack_name]["assets"][manifest_pack_type]
   rescue NoMethodError
     nil
   end

data/lib/webpacker/version.rb

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

data/lib/webpacker/webpack_runner.rb

@@ -15,6 +15,12 @@ module Webpacker
 
       if @argv.include?("--debug-webpacker")
         cmd = [ "node", "--inspect-brk"] + cmd
+        @argv.delete "--debug-webpacker"
+      end
+
+      if @argv.include?("--trace-deprecation")
+        cmd = [ "node", "--trace-deprecation"] + cmd
+        @argv.delete "--trace-deprecation"
       end
 
       cmd += ["--config", @webpack_config] + @argv

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "5.2.1",
+  "version": "6.0.0-beta.4",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [
@@ -8,56 +8,40 @@
     "lib/install/config/webpacker.yml"
   ],
   "engines": {
-    "node": ">=10.17.0",
-    "yarn": ">=1 <2"
+    "node": ">=10.22.1 || ^12 || >=14",
+    "yarn": ">=1 <3"
   },
   "dependencies": {
-    "@babel/core": "^7.11.1",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.10.1",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-destructuring": "^7.10.1",
-    "@babel/plugin-transform-regenerator": "^7.10.1",
-    "@babel/plugin-transform-runtime": "^7.11.0",
-    "@babel/preset-env": "^7.11.0",
-    "@babel/runtime": "^7.11.2",
-    "babel-loader": "^8.1.0",
-    "babel-plugin-dynamic-import-node": "^2.3.3",
-    "babel-plugin-macros": "^2.8.0",
+    "@babel/core": "^7.12.9",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/runtime": "^7.12.5",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-macros": "^3.0.1",
     "case-sensitive-paths-webpack-plugin": "^2.3.0",
-    "compression-webpack-plugin": "^4.0.0",
-    "core-js": "^3.6.5",
-    "css-loader": "^3.5.3",
-    "file-loader": "^6.0.0",
-    "flatted": "^3.0.4",
+    "compression-webpack-plugin": "^7.1.0",
+    "core-js": "^3.8.0",
     "glob": "^7.1.6",
     "js-yaml": "^3.14.0",
-    "mini-css-extract-plugin": "^0.9.0",
-    "node-sass": "^4.14.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "path-complete-extname": "^1.0.0",
     "pnp-webpack-plugin": "^1.6.4",
-    "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.7",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^1.2.1",
-    "terser-webpack-plugin": "^4.0.0",
-    "webpack": "^4.44.1",
-    "webpack-assets-manifest": "^3.1.1",
-    "webpack-cli": "^3.3.12",
-    "webpack-sources": "^1.4.3"
+    "terser-webpack-plugin": "^5.0.3",
+    "webpack": "^5.11.0",
+    "webpack-assets-manifest": "^5.0.0",
+    "webpack-cli": "^4.2.0",
+    "webpack-merge": "^5.7.2",
+    "webpack-sources": "^2.2.0"
   },
   "devDependencies": {
-    "eslint": "^7.6.0",
+    "eslint": "^7.16.0",
     "eslint-config-airbnb": "^18.2.0",
-    "eslint-plugin-import": "^2.22.0",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.20.5",
-    "jest": "^26.2.2"
+    "eslint-plugin-react": "^7.21.4",
+    "jest": "^26.5.3"
   },
   "jest": {
     "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",

data/package/__tests__/config.js

@@ -24,43 +24,11 @@ describe('Config', () => {
   })
 
   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',
-      '.js',
-      '.sass',
-      '.scss',
-      '.css',
-      '.module.sass',
-      '.module.scss',
-      '.module.css',
-      '.png',
-      '.svg',
-      '.gif',
-      '.jpeg',
-      '.jpg',
-      '.elm'
-    ])
-  })
-
-  test('should return static assets extensions as listed in app config', () => {
-    expect(config.static_assets_extensions).toEqual([
-      '.jpg',
-      '.jpeg',
-      '.png',
-      '.gif',
-      '.tiff',
-      '.ico',
-      '.svg',
+    expect(config.additional_paths).toEqual([
+      'app/assets',
+      '/etc/yarn',
+      'some.config.js',
+      'app/elm'
     ])
   })
 })

data/package/__tests__/development.js

@@ -8,22 +8,22 @@ chdirTestApp()
 describe('Development environment', () => {
   afterAll(chdirCwd)
 
-  describe('toWebpackConfig', () => {
+  describe('webpackConfig', () => {
     beforeEach(() => jest.resetModules())
 
     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 { webpackConfig } = require('../index')
 
-      const config = environment.toWebpackConfig()
-      expect(config.output.path).toEqual(resolve('public', 'packs'))
-      expect(config.output.publicPath).toEqual('/packs/')
-      expect(config).toMatchObject({
+      expect(webpackConfig.output.path).toEqual(resolve('public', 'packs'))
+      expect(webpackConfig.output.publicPath).toEqual('/packs/')
+      expect(webpackConfig).toMatchObject({
         devServer: {
           host: 'localhost',
-          port: 3035
+          port: 3035,
+          injectClient: true
         }
       })
     })
@@ -32,12 +32,11 @@ describe('Development environment', () => {
       process.env.RAILS_ENV = 'development'
       process.env.NODE_ENV = 'development'
       process.env.WEBPACK_DEV_SERVER = undefined
-      const { environment } = require('../index')
+      const { webpackConfig } = 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)
+      expect(webpackConfig.output.path).toEqual(resolve('public', 'packs'))
+      expect(webpackConfig.output.publicPath).toEqual('/packs/')
+      expect(webpackConfig.devServer).toEqual(undefined)
     })
   })
 })