webpacker 4.0.0.rc.7 → 4.0.0.rc.8

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e149e93bb4665ea4065b508fa03374660c831a66c7ed1b25796c1a76cf8e8625
-  data.tar.gz: 5aa0549de2a179d32a026622b2df83a4bc1fb99ecef421d89fa2207635fe7f2c
+  metadata.gz: aaad344f0471e623fde0e00f3444f63f08b2347fa50171309dd20d429dc3e680
+  data.tar.gz: 21a1b84e25560f25565ee2670ae0654c74fb8a7ef48ecf953ffb245ceff77b08
 SHA512:
-  metadata.gz: 3ff2f4807b9ec0266de861bc5a58d2a2f9c5bbcfe5380ae3b0fdb11cddbb265c52cebe155cc5e41be467edd39e3f9bf4c8414bafc94255b4990e2528210dd033
-  data.tar.gz: 7b6499cb15ba9f5b98ed4ac65f472817f8d0be7abf3ef5ed12b589f13261fb0395503b125c0fb30f1090b599e92de4590e874fa9dd13983a13b107a1023f471f
+  metadata.gz: 34e2f71eea35056a09af3b285e43747bf273722f5cbabc4b5643bed6d4a53cba0ed9fa25f7397a864325a1147748b1365ddab433b04a16b2289a7ac9b050c50d
+  data.tar.gz: 0ecb39cbc1e5c98d2095c7b4066ef097e4b60f057f065d3f1add3f76a36074d2f40449ecc695dc44c8f9ee71c7b9c2181e27636a4ca35a557d7dec05cb0f1962

data/CHANGELOG.md

@@ -1,5 +1,49 @@
 **Please note that Webpacker 3.1.0 and 3.1.1 have some serious bugs so please consider using either 3.0.2 or 3.2.0**
 
+## [4.0.0.rc.8] - 2019-03-03
+
+### Fixed
+
+- Re-enable source maps in production to make debugging in production
+  easier. Enabling source maps doesn't have drawbacks for most of the
+  applications since maps are compressed by default and aren't loaded
+  by browsers unless Dev Tools are opened.
+
+Source maps can be disabled in any environment configuration, e.g:
+
+```js
+// config/webpack/production.js
+
+const environment = require('./environment')
+environment.config.merge({ devtool: 'none' })
+
+module.exports = environment.toWebpackConfig()
+```
+
+- Reintroduced `context` to the file loader. Reverting the simpler paths change
+
+- Updated file loader to have filename based on the path. This change
+keeps the old behaviour intact i.e. let people use namespaces for media
+inside `app/javascript` and also include media outside of `app/javascript`
+with simpler paths, for example from `node_modules` or `app/assets`
+
+```bash
+# Files inside app/javascript (i.e. packs source path)
+# media/[full_path_relative_to_app_javascript]/name_of_the_asset_with_digest
+media/images/google-97e897b3851e415bec4fd30c265eb3ce.jpg
+media/images/rails-45b116b1f66cc5e6f9724e8f9a2db73d.png
+media/images/some_namespace/google-97e897b3851e415bec4fd30c265eb3ce.jpg
+
+# Files outside app/javascript (i.e. packs source path)
+# media/[containing_folder_name]/name_of_the_asset_with_digest
+media/some_assets/rails_assets-f0f7bbb5.png
+media/webfonts/fa-brands-400-4b115e11.woff2
+```
+
+This change is done so we don't end up paths like `media/_/assets/images/rails_assets-f0f7bbb5ef00110a0dcef7c2cb7d34a6.png` or `media/_/_/node_modules/foo-f0f7bbb5ef00110a0dcef7c2cb7d34a6.png` for media outside of
+`app/javascript`
+
+
 ## [4.0.0.rc.7] - 2019-01-25
 
 ### Fixed
@@ -21,6 +65,19 @@
 "media/avatar.png": "/packs/media/avatar-057862c747f0fdbeae506bdd0516cad1.png"
 ```
 
+To get old behaviour:
+
+```js
+// config/webpack/environment.js
+
+const { environment, config } = require('@rails/webpacker')
+const { join } = require('path')
+
+const fileLoader = environment.loaders.get('file')
+fileLoader.use[0].options.name = '[path][name]-[hash].[ext]'
+fileLoader.use[0].options.context = join(config.source_path) // optional if you don't want to expose full paths
+```
+
 ### Added
 
 - Namespaces for compiled packs in the public directory
@@ -119,7 +176,14 @@ helper otherwise you will get duplicated chunks on the page.
   extract_css: true
   ```
   - Separate rule to compile node modules
