Merge branch 'rails:master' into patch-15

Author: justin808

.github/workflows/jest.yml

@@ -13,10 +13,15 @@ jobs:
     runs-on: ${{ matrix.os }}
 
     steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
       - name: Install yarn maybe
-        run: which yarn || sudo npm install -g yarn
+        run: which yarn || npm install -g yarn
 
-      - uses: actions/checkout@v2
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
@@ -29,11 +34,6 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-${{ matrix.node }}-yarn-
 
-      - name: Use Node.js ${{ matrix.node }}
-        uses: actions/setup-node@v1
-        with:
-          node-version: ${{ matrix.node }}
-
       - name: Install dependencies
         run: yarn --frozen-lockfile
 

.github/workflows/js-lint.yml

@@ -9,13 +9,18 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-latest]
-        node: [14.x]
+        node: [14]
 
     runs-on: ${{ matrix.os }}
 
     steps:
+      - name: Use Node.js ${{ matrix.node }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node }}
+
       - name: Install yarn maybe
-        run: which yarn || sudo npm install -g yarn
+        run: which yarn || npm install -g yarn
 
       - uses: actions/checkout@v2
       - name: Get yarn cache directory path
@@ -30,11 +35,6 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-yarn-
 
-      - name: Use Node.js ${{ matrix.node }}
-        uses: actions/setup-node@v1
-        with:
-          node-version: ${{ matrix.node }}
-
       - name: Install dependencies
         run: yarn --frozen-lockfile
 

.github/workflows/ruby.yml

@@ -7,67 +7,42 @@ jobs:
     name: Ruby specs
     runs-on: ${{ matrix.os }}
     continue-on-error: ${{ endsWith(matrix.ruby, 'head') || matrix.ruby == 'debug' || matrix.experimental }}
-    env:
-      BUNDLE_JOBS: 4
-      BUNDLE_RETRY: 3
     strategy:
       fail-fast: false
       matrix:
         os: [ubuntu-latest]
-        ruby: [
-          2.4,
-          2.5,
-          2.6,
-          2.7,
-          3.0
-        ]
-        gemfile: [
-          "gemfiles/Gemfile-rails.5.2.x",
-          "gemfiles/Gemfile-rails.6.0.x",
-          "gemfiles/Gemfile-rails.6.1.x"
-        ]
+        ruby:
+          - 2.7
+          - "3.0"
+        gemfile:
+          - gemfiles/Gemfile-rails.5.2.x
+          - gemfiles/Gemfile-rails.6.0.x
+          - gemfiles/Gemfile-rails.6.1.x
         exclude:
-          - ruby: 2.4
-            gemfile: gemfiles/Gemfile-rails.6.0.x
-          - ruby: 2.4
-            gemfile: gemfiles/Gemfile-rails.6.1.x
           - ruby: 2.5
             gemfile: gemfiles/Gemfile-rails.6.1.x
-          - ruby: 3.0
+          - ruby: "3.0"
             gemfile: gemfiles/Gemfile-rails.5.2.x
         experimental: [false]
         include:
           - ruby: 2.7
             os: ubuntu-latest
             gemfile: gemfiles/Gemfile-rails-edge
             experimental: true
-          - ruby: 3.0
+          - ruby: "3.0"
             os: ubuntu-latest
             gemfile: gemfiles/Gemfile-rails-edge
             experimental: true
 
+    env:
+      BUNDLE_GEMFILE: ${{ matrix.gemfile }}
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/cache@v2
-        with:
-          path: /home/runner/bundle
-          key: bundle-use-ruby-${{ matrix.ruby }}-${{ matrix.gemfile }}-gems-${{ hashFiles(matrix.gemfile) }}-${{ hashFiles('**/*.gemspec') }}
-          restore-keys: |
-            bundle-use-ruby-${{ matrix.ruby }}-${{ matrix.gemfile }}-gems-
-
-      - name: Install yarn maybe
-        run: which yarn || sudo npm install -g yarn
 
       - uses: ruby/setup-ruby@v1
         with:
           ruby-version: ${{ matrix.ruby }}
