react_on_rails 9.0.3 → 10.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f41863c0e8b5cfbc03a81dc6d8b4adb4267b6475
-  data.tar.gz: c884cd7c06d50f9abc8d5c084df1912f44dd82ea
+  metadata.gz: 1c3ced829061ca6995dd0f55349112955883e87b
+  data.tar.gz: be160b38edcaa90ae64ce0ea69a029f48505968b
 SHA512:
-  metadata.gz: 17327f03ceea1acf189be53955b0f84f255aafe2809398f1027242877ceb1f7fc79b9c40ade163aaa49cb695beee4e80054774b2fed9a3a8769ee30e0f83a22d
-  data.tar.gz: 92a3d81eb2440990899f77eaa2d41c20b30adf2faa49b67eb6c8d8eb199848a6d26e85cc2c71c0d21c4c9da451fb5b632a03c60491dab3468924fde37fb37870
+  metadata.gz: 69f0ea0f49b5a2e5eab554656ffe8b82b18cad3475ea963a5fced718d2af7498f5aaf23e4a0a9554382f32a6a24f1fa154b1d4e27d208286b54d757ac5032e48
+  data.tar.gz: 7442ea55fa1d838d8c8f75dbfdb83c6db36bce40b5be5e3f10a9d38f8455d91930e7aa2bdfdd55ab3546f5c38a96bef1eef9f18f5b15f325c344c7492767dbc4

data/.rubocop.yml

@@ -34,7 +34,7 @@ AllCops:
     - 'gen-examples/examples/**/.*'
     - 'gen-examples/examples/**/*'
 
-Style/FileName:
+Naming/FileName:
   Exclude:
     - 'Gemfile'
     - 'spec/dummy/Gemfile'

data/CHANGELOG.md

@@ -8,18 +8,26 @@ Changes since last non-beta release.
 
 *Please add entries here for your pull requests.*
 
