webpacker 5.2.1 → 6.0.0.pre.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c8190ac2a707c460f76018576f61a78d1a9f42da441d123619f708a18e3a120b
-  data.tar.gz: 6311e214c6fa99598a2f530b4950c6c3fbf0ed4cc313d99c16bff9515444adc1
+  metadata.gz: c5808c11756423a2f910b9aa3675b5d85c94c5cae43a2db1c5c726588bb70cc7
+  data.tar.gz: f1b92f83b8d9f06a136c2df4116144b5a70bf74c7ab5c426fc90900f18f8de6a
 SHA512:
-  metadata.gz: c9a5a34f8a7fd156f6e31e6102439c19ce5247600901aab060fde1f929da8a4164379a439a8b67275ece33114a09f1fee3bb8401aede13c7369b51b9cd925a61
-  data.tar.gz: e05b9e78d6c2b846b3ce3edd311fcca9b883137490a04be9c5cdce8cc5115efb1c5f9bcf8c1fdf6593417047d4ec9669de49975dc75088e449965577c5cedf4a
+  metadata.gz: c8a10749bc365d1be38d214ab5cedc921ba5dc437193d2f0bf6da18a0e17650a7b35887fd340356de6f5476e388279f58324345685bfe848e2bcb26dfccbaf7a
+  data.tar.gz: 4106137abde49ccda533e7441d0e751f1540a4e175b8f392f486a9eea152083114fabd357db03dd57b9a2a2fe5774563a4cc6f7cf04b78c027b052190bd34d04

