Add command-line component generator

Adds a generator that scaffolds up a complete, but minimal, component
using JSX and a propTypes hash.

Run `rails generate react:component --help` for usage notes.

Author: xionon

lib/generators/react/component_generator.rb

@@ -0,0 +1,127 @@
+module React
+  module Generators
+    class ComponentGenerator < ::Rails::Generators::NamedBase
+      source_root File.expand_path '../../templates', __FILE__
+      desc <<-DESC.strip_heredoc
+      Description:
+          Scaffold a react component into app/assets/javascripts/components.
+          The generated component will include a basic render function and a PropTypes
+          hash to help with development.
+
+      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:
+
+          any
+          array
+          bool
+          component
+          func
+          number
+          object
+          renderable
+          shape
+          string
+
+          Special PropTypes take additional arguments in {}, and must be enclosed in
+          single quotes to keep bash from expanding the arguments in {}.
+
+          instanceOf
+          takes an optional class name in the form of {className}
+
+          oneOf
+          behaves like an enum, and takes an optional list of strings that will
+          be allowed in the form of 'name:oneOf{one,two,three}'.
+
+          oneOfType.
+          oneOfType takes an optional list of react and custom types in the form of
+          'model:oneOfType{string,number,OtherType}'
+
+      Examples:
+          rails g react:component person name
+          rails g react:component restaurant name:string rating:number owner:instanceOf{Person}
+          rails g react:component food 'kind:oneOf{meat,cheese,vegetable}'
+          rails g react:component events 'location:oneOfType{string,Restaurant}'
+      DESC
+
+      argument :attributes,
+               :type => :array,
+               :default => [],
+               :banner => "field[:type] field[:type] ..."
+
+      REACT_PROP_TYPES = {
+        "renderable" =>  'React.PropTypes.renderable',
+        "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',
+        "func" =>        'React.PropTypes.func',
+        "function" =>    'React.PropTypes.func',
+        "any" =>         'React.PropTypes.any',
+
+        "instanceOf" => ->(type) {
+          'React.PropTypes.instanceOf(%s)' % type.to_s.camelize
+        },
+
+        "oneOf" => ->(*options) {
+          enums = options.map{|k| "'#{k.to_s}'"}.join(',')
+          'React.PropTypes.oneOf([%s])' % enums
+        },
+
+        "oneOfType" => ->(*options) {
+          types = options.map{|k| "#{lookup(k.to_s, k.to_s)}" }.join(',')
+          'React.PropTypes.oneOfType([%s])' % types
+        },
+      }
+
+      def create_component_file
+        extension = "js.jsx"
+        file_path = File.join('app/assets/javascripts/components', "#{file_name}.#{extension}")
+        template("component.#{extension}", file_path)
+      end
+
+      private
+
+       def parse_attributes!
+         self.attributes = (attributes || []).map do |attr|
+           name, type, options = "", "", ""
+           options_regex = /(?<options>{.*})/
+
+           name, type = attr.split(':')
+
+           if matchdata = options_regex.match(type)
+             options = matchdata[:options]
+             type = type.gsub(options_regex, '')
+           end
+
+           { :name => name, :type => lookup(type, options) }
+         end
+       end
+
+       def self.lookup(type = "renderable", 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']
+           end
+         end
+
+         options = options.to_s.gsub(/[{}]/, '').split(',')
+
+         react_prop_type = react_prop_type.call(*options) if react_prop_type.respond_to? :call
+         react_prop_type
+       end
+
+       def lookup(type = "renderable", options = "")
+         self.class.lookup(type, options)
+       end
+    end
+  end
+end

lib/generators/templates/component.js.jsx

@@ -0,0 +1,22 @@
+/** @jsx React.DOM */
+var <%= file_name.camelize %> = React.createClass({
+<% if attributes.size > 0 -%>
+  propTypes: {
+<% attributes.each_with_index do |attribute, idx| -%>
+    <%= attribute[:name].camelize(:lower) %>: <%= attribute[:type] %><% if (idx < attributes.length-1) %>,<% end %>
+<% end -%>
+  },
+<% end -%>
+
+  render: function() {
+<% if attributes.size > 0 -%>
+    return <div>
+<% attributes.each do |attribute| -%>
+      <div><%= attribute[:name].titleize %>: {this.props.<%= attribute[:name] %>}</div>
+<% end -%>
+    </div>;
+<% else -%>
+    return <div />;
+<% end -%>
+  }
+})

test/generators/component_generator_test.rb

@@ -0,0 +1,64 @@
+require 'test_helper'
+require 'generators/react/component_generator'
+
+class ComponentGeneratorTest < Rails::Generators::TestCase
+  destination File.join(Rails.root, 'tmp', 'component_generator_test_output')
+  setup :prepare_destination
+  tests React::Generators::ComponentGenerator
+
+  def filename
+    'app/assets/javascripts/components/generated_component.js.jsx'
+  end
+
+  test "creates the component file" do
+    run_generator %w(GeneratedComponent)
+
+    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
+    run_generator %w(GeneratedComponent name)
+    assert_file filename, %r{name: React.PropTypes.renderable}
+  end
+
+  test "creates the component file with various standard proptypes" do
+    proptypes = %w(string bool number array func number object any)
+    run_generator %w(GeneratedComponent) + proptypes.map { |type| "my_#{type}:#{type}" }
+    proptypes.each do |type|
+      assert_file filename, %r(my#{type.capitalize}: React.PropTypes.#{type})
+    end
+  end
+
+  test "creates a component file with an instanceOf property" do
+    run_generator %w(GeneratedComponent favorite_food:instanceOf{food})
+    assert_file filename, /favoriteFood: React.PropTypes.instanceOf\(Food\)/
+  end
+
+  test "creates a component file with a oneOf property" do
+    run_generator %w(GeneratedComponent favorite_food:oneOf{pizza,hamburgers})
+    assert_file filename, /favoriteFood: React.PropTypes.oneOf\(\['pizza','hamburgers'\]\)/
+  end
+
+  test "creates a component file with a oneOfType property" do
+    run_generator %w(GeneratedComponent favorite_food:oneOfType{string,Food})
+    expected_property = "favoriteFood: React.PropTypes.oneOfType([React.PropTypes.string,React.PropTypes.instanceOf(Food)])"
+
+    assert_file filename, Regexp.new(Regexp.quote(expected_property))
+  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)')
+
+    run_generator %w(GeneratedComponent name:string address:shape)
+    jsx = React::JSX.transform(File.read(File.join(destination_root, filename)))
+
+    assert_match(Regexp.new(expected_name_div), jsx)
+    assert_match(Regexp.new(expected_shape_div), jsx)
+  end
+end