diff --git a/README.md b/README.md index 5c0eb0f43..5e3bb7abe 100644 --- a/README.md +++ b/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: -> `` @@ -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: -> `` @@ -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: -> `` diff --git a/gemfiles/rails_3.1.gemfile b/gemfiles/rails_3.1.gemfile index 13cf86e0c..c49049f55 100644 --- a/gemfiles/rails_3.1.gemfile +++ b/gemfiles/rails_3.1.gemfile @@ -5,4 +5,4 @@ source "http://rubygems.org" gem "rails", "~> 3.1" gem "sprockets", ">= 2.2.2" -gemspec :path=>"../" \ No newline at end of file +gemspec :path => "../" diff --git a/gemfiles/rails_3.2.gemfile b/gemfiles/rails_3.2.gemfile index 779ce7c6e..0b2047cf5 100644 --- a/gemfiles/rails_3.2.gemfile +++ b/gemfiles/rails_3.2.gemfile @@ -4,4 +4,4 @@ source "http://rubygems.org" gem "rails", "~> 3.2" -gemspec :path=>"../" \ No newline at end of file +gemspec :path => "../" diff --git a/gemfiles/rails_4.0.gemfile b/gemfiles/rails_4.0.gemfile index d54014891..a3fdee2c0 100644 --- a/gemfiles/rails_4.0.gemfile +++ b/gemfiles/rails_4.0.gemfile @@ -4,4 +4,4 @@ source "http://rubygems.org" gem "rails", "~> 4.0" -gemspec :path=>"../" \ No newline at end of file +gemspec :path => "../" diff --git a/gemfiles/rails_4.0_with_therubyracer.gemfile b/gemfiles/rails_4.0_with_therubyracer.gemfile index ce64ea2ce..a8f5be006 100644 --- a/gemfiles/rails_4.0_with_therubyracer.gemfile +++ b/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=>"../" \ No newline at end of file +gemspec :path => "../" diff --git a/gemfiles/rails_4.1.gemfile b/gemfiles/rails_4.1.gemfile index 6da1debea..1bb928d7b 100644 --- a/gemfiles/rails_4.1.gemfile +++ b/gemfiles/rails_4.1.gemfile @@ -4,4 +4,4 @@ source "http://rubygems.org" gem "rails", "~> 4.1" -gemspec :path=>"../" \ No newline at end of file +gemspec :path => "../" diff --git a/lib/assets/javascripts/react_ujs.js b/lib/assets/javascripts/react_ujs.js index a3dfffe6a..3522e4d6a 100644 --- a/lib/assets/javascripts/react_ujs.js +++ b/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); } }; diff --git a/lib/react/renderer.rb b/lib/react/renderer.rb index 31a0bee1f..a8909f943 100644 --- a/lib/react/renderer.rb +++ b/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 diff --git a/react-rails.gemspec b/react-rails.gemspec index d4707ff89..e9b380edf 100644 --- a/react-rails.gemspec +++ b/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[ diff --git a/test/dummy/app/assets/javascripts/components/Todo.js.jsx.coffee b/test/dummy/app/assets/javascripts/components/Todo.js.jsx.coffee index b8430f143..55c5a08da 100644 --- a/test/dummy/app/assets/javascripts/components/Todo.js.jsx.coffee +++ b/test/dummy/app/assets/javascripts/components/Todo.js.jsx.coffee @@ -1,5 +1,3 @@ -###* @jsx React.DOM ### - Todo = React.createClass render: -> `
  • {this.props.todo}
    • ` diff --git a/test/dummy/app/assets/javascripts/components/TodoList.js.jsx b/test/dummy/app/assets/javascripts/components/TodoList.js.jsx index 169ee663a..4f3d412ef 100644 --- a/test/dummy/app/assets/javascripts/components/TodoList.js.jsx +++ b/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({ ) } }) - diff --git a/test/dummy/app/assets/javascripts/example.js.jsx b/test/dummy/app/assets/javascripts/example.js.jsx index 2611211ae..5becf72d5 100644 --- a/test/dummy/app/assets/javascripts/example.js.jsx +++ b/test/dummy/app/assets/javascripts/example.js.jsx @@ -1,2 +1 @@ -/** @jsx React.DOM */
    ; diff --git a/test/dummy/app/assets/javascripts/example2.js.jsx.coffee b/test/dummy/app/assets/javascripts/example2.js.jsx.coffee index 6bb2e5528..1bdfe5594 100644 --- a/test/dummy/app/assets/javascripts/example2.js.jsx.coffee +++ b/test/dummy/app/assets/javascripts/example2.js.jsx.coffee @@ -1,5 +1,3 @@ -###* @jsx React.DOM ### - Component = React.createClass render: -> `` diff --git a/test/dummy/app/assets/javascripts/example3.js.jsx b/test/dummy/app/assets/javascripts/example3.js.jsx index 2611211ae..5becf72d5 100644 --- a/test/dummy/app/assets/javascripts/example3.js.jsx +++ b/test/dummy/app/assets/javascripts/example3.js.jsx @@ -1,2 +1 @@ -/** @jsx React.DOM */
    ; diff --git a/test/helper_files/TodoListWithUpdates.js.jsx b/test/helper_files/TodoListWithUpdates.js.jsx index b3950c95b..464c9e1b0 100644 --- a/test/helper_files/TodoListWithUpdates.js.jsx +++ b/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({ ) } }) - diff --git a/test/jsxtransform_test.rb b/test/jsxtransform_test.rb index 6906eaba1..871a646c1 100644 --- a/test/jsxtransform_test.rb +++ b/test/jsxtransform_test.rb @@ -3,20 +3,16 @@ # Sprockets is inserting a newline after the docblock for some reason... EXPECTED_JS = <