react_on_rails 4.0.3 → 5.0.0.rc.1

data/app/helpers/react_on_rails_helper.rb

@@ -63,9 +63,9 @@ module ReactOnRailsHelper
   #   React.createClass, or a
   #    `generator function` that returns a React component
   #      using ES6
-  #         let MyReactComponentApp = (props) => <MyReactComponent {...props}/>;
+  #         let MyReactComponentApp = (props, railsContext) => <MyReactComponent {...props}/>;
   #      or using ES5
-  #         var MyReactComponentApp = function(props) { return <YourReactComponent {...props}/>; }
+  #         var MyReactComponentApp = function(props, railsContext) { return <YourReactComponent {...props}/>; }
   #   Exposing the react_component_name is necessary to both a plain ReactComponent as well as
   #     a generator:
   #   See README.md for how to "register" your react components.
@@ -76,6 +76,8 @@ module ReactOnRailsHelper
   #   props: Ruby Hash or JSON string which contains the properties to pass to the react object. Do
   #      not pass any props if you are separately initializing the store by the `redux_store` helper.
   #   prerender: <true/false> set to false when debugging!
+  #   id: You can optionally set the id, or else a unique one is automatically generated.
+  #   html_options: You can set other html attributes that will go on this component
   #   trace: <true/false> set to true to print additional debugging information in the browser
   #          default is true for development, off otherwise
   #   replay_console: <true/false> Default is true. False will disable echoing server rendering
@@ -85,7 +87,14 @@ module ReactOnRailsHelper
   #   raise_on_prerender_error: <true/false> Default to false. True will raise exception on server
   #      if the JS code throws
   # Any other options are passed to the content tag, including the id.
-  def react_component(component_name, options = {}, other_options = nil)
+  def react_component(component_name,
+                      props: {},
+                      prerender: nil,
+                      trace: nil,
+                      replay_console: nil,
+                      raise_on_prerender_error: nil,
+                      id: nil,
+                      html_options: {})
     # Create the JavaScript and HTML to allow either client or server rendering of the
     # react_component.
     #
@@ -94,25 +103,24 @@ module ReactOnRailsHelper
     # server has already rendered the HTML.
     # We use this react_component_index in case we have the same component multiple times on the page.
 
-    options, props = parse_options_props(component_name, options, other_options)
-
     react_component_index = next_react_component_index
     react_component_name = component_name.camelize # Not sure if we should be doing this (JG)
-    dom_id = if options[:id].nil?
-               "#{component_name}-react-component-#{react_component_index}"
-             else
-               options[:id]
-             end
+    dom_id = id.presence || "#{component_name}-react-component-#{react_component_index}"
 
     # 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.
 
     props = {} if props.nil?
 
+    prerender = prerender_option(prerender)
+    trace = trace_option(trace)
+    replay_console = replay_console_option(replay_console)
+    raise_on_prerender_error = raise_on_prerender_error_option(raise_on_prerender_error)
+
     data = {
       component_name: react_component_name,
       props: props,
-      trace: trace(options),
+      trace: trace,
       dom_id: dom_id
     }
 
@@ -124,14 +132,15 @@ module ReactOnRailsHelper
                   data: data)
 
     # Create the HTML rendering part
-    result = server_rendered_react_component_html(options, props, react_component_name, dom_id)
+    result = server_rendered_react_component_html(props, react_component_name, dom_id,
+                                                  prerender: prerender,
+                                                  trace: trace,
+                                                  raise_on_prerender_error: raise_on_prerender_error)
 
     server_rendered_html = result["html"]
     console_script = result["consoleReplayScript"]
 
-    content_tag_options = options.except(:generator_function, :prerender, :trace,
-                                         :replay_console, :id, :react_component_name,
-                                         :server_side, :raise_on_prerender_error)
+    content_tag_options = html_options
     content_tag_options[:id] = dom_id
 
     rendered_output = content_tag(:div,
@@ -139,11 +148,13 @@ module ReactOnRailsHelper
                                   content_tag_options)
 
     # IMPORTANT: Ensure that we mark string as html_safe to avoid escaping.
