react_on_rails 12.0.1 → 13.0.0

data/docs/additional-details/recommended-project-structure.md

@@ -0,0 +1,69 @@
+# Recommended Project structure
+
+The React on Rails generator uses the standard `rails/webpacker` convention of this structure:
+
+```yml
+app/javascript:
+  ├── bundles:
+  │   # Logical groups of files that can be used for code splitting
+  │   └── hello-world-bundle.js
+  ├── packs:
+  │   # only webpack entry files here
+  │   └── hello-world-bundle.js
+```
+
+Per the example repo [shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh](https://github.com/shakacode/react_on_rails_tutorial_with_ssr_and_hmr_fast_refresh),
+you should consider keeping your codebase mostly consistent with the defaults for [rails/webpacker](https://github.com/rails/webpacker).
+
+## Steps to convert from the generator defaults to use a `/client` directory for source code 
+
+1. Move the directory:
+
+```
+mv app/javascript client
+```
+
+2. Edit your `/config/webpacker.yml` file. Change the `default/source_path`:
+
+```yml
+  source_path: client
+```
+
+## Moving node_modules from `/` to `/client` with a custom webpack setup.
+
+`rails/webpacker` probably doesn't support having your main node_modules directory under `/client`, so only follow these steps if you want to use your own webpack configuration.
+
+1. Move the `/package.json` to `/client/package.json`
+2. Create a `/package.json` that delegates to `/client/package.json`. 
+   ```
+     "scripts": {
+       "heroku-postbuild": "cd ./client && yarn"
+     },
+   ```
+3. 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).
+
+## CSS, Sass, Fonts, and Images
+Should you move your styling assets to Webpack? Or stick with the plain Rails asset pipeline. It depends!
+
+Here's a good discussion of this option: [Why does Rails 6 include both Webpacker and Sprockets?](https://rossta.net/blog/why-does-rails-install-both-webpacker-and-sprockets.html). 
+
+You have 2 basic choices:
+
+### Simple Rails Way
+This isn't really any technique, as you keep handling all your styling assets using Rails standard tools, such as using the [sass-rails gem](https://rubygems.org/gems/sass-rails/versions/5.0.4). Basically, Webpack doesn't get involved with styling. Your Rails layouts just doing the styling the standard Rails way.
+
+#### Advantages to the Simple Rails Way
+1. Much simpler! There's no changes really from your current processes.
+
+### Using Webpack to Manage Styling Assets
+This technique involves customization of the webpack config files to generate CSS, image, and font assets. 
+
+#### Directory structure
+1. `/client/app/assets`: Assets for CSS for client app.
+1. `/client/app/assets/fonts` and `/client/app/assets/styles`: Globally shared assets for styling. Note, most Sass and image assets will be stored next to the JavaScript files.
+
+#### Advantages to having Webpack Manage Styles
+1. You can use [CSS modules](https://github.com/css-modules/css-modules), which is super compelling once you seen the benefits.
+1. You can use CSS in JS.
+1. You can do hot reloading of your assets. Thus, you do not have to refresh your web page to see asset change, including changing styles.

data/docs/additional-details/upgrade-webpacker-v3-to-v4.md

@@ -0,0 +1,10 @@
+# Upgrading rails/webpacker v3.5 to v4
+
+The following steps can be followed to update a Webpacker v3.5 app to v4.
+
+1. Update the gem `webpacker` and the package `@rails/webpacker`
+1. Merge changes from the new default [.babelrc](https://github.com/shakacode/react_on_rails/tree/master/lib/install/config/.babelrc) to your `/.babelrc`. If you are using React, you need to add `"@babel/preset-react"`, to the list of `presets`.
+1. Copy the file [.browserslistrc](https://github.com/shakacode/react_on_rails/tree/master/lib/install/config/.browserslistrc) to `/`.
+1. Merge any differences between [config/webpacker.yml](https://github.com/shakacode/react_on_rails/tree/master/lib/install/config/webpacker.yml) and your `/config/webpacker.yml`.
+
+Here is an [example commit of these changes](https://github.com/shakacode/react_on_rails-tutorial-v11/pull/1/files).

data/docs/api/javascript-api.md

@@ -34,7 +34,7 @@ The best source of docs is the main [ReactOnRails.js](https://github.com/shakaco
    * Your Ruby code with get this Object as a Hash containing keys componentHtml and any other
    * custom keys that you added:
    * { renderedHtml: { componentHtml, customKey1, customKey2 } }
-   * See the example in /docs/additional-reading/react-helmet.md
+   * See the example in https://www.shakacode.com/react-on-rails/docs/javascript/react-helmet
    * @param components (key is component name, value is component)
    */
   register(components)
@@ -69,7 +69,7 @@ The best source of docs is the main [ReactOnRails.js](https://github.com/shakaco
    * Allow directly calling the page loaded script in case the default events that trigger react
    * rendering are not sufficient, such as when loading JavaScript asynchronously with TurboLinks:
    * More details can be found here:
-   * https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/turbolinks.md
+   * https://www.shakacode.com/react-on-rails/docs/rails/turbolinks
    */
   reactOnRailsPageLoaded()
 

data/docs/api/redux-store-api.md

@@ -13,7 +13,7 @@ Consider using the `redux_store` helper for the two following use cases:
 
 ## Multiple React Components on a Page with One Store
 
-You may wish to have 2 React components share the same the Redux store. For example, if your navbar is a React component, you may want it to use the same store as your component in the main area of the page. You may even want multiple React components in the main area, which allows for greater modularity. Also, you may want this to work with Turbolinks to minimize reloading the JavaScript. 
+You may wish to have 2 React components share the same the Redux store. For example, if your navbar is a React component, you may want it to use the same store as your component in the main area of the page. You may even want multiple React components in the main area, which allows for greater modularity. Also, you may want this to work with Turbolinks to minimize reloading the JavaScript.
 
 A good example of this would be something like a notifications counter in a header. As each notification is read in the body of the page, you would like to update the header. If both the header and body share the same Redux store, then this is trivial. Otherwise, we have to rely on other solutions, such as the header polling the server to see how many unread notifications exist.
 
@@ -98,5 +98,5 @@ Place this view helper (no parameters) at the end of your shared layout so React
 
 # More Details
 
-* [lib/react_on_rails/controller.rb](../../lib/react_on_rails/controller.rb) source
-* [lib/react_on_rails/helper.rb](../../lib/react_on_rails/helper.rb) source
+* [lib/react_on_rails/controller.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/controller.rb) source
+* [lib/react_on_rails/helper.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/helper.rb) source

data/docs/api/view-helpers-api.md

@@ -23,7 +23,7 @@ Uncommonly used options:
 ```
 
 - **component_name:** Can be a React component, created using a React Function Component, an ES6 class or a Render-Function that returns a React component (or, only on the server side, an object with shape { redirectLocation, error, renderedHtml }), or a "renderer function" that manually renders a React component to the dom (client side only). Note, a "renderer function" is a special type of "Render-Function." A "renderer function" takes a 3rd param of a DOM ID.
-  All options except `props, id, html_options` will inherit from your `react_on_rails.rb` initializer, as described [here](../basics/configuration.md).
+  All options except `props, id, html_options` will inherit from your `react_on_rails.rb` initializer, as described [here](https://www.shakacode.com/react-on-rails/docs/guides/configuration/).
 - **general options:**
   - **props:** Ruby Hash which contains the properties to pass to the react object, or a JSON string. If you pass a string, we'll escape it for you.
   - **prerender:** enable server-side rendering of a component. Set to false when debugging!
@@ -43,7 +43,7 @@ Uncommonly used options:
 `react_component_hash` is used to return multiple HTML strings for server rendering, such as for
 adding meta-tags to a page. It is exactly like react_component except for the following:
 
-1. `prerender: true` is automatically added to options, as this method doesn't make sense for 
+1. `prerender: true` is automatically added to options, as this method doesn't make sense for
    client only rendering.
 2. Your JavaScript Render-Function for server rendering must return an Object rather than a React Component.
 3. Your view code must expect an object and not a string.
@@ -100,7 +100,7 @@ You can call `rails_context` or `rails_context(server_side: true|false)` from yo
 
 A "renderer function" is a Render-Function that accepts three arguments (rather than 2): `(props, railsContext, domNodeId) => { ... }`. Instead of returning a React component, a renderer is responsible for installing a callback that will call `ReactDOM.render` (in React 16+, `ReactDOM.hydrate`) to render a React component into the DOM. The "renderer function" is called at the same time the document ready event would instantate the React components into the DOM.
 
-Why would you want to call `ReactDOM.hydrate` yourself? One possible use case is [code splitting](docs/outdated/code-splitting.md). In a nutshell, you don't want to load the React component on the DOM node yet. So you want to install some handler that will call `ReactDOM.hydrate` at a later time. In the case of code splitting with server rendering, the server rendered code has any async code loaded and used to server render. Thus, the client code must also fully load any asynch code before server rendering. Otherwise, the client code would first render partially, not matching the server rendering, and then a second later, the full code would render, resulting in an unpleasant flashing on the screen.
+Why would you want to call `ReactDOM.hydrate` yourself? One possible use case is [code splitting](https://www.shakacode.com/react-on-rails/docs/javascript/code-splitting/). In a nutshell, you don't want to load the React component on the DOM node yet. So you want to install some handler that will call `ReactDOM.hydrate` at a later time. In the case of code splitting with server rendering, the server rendered code has any async code loaded and used to server render. Thus, the client code must also fully load any asynch code before server rendering. Otherwise, the client code would first render partially, not matching the server rendering, and then a second later, the full code would render, resulting in an unpleasant flashing on the screen.
 
 Renderer functions are not meant to be used on the server since there's no DOM on the server. Instead, use a Render-Function. Attempting to server render with a renderer function will throw an error.
 
@@ -110,9 +110,9 @@ Renderer functions are not meant to be used on the server since there's no DOM o
 
 [React Router](https://github.com/reactjs/react-router) is supported, including server-side rendering! See:
 
-1. [React on Rails docs for react-router](../additional-reading/react-router.md)
-2. Examples in [spec/dummy/app/views/react_router](../../spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/ServerRouterApp.jsx](../../spec/dummy/client/app/startup/ServerRouterApp.jsx).
-3. [Code Splitting docs](docs/outdated/code-splitting.md) for information about how to set up code splitting for server rendered routes.
+1. [React on Rails docs for react-router](https://www.shakacode.com/react-on-rails/docs/javascript/react-router/)
+2. Examples in [spec/dummy/app/views/react_router](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/ServerRouterApp.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/ServerRouterApp.jsx).
+3. [Code Splitting docs](https://www.shakacode.com/react-on-rails/docs/javascript/code-splitting/) for information about how to set up code splitting for server rendered routes.
 
 ------------
 
@@ -129,5 +129,4 @@ This is a helper method that takes any JavaScript expression and returns the out
 
 # More details
 
-See the [lib/react_on_rails/helper.rb](../../lib/react_on_rails/helper.rb) source.
-
+See the [lib/react_on_rails/helper.rb](https://github.com/shakacode/react_on_rails/tree/master/lib/react_on_rails/helper.rb) source.

data/docs/contributor-info/linters.md

@@ -1,5 +1,5 @@
 # Linters
-These linters support the [ShakaCode Style Guidelines](./style.md)
+These linters support the [ShakaCode Style Guidelines](https://www.shakacode.com/react-on-rails/docs/misc/style/)
 
 ## Autofix!
 
@@ -15,9 +15,9 @@ If you haven't tried the autofix options for `eslint` and `rubocop`, you're seri
   ```
   eslint --fix .
   ```
-  
-  or 
-  
+
+  or
+
   ```
   npm run lint -- --fix
   ```
@@ -32,7 +32,7 @@ Rules are configured with a 0, 1 or 2. Setting a rule to 0 is turning it off, se
 
 Rules can also take a few additional options. In this case, the rule can be set to an array, the first item of which is the 0/1/2 flag and the rest are options.
 
-See file [.eslintrc](../../client/.eslintrc) for examples of configuration
+See file [.eslintrc](https://github.com/shakacode/react_on_rails/tree/master/.eslintrc) for examples of configuration
 
 ### Specify/Override rules in code
 
@@ -66,4 +66,3 @@ You can disable all rules for a line or block, or only specific rules, as shown
 * [ESLint quick start](http://untilfalse.com/eslint-quick-start/)
 * [RuboCop](https://github.com/bbatsov/rubocop)
 * [ESLint](http://eslint.org/)
-

data/docs/contributor-info/pull-requests.md

@@ -1,4 +1,4 @@
-# Pull Requests 
+# Pull Requests
 
 ## Checklist before Committing
 1. `rake`: runs all linters and specs (you need Docker setup, see below)
@@ -36,9 +36,7 @@ When making doc changes, we want the change to work on both the gitbook and the
 
 ### Links to other docs:
 * When making references to doc files, use a relative URL path like:
-`[Installation Overview](docs/basics/installation-overview.md)`
+`[Installation Overview](https://www.shakacode.com/react-on-rails/docs/additional-details/manual-installation-overview/)`
 
 * When making references to source code files, use a full url path like:
 `[spec/dummy/config/initializers/react_on_rails.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/config/initializers/react_on_rails.rb)`
-
-

data/docs/contributor-info/releasing.md

@@ -3,7 +3,7 @@
 We're now releasing this as a combined ruby gem plus npm package. We will keep the version numbers in sync.
 
 ## Testing the Gem before Release from a Rails App
-See [Contributing](../../CONTRIBUTING.md)
+See [Contributing](https://github.com/shakacode/react_on_rails/tree/master/CONTRIBUTING.md)
 
 ## Releasing a new gem version
 Run `rake -D release` to see instructions on how to release via the rake task.

data/docs/{basics → deployment}/heroku-deployment.md

@@ -16,9 +16,20 @@ For more information, see [Using Multiple Buildpacks for an App](https://devcent
 
 ### rails/webpacker webpack configuration
 If you're using the standard rails/webpacker configuration of webpack, then rails/webpacker
-will automatically modify or create an assets:precompile task to build your assets.
+will automatically modify or create an assets:precompile task to build your assets. 
 
-### custom webpack configuration
-If you're a custom webpack configuration, and you **do not have the default
-`config/webpack/production.js`** file, then the `config/initializers/react_on_rails.rb`
-configuration `config.build_production_command` will be used.
+Alternatively, you can specify `config.build_production_command` to have
+react_on_rails invoke a command for you during assets:precompile.
+
+```
+config.build_production_command = "RAILS_ENV=production NODE_ENV=production bin/webpacker"
+```
+
+### Consider Removing Webpacker's clean task
+
+If you are deploying on Heroku, then you don't need Webpacker's clean task which
+might delete files that you need.
+
+```
+Rake::Task['webpacker:clean'].clear
+```

data/docs/{basics → guides}/client-vs-server-rendering.md

@@ -1,9 +1,11 @@
 # Client-Side Rendering vs. Server-Side Rendering
 
+*Also, see [our react server-rendering documentation](https://www.shakacode.com/react-on-rails/docs/guides/react-server-rendering/).*
+
 In most cases, you should use the `prerender: false` (default behavior) with the provided helper method to render the React component from your Rails views. In some cases, such as when SEO is vital, or many users will not have JavaScript enabled, you can enable server-rendering by passing `prerender: true` to your helper, or you can simply change the default in `config/initializers/react_on_rails`.
 
 Now the server will interpret your JavaScript. The default is to use [ExecJS](https://github.com/rails/execjs) and pass the resulting HTML to the client. We recommend using [mini_racer](https://github.com/discourse/mini_racer) as ExecJS's runtime.
- 
+
 If you want to maximize the perfomance of your server rendering, then you want to use React on Rails Pro which uses NodeJS to do the server rendering. See the [docs for React on Rails Pro](https://github.com/shakacode/react_on_rails/wiki).
 
 If you open the HTML source of any web page using React on Rails, you'll see the 3 parts of React on Rails rendering:
@@ -16,7 +18,7 @@ If you open the HTML source of any web page using React on Rails, you'll see the
 
 # Different Server-Side Rendering Code (and a Server-Specific Bundle)
 
-You may want different code for your server-rendered components running server side versus client side. For example, if you have an animation that runs when a component is displayed, you might need to turn that off when server rendering. One way to handle this is conditional code like `if (window) { doClientOnlyCode() }`. 
+You may want different code for your server-rendered components running server side versus client side. For example, if you have an animation that runs when a component is displayed, you might need to turn that off when server rendering. One way to handle this is conditional code like `if (window) { doClientOnlyCode() }`.
 
 Another way is to use a separate webpack configuration file that can use a different server side entry file, like  'serverRegistration.js' as opposed to 'clientRegistration.js.' That would set up different code for server rendering.
 

data/docs/{basics → guides}/configuration.md

@@ -12,7 +12,7 @@ default: &default
   # public_output_path folder
   manifest: manifest.json
   cache_manifest: false
-  
+
   # Source path is used to check if webpack compilation needs to be run for `compile: true`
   source_path: client/app
 
@@ -24,7 +24,7 @@ development:
 test:
   <<: *default
   # Ensure that webpacker invokes webpack to build files for tests if not using the
-  #   ReactOnRails rspec helper. 
+  #   ReactOnRails rspec helper.
   compile: true
 
   # Generated files for tests, in /public/webpack/test
@@ -49,7 +49,7 @@ for all client files, including your sources and node_modules.
 ReactOnRails.configure do |config|
   # `trace`: General debugging flag.
   # The default is true for development, off otherwise.
-  # With true, you get detailed logs of rendering and stack traces if you call setTimout, 
+  # With true, you get detailed logs of rendering and stack traces if you call setTimout,
   # setInterval, clearTimout when server rendering.
   config.trace = Rails.env.development? # default
 
@@ -57,28 +57,35 @@ ReactOnRails.configure do |config|
   # false ==> Sets the dom id to "#{react_component_name}-react-component"
   # true ==> Adds "-#{SecureRandom.uuid}" to that ID
   # If you might use multiple instances of the same React component on a Rails page, then
-  # it is convenient to set this to true or else you have to either manually set the ids to 
+  # it is convenient to set this to true or else you have to either manually set the ids to
   # avoid collisions. Most newer apps will have only one instance of a component on a page,
   # so this should be false in most cases.
   # This value can be overridden for a given call to react_component
   config.random_dom_id = true # default
 
-  # defaults to "" (top level)	
-  config.node_modules_location = "client" # If using webpacker you should use "".	
-  
-  # This configures the script to run to build the production assets by webpack . Set this to nil	
-  # if you don't want react_on_rails building this file for you.	
-  # Note, if you want to use this command then you should remove the file	
-  # config/webpack/production.js	
-  # If that file exists, React on Rails thinks that you'll use the rails/webpacker bin/webpack compiler.	
-  config.build_production_command = "RAILS_ENV=production bin/webpack"
+  # defaults to "" (top level)
+  config.node_modules_location = "client" # If using webpacker you should use "".
+
+  # If you're using the standard rails/webpacker configuration of webpack, then rails/webpacker
+  # will automatically modify or create an assets:precompile task to build your assets. If so,
+  # set this value to nil.  Alternatively, you can specify `config.build_production_command`
+  # to have react_on_rails invoke a command for you during assets:precompile.
+  # The command is either a script or a module containing a class method `call`
+  # In this example, the module BuildProductionCommand would have a class method `call`.
+  config.build_production_command = "RAILS_ENV=production bin/webpacker"
+
+  # See bottom for an example of the BuildProductionCommand module.
+  # config.build_production_command = BuildProductionCommand
+  # If you wish to utilize ReactOnRailsPro production bundle caching logic, then use
+  # config.build_production_command = ReactOnRailsPro::AssetsPrecompile
+  # and be sure to check ReactOnRailsPro's configuration documentation!
 
   ################################################################################
   ################################################################################
   # SERVER RENDERING OPTIONS
   ################################################################################
   # This is the file used for server rendering of React when using `(prerender: true)`
-  # If you are never using server rendering, you should set this to "".
+  # If you are not using server rendering, you should set this to `nil`.
   # Note, there is only one server bundle, unlike JavaScript where you want to minimize the size
   # of the JS sent to the client. For the server rendering, React on Rails creates a pool of
   # JavaScript execution instances which should handle any component requested.
@@ -89,9 +96,9 @@ 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 
+  # THE BELOW OPTIONS FOR SERVER-SIDE RENDERING RARELY NEED CHANGING
   #
-  # This value only affects server-side rendering when using the webpack-dev-server 
+  # 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.
@@ -101,7 +108,7 @@ ReactOnRails.configure do |config|
   # If true, ensure that in config/webpacker.yml that you have both dev_server.hmr and
   # dev_server.inline set to false.
   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.
@@ -119,16 +126,21 @@ ReactOnRails.configure do |config|
 
   # 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? 
+  # any server rendering issues immediately during development.
+  config.raise_on_prerender_error = Rails.env.development?
+
+  # This configuration allows logic to be applied to client rendered props, such as stripping props that are only used during server rendering.
+  # Add a module with an adjust_props_for_client_side_hydration method that expects the component's name & props hash
+  # See below for an example definition of RenderingPropsExtension
+  config.rendering_props_extension = RenderingPropsExtension
 
   ################################################################################
   # Server Renderer Configuration for ExecJS
   ################################################################################
   # The default server rendering is ExecJS, probably using the mini_racer gem
-  # If you wish to use an alternative Node server rendering for higher performance, 
+  # If you wish to use an alternative Node server rendering for higher performance,
   # contact justin@shakacode.com for details.
-  # 
+  #
   # For ExecJS:
   # You can configure your pool of JS virtual machines and specify where it should load code:
   # On MRI, use `mini_racer` for the best performance
@@ -153,7 +165,7 @@ ReactOnRails.configure do |config|
   # By default(without this option) all yaml files from Rails.root.join("config", "locales")
   # and installed gems are loaded
   config.i18n_yml_dir = Rails.root.join("config", "locales")
-  
+
   # Possible output formats are js and json
   # The default format is json
   config.i18n_output_format = 'json'
@@ -169,22 +181,21 @@ ReactOnRails.configure do |config|
 
   # 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
+  # See 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)
@@ -192,9 +203,9 @@ ReactOnRails.configure do |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"
+  config.build_test_command = "RAILS_ENV=test bin/webpacker"
 
-  # CONFIGURE YOUR SOURCE FILES 
+  # 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 # if using recommended /client directory
@@ -202,10 +213,33 @@ ReactOnRails.configure do |config|
   # 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: 
+  # 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. 
+  # think the server-bundle.js is missing every time for test runs.
+end
+```
+
+Example of a ReactOnRailsConfig module for `client_props_extension`:
+
+```ruby
+module RenderingPropsExtension
+  # The modify_props method will be called by ReactOnRails::ReactComponent::RenderOptions if config.client_props_extension is defined
+  def self.adjust_props_for_client_side_hydration(component_name, props)
+    component_name == 'HelloWorld' ? props.except(:server_side_only) : props
+  end
+end
+```
+
+Example of a ReactOnRailsConfig module for `production_build_command`:
+
+```ruby
+module BuildProductionCommand
+  include FileUtils
+  # The call method will be called during assets:precompile
+  def self.call
+    sh "bin/webpacker"
+  end
 end
 ```
 

data/docs/guides/deployment.md

@@ -0,0 +1,4 @@
+# Deployment
+
+- `rails/webpacker` puts the necessary precompile steps automatically in the rake precompile step.
+- See the [Heroku Deployment](https://www.shakacode.com/react-on-rails/docs/deployment/heroku-deployment/) doc for specifics regarding Heroku. The information for Heroku may apply to other deployments.