react_on_rails 2.1.0 → 2.1.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: fb99dea8d39f2e84fd72b80d73d7333815b40bf9
-  data.tar.gz: bfdf9b5e78fbfe0449500ad8e033b5d5ca7806f4
+  metadata.gz: 3b65b6529dca9ed1cf1b205cec960efe38885a17
+  data.tar.gz: e5d5bf65c4c63282de650747d26795f7517b4d3f
 SHA512:
-  metadata.gz: 35bb78629f6618a2551559b052eda1e8fe5d5ab1929716881d617fbb9c6b3fa4204d0c16f2513243825cc68a96aefd394940ae4f76cab8e7d48c1ef4b2fbb159
-  data.tar.gz: c944b722816f3fb8e87392b223d43f09d7ff1ab26bf3c546ce86fe50c618d603c5a5b44d7c60be2df94253a0f51ad08e2a101a0a4e5cb634a8ac94bd11515f70
+  metadata.gz: 1f9cbb2bada17276368ebae143d7a16c72c7f5fcda30f06bcbaf42049f4bf427af6e3d98f55ed651a212dfd9591f40ac37bbed52adbd2e36b869ca2f86962806
+  data.tar.gz: e440d984febebef5f5685f447788e83caf01cd1be2486c091a5a6ae5db6fc723a67ff40347098ae95ae5ac94f97790612107e39d35e018fa3bb8afa308af1dc2

data/CHANGELOG.md

@@ -4,6 +4,12 @@ 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]
+##### Fixed
+- Fixed regression where apps that were not using Turbolinks would not render components on page load.
+
+##### Added
+- `debug_turbolinks` helper for debugging turbolinks issues. See [turbolinks](docs/additional_reading/turbolinks.md).
+- Enhanced regression testing for non-turbolinks apps. Runs all tests for dummy app with turbolinks both disabled and enabled.
 
 ## [2.1.0] - 2016-01-26
 ##### Added

data/README.md

@@ -2,8 +2,13 @@
 
 # NEWS
 
-* 2.1 is almost ready and will probably ship on Monday, 1/25/2016. Please grab the latest 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).
+* 2.1 has shipped on Tuesday, 2/26/2016. 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).
+* Highlights:
+  1. Fixed a **critical** problem with TurboLinks.
+  2. Provides a convenient helper to ensure that JavaScript assets are compiled before running tests.
 * React on Rails does not yet have *generator* support for building new apps that use CSS modules and hot reloading via the Rails server as is demonstrated in the [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/). *We do support this, but we don't generate the code.* If you did generate a fresh app from react_on_rails and want to move to CSS Modules, then see [PR 175: Babel 6 / CSS Modules / Rails hot reloading](https://github.com/shakacode/react-webpack-rails-tutorial/pull/175). Note, while there are probably fixes after this PR was accepted, this has the majority of the changes. See [the tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/#news) for more information. Ping us if you want to help!
