Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from
Sep 4, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .github/workflows/ruby.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,6 @@ jobs:
matrix:
os: [ubuntu-latest]
ruby: [
2.4,
2.5,
2.6,
2.7,
3.0
]
Expand Down
2 changes: 1 addition & 1 deletion .rubocop.yml
Original file line number Diff line number Diff line change
@@ -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
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) => {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ This change is huge for those who choose to upgrade to webpacker 6, leave their pack file in subdirectories and didn't want to change source_entry_path from packs to /

In that case,
// This behavior retained
app/javascript/packs/application.js

// Missing pack file
app/javascript/packs/foo/fooPack.js
app/javascript/packs/foo/fooPack.scss

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