update to react-source 0.12 final

README.md

@@ -58,13 +58,11 @@ Alternatively, you can include it directly as a separate script tag:
 
 ### JSX
 
-To transform your JSX into JS, simply create `.js.jsx` files, and ensure that the file has the `/** @jsx React.DOM */` docblock. These files will be transformed on request, or precompiled as part of the `assets:precompile` task.
+To transform your JSX into JS, simply create `.js.jsx` files. These files will be transformed on request, or precompiled as part of the `assets:precompile` task.
 
-CoffeeScript files can also be used, by creating `.js.jsx.coffee` files. You must use this form of the docblock at the top of each file: `###* @jsx React.DOM ###`. We also need to embed JSX inside backticks so CoffeeScript ignores the syntax it doesn't understand. Here's an example:
+CoffeeScript files can also be used, by creating `.js.jsx.coffee` files. We also need to embed JSX inside backticks so CoffeeScript ignores the syntax it doesn't understand. Here's an example:
 
 ```coffee
-###* @jsx React.DOM ###
-
 Component = React.createClass
   render: ->
     `<ExampleComponent videos={this.props.videos} />`
@@ -191,8 +189,6 @@ In order for us to render your React components, we need to be able to find them
 This will bring in all files located in the `app/assets/javascripts/components` directory.  You can organize your code however you like, as long as a request for `/assets/javascripts/components.js` brings in a concatenated file containing all of your React components, and each one has to be available in the global scope (either `window` or `global` can be used). For `.js.jsx` files this is not a problem, but if you are using `.js.jsx.coffee` files then the wrapper function needs to be taken into account:
 
 ```coffee
-###* @jsx React.DOM ###
-
 Component = React.createClass
   render: ->
     `<ExampleComponent videos={this.props.videos} />`
