- Added new BabelTransformer to start performing transformation using ruby-babel-transpiler

- Make new BabelTransformer the default transformer
- README changes to reflect new Babel Transformer
- Added deprecation warning for usage of old transformer options
- Move old transformer to JSXTransformer
- Fixed  component generator test after changes to new transformer

Fixes #292, #278

Author: vipulnsward

README.md

@@ -9,7 +9,8 @@
 # react-rails
 
 
-`react-rails` makes it easy to use [React](http://facebook.github.io/react/) and [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html) in your Ruby on Rails (3.2+) application. `react-rails` can:
+`react-rails` makes it easy to use [React](http://facebook.github.io/react/) and [JSX](http://facebook.github.io/react/docs/jsx-in-depth.html) 
+in your Ruby on Rails (3.2+) application. `react-rails` can:
 
 - Provide [various `react` builds](#reactjs-builds) to your asset bundle
 - Transform [`.jsx` in the asset pipeline](#jsx)
@@ -32,7 +33,8 @@ rails g react:install
 ```
 
 This will:
-- create a `components.js` manifest file and a `app/assets/javascripts/components/` directory, where you will put your components
+- create a `components.js` manifest file and a `app/assets/javascripts/components/` directory, 
+where you will put your components
 - place the following in your `application.js`:
 
   ```js
@@ -45,7 +47,8 @@ This will:
 
 ### React.js builds
 
-You can pick which React.js build (development, production, with or without [add-ons]((http://facebook.github.io/react/docs/addons.html))) to serve in each environment by adding a config. Here are the defaults:
+You can pick which React.js build (development, production, with or without [add-ons]((http://facebook.github.io/react/docs/addons.html))) 
+to serve in each environment by adding a config. Here are the defaults:
 
 ```ruby
 # config/environments/development.rb
@@ -67,14 +70,40 @@ MyApp::Application.configure do
 end
 ```
 
-After restarting your Rails server, `//= require react`  will provide the build of React.js which was specified by the configurations.
+After restarting your Rails server, `//= require react`  will provide the build of React.js which 
+was specified by the configurations.
 
-`react-rails` offers a few other options for versions & builds of React.js. See [VERSIONS.md](https://github.com/reactjs/react-rails/blob/master/VERSIONS.md) for more info about using the `react-source` gem or dropping in your own copies of React.js.
+`react-rails` offers a few other options for versions & builds of React.js. 
+See [VERSIONS.md](https://github.com/reactjs/react-rails/blob/master/VERSIONS.md) for more info about
+ using the `react-source` gem or dropping in your own copies of React.js.
 
 ### JSX
 
 After installing `react-rails`, restart your server. Now, `.js.jsx` files will be transformed in the asset pipeline.
 
+`react-rails` currently ships with two transformers, to convert jsx code -
+ 
+* `BabelTransformer` using [Babel](http://babeljs.io), which is the default transformer.
+* `JSXTransformer` using `JSXTransformer.js`
+
+#### BabelTransformer options
+
+You can use babel's [transformers](http://babeljs.io/docs/advanced/transformers/) and [custom plugins](http://babeljs.io/docs/advanced/plugins/), 
+and pass [options](http://babeljs.io/docs/usage/options/) to the babel transpiler adding following configurations:
+
+```ruby
+config.react.jsx_transform_options = {
+  blacklist: ['spec.functionName', 'validation.react'], // default options
+  optional: ["transformerName"],  // pass extra babel options
+  whitelist: ["useStrict"] // even more options    
+}
+```
+Under the hood, `react-rails` users [ruby-babel-transpiler](https://github.com/babel/ruby-babel-transpiler), for transformation.
+  
+#### JSXTransformer options
+
+To use old JSXTransformer you can use `React::JSX.transformer_class = React::JSX::JSXTransformer`
+
 You can use JSX `--harmony` or `--strip-types` options by adding a configuration:
 
 ```ruby
@@ -85,6 +114,8 @@ config.react.jsx_transform_options = {
 }
 ```
 
+#### CoffeeScript
+
 To use CoffeeScript, create `.js.jsx.coffee` files and embed JSX inside backticks, for example:
 
 ```coffee
@@ -95,7 +126,9 @@ Component = React.createClass
 
 ### Rendering & mounting
 
-`react-rails` includes a view helper (`react_component`) and an unobtrusive JavaScript driver (`react_ujs`) which work together to put React components on the page. You should require the UJS driver in your manifest after `react` (and after `turbolinks` if you use [Turbolinks](https://github.com/rails/turbolinks)).
+`react-rails` includes a view helper (`react_component`) and an unobtrusive JavaScript driver (`react_ujs`) 
+which work together to put React components on the page. You should require the UJS driver
+ in your manifest after `react` (and after `turbolinks` if you use [Turbolinks](https://github.com/rails/turbolinks)).
 
 The __view helper__ puts a `div` on the page with the requested component class & props. For example:
 
@@ -105,9 +138,12 @@ The __view helper__ puts a `div` on the page with the requested component class
 <div data-react-class="HelloMessage" data-react-props="{&quot;name&quot;:&quot;John&quot;}"></div>
 ```
 
-On page load, the __`react_ujs` driver__ will scan the page and mount components using `data-react-class` and `data-react-props`. Before page unload, it will unmount components (if you want to disable this behavior, remove `data-react-class` attribute in `componentDidMount`).
+On page load, the __`react_ujs` driver__ will scan the page and mount components using `data-react-class` 
+and `data-react-props`. Before page unload, it will unmount components (if you want to disable this behavior, 
+remove `data-react-class` attribute in `componentDidMount`).
 
-`react_ujs` uses Turbolinks events if they're available, otherwise, it uses native events. __Turbolinks >= 2.4.0__ is recommended because it exposes better events.
+`react_ujs` uses Turbolinks events if they're available, otherwise, it uses native events.
+ __Turbolinks >= 2.4.0__ is recommended because it exposes better events.
 
 The view helper's signature is:
 
@@ -141,16 +177,19 @@ _(It will be also be mounted by the UJS on page load.)_
 
 There are some requirements for this to work:
 
-- `react-rails` must load your code. By convention it uses `components.js`, which was created by the install task. This file must include your components _and_ their dependencies (eg, Underscore.js).
-- Your components must be accessible in the global scope. If you are using `.js.jsx.coffee` files then the wrapper function needs to be taken into account:
+- `react-rails` must load your code. By convention it uses `components.js`, which was created 
+by the install task. This file must include your components _and_ their dependencies (eg, Underscore.js).
+- Your components must be accessible in the global scope. 
+If you are using `.js.jsx.coffee` files then the wrapper function needs to be taken into account:
 
   ```coffee
   # @ is `window`:
   @Component = React.createClass
     render: ->
       `<ExampleComponent videos={this.props.videos} />`
   ```
-- Your code can't reference `document`. Prerender processes don't have access to `document`, so jQuery and some other libs won't work in this environment :(
+- Your code can't reference `document`. Prerender processes don't have access to `document`, 
+so jQuery and some other libs won't work in this environment :(
 
 You can configure your pool of JS virtual machines and specify where it should load code:
 
@@ -171,7 +210,11 @@ end
 
 ### Component generator
 
-`react-rails` ships with a Rails generator to help you get started with a simple component scaffold. You can run it using `rails generate react:component ComponentName`. The generator takes an optional list of arguments for default propTypes, which follow the conventions set in the [Reusable Components](http://facebook.github.io/react/docs/reusable-components.html) section of the React documentation.
+`react-rails` ships with a Rails generator to help you get started with a simple component scaffold. 
+You can run it using `rails generate react:component ComponentName`. 
+The generator takes an optional list of arguments for default propTypes, 
+which follow the conventions set in the [Reusable Components](http://facebook.github.io/react/docs/reusable-components.html) 
+section of the React documentation.
 
 For example:
 
@@ -222,11 +265,13 @@ The following additional arguments have special behavior:
   * `oneOf` behaves like an enum, and takes an optional list of strings in the form of `'name:oneOf{one,two,three}'`.
   * `oneOfType` takes an optional list of react and custom types in the form of `'model:oneOfType{string,number,OtherType}'`.
 
-Note that the arguments for `oneOf` and `oneOfType` must be enclosed in single quotes to prevent your terminal from expanding them into an argument list.
+Note that the arguments for `oneOf` and `oneOfType` must be enclosed in single quotes
+ to prevent your terminal from expanding them into an argument list.
 
 ### Jbuilder & react-rails
 
-If you use Jbuilder to pass a JSON string to `react_component`, make sure your JSON is a stringified hash, not an array. This is not the Rails default -- you should add the root node yourself. For example:
+If you use Jbuilder to pass a JSON string to `react_component`, make sure your JSON is a stringified hash, 
+not an array. This is not the Rails default -- you should add the root node yourself. For example:
 
 ```ruby
 # BAD: returns a stringified array
@@ -244,7 +289,8 @@ end
 
 ## CoffeeScript
 
-It is possible to use JSX with CoffeeScript. We need to embed JSX inside backticks so CoffeeScript ignores the syntax it doesn't understand. Here's an example:
+It is possible to use JSX with CoffeeScript. We need to embed JSX inside backticks 
+so CoffeeScript ignores the syntax it doesn't understand. Here's an example:
 
 ```coffee
 Component = React.createClass

lib/react/jsx.rb

@@ -1,6 +1,7 @@
 require 'execjs'
 require 'react/jsx/template'
-require 'react/jsx/transformer'
+require 'react/jsx/jsx_transformer'
+require 'react/jsx/babel_transformer'
 require 'rails'
 
 module React
@@ -11,7 +12,7 @@ module JSX
     # to provide your own transformer. It must implement:
     # - #initialize(options)
     # - #transform(code) => new code
-    self.transformer_class = Transformer
+    self.transformer_class = BabelTransformer
 
     def self.transform(code)
       transformer.transform(code)

lib/react/jsx/babel_transformer.rb

@@ -0,0 +1,29 @@
+require 'babel/transpiler'
+module React
+  module JSX
+    class BabelTransformer
+      DEPRECATED_OPTIONS = [:harmony, :strip_types, :asset_path]
+
+      def initialize(options)
+        _options = options.dup
+        has_old_opts = DEPRECATED_OPTIONS.map do |option|
+          _options.delete option
+        end.any?
+
+        if has_old_opts
+          ActiveSupport::Deprecation.warn("Setting config.react.jsx_transform_options for :harmony, :strip_types, and :asset_path keys is now deprecated and has no effect with the default Babel Transformer."+
+                                              "Please use new Babel Transformer options :whitelist, :plugin instead.")
+        end
+
+        @transform_options = {
+            blacklist: ['spec.functionName', 'validation.react']
+        }.merge(_options)
+      end
+
+      def transform(code)
+        puts @transform_options
+        Babel::Transpiler.transform(code)['code']
+      end
+    end
+  end
+end

lib/react/jsx/transformer.rb renamed to lib/react/jsx/jsx_transformer.rb

@@ -1,6 +1,6 @@
 module React
   module JSX
-    class Transformer
+    class JSXTransformer
       DEFAULT_ASSET_PATH = 'JSXTransformer.js'
 
       def initialize(options)
@@ -30,4 +30,4 @@ def jsx_transform_code
       end
     end
   end
-end
+end

react-rails.gemspec

@@ -31,6 +31,7 @@ Gem::Specification.new do |s|
   s.add_dependency 'execjs'
   s.add_dependency 'rails', '>= 3.2'
   s.add_dependency 'tilt'
+  s.add_dependency 'babel-transpiler', '>=0.7.0'
 
   s.files = Dir[
     'lib/**/*',

test/generators/component_generator_test.rb

@@ -47,8 +47,8 @@ def filename
   end
 
   test "generates working jsx" do
-    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)')
+    expected_name_div = /React\.createElement\(\s*"div",\s*null,\s*\"Name:\s*\",\s*this\.props\.name\s*\)/x
+    expected_shape_div = /React\.createElement\(\s*"div",\s*null,\s*\"Address:\s*\",\s*this\.props\.address\s*\)/x
 
     run_generator %w(GeneratedComponent name:string address:shape)
     jsx = React::JSX.transform(File.read(File.join(destination_root, filename)))

test/react/jsx_test.rb

@@ -34,7 +34,7 @@ class JSXTransformTest < ActionDispatch::IntegrationTest
 
   teardown do
     clear_sprockets_cache
-    React::JSX.transformer_class = React::JSX::Transformer
+    React::JSX.transformer_class = React::JSX::JSXTransformer
     React::JSX.transform_options = {}
   end
 
@@ -89,6 +89,7 @@ class JSXTransformTest < ActionDispatch::IntegrationTest
     replacing_path =  custom_path.join("CustomTransformer.js")
 
     React::JSX.transform_options = {asset_path: "custom/CustomTransformer.js"}
+    React::JSX.transformer_class = React::JSX::JSXTransformer
 
     FileUtils.mkdir_p(custom_path)
     FileUtils.cp(hidden_path, replacing_path)