webpacker 4.0.3 → 4.1.0

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/railtie.rb

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

data/lib/webpacker/version.rb

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

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "4.0.3",
+  "version": "4.1.0",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [
@@ -8,57 +8,56 @@
     "lib/install/config/webpacker.yml"
   ],
   "engines": {
-    "node": ">=6.14.4",
+    "node": ">=8.16.0",
     "yarn": ">=1.0.0"
   },
   "dependencies": {
-    "@babel/core": "^7.4.5",
-    "@babel/plugin-proposal-class-properties": "^7.4.4",
-    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
+    "@babel/core": "^7.7.2",
+    "@babel/plugin-proposal-class-properties": "^7.7.0",
+    "@babel/plugin-proposal-object-rest-spread": "^7.6.2",
     "@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/runtime-corejs3": "^7.4.5",
+    "@babel/plugin-transform-destructuring": "^7.6.0",
+    "@babel/plugin-transform-regenerator": "^7.7.0",
+    "@babel/plugin-transform-runtime": "^7.6.2",
+    "@babel/preset-env": "^7.7.1",
+    "@babel/runtime": "^7.7.2",
     "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.6.1",
     "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.0",
+    "core-js": "^3.4.0",
+    "css-loader": "^3.2.0",
+    "file-loader": "^4.2.0",
+    "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.8.0",
+    "node-sass": "^4.13.0",
+    "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.0.0",
+    "terser-webpack-plugin": "^2.2.1",
+    "webpack": "^4.41.2",
     "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.6.0",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.16.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/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
 }
 
@@ -74,7 +74,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

data/package/environments/development.js

@@ -40,7 +40,7 @@ module.exports = class extends Base {
         overlay: devServer.overlay,
         stats: {
           entrypoints: false,
-          errorDetails: false,
+          errorDetails: true,
           modules: false,
           moduleTrace: false
         },

data/package/environments/production.js

@@ -18,6 +18,18 @@ module.exports = class extends Base {
       })
     )
 
+    if ('brotli' in process.versions) {
+      this.plugins.append(
+        'Compression Brotli',
+        new CompressionPlugin({
+          filename: '[path].br[query]',
+          algorithm: 'brotliCompress',
+          cache: true,
+          test: /\.(js|css|html|json|ico|svg|eot|otf|ttf|map)$/
+        })
+      )
+    }
+
     this.plugins.append(
       'OptimizeCSSAssets',
       new OptimizeCSSAssetsPlugin({

data/package/rules/babel.js

@@ -6,7 +6,7 @@ const { nodeEnv } = require('../env')
 // Uses application .babelrc to apply any transformations
 module.exports = {
   test: /\.(js|jsx|mjs)?(\.erb)?$/,
-  include: [sourcePath, ...resolvedPaths].map(p => resolve(p)),
+  include: [sourcePath, ...resolvedPaths].map((p) => resolve(p)),
   exclude: /node_modules/,
   use: [
     {

data/package/rules/node_modules.js

@@ -3,10 +3,11 @@ const { cache_path: cachePath } = require('../config')
 const { nodeEnv } = require('../env')
 
 // Compile standard ES features for JS in node_modules with Babel.
+//   Regex details for exclude: https://regex101.com/r/SKPnnv/1
 module.exports = {
   test: /\.(js|mjs)$/,
   include: /node_modules/,
-  exclude: /@babel(?:\/|\\{1,2})runtime|core-js/,
+  exclude: /(?:@?babel(?:\/|\\{1,2}|-).+)|regenerator-runtime|core-js|^webpack$|^webpack-assets-manifest$|^webpack-cli$|^webpack-sources$|^@rails\/webpacker$/,
   use: [
     {
       loader: 'babel-loader',

data/package/rules/sass.js

@@ -1,6 +1,6 @@
 const getStyleRule = require('../utils/get_style_rule')
 
-module.exports = getStyleRule(/\.(scss|sass)$/i, false, [
+module.exports = getStyleRule(/\.(scss|sass)(\.erb)?$/i, false, [
   {
     loader: 'sass-loader',
     options: { sourceMap: true }

data/package/utils/__tests__/get_style_rule.js

@@ -44,6 +44,15 @@ describe('getStyleRule', () => {
     expect(cssRule.use).toMatchObject(expect.arrayContaining(expectation))
   })
 
+  test('adds style-loader when extract_css is true', () => {
+    const expectation = [{loader: 'style-loader'}]
+
+    require('../../config').extract_css = false
+    const cssRule = getStyleRule(/\.(css)$/i)
+
+    expect(cssRule.use).toMatchObject(expect.objectContaining(expectation))
+  })
+
   test(`doesn't add mini-css-extract-plugin when extract_css is false`, () => {
     const MiniCssExtractPlugin = require('mini-css-extract-plugin')
     const expectation = [MiniCssExtractPlugin.loader]

data/package/utils/deep_merge.js

@@ -10,11 +10,11 @@ const deepMerge = (target, source) => {
   if (!(isObject(target) && isObject(source))) return source
 
   return [...Object.keys(target), ...Object.keys(source)].reduce(
-    (result, key) => (Object.assign(
-      {},
-      result,
-      { [key]: deepMerge(target[key], source[key]) }
-    )),
+    (result, key) => ({
+
+      ...result,
+      [key]: deepMerge(target[key], source[key])
+    }),
     {}
   )
 }

data/package/utils/get_style_rule.js

@@ -1,17 +1,9 @@
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const { resolve } = require('path')
-const devServer = require('../dev_server')
 const config = require('../config')
 
-const inDevServer = process.argv.find(v => v.includes('webpack-dev-server'))
-const isHMR = inDevServer && (devServer && devServer.hmr)
-
 const styleLoader = {
-  loader: 'style-loader',
-  options: {
-    hmr: isHMR,
-    sourceMap: true
-  }
+  loader: 'style-loader'
 }
 
 const getStyleRule = (test, modules = false, preprocessors = []) => {
@@ -21,8 +13,9 @@ const getStyleRule = (test, modules = false, preprocessors = []) => {
       options: {
         sourceMap: true,
         importLoaders: 2,
-        localIdentName: '[name]__[local]___[hash:base64:5]',
-        modules
+        modules: modules ? {
+          localIdentName: '[name]__[local]___[hash:base64:5]'
+        } : false
       }
     },
     {
@@ -44,7 +37,9 @@ const getStyleRule = (test, modules = false, preprocessors = []) => {
   }
 
   // sideEffects - See https://github.com/webpack/webpack/issues/6571
-  return Object.assign({}, { test, use, sideEffects: !modules }, options)
+  return {
+    test, use, sideEffects: !modules, ...options
+  }
 }
 
 module.exports = getStyleRule