Follow app/javascript/application.js convention from Rails 7 (#3156)

* Follow app/javascript/application.js convention from Rails 7

So it remains compatible with other bundler setups, like esbuild-rails.

* Drop the idea of default dependencies

We can add them via Rails 7 installers

* Ensure entrypoints are only available at the top level

* Cut words

* Remove test

* Use Ruby target for Rails 7

* Match Rails 7 requirement of minimum Ruby version 2.7

Author: David Heinemeier Hansson

.github/workflows/ruby.yml

@@ -16,9 +16,6 @@ jobs:
         os: [ubuntu-latest]
         node: [14]
         ruby: [
-          2.4,
-          2.5,
-          2.6,
           2.7,
           3.0
         ]

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:

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 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/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

lib/install/package.json

@@ -2,8 +2,6 @@
   "name": "app",
   "private": true,
   "dependencies": {
-    "@rails/activestorage": "latest",
-    "@rails/actioncable": "latest"
   },
   "version": "0.1.0",
   "babel": {

lib/install/template.rb

@@ -9,7 +9,8 @@
   say "The packs app source directory already exists"
 else
   say "Creating packs app source directory"
-  directory "#{__dir__}/packs", Webpacker.config.source_path
+  empty_directory "app/javascript"
+  copy_file "#{__dir__}/application.js", "app/javascript/application.js"
 end
 
 apply "#{__dir__}/binstubs.rb"

package/__tests__/development.js

@@ -19,13 +19,6 @@ describe('Development environment', () => {
 
       expect(webpackConfig.output.path).toEqual(resolve('public', 'packs'))
       expect(webpackConfig.output.publicPath).toEqual('/packs/')
-      expect(webpackConfig).toMatchObject({
-        devServer: {
-          host: 'localhost',
-          port: 3035,
-          hot: false
-        }
-      })
     })
 
     test('should use development config and environment if WEBPACK_SERVE', () => {

package/environments/base.js

@@ -16,7 +16,7 @@ const getEntryObject = () => {
   const entries = {}
   const rootPath = join(config.source_path, config.source_entry_path)
 
-  globSync(`${rootPath}/**/*.*`).forEach((path) => {
+  globSync(`${rootPath}/*.*`).forEach((path) => {
     const namespace = relative(join(rootPath), dirname(path))
     const name = join(namespace, basename(path, extname(path)))
     let assetPaths = resolve(path)

webpacker.gemspec

@@ -15,7 +15,7 @@ Gem::Specification.new do |s|
     "changelog_uri"   => "https://github.com/rails/webpacker/blob/v#{Webpacker::VERSION}/CHANGELOG.md"
   }
 
-  s.required_ruby_version = ">= 2.4.0"
+  s.required_ruby_version = ">= 2.7.0"
 
   s.add_dependency "activesupport", ">= 5.2"
   s.add_dependency "railties",      ">= 5.2"