Merge pull request #136 from rmosolgo/harmony-option

feat(React::JSX): add JSX.transform_options

Author: zpao

README.md

@@ -68,6 +68,14 @@ Component = React.createClass
     `<ExampleComponent videos={this.props.videos} />`
 ```
 
+You can use the `--harmony` or `--strip-types` options by adding a configuration to `application.rb`:
+
+```ruby
+  config.react.jsx_transform_options = {
+      harmony: true,
+      strip_types: true, # for removing Flow type annotations
+    }
+```
 
 ### Unobtrusive JavaScript
 

lib/react/jsx.rb

@@ -5,6 +5,8 @@
 
 module React
   module JSX
+    mattr_accessor :transform_options
+
     def self.context
       # lazily loaded during first request and reloaded every time when in dev or test
       unless @context && ::Rails.env.production?
@@ -23,8 +25,12 @@ def self.context
       @context
     end
 
-    def self.transform(code)
-      result = context.call('JSXTransformer.transform', code)
+    def self.transform(code, options={})
+      js_options = {
+        stripTypes: options[:strip_types],
+        harmony: options[:harmony],
+      }
+      result = context.call('JSXTransformer.transform', code, js_options)
       return result['code']
     end
   end

lib/react/jsx/template.rb

@@ -10,7 +10,7 @@ def prepare
       end
 
       def evaluate(scope, locals, &block)
-        @output ||= JSX::transform(data)
+        @output ||= JSX::transform(data, JSX.transform_options)
       end
     end
   end

lib/react/rails/railtie.rb

@@ -8,6 +8,7 @@ class Railtie < ::Rails::Railtie
       # Sensible defaults. Can be overridden in application.rb
       config.react.variant = (::Rails.env.production? ? :production : :development)
       config.react.addons = false
+      config.react.jsx_transform_options = {}
       # Server-side rendering
       config.react.max_renderers = 10
       config.react.timeout = 20 #seconds
@@ -20,7 +21,8 @@ class Railtie < ::Rails::Railtie
       end
 
       # Include the react-rails view helper lazily
-      initializer "react_rails.setup_view_helpers" do
+      initializer "react_rails.setup_view_helpers" do |app|
+        React::JSX.transform_options = app.config.react.jsx_transform_options
         ActiveSupport.on_load(:action_view) do
           include ::React::Rails::ViewHelper
         end

test/dummy/app/assets/javascripts/application.js

@@ -17,4 +17,5 @@
 //= require es5-shim/es5-shim
 //= require react
 //= require react_ujs
-//= require_tree .
+//= require_tree ./components
+//= require ./pages

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

@@ -0,0 +1,3 @@
+function flowTypesExample(i: number, name: string): string {
+  return "OK"
+}

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

@@ -0,0 +1,17 @@
+var HarmonyComponent = React.createClass({
+  statics: {
+    generateGreeting() {
+      return "Hello Harmony!"
+    },
+    generateGreetingWithWrapper() {
+      var insertedGreeting = this.generateGreeting();
+      return `Your greeting is: '${insertedGreeting}'.`
+    },
+  },
+  render: function(){
+    var greeting = HarmonyComponent.generateGreeting();
+    return (
+      <h1 {...this.props}>{greeting}</h1>
+      )
+  },
+});

test/jsxtransform_test.rb

@@ -38,7 +38,7 @@ class JSXTransformTest < ActionDispatch::IntegrationTest
     assert_equal EXPECTED_JS_2.gsub(/\s/, ''), @response.body.gsub(/\s/, '')
   end
 
-  test 'can use dropped in version of JSX transformer' do
+  test 'can use dropped-in version of JSX transformer' do
     hidden_path = File.expand_path("../dummy/vendor/assets/react/JSXTransformer__.js",  __FILE__)
     replacing_path = File.expand_path("../dummy/vendor/assets/react/JSXTransformer.js",  __FILE__)
 
@@ -51,4 +51,20 @@ class JSXTransformTest < ActionDispatch::IntegrationTest
     assert_response :success
     assert_equal 'test_confirmation_token_jsx_transformed;', @response.body
   end
+
+  test 'accepts harmony: true option' do
+    React::JSX.transform_options = {harmony: true}
+    get '/assets/harmony_example.js'
+    assert_response :success
+    assert_match(/generateGreeting:\s*function\(\)/, @response.body, "object literal methods")
+    assert_match(/React.__spread/, @response.body, "spreading props")
+    assert_match(/Your greeting is: '" \+ insertedGreeting \+ "'/, @response.body, "string interpolation")
+  end
+
+  test 'accepts strip_types: true option' do
+    React::JSX.transform_options = {strip_types: true, harmony: true}
+    get '/assets/flow_types_example.js'
+    assert_response :success
+    assert_match(/\(i\s*,\s*name\s*\)\s*\{/, @response.body, "type annotations are removed")
+  end
 end