webpacker 6.0.0.pre.2 → 6.0.0.rc.1

data/config/README.md

@@ -0,0 +1,3 @@
+# Note
+
+This directory exists for Jest specs that execute code expecting the Rails config directory at this path.

data/config/webpacker.yml

@@ -0,0 +1 @@
+../lib/install/config/webpacker.yml

data/docs/deployment.md

@@ -1,28 +1,27 @@
 # Deployment
 
-
 Webpacker hooks up a new `webpacker:compile` task to `assets:precompile`, which gets run whenever you run `assets:precompile`.
-If you are not using Sprockets `webpacker:compile` is automatically aliased to `assets:precompile`. Remember to set NODE_ENV environment variable to production during deployment or when running the rake task.
+If you are not using Sprockets `webpacker:compile` is automatically aliased to `assets:precompile`. Remember to set `NODE_ENV` environment variable to production during deployment or when running the rake task.
 
 The `javascript_pack_tag` and `stylesheet_pack_tag` helper method will automatically insert the correct HTML tag for compiled pack. Just like the asset pipeline does it.
 
 By default the output will look like this in different environments:
 
 ```html
-  <!-- In development mode with webpack-dev-server -->
-  <script src="http://localhost:8080/calendar-0bd141f6d9360cf4a7f5.js"></script>
-  <link rel="stylesheet" media="screen" href="http://localhost:8080/calendar-dc02976b5f94b507e3b6.css">
-  <!-- In production or development mode -->
-  <script src="/packs/js/calendar-0bd141f6d9360cf4a7f5.js"></script>
-  <link rel="stylesheet" media="screen" href="/packs/css/calendar-dc02976b5f94b507e3b6.css">
-```
+<!-- In development mode with webpack-dev-server -->
+<script src="http://localhost:8080/calendar-0bd141f6d9360cf4a7f5.js"></script>
+<link rel="stylesheet" media="screen" href="http://localhost:8080/calendar-dc02976b5f94b507e3b6.css">
 
+<!-- In production or development mode -->
+<script src="/packs/js/calendar-0bd141f6d9360cf4a7f5.js"></script>
+<link rel="stylesheet" media="screen" href="/packs/css/calendar-dc02976b5f94b507e3b6.css">
+```
 
 ## Heroku
 
 In order for your Webpacker app to run on Heroku, you'll need to do a bit of configuration before hand.
 
-```
+```bash
 heroku create my-webpacker-heroku-app
 heroku addons:create heroku-postgresql:hobby-dev
 heroku buildpacks:add heroku/nodejs
@@ -37,7 +36,6 @@ We're essentially doing the following here:
 * Adding the Heroku NodeJS and Ruby buildpacks for your app. This allows the `npm` or `yarn` executables to properly function when compiling your app - as well as Ruby.
 * Pushing our code to Heroku and kicking off the deployment
 
-
 ## Nginx
 
 Webpacker doesn't serve anything in production. You’re expected to configure your web server to serve files in public/ directly.
@@ -128,21 +126,3 @@ namespace :deploy do
   end
 end
 ```
