Merge branch 'master' of github.com:reactjs/react-rails into fix-events

Author: William Meleyal

Appraisals

@@ -17,3 +17,7 @@ appraise "rails-4.0-with-therubyracer" do
   gem 'rails', '~> 4.0'
   gem 'therubyracer', '0.12.0', :platform => :mri
 end
+
+appraise "rails-4.1" do
+  gem 'rails', '~> 4.1'
+end

README.md

@@ -23,7 +23,7 @@ As with all gem dependencies, we strongly recommend adding `react-rails` to your
 # If you missed a warning at the top of this README - this is still in development
 # which means this version is not pushed to rubygems.org
 
-gem 'react-rails', '~> 1.0.0'
+gem 'react-rails', '~> 1.0.0.pre', github: 'reactjs/react-rails'
 ```
 
 ## Usage
@@ -69,7 +69,7 @@ Component = React.createClass
 
 ```erb
 <!-- react_ujs will execute `React.renderComponent(HelloMessage({name:"Bob"}), element)` -->
-<div data-react-class="HelloMessage" data-react-props="<%= {:name => 'Bob'}.to_json %>" />
+<div data-react-class="HelloMessage" data-react-props="<%= {name: 'Bob'}.to_json %>" />
 ```
 
 `react_ujs` will also scan DOM elements and call `React.unmountComponentAtNode` on page unload. If you want to disable this behavior, remove `data-react-class` attribute in `componentDidMount`.
@@ -89,17 +89,17 @@ To use `react_ujs`, simply `require` it after `react` (and after `turbolinks` if
 There is a view helper method `react_component`. It is designed to work with `react_ujs` and takes a React class name, properties, and HTML options as arguments:
 
 ```ruby
-react_component('HelloMessage', :name => 'John')
+react_component('HelloMessage', name: 'John')
 # <div data-react-class="HelloMessage" data-react-props="{&quot;name&quot;:&quot;John&quot;}"></div>
 ```
 
 By default, a `<div>` element is used. Other tag and HTML attributes can be specified:
 
 ```ruby
-react_component('HelloMessage', {:name => 'John'}, :span)
+react_component('HelloMessage', {name: 'John'}, :span)
 # <span data-...></span>
 
-react_component('HelloMessage', {:name => 'John'}, {:id => 'hello', :class => 'foo', :tag => :span})
+react_component('HelloMessage', {name: 'John'}, {id: 'hello', class: 'foo', tag: :span})
 # <span class="foo" id="hello" data-...></span>
 ```
 
@@ -139,10 +139,10 @@ window.Component = Component
 
 #### View Helper
 
-To take advantage of server rendering, use the same view helper `react_component`, and pass in `:prerender => true` in the `options` hash.
+To take advantage of server rendering, use the same view helper `react_component`, and pass in `prerender: true` in the `options` hash.
 
 ```erb
