Skip to content

Commit c4db23f

Browse files
justin808justin808
authored
Conversion to Webpack v2 (#742)
Rubocop needed update as well.
1 parent 8b13c3b commit c4db23f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+2692
-1954
lines changed

‎.rubocop.yml

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,3 +72,6 @@ Metrics/ModuleLength:
7272
Style/GlobalVars:
7373
Exclude:
7474
- 'spec/dummy/config/environments/development.rb'
75+
76+
Style/FrozenStringLiteralComment:
77+
EnforcedStyle: when_needed

‎CONTRIBUTING.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,12 @@ After running a test, you can view the coverage results SimpleCov reports by ope
197197

198198
To test `spec/dummy` against Turbolinks 5, install the gem by running `ENABLE_TURBOLINKS_5=TRUE bundle install` in the `spec/dummy` directory before running `rake`.
199199

200+
Run `rake -T` or `rake -D` to see testing options.
201+
202+
`rake all_but_examples` is typically best for developers, except if any generators changed.
203+
204+
See below for verifying changes to the generators.
205+
200206
### Debugging
201207
Start the sample app like this for some debug printing:
202208

@@ -216,6 +222,8 @@ The main installer can be run with ```rails generate react_on_rails:install```
216222
### Testing the Generator
217223
The generators are covered by generator tests using Rails's generator testing helpers, but it never hurts to do a sanity check and explore the API. See [generator_testing_script.md](generator_testing_script.md) for a script on how to run the generator on a fresh project.
218224

225+
`rake run_rspec:example_basic` is a great way to run tests on one generator. Once that works, you should run `rake run_rspec:examples`. Be aware that this will create a hug number of files under a `/gen-examples` directory. You should be sure to exclude this directory from your IDE and delete it once your testing is done.
226+
219227
### Linting
220228
All linting is performed from the docker container for CI. You will need docker and docker-compose installed locally to lint code changes via the lint container. You can lint locally by running `npm run lint && npm run flow`
221229

‎Rakefile

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,5 +10,5 @@ end
1010
desc "Run all tests and linting"
1111
task default: tasks
1212

13-
desc "All actions but no examples. Good for local developer run."
13+
desc "All actions but no examples, good for local developer run."
1414
task all_but_examples: ["run_rspec:all_but_examples", "lint"]

‎docs/additional-reading/webpack-v1-notes.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# Webpack V1 Tips
2+
3+
The following only apply to Webpack V1. Take 1 hour and update to v2! It's worth it!
4+
5+
## Use the `--bail` Option When Running Webpack for CI or Deployments if using Webpack V1
6+
For your scripts that statically build your Webpack bundles, use the `--bail` option. This will ensure that CI and your product deployment **halt** if Webpack cannot complete! For more details, see the documentation for [Webpack's `--bail` option](https://webpack.js.org/configuration/other-options/#bail). Note, you might not want to use the `--bail` option if you just want to depend on Webpack returning a non-zero error code and you want to see all the errors, rather than only the first error.
7+
8+
9+
## Entry Points
10+
You should ensure you configure the entry points correctly for webpack if you want to break out libraries into a "vendor" bundle where your libraries are packaged separately from your app's code. If you send web clients your vendor bundle separately from your app bundles, then web clients might have the vendor bundle cached while they receive updates for your app.
11+
12+
You need both include `react-dom` and `react` as values for `entry`, like this:
13+
14+
```
15+
entry: {
16+
17+
// See use of 'vendor' in the CommonsChunkPlugin inclusion below.
18+
vendor: [
19+
'babel-core/polyfill',
20+
'react',
21+
'react-dom',
22+
],
23+
```

‎docs/additional-reading/webpack.md

Lines changed: 5 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,25 +6,17 @@ You can try out example app, [shakacode/react-webpack-rails-tutorial](https://gi
66
## Webpack v1 or v2?
77
We recommend using Webpack version 2.2.1 or greater.
88

9-
## Use the `--bail` Option When Running Webpack for CI or Deployments
10-
For your scripts that statically build your Webpack bundles, use the `--bail` option. This will ensure that CI and your product deployment **halt** if Webpack cannot complete! For more details, see the documentation for [Webpack's `--bail` option](https://webpack.js.org/configuration/other-options/#bail). Note, you might not want to use the `--bail` option if you just want to depend on Webpack returning a non-zero error code and you want to see all the errors, rather than only the first error.
11-
129
## yarn or npm?
1310
Yarn is the current recommendation!
1411

1512
## Entry Points
1613

1714
You should ensure you configure the entry points correctly for webpack if you want to break out libraries into a "vendor" bundle where your libraries are packaged separately from your app's code. If you send web clients your vendor bundle separately from your app bundles, then web clients might have the vendor bundle cached while they receive updates for your app.
1815

19-
You need both include `react-dom` and `react` as values for `entry`, like this:
16+
Webpack v2 makes this very convenient! See:
17+
18+
* [Implicit Common Vendor Chunk](https://webpack.js.org/guides/code-splitting-libraries/#implicit-common-vendor-chunk)
19+
* [Manifest File](https://webpack.js.org/guides/code-splitting-libraries/#manifest-file)
20+
2021

21-
```
22-
entry: {
2322

24-
// See use of 'vendor' in the CommonsChunkPlugin inclusion below.
25-
vendor: [
26-
'babel-core/polyfill',
27-
'react',
28-
'react-dom',
29-
],
30-
```

‎lib/generators/react_on_rails/dev_tests_generator.rb

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,17 @@
33

44
module ReactOnRails
55
module Generators
6+
FALLBACK_OPTION_FOR_NODE_MODULES = <<-TEXT.freeze
7+
// This fixes an issue with resolving 'react' when using a local symlinked version
8+
// of the node_package folder
9+
modules: [
10+
path.join(__dirname, 'node_modules'),
11+
'node_modules',
12+
],
13+
},
14+
plugins: [
15+
TEXT
16+
617
class DevTestsGenerator < Rails::Generators::Base
718
include GeneratorHelper
819
Rails::Generators.hide_namespace(namespace)
@@ -35,20 +46,11 @@ def change_package_json_to_use_local_react_on_rails_module
3546
end
3647

3748
def change_webpack_client_base_config_to_include_fallback
38-
text = <<-TEXT
39-
},
40-
41-
// This fixes an issue with resolving 'react' when using a local symlinked version
42-
// of the node_package folder
43-
resolveLoader: {
44-
fallback: [path.join(__dirname, 'node_modules')],
45-
},
46-
plugins: [
47-
TEXT
4849
sentinel = /^\s\s},\n\s\splugins: \[\n/
4950
config = File.join(destination_root, "client", "webpack.config.js")
5051
old_contents = File.read(config)
51-
new_contents = old_contents.gsub(sentinel, text)
52+
new_contents = "const path = require('path');\n" +
53+
old_contents.gsub(sentinel, FALLBACK_OPTION_FOR_NODE_MODULES)
5254
File.open(config, "w+") { |f| f.puts new_contents }
5355
end
5456

‎lib/generators/react_on_rails/templates/base/base/client/.babelrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
{
2-
"presets": ["es2015", "stage-0", "react"]
2+
"presets": ["es2015", "stage-2", "react"]
33
}

‎lib/generators/react_on_rails/templates/base/base/client/package.json.tt

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,25 +14,25 @@
1414
},
1515
"cacheDirectories": ["node_modules", "client/node_modules"],
1616
"dependencies": {
17-
"babel-cli": "^6.18.0",
18-
"babel-core": "^6.21.0",
19-
"babel-loader": "^6.2.10",
20-
"babel-runtime": "^6.20.0",
21-
"babel-polyfill": "^6.20.0",
22-
"babel-preset-es2015": "^6.18.0",
23-
"babel-preset-react": "^6.16.0",
24-
"babel-preset-stage-0": "^6.16.0",
17+
"babel-cli": "^6.23.0",
18+
"babel-core": "^6.23.1",
19+
"babel-loader": "^6.3.2",
20+
"babel-runtime": "^6.23.0",
21+
"babel-polyfill": "^6.23.0",
22+
"babel-preset-es2015": "^6.22.0",
23+
"babel-preset-react": "^6.23.0",
24+
"babel-preset-stage-2": "^6.22.0",
2525
"es5-shim": "^4.5.9",
26-
"expose-loader": "^0.7.1",
27-
"imports-loader": "^0.7.0",
28-
"react": "^15.4.1",
29-
"react-dom": "^15.4.1",
26+
"expose-loader": "^0.7.3",
27+
"imports-loader": "^0.7.1",
28+
"react": "^15.4.2",
29+
"react-dom": "^15.4.2",
3030
"react-on-rails": "<%= VersionSyntaxConverter.new.rubygem_to_npm %>",
3131
<%- if options.redux? -%>
32-
"react-redux": "^5.0.1",
32+
"react-redux": "^5.0.3",
3333
"redux": "^3.6.0",
3434
<%- end -%>
35-
"webpack": "^1.14.0"
35+
"webpack": "^2.2.1"
3636
},
3737
"devDependencies": {
3838
}

‎lib/generators/react_on_rails/templates/base/base/client/webpack.config.js

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
/* eslint comma-dangle: ["error",
2-
{"functions": "never", "arrays": "only-multiline", "objects":
3-
"only-multiline"} ] */
2+
{"functions": "never", "arrays": "only-multiline", "objects":
3+
"only-multiline"} ] */
44

55
const webpack = require('webpack');
6-
const path = require('path');
76

87
const devBuild = process.env.NODE_ENV !== 'production';
9-
const nodeEnv = devBuild ? 'development' : 'production';
108

119
const config = {
1210
entry: [
@@ -22,28 +20,26 @@ const config = {
2220
},
2321

2422
resolve: {
25-
extensions: ['', '.js', '.jsx'],
26-
alias: {
27-
react: path.resolve('./node_modules/react'),
28-
'react-dom': path.resolve('./node_modules/react-dom'),
29-
},
23+
extensions: ['.js', '.jsx'],
3024
},
3125
plugins: [
32-
new webpack.DefinePlugin({
33-
'process.env': {
34-
NODE_ENV: JSON.stringify(nodeEnv),
35-
},
36-
}),
26+
new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
3727
],
3828
module: {
39-
loaders: [
29+
rules: [
4030
{
4131
test: require.resolve('react'),
42-
loader: 'imports?shim=es5-shim/es5-shim&sham=es5-shim/es5-sham',
32+
use: {
33+
loader: 'imports-loader',
34+
options: {
35+
shim: 'es5-shim/es5-shim',
36+
sham: 'es5-shim/es5-sham',
37+
}
38+
},
4339
},
4440
{
4541
test: /\.jsx?$/,
46-
loader: 'babel-loader',
42+
use: 'babel-loader',
4743
exclude: /node_modules/,
4844
},
4945
],
@@ -56,8 +52,5 @@ if (devBuild) {
5652
console.log('Webpack dev build for Rails'); // eslint-disable-line no-console
5753
module.exports.devtool = 'eval-source-map';
5854
} else {
59-
config.plugins.push(
60-
new webpack.optimize.DedupePlugin()
61-
);
6255
console.log('Webpack production build for Rails'); // eslint-disable-line no-console
6356
}

‎lib/react_on_rails/assets_precompile.rb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ def symlink_non_digested_assets
7272
manifest_file_data = File.read(manifest_path)
7373
JSON.parse(manifest_file_data)["assets"]
7474
else
75-
YAML.load(manifest_file)
75+
YAML.safe_load(manifest_file)
7676
end
7777

7878
# We realize that we're copying other Rails assets that match the regexp, but this just

‎lib/react_on_rails/locales_to_js.rb

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ def generate_translations
7070
translations = {}
7171
defaults = {}
7272
locale_files.each do |f|
73-
translation = YAML.load(File.open(f))
73+
translation = YAML.safe_load(File.open(f))
7474
key = translation.keys[0]
7575
val = flatten(translation[key])
7676
translations = translations.deep_merge(key => val)

‎lib/react_on_rails/version.rb

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
# frozen_string_literal: true
21
module ReactOnRails
32
VERSION = "6.7.2".freeze
43
end

‎node_package/.babelrc

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"presets": ["es2015", "stage-0", "react"],
2+
"presets": ["es2015", "stage-2", "react"],
33
"plugins": [
44
"transform-flow-strip-types",
55
"transform-runtime"

‎package.json

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -7,35 +7,35 @@
77
"doc": "docs"
88
},
99
"devDependencies": {
10-
"babel-cli": "^6.18.0",
11-
"babel-core": "^6.21.0",
12-
"babel-loader": "^6.2.10",
10+
"babel-cli": "^6.23.0",
11+
"babel-core": "^6.23.1",
12+
"babel-loader": "^6.3.2",
1313
"babel-plugin-react-transform": "^2.0.2",
14-
"babel-plugin-transform-flow-strip-types": "^6.21.0",
15-
"babel-plugin-transform-runtime": "^6.15.0",
16-
"babel-preset-es2015": "^6.18.0",
17-
"babel-preset-react": "^6.16.0",
18-
"babel-preset-stage-0": "^6.16.0",
19-
"babel-runtime": "^6.20.0",
14+
"babel-plugin-transform-flow-strip-types": "^6.22.0",
15+
"babel-plugin-transform-runtime": "^6.23.0",
16+
"babel-preset-es2015": "^6.22.0",
17+
"babel-preset-react": "^6.23.0",
18+
"babel-preset-stage-2": "^6.22.0",
19+
"babel-runtime": "^6.23.0",
2020
"babel-tape-runner": "^2.0.1",
21-
"babel-types": "^6.21.0",
21+
"babel-types": "^6.23.0",
2222
"babelify": "^7.3.0",
2323
"blue-tape": "^1.0.0",
24-
"eslint": "^3.9.1",
25-
"eslint-config-shakacode": "^13.2.1",
26-
"eslint-plugin-import": "^2.1.0",
27-
"eslint-plugin-jsx-a11y": "^2.2.3",
28-
"eslint-plugin-react": "^6.6.0",
29-
"flow-bin": "^0.37.4",
30-
"jsdom": "^9.9.1",
31-
"react": "^15.4.1",
32-
"react-dom": "^15.4.1",
24+
"eslint": "^3.16.1",
25+
"eslint-config-shakacode": "^14.1.1",
26+
"eslint-plugin-import": "^2.2.0",
27+
"eslint-plugin-jsx-a11y": "^4.0.0",
28+
"eslint-plugin-react": "^6.10.0",
29+
"flow-bin": "^0.40.0",
30+
"jsdom": "^9.11.0",
31+
"react": "^15.4.2",
32+
"react-dom": "^15.4.2",
3333
"react-transform-hmr": "^1.0.4",
3434
"redux": "^3.6.0",
35-
"release-it": "^2.5.3",
35+
"release-it": "^2.5.4",
3636
"tap-spec": "^4.1.1",
3737
"tape": "^4.6.3",
38-
"webpack": "^1.14.0"
38+
"webpack": "^2.2.1"
3939
},
4040
"peerDependencies": {
4141
"babel-runtime": ">= 6",

‎rakelib/run_rspec.rake

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,11 @@ task :js_tests do
7777
sh "yarn run test"
7878
end
7979

80-
desc "Runs all tests. Run `rake -D run_rspec` to see all available test options"
80+
msg = <<-DESC
81+
Runs all tests, run `rake -D run_rspec` to see all available test options.
82+
"rake run_rspec:example_basic" is a good way to run only one generator test.
83+
DESC
84+
desc msg
8185
task run_rspec: ["run_rspec:run_rspec"]
8286

8387
private

‎spec/.rubocop.yml

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
inherit_from:
2+
- ../.rubocop.yml
3+
4+
Metrics/BlockLength:
5+
Max: 180

‎spec/dummy/client/.babelrc

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
{
2-
"presets": ["es2015", "stage-0", "react"],
3-
"plugins": ["syntax-decorators"]
2+
"presets": ["es2015", "stage-2", "react"]
43
}

‎spec/dummy/client/.eslintrc

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,4 @@
33
extends: eslint-config-shakacode
44

55
rules:
6-
no-console: 0
7-
import/no-unresolved: 0
8-
import/no-extraneous-dependencies: 0
96
react/forbid-prop-types: 0

‎spec/dummy/client/README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,12 @@ npm-check-updates -u -a
3333
yarn
3434
```
3535

36+
Another option for upgrading:
37+
38+
```
39+
yarn upgrade
40+
```
41+
3642
Then confirm that the hot reload server and the rails server both work fine. You
3743
may have to delete `node_modules`.
3844

‎spec/dummy/client/app/components/CacheDisabled.js renamed to ‎spec/dummy/client/app/components/CacheDisabled.jsx

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import React from 'react';
33
export default class CacheDisabled extends React.Component {
44

55
componentWillUnmount() {
6-
console.log('CacheDisabled#componentWillUnmount')
6+
// eslint-disable-next-line no-console
7+
console.log('CacheDisabled#componentWillUnmount');
78
}
89

910
render() {

‎spec/dummy/client/app/components/EchoProps.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,4 +6,4 @@ const EchoProps = (props) => (
66
</div>
77
);
88

9-
export default EchoProps
9+
export default EchoProps;

‎spec/dummy/client/app/components/HelloWorld.jsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ class HelloWorld extends React.Component {
3232
}
3333

3434
render() {
35+
// eslint-disable-next-line no-console
3536
console.log('HelloWorld demonstrating a call to console.log in ' +
3637
'spec/dummy/client/app/components/HelloWorld.jsx:18');
3738

0 commit comments

Comments
 (0)