Updates to spec/dummy for new packages

* fixed tests
* updated packages in spec/dummy
* add prettier

Author: justin808

.eslintrc

@@ -1,8 +1,11 @@
 ---
-extends: eslint-config-shakacode
+extends:
+  - eslint-config-shakacode
+  - prettier
+  - prettier/react
 
 plugins:
-  - react
+  - prettier
 
 globals:
   __DEBUG_SERVER_ERRORS__: true
@@ -17,7 +20,7 @@ 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

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)
 

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));
   },
 
   /**

package.json

@@ -20,9 +20,11 @@
     "blue-tape": "^1.0.0",
     "create-react-class": "^15.6.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": "^6.1.2",
+    "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-react": "^7.1.0",
     "flow-bin": "^0.83.0",
     "jsdom": "^11.1.0",
@@ -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