webpacker 4.0.7 → 5.0.0

data/lib/webpacker/dev_server_proxy.rb

@@ -5,16 +5,10 @@ class Webpacker::DevServerProxy < Rack::Proxy
 
   def initialize(app = nil, opts = {})
     @webpacker = opts.delete(:webpacker) || Webpacker.instance
+    opts[:streaming] = false if Rails.env.test? && !opts.key?(:streaming)
     super
   end
 
-  def rewrite_response(response)
-    _status, headers, _body = response
-    headers.delete "transfer-encoding"
-    headers.delete "content-length" if dev_server.running? && dev_server.https?
-    response
-  end
-
   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
@@ -32,6 +26,6 @@ class Webpacker::DevServerProxy < Rack::Proxy
 
   private
     def public_output_uri_path
-      config.public_output_path.relative_path_from(config.public_path)
+      config.public_output_path.relative_path_from(config.public_path).to_s + "/"
     end
 end

data/lib/webpacker/dev_server_runner.rb

@@ -16,20 +16,20 @@ module Webpacker
       def load_config
         app_root = Pathname.new(@app_path)
 
-        config = Configuration.new(
+        @config = Configuration.new(
           root_path: app_root,
           config_path: app_root.join("config/webpacker.yml"),
           env: ENV["RAILS_ENV"]
         )
 
-        dev_server = DevServer.new(config)
+        dev_server = DevServer.new(@config)
 
         @hostname          = dev_server.host
         @port              = dev_server.port
         @pretty            = dev_server.pretty?
 
       rescue Errno::ENOENT, NoMethodError
-        $stdout.puts "webpack dev_server configuration not found in #{config.config_path}[#{ENV["RAILS_ENV"]}]."
+        $stdout.puts "webpack dev_server configuration not found in #{@config.config_path}[#{ENV["RAILS_ENV"]}]."
         $stdout.puts "Please run bundle exec rails webpacker:install to install Webpacker"
         exit!
       end
@@ -39,7 +39,7 @@ module Webpacker
         server.close
 
       rescue Errno::EADDRINUSE
-        $stdout.puts "Another program is running on port #{@port}. Set a new port in #{@config_file} for dev_server"
+        $stdout.puts "Another program is running on port #{@port}. Set a new port in #{@config.config_path} for dev_server"
         exit!
       end
 

data/lib/webpacker/env.rb

@@ -12,7 +12,7 @@ class Webpacker::Env
   end
 
   def inquire
-    fallback_env_warning unless current
+    fallback_env_warning if config_path.exist? && !current
     current || DEFAULT.inquiry
   end
 

data/lib/webpacker/helper.rb

@@ -1,13 +1,13 @@
 module Webpacker::Helper
-  # Returns current Webpacker instance.
+  # Returns the current Webpacker instance.
   # Could be overridden to use multiple Webpacker
-  # configurations within the same app (e.g. with engines)
+  # configurations within the same app (e.g. with engines).
   def current_webpacker_instance
     Webpacker.instance
   end
 
   # Computes the relative path for a given Webpacker asset.
-  # Return relative path using manifest.json and passes it to asset_path helper.
+  # Returns the relative path using manifest.json and passes it to asset_path helper.
   # This will use asset_path internally, so most of their behaviors will be the same.
   #
   # Example:
@@ -19,12 +19,12 @@ module Webpacker::Helper
   #   <%= asset_pack_path 'calendar.css' %> # => "/packs/calendar-1016838bab065ae1e122.css"
   def asset_pack_path(name, **options)
     if current_webpacker_instance.config.extract_css? || !stylesheet?(name)
-      asset_path(current_webpacker_instance.manifest.lookup!(name), **options)
+      asset_path(current_webpacker_instance.manifest.lookup!(name), options)
     end
   end
 
   # Computes the absolute path for a given Webpacker asset.
-  # Return absolute path using manifest.json and passes it to asset_url helper.
+  # Returns the absolute path using manifest.json and passes it to asset_url helper.
   # This will use asset_url internally, so most of their behaviors will be the same.
   #
   # Example:
@@ -36,18 +36,28 @@ module Webpacker::Helper
   #   <%= 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)
-      asset_url(current_webpacker_instance.manifest.lookup!(name), **options)
+      asset_url(current_webpacker_instance.manifest.lookup!(name), options)
     end
   end
 
-  # Creates a image tag that references the named pack file.
+  # Creates an image tag that references the named pack file.
   #
   # Example:
   #
   #  <%= image_pack_tag 'application.png', size: '16x10', alt: 'Edit Entry' %>
   #  <img alt='Edit Entry' src='/packs/application-k344a6d59eef8632c9d1.png' width='16' height='10' />
   def image_pack_tag(name, **options)
-    image_tag(resolve_path_to_image(name), **options)
+    image_tag(resolve_path_to_image(name), options)
+  end
+
+  # Creates a link tag for a favicon that references the named pack file.
+  #
+  # Example:
+  #
+  #  <%= favicon_pack_tag 'mb-icon.png', rel: 'apple-touch-icon', type: 'image/png' %>
+  #  <link href="/packs/mb-icon-k344a6d59eef8632c9d1.png" rel="apple-touch-icon" type="image/png" />
+  def favicon_pack_tag(name, **options)
+    favicon_link_tag(resolve_path_to_image(name), options)
   end
 
   # Creates a script tag that references the named pack file, as compiled by webpack per the entries list
@@ -62,7 +72,7 @@ module Webpacker::Helper
     javascript_include_tag(*sources_from_manifest_entries(names, type: :javascript), **options)
   end
 
-  # Creates script tags that references the js chunks from entrypoints when using split chunks API,
+  # 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.
   # 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.
@@ -78,12 +88,27 @@ module Webpacker::Helper
   # DO:
   # <%= javascript_packs_with_chunks_tag 'calendar', 'map' %>
   # DON'T:
-  # <%= javascript_packs_with_chunks_tag 'calendar' %>
+  # <%= 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
 
+  # 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' %> # =>
+  #   <link rel="preload" href="/packs/fonts/fa-regular-400-944fb546bd7018b07190a32244f67dc9.woff2" as="font" type="font/woff2" crossorigin="anonymous">
+  def preload_pack_asset(name, **options)
+    if self.class.method_defined?(:preload_link_tag)
+      preload_link_tag(current_webpacker_instance.manifest.lookup!(name), options)
+    else
+      raise "You need Rails >= 5.2 to use this tag."
+    end
+  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
   # app/javascript/packs/*.js. In production mode, the digested reference is automatically looked up.
@@ -106,12 +131,13 @@ module Webpacker::Helper
     end
   end
 
-  # Creates link tags that references the css chunks from entrypoints when using split chunks API,
+  # 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.
   # 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:
+  #
+  # Examples:
   #
   #   <%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %> # =>
   #   <link rel="stylesheet" media="screen" href="/packs/3-8c7ce31a.chunk.css" />
@@ -120,7 +146,7 @@ module Webpacker::Helper
   # DO:
   # <%= stylesheet_packs_with_chunks_tag 'calendar', 'map' %>
   # DON'T:
-  # <%= stylesheet_packs_with_chunks_tag 'calendar' %>
+  # <%= 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?

data/lib/webpacker/manifest.rb

@@ -29,7 +29,7 @@ class Webpacker::Manifest
   end
 
   def lookup_pack_with_chunks!(name, pack_type = {})
-    lookup_pack_with_chunks(name, pack_type) || handle_missing_entry(name)
+    lookup_pack_with_chunks(name, pack_type) || handle_missing_entry(name, pack_type)
   end
 
   # Computes the relative path for a given Webpacker asset using manifest.json.
@@ -46,7 +46,7 @@ class Webpacker::Manifest
 
   # Like lookup, except that if no asset is found, raises a Webpacker::Manifest::MissingEntryError.
   def lookup!(name, pack_type = {})
-    lookup(name, pack_type) || handle_missing_entry(name)
+    lookup(name, pack_type) || handle_missing_entry(name, pack_type)
   end
 
   private
@@ -75,8 +75,8 @@ class Webpacker::Manifest
       "#{name}.#{manifest_type(pack_type)}"
     end
 
-    def handle_missing_entry(name)
-      raise Webpacker::Manifest::MissingEntryError, missing_file_from_manifest_error(name)
+    def handle_missing_entry(name, pack_type)
+      raise Webpacker::Manifest::MissingEntryError, missing_file_from_manifest_error(full_pack_name(name, pack_type[:type]))
     end
 
     def load

data/lib/webpacker/railtie.rb

@@ -89,4 +89,10 @@ class Webpacker::Engine < ::Rails::Engine
       end
     end
   end
+
+  initializer "webpacker.set_source" do |app|
+    if Webpacker.config.config_path.exist?
+      app.config.javascript_path = Webpacker.config.source_path.relative_path_from(Rails.root.join("app")).to_s
+    end
+  end
 end

data/lib/webpacker/version.rb

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

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "4.0.7",
+  "version": "5.0.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": ">=6.14.4",
-    "yarn": ">=1.0.0"
+    "node": ">=10.13.0",
+    "yarn": ">=1 <2"
   },
   "dependencies": {
-    "@babel/core": "^7.4.5",
-    "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-destructuring": "^7.4.4",
-    "@babel/plugin-transform-regenerator": "^7.4.5",
-    "@babel/plugin-transform-runtime": "^7.4.4",
-    "@babel/preset-env": "^7.4.5",
-    "@babel/runtime": "^7.4.5",
+    "@babel/core": "^7.8.7",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
+    "@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.8.3",
+    "@babel/preset-env": "^7.8.7",
+    "@babel/runtime": "^7.8.7",
     "babel-loader": "^8.0.6",
-    "babel-plugin-dynamic-import-node": "^2.2.0",
-    "babel-plugin-macros": "^2.5.0",
+    "babel-plugin-dynamic-import-node": "^2.3.0",
+    "babel-plugin-macros": "^2.8.0",
     "case-sensitive-paths-webpack-plugin": "^2.2.0",
-    "compression-webpack-plugin": "^2.0.0",
-    "core-js": "^3.1.3",
-    "css-loader": "^2.1.1",
-    "file-loader": "^3.0.1",
-    "flatted": "^2.0.0",
-    "glob": "^7.1.4",
+    "compression-webpack-plugin": "^3.0.1",
+    "core-js": "^3.6.4",
+    "css-loader": "^3.4.1",
+    "file-loader": "^5.0.2",
+    "flatted": "^2.0.1",
+    "glob": "^7.1.6",
     "js-yaml": "^3.13.1",
-    "mini-css-extract-plugin": "^0.7.0",
-    "node-sass": "^4.12.0",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.13.1",
+    "optimize-css-assets-webpack-plugin": "^5.0.3",
     "path-complete-extname": "^1.0.0",
-    "pnp-webpack-plugin": "^1.4.3",
+    "pnp-webpack-plugin": "^1.5.0",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.6.0",
+    "postcss-preset-env": "^6.7.0",
     "postcss-safe-parser": "^4.0.1",
-    "regenerator-runtime": "^0.13.2",
-    "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.1",
-    "terser-webpack-plugin": "^1.3.0",
-    "webpack": "^4.32.2",
+    "regenerator-runtime": "^0.13.3",
+    "sass-loader": "^7.3.1",
+    "style-loader": "^1.1.2",
+    "terser-webpack-plugin": "^2.3.5",
+    "webpack": "^4.42.0",
     "webpack-assets-manifest": "^3.1.1",
-    "webpack-cli": "^3.3.2",
-    "webpack-sources": "^1.3.0"
+    "webpack-cli": "^3.3.10",
+    "webpack-sources": "^1.4.3"
   },
   "devDependencies": {
-    "eslint": "^5.16.0",
-    "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.17.3",
-    "eslint-plugin-jsx-a11y": "^6.2.1",
-    "eslint-plugin-react": "^7.13.0",
-    "jest": "^24.8.0"
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-plugin-import": "^2.19.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.17.0",
+    "jest": "^24.9.0"
   },
   "jest": {
     "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",

data/package/__tests__/config.js

@@ -16,29 +16,6 @@ describe('Config', () => {
     expect(config.publicPath).toEqual('/packs/')
   })
 
-  // also tests removal of extra slashes
-  test('public path with relative root', () => {
-    process.env.RAILS_ENV = 'development'
-    process.env.RAILS_RELATIVE_URL_ROOT = '/foo'
-    const config = require('../config')
-    expect(config.publicPath).toEqual('/foo/packs/')
-  })
-
-  test('public path with relative root without slash', () => {
-    process.env.RAILS_ENV = 'development'
-    process.env.RAILS_RELATIVE_URL_ROOT = 'foo'
-    const config = require('../config')
-    expect(config.publicPath).toEqual('/foo/packs/')
-  })
-
-  test('public path with asset host and relative root', () => {
-    process.env.RAILS_ENV = 'development'
-    process.env.RAILS_RELATIVE_URL_ROOT = '/foo/'
-    process.env.WEBPACKER_ASSET_HOST = 'http://foo.com/'
-    const config = require('../config')
-    expect(config.publicPath).toEqual('http://foo.com/foo/packs/')
-  })
-
   test('public path with asset host', () => {
     process.env.RAILS_ENV = 'development'
     process.env.WEBPACKER_ASSET_HOST = 'http://foo.com/'

data/package/config.js

@@ -27,16 +27,8 @@ config.outputPath = resolve(config.public_root_path, config.public_output_path)
 // 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 = () => {
-  const rootUrl = process.env.WEBPACKER_ASSET_HOST || '/'
-  let packPath = `${config.public_output_path}/`
-  // Add relative root prefix to pack path.
-  if (process.env.RAILS_RELATIVE_URL_ROOT) {
-    let relativeRoot = process.env.RAILS_RELATIVE_URL_ROOT
-    relativeRoot = relativeRoot.startsWith('/') ? relativeRoot.substr(1) : relativeRoot
-    packPath = `${ensureTrailingSlash(relativeRoot)}${packPath}`
-  }
-
-  return ensureTrailingSlash(rootUrl) + packPath
+  const rootUrl = ensureTrailingSlash(process.env.WEBPACKER_ASSET_HOST || '/')
+  return `${rootUrl}${config.public_output_path}/`
 }
 
 config.publicPath = getPublicPath()

data/package/config_types/config_list.js

@@ -38,7 +38,7 @@ class ConfigList extends Array {
   }
 
   getIndex(key, shouldThrow = false) {
-    const index = this.findIndex(entry => (
+    const index = this.findIndex((entry) => (
       entry === key
         || entry.key === key
         || (entry.constructor && entry.constructor.name === key)
@@ -64,11 +64,11 @@ class ConfigList extends Array {
   }
 
   values() {
-    return this.map(item => item.value)
+    return this.map((item) => item.value)
   }
 
   keys() {
-    return this.map(item => item.key)
+    return this.map((item) => item.key)
   }
 }
 

data/package/config_types/config_object.js

@@ -42,7 +42,7 @@ class ConfigObject extends Object {
   toObject() {
     const object = {}
     /* eslint no-return-assign: 0 */
-    Object.keys(this).forEach(key => (object[key] = this[key]))
+    Object.keys(this).forEach((key) => (object[key] = this[key]))
     return object
   }
 

data/package/environments/__tests__/base.js

@@ -29,6 +29,16 @@ describe('Environment', () => {
       )
     })
 
+    test('should return multi file entry points', () => {
+      const config = environment.toWebpackConfig()
+      expect(config.entry.multi_entry.sort()).toEqual(
+          [
+            resolve('app', 'javascript', 'packs', 'multi_entry.css'),
+            resolve('app', 'javascript', 'packs', 'multi_entry.js')
+          ]
+      )
+    })
+
     test('should return output', () => {
       const config = environment.toWebpackConfig()
       expect(config.output.filename).toEqual('js/[name]-[contenthash].js')

data/package/environments/base.js

@@ -22,7 +22,7 @@ const config = require('../config')
 
 const getLoaderList = () => {
   const result = new ConfigList()
-  Object.keys(rules).forEach(key => result.append(key, rules[key]))
+  Object.keys(rules).forEach((key) => result.append(key, rules[key]))
   return result
 }
 
@@ -65,7 +65,18 @@ const getEntryObject = () => {
   paths.forEach((path) => {
     const namespace = relative(join(rootPath), dirname(path))
     const name = join(namespace, basename(path, extname(path)))
-    result.set(name, resolve(path))
+    let assetPaths = resolve(path)
+
+    // Allows for multiple filetypes per entry (https://webpack.js.org/guides/entry-advanced/)
+    // Transforms the config object value to an array with all values under the same name
+    let previousPaths = result.get(name)
+    if (previousPaths) {
+      previousPaths = Array.isArray(previousPaths) ? previousPaths : [previousPaths]
+      previousPaths.push(assetPaths)
+      assetPaths = previousPaths
+    }
+
+    result.set(name, assetPaths)
   })
   return result
 }
@@ -74,7 +85,7 @@ const getModulePaths = () => {
   const result = new ConfigList()
   result.append('source', resolve(config.source_path))
   if (config.resolved_paths) {
-    config.resolved_paths.forEach(path => result.append(path, resolve(path)))
+    config.resolved_paths.forEach((path) => result.append(path, resolve(path)))
   }
   result.append('node_modules', 'node_modules')
   return result