-
-If you use [nvm](https://github.com/nvm-sh/nvm) to manage node versions for your deployment user, use the below snippet instead:
-
-```ruby
-before "deploy:assets:precompile", "deploy:yarn_install"
-namespace :deploy do
-  desc "Run rake yarn install"
-  task :yarn_install do
-    on roles(:web) do
-      within release_path do
-        execute("source ~/.nvm/nvm.sh && cd #{release_path} && yarn install --silent --no-progress --no-audit --no-optional")
-      end
-    end
-  end
-end
-```
-The `source ~/.nvm/nvm.sh` is required because [nvm is not automatically loaded in non-interactive shells](https://github.com/nvm-sh/nvm/issues/1718).
-

data/docs/developing_webpacker.md

@@ -0,0 +1,29 @@
+# Developing Webpacker
+
+It's a little trickier for Rails developers to work on the JS code of a project like rails/webpacker. So here are some tips!
+
+## Use some test app
+For example, for React on Rails Changes, I'm using [shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh).
+This directory is the `TEST_APP_DIR`.
+
+## Fork rails/webpacker
+Let's call the rails/webpacker directory `WEBPACKER_DIR` which has rails/webpacker's `package.json`.
+
+## Changing the Package
+### Setup with Yalc
+Use [`yalc`](https://github.com/wclr/yalc) unless you like yak shaving weird errors. 
+1. In `WEBPACKER_DIR`, run `yalc publish` 
+2. In `TEST_APP_DIR`, run `yarn link @rails/webpacker`
+   
+## Update the Package Code
+1. Make some JS change in WEBPACKER_DIR
+2. Run `yalc push` and your changes will be pushed to your `TEST_APP_DIR`'s node_modules.
+3. You may need to run `yarn` in `TEST_APP_DIR` if you added or removed dependencies of rails/webpacker.
+
+## Updating the Ruby Code
+
+For the Ruby part, just change the gem reference `TEST_APP_DIR`, like:
+
+```ruby
+gem "webpacker", path: "../../forks/webpacker"
+```

data/docs/troubleshooting.md

@@ -4,12 +4,17 @@
 
 1. Read the error message carefully. The error message will tell you the precise key value
    that is not matching what Webpack expects.
+
 2. Put a `debugger` statement in your Webpack configuration and run `bin/webpack --debug-webpacker`.
    If you have a node debugger installed, you'll see the Chrome debugger for your webpack
-   config. For example, install the Chrome extension [NiM](https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj) and
-   set the option for the dev tools to open automatically. For more details on debugging,
-   see the official [Webpack docs on debugging](https://webpack.js.org/contribute/debugging/#devtools)
+   config. For example, install the Chrome extension
+   [NiM](https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj) and
+   set the option for the dev tools to open automatically. Or put `chrome://inspect` in the URL bar.
+   For more details on debugging, see the official
+   [Webpack docs on debugging](https://webpack.js.org/contribute/debugging/#devtools)
+
 3. Any arguments that you add to bin/webpack get sent to webpack. For example, you can pass `--debug` to switch loaders to debug mode. See [webpack CLI debug options](https://webpack.js.org/api/cli/#debug-options) for more information on the available options.
+
 4. You can also pass additional options to the command to run the webpack-dev-server and start the webpack-dev-server with the option `--debug-webpacker`
 
 ## ENOENT: no such file or directory - node-sass
@@ -54,16 +59,15 @@ completed the compilation successfully before loading a view.
 * If you get this error while trying to use Elm, try rebuilding Elm. You can do
   so with a postinstall hook in your `package.json`:
 
-```
+```json
 "scripts": {
   "postinstall": "npm rebuild elm"
 }
 ```
 
-
 ## webpack or webpack-dev-server not found
 
-* This could happen if  `webpacker:install` step is skipped. Please run `bundle exec rails webpacker:install` to fix the issue.
+* This could happen if `webpacker:install` step is skipped. Please run `bundle exec rails webpacker:install` to fix the issue.
 
 * If you encounter the above error on heroku after upgrading from Rails 4.x to 5.1.x, then the problem might be related to missing `yarn` binstub. Please run following commands to update/add binstubs:
 
@@ -72,7 +76,6 @@ bundle config --delete bin
 ./bin/rails app:update:bin # or rails app:update:bin
 ```
 
-
 ## Running webpack on Windows
 
 If you are running webpack on Windows, your command shell may not be able to interpret the preferred interpreter
@@ -84,7 +87,6 @@ C:\path>ruby bin\webpack
 C:\path>ruby bin\webpack-dev-server
 ```
 
-
 ## Invalid configuration object. webpack has been initialised using a configuration object that does not match the API schema.
 
 If you receive this error when running `$ ./bin/webpack-dev-server` ensure your configuration is correct; most likely the path to your "packs" folder is incorrect if you modified from the original "source_path" defined in `config/webpacker.yml`.
@@ -99,6 +101,7 @@ Basic fix involves:
 
 ```bash
 # install sysconfcpus on CI
+
 git clone https://github.com/obmarg/libsysconfcpus.git $HOME/dependencies/libsysconfcpus
 cd libsysconfcpus
 .configure --prefix=$HOME/dependencies/sysconfcpus
@@ -111,41 +114,39 @@ chmod +x $HOME/your_rails_app/node_modules/.bin/elm-make
 ```
 
 ## Rake assets:precompile fails. ExecJS::RuntimeError
-This error occurs because you are trying to minify by terser a pack that's already been minified by Webpacker. To avoid this conflict and prevent appearing of ExecJS::RuntimeError error, you will need to disable uglifier from Rails config:
+This error occurs because you are trying to minify by `terser` a pack that's already been minified by Webpacker. To avoid this conflict and prevent appearing of `ExecJS::RuntimeError` error, you will need to disable uglifier from Rails config:
 
 ```ruby
-// production.rb
-# From
+# In production.rb
 
+# From
 Rails.application.config.assets.js_compressor = :uglifier
 
 # To
-
 Rails.application.config.assets.js_compressor = Uglifier.new(harmony: true)
-
 ```
 
 ### Angular: WARNING in ./node_modules/@angular/core/esm5/core.js, Critical dependency: the request of a dependency is an expression
 
-To silent these warnings, please update `config/webpack/environment.js`
-
+To silent these warnings, please update `config/webpack/base.js`:
 ```js
-// environment.js
 const webpack = require('webpack')
 const { resolve } = require('path')
-const { environment, config } = require('@rails/webpacker')
-
-environment.plugins.append('ContextReplacement',
-  new webpack.ContextReplacementPlugin(
-    /angular(\\|\/)core(\\|\/)(@angular|esm5)/,
-    resolve(config.source_path)
-  )
-)
+const { webpackConfig, merge } = require('@rails/webpacker')
+
+module.exports = merge(webpackConfig, {
+  plugins: [
+    new webpack.ContextReplacementPlugin(
+      /angular(\\|\/)core(\\|\/)(@angular|esm5)/,
+      resolve(config.source_path)
+    )
+  ]
+})
 ```
 
 ### Compilation Fails Silently
 
-If compiling is not producing output files and there are no error messages to help troubleshoot. Setting the webpack_compile_output configuration variable to 'true' in webpacker.yml may add some helpful error information to your log file (Rails log/development.log or log/production.log)
+If compiling is not producing output files and there are no error messages to help troubleshoot. Setting the `webpack_compile_output` configuration variable to `true` in webpacker.yml may add some helpful error information to your log file (Rails `log/development.log` or `log/production.log`)
 
 ```yml
 # webpacker.yml
@@ -156,3 +157,34 @@ default: &default
   public_output_path: complaints_packs
   webpack_compile_output: true
 ```
+
+### Using global variables for dependencies
+
+If you want to access any dependency without importing it everywhere or use it directly in your dev tools, please check: [https://webpack.js.org/plugins/provide-plugin/](https://webpack.js.org/plugins/provide-plugin/)
+
+**You don't need to assign dependencies on `window`.**
+
+For instance, with [jQuery](https://jquery.com/):
+```diff
+// app/packs/entrypoints/application.js
+
+- import jQuery from 'jquery'
+- window.jQuery = jQuery
+```
+
+Instead do:
+```js
+// config/webpack/base.js
+
+const webpack = require('webpack')
+const { webpackConfig, merge } = require('@rails/webpacker')
+
+module.exports = merge(webpackConfig, {
+  plugins: [
+    new webpack.ProvidePlugin({
+      $: 'jquery',
+      jQuery: 'jquery',
+    })
+  ],
+})
+```

data/docs/v6_upgrade.md

@@ -0,0 +1,75 @@
+# Upgrading from Webpacker 5 to 6
+
+There are several substantial changes in Webpacker 6 that you need to manually account for when coming from Webpacker 5. This guide will help you through it.
+
+## Webpacker has become a slimmer wrapper around Webpack
+
+By default, Webpacker 6 is focused on compiling and bundling JavaScript. This pairs with the existing asset pipeline in Rails that's setup to transpile CSS and static images using [Sprockets](https://github.com/rails/sprockets). For most developers, that's the recommended combination. But if you'd like to use Webpacker for CSS and static assets as well, please see [integrations](https://github.com/rails/webpacker#integrations) for more information.
+
+Webpacker used to configure Webpack indirectly, which lead to a [complicated secondary configuration process](https://github.com/rails/webpacker/blob/5-x-stable/docs/webpack.md). This was done in order to provide default configurations for the most popular frameworks, but ended up creating more complexity than it cured. So now Webpacker delegates all configuration directly to Webpack's default configuration setup.
+
+This means you have to configure integration with frameworks yourself, but webpack-merge helps with this. See this example for [Vue](https://github.com/rails/webpacker#other-frameworks).
+
+## 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. 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.)
+
+Example going to a specific (beta) version:
+
+  ```ruby
+  # Gemfile
+  gem 'webpacker', '6.0.0.beta.7'
+  ```
+
+Do *not* specify `'^6.0.0.beta.7'` (with a caret) or you will accidentally install `6.0.0.pre.2` which is months older than `beta.7`.
+
+  ```bash
+  bundle install
+  ```
+
+  ```bash
+  yarn add @rails/webpacker@6.0.0-beta.7 --exact
+  ```
+
+  ```bash
+  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).
+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`.
+
+  ```js
+  // config/webpack/base.js
+  const { webpackConfig, merge } = require('@rails/webpacker')
+  const customConfig = require('./custom')
+
+  module.exports = merge(webpackConfig, customConfig)
+  ```
+
+10. Copy over custom browserlist config from `.browserslistrc` if it exists into the `"browserslist"` key in `package.json` and remove `.browserslistrc`.
+
+11. Remove `babel.config.js` if you never changed it. Be sure to have this config in your `package.json`:
+```json
+"babel": {
+  "presets": [
+    "./node_modules/@rails/webpacker/package/babel/preset.js"
+  ]
+}
+```
+12. Remove `postcss.config.js` if you don't use `PostCSS`.
+13. `extensions` was removed from the `webpacker.yml` file. Move custom extensions to your configuration by merging an object like this. For more details, see docs for [Webpack Configuration](https://github.com/rails/webpacker/blob/master/README.md#webpack-configuration)
+
+```js
+{
+  resolve: {
+    extensions: ['.ts', '.tsx', '.vue', '.css']
+  }
+}
+```

data/gemfiles/Gemfile-rails-edge

@@ -4,7 +4,7 @@ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
 gemspec path: "../"
 
-gem "rails", github: "rails/rails"
+gem "rails", github: "rails/rails", branch: "main"
 gem "arel", github: "rails/arel"
 gem "rake", ">= 11.1"
 gem "rack-proxy", require: false

data/gemfiles/Gemfile-rails.6.1.x

@@ -0,0 +1,12 @@
+source "https://rubygems.org"
+
+git_source(:github) { |repo| "https://github.com/#{repo}.git" }
+
+gemspec path: "../"
+
+gem "rails", '~>6.1.0'
+gem "arel", github: "rails/arel"
+gem "rake", ">= 11.1"
+gem "rack-proxy", require: false
+gem "minitest", "~> 5.0"
+gem "byebug"

data/lib/install/config/webpacker.yml

@@ -1,14 +1,14 @@
 # Note: You must restart bin/webpack-dev-server for changes to take effect
 
 default: &default
-  source_path: app/javascript
-  source_entry_path: packs
+  source_path: app/packs
+  source_entry_path: entrypoints
   public_root_path: public
   public_output_path: packs
-  cache_path: tmp/cache/webpacker
+  cache_path: tmp/webpacker
   webpack_compile_output: true
 
-  # Additional paths webpack should lookup modules
+  # Additional paths webpack should look up modules
   # ['app/assets', 'engine/foo/app/assets']
   additional_paths: []
 
@@ -27,8 +27,6 @@ development:
     public: localhost:3035
     # Hot Module Replacement updates modules while the application is running without a full reload
     hmr: false
-    # Inline should be set to true if using HMR; it inserts a script to take care of live reloading
-    inline: true
     # Should we show a full-screen overlay in the browser when there are compiler errors or warnings?
     overlay: true
     # Should we use gzip compression?
@@ -40,7 +38,7 @@ development:
     # When enabled, nothing except the initial startup information will be written to the console.
     # This also means that errors or warnings from webpack are not visible.
     quiet: false
-    pretty: false
+    pretty: true
     headers:
       'Access-Control-Allow-Origin': '*'
     watch_options:

data/lib/install/{javascript/packs → packs/entrypoints}/application.js

@@ -1,13 +1,12 @@
 /* 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/javascript and only use these pack files to reference
+// a relevant structure within app/packs 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
 // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
 // or the `imagePath` JavaScript helper below.
@@ -15,4 +14,6 @@
 // const images = require.context('../images', true)
 // const imagePath = (name) => images(name, true)
 
-console.log('Hello World from Webpacker')
+// Activate Active Storage
+// import * as ActiveStorage from "@rails/activestorage"
+// ActiveStorage.start()

data/lib/install/template.rb

@@ -5,10 +5,10 @@ say "Copying webpack core config"
 directory "#{__dir__}/config/webpack", "config/webpack"
 
 if Dir.exists?(Webpacker.config.source_path)
-  say "The JavaScript app source directory already exists"
+  say "The packs app source directory already exists"
 else
-  say "Creating JavaScript app source directory"
-  directory "#{__dir__}/javascript", Webpacker.config.source_path
+  say "Creating packs app source directory"
+  directory "#{__dir__}/packs", Webpacker.config.source_path
 end
 
 apply "#{__dir__}/binstubs.rb"
@@ -26,13 +26,15 @@ if File.exists?(git_ignore_path)
   end
 end
 
+results = []
+
 Dir.chdir(Rails.root) do
-  if Webpacker::VERSION =~ /^[0-9]+\.[0-9]+\.[0-9]+$/
+  if Webpacker::VERSION.match?(/^[0-9]+\.[0-9]+\.[0-9]+$/)
     say "Installing all JavaScript dependencies [#{Webpacker::VERSION}]"
-    run "yarn add @rails/webpacker@#{Webpacker::VERSION}"
+    results << run("yarn add @rails/webpacker@#{Webpacker::VERSION}")
   else
     say "Installing all JavaScript dependencies [from prerelease rails/webpacker]"
-    run "yarn add @rails/webpacker@next"
+    results << run("yarn add @rails/webpacker@next")
   end
 
   package_json = File.read("#{__dir__}/../../package.json")
@@ -41,17 +43,19 @@ Dir.chdir(Rails.root) do
 
   # needed for experimental Yarn 2 support and should not harm Yarn 1
   say "Installing webpack and webpack-cli as direct dependencies"
-  run "yarn add webpack@#{webpack_version} webpack-cli@#{webpack_cli_version}"
+  results << run("yarn add webpack@#{webpack_version} webpack-cli@#{webpack_cli_version}")
 
   say "Installing dev server for live reloading"
-  run "yarn add --dev webpack-dev-server @webpack-cli/serve"
+  results << run("yarn add --dev webpack-dev-server @webpack-cli/serve")
 end
 
 insert_into_file Rails.root.join("package.json").to_s, before: /\n}\n*$/ do
   <<~JSON.chomp
   ,
     "babel": {
-      "presets": ["./node_modules/@rails/webpacker/package/babel/preset.js"]
+      "presets": [
+        "./node_modules/@rails/webpacker/package/babel/preset.js"
+      ]
     },
     "browserslist": [
       "defaults"
@@ -66,4 +70,7 @@ if Rails::VERSION::MAJOR == 5 && Rails::VERSION::MINOR > 1
   say "policy.connect_src :self, :https, \"http://localhost:3035\", \"ws://localhost:3035\" if Rails.env.development?", :yellow
 end
 
-say "Webpacker successfully installed 🎉 🍰", :green
+unless results.all?
+  say "Webpacker installation failed 😭 See above for details.", :red
+  exit 1
+end