Justin808/updates for hmr with webpacker v4 (#1240)

* Added same_bundle_for_client_and_server

Added configuration option `same_bundle_for_client_and_server` with default `false` because

1. Production applications would typically have a server bundle that differs from the client bundle
2. This change only affects trying to use HMR with react_on_rails with rails/webpacker.

The previous behavior was to always go to the webpack-dev-server for the server bundle if the
webpack-dev-server was running _and_ the server bundle was found in the `manifest.json`.

If you are using the **same bundle for client and server rendering**, then set this configuration option
to `true`.

Also, remove the requirement that the server bundle have the default deployment
path. A subdirectory can be specified for the server_bundle_js_file.

.rubocop.yml

@@ -41,7 +41,7 @@ Naming/FileName:
 Style/SafeNavigation:
   Enabled: false
 
-Metrics/LineLength:
+Layout/LineLength:
   Max: 120
 
 Style/StringLiterals:
@@ -50,6 +50,15 @@ Style/StringLiterals:
 Style/Documentation:
   Enabled: false
 
+Style/HashEachMethods:
+  Enabled: true
+
+Style/HashTransformKeys:
+  Enabled: true
+
+Style/HashTransformValues:
+  Enabled: true
+
 Lint/AssignmentInCondition:
   Exclude:
     - 'spec/dummy/bin/spring'
@@ -90,3 +99,22 @@ Style/GlobalVars:
 
 Style/FrozenStringLiteralComment:
   EnforcedStyle: always
+
+Layout/EmptyLinesAroundAttributeAccessor:
+  Enabled: true
+
+Layout/SpaceAroundMethodCallOperator:
+  Enabled: true
+
+Lint/RaiseException:
+  Enabled: true
+
+Lint/StructNewOverride:
+  Enabled: true
+
+Style/ExponentialNotation:
+  Enabled: true
+
+Style/SlicingWithRange:
+  Enabled: true
+

CHANGELOG.md

@@ -15,9 +15,6 @@ Please follow the recommendations outlined at [keepachangelog.com](http://keepac
 Changes since last non-beta release.
 
 *Please add entries here for your pull requests that are not yet released.*
-* Added support to export locales in JSON format. New option added `i18n_output_format` which allows to specify locales format either `json` or `js`.
-**`json` format is now the default**
-[PR 1271](https://github.com/shakacode/react_on_rails/pull/1271) by [ashgaliyev](https://github.com/ashgaliyev).
 
 ## UPCOMING 12.0 RELEASE
 ### [12.0.0]
@@ -38,6 +35,26 @@ for details.
 * Removal of support for old Rubies and Rails.
 * Removal of config.symlink_non_digested_assets_regex as it's no longer needed with rails/webpacker.
   If any business needs this, we can move the code to a separate gem.
+* Added configuration option `same_bundle_for_client_and_server` with default `false` because
+
+  1. Production applications would typically have a server bundle that differs from the client bundle
+  2. This change only affects trying to use HMR with react_on_rails with rails/webpacker. 
+
+  The previous behavior was to always go to the webpack-dev-server for the server bundle if the 
+  webpack-dev-server was running _and_ the server bundle was found in the `manifest.json`. 
+
+  If you are using the **same bundle for client and server rendering**, then set this configuration option
+  to `true`. By [justin808](https://github.com/shakacode/react_on_rails/pull/1240).
+
+* Added support to export locales in JSON format. New option added `i18n_output_format` which allows to
+  specify locales format either `JSON` or `JS`. **`JSON` format is now the default.**
+
+  Use this config setting to get the old behavior: config.i18n_output_format = 'js'
+
+  [PR 1271](https://github.com/shakacode/react_on_rails/pull/1271) by [ashgaliyev](https://github.com/ashgaliyev).
+
+#### Improved
+- Removed unnecessary restriction to keep the server bundle in the same directory with the client bundles. Rails/webpacker 4 has an advanced cleanup that will remove any files in the directory of other webpack files. Removing this restriction allows the server bundle to be created in a sibling directory. By [justin808](https://github.com/shakacode/react_on_rails/pull/1240).
 
 ### [11.3.0] - 2019-05-24
 #### Added

README.md

@@ -285,7 +285,8 @@ For details on using react_component_hash with react-helmet, see the docs below
 
 ## I18n
 
-You can enable the i18n functionality with [react-intl](https://github.com/yahoo/react-intl). React on Rails provides an option for automatic conversions of Rails `*.yml` locale files into `*.js` files for `react-intl`. See the [How to add I18n](docs/basics/i18n.md) for a summary of adding I18n.
+React on Rails provides an option for automatic conversions of Rails `*.yml` locale files into `*.json` or `*.js*.
+See the [How to add I18n](docs/basics/i18n.md) for a summary of adding I18n.
 
 ## More Details
 

docs/basics/configuration.md

@@ -65,52 +65,6 @@ ReactOnRails.configure do |config|
   # if you don't want react_on_rails building this file for you.
   config.build_production_command = "RAILS_ENV=production bin/webpack"
 
-  ################################################################################
-  ################################################################################
-  # TEST CONFIGURATION OPTIONS
-  # Below options are used with the use of this test helper:
-  # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
-  ################################################################################
-
-  # If you are using this in your spec_helper.rb (or rails_helper.rb):
-  #
-  # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
-  #
-  # with rspec then this controls what yarn command is run
-  # to automatically refresh your webpack assets on every test run.
-  #
-  config.build_test_command = "RAILS_ENV=test bin/webpack"
-
-  # Directory where your generated assets go. All generated assets must go to the same directory.
-  # If you are using webpacker, this value will come from your config/webpacker.yml file. 
-  # This is the default in webpacker.yml:
-  #   public_output_path: packs-test
-  # which means files in /public/packs-test
-  #
-  # Alternately, you may configure this if you are NOT using webpacker. It is relative to your Rails 
-  # root directory. A custom, non-webpacker, config might use something like:
-  #
-  # config.generated_assets_dir = File.join(%w[public webpack], Rails.env)
-  # This setting should not be used if using webpacker. 
-
-  # CONFIGURE YOUR SOURCE FILES 
-  # The test helper needs to know where your JavaScript files exist. The default is configured
-  # by your config/webpacker.yml soure_path:
-  # source_path: client/app/javascript # if using recommended /client directory
-  #
-  # If you are not using webpacker, the `node_modules_location` is assumed to be the location of your source
-  # files.
-
-  # Define the files we need to check for webpack compilation when running tests.
-  # The default is `%w( manifest.json )` as will be sufficient for most webpacker builds.
-  # However, if you are generated a server bundle that is NOT hashed (present in manifest.json),
-  # then include the file in this list like this: 
-  #
-  config.webpack_generated_files = %w( server-bundle.js manifest.json )
-
-  # You can optionally add values to your rails_context. See example below for RenderingExtension
-  # config.rendering_extension = RenderingExtension
-
   ################################################################################
   ################################################################################
   # SERVER RENDERING OPTIONS
@@ -127,27 +81,35 @@ ReactOnRails.configure do |config|
   # you should include a name that matches your bundle name in your webpack config.
   config.server_bundle_js_file = "server-bundle.js"
 
+  # THE BELOW OPTIONS FOR SERVER-SIDE RENDERING RARELY NEED CHANGING 
+  #
+  # This value only affects server-side rendering when using the webpack-dev-server 
+  # If you are hashing the server bundle and you want to use the same bundle for client and server,
+  # you'd set this to `true` so that React on Rails reads the server bundle from the webpack-dev-server.
+  # Normally, you have different bundles for client and server, thus, the default is false.
+  # Furthermore, if you are not hashing the server bundle (not in the manifest.json), then React on Rails
+  # will only look for the server bundle to be created in the typical file location, typically by
+  # a `webpack --watch` process. 
+  config.same_bundle_for_client_and_server = false
+
   # If set to true, this forces Rails to reload the server bundle if it is modified
   # Default value is Rails.env.development?
-  #
+  # You probably will never change this.
   config.development_mode = Rails.env.development?
 
-  # For server rendering so that it replays in the browser console.
+  # For server rendering so that the server-side console replays in the browser console.
   # This can be set to false so that server side messages are not displayed in the browser.
-  # Default is true. Be cautious about turning this off.
+  # Default is true. Be cautious about turning this off, as it can make debugging difficult.
   # Default value is true
-  # 
   config.replay_console = true
 
   # Default is true. Logs server rendering messages to Rails.logger.info. If false, you'll only
   # see the server rendering messages in the browser console.
-  #
   config.logging_on_server = true
 
   # Default is true only for development? to raise exception on server if the JS code throws for
   # server rendering. The reason is that the server logs will show the error and force you to fix
   # any server rendering issues immediately during development. 
-  # 
   config.raise_on_prerender_error = Rails.env.development? 
 
   ################################################################################
@@ -193,8 +155,47 @@ ReactOnRails.configure do |config|
   ################################################################################
   # default is false
   config.prerender = false
-end
 
+  # You can optionally add values to your rails_context. This object is passed
+  # every time a component renders.
+  # See example below for an example definition of RenderingExtension
+  #
+  # config.rendering_extension = RenderingExtension
+
+  ################################################################################
+  ################################################################################
+  # TEST CONFIGURATION OPTIONS
+  # Below options are used with the use of this test helper:
+  # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
+  # 
+  # NOTE:
+  # Instead of using this test helper, you may ensure fresh test files using rails/webpacker via:
+  # 1. Have `config/webpacker/test.js` exporting an array of objects to configure both client and server bundles.
+  # 2. Set the compile option to true in config/webpacker.yml for env test
+  ################################################################################
+
+  # If you are using this in your spec_helper.rb (or rails_helper.rb):
+  #
+  # ReactOnRails::TestHelper.configure_rspec_to_compile_assets(config)
+  #
+  # with rspec then this controls what yarn command is run
+  # to automatically refresh your webpack assets on every test run.
+  #
+  config.build_test_command = "RAILS_ENV=test bin/webpack"
+
+  # CONFIGURE YOUR SOURCE FILES 
+  # The test helper needs to know where your JavaScript files exist. The value is configured
+  # by your config/webpacker.yml source_path:
+  # source_path: client/app/javascript # if using recommended /client directory
+  #
+  # Define the files we need to check for webpack compilation when running tests.
+  # The default is `%w( manifest.json )` as will be sufficient for most webpacker builds.
+  # However, if you are generated a server bundle that is NOT hashed (present in manifest.json),
+  # then include the file in this list like this: 
+  config.webpack_generated_files = %w( server-bundle.js manifest.json )
+  # Note, be sure NOT to include your server-bundle.js if it is hashed, or else React on Rails will
+  # think the server-bundle.js is missing every time for test runs. 
+end
 ```
 
 Example of a RenderingExtension for custom values in the `rails_context`:

docs/basics/i18n.md

@@ -39,7 +39,8 @@ Here's a summary of adding the I18n functionality.
 
 # Generate locales with react-intl support
 
-By default the locales generated in JSON format. If you need to generate files in old-way, you can follow next steps:
+By default the locales generated in json format. If you need to generate files in the prior way
+with `react-intl` supported via js files:
 
 1. Specify i18n output format in `react_on_rails.rb`:
   ```rb

docs/basics/webpack-configuration.md

@@ -23,7 +23,21 @@ The [ShakaCode Team](http://www.shakacode.com) _recommends_ this approach for pr
 
 The two best examples of this pattern are the [react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial) and the integration test example in [spec/dummy](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy).
 
-In this case, you don't need to understand the nuances of customization of your Wepback config via the [Webpacker mechanism](./docs/additional-reading/webpack-tips.md).
+In this case, you don't need to understand the nuances of customization of your Webpack config via the [Webpacker mechanism](./docs/additional-reading/webpack-tips.md).
+
+You can access values in the `config/webpacker.yml`
+
+```js
+const { config, devServer } = require('@rails/webpacker');
+```
+
+You will want consider using some of the same values set in these files:
+
+* https://github.com/rails/webpacker/blob/master/package/environments/base.js
+* https://github.com/rails/webpacker/blob/master/package/environments/development.js
+
+**Note**, if your node_modules directory is not at the top level of the Rails project, then you will need to set the
+ENV value of WEBPACKER_CONFIG to the location of the `config/webpacker.yml` file per [rails/webpacker PR 2561](https://github.com/rails/webpacker/pull/2561).
 
 ## Option 2: Default Generator Setup: rails/webpacker app/javascript