-    <<-HTML.html_safe
+    result = <<-HTML.html_safe
 #{component_specification_tag}
     #{rendered_output}
-    #{replay_console(options) ? console_script : ''}
+    #{replay_console ? console_script : ''}
     HTML
+
+    prepend_render_rails_context(result)
   end
 
   # Separate initialization of store from react_component allows multiple react_component calls to
@@ -165,7 +176,8 @@ module ReactOnRailsHelper
     else
       @registered_stores ||= []
       @registered_stores << redux_store_data
-      render_redux_store_data(redux_store_data)
+      result = render_redux_store_data(redux_store_data)
+      prepend_render_rails_context(result)
     end
   end
 
@@ -222,7 +234,7 @@ module ReactOnRailsHelper
     # IMPORTANT: To ensure that Rails doesn't auto-escape HTML tags, use the 'raw' method.
     html = result["html"]
     console_log_script = result["consoleLogScript"]
-    raw("#{html}#{replay_console(options) ? console_log_script : ''}")
+    raw("#{html}#{replay_console_option(options[:replay_console_option]) ? console_log_script : ''}")
   rescue ExecJS::ProgramError => err
     # rubocop:disable Style/RaiseArgs
     raise ReactOnRails::PrerenderError.new(component_name: "N/A (server_render_js called)",
@@ -233,12 +245,31 @@ module ReactOnRailsHelper
 
   private
 
+  # prepend the rails_context if not yet applied
+  def prepend_render_rails_context(render_value)
+    return render_value if @rendered_rails_context
+
+    data = {
+      rails_context: rails_context
+    }
+
+    @rendered_rails_context = true
+
+    rails_context_content = content_tag(:div,
+                                        "",
+                                        id: "js-react-on-rails-context",
+                                        style: ReactOnRails.configuration.skip_display_none ? nil : "display:none",
+                                        data: data)
+    "#{rails_context_content}\n#{render_value}".html_safe
+  end
+
   def render_redux_store_data(redux_store_data)
-    content_tag(:div,
-                "",
-                class: "js-react-on-rails-store",
-                style: ReactOnRails.configuration.skip_display_none ? nil : "display:none",
-                data: redux_store_data)
+    result = content_tag(:div,
+                         "",
+                         class: "js-react-on-rails-store",
+                         style: ReactOnRails.configuration.skip_display_none ? nil : "display:none",
+                         data: redux_store_data)
+    prepend_render_rails_context(result)
   end
 
   def next_react_component_index
@@ -252,8 +283,9 @@ module ReactOnRailsHelper
 
   # Returns Array [0]: html, [1]: script to console log
   # NOTE, these are NOT html_safe!
-  def server_rendered_react_component_html(options, props, react_component_name, dom_id)
-    return { "html" => "", "consoleReplayScript" => "" } unless prerender(options)
+  def server_rendered_react_component_html(props, react_component_name, dom_id,
+                                           prerender:, trace:, raise_on_prerender_error:)
+    return { "html" => "", "consoleReplayScript" => "" } unless prerender
 
     # On server `location` option is added (`location = request.fullpath`)
     # React Router needs this to match the current route
@@ -265,21 +297,22 @@ module ReactOnRailsHelper
 
     wrapper_js = <<-JS
 (function() {
+  var railsContext = #{rails_context.to_json};
 #{initialize_redux_stores}
   var props = #{props_string(props)};
   return ReactOnRails.serverRenderReactComponent({
     name: '#{react_component_name}',
     domNodeId: '#{dom_id}',
     props: props,
-    trace: #{trace(options)},
-    location: '#{request.fullpath}'
+    trace: #{trace},
+    railsContext: railsContext
   });
 })()
     JS
 
     result = ReactOnRails::ServerRenderingPool.server_render_js_with_console_logging(wrapper_js)
 
-    if result["hasErrors"] && raise_on_prerender_error(options)
+    if result["hasErrors"] && raise_on_prerender_error
       # We caught this exception on our backtrace handler
       # rubocop:disable Style/RaiseArgs
       raise ReactOnRails::PrerenderError.new(component_name: react_component_name,
@@ -314,66 +347,58 @@ module ReactOnRailsHelper
       memo << <<-JS
 reduxProps = #{props};
 storeGenerator = ReactOnRails.getStoreGenerator('#{store_name}');
-store = storeGenerator(reduxProps);
+store = storeGenerator(reduxProps, railsContext);
 ReactOnRails.setStore('#{store_name}', store);
       JS
     end
     result
   end
 
-  def raise_on_prerender_error(options)
-    options.fetch(:raise_on_prerender_error) { ReactOnRails.configuration.raise_on_prerender_error }
+  # This is the definitive list of the default values used for the rails_context, which is the
+  # second parameter passed to both component and store generator functions.
+  def rails_context
+    @rails_context ||= begin
+      uri = URI.parse(request.original_url)
+      # uri = URI("http://foo.com/posts?id=30&limit=5#time=1305298413")
+
+      result = {
+        # URL settings
+        href: request.original_url,
+        location: "#{uri.path}#{uri.query.present? ? "?#{uri.query}" : ''}",
+        scheme: uri.scheme, # http
+        host: uri.host, # foo.com
+        pathname: uri.path, # /posts
+        search: uri.query, # id=30&limit=5
+
+        # Locale settings
+        i18nLocale: I18n.locale,
+        i18nDefaultLocale: I18n.default_locale,
+        httpAcceptLanguage: request.env["HTTP_ACCEPT_LANGUAGE"]
+      }
+
+      if ReactOnRails.configuration.rendering_extension
+        custom_context = ReactOnRails.configuration.rendering_extension.custom_context(self)
+        result.merge!(custom_context) if custom_context
+      end
+      result
+    end
   end
 
-  def trace(options)
-    options.fetch(:trace) { ReactOnRails.configuration.trace }
+  def raise_on_prerender_error_option(val)
+    val.nil? ? ReactOnRails.configuration.raise_on_prerender_error : val
   end
 
-  def prerender(options)
-    options.fetch(:prerender) { ReactOnRails.configuration.prerender }
+  def trace_option(val)
+    val.nil? ? ReactOnRails.configuration.trace : val
   end
 
-  def replay_console(options)
-    options.fetch(:replay_console) { ReactOnRails.configuration.replay_console }
+  def prerender_option(val)
+    val.nil? ? ReactOnRails.configuration.prerender : val
   end
 
-  # rubocop:disable Metrics/CyclomaticComplexity
-  # rubocop:disable Metrics/PerceivedComplexity
-  def parse_options_props(component_name, options, other_options)
-    other_options ||= {}
-    if options.is_a?(Hash) && options.key?(:props)
-      props = options[:props]
-      final_options = options.except(:props)
-      final_options.merge!(other_options) if other_options.present?
-    else
-      # either no props specified or deprecated
-      if other_options.present? || options.is_a?(String)
-        deprecated_syntax = true
-      else
-        options_has_no_reserved_keys =
-          %i(prerender trace replay_console raise_on_prerender_error).none? do |key|
-            options.key?(key)
-          end
-        deprecated_syntax = options_has_no_reserved_keys && options.present?
-      end
-
-      if deprecated_syntax
-        puts "Deprecation: react_component now takes props as an explicity named parameter :props. "\
-          " Props as the second arg will be removed in a future release. Called for "\
-          "component_name: #{component_name}, controller: #{controller_name}, "\
-          "action: #{action_name}."
-        options = {} if options.is_a?(String) && options.blank?
-        props = options
-        final_options = other_options
-      else
-        options ||= {}
-        final_options = options.merge(other_options)
-      end
-    end
-    [final_options, props]
+  def replay_console_option(val)
+    val.nil? ? ReactOnRails.configuration.replay_console : val
   end
-  # rubocop:enable Metrics/CyclomaticComplexity
-  # rubocop:enable Metrics/PerceivedComplexity
 
   def use_hot_reloading?
     ENV["REACT_ON_RAILS_ENV"] == "HOT"

data/docs/additional-reading/hot-reloading-rails-development.md

@@ -0,0 +1,111 @@
+# Hot Reloading of Assets For Rails Development
+
+This document outlines the steps to setup your React On Rails Environment so that you can experience the pleasure of hot reloading of JavaScript and Sass during your Rails development work. There are 2 examples of this setup:
+
+1. [spec/dummy](../../spec/dummy): Simpler setup used for integration testing this gem.
+1. [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/). Full featured setup using Twitter bootstrap.
+
+## High Level Strategy
+
+We'll use a Webpack Dev server on port 3500 to provide the assets to Rails, rather than the asset pipeline, and only during development mode. This is configured via the `Procfile.hot`. 
+
+`Procfile.static` provides an alternative that uses "static" assets, similar to a production deployment.
+
+The secret sauce is in the [app/views/layouts/application.html.erb](../../spec/dummy/app/views/layouts/application.html.erb) where it uses view helpes to configure the correct assets to load, being either the "hot" assets or the "static" assets.
+
+## Places to Configure (Files to Examine)
+
+1. See the Webpack config files. Note, these examples are now setup for using [CSS Modules](https://github.com/css-modules/css-modules).
+   1. [client/webpack.client.base.config.js](../../spec/dummy/client/webpack.client.base.config.js): Common configuration for hot or static assets.
+   1. [client/webpack.client.rails.hot.config.js](../../spec/dummy/client/webpack.client.rails.hot.config.js): Setup for hot loading, using react-transform-hmr.
+   1. [client/webpack.client.rails.build.config.js](../../spec/dummy/client/webpack.client.rails.build.config.js): Setup for static loading, as is done in a production deployment.
+1. [app/views/layouts/application.html.erb](../../spec/dummy/app/views/layouts/application.html.erb): Uses the view helpers `env_stylesheet_link_tag` and `env_javascript_include_tag` which will either do the hot reloading or the static loading.
+1. See the Procfiles: [Procfile.hot](../../spec/dummy/Procfile.hot) and [Procfile.static](../../spec/dummy/Procfile.static). These:
+   1. Start the webpack processes, depending on the mode or HOT or not.
+   2. Start the rails server, setting an ENV value of REACT_ON_RAILS_ENV to HOT if we're hot loading or else setting this to blank.
+1. Configure the file Rails asset pipeline files:
+   1. [app/assets/javascripts/application_static.js](../../spec/dummy/app/assets/javascripts/application_static.js) 
+   1. [app/assets/stylesheets/application_static.css.scss](../../spec/dummy/app/assets/stylesheets/application_static.css.scss)
+1. Be sure your [config/initializers/assets.rb](../../spec/dummy/config/initializers/assets.rb) is configured to include the webpack generated files.
+1. Copy the [client/server-rails-hot.js](../../spec/dummy/client/server-rails-hot.js) to the your client directory.
+1. Copy the scripts in the top level and client level `package.json` files:
+   1. Top Level: [package.json](../../spec/dummy/package.json)
+   1. Client Level: [package.json](../../spec/dummy/client/package.json)
+
+
+## Code Snippets
+Please refer to the examples linked above in `spec/dummy` as these code samples might be out of date.
+
+
+### config/initializers/assets.rb
+
+```ruby
+# Add folder with webpack generated assets to assets.paths
+Rails.application.config.assets.paths << Rails.root.join("app", "assets", "webpack")
+
+# Precompile additional assets.
+# application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
+Rails.application.config.assets.precompile << "server-bundle.js"
+
+type = ENV["REACT_ON_RAILS_ENV"] == "HOT" ? "non_webpack" : "static"
+Rails.application.config.assets.precompile +=
+  [
+    "application_#{type}.js",
+    "application_#{type}.css"
+  ]
+```
+
+### app/views/layouts/application.html.erb
+
+```erb
+<head>
+  <title>Dummy</title>
+
+  <!-- These do use turbolinks 5 -->
+  <%= env_stylesheet_link_tag(static: 'application_static',
+                              hot: 'application_non_webpack',
+                              media: 'all',
+                              'data-turbolinks-track' => "reload") %>
+
+  <!-- These do not use turbolinks, so no data-turbolinks-track -->
+  <!-- This is to load the hot assets. -->
+  <%= env_javascript_include_tag(hot: ['http://localhost:3500/vendor-bundle.js',
+                                       'http://localhost:3500/app-bundle.js']) %>
+
+  <!-- These do use turbolinks 5 -->
+  <%= env_javascript_include_tag(static: 'application_static',
+                                 hot: 'application_non_webpack',
+                                 'data-turbolinks-track' => "reload") %>
+
+  <%= csrf_meta_tags %>
+</head>
+```
+
+### Procfile.static
+```
+  # Run Rails without hot reloading (static assets).
+  rails: REACT_ON_RAILS_ENV= rails s -b 0.0.0.0
+  
+  # Build client assets, watching for changes.
+  rails-client-assets: npm run build:dev:client
+  
+  # Build server assets, watching for changes. Remove if not server rendering.
+  rails-server-assets: npm run build:dev:server
+```
+
+### Procfile.hot
+
+```
+# Procfile for development with hot reloading of JavaScript and CSS 
+
+# Development rails requires both rails and rails-assets
+# (and rails-server-assets if server rendering)
+rails: REACT_ON_RAILS_ENV=HOT rails s -b 0.0.0.0
+
+# Run the hot reload server for client development
+hot-assets: HOT_RAILS_PORT=3500 npm run hot-assets
+
+# Keep the JS fresh for server rendering. Remove if not server rendering
+rails-server-assets: npm run build:dev:server
+```
+

data/docs/additional-reading/installation-overview.md

@@ -0,0 +1,32 @@
+# Installation Overview
+
+Here's an overview of installation if you're not using the generator. 
+
+Note, the best to understand how to use ReactOnRails is to study the examples:
+
+1. [spec/dummy](../../spec/dummy): Simple, no DB example.
+2. [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial): Full featured example.
+
+## Configure the `/client` Directory
+
+This directory has no references to Rails outside of the destination directory for the files created by the various Webpack config files. 
+
+The only requirements within this directory for basic React on Rails integration are:
+
+1. Your webpack configuration files:
+   1. Create outputs in a directory like `/app/assets/webpack`, which is customizable in your `config/initializers/react_on_rails.rb`.
+   1. Provide server rendering if you wish to use that feature.
+1. Your JavaScript code "registers" any components and stores per the ReactOnRails APIs of ReactOnRails.register(components) and ReactOnRails.registerStore(stores). See API docs in [README.md](../../README.md) and the [ReactOnRails.js source](../../node_package/src/ReactOnRails.js).
+1. Set your registration file as an "entry" point in your Webpack configs.
+1. You create scripts in `client/package.json` per the example apps. These are used for building your Webpack assets. Also do this for your top level `package.json`.
+
+## Rails Steps (outside of /client)
+1. Configure the `config/initializers/react_on_rails.rb`. You can adjust some necessary settings and defaults. See file [spec/dummy/config/initializers/react_on_rails.rb](../../spec/dummy/config/initializers/react_on_rails.rb) for a detailed example of configuration, including comments on the different values to configure.
+1. Configure your Procfiles per the example apps. These are at the root of your Rails installation.
+1. Configure `config/initializers/assets.rb` probably like [spec/dummy/config/initializers/assets.rb](../../spec/dummy/config/initializers/assets.rb). This example shows what's necessary if you're enabling the hot-reloading Rails development option.
+1. Configure your top level JavaScript files for inclusion in your layout. You'll want a version that you use for static assets, and you want a file for any files in your setup that are not part of your webpack build. The reason for this is for use with hot-reloading. If you are not using hot reloading, then you only need to configure your `application.js` file to include your Webpack generated files. For more information on hot reloading, see [Hot Reloading of Assets For Rails Development](hot-reloading-rails-development.md)
+ 
+1. Configure your `lib/tasks/assets.rake` file to run webpack during asset precompilation.
+1. If you are deploying to Heroku, see [heroku-deployment.md](heroku-deployment.md)
+
+If I missed anything, please submit a PR or file an issue.

data/docs/{additional_reading/react_router.md → additional-reading/react-router.md}

@@ -6,12 +6,14 @@ However, when attempting to use server-rendering, it is necessary to take steps
 If you are working with the HelloWorldApp created by the react_on_rails generator, then the code below corresponds to the module in `client/app/bundles/HelloWorld/startup/HelloWorldAppServer.jsx`.
 
 ```js
-const RouterApp = (props, location) => {
-  const store = createStore(props);
-
+const RouterApp = (props, railsContext) => {
   let error;
   let redirectLocation;
   let routeProps;
+  const { location } = railsContext;
+  
+  // create your hydrated store
+  const store = createStore(props);
 
   // See https://github.com/reactjs/react-router/blob/master/docs/guides/advanced/ServerRendering.md
   match({ routes, location }, (_error, _redirectLocation, _routeProps) => {

data/docs/{recommended-project-structure.md → additional-reading/recommended-project-structure.md}

@@ -2,6 +2,9 @@
 
 While React On Rails does not *enforce* a specific project structure, we do *recommend* a standard organization. The more we follow standards as a community, the easier it will be for all of us to move between various Rails projects that include React On Rails.
 
+The best way to understand these standards is to follow this example: [github.com/shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial)
+
+## JavaScript Assets
 1. `/client`: All client side JavaScript goes under the `/client` directory. Place all the major domains of the client side app under client.
 1. `/client/app`: All application JavaScript. Note the adherence to the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript#naming-conventions) where we name the files to correspond to exported Objects (PascalCase) or exported functions (camelCase). We don't use dashes or snake_case for JavaScript files, except for possibly some config files.
 1. `/client/app/bundles`: Top level of different app domains. Use a name within this directory for you app domains. For example, if you had a domain called `widget-editing`, then you would have: `/client/app/bundles/widget-editing`
@@ -18,5 +21,24 @@ While React On Rails does not *enforce* a specific project structure, we do *rec
   * `/store`: Store, which might be [configured differently for dev vs. production](https://github.com/reactjs/redux/tree/master/examples/real-world/store).
   * `/startup`: Component bindings to stores, with registration of components and stores.
   * `/schemas`: Schemas for AJAX JSON requests and responses, as used by the [Normalizr](https://github.com/gaearon/normalizr) package.
+
+## CSS, Sass, Fonts, and Images
+Should you move your styling assets to Webpack? Or stick with the plain Rails asset pipeline. It depends! 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
+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. See [webpack.client.rails.build.config.js](https://github.com/shakacode/react_on_rails/blob/master/spec%2Fdummy%2Fclient%2Fwebpack.client.rails.build.config.js) for an example how to set the webpack part.
+
+#### 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
+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 do hot reloading of your assets. Thus, you do not have to refresh your web page to see asset change, including changing styles.
+1. You can run your client code on a mocked out express server for super fast prototyping. In other words, your client application can somewhat more easily be move to a different application server.

data/docs/{doctrine.md → misc/doctrine.md}

@@ -19,7 +19,7 @@ The React on Rails setup provides several key components related to front-end de
 6. Happiness for us is actively participating in open source, so we want to be where the action is, which is with the npm libraries on github.com.
 7. You can get set up on React on Rails **FAST** using our application generator.
 8. By placing all client-side development inside of the `/client` directory, pure JavaScript developers can productively do development separate from Rails. Instead of Rails APIs, stub APIs on an express server can provide a simple backend, allowing for rapid iteration of UI prototypes.
-9. Just because we're not relying on the Rails asset pipeline for ES6 conversion does not mean that we're deploying Rails apps in any different way. We still use the asset pipeline to include our Webpack compiled JavaScript. This only requires a few small modifications, as explained in our doc [Heroku Deployment](additional_reading/heroku_deployment.md).
+9. Just because we're not relying on the Rails asset pipeline for ES6 conversion does not mean that we're deploying Rails apps in any different way. We still use the asset pipeline to include our Webpack compiled JavaScript. This only requires a few small modifications, as explained in our doc [Heroku Deployment](additional-reading/heroku_deployment.md).
 
 ## Convention over Configuration
 * React on Rails has taken the hard work out of figuring out the JavaScript tooling that works best with Rails. Not only could you spend lots of time researching different tooling, but then you'd have to figure out how to splice it all together. This is where a lot of "JavaScript fatigue" comes from. The following keep the code clean and consistent:

data/docs/{tutorial-v2.md → tutorial.md}

@@ -1,10 +1,10 @@
-# Tutorial for v2.0
+# Tutorial for React on Rails
 
-I just released RC3 of [React On Rails](https://github.com/shakacode/react_on_rails/tree/npm-react-on-rails-js). Here's a tiny tutorial to get you started. This tutorial setups up a new Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering.
+This tutorial setups up a new Rails app with **React on Rails**, demonstrating Rails + React + Redux + Server Rendering.
 
 You can find:
 
-* [Source code for this sample app](https://github.com/justin808/test-react-on-rails-3)
+* [Source code for this sample app](https://github.com/justin808/test-react-on-rails-3) (for an older version)
 * [Live on Heroku](https://shakacode-react-on-rails.herokuapp.com/hello_world)
 
 By the time you read this, the latest may have changed. Be sure to check the versions here:
@@ -12,7 +12,7 @@ By the time you read this, the latest may have changed. Be sure to check the ver
 * https://rubygems.org/gems/react_on_rails
 * https://www.npmjs.com/package/react-on-rails
 
-Trying out v2 is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 4.x and node version 4+. I recommend `rvm` and `nvm` to install Ruby and Node.
+Trying out v4 is super easy, so long as you have the basic prerequisites. This includes the basics for Rails 4.x and node version 5+. I recommend `rvm` and `nvm` to install Ruby and Node.
 
 ```
 cd <directory where you want to create your new Rails app>

data/lib/react_on_rails/configuration.rb

@@ -55,7 +55,8 @@ module ReactOnRails
       server_renderer_pool_size: 1,
       server_renderer_timeout: 20,
       skip_display_none: false,
-      webpack_generated_files: []
+      webpack_generated_files: [],
+      rendering_extension: nil
     )
   end
 
@@ -65,14 +66,15 @@ module ReactOnRails
                   :logging_on_server, :server_renderer_pool_size,
                   :server_renderer_timeout, :raise_on_prerender_error,
                   :skip_display_none, :generated_assets_dirs, :generated_assets_dir,
-                  :webpack_generated_files
+                  :webpack_generated_files, :rendering_extension
 
     def initialize(server_bundle_js_file: nil, prerender: nil, replay_console: nil,
                    trace: nil, development_mode: nil,
                    logging_on_server: nil, server_renderer_pool_size: nil,
                    server_renderer_timeout: nil, raise_on_prerender_error: nil,
                    skip_display_none: nil, generated_assets_dirs: nil,
-                   generated_assets_dir: nil, webpack_generated_files: nil)
+                   generated_assets_dir: nil, webpack_generated_files: nil,
+                   rendering_extension: nil)
       self.server_bundle_js_file = server_bundle_js_file
       self.generated_assets_dirs = generated_assets_dirs
       self.generated_assets_dir = generated_assets_dir
@@ -94,6 +96,7 @@ module ReactOnRails
       self.server_renderer_timeout = server_renderer_timeout # seconds
 
       self.webpack_generated_files = webpack_generated_files
+      self.rendering_extension = rendering_extension
     end
   end
 end

data/lib/react_on_rails/test_helper/ensure_assets_compiled.rb

@@ -99,7 +99,7 @@ watch processes, such by running a clean on your generated bundles before starti
 
 If you are frequently running tests, you can run webpack in watch mode for static assets to
 speed up this process. See the official documentation:
-https://github.com/shakacode/react_on_rails/blob/master/docs/additional_reading/rspec_configuration.md
+https://github.com/shakacode/react_on_rails/blob/master/docs/additional-reading/rspec-configuration.md
         MSG
 
         if already_compiled_client_file

data/lib/react_on_rails/test_helper.rb

@@ -24,7 +24,7 @@ module ReactOnRails
     # faster. The helper looks for these processes and will abort recompiling if it finds them
     # to be running.
     #
-    # See docs/additional_reading/rspec_configuration.md for more info
+    # See docs/additional-reading/rspec-configuration.md for more info
     #
     # Params:
     # config - config for rspec

data/lib/react_on_rails/version.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module ReactOnRails
-  VERSION = "4.0.3".freeze
+  VERSION = "5.0.0.rc.1".freeze
 end