react_on_rails 6.2.1 → 6.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: fa5e89cce86385ef87057cba58202b7a73ec7766
-  data.tar.gz: 20e2c394c80be8b0bc5bc4f9f3d2b8e30a62a8ae
+  metadata.gz: 438f4802448657a19eec8b4e61a88fe92b400fa6
+  data.tar.gz: f7cbeef69e4172876e754b1a9f651a55d88a8068
 SHA512:
-  metadata.gz: 5940a4eaec389437ea0559397b93630bfc1982658f2e6570f6606dbc88cce54d2cb828ad663fc41bb8938e28f3580e650d5bede7f68e6abe8872814b0d379c1e
-  data.tar.gz: b1230e48c557b4060d859fcb94727e93f39928ecf209c882c55619b2a26311ba4fc6abfcdde69c7f16cbdc9253b5b83d976d245ed2632808539cdd4290759238
+  metadata.gz: f4a3dac61a8ee06122987ba2b3e388ae235681bc84ff891bd7da1bdd44c29bd5b5b0a16c69216db628e3a7933105b7c34c8027514f0cbcf7a8e75bb9d1d87501
+  data.tar.gz: 17d55ed293b3a04507874f20b8570b2a851bd76b66b2806d821dbeaa41881e94b7e32216c4f3bcec11809b7a1f0aaf054c867022c2de4c52d32faa747df52308

data/CHANGELOG.md

@@ -1,10 +1,20 @@
 # Change Log