data/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: 'airbnb',
+  extends: ['airbnb', 'prettier'],
   rules: {
     'comma-dangle': ['error', 'never'],
     'import/no-unresolved': 'off',

data/.gitignore

@@ -1,5 +1,6 @@
 /.bundle
 /pkg
+/test/mounted_app/test/dummy/log
 /test/test_app/log
 node_modules
 .byebug_history
@@ -9,3 +10,4 @@ yarn-error.log*
 .yarn-integrity
 /log
 gemfiles/*.lock
+.DS_Store

data/.node-version

@@ -1 +1 @@
-10.17.0
+10.22.1

data/.rubocop.yml

@@ -1,23 +1,18 @@
 require: rubocop-performance
 AllCops:
-  TargetRubyVersion: 2.2
+  TargetRubyVersion: 2.4
   # RuboCop has a bunch of cops enabled by default. This setting tells RuboCop
   # to ignore them, so only the ones explicitly set in this file are enabled.
   DisabledByDefault: true
   Exclude:
-    - 'lib/install/templates/**'
-    - 'vendor/**/*'
-    - 'node_modules/**/*'
+    - "lib/install/templates/**"
+    - "vendor/**/*"
+    - "node_modules/**/*"
 
 # Prefer &&/|| over and/or.
 Style/AndOr:
   Enabled: true
 
-# Do not use braces for hash literals when they are the last argument of a
-# method call.
-Style/BracesAroundHashParameters:
-  Enabled: true
-
 # Align `when` with `case`.
 Layout/CaseIndentation:
   Enabled: true
@@ -50,7 +45,11 @@ Style/HashSyntax:
 # extra level of indentation.
 Layout/IndentationConsistency:
   Enabled: true
-  EnforcedStyle: rails
+  EnforcedStyle: indented_internal_methods
+
+# Detect hard tabs, no hard tabs.
+Layout/IndentationStyle:
+  Enabled: true
 
 # Two spaces, no tabs (for indentation).
 Layout/IndentationWidth:
@@ -98,12 +97,8 @@ Style/StringLiterals:
   Enabled: true
   EnforcedStyle: double_quotes
 
-# Detect hard tabs, no hard tabs.
-Layout/Tab:
-  Enabled: true
-
 # Blank lines should not have any spaces.
-Layout/TrailingBlankLines:
+Layout/TrailingEmptyLines:
   Enabled: true
 
 # No trailing whitespace.
@@ -111,7 +106,7 @@ Layout/TrailingWhitespace:
   Enabled: true
 
 # Use quotes for string literals when they are enough.
-Style/UnneededPercentQ:
+Style/RedundantPercentQ:
   Enabled: true
 
 # Align `end` with the matching keyword or starting expression except for

data/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 **Please note that Webpacker 4.1.0 has an installer bug. Please use 4.2.0 or above**
 
+## [[6.0.0]](https://github.com/rails/webpacker/compare/v5.1.1...v6.0.0) - 2020-TBD
+
+- `node_modules` will no longer be compiled by default. This primarily fixes [rails issue #35501](https://github.com/rails/rails/issues/35501) as well as [numerous other webpacker issues](https://github.com/rails/webpacker/issues/2131#issuecomment-581618497). The disabled loader can still be required explicitly via:
+```js
+const nodeModules = require('@rails/webpacker/rules/node_modules.js')
+environment.loaders.append('nodeModules', nodeModules)
+```
+- If you have added `environment.loaders.delete('nodeModules')` to your `environment.js`, this must be removed or you will receive an error (`Item nodeModules not found`).
+- The install task will now set the `extract_css` default to `true` in all environments and generate a separate `application.css` file for the default `application` pack, as supported by multiple files per entry introduced in 5.0.0.  [#2608](https://github.com/rails/webpacker/pull/2608)
+- Webpacker's wrapper to the `splitChunks()` API will now default `runtimeChunk: 'single'` which will help prevent potential issues when using multiple entry points per page [#2708](https://github.com/rails/webpacker/pull/2708).
+- Changes `@babel/preset-env` modules option to `'auto'` per recommendation in the Babel docs [#2709](https://github.com/rails/webpacker/pull/2709)
+- Adds experimental Yarn 2 support. Note you must manually set `nodeLinker: node-modules` in your `.yarnrc.yml`.
+
 ## [[5.2.1]](https://github.com/rails/webpacker/compare/v5.2.0...5.2.1) - 2020-08-17
 
 - Revert [#1311](https://github.com/rails/webpacker/pull/1311).
@@ -333,7 +346,7 @@ const { environment } = require('@rails/webpacker')
 // Enable with default config
 environment.splitChunks()
 // Configure via a callback
-environment.splitChunks((config) =>
+environment.splitChunks(config =>
   Object.assign({}, config, { optimization: { splitChunks: false } })
 )
 ```
@@ -657,9 +670,7 @@ environment.resolvedModules.append('vendor', 'vendor')
 ```js
 // Enable css modules with sass loader
 const sassLoader = environment.loaders.get('sass')
-const cssLoader = sassLoader.use.find(
-  (loader) => loader.loader === 'css-loader'
-)
+const cssLoader = sassLoader.use.find(loader => loader.loader === 'css-loader')
 
 cssLoader.options = Object.assign({}, cssLoader.options, {
   modules: true,

data/CONTRIBUTING.md

@@ -9,7 +9,7 @@ yarn
 ```
 
 ## Making sure your changes pass all tests
-There are a number of automated checks which run on Travis CI when a pull request is created.
+There are a number of automated checks which run on Github Actions when a pull request is created.
 You can run those checks on your own locally to make sure that your changes would not break the CI build.
 
 ### 1. Check the code for JavaScript style violations

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    webpacker (5.2.1)
+    webpacker (6.0.0.pre.1)
       activesupport (>= 5.2)
       rack-proxy (>= 0.6.1)
       railties (>= 5.2)
@@ -75,7 +75,6 @@ GEM
       activesupport (>= 4.2.0)
     i18n (1.8.5)
       concurrent-ruby (~> 1.0)
-    jaro_winkler (1.5.4)
     loofah (2.6.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
@@ -92,7 +91,7 @@ GEM
     nokogiri (1.10.10)
       mini_portile2 (~> 2.4.0)
     parallel (1.19.2)
-    parser (2.7.1.4)
+    parser (2.7.2.0)
       ast (~> 2.4.1)
     rack (2.2.3)
     rack-proxy (0.6.5)
@@ -127,15 +126,22 @@ GEM
       thor (>= 0.20.3, < 2.0)
     rainbow (3.0.0)
     rake (13.0.1)
-    rubocop (0.68.1)
-      jaro_winkler (~> 1.5.1)
+    regexp_parser (1.8.2)
+    rexml (3.2.4)
+    rubocop (0.93.1)
       parallel (~> 1.10)
-      parser (>= 2.5, != 2.5.1.1)
+      parser (>= 2.7.1.5)
       rainbow (>= 2.2.2, < 4.0)
+      regexp_parser (>= 1.8)
+      rexml
+      rubocop-ast (>= 0.6.0)
       ruby-progressbar (~> 1.7)
-      unicode-display_width (>= 1.4.0, < 1.6)
-    rubocop-performance (1.3.0)
-      rubocop (>= 0.68.0)
+      unicode-display_width (>= 1.4.0, < 2.0)
+    rubocop-ast (0.8.0)
+      parser (>= 2.7.1.5)
+    rubocop-performance (1.8.1)
+      rubocop (>= 0.87.0)
+      rubocop-ast (>= 0.4.0)
     ruby-progressbar (1.10.1)
     semantic_range (2.3.0)
     sprockets (4.0.2)
@@ -149,7 +155,7 @@ GEM
     thread_safe (0.3.6)
     tzinfo (1.2.7)
       thread_safe (~> 0.1)
-    unicode-display_width (1.5.0)
+    unicode-display_width (1.7.0)
     websocket-driver (0.7.3)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
@@ -165,7 +171,7 @@ DEPENDENCIES
   rack-proxy
   rails
   rake (>= 11.1)
-  rubocop (< 0.69)
+  rubocop (= 0.93.1)
   rubocop-performance
   semantic_range
   webpacker!

data/README.md

@@ -1,6 +1,10 @@
 # Webpacker
 
-[![Build Status](https://travis-ci.org/rails/webpacker.svg?branch=master)](https://travis-ci.org/rails/webpacker)
+[![Ruby specs](https://github.com/rails/webpacker/workflows/Ruby%20specs/badge.svg)](https://github.com/rails/webpacker/actions)
+[![Jest specs](https://github.com/rails/webpacker/workflows/Jest%20specs/badge.svg)](https://github.com/rails/webpacker/actions)
+[![Rubocop](https://github.com/rails/webpacker/workflows/Rubocop/badge.svg)](https://github.com/rails/webpacker/actions)
+[![JS lint](https://github.com/rails/webpacker/workflows/JS%20lint/badge.svg)](https://github.com/rails/webpacker/actions)
+
 [![node.js](https://img.shields.io/badge/node-%3E%3D%2010.17.0-brightgreen.svg)](https://www.npmjs.com/package/@rails/webpacker)
 [![Gem](https://img.shields.io/gem/v/webpacker.svg)](https://rubygems.org/gems/webpacker)
 
@@ -13,7 +17,7 @@ even JavaScript Sprinkles (that all continues to live in app/assets).
 However, it is possible to use Webpacker for CSS, images and fonts assets as well,
 in which case you may not even need the asset pipeline. This is mostly relevant when exclusively using component-based JavaScript frameworks.
 
-**NOTE:** The master branch now hosts the code for v5.x.x. Please refer to [4-x-stable](https://github.com/rails/webpacker/tree/4-x-stable) branch for 4.x documentation.
+**NOTE:** The master branch now hosts the code for v6.x.x. Please refer to [5-x-stable](https://github.com/rails/webpacker/tree/5-x-stable) branch for 5.x documentation.
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
@@ -52,7 +56,7 @@ in which case you may not even need the asset pipeline. This is mostly relevant
 
 - Ruby 2.4+
 - Rails 5.2+
-- Node.js 10.17.0+
+- Node.js 10.17.0+ || 12+ || 14+
 - Yarn 1.x+
 
 ## Features
@@ -301,7 +305,7 @@ You can run following commands to upgrade Webpacker to the latest stable version
 
 ```bash
 bundle update webpacker
-rails webpacker:binstubs
+rails webpacker:install
 yarn upgrade @rails/webpacker --latest
 yarn upgrade webpack-dev-server --latest
 

data/docs/assets.md

@@ -83,9 +83,10 @@ import 'assets/stylesheets/bar'
 
 ## Link in your Rails views
 
-You can also link `js/images/styles/fonts` used within your js app in views using
-`asset_pack_path` and `image_pack_tag` helpers. These helpers are useful in cases where you just want to
-create a `<link rel="prefetch">` or `<img />` for an asset.
+You can also link `js|images|styles|fonts` used within your js app in rails views
+using `asset_pack_path`, `asset_pack_url`, `image_pack_path`, `image_pack_url` and
+`image_pack_tag` helpers. These helpers are especially useful in cases where you
+want to create a `<link rel="prefetch">` or `<img />` for an asset.
 
 ```yml
 app/javascript:
@@ -108,12 +109,27 @@ require.context('../images', true)
 <img src="<%= asset_pack_path 'media/images/calendar.png' %>" />
 <% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
 
+<img src="<%= asset_pack_url 'media/images/calendar.png' %>" />
+<% # => <img src="https://example.com/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
+
+<img src="<%= image_pack_path 'media/images/calendar.png' %>" />
+<% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
+
+<img src="<%= image_pack_url 'media/images/calendar.png' %>" />
+<% # => <img src="https://example.com/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
+
 <%= image_pack_tag 'media/images/calendar.png' %>
 <% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
 
-<%# no path resolves to default 'images' folder: %>
+<%# no path used in image helpers resolves to default 'images' folder: %>
+<img src="<%= image_pack_path 'calendar.png' %>" />
+<% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
+
+<img src="<%= image_pack_url 'calendar.png' %>" />
+<% # => <img src="https://example.com/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
+
 <%= image_pack_tag 'calendar.png' %>
 <% # => <img src="/packs/media/images/calendar-k344a6d59eef8632c9d1.png" /> %>
 ```
 
-Note you need to add a `media/` prefix (not `/media/`) to any subfolder structure you might have in `app/javascript`. See more examples in the [tests](https://github.com/rails/webpacker/blob/0b86cadb5ed921e2c1538382e72a236ec30a5d97/test/helper_test.rb#L37).
+Note you need to add a `media/` prefix (not `/media/`) to any subfolder structure you might have in `app/javascript`. See more examples in the [tests](/test/helper_test.rb#L37).

data/docs/css.md

@@ -1,6 +1,5 @@
 # CSS, Sass and SCSS
 
-
 Webpacker supports importing CSS, Sass and SCSS files directly into your JavaScript files.
 
 Importing and loading styles is a two step process:
@@ -15,7 +14,6 @@ Importing and loading styles is a two step process:
 
    When you do `<%= stylesheet_pack_tag 'application' %>`, that's a run-time inclusion from Rails, where Rails gets the correct "asset path" to that file from webpack.
 
-
 ## Import global styles into your JS app
 
 ### Importing CSS as a multi-file pack (Webpacker v5)
@@ -60,7 +58,6 @@ Given your application installs an NPM package that provides CSS, such as `flatp
 @import "flatpickr/dist/flatpickr.css"
 ```
 
-
 ### Importing CSS from JS
 
 ```sass
@@ -79,9 +76,9 @@ import React from 'react'
 import helloIcon from '../hello_react/images/icon.png'
 import '../hello_react/styles/hello-react'
 
-const Hello = props => (
-  <div className="hello-react">
-    <img src={helloIcon} alt="hello-icon" />
+const Hello = (props) => (
+  <div className='hello-react'>
+    <img src={helloIcon} alt='hello-icon' />
     <p>Hello {props.name}!</p>
   </div>
 )
@@ -94,7 +91,7 @@ Given your application installs an NPM package that provides CSS, such as `flatp
 ```js
 // app/javascript/packs/application.js
 
-import "flatpickr/dist/flatpickr.css"
+import 'flatpickr/dist/flatpickr.css'
 ```
 
 ## Import scoped styles into your JS app
@@ -117,9 +114,9 @@ import React from 'react'
 import helloIcon from '../hello_react/images/icon.png'
 import styles from '../hello_react/styles/hello-react'
 
-const Hello = props => (
+const Hello = (props) => (
   <div className={styles.helloReact}>
-    <img src={helloIcon} alt="hello-icon" />
+    <img src={helloIcon} alt='hello-icon' />
     <p>Hello {props.name}!</p>
   </div>
 )
@@ -142,7 +139,7 @@ Using CSS modules with a TypeScript application requires a few differences from
 There must also be a type definition file for these styles:
 
 ```typescript
-export const helloReact: string;
+export const helloReact: string
 ```
 
 You can then import the styles like this:
@@ -155,9 +152,9 @@ import React from 'react'
 import helloIcon from '../hello_react/images/icon.png'
 import * as styles from '../hello_react/styles/hello-react.module.sass'
 
-const Hello = props => (
+const Hello = (props) => (
   <div className={styles.helloReact}>
-    <img src={helloIcon} alt="hello-icon" />
+    <img src={helloIcon} alt='hello-icon' />
     <p>Hello {props.name}!</p>
   </div>
 )
@@ -180,7 +177,6 @@ Then by adding these lines to your `package.json`:
 
 You can generate the typings for the stylesheet by running the command `yarn gen-typings` when you've finished writing CSS, or run `yarn watch-typings` to have it automatically generate them as you go.
 
-
 ## Link styles from your Rails views
 
 Under the hood webpack uses
@@ -192,8 +188,6 @@ a separate `[pack_name].css` bundle so that in your view you can use the
 <%= stylesheet_pack_tag 'hello_react' %>
 ```
 
-Webpacker emits css files only if `extract_css` is set to true in webpacker.yml otherwise `stylesheet_pack_tag` returns nil.
-
 ## Add bootstrap
 
 You can use Yarn to add bootstrap or any other modules available on npm:
@@ -218,7 +212,6 @@ Or in your app/javascript/packs/application.sass file:
 @import '~bootstrap/dist/css/bootstrap-theme'
 ```
 
-
 ## Post-Processing CSS
 
 Webpacker out-of-the-box provides CSS post-processing using
@@ -244,8 +237,8 @@ module.exports = {
 ## Using CSS with [vue-loader](https://github.com/vuejs/vue-loader)
 
 Vue templates require loading the stylesheet in your application in
-order for CSS to work.  This is in addition to loading the JavaScript
-file for the entry point.  Loading the stylesheet will also load the
+order for CSS to work. This is in addition to loading the JavaScript
+file for the entry point. Loading the stylesheet will also load the
 CSS for any nested components.
 
 ```erb
@@ -257,7 +250,6 @@ CSS for any nested components.
 
 Since `Sass/libsass` does not provide url rewriting, all linked assets must be relative to the output. Add the missing url rewriting using the resolve-url-loader. Place it directly after the sass-loader in the loader chain.
 
-
 ```bash
 yarn add resolve-url-loader
 ```
@@ -269,7 +261,7 @@ const { environment } = require('@rails/webpacker')
 // resolve-url-loader must be used before sass-loader
 environment.loaders.get('sass').use.splice(-1, 0, {
   loader: 'resolve-url-loader'
-});
+})
 
 module.exports = environment
 ```
@@ -280,13 +272,14 @@ In order to get CSS to work with typescript you have two options.
 You can either use `require` to bypass typescript special `import`.
 
 ```ts
-const styles = require('../hello_react/styles/hello-react');
+const styles = require('../hello_react/styles/hello-react')
 ```
+
 You may also use the package [typings-for-css-modules-loader](https://github.com/Jimdo/typings-for-css-modules-loader) instead of `css-loader` to automatically generate typescript `.d.ts` files in order to help resolve any css/scss styles. To do that:
 
 ```js
 // app/javascript/packs/hello_react.jsx
-import * as styles from '../hello_react.styles/hello-react.module.scss';
+import * as styles from '../hello_react.styles/hello-react.module.scss'
 ```
 
 ```bash
@@ -298,11 +291,13 @@ yarn add --dev typings-for-css-modules-loader
 const { environment } = require('@rails/webpacker')
 
 // replace css-loader with typings-for-css-modules-loader
-environment.loaders.get('moduleSass').use = environment.loaders.get('moduleSass').use.map((u) => {
-  if(u.loader == 'css-loader') {
-    return { ...u, loader: 'typings-for-css-modules-loader' };
-  } else {
-    return u;
-  }
-});
+environment.loaders.get('moduleSass').use = environment.loaders
+  .get('moduleSass')
+  .use.map((u) => {
+    if (u.loader == 'css-loader') {
+      return { ...u, loader: 'typings-for-css-modules-loader' }
+    } else {
+      return u
+    }
+  })
 ```