@@ -258,8 +254,6 @@ end
 It is possible to use JSX with CoffeeScript. The caveat is that you will still need to include the docblock. Since CoffeeScript doesn't allow `/* */` style comments, we need to do something a little different. We also need to embed JSX inside backticks so CoffeeScript ignores the syntax it doesn't understand. Here's an example:
 
 ```coffee
-###* @jsx React.DOM ###
-
 Component = React.createClass
   render: ->
     `<ExampleComponent videos={this.props.videos} />`

gemfiles/rails_3.1.gemfile

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

gemfiles/rails_3.2.gemfile

@@ -4,4 +4,4 @@ source "http://rubygems.org"
 
 gem "rails", "~> 3.2"
 
-gemspec :path=>"../"
+gemspec :path => "../"

gemfiles/rails_4.0.gemfile

@@ -4,4 +4,4 @@ source "http://rubygems.org"
 
 gem "rails", "~> 4.0"
 
-gemspec :path=>"../"
+gemspec :path => "../"

gemfiles/rails_4.0_with_therubyracer.gemfile

@@ -3,6 +3,6 @@
 source "http://rubygems.org"
 
 gem "rails", "~> 4.0"
-gem "therubyracer", "0.12.0", :platform=>:mri
+gem "therubyracer", "0.12.0", :platform => :mri
 
-gemspec :path=>"../"
+gemspec :path => "../"

gemfiles/rails_4.1.gemfile

@@ -4,4 +4,4 @@ source "http://rubygems.org"
 
 gem "rails", "~> 4.1"
 
-gemspec :path=>"../"
+gemspec :path => "../"

lib/assets/javascripts/react_ujs.js

@@ -25,7 +25,7 @@
       var constructor = window[className] || eval.call(window, className);
       var propsJson = node.getAttribute(PROPS_ATTR);
       var props = propsJson && JSON.parse(propsJson);
-      React.renderComponent(constructor(props), node);
+      React.render(React.createElement(constructor, props), node);
     }
   };
 

lib/react/renderer.rb

@@ -70,7 +70,7 @@ def render(component, args={})
       react_props = React::Renderer.react_props(args)
       jscode = <<-JS
         function() {
-          return React.renderComponentToString(#{component}(#{react_props}));
+          return React.renderToString(React.createElement(#{component}, #{react_props}));
         }()
       JS
       context.eval(jscode).html_safe

react-rails.gemspec

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

test/dummy/app/assets/javascripts/components/Todo.js.jsx.coffee

@@ -1,5 +1,3 @@
-###* @jsx React.DOM ###
-
 Todo = React.createClass
   render: ->
     `<li>{this.props.todo}</li>`

test/dummy/app/assets/javascripts/components/TodoList.js.jsx

@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 TodoList = React.createClass({
   getInitialState: function() {
     return({mounted: "nope"});
@@ -18,4 +16,3 @@ TodoList = React.createClass({
     )
   }
 })
-

test/dummy/app/assets/javascripts/example.js.jsx

@@ -1,2 +1 @@
-/** @jsx React.DOM */
 <div/>;

test/dummy/app/assets/javascripts/example2.js.jsx.coffee

@@ -1,5 +1,3 @@
-###* @jsx React.DOM ###
-
 Component = React.createClass
   render: ->
     `<ExampleComponent videos={this.props.videos} />`

test/dummy/app/assets/javascripts/example3.js.jsx

@@ -1,2 +1 @@
-/** @jsx React.DOM */
 <div/>;

test/helper_files/TodoListWithUpdates.js.jsx

@@ -1,5 +1,3 @@
-/** @jsx React.DOM */
-
 TodoList = React.createClass({
   getInitialState: function() {
     return({mounted: "nope"});
@@ -19,4 +17,3 @@ TodoList = React.createClass({
     )
   }
 })
-

test/jsxtransform_test.rb

@@ -3,20 +3,16 @@
 
 # Sprockets is inserting a newline after the docblock for some reason...
 EXPECTED_JS = <<eos
-/** @jsx React.DOM */
-
-React.DOM.div(null);
+React.createElement("div", null);
 eos
 
 EXPECTED_JS_2 = <<eos
-/** @jsx React.DOM */
-
 (function() {
   var Component;
 
   Component = React.createClass({displayName: 'Component',
     render: function() {
-      return ExampleComponent( {videos:this.props.videos} );
+      return React.createElement(ExampleComponent, {videos:this.props.videos} );
     }
   });
 
@@ -35,10 +31,8 @@ class JSXTransformTest < ActionDispatch::IntegrationTest
   test 'asset pipeline should transform JSX + Coffeescript' do
     get 'assets/example2.js'
     assert_response :success
-    # Different coffee-script may generate slightly different outputs:
-    #  1. Some version inserts an extra "\n" at the beginning.
-    #  2. "/** @jsx React.DOM */" and "/** @jsx React.DOM*/" are both possible.
-    #
+    # Different coffee-script may generate slightly different outputs,
+    # as some version inserts an extra "\n" at the beginning.
     # Because appraisal is used, multiple versions of coffee-script are treated
     # together. Remove all spaces to make test pass.
     assert_equal EXPECTED_JS_2.gsub(/\s/, ''), @response.body.gsub(/\s/, '')

test/react_renderer_test.rb

@@ -30,8 +30,9 @@ class ReactRendererTest < ActiveSupport::TestCase
     err = assert_raises React::Renderer::PrerenderError do
       React::Renderer.render("NonexistentComponent", {error: true, exists: false})
     end
-    expected_message = 'Encountered error "ReferenceError: NonexistentComponent is not defined" when prerendering NonexistentComponent with {"error":true,"exists":false}'
-    assert_equal expected_message, err.message
+    expected_message_one = 'Encountered error "ReferenceError: Can\'t find variable: NonexistentComponent" when prerendering NonexistentComponent with {"error":true,"exists":false}'
+    expected_message_two = 'Encountered error "ReferenceError: NonexistentComponent is not defined" when prerendering NonexistentComponent with {"error":true,"exists":false}'
+    assert (expected_message_one == err.message || expected_message_two == err.message)
   end
 
   test 'prerender errors are thrown when given a string' do
@@ -43,7 +44,8 @@ class ReactRendererTest < ActiveSupport::TestCase
     err = assert_raises React::Renderer::PrerenderError do
       React::Renderer.render("NonexistentComponent", json_string)
     end
-    expected_message = 'Encountered error "ReferenceError: NonexistentComponent is not defined" when prerendering NonexistentComponent with {"error":true,"exists":false}'
-    assert_equal expected_message, err.message
+    expected_message_one = 'Encountered error "ReferenceError: Can\'t find variable: NonexistentComponent" when prerendering NonexistentComponent with {"error":true,"exists":false}'
+    expected_message_two = 'Encountered error "ReferenceError: NonexistentComponent is not defined" when prerendering NonexistentComponent with {"error":true,"exists":false}'
+    assert (expected_message_one == err.message || expected_message_two == err.message)
   end
 end