-All notable changes to this project will be documented in this file. Items under `Unreleased` is upcoming features that will be out in next version.
+All notable changes to this project's source code will be documented in this file. Items under `Unreleased` is upcoming features that will be out in next version.
 
 Contributors: please follow the recommendations outlined at [keepachangelog.com](http://keepachangelog.com/). Please use the existing headings and styling as a guide, and add a link for the version diff at the bottom of the file. Also, please update the `Unreleased` link to compare to the latest release version.
 
 ## [Unreleased]
 
+## [6.3.0]
+##### Changed
+- Modified register API to allow registration of renderers, allowing a user to manually render their app to the DOM. This allows for code splitting and deferred loading. [#581](https://github.com/shakacode/react_on_rails/pull/581) by [jtibbertsma](https://github.com/jtibbertsma).
+
+- Updated Basic Generator & Linters. Examples are simpler. [#624](https://github.com/shakacode/react_on_rails/pull/624) by [Judahmeek](https://github.com/Judahmeek).
+
+- Slight improvement to the 'no hydrated stores' error. [#605](https://github.com/shakacode/react_on_rails/pull/605) by [cookiefission](https://github.com/cookiefission).
+
+- Don't assume ActionMailer is available. [#608](https://github.com/shakacode/react_on_rails/pull/608) by [tuzz](https://github.com/tuzz).
+
 ## [6.2.1] - 2016-11-19
 - Removed unnecesary passing of context in the HelloWorld Container example and basic generator. [#612](https://github.com/shakacode/react_on_rails/pull/612) by [justin808](https://github.com/justin808)
 
@@ -383,7 +393,8 @@ Best done with Object destructing:
 ##### Fixed
 - Fix several generator related issues.
 
-[Unreleased]: https://github.com/shakacode/react_on_rails/compare/6.2.1...master
+[Unreleased]: https://github.com/shakacode/react_on_rails/compare/6.3.0...master
+[6.3.0]: https://github.com/shakacode/react_on_rails/compare/6.2.1...6.3.0
 [6.2.1]: https://github.com/shakacode/react_on_rails/compare/6.2.0...6.2.1
 [6.2.0]: https://github.com/shakacode/react_on_rails/compare/6.1.2...6.2.0
 [6.1.2]: https://github.com/shakacode/react_on_rails/compare/6.1.1...6.1.2

data/Gemfile

@@ -32,6 +32,7 @@ gem "web-console", "~> 2.0", group: :development
 
 # below are copied from spec/dummy/Gemfile
 gem "rspec-rails"
+gem "rspec-retry"
 gem "capybara"
 gem "capybara-screenshot"
 gem "capybara-webkit"

data/README.md

@@ -2,7 +2,7 @@
 
 **For a complete example of this gem, see our live demo at [www.reactrails.com](http://www.reactrails.com). ([Source Code](https://github.com/shakacode/react-webpack-rails-tutorial))**
 
-Aloha from Justin Gordon ([bio](http://www.railsonmaui.com/about)) and the [ShakaCode](http://www.shakacode.com) Team! We're actively looking for new projects involving React, React-Native, and Rails. Please contact me at [justin@shakacode.com](mailto:justin@shakacode.com) if we could potentially help you in any way. Besides consulting on bigger projects, [ShakaCode](http://www.shakacode.com) is doing Skype plus Slack/Github based coaching for React on Rails. [Click here](http://www.shakacode.com/work/index.html) for more information.
+Aloha from Justin Gordon ([bio](http://www.railsonmaui.com/about)) and the [ShakaCode](http://www.shakacode.com) Team! We're actively looking for new projects involving React, React-Native, and Rails. Please contact me at [justin@shakacode.com](mailto:justin@shakacode.com) if we could potentially help you in any way. Besides consulting on bigger projects, [ShakaCode](http://www.shakacode.com) is doing ScreenHero plus Slack/Github based coaching for React on Rails. See our blog post [Can ShakaCode Help You?](https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9) for more information. 
 
 We're offering a free half-hour project consultation, on anything from React on Rails to any aspect of web application development for both consumer and enterprise products. In addition to React.js and Rails, we're doing React-Native iOS and Android apps!
 
@@ -310,6 +310,14 @@ You may want different initialization for your server rendered components. For e
 
 If you do want different code to run, you'd setup a separate webpack compilation file and you'd specify a different, server side entry file. ex. 'serverHelloWorldApp.jsx'. Note, you might be initializing HelloWorld with version specialized for server rendering.
 
+#### Generator Functions
+Why would you create a function that returns a React component? For example, you may want the ability to use the passed-in props to initialize a redux store or setup react-router. Or you may want to return different components depending on what's in the props. ReactOnRails will automatically detect a registered generator function.
+
+#### 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 manually 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).
+
+Renderer functions are not meant to be used on the server, since there's no DOM on the server. Instead, use a generator function. Attempting to server render with a renderer function will cause an error.
+
 ## ReactOnRails View Helpers API
 Once the bundled files have been generated in your `app/assets/webpack` folder and you have exposed your components globally, you will want to run your code in your Rails views using the included helper method.
 
@@ -327,7 +335,7 @@ react_component(component_name,
                 html_options: {})
 ```
 
-+ **component_name:** Can be a React component, created using a ES6 class, or `React.createClass`, or a generator function that returns a React component.
++ **component_name:** Can be a React component, created using a ES6 class, or `React.createClass`, a generator function that returns a React component, or a renderer function that manually renders a React component to the dom (client side only).
 + **options:**
   + **props:** Ruby Hash which contains the properties to pass to the react object, or a JSON string. If you pass a string, we'll escape it for you.
   + **prerender:** enable server-side rendering of component. Set to false when debugging!
@@ -365,9 +373,6 @@ Note, you don't need to separately initialize your redux store. However, it's re
 1. You want to have multiple components that access the same store.
 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.
 
-### Generator Functions
-Why would you create a function that returns a React component? For example, you may want the ability to use the passed-in props to initialize a redux store or setup react-router. Or you may want to return different components depending on what's in the props. ReactOnRails will automatically detect a registered generator function.
-
 ### server_render_js
 `server_render_js(js_expression, options = {})`
 
@@ -439,7 +444,7 @@ See [ReactOnRails JavaScript API](docs/api/javascript-api.md).
 
 Rails has built-in protection for Cross-Site Request Forgery (CSRF), see [Rails Documentation](http://guides.rubyonrails.org/security.html#cross-site-request-forgery-csrf). To nicely utilize this feature in JavaScript requests, React on Rails is offerring two helpers that can be used as following for POST, PUT or DELETE requests:
 
-```
+```js
 import ReactOnRails from 'react-on-rails';
 
 // reads from DOM csrf token generated by Rails in <%= csrf_meta_tags %>
@@ -456,6 +461,7 @@ If you are using [jquery-ujs](https://github.com/rails/jquery-ujs) for AJAX call
 
 1. [React on Rails docs for react-router](docs/additional-reading/react-router.md)
 1. Examples in [spec/dummy/app/views/react_router](spec/dummy/app/views/react_router) and follow to the JavaScript code in the [spec/dummy/client/app/startup/ServerRouterApp.jsx](spec/dummy/client/app/startup/ServerRouterApp.jsx).
+1. [Code Splitting docs](docs/additional-reading/code-splitting.md) for information about how to set up code splitting for server rendered routes.
 
 ## Deployment
 * Version 6.0 puts the necessary precompile steps automatically in the rake precompile step. You can, however, disable this by setting certain values to nil in the [config/initializers/react_on_rails.rb](spec/dummy/config/initializers/react_on_rails.rb).
@@ -471,6 +477,7 @@ Node.js can be used as the backend for server-side rendering instead of [execJS]
 **Try out our new [Documentation Gitbook](https://shakacode.gitbooks.io/react-on-rails/content/) for improved readability & reference!**
 + **Rails**
   + [Rails Assets](docs/additional-reading/rails-assets.md)
+  + [Rails Engine Integration](docs/additional-reading/rails-engine-integration.md)
   + [Rails View Rendering from Inline JavaScript](docs/additional-reading/rails_view_rendering_from_inline_javascript.md)
   + [RSpec Configuration](docs/additional-reading/rspec-configuration.md)
   + [Turbolinks](docs/additional-reading/turbolinks.md)
@@ -486,6 +493,7 @@ Node.js can be used as the backend for server-side rendering instead of [execJS]
   + [Developing with the Webpack Dev Server](docs/additional-reading/webpack-dev-server.md)
   + [Node Server Rendering](docs/additional-reading/node-server-rendering.md)
   + [Server Rendering Tips](docs/additional-reading/server-rendering-tips.md)
+  + [Code Splitting](docs/additional-reading/code-splitting.md)
 
 + **Development**
   + [React on Rails Basic Installation Tutorial](docs/tutorial.md) ([live demo](https://hello-react-on-rails.herokuapp.com))
@@ -554,7 +562,7 @@ We owe much gratitude to the work of the [react-rails gem](https://github.com/re
 
 ---
 
-Aloha from Justin Gordon ([bio](http://www.railsonmaui.com/about)) and the [ShakaCode](http://www.shakacode.com) Team! We're actively looking for new projects involving React, React-Native, and Rails. Please contact me at [justin@shakacode.com](mailto:justin@shakacode.com) if we could potentially help you in any way. Besides consulting on bigger projects, [ShakaCode](http://www.shakacode.com) is doing Skype plus Slack/Github based coaching for React on Rails. [Click here](http://www.shakacode.com/work/index.html) for more information.
+Aloha from Justin Gordon ([bio](http://www.railsonmaui.com/about)) and the [ShakaCode](http://www.shakacode.com) Team! We're actively looking for new projects involving React, React-Native, and Rails. Please contact me at [justin@shakacode.com](mailto:justin@shakacode.com) if we could potentially help you in any way. Besides consulting on bigger projects, [ShakaCode](http://www.shakacode.com) is doing Skype plus Slack/Github based coaching for React on Rails. See our blog post [Can ShakaCode Help You?](https://blog.shakacode.com/can-shakacode-help-you-4a5b1e5a8a63#.jex6tg9w9) for more information.
 
 We're offering a free half-hour project consultation, on anything from React on Rails to any aspect of web application development for both consumer and enterprise products. In addition to React.js and Rails, we're doing React-Native iOS and Android apps!
 

data/app/helpers/react_on_rails_helper.rb

@@ -345,7 +345,7 @@ ReactOnRails.setStore('#{store_name}', store);
   def rails_context(server_side:)
     @rails_context ||= begin
       result = {
-        inMailer: controller.present? && controller.is_a?(ActionMailer::Base),
+        inMailer: in_mailer?,
         # Locale settings
         i18nLocale: I18n.locale,
         i18nDefaultLocale: I18n.default_locale
@@ -400,4 +400,11 @@ ReactOnRails.setStore('#{store_name}', store);
     options = args.delete_if { |key, _value| %i(hot static).include?(key) }
     send(tag_method_name, *assets, options) unless assets.empty?
   end
+
+  def in_mailer?
+    return false unless controller.present?
+    return false unless defined?(ActionMailer::Base)
+
+    controller.is_a?(ActionMailer::Base)
+  end
 end

data/docs/additional-reading/code-splitting.md

@@ -0,0 +1,155 @@
+# Code Splitting
+
+What is code splitting? From the webpack documentation:
+
+> For big web apps it’s not efficient to put all code into a single file, especially if some blocks of code are only required under some circumstances. Webpack has a feature to split your codebase into “chunks” which are loaded on demand. Some other bundlers call them “layers”, “rollups”, or “fragments”. This feature is called “code splitting”.
+
+## Server Rendering and Code Splitting
+
+Let's say you're requesting a page that needs to fetch a code chunk from the server before it's able to render. If you do all your rendering on the client side, you don't have to do anything special. However, if the page is rendered on the server, you'll find that React will spit out the following error:
+
+> Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
+
+> (client) <!-- react-empty: 1 -
+
+> (server) <div data-reactroot="
+<!--This comment is here because the comment beginning on line 13 messes up Sublime's markdown parsing-->
+
+Different markup is generated on the client than on the server. Why does this happen? When you register a component or generator function with `ReactOnRails.register`, react on rails will render the component as soon as the page loads. However, react-router renders a comment while waiting for the code chunk to be fetched from the server. This means that react will tear all of the server rendered code out of the DOM, and then rerender it a moment later once the code chunk arrives from the server, defeating most of the purpose of server rendering.
+
+### 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.
+
+Here's an example of how you might use this in practice:
+
+#### page.html.erb
+```erb
+<%= react_component("NavigationApp", prerender: true) %>
+<%= react_component("RouterApp", prerender: true) %>
+<%= redux_store_hydration_data %>
+```
+
+#### clientRegistration.js
+```js
+import ReactOnRails from 'react-on-rails';
+import NavigationApp from './NavigationApp';
+
+// Note that we're importing a different RouterApp that in serverRegistration.js
+// Renderer functions should not be used on the server, because there is no DOM.
+import RouterApp from './RouterAppRenderer';
+import applicationStore from '../store/applicationStore';
+
+ReactOnRails.registerStore({applicationStore});
+ReactOnRails.register({
+  NavigationApp,
+  RouterApp,
+});
+```
+
+#### serverRegistration.js
+```js
+import ReactOnRails from 'react-on-rails';
+import NavigationApp from './NavigationApp';
+
+// Note that we're importing a different RouterApp that in clientRegistration.js
+import RouterApp from './RouterAppServer';
+import applicationStore from '../store/applicationStore';
+
+ReactOnRails.registerStore({applicationStore});
+ReactOnRails.register({
+  NavigationApp,
+  RouterApp,
+});
+```
+Note that you should not register a renderer on the server, since there won't be a domNodeId when we're server rendering. Note that the `RouterApp` imported by `serverRegistration.js` is from a different file. For an example of how to set up an app for server rendering, see the [react router docs](react-router.md).
+
+#### RouterAppRenderer.jsx
+```jsx
+import ReactOnRails from 'react-on-rails';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Router from 'react-router/lib/Router';
+import match from 'react-router/lib/match';
+import browserHistory from 'react-router/lib/browserHistory';
+import { Provider } from 'react-redux';
+
+import routes from '../routes/routes';
+
+
+const RouterAppRenderer = (props, railsContext, domNodeId) => {
+  const store = ReactOnRails.getStore('applicationStore');
+  const history = browserHistory;
+
+  match({ history, routes }, (error, redirectionLocation, renderProps) => {
+    if (error) {
+      throw error;
+    }
+
+    const reactElement = (
+      <Provider store={store}>
+        <Router {...renderProps} />
+      </Provider>
+    );
+
+    ReactDOM.render(reactElement, document.getElementById(domNodeId));
+  });
+};
+
+export default RouterAppRenderer;
+```
+
+What's going on in this example is that we're putting the rendering code in the callback passed to `match`. The effect is that the client render doesn't happen until the code chunk gets fetched from the server, preventing the client/server checksum mismatch.
+
+The idea is that match from react-router is async; it fetches the component using the getComponent method that you provide with the route definition, and then passes the props to the callback that are needed to do the complete render. Then we do the first render inside of the callback, so that the first render is the same as the server render.
+
+The server render matches the deferred render because the server bundle is a single file, and so it doesn't need to wait for anything to be fetched.
+
+### Working Example
+
+There's an implemented example of code splitting in the `spec/dummy` folder of this repository.
+
+See:
+
+- [spec/dummy/client/app/startup/clientRegistration.jsx](../../spec/dummy/client/app/startup/clientRegistration.jsx)
+- [spec/dummy/client/app/startup/serverRegistration.jsx](../../spec/dummy/client/app/startup/serverRegistration.jsx)
+- [spec/dummy/client/app/startup/DeferredRenderAppRenderer.jsx](../../spec/dummy/client/app/startup/DeferredRenderAppRenderer.jsx) <-- Code splitting implemented here
+- [spec/dummy/client/app/startup/DeferredRenderAppServer.jsx](../../spec/dummy/client/app/startup/DeferredRenderAppServer.jsx)
+- [spec/dummy/client/app/components/DeferredRender.jsx](../../spec/dummy/client/app/components/DeferredRender.jsx)
+- [spec/dummy/client/app/components/DeferredRenderAsyncPage.jsx](../../spec/dummy/client/app/components/DeferredRenderAsyncPage.jsx)
+
+### Caveats
+
+If you're going to try to do code splitting with server rendered routes, you'll probably need to use seperate route definitions for client and server to prevent code splitting from happening for the server bundle. The server bundle should be one file containing all the JavaScript code. This will require you to have seperate webpack configurations for client and server.
+
+The reason is we do server rendering with ExecJS, which is not capable of doing anything asynchronous. It would be impossible to asyncronously fetch a code chunk while server rendering. See [this issue](https://github.com/shakacode/react_on_rails/issues/477) for a discussion.
+
+Also, do not attempt to register a renderer on the server. Instead, register either a generator function or a component. If you register a renderer in the server bundle, you'll get an error when react on rails tries to server render the component.
+
+## How does Webpack know where to find my code chunks?
+
+Add the following to the output key of your webpack config:
+
+```js
+config = {
+  output: {
+    publicPath: '/assets/',
+  }
+};
+```
+
+This causes Webpack to prepend the code chunk filename with `/assets/` in the request url. The react on rails sets up the webpack config to put webpack bundles in `app/assets/javascripts/webpack`, and modifies `config/initializers/assets.rb` so that rails detects the bundles. This means that when we prepend the request url with `/assets/`, rails will know what webpack is asking for.
+
+See [rails-assets.md](./rails-assets.md) to learn more about static assets.
+
+If you forget to set the public path, webpack will request the code chunk at `/{filename}`. This will cause the request to be handled by the Rails router, which will send back a 404 response, assuming that you don't have a catch-all route. In your javascript console, you'll get the following error:
+
+> GET http://localhost:3000/1.1-bundle.js
+
+You'll also see the following in your Rails development log:
+
+> Started GET "/1.1-bundle.js" for 127.0.0.1 at 2016-11-29 15:21:55 -0800
+>
+> ActionController::RoutingError (No route matches [GET] "/1.1-bundle.js")
+
+It's worth mentioning that in Webpack v2, it's possible to register an error handler by calling `catch` on the promise returned by `System.import`, so if you want to do error handling, you should use v2. The [example](#working-example) in `spec/dummy` is currently using Webpack v1.

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

@@ -5,7 +5,6 @@ The generator has created the necessary files and gems for deployment to Heroku.
 + `12factor` gem: required by Heroku if using a version before Rails 5 (see their [README](https://github.com/heroku/rails_12factor#rails-5) for more information if upgrading from a lower version)
 + `'puma'` gem: recommended Heroku webserver
 + `config/puma.rb`: Puma webserver config file
-+ `lib/tasks/assets.rake`: This rake task file is provided by the generator regardless of whether the user chose Heroku Deployment as an option. It is highlighted here because it is helpful to understand that this task is what generates your JavaScript bundles in production. Previously, users of this gem had to create a file `lib/tasks/assets.rake` to modify the Rails precompile task to deploy assets for production. However, we add this automatically in newer versions of React on Rails. If you need to customize this file, see [lib/tasks/assets.rake from React on Rails](https://github.com/shakacode/react_on_rails/blob/master/lib/tasks/assets.rake) as an example.
 
 ## More details on precompilation using webpack to create JavaScript assets
 This is how the rake task gets modified. You should be able to call `clear_prerequisites` and setup your own custom precompile if needed.

data/docs/additional-reading/rails-engine-integration.md

@@ -0,0 +1,34 @@
+## In your engine
+
++ At the top of `config/initializers/react_on_rails.rb`
+```ruby
+ActiveSupport.on_load(:action_view) do
+  include ReactOnRailsHelper
+end
+```
++ In your `<engine_name>.gemspec`:
+```ruby
+s.add_dependency 'react_on_rails', '~> 6'
+```
++ In your `lib/<engine_name>.rb` (the entry point for your engine)
+```ruby
+require "react_on_rails"
+```
++ In your `lib/tasks/<engine_name>_tasks.rake`:
+```ruby
+Rake.application.remove_task('react_on_rails:assets:compile_environment')
+
+task 'react_on_rails:assets:compile_environment' do
+  path = File.join(YourEngineName::Engine.root, 'client')
+  sh "cd #{path} && #{ReactOnRails.configuration.npm_build_production_command}"
+end
+``` 
+## In the project including your engine
+
+Place `gem 'react_on_rails', '~> 6'` before the gem pointing at your engine in your gemfile.
+
+This is necessary because React on Rails attaches itself to the rake assets:precompile task. It then uses a direct path to cd into client, which will not exist in the main app that includes your engine. Since you'll always be precompiling assets in the parent app, this will always fail. The workaround then, is to remove the task and replace it with one that goes into your Engine's root. The reason you have to include the react on rails gem before your engine is so that the `react_on_rails:assets:compile_environment` task is defined by the time your engine gets loaded to remove it.
+
+Requiring `react_on_rails` and including the helper will get rid of any issues where react on rails or react_component is undefined.
+
+As far as solving the assets issue, `lib/tasks/assets.rake` in `react_on_rails` would somehow have to know that `react_on_rails` was included in an engine, and decide the path accordingly. This might be impossible, especially in the case of multiple engines using `react_on_rails` in a single application. Another solution would be to detach this rake task from the rails assets:precompile task, and let people use it separately.

data/lib/generators/react_on_rails/base_generator.rb

@@ -44,7 +44,7 @@ module ReactOnRails
         DATA
 
         app_js_path = "app/assets/javascripts/application.js"
-        found_app_js = dest_file_exists?(app_js_path) || dest_file_exists?(app_js_path + ".coffee")
+        found_app_js = dest_file_exists?(app_js_path) || dest_file_exists?("#{app_js_path}.coffee")
         if found_app_js
           prepend_to_file(found_app_js, data)
         else
@@ -65,20 +65,19 @@ module ReactOnRails
       def copy_base_files
         base_path = "base/base/"
         base_files = %w(app/controllers/hello_world_controller.rb
+                        client/app/bundles/HelloWorld/components/HelloWorld.jsx
                         client/.babelrc
                         client/webpack.config.js
                         client/REACT_ON_RAILS_CLIENT_README.md)
-        base_files.each { |file| copy_file(base_path + file, file) }
+        base_files.each { |file| copy_file("#{base_path}#{file}", file) }
       end
 
       def template_base_files
         base_path = "base/base/"
         %w(config/initializers/react_on_rails.rb
            Procfile.dev
-           app/views/hello_world/index.html.erb
            package.json
-           client/app/bundles/HelloWorld/components/HelloWorld.jsx
-           client/package.json).each { |file| template(base_path + file + ".tt", file) }
+           client/package.json).each { |file| template("#{base_path}#{file}.tt", file) }
       end
 
       def add_base_gems_to_gemfile

data/lib/generators/react_on_rails/react_no_redux_generator.rb

@@ -8,16 +8,16 @@ module ReactOnRails
       Rails::Generators.hide_namespace(namespace)
       source_root(File.expand_path("../templates", __FILE__))
 
-      def copy_base_files
-        base_path = "no_redux/base/"
-        file = "client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx"
-        copy_file(base_path + file, file)
-      end
-
-      def template_appropriate_version_of_hello_world_app
-        filename = "HelloWorldApp.jsx"
-        location = "client/app/bundles/HelloWorld/startup"
-        template("no_redux/base/#{location}/HelloWorldApp.jsx.tt", "#{location}/#{filename}")
+      def create_appropriate_templates
+        base_path = "base/base/"
+        location = "client/app/bundles/HelloWorld/"
+        source = base_path + location
+        config = {
+          component_name: "HelloWorld",
+          app_relative_path: "../components/HelloWorld"
+        }
+        template("#{source}/startup/registration.jsx.tt", "#{location}/startup/registration.jsx", config)
+        template("#{base_path}app/views/hello_world/index.html.erb.tt", "app/views/hello_world/index.html.erb", config)
       end
     end
   end

data/lib/generators/react_on_rails/react_with_redux_generator.rb

@@ -17,15 +17,22 @@ module ReactOnRails
            client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx
            client/app/bundles/HelloWorld/constants/helloWorldConstants.jsx
            client/app/bundles/HelloWorld/reducers/helloWorldReducer.jsx
-           client/app/bundles/HelloWorld/store/helloWorldStore.jsx).each do |file|
+           client/app/bundles/HelloWorld/store/helloWorldStore.jsx
+           client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx).each do |file|
              copy_file(base_path + file, file)
            end
       end
 
-      def template_appropriate_version_of_hello_world_app
-        filename = "HelloWorldApp.jsx"
-        location = "client/app/bundles/HelloWorld/startup"
-        template("redux/base/#{location}/HelloWorldApp.jsx.tt", "#{location}/#{filename}")
+      def create_appropriate_templates
+        base_path = "base/base/"
+        location = "client/app/bundles/HelloWorld/"
+        source = base_path + location
+        config = {
+          component_name: "HelloWorldApp",
+          app_relative_path: "./HelloWorldApp"
+        }
+        template("#{source}/startup/registration.jsx.tt", "#{location}/startup/registration.jsx", config)
+        template("#{base_path}app/views/hello_world/index.html.erb.tt", "app/views/hello_world/index.html.erb", config)
       end
     end
   end

data/lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt

@@ -1,3 +1,3 @@
 <h1>Hello World</h1>
-<%%= react_component("HelloWorldApp", props: @hello_world_props, prerender: false) %>
+<%%= react_component("<%= config[:component_name] %>", props: @hello_world_props, prerender: false) %>
 

data/lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorld.jsx

@@ -0,0 +1,45 @@
+import React, { PropTypes } from 'react';
+
+export default class HelloWorld extends React.Component {
+  static propTypes = {
+    name: PropTypes.string.isRequired, // this is passed from the Rails view
+  };
+
+  /**
+   * @param props - Comes from your rails view.
+   * @param _railsContext - Comes from React on Rails
+   */
+  constructor(props, _railsContext) {
+    super(props);
+
+    // How to set initial state in ES6 class syntax
+    // https://facebook.github.io/react/docs/reusable-components.html#es6-classes
+    this.state = { name: this.props.name };
+  }
+
+  updateName = (name) => {
+    this.setState({ name });
+  };
+
+  render() {
+    return (
+      <div>
+        <h3>
+          Hello, {this.state.name}!
+        </h3>
+        <hr />
+        <form >
+          <label htmlFor="name">
+            Say hello to:
+          </label>
+          <input
+            id="name"
+            type="text"
+            value={this.state.name}
+            onChange={(e) => this.updateName(e.target.value)}
+          />
+        </form>
+      </div>
+    );
+  }
+}

data/lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/startup/registration.jsx.tt

@@ -0,0 +1,8 @@
+import ReactOnRails from 'react-on-rails';
+
+import <%= config[:component_name] %> from '<%= config[:app_relative_path] %>';
+
+// This is how react_on_rails can see the HelloWorld in the browser.
+ReactOnRails.register({
+  <%= config[:component_name] %>,
+});

data/lib/generators/react_on_rails/templates/base/base/client/webpack.config.js

@@ -1,3 +1,7 @@
+/* eslint comma-dangle: ["error",
+  {"functions": "never", "arrays": "only-multiline", "objects":
+"only-multiline"} ] */
+
 const webpack = require('webpack');
 const path = require('path');
 
@@ -9,7 +13,7 @@ const config = {
     'es5-shim/es5-shim',
     'es5-shim/es5-sham',
     'babel-polyfill',
-    './app/bundles/HelloWorld/startup/HelloWorldApp',
+    './app/bundles/HelloWorld/startup/registration',
   ],
 
   output: {

data/lib/generators/react_on_rails/templates/node/base/client/node/server.js

@@ -68,7 +68,7 @@ fs.watchFile(bundlePath + bundleFileName, (curr) => {
       return;
     }
 
-    // eslint-disable-next-line global-require
+    // eslint-disable-next-line global-require, import/no-dynamic-require
     require(bundlePath + bundleFileName);
     console.log(`Loaded server bundle: ${bundlePath + bundleFileName}`);
     handler.initialize();

data/lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx.tt

@@ -16,5 +16,4 @@ const HelloWorldApp = (props, _railsContext) => (
   </Provider>
 );
 
-// This is how react_on_rails can see the HelloWorldApp in the browser.
-ReactOnRails.register({ HelloWorldApp });
+export default HelloWorldApp;

data/lib/react_on_rails/version.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 module ReactOnRails
-  VERSION = "6.2.1".freeze
+  VERSION = "6.3.0".freeze
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-on-rails",
-  "version": "6.2.1",
+  "version": "6.3.0",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
   "main": "node_package/lib/ReactOnRails.js",
   "directories": {
@@ -22,12 +22,11 @@
     "babelify": "^7.3.0",
     "blue-tape": "^1.0.0",
     "eslint": "^3.8.1",
-    "eslint-config-shakacode": "^6.0.0",
+    "eslint-config-shakacode": "^13.2.0-beta.1",
     "eslint-plugin-import": "^2.0.1",
     "eslint-plugin-jsx-a11y": "^2.2.3",
     "eslint-plugin-react": "^6.4.1",
-    "flow-bin": "^0.33.0",
-    "jscs": "^2.11.0",
+    "flow-bin": "^0.36.0",
     "jsdom": "^9.8.0",
     "react": "^15.3.2",
     "react-dom": "^15.3.2",
@@ -54,11 +53,9 @@
     "build": "npm run clean && npm run babel",
     "build-watch": "babel --watch --out-dir node_package/lib node_package/src",
     "eslint": "eslint .",
-    "jscs": "jscs -e -v .",
     "flow": "flow check node_package",
-    "lint": "npm run eslint && npm run jscs && npm run flow",
-    "lint:fix": "node_package/scripts/lint-fix",
-    "check": "npm run lint && npm run test",
+    "lint": "npm run eslint",
+    "check": "npm run lint && npm run flow && npm run test",
     "prerelease": "npm run check && npm run clean && npm run build",
     "release:patch": "node_package/scripts/release patch",
     "release:minor": "node_package/scripts/release minor",

data/rakelib/lint.rake

@@ -23,18 +23,13 @@ namespace :lint do
     sh_in_dir(gem_root, "npm run eslint")
   end
 
-  desc "Run jscs from shell"
-  task :jscs do
-    sh_in_dir(gem_root, "npm run jscs")
-  end
-
   desc "Run flow from shell"
   task :flow do
     sh_in_dir(gem_root, "npm run flow")
   end
 
-  desc "Run all eslint, jscs, flow, rubocop linters. Skip ruby-lint and scss"
-  task lint: [:eslint, :jscs, :flow, :rubocop] do
+  desc "Run all eslint, flow, rubocop linters. Skip ruby-lint and scss"
+  task lint: [:eslint, :flow, :rubocop] do
     puts "Completed all linting"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: react_on_rails
 version: !ruby/object:Gem::Version
-  version: 6.2.1
+  version: 6.3.0
 platform: ruby
 authors:
 - Justin Gordon
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-11-20 00:00:00.000000000 Z
+date: 2016-12-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: connection_pool
@@ -317,7 +317,6 @@ files:
 - ".eslintignore"
 - ".eslintrc"
 - ".gitignore"
-- ".jscsrc"
 - ".npmignore"
 - ".rspec"
 - ".rubocop.yml"
@@ -336,11 +335,13 @@ files:
 - book.json
 - docs/LICENSE
 - docs/additional-reading/babel.md
+- docs/additional-reading/code-splitting.md
 - docs/additional-reading/heroku-deployment.md
 - docs/additional-reading/hot-reloading-rails-development.md
 - docs/additional-reading/node-dependencies-and-npm.md
 - docs/additional-reading/node-server-rendering.md
 - docs/additional-reading/rails-assets.md
+- docs/additional-reading/rails-engine-integration.md
 - docs/additional-reading/rails_view_rendering_from_inline_javascript.md
 - docs/additional-reading/react-and-redux.md
 - docs/additional-reading/react-router.md
@@ -380,7 +381,8 @@ files:
 - lib/generators/react_on_rails/templates/base/base/app/views/hello_world/index.html.erb.tt
 - lib/generators/react_on_rails/templates/base/base/client/.babelrc
 - lib/generators/react_on_rails/templates/base/base/client/REACT_ON_RAILS_CLIENT_README.md
-- lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorld.jsx.tt
+- lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorld.jsx
+- lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/startup/registration.jsx.tt
 - lib/generators/react_on_rails/templates/base/base/client/package.json.tt
 - lib/generators/react_on_rails/templates/base/base/client/webpack.config.js
 - lib/generators/react_on_rails/templates/base/base/config/initializers/react_on_rails.rb.tt
@@ -390,8 +392,6 @@ files:
 - lib/generators/react_on_rails/templates/dev_tests/spec/rails_helper.rb
 - lib/generators/react_on_rails/templates/dev_tests/spec/simplecov_helper.rb
 - lib/generators/react_on_rails/templates/dev_tests/spec/spec_helper.rb
-- lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx
-- lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx.tt
 - lib/generators/react_on_rails/templates/node/base/client/node/package.json
 - lib/generators/react_on_rails/templates/node/base/client/node/server.js
 - lib/generators/react_on_rails/templates/redux/base/client/app/bundles/HelloWorld/actions/helloWorldActionCreators.jsx
@@ -460,7 +460,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.5.1
+rubygems_version: 2.6.1
 signing_key: 
 specification_version: 4
 summary: Rails with react server rendering with webpack.

data/.jscsrc

@@ -1,30 +0,0 @@
-{
-  "preset": "airbnb",
-  "fileExtensions": [
-    ".js",
-    ".jsx"
-  ],
-  "excludeFiles": [
-    "**/.c9/**",
-    "**/build/**",
-    "**/node_modules/**",
-    "**/assets/webpack/**",
-    "**/generated/**",
-    "**/docs/**",
-    "**/tmp/**",
-    "**/sample_generated/**",
-    "**/coverage/**",
-    "**/vendor/**",
-    "**/dummy-for-generators/**",
-    "**/dummy/**",
-    "**/node_package/lib/**",
-    "**/app/assets/javascripts/application.js"
-  ],
-  "esprima": "babel-jscs",
-  "validateQuoteMarks": {
-    "mark": "'",
-    "escape": true,
-    "ignoreJSX": true
-  },
-  "requireTrailingComma": false
-}

data/lib/generators/react_on_rails/templates/base/base/client/app/bundles/HelloWorld/components/HelloWorld.jsx.tt

@@ -1,29 +0,0 @@
-import React, { PropTypes } from 'react';
-
-// Simple example of a React "dumb" component
-const HelloWorld = ({ name, updateName }) => (
-  <div className="container">
-    <h3>
-      Hello, {name}!
-    </h3>
-    <hr />
-    <form className="form-horizontal">
-      <label htmlFor="name">
-        Say hello to:
-      </label>
-      <input
-        type="text" value={name} id="name"
-        onChange={(e) => updateName(e.target.value)}
-      />
-    </form>
-  </div>
-);
-
-HelloWorld.propTypes = {
-  // If you have lots of data or action properties, you should consider grouping them by
-  // passing two properties: "data" and "actions".
-  updateName: PropTypes.func.isRequired,
-  name: PropTypes.string.isRequired,
-};
-
-export default HelloWorld;

data/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/containers/HelloWorldContainer.jsx

@@ -1,25 +0,0 @@
-import React, { PropTypes } from 'react';
-import HelloWorld from '../components/HelloWorld';
-
-// Simple example of a React "smart" component
-export default class HelloWorldContainer extends React.Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired, // this is passed from the Rails view
-  };
-
-  constructor(props) {
-    super(props);
-
-    // How to set initial state in ES6 class syntax
-    // https://facebook.github.io/react/docs/reusable-components.html#es6-classes
-    this.state = { name: this.props.name };
-  }
-
-  updateName = (name) => { this.setState({ name }); };
-
-  render() {
-    return (
-      <HelloWorld name={this.state.name} updateName={this.updateName} />
-    );
-  }
-}

data/lib/generators/react_on_rails/templates/no_redux/base/client/app/bundles/HelloWorld/startup/HelloWorldApp.jsx.tt

@@ -1,12 +0,0 @@
-import React from 'react';
-import ReactOnRails from 'react-on-rails';
-
-import HelloWorldContainer from '../containers/HelloWorldContainer';
-
-// _railsContext is the Rails context, providing contextual information for rendering
-const HelloWorldApp = (props, _railsContext) => (
-  <HelloWorldContainer {...props} />
-);
-
-// This is how react_on_rails can see the HelloWorldApp in the browser.
-ReactOnRails.register({ HelloWorldApp });