-react_component('HelloMessage', {:name => 'John'}, {:prerender => true})
+react_component('HelloMessage', {name: 'John'}, {prerender: true})
 ```
 This will return the fully rendered component markup, and as long as you have included the `react_ujs` script in your page, then the component will also be instantiated and mounted on the client.
 

gemfiles/rails_3.1.gemfile

@@ -3,6 +3,6 @@
 source "http://rubygems.org"
 
 gem "rails", "~> 3.1"
-gem "sprockets", ">= 2.2.1"
+gem "sprockets", ">= 2.2.2"
 
 gemspec :path=>"../"

gemfiles/rails_4.1.gemfile

@@ -0,0 +1,7 @@
+# This file was generated by Appraisal
+
+source "http://rubygems.org"
+
+gem "rails", "~> 4.1"
+
+gemspec :path=>"../"

lib/react/rails/railtie.rb

@@ -19,6 +19,13 @@ class Railtie < ::Rails::Railtie
         app.config.watchable_files.concat Dir["#{app.root}/app/assets/javascripts/**/*.jsx*"]
       end
 
+      # Include the react-rails view helper lazily
+      initializer "react_rails.setup_view_helpers" do
+        ActiveSupport.on_load(:action_view) do
+          include ::React::Rails::ViewHelper
+        end
+      end
+
       # run after all initializers to allow sprockets to pick up react.js and
       # jsxtransformer.js from end-user to override ours if needed
       initializer "react_rails.setup_vendor", :after => "sprockets.environment", group: :all do |app|
@@ -56,13 +63,15 @@ class Railtie < ::Rails::Railtie
       config.after_initialize do |app|
         # Server Rendering
         # Concat component_filenames together for server rendering
-        app.config.react.components_js = app.config.react.component_filenames.map do |filename|
-          app.assets[filename].to_s
-        end.join(";")
+        app.config.react.components_js = lambda {
+          app.config.react.component_filenames.map do |filename|
+            app.assets[filename].to_s
+          end.join(";")
+        }
 
         do_setup = lambda do
           cfg = app.config.react
-          React::Renderer.setup!( cfg.react_js.call, cfg.components_js,
+          React::Renderer.setup!( cfg.react_js, cfg.components_js,
                                 {:size => cfg.size, :timeout => cfg.timeout})
         end
 

lib/react/rails/view_helper.rb

@@ -23,7 +23,3 @@ def react_component(name, args = {}, options = {}, &block)
     end
   end
 end
-
-ActionView::Base.class_eval do
-  include ::React::Rails::ViewHelper
-end

lib/react/renderer.rb

@@ -10,6 +10,7 @@ def self.setup!(react_js, components_js, args={})
       @@react_js = react_js
       @@components_js = components_js
       @@pool.shutdown{} if @@pool
+      reset_combined_js!
       @@pool = ConnectionPool.new(:size => args[:size]||10, :timeout => args[:timeout]||20) { self.new }
     end
 
@@ -19,8 +20,8 @@ def self.render(component, args={})
       end
     end
 
-    def self.combined_js
-      @@combined_js ||= <<-CODE
+    def self.setup_combined_js
+      <<-CODE
         var global = global || this;
 
         var console = global.console || {};
@@ -30,12 +31,20 @@ def self.combined_js
           }
         });
 
-        #{@@react_js};
+        #{@@react_js.call};
         React = global.React;
-        #{@@components_js};
+        #{@@components_js.call};
       CODE
     end
 
+    def self.reset_combined_js!
+      @@combined_js = setup_combined_js
+    end
+
+    def self.combined_js
+      @@combined_js
+    end
+
     def context
       @context ||= ExecJS.compile(self.class.combined_js)
     end

react-rails.gemspec

@@ -23,7 +23,7 @@ Gem::Specification.new do |s|
 
   s.add_dependency 'execjs'
   s.add_dependency 'rails', '>= 3.1'
-  s.add_dependency 'react-source', '0.10.0'
+  s.add_dependency 'react-source', '0.11.1'
   s.add_dependency 'connection_pool'
 
   s.files = Dir[

test/helper_files/TodoListWithUpdates.js.jsx

@@ -0,0 +1,22 @@
+/** @jsx React.DOM */
+
+TodoList = React.createClass({
+  getInitialState: function() {
+    return({mounted: "nope"});
+  },
+  componentWillMount: function() {
+    this.setState({mounted: 'yep'});
+  },
+  render: function() {
+    return (
+      <ul>
+        <li>Updated</li>
+        <li id='status'>{this.state.mounted}</li>
+        {this.props.todos.map(function(todo, i) {
+          return (<Todo key={i} todo={todo} />)
+        })}
+      </ul>
+    )
+  }
+})
+

test/react_test.rb

@@ -31,6 +31,8 @@ class ReactTest < ActionDispatch::IntegrationTest
 
     assert_response :success
     assert_equal "'test_confirmation_token_react_content';\n", @response.body
+
+    React::Renderer.reset_combined_js!
   end
 
 end