Skip to content

Commit

Permalink
Follow app/javascript/application.js convention from Rails 7 (#3156)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
dhh authored Sep 4, 2021
1 parent 9a4aa0f commit 5de0fbc
Show file tree
Hide file tree
Showing 10 changed files with 23 additions and 40 deletions.
3 changes: 0 additions & 3 deletions .github/workflows/ruby.yml
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,6 @@ jobs:
os: [ubuntu-latest]
node: [14]
ruby: [
2.4,
2.5,
2.6,
2.7,
3.0
]
Expand Down
15 changes: 7 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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`:
Expand Down Expand Up @@ -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:
Expand Down
15 changes: 7 additions & 8 deletions docs/v6_upgrade.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.)

Expand All @@ -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`.

Expand Down
Original file line number Diff line number Diff line change
@@ -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()
4 changes: 2 additions & 2 deletions lib/install/config/webpacker.yml
Original file line number Diff line number Diff line change
@@ -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
Expand Down
2 changes: 0 additions & 2 deletions lib/install/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
"name": "app",
"private": true,
"dependencies": {
"@rails/activestorage": "latest",
"@rails/actioncable": "latest"
},
"version": "0.1.0",
"babel": {
Expand Down
3 changes: 2 additions & 1 deletion lib/install/template.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
7 changes: 0 additions & 7 deletions package/__tests__/development.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
2 changes: 1 addition & 1 deletion package/environments/base.js
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion webpacker.gemspec
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down

0 comments on commit 5de0fbc

Please sign in to comment.