-  (fixes cases where ES6 libraries were included in the app code) [#1823](https://github.com/rails/webpacker/pull/1823)
+  (fixes cases where ES6 libraries were included in the app code) [#1823](https://github.com/rails/webpacker/pull/1823).
+
+    In previous versions only application code was transpiled. Now everything in `node_modules` transpiled with Babel. In some cases it could break your build (known issue with `mapbox-gl` package being broken by Babel, https://github.com/mapbox/mapbox-gl-js/issues/3422).
+
+    [`nodeModules` loader](https://github.com/rails/webpacker/pull/1823/files#diff-456094c8451b5774db50028dfecf4aa8) ignores `config.babel.js` and uses hard-coded `'@babel/preset-env', { modules: false }` config.
+
+    To keep previous behavior, remove `nodeModules` loader specifying `environment.loaders.delete('nodeModules');` in your `config/webpack/environment.js` file.
+
   - File loader extensions API [#1823](https://github.com/rails/webpacker/pull/1823)
   ```yml
   # webpacker.yml

data/Gemfile.lock

@@ -1,12 +1,13 @@
 GIT
   remote: https://github.com/rubocop-hq/rubocop.git
-  revision: 19d65afe162a5c095d81fd69982c1308fbbf9b46
+  revision: dc69686abf10d9f38ed3a39037fab76ae8874138
   specs:
-    rubocop (0.63.0)
+    rubocop (0.65.0)
       jaro_winkler (~> 1.5.1)
       parallel (~> 1.10)
       parser (>= 2.5, != 2.5.1.1)
       powerpack (~> 0.1)
+      psych (>= 3.1.0)
       rainbow (>= 2.2.2, < 4.0)
       ruby-progressbar (~> 1.7)
       unicode-display_width (~> 1.4.0)
@@ -14,7 +15,7 @@ GIT
 PATH
   remote: .
   specs:
-    webpacker (4.0.0.rc.7)
+    webpacker (4.0.0.rc.8)
       activesupport (>= 4.2)
       rack-proxy (>= 0.6.1)
       railties (>= 4.2)
@@ -66,13 +67,13 @@ GEM
     arel (9.0.0)
     ast (2.4.0)
     builder (3.2.3)
-    byebug (10.0.2)
+    byebug (11.0.0)
     concurrent-ruby (1.1.4)
     crass (1.0.4)
     erubi (1.8.0)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
-    i18n (1.5.2)
+    i18n (1.5.3)
       concurrent-ruby (~> 1.0)
     jaro_winkler (1.5.2)
     loofah (2.2.3)
@@ -90,10 +91,11 @@ GEM
     nio4r (2.3.1)
     nokogiri (1.10.1)
       mini_portile2 (~> 2.4.0)
-    parallel (1.13.0)
+    parallel (1.14.0)
     parser (2.6.0.0)
       ast (~> 2.4.0)
     powerpack (0.1.2)
+    psych (3.1.0)
     rack (2.0.6)
     rack-proxy (0.6.5)
       rack

data/docs/assets.md

@@ -61,7 +61,7 @@ Specify the plugin in your `babel.config.js` with the custom root or alias. Here
 ```js
 {
   plugins: [
-    [require("module-resolver").default, {
+    [require("babel-plugin-module-resolver").default, {
       "root": ["./app"],
       "alias": {
         "assets": "./assets"

data/docs/v4-upgrade.md

@@ -87,6 +87,21 @@ nodeModulesLoader.exclude.push(/some-library/) // replace `some-library` with
                                                // the actual path to exclude
 ```
 
+### Source Maps are enabled by default
+
+Source maps are now enabled in production to make debugging in production easier. Enabling source maps doesn't have drawbacks for most of the applications since maps are compressed by default and aren't loaded by browsers unless Dev Tools are opened.
+
+If you want to keep the old behavior source maps can be disabled in any environment configuration, e.g:
+
+```js
+// config/webpack/production.js
+
+const environment = require('./environment')
+environment.config.merge({ devtool: 'none' })
+
+module.exports = environment.toWebpackConfig()
+```
+
 ### Example upgrades
 
 This is what an upgrade to Webpacker 4 looked like for existing Rails apps (please contribute yours!):

data/docs/webpack.md

@@ -38,6 +38,7 @@ environment.config.set('output.filename', '[name].js')
 
 // Merge custom config
 environment.config.merge(customConfig)
+environment.config.merge({ devtool: 'none' })
 
 // Delete a property
 environment.config.delete('output.chunkFilename')
@@ -68,10 +69,13 @@ yarn add json-loader
 // config/webpack/environment.js
 const { environment } = require('@rails/webpacker')
 
-environment.loaders.append('json', {
+const jsonLoader = {
   test: /\.json$/,
   use: 'json-loader'
-})
+}
+
+// Insert json loader at the end of list
+environment.loaders.append('json', jsonLoader)
 
 // Insert json loader at the top of list
 environment.loaders.prepend('json', jsonLoader)

data/lib/install/config/.browserslistrc

@@ -1 +1 @@
-> 1%
+defaults

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

@@ -7,4 +7,12 @@
 // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate
 // layout file, like app/views/layouts/application.html.erb
 
+
+// Uncomment to copy all static images under ../images to the output folder and reference
+// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
+// or the `imagePath` JavaScript helper below.
+//
+// const images = require.context('../images', true)
+// const imagePath = (name) => images(name, true)
+
 console.log('Hello World from Webpacker')

data/lib/install/template.rb

@@ -23,14 +23,15 @@ end
 apply "#{__dir__}/binstubs.rb"
 
 if File.exists?(".gitignore")
-  append_to_file ".gitignore", <<-EOS
-/public/packs
-/public/packs-test
-/node_modules
-/yarn-error.log
-yarn-debug.log*
-.yarn-integrity
-EOS
+  append_to_file ".gitignore" do
+    "\n"                   +
+    "/public/packs\n"      +
+    "/public/packs-test\n" +
+    "/node_modules\n"      +
+    "/yarn-error.log\n"    +
+    "yarn-debug.log*\n"    +
+    ".yarn-integrity\n"
+  end
 end
 
 if Webpacker::VERSION == /^[0-9]+\.[0-9]+\.[0-9]+$/

data/lib/tasks/webpacker/compile.rake

@@ -8,9 +8,16 @@ ensure
   Webpacker.logger = old_logger
 end
 
+def yarn_install_available?
+  rails_major = Rails::VERSION::MAJOR
+  rails_minor = Rails::VERSION::MINOR
+
+  rails_major > 5 || (rails_major == 5 && rails_minor >= 1)
+end
+
 def enhance_assets_precompile
-  # For Rails < 5.1
-  deps = Rake::Task.task_defined?("yarn:install") ? [] : ["webpacker:yarn_install"]
+  # 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
   end

data/lib/webpacker/compiler.rb

@@ -90,7 +90,7 @@ class Webpacker::Compiler
     def webpack_env
       return env unless defined?(ActionController::Base)
 
-      env.merge("WEBPACKER_ASSET_HOST"        => ActionController::Base.helpers.compute_asset_host,
-                "WEBPACKER_RELATIVE_URL_ROOT" => ActionController::Base.relative_url_root)
+      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))
     end
 end

data/lib/webpacker/helper.rb

@@ -47,7 +47,7 @@ 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' />
   def image_pack_tag(name, **options)
-    image_tag(asset_path(current_webpacker_instance.manifest.lookup!(name)), **options)
+    image_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
@@ -140,4 +140,11 @@ module Webpacker::Helper
     def sources_from_manifest_entrypoints(names, type:)
       names.map { |name| current_webpacker_instance.manifest.lookup_pack_with_chunks!(name, type: type) }.flatten.uniq
     end
+
+    def resolve_path_to_image(name)
+      path = name.starts_with?("media/images/") ? name : "media/images/#{name}"
+      asset_path(current_webpacker_instance.manifest.lookup!(path))
+    rescue
+      asset_path(current_webpacker_instance.manifest.lookup!(name))
+    end
 end

data/lib/webpacker/version.rb

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

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rails/webpacker",
-  "version": "4.0.0-rc.7",
+  "version": "4.0.0-rc.8",
   "description": "Use webpack to manage app-like JavaScript modules in Rails",
   "main": "package/index.js",
   "files": [
@@ -12,51 +12,51 @@
     "yarn": ">=1.0.0"
   },
   "dependencies": {
-    "@babel/core": "^7.2.2",
-    "@babel/plugin-proposal-class-properties": "^7.2.3",
-    "@babel/plugin-proposal-object-rest-spread": "^7.2.0",
+    "@babel/core": "^7.3.4",
+    "@babel/plugin-proposal-class-properties": "^7.3.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.3.4",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/plugin-transform-destructuring": "^7.2.0",
-    "@babel/plugin-transform-regenerator": "^7.0.0",
-    "@babel/plugin-transform-runtime": "^7.2.0",
+    "@babel/plugin-transform-destructuring": "^7.3.2",
+    "@babel/plugin-transform-regenerator": "^7.3.4",
+    "@babel/plugin-transform-runtime": "^7.3.4",
     "@babel/polyfill": "^7.2.5",
-    "@babel/preset-env": "^7.2.3",
-    "@babel/runtime": "^7.2.0",
+    "@babel/preset-env": "^7.3.4",
+    "@babel/runtime": "^7.3.4",
     "babel-loader": "^8.0.5",
     "babel-plugin-dynamic-import-node": "^2.2.0",
-    "babel-plugin-macros": "^2.4.5",
-    "case-sensitive-paths-webpack-plugin": "^2.1.2",
+    "babel-plugin-macros": "^2.5.0",
+    "case-sensitive-paths-webpack-plugin": "^2.2.0",
     "compression-webpack-plugin": "^2.0.0",
     "css-loader": "^2.1.0",
     "file-loader": "^3.0.1",
     "flatted": "^2.0.0",
     "glob": "^7.1.3",
-    "js-yaml": "^3.12.1",
+    "js-yaml": "^3.12.2",
     "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.11.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "path-complete-extname": "^1.0.0",
-    "pnp-webpack-plugin": "^1.2.1",
+    "pnp-webpack-plugin": "^1.3.1",
     "postcss-flexbugs-fixes": "^4.1.0",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
-    "postcss-preset-env": "^6.5.0",
+    "postcss-preset-env": "^6.6.0",
     "postcss-safe-parser": "^4.0.1",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
-    "terser-webpack-plugin": "^1.2.1",
-    "webpack": "^4.29.0",
+    "terser-webpack-plugin": "^1.2.3",
+    "webpack": "^4.29.6",
     "webpack-assets-manifest": "^3.1.1",
-    "webpack-cli": "^3.2.1",
+    "webpack-cli": "^3.2.3",
     "webpack-sources": "^1.3.0"
   },
   "devDependencies": {
-    "eslint": "^5.12.1",
+    "eslint": "^5.15.0",
     "eslint-config-airbnb": "^17.1.0",
-    "eslint-plugin-import": "^2.14.0",
-    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-import": "^2.16.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-react": "^7.12.4",
-    "jest": "^23.6.0"
+    "jest": "^24.1.0"
   },
   "jest": {
     "testRegex": "(/__tests__/.*|(\\.|/))\\.jsx?$",

data/package/__tests__/config.js

@@ -63,4 +63,16 @@ describe('Config', () => {
       '.jpg'
     ])
   })
+
+  test('should return static assets extensions as listed in app config', () => {
+    expect(config.static_assets_extensions).toEqual([
+      '.jpg',
+      '.jpeg',
+      '.png',
+      '.gif',
+      '.tiff',
+      '.ico',
+      '.svg',
+    ])
+  })
 })

data/package/__tests__/dev_server.js

@@ -22,7 +22,7 @@ describe('DevServer', () => {
 
   test('with custom env prefix', () => {
     const config = require('../config')
-    config.dev_server.env_prefix = 'TEST_WEBPACKER_DEV_SERVER_'
+    config.dev_server.env_prefix = 'TEST_WEBPACKER_DEV_SERVER'
 
     process.env.NODE_ENV = 'development'
     process.env.RAILS_ENV = 'development'

data/package/__tests__/production.js

@@ -21,7 +21,7 @@ describe('Production environment', () => {
       expect(config.output.path).toEqual(resolve('public', 'packs'))
       expect(config.output.publicPath).toEqual('/packs/')
       expect(config).toMatchObject({
-        devtool: 'nosources-source-map',
+        devtool: 'source-map',
         stats: 'normal'
       })
     })

data/package/__tests__/staging.js

@@ -21,7 +21,7 @@ describe('Custom environment', () => {
       expect(config.output.path).toEqual(resolve('public', 'packs-staging'))
       expect(config.output.publicPath).toEqual('/packs-staging/')
       expect(config).toMatchObject({
-        devtool: 'nosources-source-map',
+        devtool: 'source-map',
         stats: 'normal'
       })
     })

data/package/config.js

@@ -17,6 +17,9 @@ const defaults = getDefaultConfig()
 const app = safeLoad(readFileSync(configPath), 'utf8')[railsEnv]
 
 if (isArray(app.extensions) && app.extensions.length) delete defaults.extensions
+if (isArray(app.static_assets_extensions) && app.static_assets_extensions.length) {
+  delete defaults.static_assets_extensions
+}
 
 const config = deepMerge(defaults, app)
 config.outputPath = resolve(config.public_root_path, config.public_output_path)
@@ -37,5 +40,6 @@ const getPublicPath = () => {
 }
 
 config.publicPath = getPublicPath()
+config.publicPathWithoutCDN = `/${config.public_output_path}/`
 
 module.exports = config