Changes to work with React 0.12 and follow @zpao's recommendations

Author: xionon

lib/generators/react/component_generator.rb

@@ -11,16 +11,16 @@ class ComponentGenerator < ::Rails::Generators::NamedBase
       Available field types:
 
           Basic prop types do not take any additional arguments. If you do not specify
-          a prop type, the generic renderable will be used. The basic types available are:
+          a prop type, the generic node will be used. The basic types available are:
 
           any
           array
           bool
-          component
+          element
           func
           number
           object
-          renderable
+          node
           shape
           string
 
@@ -51,15 +51,15 @@ class ComponentGenerator < ::Rails::Generators::NamedBase
                :banner => "field[:type] field[:type] ..."
 
       REACT_PROP_TYPES = {
-        "renderable" =>  'React.PropTypes.renderable',
+        "node" =>        'React.PropTypes.node',
         "bool" =>        'React.PropTypes.bool',
         "boolean" =>     'React.PropTypes.bool',
         "string" =>      'React.PropTypes.string',
         "number" =>      'React.PropTypes.number',
         "object" =>      'React.PropTypes.object',
         "array" =>       'React.PropTypes.array',
         "shape" =>       'React.PropTypes.shape({})',
-        "component" =>   'React.PropTypes.component',
+        "element" =>     'React.PropTypes.element',
         "func" =>        'React.PropTypes.func',
         "function" =>    'React.PropTypes.func',
         "any" =>         'React.PropTypes.any',
@@ -103,13 +103,13 @@ def parse_attributes!
          end
        end
 
-       def self.lookup(type = "renderable", options = "")
+       def self.lookup(type = "node", options = "")
          react_prop_type = REACT_PROP_TYPES[type]
          if react_prop_type.blank?
            if type =~ /^[[:upper:]]/
              react_prop_type = REACT_PROP_TYPES['instanceOf']
            else
-             react_prop_type = REACT_PROP_TYPES['renderable']
+             react_prop_type = REACT_PROP_TYPES['node']
            end
          end
 
@@ -119,7 +119,7 @@ def self.lookup(type = "renderable", options = "")
          react_prop_type
        end
 
-       def lookup(type = "renderable", options = "")
+       def lookup(type = "node", options = "")
          self.class.lookup(type, options)
        end
     end

lib/generators/templates/component.js.jsx

@@ -1,4 +1,3 @@
-/** @jsx React.DOM */
 var <%= file_name.camelize %> = React.createClass({
 <% if attributes.size > 0 -%>
   propTypes: {
@@ -10,13 +9,15 @@ var <%= file_name.camelize %> = React.createClass({
 
   render: function() {
 <% if attributes.size > 0 -%>
-    return <div>
+    return (
+      <div>
 <% attributes.each do |attribute| -%>
-      <div><%= attribute[:name].titleize %>: {this.props.<%= attribute[:name] %>}</div>
+        <div><%= attribute[:name].titleize %>: {this.props.<%= attribute[:name] %>}</div>
 <% end -%>
-    </div>;
+      </div>
+    );
 <% else -%>
     return <div />;
 <% end -%>
   }
-})
+});

test/generators/component_generator_test.rb

@@ -16,14 +16,9 @@ def filename
     assert_file filename
   end
 
-  test "creates the component file with jsx pragma" do
-    run_generator %w(GeneratedComponent)
-    assert_file filename, %r{/\*\* @jsx React\.DOM \*/}
-  end
-
-  test "creates the component file with a renderable argument" do
+  test "creates the component file with a node argument" do
     run_generator %w(GeneratedComponent name)
-    assert_file filename, %r{name: React.PropTypes.renderable}
+    assert_file filename, %r{name: React.PropTypes.node}
   end
 
   test "creates the component file with various standard proptypes" do
@@ -52,8 +47,8 @@ def filename
   end
 
   test "generates working jsx" do
-    expected_name_div = Regexp.escape('React.DOM.div(null, "Name: ", this.props.name)')
-    expected_shape_div = Regexp.escape('React.DOM.div(null, "Address: ", this.props.address)')
+    expected_name_div = Regexp.escape('React.createElement("div", null, "Name: ", this.props.name)')
+    expected_shape_div = Regexp.escape('React.createElement("div", null, "Address: ", this.props.address)')
 
     run_generator %w(GeneratedComponent name:string address:shape)
     jsx = React::JSX.transform(File.read(File.join(destination_root, filename)))