-
-      - name: Bundle install
-        run: |
-          gem install bundler -v 2.1.4
-          bundle config path /home/runner/bundle
-          bundle config --global gemfile ${{ matrix.gemfile }}
-          bundle install --jobs 4 --retry 3
+          bundler-cache: true # Run "bundle install", and cache the result automatically.
 
       - name: Ruby specs
-        run: bundle exec rake test
+        run: bundle exec rake

.rubocop.yml

@@ -1,6 +1,6 @@
 require: rubocop-performance
 AllCops:
-  TargetRubyVersion: 2.4
+  TargetRubyVersion: 2.7
   # 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

CONTRIBUTING.md

@@ -3,31 +3,50 @@
 1. Install [Yarn](https://yarnpkg.com/)
 
 2. Run the following commands to set up the development environment.
+
 ```
 bundle install
 yarn
 ```
 
 ## Making sure your changes pass all tests
+
 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
+
 ```
 yarn lint
 ```
 
 ### 2. Check the code for Ruby style violations
+
 ```
 bundle exec rubocop
 ```
 
 ### 3. Run the JavaScript test suite
+
 ```
 yarn test
 ```
 
 ### 4. Run the Ruby test suite
+
 ```
 bundle exec rake test
 ```
+
+#### 4.1 Run a single ruby test file
+
+```
+bundle exec rake test TEST=test/rake_tasks_test.rb
+```
+
+#### 4.2 Run a single ruby test
+
+```
+ruby -I test test/rake_tasks_test.rb -n test_rake_webpacker_install
+```

README.md

@@ -11,7 +11,7 @@
 Webpacker makes it easy to use the JavaScript pre-processor and bundler
 [Webpack v5](https://webpack.js.org/)
 to manage application-like JavaScript in Rails. It can coexist with the asset pipeline,
-leaving Webpack responsible solely for app-like JavaScript, or it can be used exclusively, making it also responsible for images, fronts, and CSS as well.
+leaving Webpack responsible solely for app-like JavaScript, or it can be used exclusively, making it also responsible for images, fronts, and CSS.
 
 **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.
 
@@ -78,10 +78,10 @@ leaving Webpack responsible solely for app-like JavaScript, or it can be used ex
 
 ## Installation
 
-You can configure a new Rails application with Webpacker right from the start using the `--webpack` option:
+You can configure a new Rails application with Webpacker right from the start using the `-j webpack` option:
 
 ```bash
-rails new myapp --webpack
+rails new myapp -j webpack
 ```
 
 Or you can add it later by changing your `Gemfile`:
@@ -113,11 +113,10 @@ yarn install
 Once installed, you can start writing modern ES6-flavored JavaScript apps right away:
 
 ```yml
-app/packs:
-  ├── entrypoints:
-  │   # Only Webpack entry files here
-  │   └── application.js
-  │   └── application.css
+app/javascript:
+  # Only Webpack entry files here
+  └── application.js
+  └── application.css
   └── src:
   │   └── my_component.js
   └── stylesheets:
@@ -139,13 +138,13 @@ packs with the chunks in your view, which creates html tags for all the chunks.
 The result looks like this:
 
 ```erb
-<%= javascript_pack_tag 'calendar', 'map' %>
+<%= javascript_pack_tag 'calendar', 'map', 'data-turbolinks-track': 'reload' %>
 
-<script src="/packs/vendor-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
-<script src="/packs/calendar~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
-<script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload"></script>
-<script src="/packs/map~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
-<script src="/packs/map-16838bab065ae1e314.js" data-turbolinks-track="reload"></script>
+<script src="/packs/vendor-16838bab065ae1e314.js" data-turbolinks-track="reload" defer></script>
+<script src="/packs/calendar~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload" defer></script>
+<script src="/packs/calendar-1016838bab065ae1e314.js" data-turbolinks-track="reload" defer"></script>
+<script src="/packs/map~runtime-16838bab065ae1e314.js" data-turbolinks-track="reload" defer></script>
+<script src="/packs/map-16838bab065ae1e314.js" data-turbolinks-track="reload" defer></script>
 ```
 
 **Important:** Pass all your pack names as multiple arguments, not multiple calls, when using `javascript_pack_tag` and the **`stylesheet_pack_tag`. Otherwise, you will get duplicated chunks on the page. Be especially careful if you might be calling these view helpers from your view, partials, and the layout for a page. You will need some logic to ensure you call the helpers only once with multiple arguments.
@@ -190,14 +189,15 @@ If you want to use images in your stylesheets:
   background-image: url('../images/logo.svg')
 }
 ```
+##### Defer for `javascript_pack_tag`
+Note, the default of "defer" for the `javascript_pack_tag`. You can override that to `false`. If you expose jquery globally with `expose-loader,` by using `import $ from "expose-loader?exposes=$,jQuery!jquery"` in your `app/packs/entrypoints/application.js`, pass the option `defer: false` to your `javascript_pack_tag`.
 
 #### Server-Side Rendering (SSR)
 
 Note, if you are using server-side rendering of JavaScript with dynamic code-spliting, as is often done with extensions to Webpacker, like [React on Rails](https://github.com/shakacode/react_on_rails), your JavaScript should create the link prefetch HTML tags that you will use, so you won't need to use to `asset_pack_path` in those circumstances.
 
 **Note:** In order for your styles or static assets files to be available in your view, you would need to link them in your "pack" or entry file. Otherwise, Webpack won't know to package up those files.
 
-
 ### Development
 
 Webpacker ships with two binstubs: `./bin/webpack` and `./bin/webpack-dev-server`. Both are thin wrappers around the standard `webpack.js` and `webpack-dev-server.js` executables to ensure that the right configuration files and environmental variables are loaded based on your environment.
@@ -211,10 +211,19 @@ If you want to use live code reloading, or you have enough JavaScript that on-de
 ./bin/webpack-dev-server
 
 # watcher
-./bin/webpack --watch --colors --progress
+./bin/webpack --watch --progress
 
 # standalone build
-./bin/webpack
+./bin/webpack --progress
+
+# Help
+./bin/webpack help
+
+# Version
+./bin/webpack version
+
+# Info
+./bin/webpack info
 ```
 
 Once you start this webpack development server, Webpacker will automatically start proxying all webpack asset requests to this server. When you stop this server, Rails will detect that it's not running and Rails will revert back to on-demand compilation _if_ you have the `compile` option set to true in your `config/webpacker.yml`

docs/v6_upgrade.md

@@ -12,13 +12,12 @@ This means you have to configure integration with frameworks yourself, but webpa
 
 ## How to upgrade to Webpacker 6
 
-1. If your `source_path` is `app/javascript`, rename it to `app/packs`
-2. If your `source_entry_path` is `packs`, rename it to `entrypoints`
-3. Rename `config/webpack` to `config/webpack_old`
-4. Rename `config/webpacker.yml` to `config/webpacker_old.yml`
-5. Uninstall the current version of `webpack-dev-server`: `yarn remove webpack-dev-server`
-6. Remove .browserslistrc from the root of your Rails app
-7. Upgrade the Webpacker Ruby gem and NPM package
+1. Move your `app/javascript/packs/application.js` to `app/javascript/application.js`
+2. Rename `config/webpack` to `config/webpack_old`
+3. Rename `config/webpacker.yml` to `config/webpacker_old.yml`
+4. Uninstall the current version of `webpack-dev-server`: `yarn remove webpack-dev-server`
+5. Remove .browserslistrc from the root of your Rails app
+6. Upgrade the Webpacker Ruby gem and NPM package
 
 Note: [Check the releases page to verify the latest version](https://github.com/rails/webpacker/releases), and make sure to install identical version numbers of webpacker gem and `@rails/webpacker` npm package. (Gems use a period and packages use a dot between the main version number and the beta version.)
 
@@ -41,7 +40,7 @@ Example going to a specific version:
   bundle exec rails webpacker:install
   ```
 
-7. Update API usage of the view helpers by changing `javascript_packs_with_chunks_tag` and `stylesheet_packs_with_chunks_tag` to `javascript_pack_tag` and `stylesheet_pack_tag`. Ensure that your layouts and views will only have **at most one call** to `javascript_pack_tag` or `stylesheet_pack_tag`. You can now pass multiple bundles to these view helper methods. If you fail to changes this, you may experience performance issues, and other bugs related to multiple copies of React, like [issue 2932](https://github.com/rails/webpacker/issues/2932).  If you expose jquery globally with `expose-loader,` by using `import $ from "expose-loader?exposes=$,jQuery!jquery"` in your `app/packs/entrypoints/application.js`, pass the option `defer: false` to your `javascript_pack_tag`.
+7. Update API usage of the view helpers by changing `javascript_packs_with_chunks_tag` and `stylesheet_packs_with_chunks_tag` to `javascript_pack_tag` and `stylesheet_pack_tag`. Ensure that your layouts and views will only have **at most one call** to `javascript_pack_tag` or `stylesheet_pack_tag`. You can now pass multiple bundles to these view helper methods. If you fail to changes this, you may experience performance issues, and other bugs related to multiple copies of React, like [issue 2932](https://github.com/rails/webpacker/issues/2932).  If you expose jquery globally with `expose-loader,` by using `import $ from "expose-loader?exposes=$,jQuery!jquery"` in your `app/javascript/application.js`, pass the option `defer: false` to your `javascript_pack_tag`.
 8. If you are using any integrations like `css`, `React` or `TypeScript`. Please see https://github.com/rails/webpacker#integrations section on how they work in v6.
 9. Copy over any custom webpack config from `config/webpack_old`. Common code previously called 'environment' should be changed to 'base', and import `environment` changed to `webpackConfig`.
 

lib/install/packs/entrypoints/application.js renamed to lib/install/application.js

@@ -1,19 +1,15 @@
 /* eslint no-console:0 */
 // This file is automatically compiled by Webpack, along with any other files
 // present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/packs and only use these pack files to reference
+// a relevant structure within app/javascript and only use these pack files to reference
 // that code so it'll be compiled.
 //
 // 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
+// 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 images = require.context('./images', true)
 // const imagePath = (name) => images(name, true)
-
-// Activate Active Storage
-// import * as ActiveStorage from "@rails/activestorage"
-// ActiveStorage.start()

lib/install/bin/webpack

@@ -1,17 +1,14 @@
 #!/usr/bin/env ruby
 
-ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
-ENV["NODE_ENV"]  ||= "development"
-
 require "pathname"
-ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile",
-  Pathname.new(__FILE__).realpath)
-
 require "bundler/setup"
-
 require "webpacker"
 require "webpacker/webpack_runner"
 
+ENV["RAILS_ENV"] ||= ENV["RACK_ENV"] || "development"
+ENV["NODE_ENV"]  ||= "development"
+ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../../Gemfile", Pathname.new(__FILE__).realpath)
+
 APP_ROOT = File.expand_path("..", __dir__)
 Dir.chdir(APP_ROOT) do
   Webpacker::WebpackRunner.run(ARGV)

lib/install/config/webpacker.yml

@@ -1,8 +1,8 @@
 # Note: You must restart bin/webpack-dev-server for changes to take effect
 
 default: &default
-  source_path: app/packs
-  source_entry_path: entrypoints
+  source_path: app/javascript
+  source_entry_path: /
   public_root_path: public
   public_output_path: packs
   cache_path: tmp/webpacker