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)

lib/react_on_rails/helper.rb

@@ -136,7 +136,7 @@ def react_component(component_name, options = {})
     # It is exactly like react_component except for the following:
     # 1. prerender: true is automatically added, 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 the view code:

node_package/src/ReactOnRails.js

@@ -153,14 +153,16 @@ ctx.ReactOnRails = {
    * @param name Name of your registered component
    * @param props Props to pass to your component
    * @param domNodeId
+   * @param hydrate Pass truthy to update server rendered html. Default is falsy
    * @returns {virtualDomElement} Reference to your component's backing instance
    */
-  render(name, props, domNodeId) {
+  render(name, props, domNodeId, hydrate) {
     const componentObj = ComponentRegistry.get(name);
     const reactElement = createReactElement({ componentObj, props, domNodeId });
 
+    const render = hydrate ? ReactDOM.hydrate : ReactDOM.render;
     // eslint-disable-next-line react/no-render-return-value
-    return ReactDOM.render(reactElement, document.getElementById(domNodeId));
+    return render(reactElement, document.getElementById(domNodeId));
   },
 
   /**

node_package/src/buildConsoleReplay.js

@@ -5,6 +5,7 @@ import scriptSanitizedVal from './scriptSanitizedVal';
 
 export function consoleReplay() {
   // console.history is a global polyfill used in server rendering.
+  // $FlowFixMe
   if (!(console.history instanceof Array)) {
     return '';
   }

node_package/src/clientStartup.js

@@ -204,7 +204,7 @@ function renderInit() {
 }
 
 export function clientStartup(context) {
-  const document = context.document;
+  const { document } = context;
 
   // Check if server rendering
   if (!document) {

node_package/src/serverRenderReactComponent.js

@@ -42,7 +42,7 @@ See https://github.com/shakacode/react_on_rails#renderer-functions`);
 
       if (reactElementOrRouterResult.redirectLocation) {
         if (trace) {
-          const redirectLocation = reactElementOrRouterResult.redirectLocation;
+          const { redirectLocation } = reactElementOrRouterResult;
           const redirectPath = redirectLocation.pathname + redirectLocation.search;
           console.log(`\
 ROUTER REDIRECT: ${name} to dom node with id: ${domNodeId}, redirect to ${redirectPath}`,

node_package/tests/ReactOnRails.test.js

@@ -21,7 +21,7 @@ test('ReactOnRails render returns a virtual DOM element for component', (assert)
   ReactOnRails.register({ R1 });
 
   // eslint-disable-next-line no-underscore-dangle
-  const actual = ReactOnRails.render('R1', {}, 'root')._reactInternalInstance._currentElement.type;
+  const actual = ReactOnRails.render('R1', {}, 'root')._reactInternalFiber.type;
   assert.deepEqual(actual, R1,
     'ReactOnRails render should return a virtual DOM element for component');
 });

node_package/tests/buildConsoleReplay.test.js

@@ -61,8 +61,11 @@ console.warn.apply(console, ["other message","{\\"c\\":3,\\"d\\":4}"]);`;
 test('consoleReplay replays converts script tag inside of object string to be safe ', (assert) => {
   assert.plan(1);
   console.history = [
-    { arguments: ['some message </script><script>alert(\'WTF\')</script>',
-      { a: 'Wow</script><script>alert(\'WTF\')</script>', b: 2 }],
+    {
+      arguments: [
+        'some message </script><script>alert(\'WTF\')</script>',
+        { a: 'Wow</script><script>alert(\'WTF\')</script>', b: 2 },
+      ],
       level: 'log',
     },
     { arguments: ['other message', { c: 3, d: 4 }], level: 'warn' },

package-scripts.yml

@@ -0,0 +1,46 @@
+scripts:
+  lint:
+    description: Run all linters (eslint, flow)
+    script: concurrently --prefix "[{name}]" --names "ESLINT" -c "blue,yellow,magenta,orange" "nps eslint"
+
+  eslint:
+    default:
+      description: Run eslint.
+      script: eslint . --ext ".js,.jsx"
+    fix:
+      description: Run eslint and auto-fix.
+      script: nps "eslint --fix"
+    debug:
+      description: Run eslint in debug mode.
+      script: DEBUG=eslint:cli-engine nps eslint
+
+  format:
+    default:
+      description: Format files using prettier.
+      script: concurrently --prefix "[{name}]" --names "js,json" -c "yellow,magenta,green" "nps format.js" "nps format.json"
+    listDifferent:
+      description: Check that all files were formatted using prettier.
+      script: |
+        concurrently \
+          --prefix "[{name}]" \
+          --names "js,css,json" \
+          -c "yellow,magenta,green" \
+          "nps format.js.listDifferent" \
+          "nps format.json.listDifferent"
+    js:
+      default:
+        description: Run prettier-eslint on JS.
+        script: prettier "packages/**/*.@(js|jsx)" "spec/dummy/client/app/**/*.@(js|jsx)" "webpack.config.babel.js" "webpack/**/*.js" --write
+      listDifferent:
+        description: Check if any JS files would change by running prettier-eslint.
+        script: prettier "**/*.@(js|jsx)" "webpack.config.babel.js" "webpack/**/*.js" --list-different
+    json:
+      default:
+        description: Run prettier on JSON files.
+        script: rm -rf packages/vm-renderer/tests/tmp && prettier "**/*.json" --write
+      listDifferent:
+        description: Check if any JSON files would change by running prettier-eslint.
+        script: prettier "**/*.json" "../spec/**/*.json" --list-different
+  renderer:
+    description: Starts the node renderer.
+    script: node renderer.js

package.json

@@ -16,23 +16,25 @@
     "@babel/types": "^7.0.0",
     "babel-loader": "^8.0.2",
     "babel-tape-runner": "^3.0.0",
-    "babelify": "^7.3.0",
+    "babelify": "^10.0.0",
     "blue-tape": "^1.0.0",
     "create-react-class": "^15.6.0",
-    "eslint": "^3.19.0",
-    "eslint-config-shakacode": "^15.0.0",
+    "eslint": "^5.7.0",
+    "eslint-config-prettier": "^3.1.0",
+    "eslint-config-shakacode": "^16.0.1",
     "eslint-plugin-import": "^2.6.1",
-    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-jsx-a11y": "^6.1.2",
+    "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react": "^7.1.0",
-    "flow-bin": "^0.51.1",
+    "flow-bin": "^0.83.0",
     "jsdom": "^11.1.0",
     "prop-types": "^15.5.10",
-    "react": "^15.6.1",
-    "react-dom": "^15.6.1",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
     "react-transform-hmr": "^1.0.4",
-    "redux": "^3.7.2",
-    "release-it": "^2.8.2",
-    "tap-spec": "^4.1.1",
+    "redux": "^4.0.1",
+    "release-it": "^7.6.2",
+    "tap-spec": "^5.0.0",
     "tape": "^4.7.0",
     "webpack": "^3.4.1",
     "webpack-manifest-plugin": "^1.2.1"
@@ -85,6 +87,9 @@
   },
   "homepage": "https://github.com/shakacode/react_on_rails#readme",
   "dependencies": {
-    "@babel/runtime-corejs2": "^7.0.0"
+    "@babel/runtime-corejs2": "^7.0.0",
+    "nps": "^5.9.3",
+    "prettier": "^1.14.3",
+    "prettier-eslint-cli": "^4.7.1"
   }
 }

