Merge pull request #12 from jakubmal/feature/react-dropin

Allow users to override react.js and transformer.js for assets and engine

Author: zpao

README.md

@@ -17,15 +17,14 @@ As with all gem dependencies, we strongly recommend adding `react-rails` to your
 ```ruby
 # Gemfile
 
-gem 'react-rails', '~> 0.8.0.0'
+gem 'react-rails', '~> 1.0.0'
 ```
 
-
 ## Usage
 
 ### react.js
 
-In order to use React client-side in your application, you must make sure the browser requests it. One way to do that is to drop `react.js` into `app/assets/javascript/` and by default your application manifest will pick it up. There are downsides to this approach, so we made it even easier. Once you have `react-rails` installed, you can just add a line into your config file (see Configuring) and require react directly in your manifest:
+In order to use React client-side in your application, you must make sure the browser requests it. One way to do that is to drop `react.js` into `vendor/assets/javascript/` and by default your application manifest will pick it up. There are downsides to this approach, so we made it even easier. Once you have `react-rails` installed, you can just add a line into your config file (see Configuring) and require react directly in your manifest:
 
 You can `require` it in your manifest:
 
@@ -129,3 +128,20 @@ Component = React.createClass
     `<ExampleComponent videos={this.props.videos} />`
 ```
 
+### Changing react.js and JSXTransformer.js versions
+
+In some cases you may want to have your `react.js` and `JSXTransformer.js` files come from a different release than the one, that is specified in the `react-rails.gemspec`. To achieve that, you have to manually replace them in your app.
+
+#### Instructions
+
+Just put another version of `react.js` or `JSXTransformer.js` under `/vendor/assets/react` directory.
+If you need different versions of `react.js` for production and development, then use a subdirectory named
+after `config.react.variant`, e.g. you set `config.react.variant = :development` so for this environment
+`react.js` is expected to be in `/vendor/assets/react/development`
+
+#### Things to remember
+
+If you replace `JSXTransformer.js` in production environment, you have to restart your rails instance,
+because the jsx compiler context is cached.
+
+Name of the `JSXTransformer.js` file *is case-sensitive*.

lib/react/jsx.rb

@@ -1,17 +1,26 @@
 require 'execjs'
 require 'react/source'
 require 'react/jsx/template'
+require 'rails'
 
 module React
   module JSX
     def self.context
-      # TODO: create React::Source::contents_for
-      contents =
-        # If execjs uses therubyracer, there is no 'global'. Make sure
-        # we have it so JSX script can work properly.
-        'var global = global || this;' +
-        File.read(React::Source.bundled_path_for('JSXTransformer.js'))
-      @context ||= ExecJS.compile(contents)
+      # lazily loaded during first request and reloaded every time when in dev or test
+      unless @context && ::Rails.env.production?
+        contents =
+          # If execjs uses therubyracer, there is no 'global'. Make sure
+          # we have it so JSX script can work properly.
+          'var global = global || this;' +
+
+          # search for transformer file using sprockets - allows user to override
+          # this file in his own application
+          File.read(::Rails.application.assets.resolve('JSXTransformer.js'))
+
+        @context = ExecJS.compile(contents)
+      end
+
+      @context
     end
 
     def self.transform(code)

lib/react/jsx/template.rb

@@ -9,7 +9,7 @@ class Template < Tilt::Template
       def prepare
       end
 
-      def evaluate(scopre, locals, &block)
+      def evaluate(scope, locals, &block)
         @output ||= JSX::transform(data)
       end
     end

lib/react/rails/engine.rb

@@ -1,7 +1,7 @@
 module React
   module Rails
     class Engine < ::Rails::Engine
-      initializer "react_rails.setup_engine", :after => "sprockets.environment", :group => :all do |app|
+      initializer "react_rails.setup_engine", :group => :all do |app|
         app.assets.register_engine '.jsx', React::JSX::Template
       end
     end

lib/react/rails/railtie.rb

@@ -5,9 +5,9 @@ module Rails
     class Railtie < ::Rails::Railtie
       config.react = ActiveSupport::OrderedOptions.new
 
-      initializer "react_rails.setup_vendor", :after => "sprockets.environment" do |app|
-        variant = app.config.react.variant
-
+      # run after all initializers to allow sprockets to pick up react.js and
+      # jsxtransformer.js from end-user to override ours if needed
+      config.after_initialize do |app|
         # Mimic behavior of ember-rails...
         # We want to include different files in dev/prod. The unminified builds
         # contain console logging for invariants and logging to help catch
@@ -26,9 +26,17 @@ class Railtie < ::Rails::Railtie
                        tmp_path.join('react.js'))
           FileUtils.cp(::React::Source.bundled_path_for('JSXTransformer.js'),
                        tmp_path.join('JSXTransformer.js'))
+          app.assets.prepend_path tmp_path
+
+          # Allow overriding react files that are not based on environment
+          # e.g. /vendor/assets/react/JSXTransformer.js
+          dropin_path = app.root.join("vendor/assets/react")
+          app.assets.prepend_path dropin_path if dropin_path.exist?
 
-          # Make sure it can be found
-          app.assets.append_path(tmp_path)
+          # Allow overriding react files that are based on environment
+          # e.g. /vendor/assets/react/react.js
+          dropin_path_env = app.root.join("vendor/assets/react/#{variant}")
+          app.assets.prepend_path dropin_path_env if dropin_path_env.exist?
         end
       end
     end

lib/react/rails/version.rb

@@ -2,7 +2,6 @@ module React
   module Rails
     # Version numbers will track react-source, but we'll add another level so
     # that we can increment, but have some amount of stability.
-    VERSION = '0.8.0.0'
+    VERSION = '1.0.0.beta1'
   end
 end
-

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

@@ -0,0 +1,2 @@
+/** @jsx React.DOM */
+<div/>;

test/dummy/config/environments/test.rb

@@ -5,7 +5,11 @@
   # test suite. You never need to work with it otherwise. Remember that
   # your test database is "scratch space" for the test suite and is wiped
   # and recreated between test runs. Don't rely on the data there!
-  config.cache_classes = true
+
+  # we need this to reload the jsx transformer when different version is dropped in
+  config.cache_classes = false
+  config.reload_plugins = true
+  config.assets.cache_store = :null_store
 
   # Do not eager load code on boot. This avoids loading your whole application
   # just for the purpose of running a single test. If you are using a tool that
@@ -33,4 +37,6 @@
 
   # Print deprecation notices to the stderr.
   config.active_support.deprecation = :stderr
+
+  config.react.variant = :test
 end

test/dummy/vendor/assets/react/JSXTransformer__.js

@@ -0,0 +1,7 @@
+var JSXTransformer = {
+  transform: function () {
+    return {
+      code: 'test_confirmation_token_jsx_transformed;'
+    };
+  }
+};

test/dummy/vendor/assets/react/test/react__.js

@@ -0,0 +1 @@
+'test_confirmation_token_react_content';

test/jsxtransform_test.rb

@@ -1,6 +1,7 @@
 require 'test_helper'
+require 'fileutils'
 
-# The transformer is inserting a newline after the docblock for some reason...
+# Sprockets is inserting a newline after the docblock for some reason...
 EXPECTED_JS = <<eos
 /** @jsx React.DOM */
 
@@ -26,6 +27,7 @@ class JSXTransformTest < ActionDispatch::IntegrationTest
 
   test 'asset pipeline should transform JSX' do
     get 'assets/example.js'
+    FileUtils.rm_r CACHE_PATH if CACHE_PATH.exist?
     assert_response :success
     assert_equal EXPECTED_JS, @response.body
   end
@@ -42,4 +44,17 @@ 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
+    hidden_path = File.expand_path("../dummy/vendor/assets/react/JSXTransformer__.js",  __FILE__)
+    replacing_path = File.expand_path("../dummy/vendor/assets/react/JSXTransformer.js",  __FILE__)
+
+    FileUtils.mv hidden_path, replacing_path
+    get 'assets/example3.js'
+
+    FileUtils.mv replacing_path, hidden_path
+    FileUtils.rm_r CACHE_PATH if CACHE_PATH.exist?
+
+    assert_response :success
+    assert_equal 'test_confirmation_token_jsx_transformed;', @response.body
+  end
 end

test/react_test.rb

@@ -0,0 +1,36 @@
+require 'test_helper'
+require 'fileutils'
+
+class ReactTest < ActionDispatch::IntegrationTest
+
+  test 'asset pipeline should deliver react file in a non-production variant' do
+    actual_react_file_path = File.expand_path("../dummy/tmp/react-rails/react.js",  __FILE__)
+    actual_react_file_content = File.read actual_react_file_path
+
+    react_file_token = "'test_confirmation_token_react_content_non_production';\n";
+    File.open(actual_react_file_path, 'w') {|f| f.write react_file_token}
+
+    get 'assets/react.js'
+
+    File.open(actual_react_file_path, 'w') {|f| f.write actual_react_file_content}
+    FileUtils.rm_r CACHE_PATH if CACHE_PATH.exist?
+
+    assert_response :success
+    assert_equal react_file_token, @response.body
+  end
+
+  test 'asset pipeline should deliver drop-in react file replacement' do
+    hidden_path = File.expand_path("../dummy/vendor/assets/react/test/react__.js",  __FILE__)
+    replacing_path = File.expand_path("../dummy/vendor/assets/react/test/react.js",  __FILE__)
+
+    FileUtils.mv hidden_path, replacing_path
+    get 'assets/react.js'
+
+    FileUtils.mv replacing_path, hidden_path
+    FileUtils.rm_r CACHE_PATH if CACHE_PATH.exist?
+
+    assert_response :success
+    assert_equal "'test_confirmation_token_react_content';\n", @response.body
+  end
+
+end

test/test_helper.rb

@@ -3,6 +3,9 @@
 
 require File.expand_path("../dummy/config/environment.rb",  __FILE__)
 require "rails/test_help"
+require "pathname"
+
+CACHE_PATH = Pathname.new File.expand_path("../dummy/tmp/cache",  __FILE__)
 
 Rails.backtrace_cleaner.remove_silencers!