Add option or ReactOnRails.render of hydrate (#1159)

To support React v16, updated API for 
ReactOnRails.render(name, props, domNodeId, hydrate) {

* Added 3rd @PARAM hydrate Pass truthy to update server rendered html. 
  Default is falsey Any truthy values calls hydrate rather than render

Other updates:
* upgraded react and react DOM, fixed breaking test
* updated all minor and patch release packages
* updated eslint and flow, fixed a few eslint errors, ignored a flow error
  added a few rules in eslintrc
* updated redux, no broken tests
* updated tap-spec and release-it
* updated dummy apps gemfile, specified version for miniracer
* poltergeist removal
* Updates to spec/dummy for new packages
* add prettier, but not enforcing
* Change String.match? to =~ b/c 
  Can't use match? on Ruby 2.2. Uncomment when Ruby 2.4 is
  used for all test platforms

Author: coopersamuel

.eslintrc

@@ -1,8 +1,11 @@
 ---
-extends: eslint-config-shakacode
+extends:
+  - eslint-config-shakacode
+  - prettier
+  - prettier/react
 
 plugins:
-  - react
+  - prettier
 
 globals:
   __DEBUG_SERVER_ERRORS__: true
@@ -15,6 +18,9 @@ env:
 
 rules:
   no-console: 0
+  function-paren-newline: 0
+  object-curly-newline: 0
+
 
   # https://github.com/benmosher/eslint-plugin-import/issues/340
   import/no-extraneous-dependencies: 0

.prettierignore

@@ -0,0 +1 @@
+node_modules

.prettierrc

@@ -0,0 +1,20 @@
+printWidth: 110
+tabWidth: 2
+useTabs: false
+semi: true
+singleQuote: true
+trailingComma: all
+bracketSpacing: true
+jsxBracketSameLine: false
+parser: flow
+
+overrides:
+- files: "*.@(css|scss)"
+  options:
+    parser: css
+    singleQuote: false
+    printWidth: 120
+- files: "*.@(json)"
+  options:
+    parser: json
+    printWidth: 100

CONTRIBUTING.md

@@ -127,14 +127,6 @@ _Note: running `npm i` automatically builds the npm package before installing. H
 ### Prereqs
 After checking out the repo, making sure you have rvm and nvm setup (setup ruby and node), cd to `spec/dummy` and run `bin/setup` to install ruby dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
 
-Additionally, our RSpec tests use the poltergeist web driver. You will need to install the phantomjs node module:
-
-```sh
-yarn global add phantomjs-prebuilt
-```
-
-Note this *must* be installed globally for the dummy test project rspec runner to see it properly.
-
 ### Local Node Package
 Because the example and dummy apps rely on the react-on-rails node package, they should link directly to your local version to pick up any changes you may have made to that package. To achieve this, switch to the dummy app's root directory and run this command below which runs something like [this script](spec/dummy/package.json#L14)
 
@@ -171,7 +163,7 @@ spec/dummy.
 
 ```sh
 # Optionally change default selenium_firefox driver
-export DRIVER=poltergeist
+export DRIVER=selenium_firefox
 cd react_on_rails/
 yarn run dummy:spec
 ```

Gemfile

@@ -32,7 +32,6 @@ gem "capybara"
 gem "capybara-screenshot"
 gem "chromedriver-helper"
 gem "launchy"
-gem "poltergeist"
 gem "rspec-rails"
 gem "rspec-retry"
 gem "selenium-webdriver"

Gemfile.rails32

@@ -65,7 +65,6 @@ group :test do
   gem "chromedriver-helper"
   gem "generator_spec"
   gem "launchy"
-  gem "poltergeist"
   gem "rspec-rails"
   gem "rspec-retry"
   gem "selenium-webdriver"

docs/additional-reading/images.md

@@ -39,7 +39,7 @@ const assetLoaderRules = [
 
 
 
-A full example can be found at [spec/dummy/client/app/components/ImageExample/ImageExample.js](../../spec/dummy/client/app/components/ImageExample/ImageExample.js)
+A full example can be found at [spec/dummy/client/app/components/ImageExample/ImageExample.jsx](../../spec/dummy/client/app/components/ImageExample/ImageExample.jsx)
 
 You are free to use images either in image tags or as background images in SCSS files. You can 
 use a "global" location of /client/app/assets/images or a relative path to your JS or SCSS file, as

docs/additional-reading/rails_view_rendering_from_inline_javascript.md

@@ -12,9 +12,10 @@ You can easily render React components in your JavaScript with `render` method t
  * @param name Name of your registered component
  * @param props Props to pass to your component
  * @param domNodeId
+ * @param hydrate [optional] Pass truthy to update server rendered html. Default is falsy
  * @returns {virtualDomElement} Reference to your component's backing instance
  */
-ReactOnRails.render(componentName, props, elementId)
+ReactOnRails.render(componentName, props, domNodeId)
 ```
 
 ## Why do we need this?

docs/api/view-helpers-api.md

@@ -41,7 +41,7 @@ adding meta-tags to a page. It is exactly like react_component except for the fo
 
 1. `prerender: true` is automatically added to options, as this method doesn't make sense for 
    client only rendering.
-2. Your JavaScript for server rendering must return an Object for the key `server_rendered_html`.
+2. Your JavaScript generator 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.
 
 Here is an example of ERB view code:

docs/misc-pending/code-splitting.md

@@ -21,7 +21,7 @@ Different markup is generated on the client than on the server. Why does this ha
 
 ### The solution
 
-To prevent this, you have to wait until the code chunk is fetched before doing the initial render on the client side. To accomplish this, react on rails allows you to register a renderer. This works just like registering a generator function, except that the function you pass takes three arguments: `renderer(props, railsContext, domNodeId)`, and is responsible for calling `ReactDOM.render` to render the component to the DOM. React on rails will automatically detect when a generator function takes three arguments, and will not call `ReactDOM.render`, instead allowing you to control the initial render yourself.
+To prevent this, you have to wait until the code chunk is fetched before doing the initial render on the client side. To accomplish this, react on rails allows you to register a renderer. This works just like registering a generator function, except that the function you pass takes three arguments: `renderer(props, railsContext, domNodeId)`, and is responsible for calling `ReactDOM.render` or `ReactDOM.hydrate` to render the component to the DOM. React on rails will automatically detect when a generator function takes three arguments, and will not call `ReactDOM.render` or `ReactDOM.hydrate`, instead allowing you to control the initial render yourself. Note, you have to be careful to call `ReactDOM.hydrate` rather than `ReactDOM.render` if you are are server rendering.
 
 Here's an example of how you might use this in practice:
 
@@ -115,7 +115,7 @@ See:
 
 - [spec/dummy/client/app/startup/clientRegistration.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/clientRegistration.jsx)
 - [spec/dummy/client/app/startup/serverRegistration.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/serverRegistration.jsx)
-- [spec/dummy/client/app/startup/DeferredRenderAppRenderer.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/DeferredRenderAppRenderer.jsx) <-- Code splitting implemented here
+- [spec/dummy/client/app/startup/DeferredRenderAppClient](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/DeferredRenderAppClient.jsx)<-- Code splitting implemented here
 - [spec/dummy/client/app/startup/DeferredRenderAppServer.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/startup/DeferredRenderAppServer.jsx)
 - [spec/dummy/client/app/components/DeferredRender.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/components/DeferredRender.jsx)
 - [spec/dummy/client/app/components/DeferredRenderAsyncPage.jsx](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/client/app/components/DeferredRenderAsyncPage.jsx)