spec/dummy/.prettierignore

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

spec/dummy/.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

spec/dummy/Gemfile

@@ -71,7 +71,6 @@ group :test do
   gem "equivalent-xml", github: "mbklein/equivalent-xml"
   gem "generator_spec"
   gem "launchy"
-  gem "poltergeist"
   gem "rspec-rails"
   gem "rspec-retry"
   gem "selenium-webdriver"

spec/dummy/Gemfile.lock

@@ -7,7 +7,7 @@ GIT
 PATH
   remote: ../..
   specs:
-    react_on_rails (11.1.1)
+    react_on_rails (11.1.8)
       addressable
       connection_pool
       execjs (~> 2.5)
@@ -86,7 +86,6 @@ GEM
     chromedriver-helper (1.2.0)
       archive-zip (~> 0.10)
       nokogiri (~> 1.8)
-    cliver (0.3.2)
     coderay (1.1.2)
     coffee-rails (4.2.2)
       coffee-script (>= 2.2.0)
@@ -130,7 +129,7 @@ GEM
     json (2.1.0)
     launchy (2.4.3)
       addressable (~> 2.3)
-    libv8 (6.3.292.48.1)
+    libv8 (6.7.288.46.1)
     listen (3.1.5)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
@@ -146,8 +145,8 @@ GEM
     mimemagic (0.3.2)
     mini_mime (1.0.0)
     mini_portile2 (2.3.0)
-    mini_racer (0.1.15)
-      libv8 (~> 6.3)
+    mini_racer (0.2.3)
+      libv8 (>= 6.3)
     minitest (5.11.3)
     msgpack (1.2.4)
     multi_json (1.13.1)
@@ -157,10 +156,6 @@ GEM
     parallel (1.12.1)
     parser (2.5.1.2)
       ast (~> 2.4.0)
-    poltergeist (1.18.1)
-      capybara (>= 2.1, < 4)
-      cliver (~> 0.3.1)
-      websocket-driver (>= 0.2.0)
     powerpack (0.1.2)
     pry (0.11.3)
       coderay (~> 1.1.0)
@@ -327,7 +322,6 @@ DEPENDENCIES
   launchy
   listen
   mini_racer
-  poltergeist
   pry
   pry-byebug
   pry-doc
@@ -352,4 +346,4 @@ DEPENDENCIES
   webpacker
 
 BUNDLED WITH
-   1.16.3
+   1.16.4