+* [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.
+* Be sure to read our new article [The React on Rails Doctrine](http://www.shakacode.com/2016/01/26/the-react-on-rails-doctrine.html).
 
 # React on Rails
 
@@ -13,7 +18,7 @@ React on Rails integrates Facebook's [React](https://github.com/facebook/react)
 
 Be sure to see:
 
-* [The React on Rails Doctrine](docs/doctrine.md)
+* [The React on Rails Doctrine](http://www.shakacode.com/2016/01/26/the-react-on-rails-doctrine.html)
 * [React Webpack Rails Tutorial Code](https://github.com/shakacode/react-webpack-rails-tutorial) along with the live example at [www.reactrails.com](http://www.reactrails.com).
 
 ## Including your React Component in your Rails Views
@@ -166,15 +171,15 @@ Now the server will interpret your JavaScript using [ExecJS](https://github.com/
 
 Note that **server-rendering requires globally exposing your components by setting them to `global`, not `window`** (as is the case with client-rendering). If using the generator, you can pass the `--server-rendering` option to configure your application for server-side rendering.
 
-In the following screenshot you can see the 3 parts of react_on_rails rendering:
+In the following screenshot you can see the 3 parts of React on Rails rendering:
 
-1. Inline JavaScript to "client-side" render the React component.
-2. The wrapper div `<div id="HelloWorld-react-component-0">` enclosing the server-rendered HTML for the React component
-3. Additional JavaScript to console log any messages, such as server rendering errors.
+1. A hidden HTML div that contains the properties of the React component, such as the registered name and any props. A JavaScript function runs after the page loads to convert take this data and build initialize React components.
+2. The wrapper div `<div id="HelloWorld-react-component-0">` specifies the div where to place the React rendering. It encloses the server-rendered HTML for the React component
+3. Additional JavaScript is placed to console log any messages, such as server rendering errors. Note, these server side logs can be configured to only be sent to the server logs.
 
-**Note**: If server rendering is not used (prerender: false), then the major difference is that the HTML rendered contains *only* the outer div: `<div id="HelloWorld-react-component-0"/>`
+**Note**: If server rendering is not used (prerender: false), then the major difference is that the HTML rendered for the React component only contains the outer div: `<div id="HelloWorld-react-component-0"/>`. The first specification of the React component is just the same.
 
-![Comparison of a normal React Component with its server-rendered version](https://cloud.githubusercontent.com/assets/1118459/10157268/41435186-6624-11e5-9341-6fc4cf35ee90.png)
+![Comparison of a normal React Component with its server-rendered version](https://cloud.githubusercontent.com/assets/1118459/12607542/a959d5c8-c48a-11e5-8187-2433d543ccaa.png)
 
 ### Building the Bundles
 Each time you change your client code, you will need to re-generate the bundles (the webpack-created JavaScript files included in application.js). The included Foreman `Procfile.dev` will take care of this for you by watching your JavaScript code files for changes. Simply run `foreman start -f Procfile.dev`.
@@ -359,7 +364,7 @@ If you are using [react-rails](https://github.com/reactjs/react-rails) in your p
 
 - Remove the 'react-rails' gem from your Gemfile.
 
-- Remove the generated generated lines for react-rails in your application.js file. 
+- Remove the generated generated lines for react-rails in your application.js file.
 
 ```
 //= require react
@@ -372,6 +377,7 @@ If you are using [react-rails](https://github.com/reactjs/react-rails) in your p
 Note: If you have components from react-rails you want to use, then you will need to port them into react_on_rails which uses webpack instead of the asset pipeline.
 
 ## Additional Reading
++ [The React on Rails Doctrine](http://www.shakacode.com/2016/01/26/the-react-on-rails-doctrine.html)
 + [Generated Client Code](docs/additional_reading/generated_client_code.md)
 + [Heroku Deployment](docs/additional_reading/heroku_deployment.md)
 + [Manual Installation](docs/additional_reading/manual_installation.md)
@@ -380,14 +386,16 @@ Note: If you have components from react-rails you want to use, then you will nee
 + [React Router](docs/additional_reading/react_router.md)
 + [RSpec Configuration](docs/additional_reading/rspec_configuration.md)
 + [Server Rendering Tips](docs/additional_reading/server_rendering_tips.md)
++ [Rails View Rendering from Inline JavaScript](docs/additional_reading/rails_view_rendering_from_inline_javascript.md)
 + [Tips](docs/additional_reading/tips.md)
 + [Tutorial for v2.0](docs/tutorial-v2.md), deployed [here](https://shakacode-react-on-rails.herokuapp.com/).
 + [Turbolinks](docs/additional_reading/turbolinks.md)
 + [Webpack Configuration](docs/additional_reading/webpack.md)
 + [Webpack Cookbook](https://christianalfoni.github.io/react-webpack-cookbook/index.html)
++ [Changelog](CHANGELOG.md)
 
 ## Demos
-+ [www.reactrails.com](http://www.reactrails.com)
++ [www.reactrails.com](http://www.reactrails.com) with source at [shakacode/react-webpack-rails-tutorial](https://github.com/shakacode/react-webpack-rails-tutorial/).
 + [spec app](spec/dummy): Great simple examples used for our tests.
   ```
   cd spec/dummy
@@ -406,7 +414,7 @@ The gem is available as open source under the terms of the [MIT License](docs/LI
 ## Authors
 [The Shaka Code team!](http://www.shakacode.com/about/)
 
-The project started with [Justin Gordon](https://github.com/justin808/) pairing with [Samnang Chhun](https://github.com/samnang) to figure out how to do server rendering with Webpack plus Rails. [Alex Fedoseev](https://github.com/alexfedoseev) then joined in. [Rob Wise](https://github.com/robwise), [Aaron Van Bokhoven](https://github.com/aaronvb), and [Andy Wang](https://github.com/yorzi) did the bulk of the generators.
+The project started with [Justin Gordon](https://github.com/justin808/) pairing with [Samnang Chhun](https://github.com/samnang) to figure out how to do server rendering with Webpack plus Rails. [Alex Fedoseev](https://github.com/alexfedoseev) then joined in. [Rob Wise](https://github.com/robwise), [Aaron Van Bokhoven](https://github.com/aaronvb), and [Andy Wang](https://github.com/yorzi) did the bulk of the generators. Many others have [contributed](https://github.com/shakacode/react_on_rails/graphs/contributors).
 
 We owe much gratitude to the work of the [react-rails gem](https://github.com/reactjs/react-rails). We've also been inspired by the [react_webpack_rails gem](https://github.com/netguru/react_webpack_rails).
 

data/app/assets/javascripts/debug_turbolinks.js

@@ -0,0 +1,4 @@
+window.DEBUG_TURBOLINKS = true;
+console.log('window.DEBUG_TURBOLINKS = true;');
+console.log('To disable Turbolinks debugging, remove the debug_turbolinks require' +
+            ' from app/assets/javascripts/application.js');

data/docs/additional_reading/rails_view_rendering_from_inline_javascript.md

@@ -0,0 +1,35 @@
+# Using ReactOnRails in JavaScript
+You can easily render React components in your JavaScript with `render` method that returns a [reference to the component](https://facebook.github.io/react/docs/more-about-refs.html) (virtual DOM element).
+
+```js
+/**
+ * ReactOnRails.render("HelloWorldApp", {name: "Stranger"}, 'app');
+ *
+ * Does this:
+ *   ReactDOM.render(React.createElement(HelloWorldApp, {name: "Stranger"}),
+ *     document.getElementById('app'))
+ *
+ * @param name Name of your registered component
+ * @param props Props to pass to your component
+ * @param domNodeId
+ * @returns {virtualDomElement} Reference to your component's backing instance
+ */
+ReactOnRails.render(componentName, props, elementId)
+```
+
+## Why do we need this?
+Imagine that we have some event with jQuery, it allows us to set component state manually.
+
+```html
+<input id="input" type="range" min="0" max="100" />
+<div id="root"></div>
+
+<script>
+  var input = $("#input");
+  var component = ReactOnRails.render("componentName", { value: input.val() }, "root");
+
+  input.on("change", function(e) {
+    component.setState({ value: input.val() });
+  });
+</script>
+```

data/docs/additional_reading/rspec_configuration.md

@@ -3,8 +3,18 @@ Because you will probably want to run RSpec tests that rely on compiled webpack
 
 ReactOnRails provides a helper method called `configure_rspec_to_compile_assets`. Call this method from inside of the `RSpec.configure` block in your `spec/rails_helper.rb` file, passing the config as an argument.
 
-You can pass an RSpec metatag as an optional second parameter to this helper method if you want this helper to run on examples other than where `js: true` (default). The helper will compile webpack files only once per test run.
+```ruby
+RSpec.configure do |config|
+  # Next line will ensure that assets are built if webpack -w is not running
+  ReactOnRails.configure_rspec_to_compile_assets(config)
+```
+
+You can pass an RSpec metatag as an optional second parameter to this helper method if you want this helper to run on examples other than where `js: true` (default). The helper will compile webpack files at most once per test run.
 
 If you do not want to be slowed down by re-compiling webpack assets from scratch every test run, you can call `npm run build:client` (and `npm run build:server` if doing server rendering) to have webpack recompile these files in the background, which will be much faster. The helper looks for these processes and will abort recompiling if it finds them to be running.
 
 If you want to use a testing framework other than RSpec, we suggest you implement similar logic.
+
+![2016-01-27_02-36-43](https://cloud.githubusercontent.com/assets/1118459/12611951/7c56d070-c4a4-11e5-8a80-9615f99960d9.png)
+
+![2016-01-27_03-18-05](https://cloud.githubusercontent.com/assets/1118459/12611975/a8011654-c4a4-11e5-84f9-1baca4835b4b.png)

data/docs/additional_reading/turbolinks.md

@@ -4,8 +4,8 @@
 * Currently support 2.5.x of Turbolinks. We plan to update to Turbolinks 5 soon.
 
 ## Why Turbolinks?
-As you switch between Rails HTML controller requests, you will only load the HTML and you will 
-not reload JavaScript and stylesheets. This definitely can make an app perform better, even if 
+As you switch between Rails HTML controller requests, you will only load the HTML and you will
+not reload JavaScript and stylesheets. This definitely can make an app perform better, even if
 the JavaScript and stylesheets are cached by the browser, as they will still require parsing.
 
 ### Install Checklist
@@ -19,21 +19,8 @@ the JavaScript and stylesheets are cached by the browser, as they will still req
    ```javascript
    //= require turbolinks
    ```
-   
-## Troubleshooting
 
-You cans set a global debug flag in your `application.js` to turn on tracing of Turbolinks events
-as they pertain to React on Rails.
+## Troubleshooting
+To turn on tracing of Turbolinks events, require `debug_turbolinks` (provided by ReactOnRails) inside of `app/assets/javascripts/application.js` **at the beginning of the file**. This will print out events related to the initialization of the components created with the view helper `react_component`.
 
-1. Add this line to your `application.js`:
-   ```javascript
-   //= require testGlobals
-   ```
-2. Initialie the global debug value of `DEBUG_TURBOLINKS` like this:
-   ```javascript
-   window.DEBUG_TURBOLINKS = true;
-   console.log('window.DEBUG_TURBOLINKS = true;');
-   ```
-   
-This will print out events related to the initialization of the components created with the view 
-helper `react_component`.
+We've noticed that Turbolinks doesn't work if you use the ruby gem version of jQuery and jQuery ujs. Therefore we recommend using the node packages instead. See the [tutorial app](https://github.com/shakacode/react-webpack-rails-tutorial) for how to accomplish this.

data/docs/doctrine.md

@@ -1,6 +1,6 @@
 # The React on Rails Doctrine
 
-By Justin Gordon, January 24, 2016
+By Justin Gordon, January 26, 2016
 
 This document is an extension and complement to [The Rails Doctrine](http://rubyonrails.org/doctrine/). If you haven't read that document, I suggest you do so first.
 

data/lib/react_on_rails/version.rb

@@ -1,3 +1,3 @@
 module ReactOnRails
-  VERSION = "2.1.0".freeze
+  VERSION = "2.1.1".freeze
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-on-rails",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "react-on-rails JavaScript for react_on_rails Ruby gem",
   "main": "node_package/lib/ReactOnRails.js",
   "directories": {
@@ -34,7 +34,8 @@
     "react-transform-hmr": "^1.0.1",
     "tap-spec": "^4.1.1",
     "tape": "^4.4.0",
-    "webpack": "^1.12.12"
+    "webpack": "^1.12.12",
+    "jsdom": "^8.0.0-0"
   },
   "peerDependencies": {
     "react": ">= 0.14",

data/rakelib/run_rspec.rake

@@ -16,6 +16,12 @@ namespace :run_rspec do
     run_tests_in(File.join("spec", "dummy"), env_vars: "DRIVER=selenium_firefox")
   end
 
+  task dummy_no_turbolinks: ["dummy_apps:dummy_app"] do
+    run_tests_in(File.join("spec", "dummy"),
+                 env_vars: "DRIVER=selenium_firefox DISABLE_TURBOLINKS=TRUE",
+                 command_name: "dummy_no_turbolinks")
+  end
+
   # Dynamically define Rake tasks for each example app found in the examples directory
   ExampleType.all.each do |example_type|
     desc "Runs RSpec for #{example_type.name_pretty} only"
@@ -37,7 +43,7 @@ namespace :run_rspec do
   Coveralls::RakeTask.new
 
   desc "run all tests"
-  task run_rspec: [:gem, :dummy, :examples, :empty, :js_tests] do
+  task run_rspec: [:gem, :dummy, :dummy_no_turbolinks, :examples, :empty, :js_tests] do
     puts "Completed all RSpec tests"
   end
 end
@@ -69,6 +75,6 @@ def run_tests_in(dir, options = {})
 
   command_name = options.fetch(:command_name, path.basename)
   rspec_args = options.fetch(:rspec_args, "")
-  env_vars = %(#{options.fetch(env_vars, '')} COVERAGE=true TEST_ENV_COMMAND_NAME="#{command_name}")
+  env_vars = %(#{options.fetch(:env_vars, '')} COVERAGE=true TEST_ENV_COMMAND_NAME="#{command_name}")
   sh_in_dir(path.realpath, "#{env_vars} bundle exec rspec #{rspec_args}")
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: react_on_rails
 version: !ruby/object:Gem::Version
-  version: 2.1.0
+  version: 2.1.1
 platform: ruby
 authors:
 - Justin Gordon
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2016-01-27 00:00:00.000000000 Z
+date: 2016-01-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: connection_pool
@@ -285,6 +285,7 @@ files:
 - Gemfile
 - README.md
 - Rakefile
+- app/assets/javascripts/debug_turbolinks.js
 - app/helpers/react_on_rails_helper.rb
 - docker-compose.yml
 - docs/LICENSE
@@ -292,6 +293,7 @@ files:
 - docs/additional_reading/manual_installation.md
 - docs/additional_reading/node_dependencies_and_npm.md
 - docs/additional_reading/optional_configuration.md
+- docs/additional_reading/rails_view_rendering_from_inline_javascript.md
 - docs/additional_reading/react-and-redux.md
 - docs/additional_reading/react_router.md
 - docs/additional_reading/rspec_configuration.md