v4 Major features

* Updated API of ReactOnRails.js to provide optional param for getStore.
* Added API docs for new controller module and view helper for shared
  redux stores.
* Implement shared stores in controller
* Updated gems and npm modules
* Support Phantom JS 2.x
* Setup hot dev mode for spec/dummy
* Added view helpers for assets
* Converted the spec/dummy app to use css modules
* Many documentation enhancements
* Fix spec failures: incorrect Turbolinks require
  Need to use require_asset
* Remove unused precompile directive
* Enable the use of option --only-failures
* Remove default path for server_bundle.js
* BREAKING CHANGE: If a system was depending on this default, the will
  not get any server rendering. This file must be explicitly set in your
  react_on_rails.rb initializer.
* Fixed the spec bundled assets status checker
* Now knows to exclude the server-bundle.js file in case that is the
  only one there. This happened when one would run the Procfile.hot and
  then you'd have only the server rendering js file.
* Change default driver to selenium for Travis
* Removed validation of Ruby part of Turbolinks
  Turbolinks 5 does not have a Ruby part.
* Don't symlink spec/dummy/client react-on-rails
  This was causing the spec failures.
* Change generators to use app/assets/webpack as the generation
  directory might contain CSS.
* Numerous improvements in the verification that the webpack created
  assets are up to date before running tests.
* Several new configuration options and changes to the configuration:
  # Directory where your generated assets go
  config.generated_assets_dir = File.join(%w(app assets webpack))

  # Define the files for we need to check for webpack compilation when running tests
  config.webpack_generated_files = %w( app-bundle.js vendor-bundle.js server-bundle.js )

* config.server_bundle_js_file no longer uses a path, as it can only
  exist in the generated_assets_dir.
* redux_store view helper now requires the props to be specified as a
  named parameter, an it takes an option `defer` to allow rendering at
  the bottom of the layout.

.eslintignore

@@ -6,6 +6,7 @@ node_package/lib/
 node_package/tests/node_modules
 node_package/webpack.config.js
 **/node_modules/**
+**/assets/webpack/**
 **/generated/**
 **/app/assets/javascripts/application.js
 **/coverage/**

.gitignore

@@ -10,8 +10,9 @@
 *.gem
 /vendor/
 
+/spec/examples.txt
 /spec/dummy/client/node_modules
-/spec/dummy/app/assets/javascripts/generated/
+/spec/dummy/app/assets/webpack/
 /spec/dummy/coverage/
 /spec/react_on_rails/dummy-for-generators/
 

.jscsrc

@@ -7,6 +7,7 @@
   "excludeFiles": [
     "**/build/**",
     "**/node_modules/**",
+    "**/assets/webpack/**",
     "**/generated/**",
     "**/docs/**",
     "**/tmp/**",

.rubocop.yml

@@ -2,9 +2,13 @@
 # Check out: https://github.com/bbatsov/rubocop
 
 AllCops:
+  DisplayCopNames: true
+  TargetRubyVersion: 2.1
+
   Include:
     - '**/Rakefile'
     - '**/config.ru'
+
   Exclude:
     - 'vendor/**/*'
     - 'spec/fixtures/**/*'

CHANGELOG.md

@@ -4,6 +4,34 @@ All notable changes to this project will be documented in this file. Items under
 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]
 