+### [10.0.0] - 2017-10-08
+#### Created
+- Created `react_component_hash` method for react_helmet support.
+#### Deprecated
+- Deprecated `react_component` functionality for react_helmet support.
+To clarify, the method itself is not deprecated, only certain functionality which has been moved to `react_component_hash`
+[PR 951](https://github.com/shakacode/react_on_rails/pull/951) by [Judahmeek](https://github.com/Judahmeek)
+
 ### [9.0.3] - 2017-09-20
 #### Improved
-- Improved comments in generated Procfile.dev-server. [PR 940](https://github.com/shakacode/react_on_rails/pull/940) by [justin808](https://github.com/justin808 ) 
+- Improved comments in generated Procfile.dev-server. [PR 940](https://github.com/shakacode/react_on_rails/pull/940) by [justin808](https://github.com/justin808 )
 
 ### [9.0.2] - 2017-09-10
 #### Fixed
-- Improved post install doc comments for generator. [PR 933](https://github.com/shakacode/react_on_rails/pull/933) by [justin808](https://github.com/justin808 ) 
+- Improved post install doc comments for generator. [PR 933](https://github.com/shakacode/react_on_rails/pull/933) by [justin808](https://github.com/justin808 )
 
 ### [9.0.1] - 2017-09-10
 
 #### Fixed
-- Fixes Rails 3.2 compatability issues. [PR 926](https://github.com/shakacode/react_on_rails/pull/926) by [morozovm](https://github.com/morozovm ) 
+- Fixes Rails 3.2 compatability issues. [PR 926](https://github.com/shakacode/react_on_rails/pull/926) by [morozovm](https://github.com/morozovm )
 
 ### [9.0.0] - 2017-09-06
 Updated React on Rails to depend on [rails/webpacker](https://github.com/rails/webpacker). [PR 908](https://github.com/shakacode/react_on_rails/pull/908) by [justin808](https://github.com/justin808).
@@ -33,7 +41,7 @@ For an example of upgrading, see [react-webpack-rails-tutorial/pull/416](https:/
   1. Added `config.node_modules_location` which defaults to `""` if Webpacker is installed. You may want to set this to 'client'` to `config/initializers/react_on_rails.rb` to keep your node_modules inside of `/client`
   2. Renamed
    * config.npm_build_test_command ==> config.build_test_command
-   * config.build_production_command ==> config.build_production_command
+   * config.npm_build_production_command ==> config.build_production_command
 
 - Update the gemfile. Switch over to using the webpacker gem.
 
@@ -52,9 +60,9 @@ gem "webpacker"
   - manifest               ==> Remove this one. We use the default for Webpack of manifest.json
   - env                    ==> Use `const { env } = require('process');`
   - devBuild               ==> Use `const devBuild = process.env.NODE_ENV !== 'production';`
- 
+
 - Edit your Webpack.config files:
-  - Change your Webpack output to be like:
+  - Change your Webpack output to be like this. **Be sure to have the hash or chunkhash in the filename,** unless the bundle is server side.:
     ```
     const webpackConfigLoader = require('react-on-rails/webpackConfigLoader');
     const configPath = resolve('..', 'config');
@@ -65,7 +73,7 @@ gem "webpacker"
     output: {
       filename: isHMR ? '[name]-[hash].js' : '[name]-[chunkhash].js',
       chunkFilename: '[name]-[chunkhash].chunk.js',
-   
+
       publicPath: output.publicPath,
       path: output.path,
     },
@@ -102,13 +110,13 @@ gem "webpacker"
   - See the example `spec/dummy/config/webpacker.yml`.
   - Remove keys `hot_reloading_host` and `hot_reloading_enabled_by_default`. These are replaced by the `dev_server` key.
   - Rename `webpack_public_output_dir` to `public_output_path`.
-  
+
 - Edit your Procfile.dev
   - Remove the env value WEBPACKER_DEV_SERVER as it's not used
   - For hot loading:
     - Set the `hmr` key in your `webpacker.yml` to `true`.
-    
-    
+
+
 ### [8.0.7] - 2017-08-16
 #### Fixed
 - Fixes generator bug by keeping blank line at top in case existing .gitignore does not end in a newline. [#916](https://github.com/shakacode/react_on_rails/pull/916) by [justin808](https://github.com/justin808).

data/Gemfile

@@ -16,7 +16,7 @@ gem "mini_racer"
 gem "puma"
 gem "rails", "5.1.2"
 gem "rails_12factor"
-gem "rubocop", require: false
+gem "rubocop", "~> 0.50", require: false
 gem "ruby-lint", require: false
 gem "sass-rails", "~> 5.0"
 gem "scss_lint", require: false
@@ -38,7 +38,7 @@ gem "chromedriver-helper"
 gem "launchy"
 gem "poltergeist"
 gem "selenium-webdriver"
-gem "webpacker", "~> 3.0"
+gem "webpacker", "3.0.2"
 
 # TODO: remove once we get out of beta.
 # gem 'webpacker', path: "../../forks/webpacker"

data/KUDOS.md

@@ -2,6 +2,11 @@ This is a sibling file to [PROJECTS.md](./PROJECTS.md).
 
 I'm looking for quotes on why you like using React on Rails. You might mention any benefits you particularly like and if you've migrated from react-rails. Just click to edit and github will automatically open up a PR. Thanks to everybody that contributes!
 
+## September 20, 2017, By [ShakaCode Forum](https://forum.shakacode.com/t/new-ror-users-inbound/1014)
+
+![2017-10-07_00-18-43](https://user-images.githubusercontent.com/1118459/31306902-341a537a-aaf5-11e7-8014-28c126a7c975.png)
+
+
 ## June 9, 2017
 By Github Issue [#868](https://github.com/shakacode/react_on_rails/issues/868)
 

data/README.md

@@ -2,7 +2,8 @@
 
 *If this projects helps you, please give us a star!*
 
-[rails/webpacker](https://github.com/rails/webpacker) just shipped 3.0. This now enables me to ship version 9.0. See [PR #908](https://github.com/shakacode/react_on_rails/pull/908) for more details.
+[ShakaCode is hiring team members](http://www.shakacode.com/about/#work-with-us) for our own app, [Friends and Guests](https://www.friendsandguests.com).
+
 # React on Rails v9 is based on Webpacker 3.0!
 
 * See the article [Introducing React on Rails v9 with Webpacker Support](https://blog.shakacode.com/introducing-react-on-rails-v9-with-webpacker-support-f2584c6c8fa4) for an overview of the integration of React on Rails with Webpacker.
@@ -20,7 +21,7 @@ Given that Webpacker already provides React integration, why would you add React
 4. Localization support
 5. Rspec test helpers to ensure your Webpack bundles are ready for tests
 
----- 
+----
 
 ## Steps to a New App with rails/webpacker v3 plus React on Rails v9:
 First be sure to run `rails -v` and check that you are using Rails 5.1.3 or above. If you are using an older version of Rails, you'll need to install webpacker with React per the instructions [here](https://github.com/rails/webpacker).
@@ -28,7 +29,7 @@ First be sure to run `rails -v` and check that you are using Rails 5.1.3 or abov
 ### Basic installation for a new Rails App
 *See below for steps on an existing Rails app*
 
-1. New Rails app: `rails new my-app --webpack=react`. `cd` into the directory. 
+1. New Rails app: `rails new my-app --webpack=react`. `cd` into the directory.
 2. Add gem version: `gem 'react_on_rails', '~> 9.0.1'`
 3. Run the generator: `rails generate react_on_rails:install`
 4. Start the app: `rails s`
@@ -131,7 +132,7 @@ For more testimonials, see [Live Projects](PROJECTS.md) and [Kudos](./KUDOS.md).
 
 **Project Objective**: To provide an opinionated and optimal framework for integrating Ruby on Rails with React via the [**Webpacker**](https://github.com/rails/webpacker) gem.
 
-React on Rails integrates Facebook's [React](https://github.com/facebook/react) front-end framework with Rails. React v0.14.x and greater is supported, with server rendering. [Redux](https://github.com/reactjs/redux) and [React-Router](https://github.com/reactjs/react-redux) are supported as well, also with server rendering, using **execJS**. 
+React on Rails integrates Facebook's [React](https://github.com/facebook/react) front-end framework with Rails. React v0.14.x and greater is supported, with server rendering. [Redux](https://github.com/reactjs/redux) and [React-Router](https://github.com/reactjs/react-redux) are supported as well, also with server rendering, using **execJS**.
 
 ## Table of Contents
 
@@ -161,7 +162,7 @@ React on Rails integrates Facebook's [React](https://github.com/facebook/react)
 ---
 
 ## Features
-Like the [react-rails](https://github.com/reactjs/react-rails) gem, React on Rails is capable of server-side rendering with fragment caching and is compatible with [turbolinks](https://github.com/turbolinks/turbolinks). Unlike react-rails, which depends heavily on sprockets and jquery-ujs, React on Rails uses [webpack](http://webpack.github.io/) and does not depend on jQuery. While the initial setup is slightly more involved, it allows for advanced functionality such as:
+Like the [react-rails](https://github.com/reactjs/react-rails) gem, React on Rails is capable of server-side rendering with fragment caching and is compatible with [turbolinks](https://github.com/turbolinks/turbolinks). While the initial setup is slightly more involved, it allows for advanced functionality such as:
 
 + [Redux](https://github.com/reactjs/redux)
 + [Webpack optimization functionality](https://github.com/webpack/docs/wiki/optimization)
@@ -197,7 +198,7 @@ To upgrade existing apps to React on Rails 8 see the [Installation Overview](doc
    ```
    bundle exec rails webpacker:install
    bundle exec rails webpacker:install:react
-   
+
    ```
 
 2. Commit this to git (or else you cannot run the generator unless you pass the option `--ignore-warnings`).
@@ -222,7 +223,7 @@ To upgrade existing apps to React on Rails 8 see the [Installation Overview](doc
   foreman start -f Procfile.dev
   ```
 
-8. Visit [localhost:3000/hello_world](http://localhost:3000/hello_world). Note, `foreman` defaults to PORT 5000 unless you set the value of PORT in your environment. For example, you can `export PORT=3000` to use the Rails default port of 3000. For the hello_world example this is already set.
+8. Visit [localhost:3000/hello_world](http://localhost:3000/hello_world). Note: `foreman` defaults to PORT 5000 unless you set the value of PORT in your environment. For example, you can `export PORT=3000` to use the Rails default port of 3000. For the hello_world example this is already set.
 
 ### Installation Overview
 
@@ -303,7 +304,7 @@ In the following screenshot you can see the 3 parts of React on Rails rendering:
 
 1. A hidden HTML div contains the properties of the React component, such as the registered name and any props. A JavaScript function runs after the page loads to take this data and build initialize React components.
 2. The wrapper div `<div id="HelloWorld-react-component-0">` specifies the div where to place the React rendering. It encloses the server-rendered HTML for the React component
-3. Additional JavaScript is placed to console-log any messages, such as server rendering errors. Note, these server side logs can be configured only to be sent to the server logs.
+3. Additional JavaScript is placed to console-log any messages, such as server rendering errors. Note: these server side logs can be configured only to be sent to the server logs.
 
 **Note**:
 
@@ -334,6 +335,8 @@ Another reason to use a generator function is that sometimes in server rendering
 For server rendering, if you wish to return multiple HTML strings from a generator function, you may return an Object from your generator function with a single top level property of `renderedHtml`. Inside this Object, place a key called `componentHtml`, along with any other needed keys. An example scenario of this is when you are using side effects libraries like [React Helmet](https://github.com/nfl/react-helmet). Your Ruby code will get this Object as a Hash containing keys componentHtml and any other custom keys that you added:
 { renderedHtml: { componentHtml, customKey1, customKey2} }
 
+Note: The functionality in the above paragraph requires the use of our new `react_component_hash` method. Said functionality in our `react_component` method is now deprecated.
+
 ### Rails Context and Generator Functions
 When you use a "generator function" to create react components (or renderedHtml on the server), or you used shared redux stores, you get two params passed to your function that creates a React component:
 
@@ -372,9 +375,9 @@ and, similarly, any redux store always initialized with 2 parameters:
 reduxStore = MyReduxStore(props, railsContext);
 ```
 
-Note, you never make these calls. React on Rails makes these calls when it does either client or server rendering. You will define functions that take these 2 params and return a React component or a Redux Store. Naturally, you do not have to use second parameter of the railsContext if you do not need it.
+Note: you never make these calls. React on Rails makes these calls when it does either client or server rendering. You will define functions that take these 2 params and return a React component or a Redux Store. Naturally, you do not have to use second parameter of the railsContext if you do not need it.
 
-(Note, see below [section](#multiple-react-components-on-a-page-with-one-store) on how to setup redux stores that allow multiple components to talk to the same store.)
+(Note: see below [section](#multiple-react-components-on-a-page-with-one-store) on how to setup redux stores that allow multiple components to talk to the same store.)
 
 The `railsContext` has: (see implementation in file [react_on_rails_helper.rb](https://github.com/shakacode/react_on_rails/tree/master/app/helpers/react_on_rails_helper.rb), method `rails_context` for the definitive list).
 
@@ -390,7 +393,7 @@ The `railsContext` has: (see implementation in file [react_on_rails_helper.rb](h
     search: uri.query, # id=30&limit=5
 
     # Other
-    serverSide: boolean # Are we being called on the server or client? NOTE, if you conditionally
+    serverSide: boolean # Are we being called on the server or client? Note: if you conditionally
      # render something different on the server than the client, then React will only show the
      # server version!
   }
@@ -468,7 +471,7 @@ This is how to expose a component to the `react_component` view helper.
 
 You may want different initialization for your server-rendered components. For example, if you have an animation that runs when a component is displayed, you might need to turn that off when server rendering. However, the `railsContext` will tell you if your JavaScript code is running client side or server side. So code that required a different server bundle previously may no longer require this!
 
-If you want different code to run, you'd set up a separate webpack compilation file and you'd specify a different, server side entry file. ex. 'serverHelloWorld.jsx'. Note, you might be initializing HelloWorld with version specialized for server rendering.
+If you want different code to run, you'd set up a separate webpack compilation file and you'd specify a different, server side entry file. ex. 'serverHelloWorld.jsx'. Note: you might be initializing HelloWorld with version specialized for server rendering.
 
 #### Renderer Functions
 A renderer function is a generator function that accepts three arguments: `(props, railsContext, domNodeId) => { ... }`. Instead of returning a React component, a renderer is responsible for calling `ReactDOM.render` to render a React component into the dom. Why would you want to call `ReactDOM.render` yourself? One possible use case is [code splitting](./docs/additional-reading/code-splitting.md).
@@ -496,7 +499,7 @@ react_component(component_name,
   + **prerender:** enable server-side rendering of a component. Set to false when debugging!
   + **id:** Id for the div, will be used to attach the React component. This will get assigned automatically if you do not provide an id. Must be unique.
   + **html_options:** Any other HTML options get placed on the added div for the component. For example, you can set a class (or inline style) on the outer div so that it behaves like a span, with the styling of `display:inline-block`.
-  + **trace:** set to true to print additional debugging information in the browser. Defaults to true for development, off otherwise. Note, on the client, you will see both the `railsContext` and your props. On the server, you only see the `railsContext` being logged.
+  + **trace:** set to true to print additional debugging information in the browser. Defaults to true for development, off otherwise. Note: on the client, you will see both the `railsContext` and your props. On the server, you only see the `railsContext` being logged.
   + **replay_console:** Default is true. False will disable echoing server-rendering logs to the browser. While this can make troubleshooting server rendering difficult, so long as you have the default configuration of `logging_on_server` set to true, you'll still see the errors on the server.
   + **raise_on_prerender_error:** Default is false. True will throw an error on the server side rendering. Your controller will have to handle the error.
 
@@ -511,19 +514,19 @@ Include the module `ReactOnRails::Controller` in your controller, probably in Ap
   2. In your component definition, you'll call `ReactOnRails.getStore('storeName')` to get the hydrated Redux store to attach to your components.
 + **props:**  Named parameter `props`. ReactOnRails takes care of setting up the hydration of your store with props from the view.
 
-For an example, see [spec/dummy/app/controllers/pages_controller.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/controllers/pages_controller.rb). Note, this is preferable to using the equivalent view_helper `redux_store` in that you can be assured that the store is initialized before your components.
+For an example, see [spec/dummy/app/controllers/pages_controller.rb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/controllers/pages_controller.rb). Note: this is preferable to using the equivalent view_helper `redux_store` in that you can be assured that the store is initialized before your components.
 
 #### View Helper
 `redux_store(store_name, props: {})`
 
-This method has the same API as the controller extension. **HOWEVER**, we recommend the controller extension instead because the Rails executes the template code in the controller action's view file (`erb`, `haml`, `slim`, etc.) before the layout. So long as you call `redux_store` at the beginning of your action's view file, this will work. However, it's an easy mistake to put this call in the wrong place. Calling `redux_store` in the controller action ensures proper load order, regardless of where you call this in the controller action. Note, you won't know of this subtle ordering issue until you server render and you find that your store is not hydrated properly.
+This method has the same API as the controller extension. **HOWEVER**, we recommend the controller extension instead because the Rails executes the template code in the controller action's view file (`erb`, `haml`, `slim`, etc.) before the layout. So long as you call `redux_store` at the beginning of your action's view file, this will work. However, it's an easy mistake to put this call in the wrong place. Calling `redux_store` in the controller action ensures proper load order, regardless of where you call this in the controller action. Note: you won't know of this subtle ordering issue until you server render and you find that your store is not hydrated properly.
 
 `redux_store_hydration_data`
 
 Place this view helper (no parameters) at the end of your shared layout so ReactOnRails will render the redux store hydration data. Since we're going to be setting up the stores in the controllers, we need to know where on the view to put the client-side rendering of this hydration data, which is a hidden div with a matching class that contains a data props. For an example, see [spec/dummy/app/views/layouts/application.html.erb](https://github.com/shakacode/react_on_rails/tree/master/spec/dummy/app/views/layouts/application.html.erb).
 
 #### Redux Store Notes
-Note, you don't need to initialize your redux store. You can pass the props to your React component in a "generator function." However, consider using the `redux_store` helper for the two following use cases:
+Note: you don't need to initialize your redux store. You can pass the props to your React component in a "generator function." However, consider using the `redux_store` helper for the two following use cases:
 
 1. You want to have multiple React components accessing the same store at once.
 2. You want to place the props to hydrate the client side stores at the very end of your HTML so that the browser can render all earlier HTML first. This is particularly useful if your props will be large.
@@ -541,7 +544,7 @@ You may wish to have 2 React components share the same the Redux store. For exam
 
 Suppose the Redux store is called `appStore`, and you have 3 React components that each needs to connect to a store: `NavbarApp`, `CommentsApp`, and `BlogsApp`. I named them with `App` to indicate that they are the registered components.
 
-You will need to make a function that can create the store you will be using for all components and register it via the `registerStore` method. Note, this is a **storeCreator**, meaning that it is a function that takes (props, location) and returns a store:
+You will need to make a function that can create the store you will be using for all components and register it via the `registerStore` method. Note: this is a **storeCreator**, meaning that it is a function that takes (props, location) and returns a store:
 
 ```js
 function appStore(props, railsContext) {
@@ -567,7 +570,7 @@ return (
 );
 ```
 
-From your Rails view, you can use the provided helper `redux_store(store_name, props)` to create a fresh version of the store (because it may already exist if you came from visiting a previous page). Note, for this example, since we're initializing this from the main layout, we're using a generic name of `@react_props`. In other words, the Rails controller would set `@react_props` to the properties to hydrate the Redux store.
+From your Rails view, you can use the provided helper `redux_store(store_name, props)` to create a fresh version of the store (because it may already exist if you came from visiting a previous page). Note: for this example, since we're initializing this from the main layout, we're using a generic name of `@react_props`. In other words, the Rails controller would set `@react_props` to the properties to hydrate the Redux store.
 
 **app/views/layouts/application.html.erb**
 ```erb

data/app/helpers/react_on_rails_helper.rb

@@ -97,52 +97,49 @@ module ReactOnRailsHelper
   #      if the JS code throws
   # Any other options are passed to the content tag, including the id.
   def react_component(component_name, raw_options = {})
-    # Create the JavaScript and HTML to allow either client or server rendering of the
-    # react_component.
-    #
-    # Create the JavaScript setup of the global to initialize the client rendering
-    # (re-hydrate the data). This enables react rendered on the client to see that the
-    # server has already rendered the HTML.
-
-    options = ReactOnRails::ReactComponent::Options.new(name: component_name, options: raw_options)
-
-    # Setup the page_loaded_js, which is the same regardless of prerendering or not!
-    # The reason is that React is smart about not doing extra work if the server rendering did its job.
-    component_specification_tag = content_tag(:script,
-                                              json_safe_and_pretty(options.props).html_safe,
-                                              type: "application/json",
-                                              class: "js-react-on-rails-component",
-                                              "data-component-name" => options.name,
-                                              "data-trace" => (options.trace ? true : nil),
-                                              "data-dom-id" => options.dom_id)
-
-    # Create the HTML rendering part
-    result = server_rendered_react_component_html(options.props,
-                                                  options.name,
-                                                  options.dom_id,
-                                                  prerender: options.prerender,
-                                                  trace: options.trace,
-                                                  raise_on_prerender_error: options.raise_on_prerender_error)
-
-    server_rendered_html = result["html"]
-    console_script = result["consoleReplayScript"]
+    internal_result = internal_react_component(component_name, raw_options)
+    server_rendered_html = internal_result["result"]["html"]
+    console_script = internal_result["result"]["consoleReplayScript"]
 
     if server_rendered_html.is_a?(String)
       build_react_component_result_for_server_rendered_string(
         server_rendered_html: server_rendered_html,
-        component_specification_tag: component_specification_tag,
+        component_specification_tag: internal_result["tag"],
         console_script: console_script,
-        options: options
+        options: internal_result["options"]
       )
     elsif server_rendered_html.is_a?(Hash)
+      puts "[DEPRECATION] ReactOnRails: Use react_component_hash to return a Hash to your ruby view code"
       build_react_component_result_for_server_rendered_hash(
         server_rendered_html: server_rendered_html,
-        component_specification_tag: component_specification_tag,
+        component_specification_tag: internal_result["tag"],
         console_script: console_script,
-        options: options
+        options: internal_result["options"]
       )
     else
-      raise "server_rendered_html expected to be a String or a Hash."
+      raise "server_rendered_html is expected to be a String. If you're trying to use a generator function to
+      return a Hash to your ruby view code, then use react_component_hash instead of react_component and
+      see https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/app/startup/ReactHelmetServerApp.jsx
+      for an example of the necessary javascript configuration."
+    end
+  end
+
+  def react_component_hash(component_name, raw_options = {})
+    internal_result = internal_react_component(component_name, raw_options)
+    server_rendered_html = internal_result["result"]["html"]
+    console_script = internal_result["result"]["consoleReplayScript"]
+
+    if server_rendered_html.is_a?(Hash)
+      build_react_component_result_for_server_rendered_hash(
+        server_rendered_html: server_rendered_html,
+        component_specification_tag: internal_result["tag"],
+        console_script: console_script,
+        options: internal_result["options"]
+      )
+    else
+      raise "Generator function is expected to return an Object. See
+      https://github.com/shakacode/react_on_rails/blob/master/spec/dummy/client/app/startup/ReactHelmetServerApp.jsx
+      for an example of the necessary javascript configuration."
     end
   end
 
@@ -177,7 +174,9 @@ module ReactOnRailsHelper
   # that contains a data props.
   def redux_store_hydration_data
     return if @registered_stores_defer_render.blank?
+    # rubocop:disable Performance/UnfreezeString
     @registered_stores_defer_render.reduce("".dup) do |accum, redux_store_data|
+      # rubocop:enable Performance/UnfreezeString
       accum << render_redux_store_data(redux_store_data)
     end.html_safe
   end
@@ -327,6 +326,37 @@ module ReactOnRailsHelper
     "#{rails_context_content}\n#{render_value}".html_safe
   end
 
+  def internal_react_component(component_name, raw_options = {})
+    # Create the JavaScript and HTML to allow either client or server rendering of the
+    # react_component.
+    #
+    # Create the JavaScript setup of the global to initialize the client rendering
+    # (re-hydrate the data). This enables react rendered on the client to see that the
+    # server has already rendered the HTML.
+
+    options = ReactOnRails::ReactComponent::Options.new(name: component_name, options: raw_options)
+
+    # Setup the page_loaded_js, which is the same regardless of prerendering or not!
+    # The reason is that React is smart about not doing extra work if the server rendering did its job.
+    component_specification_tag = content_tag(:script,
+                                              json_safe_and_pretty(options.props).html_safe,
+                                              type: "application/json",
+                                              class: "js-react-on-rails-component",
+                                              "data-component-name" => options.name,
+                                              "data-trace" => (options.trace ? true : nil),
+                                              "data-dom-id" => options.dom_id)
+
+    # Create the HTML rendering part
+    result = server_rendered_react_component_html(options.props,
+                                                  options.name,
+                                                  options.dom_id,
+                                                  prerender: options.prerender,
+                                                  trace: options.trace,
+                                                  raise_on_prerender_error: options.raise_on_prerender_error)
+
+    { "options" => options, "tag" => component_specification_tag, "result" => result }
+  end
+
   def render_redux_store_data(redux_store_data)
     result = content_tag(:script,
                          json_safe_and_pretty(redux_store_data[:props]).html_safe,
@@ -413,13 +443,15 @@ module ReactOnRailsHelper
 
   def initialize_redux_stores
     return "" unless @registered_stores.present? || @registered_stores_defer_render.present?
-    declarations = "var reduxProps, store, storeGenerator;\n".dup
+    declarations = "var reduxProps, store, storeGenerator;\n".dup # rubocop:disable Performance/UnfreezeString
 
     all_stores = (@registered_stores || []) + (@registered_stores_defer_render || [])
 
+    # rubocop:disable Performance/UnfreezeString
     result = <<-JS.dup
       ReactOnRails.clearHydratedStores();
     JS
+    # rubocop:enable Performance/UnfreezeString
 
     result << all_stores.each_with_object(declarations) do |redux_store_data, memo|
       store_name = redux_store_data[:store_name]

data/docs/additional-reading/heroku-deployment.md

@@ -87,6 +87,6 @@ Run:
 
 ```
 bundle
-bin/rake db:migrate
 bin/rake db:setup
+bin/rake db:migrate
 ```

data/docs/additional-reading/react-helmet.md

@@ -61,9 +61,9 @@ ReactOnRails.register({
   ReactHelmetApp
 });
 ```
-Now when `react_component` helper will be called with **"ReactHelmetApp"** as a first argument it will return a hash instead of HTML string:
+Now when the `react_component_hash` helper is called with **"ReactHelmetApp"** as a first argument it will return a hash instead of HTML string:
 ```ruby
-<% react_helmet_app = react_component("ReactHelmetApp", prerender: true, props: { hello: "world" }, trace: true) %>
+<% react_helmet_app = react_component_hash("ReactHelmetApp", prerender: true, props: { hello: "world" }, trace: true) %>
 
 <% content_for :title do %>
   <%= react_helmet_app['title'] %>
@@ -76,3 +76,5 @@ So now we're able to insert received title tag to our application layout:
 ```ruby
  <%= yield(:title) if content_for?(:title) %>
 ```
+
+Note: Use of `react_component` for this functionality is deprecated. Please use `react_component_hash` instead.

data/docs/basics/configuration.md

@@ -1,6 +1,6 @@
 Here is the full set of config options.
 
-```yaml
+```ruby
 # frozen_string_literal: true
 
 # NOTE: you typically will leave the commented out configurations set to their defaults.

data/docs/basics/installation-overview.md

@@ -4,7 +4,7 @@ Here's an overview of installation if you're not using the generator.
 
 Note, the best way to understand how to use ReactOnRails is to study the examples:
 
-1. Run the generator per the [Tutorial](../../tutorial.md).
+1. Run the generator per the [Tutorial](../tutorial.md).
 2. [spec/dummy](../../spec/dummy): Simple, no DB example.
 3. [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial): Full featured example.
 

data/lib/generators/react_on_rails/dev_tests_generator.rb

@@ -30,7 +30,7 @@ module ReactOnRails
 
       def add_test_related_gems_to_gemfile
         gem("rspec-rails", group: :test)
-        gem("poltergeist", group: :test)
+        gem("chromedriver-helper", group: :test)
         gem("coveralls", require: false)
       end
 

data/lib/generators/react_on_rails/generator_helper.rb

@@ -48,7 +48,7 @@ Please add the following content to your #{file} file:
   end
 
   def copy_file_and_missing_parent_directories(source_file, destination_file = nil)
-    destination_file = source_file unless destination_file
+    destination_file ||= source_file
     destination_path = Pathname.new(destination_file)
     parent_directories = destination_path.dirname
     empty_directory(parent_directories) unless dest_dir_exists?(parent_directories)

data/lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb

@@ -13,8 +13,10 @@ require_relative "spec_helper"
 require "rspec/rails"
 require "capybara/rspec"
 require "capybara/rails"
-require "capybara/poltergeist"
-Capybara.javascript_driver = :poltergeist
+Capybara.javascript_driver = :selenium_chrome
+Capybara.register_driver :selenium_chrome do |app|
+  Capybara::Selenium::Driver.new(app, browser: :chrome)
+end
 
 # Requires supporting ruby files with custom matchers and macros, etc, in
 # spec/support/ and its subdirectories. Files matching `spec/**/*_spec.rb` are

data/lib/react_on_rails/assets_precompile.rb

@@ -102,7 +102,7 @@ module ReactOnRails
         next unless File.lstat(filename).symlink?
         begin
           target = File.readlink(filename)
-        rescue
+        rescue # rubocop:disable Lint/RescueWithoutErrorClass
           puts "React on Rails: Warning: your platform doesn't support File::readlink method." /
                "Skipping broken link check."
           break
@@ -139,7 +139,7 @@ module ReactOnRails
       # pointing to. We can't use File.exist?, as that would check the file pointed at by the symlink.
       File.lstat(path)
       true
-    rescue
+    rescue # rubocop:disable Lint/RescueWithoutErrorClass
       false
     end
   end

data/lib/react_on_rails/configuration.rb

@@ -21,7 +21,7 @@ module ReactOnRails
   end
 
   def self.check_i18n_directory_exists
-    return unless @configuration.i18n_dir.present?
+    return if @configuration.i18n_dir.blank?
     return if Dir.exist?(@configuration.i18n_dir)
 
     raise "Error configuring /config/react_on_rails.rb: invalid value for `config.i18n_dir`. "\
@@ -30,7 +30,7 @@ module ReactOnRails
   end
 
   def self.check_i18n_yml_directory_exists
-    return unless @configuration.i18n_yml_dir.present?
+    return if @configuration.i18n_yml_dir.blank?
     return if Dir.exist?(@configuration.i18n_yml_dir)
 
     raise "Error configuring /config/react_on_rails.rb: invalid value for `config.i18n_yml_dir`. "\
@@ -39,14 +39,14 @@ module ReactOnRails
   end
 
   def self.ensure_generated_assets_dir_present
-    return unless @configuration.generated_assets_dir.blank?
+    return if @configuration.generated_assets_dir.present?
 
     @configuration.generated_assets_dir = DEFAULT_GENERATED_ASSETS_DIR
     puts "ReactOnRails: Set generated_assets_dir to default: #{DEFAULT_GENERATED_ASSETS_DIR}"
   end
 
   def self.configure_generated_assets_dirs_deprecation
-    return unless @configuration.generated_assets_dirs.present?
+    return if @configuration.generated_assets_dirs.blank?
 
     puts "[DEPRECATION] ReactOnRails: Use config.generated_assets_dir rather than "\
         "generated_assets_dirs"

data/lib/react_on_rails/locales_to_js.rb

@@ -5,7 +5,7 @@ require "erb"
 module ReactOnRails
   class LocalesToJs
     def initialize
-      return unless i18n_dir.present?
+      return if i18n_dir.blank?
       return unless obsolete?
       @translations, @defaults = generate_translations
       convert

data/lib/react_on_rails/prerender_error.rb

@@ -6,7 +6,7 @@ module ReactOnRails
     # err might be nil if JS caught the error
     def initialize(component_name: nil, err: nil, props: nil,
                    js_code: nil, console_messages: nil)
-      message = "ERROR in SERVER PRERENDERING\n".dup
+      message = "ERROR in SERVER PRERENDERING\n".dup # rubocop:disable Performance/UnfreezeString
       if err
         # rubocop:disable Layout/IndentHeredoc
         message << <<-MSG

data/lib/react_on_rails/server_rendering_pool/exec.rb

@@ -54,7 +54,7 @@ module ReactOnRails
           console_script = result["consoleReplayScript"]
           console_script_lines = console_script.split("\n")
           console_script_lines = console_script_lines[2..-2]
-          re = /console\.log\.apply\(console, \["\[SERVER\] (?<msg>.*)"\]\);/
+          re = /console\.(log|error)\.apply\(console, \["\[SERVER\] (?<msg>.*)"\]\);/
           if console_script_lines
             console_script_lines.each do |line|
               match = re.match(line)
@@ -98,7 +98,7 @@ module ReactOnRails
           # bundle_js_code = File.read(server_js_file)
           begin
             bundle_js_code = open(server_js_file, &:read)
-          rescue => e
+          rescue # rubocop:disable Lint/RescueWithoutErrorClass => e
             msg = "You specified server rendering JS file: #{server_js_file}, but it cannot be "\
                 "read. You may set the server_bundle_js_file in your configuration to be \"\" to "\
                 "avoid this warning.\nError is: #{e}"
@@ -115,7 +115,7 @@ module ReactOnRails
           begin
             trace_messsage(base_js_code, file_name)
             ExecJS.compile(base_js_code)
-          rescue => e
+          rescue # rubocop:disable Lint/RescueWithoutErrorClass => e
             msg = "ERROR when compiling base_js_code! "\
               "See file #{file_name} to "\
               "correlate line numbers of error. Error is\n\n#{e.message}"\

data/lib/react_on_rails/utils.rb

@@ -122,7 +122,7 @@ exitstatus: #{status.exitstatus}#{stdout_msg}#{stderr_msg}
     end
 
     def self.prepend_cd_node_modules_directory(cmd)
-      return cmd unless ReactOnRails.configuration.node_modules_location.present?
+      return cmd if ReactOnRails.configuration.node_modules_location.blank?
       "cd #{ReactOnRails.configuration.node_modules_location} && #{cmd}"
     end
 
@@ -142,7 +142,8 @@ exitstatus: #{status.exitstatus}#{stdout_msg}#{stderr_msg}
     end
 
     def self.bundle_js_file_path_from_webpacker(bundle_name)
-      hashed_bundle_name = Webpacker.manifest.lookup(bundle_name)
+      possible_result = Webpacker.manifest.lookup(bundle_name)
+      hashed_bundle_name = possible_result.nil? ? Webpacker.manifest.lookup!(bundle_name) : possible_result
       if Webpacker.dev_server.running?
         result = "#{Webpacker.dev_server.protocol}://#{Webpacker.dev_server.host_with_port}#{hashed_bundle_name}"
         result

data/lib/react_on_rails/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module ReactOnRails
-  VERSION = "9.0.3"
+  VERSION = "10.0.0"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-on-rails",
-  "version": "9.0.3",
+  "version": "10.0.0",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
   "main": "node_package/lib/ReactOnRails.js",
   "directories": {
@@ -42,6 +42,7 @@
   },
   "peerDependencies": {
     "babel-runtime": ">= 6",
+    "js-yaml": ">= 3.0.0",
     "react": ">= 0.14",
     "react-dom": ">= 0.14"
   },
@@ -87,7 +88,7 @@
   },
   "homepage": "https://github.com/shakacode/react_on_rails#readme",
   "dependencies": {
-    "react-on-rails": "^9.0.0-beta.12",
+    "react-on-rails": "^9.0.3",
     "react-redux": "^5.0.6"
   }
 }

data/rakelib/example_type.rb

@@ -49,9 +49,8 @@ module ReactOnRails
       end
 
       # Options we pass when running `rails new` from the command-line.
-      # The webpack=react option is key.
       def rails_options
-        "--skip-bundle --skip-spring --skip-git --skip-test-unit --skip-active-record --webpack=react"
+        "--skip-bundle --skip-spring --skip-git --skip-test-unit --skip-active-record"
       end
 
       %w[gen clobber npm_install build_webpack_bundles].each do |task_type|

data/rakelib/examples.rake

@@ -9,7 +9,7 @@ require "yaml"
 require_relative "example_type"
 require_relative "task_helpers"
 include ReactOnRails::TaskHelpers
-namespace :examples do
+namespace :examples do # rubocop:disable Metrics/BlockLength
   # Loads data from examples_config.yml and instantiates corresponding ExampleType objects
   examples_config_file = File.expand_path("../examples_config.yml", __FILE__)
   examples_config = symbolize_keys(YAML.safe_load(File.read(examples_config_file)))
@@ -29,6 +29,9 @@ namespace :examples do
       mkdir_p(example_type.dir)
       sh_in_dir(examples_dir, "rails new #{example_type.name} #{example_type.rails_options}")
       sh_in_dir(example_type.dir, "touch .gitignore")
+      sh_in_dir(example_type.dir, "rake webpacker:install")
+      sh_in_dir(example_type.dir, "bundle binstubs --path=#{example_type.dir}/bin webpacker")
+      sh_in_dir(example_type.dir, "rake webpacker:install:react")
       append_to_gemfile(example_type.gemfile, example_type.required_gems)
       bundle_install_in(example_type.dir)
       sh_in_dir(example_type.dir, example_type.generator_shell_commands)

data/rakelib/release.rake

@@ -60,7 +60,9 @@ task :release, %i[gem_version dry_run tools_install] do |_t, args|
   sh_in_dir(gem_root, "git add .")
 
   # Will bump the yarn version, commit, tag the commit, push to repo, and release on yarn
+  # rubocop:disable Performance/UnfreezeString
   release_it_command = "$(yarn bin)/release-it --non-interactive --npm.publish".dup
+  # rubocop:enable Performance/UnfreezeString
   release_it_command << " --dry-run --verbose" if is_dry_run
   release_it_command << " #{npm_version}" unless npm_version.strip.empty?
   sh_in_dir(gem_root, release_it_command)

data/rakelib/run_rspec.rake

@@ -119,7 +119,9 @@ def run_tests_in(dir, options = {})
 
   command_name = options.fetch(:command_name, path.basename)
   rspec_args = options.fetch(:rspec_args, "")
-  env_vars = %(#{options.fetch(:env_vars, '')} TEST_ENV_COMMAND_NAME="#{command_name}").dup
+  # rubocop:disable Performance/UnfreezeString
+  env_vars = "#{options.fetch(:env_vars, '')} TEST_ENV_COMMAND_NAME=\"#{command_name}\"".dup
+  # rubocop:enable Performance/UnfreezeString
   env_vars << "COVERAGE=true" if ENV["USE_COVERALLS"]
   sh_in_dir(path.realpath, "#{env_vars} bundle exec rspec #{rspec_args}")
 end

data/react_on_rails.gemspec

@@ -1,4 +1,3 @@
-# coding: utf-8
 # frozen_string_literal: true
 
 lib = File.expand_path("../lib", __FILE__)

data/yarn.lock

@@ -2449,6 +2449,13 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
+js-yaml@^3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
+  dependencies:
+    argparse "^1.0.7"
+    esprima "^4.0.0"
+
 js-yaml@^3.5.1:
   version "3.9.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.9.1.tgz#08775cebdfdd359209f0d2acd383c8f86a6904a0"
@@ -3248,6 +3255,13 @@ react-on-rails@^9.0.0-beta.12:
     react-on-rails "^9.0.0-beta.12"
     react-redux "^5.0.6"
 
+react-on-rails@^9.0.3:
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/react-on-rails/-/react-on-rails-9.0.3.tgz#da8a9873a94d62fe91e1f80d76716583f2be9da7"
+  dependencies:
+    react-on-rails "^9.0.0-beta.12"
+    react-redux "^5.0.6"
+
 react-proxy@^1.1.7:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/react-proxy/-/react-proxy-1.1.8.tgz#9dbfd9d927528c3aa9f444e4558c37830ab8c26a"

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: react_on_rails
 version: !ruby/object:Gem::Version
-  version: 9.0.3
+  version: 10.0.0
 platform: ruby
 authors:
 - Justin Gordon
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2017-09-20 00:00:00.000000000 Z
+date: 2017-10-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rainbow