+## [4.0.0.beta.3] - 2016-03-14
+##### Added
+- Added optional parameter for ReactOnRails.getStore(name, throwIfMissing = true) so that you can check if a store is defined easily.
+- Added controller `module ReactOnRails::Controller`. Adds method `redux_store` to setup redux stores in the view.
+- Added option `defer: true` for view helper `redux_store`. This allows the view helper to specify the props for store hydration, yet still render the props at the bottom of the view.
+- Added view helper `redux_store_hydration_data` to render the props on the application's layout, near the bottom. This allows for the client hydration data to be parsed after the server rendering, which may result in a faster load time.
+- Added helpers `env_stylesheet_link_tag` and `env_javascript_include_tag` to support hot reloading Rails. See the [README.md](./README.md) for more details and see the example application in `spec/dummy`.
+- The checker for outdated bundles before running tests will default to including the directory with `server_bundle_js_file`.
+- Better support for Turbolinks 5!
+-	Fixed generator check of uncommitted code for foreign languages. See [#303](https://github.com/shakacode/react_on_rails/pull/303) by [nmatyukov](https://github.com/nmatyukov).
+- Added several parameters used for ensuring webpack assets are built for running tests:
+  - `config.generated_assets_dir`: Directory where your generated webpack assets go. You can have only **one** directory for this.
+  - `config.webpack_generated_files`: List of files that will get created in the `generated_assets_dir`. The test runner helper will ensure these generated files are newer than any of the files in the client directory.
+
+##### Changed
+ - Generator default for webpack generated assets is now `app/assets/webpack` as we use this for both JavaScript and CSS generated assets.
+
+##### Fixed
+- The test runner "assets up to date checker" is greatly improved.
+- Lots of doc updates!
+- Improved the **spec/dummy** sample app so that it supports CSS modules, hot reloading, etc, and it can server as a template for a new ReactOnRails installation.
+
+##### Breaking Changes
+- Deprecated calling `redux_store(store_name, props)`. The API has changed. Use `redux_store(store_name, props: props, defer: false)` A new option called `defer` allows the rendering of store hydration at the bottom of the your layout.  Place `redux_store_hydration_data` on your layout. 
+- `config.server_bundle_js_file` has changed. The default value is now blank, meaning no server rendering. Addtionally, if you specify the file name, you should not include the path, as that should be specified in the `config.generated_assets_dir`.
+- `config.generated_assets_dirs` has been renamed to `config.generated_assets_dir` (singular) and it only takes one directory.
+
+
 ## [3.0.6] - 2016-03-01
 ##### Fixed
 -	Improved errors when registered store is not found. See [#301](https://github.com/shakacode/react_on_rails/pull/301) by [justin808](https://github.com/justin808).
@@ -192,7 +220,8 @@ Best done with Object destructing:
 
 ##### Fixed
 - Fix several generator related issues.
-[Unreleased]: https://github.com/shakacode/react_on_rails/compare/3.0.6...master
+[Unreleased]: https://github.com/shakacode/react_on_rails/compare/4.0.0.beta.3...master
+[4.0.0.beta.3]: https://github.com/shakacode/react_on_rails/compare/3.0.6...4.0.0-beta.3
 [3.0.6]: https://github.com/shakacode/react_on_rails/compare/3.0.5...3.0.6
 [3.0.5]: https://github.com/shakacode/react_on_rails/compare/3.0.4...3.0.5
 [3.0.4]: https://github.com/shakacode/react_on_rails/compare/3.0.3...3.0.4

Gemfile

@@ -8,24 +8,17 @@ gemspec
 # bundle install from a single Gemfile. Therefore, all gems that we will need for any dummy/example
 # app have to be manually added to this file.
 gem "bootstrap-sass"
-gem "capybara"
-gem "capybara-screenshot"
-gem "chromedriver-helper"
 gem "coffee-rails", "~> 4.1.0"
 gem "jbuilder", "~> 2.0"
 gem "jquery-rails"
-gem "launchy"
-gem "poltergeist"
 gem "puma"
 gem "rails", "4.2.5"
 gem "rails_12factor"
-gem "rspec-rails"
 gem "rubocop", require: false
 gem "ruby-lint", require: false
 gem "sass-rails", "~> 5.0"
 gem "scss_lint", require: false
 gem "sdoc", "~> 0.4.0", group: :doc
-gem "selenium-webdriver"
 gem "spring"
 gem "sqlite3"
 gem "therubyracer"
@@ -36,3 +29,13 @@ else
 end
 gem "uglifier", ">= 2.7.2"
 gem "web-console", "~> 2.0", group: :development
+
+# below are copied from spec/dummy/Gemfile
+gem "rspec-rails"
+gem "capybara"
+gem "capybara-screenshot"
+gem "capybara-webkit"
+gem "chromedriver-helper"
+gem "launchy"
+gem "poltergeist"
+gem "selenium-webdriver"

README.md

@@ -1,7 +1,11 @@
 [![Build Status](https://travis-ci.org/shakacode/react_on_rails.svg?branch=master)](https://travis-ci.org/shakacode/react_on_rails)  [![Dependency Status](https://gemnasium.com/shakacode/react_on_rails.svg)](https://gemnasium.com/shakacode/react_on_rails) [![Gem Version](https://badge.fury.io/rb/react_on_rails.svg)](https://badge.fury.io/rb/react_on_rails) [![npm version](https://badge.fury.io/js/react-on-rails.svg)](https://badge.fury.io/js/react-on-rails) [![Code Climate](https://codeclimate.com/github/shakacode/react_on_rails/badges/gpa.svg)](https://codeclimate.com/github/shakacode/react_on_rails) [![Coverage Status](https://coveralls.io/repos/shakacode/react_on_rails/badge.svg?branch=master&service=github)](https://coveralls.io/github/shakacode/react_on_rails?branch=master)
 
 # NEWS
-
+* 4.0.0 Highlights
+  * Better support for Turbolinks 5.
+  * Controller rendering of shared redux stores and ability to render store data at bottom of HTML page.
+  * See [#311](https://github.com/shakacode/react_on_rails/pull/311/files).
+  * See [CHANGELOG.md](CHANGELOG.md) for full details.
 * 2016-02-28: We added a [Projects page](PROJECTS.md). Please edit the page your project or [email us](mailto:contact@shakacode.com) and we'll add you. We also love stars as it helps us attract new users and contributors. [jbhatab](https://github.com/jbhatab) is leading an effort to ease the onboarding process for newbies with simpler project generators. See [#245](https://github.com/shakacode/react_on_rails/issues/245).
 * 3.0.6 shipped on Tuesday, 2016-03-01. Please see the [Changelog](CHANGELOG.md) for details, and let us know if you see any issues! [Migration steps from 1.x](https://github.com/shakacode/react_on_rails/blob/master/CHANGELOG.md#migration-steps-v1-to-v2). [Migration steps from 2.x](https://github.com/shakacode/react_on_rails/blob/master/CHANGELOG.md#migration-steps-v2-to-v3).
   * [RubyGems](https://rubygems.org/gems/react_on_rails/)
@@ -20,9 +24,9 @@
 
 # React on Rails
 
-**Project Objective**: To provide an opinionated and optimal framework for integrating **Ruby on Rails** with modern JavaScript tooling and libraries, including [**Webpack**](http://webpack.github.io/), [**Babel**](https://babeljs.io/), [**React**](https://github.com/reactjs/react-router), [**Redux**](https://github.com/reactjs/redux), [**React-Router**](https://github.com/reactjs/react-router). This differs significantly from typical Rails. When considering what goes into **react_on_rails**, we ask ourselves, is the functionality related to the intersection of using Rails and with modern JavaScript? If so, then the functionality belongs right here. In other cases, we're releasing separate npm packages or Ruby gems. If you are interested in implementing React using traditional Rails architecture, see [react-rails](https://github.com/reactjs/react-rails).
+**Project Objective**: To provide an opinionated and optimal framework for integrating **Ruby on Rails** with modern JavaScript tooling and libraries, including [**Webpack**](http://webpack.github.io/), [**Babel**](https://babeljs.io/), [**React**](https://facebook.github.io/react/), [**Redux**](https://github.com/reactjs/redux), [**React-Router**](https://github.com/reactjs/react-router). This differs significantly from typical Rails. When considering what goes into **react_on_rails**, we ask ourselves, is the functionality related to the intersection of using Rails and with modern JavaScript? If so, then the functionality belongs right here. In other cases, we're releasing separate npm packages or Ruby gems. If you are interested in implementing React using traditional Rails architecture, see [react-rails](https://github.com/reactjs/react-rails).
 
-React on Rails integrates Facebook's [React](https://github.com/facebook/react) front-end framework with Rails. React v0.14.x is supported, with server rendering. [Redux](https://github.com/reactjs/redux) and [React-Router](https://github.com/reactjs/react-redux) are supported as well. See the Rails on Maui [blog post](http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/) that started it all!
+React on Rails integrates Facebook's [React](https://github.com/facebook/react) front-end framework with Rails. React v0.14.x 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. See the Rails on Maui [blog post](http://www.railsonmaui.com/blog/2014/10/03/integrating-webpack-and-the-es6-transpiler-into-an-existing-rails-project/) that started it all!
 
 Be sure to see:
 
@@ -80,8 +84,10 @@ Please see [Getting Started](#getting-started) for how to set up your Rails proj
     - [ReactOnRails JavaScript API](#reactonrails-javascript-api)
     - [Redux](#redux)
     - [React-Router](#react-router)
+    - [Bootstrap Integration](#bootstrap-integration)
 + [Generator](#generator)
     - [Understanding the Organization of the Generated Client Code](#understanding-the-organization-of-the-generated-client-code)
+    - [JavaScript API](#javascript-api)
     - [Redux](#redux)
       - [Multiple React Components on a Page with One Store](#multiple-react-components-on-a-page-with-one-store)
     - [Using Images and Fonts](#using-images-and-fonts)
@@ -172,7 +178,7 @@ cd client && npm i --saveDev react-on-rails
 That will install the latest version and update your package.json.
 
 ## How it Works
-The generator installs your webpack files in the `client` folder. Foreman uses webpack to compile your code and output the bundled results to `app/assets/javascripts/generated`, which are then loaded by sprockets. These generated bundle files have been added to your `.gitignore` for your convenience.
+The generator installs your webpack files in the `client` folder. Foreman uses webpack to compile your code and output the bundled results to `app/assets/webpack`, which are then loaded by sprockets. These generated bundle files have been added to your `.gitignore` for your convenience.
 
 Inside your Rails views, you can now use the `react_component` helper method provided by React on Rails. You can pass props directly to the react component helper. You can also initialize a Redux store with view helper `redux_store` so that the store can be shared amongst multiple React components. Your best bet is to scan the code inside of the [/spec/dummy](spec/dummy) sample app.
 
@@ -223,7 +229,7 @@ Place your JavaScript code inside of the provided `client/app` folder. Use modul
   In general, you may want different initialization for your server rendered components.
 
 ## ReactOnRails View Helpers API
-Once the bundled files have been generated in your `app/assets/javascripts/generated` folder and you have exposed your components globally, you will want to run your code in your Rails views using the included helper method.
+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.
 
 This is how you actually render the React components you exposed to `window` inside of `clientRegistration` (and `global` inside of `serverRegistration` if you are server rendering).
 
@@ -251,10 +257,12 @@ Include the module ReactOnRails::Controller in your controller, probably in Appl
   2. In your component definition, you'll call `ReactOnRails.getStore('storeName')` to get the hydrated Redux store to attach to your components.
 + **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](spec/dummy/app/controllers/pages_controller.rb).
+
 #### View Helper
 `redux_store_hydration_data`
 
-Place this view helper (no parameters) at the end of your shared layout. This tell ReactOnRails where to client 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.
+Place this view helper (no parameters) at the end of your shared layout. This tell ReactOnRails where to client 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](spec/dummy/app/views/layouts/application.html.erb).
 
 #### Redux Store Notes
 Note, you don't need to separately initialize your redux store. However, it's recommended for the two following use cases:
@@ -311,6 +319,53 @@ The best source of docs is the main [ReactOnRails.js](node_package/src/ReactOnRa
   setOptions(options)
 ```
 
+## Hot Reloading View Helpers
+The `env_javascript_include_tag` and `env_stylesheet_link_tag` support the usage of a webpack dev server for providing the JS and CSS assets during development mode. See the [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/) for a working example.
+
+The key options are `static` and `hot` which specify what you want for static vs. hot. Both of these params are optional, and support either a single value, or an array.
+
+static vs. hot is picked based on whether ENV["REACT_ON_RAILS_ENV"] == "HOT"
+
+```erb
+ <%= env_stylesheet_link_tag(static: 'application_static',
+                             hot: 'application_non_webpack',
+                             media: 'all',
+                             'data-turbolinks-track' => true)  %>
+
+ <!-- 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 -->
+ <%= env_javascript_include_tag(static: 'application_static',
+                                hot: 'application_non_webpack',
+                                'data-turbolinks-track' => true) %>
+```
+                                
+See application.html.erb for usage example and [application.html.erb](https://github.com/shakacode/react-webpack-rails-tutorial/blob/master/app%2Fviews%2Flayouts%2Fapplication.html.erb)
+
+**env_javascript_include_tag(args = {})**
+
+Helper to set CSS assets depending on if we want static or "hot", which means from the Webpack dev server.
+
+In this example, application_non_webpack is simply a CSS asset pipeline file which includes styles not placed in the webpack build.
+
+We don't need styles from the webpack build, as those will come via the JavaScript include tags.
+
+The key options are `static` and `hot` which specify what you want for static vs. hot. Both of
+these params are optional, and support either a single value, or an array.
+
+```erb
+ <%= env_stylesheet_link_tag(static: 'application_static',
+                             hot: 'application_non_webpack',
+                             media: 'all',
+                             'data-turbolinks-track' => true)  %>
+```
+
+**env_stylesheet_link_tag(args = {})**
+
+
 ## Generator
 The `react_on_rails:install` generator combined with the example pull requests of generator runs will get you up and running efficiently. There's a fair bit of setup with integrating Webpack with Rails. Defaults for options are such that the default is for the flag to be off. For example, the default for `-R` is that `redux` is off, and the default of `-b` is that `skip-bootstrap` is off.
 
@@ -351,6 +406,9 @@ Inside of the generated "HelloWorld" domain you will find the following folders:
 
 You may also notice the `app/lib` folder. This is for any code that is common between bundles and therefore needs to be shared (for example, middleware).
 
+### JavaScript API
+See [node_package/src/ReactOnRails.js](node_package/src/ReactOnRails.js) for the ReactOnRails JavaScript API.
+
 ### Redux
 If you have used the `--redux` generator option, you will notice the familiar additional redux folders in addition to the aforementioned folders. The Hello World example has also been modified to use Redux.
 
@@ -411,6 +469,9 @@ The generator has amended the folders created in `client/assets/` to Rails's ass
 
 Alternatively, if you have many existing assets and don't wish to move them, you could consider creating symlinks from client/assets that point to your Rails assets folders inside of `app/assets/`. The assets there will then be visible to both Rails and webpack.
 
+### React Router
+[React Router](https://github.com/reactjs/react-router) is supported, including server side rendering! See the examples in [spec/dummy/apps/views/react_router](spec/dummy/apps/views/react_router) and follow to the JavaScript code in the [client/app/startup/ServerRouterApp.jsx](client/app/startup/ServerRouterApp.jsx). Additionally, see the `react_component` helper option `router_redirect_callback`.
+
 ### Bootstrap Integration
 React on Rails ships with Twitter Bootstrap already integrated into the build. Note that the generator removes `require_tree` in both the application.js and application.css.scss files. This is to ensure the correct load order for the bootstrap integration, and is usually a good idea in general. You will therefore need to explicitly require your files.
 
@@ -526,6 +587,11 @@ Note: If you have components from react-rails you want to use, then you will nee
   foreman start
   ```
 
+## Dependencies
++ Ruby 2.1 or greater
++ Rails 3.2 or greater
++ Node 5.5 or great
+
 ## Contributing
 Bug reports and pull requests are welcome. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to our version of the [Contributor Covenant Code of Conduct](docs/code_of_conduct.md)).
 

Rakefile

@@ -5,3 +5,6 @@ Coveralls::RakeTask.new
 
 desc "Run all tests and linting"
 task default: ["run_rspec", "lint", "coveralls:push"]
+
+desc "All actions but no examples. Good for local developer run."
+task all_but_examples: ["run_rspec:all_but_examples", "lint"]