Add React.js

Converts one simple view to React. Remaining .erb views will be converted in a
subsequent commit.

Includes a polyfill for `Function.prototype.bind` in Poltergeist/PhantomJS
(apparently it will be addressed in PhantomJS v2.0).

Source: ariya/phantomjs#10522.

Gemfile

@@ -7,6 +7,7 @@ gem 'httparty'
 gem 'jbuilder', '~> 2.0'
 gem 'jquery-rails'
 gem 'rails', '4.2.1'
+gem 'react-rails', '~> 1.0'
 gem 'sqlite3'
 gem 'sdoc', '~> 0.4.0', group: :doc
 gem 'turbolinks'

Gemfile.lock

@@ -80,6 +80,7 @@ GEM
       execjs
       json
     columnize (0.9.0)
+    connection_pool (2.2.0)
     database_cleaner (1.2.0)
     debug_inspector (0.0.2)
     devise (3.4.1)
@@ -191,6 +192,13 @@ GEM
     rake (10.4.2)
     rdoc (4.2.0)
       json (~> 1.4)
+    react-rails (1.0.0)
+      coffee-script-source (~> 1.8)
+      connection_pool
+      execjs
+      rails (>= 3.1)
+      react-source (~> 0.13)
+    react-source (0.13.3)
     responders (2.1.0)
       railties (>= 4.2.0, < 5)
     rspec (2.14.1)
@@ -304,6 +312,7 @@ DEPENDENCIES
   quiet_assets
   rails (= 4.2.1)
   rails_12factor
+  react-rails (~> 1.0)
   rspec-instafail
   rspec-rails
   rubocop

app/assets/javascripts/application.js

@@ -13,4 +13,7 @@
 //= require jquery
 //= require jquery_ujs
 //= require turbolinks
+//= require react
+//= require react_ujs
+//= require components
 //= require_tree .

app/assets/javascripts/components.js

@@ -0,0 +1 @@
+//= require_tree ./components

app/assets/javascripts/components/teams/index.js.jsx.coffee

@@ -0,0 +1,11 @@
+@Team = React.createClass
+  render: ->
+    `<h3>{this.props.name}</h3>`
+
+@TeamsIndex = React.createClass
+  render: ->
+    teams = this.props.teams.map (team, i) -> `<Team key={i} name={team.name} />`
+    `<div>
+      <h2>Teams</h2>
+      {teams}
+     </div>`

app/views/home/show.html.erb

@@ -2,8 +2,3 @@
 
 <%= link_to('New League', new_league_path) %>
 <%= link_to('View Existing Leagues', leagues_path) %>
-
-<script type="text/javascript">
-  pTag = $('<p>').text('Injected via JS.')
-  $('body').append(pTag)
-</script>

app/views/teams/index.html.erb

@@ -1,4 +1 @@
-<h2>Teams</h2>
-<% @teams.each do |team| %>
-  <h3><%= team.name %></h3>
-<% end %>
+<%= react_component('TeamsIndex', render(template: 'teams/index.json.jbuilder')) %>

app/views/teams/index.json.jbuilder

@@ -0,0 +1,3 @@
+json.teams(@teams) do |team|
+  json.name team.name
+end

config/environments/development.rb

@@ -40,4 +40,7 @@
   # config.action_view.raise_on_missing_translations = true
 
   config.action_mailer.default_url_options = { host: ENV.fetch('APP_NAME', 'localhost:3000') }
+
+  # Which React.js build (development, production, with or without add-ons) to serve
+  config.react.variant = :development
 end

config/environments/production.rb

@@ -78,4 +78,7 @@
 
   # Do not dump schema after migrations.
   config.active_record.dump_schema_after_migration = false
+
+  # Which React.js build (development, production, with or without add-ons) to serve
+  config.react.variant = :production
 end

config/environments/test.rb

@@ -41,4 +41,7 @@
   # config.action_view.raise_on_missing_translations = true
 
   config.action_mailer.default_url_options = { host: ENV.fetch('APP_NAME', 'localhost:3000') }
+
+  # Which React.js build (development, production, with or without add-ons) to serve
+  config.react.variant = :development
 end

lib/tasks/coffeelint.rake

@@ -9,6 +9,7 @@ task :coffeelint do
       level: 'error',
       value: 99
     },
+    no_backticks: { level: 'ignore' },
     no_empty_param_list: { level: 'error' },
     prefer_english_operator: { level: 'error' }
   }

spec/features/user_creates_team_in_league_spec.rb

@@ -33,7 +33,7 @@
     expect(page).to have_no_link 'New Team'
   end
 
-  scenario 'can view a list of teams' do
+  scenario 'can view a list of teams', js: true do
     @first_owner_team = create(:team, league: @league,  user: @first_owner)
     @second_owner = create(:user)
     @second_owner_team = create(:team, league: @league,  user: @second_owner)

spec/support/capybara.rb

@@ -4,7 +4,10 @@
 require 'capybara-screenshot/rspec'
 
 Capybara.register_driver :poltergeist do |app|
-  Capybara::Poltergeist::Driver.new(app, timeout: 10_000)
+  Capybara::Poltergeist::Driver.new(
+    app,
+    extensions: ['vendor/assets/javascripts/poltergeist/bind_polyfill.js']
+  )
 end
 
 Capybara.javascript_driver = :poltergeist

vendor/assets/javascripts/poltergeist/bind_polyfill.js

@@ -0,0 +1,27 @@
+// https://gist.github.com/jacomyal/4b7ae101a1cf6b985c60
+if (!Function.prototype.bind) {
+  Function.prototype.bind = function(oThis) {
+    if (typeof this !== 'function') {
+      // closest thing possible to the ECMAScript 5
+      // internal IsCallable function
+      throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
+    }
+
+    var aArgs   = Array.prototype.slice.call(arguments, 1),
+        fToBind = this,
+        fNOP    = function() {},
+        fBound  = function() {
+          return fToBind.apply(this instanceof fNOP && oThis
+                 ? this
+                 : oThis,
+                 aArgs.concat(Array.prototype.slice.call(arguments)));
+        };
+
+    // test this.prototype in case of native functions binding:
+    if (this.prototype)
+      fNOP.prototype = this.prototype;
+    fBound.prototype = new fNOP();
+
+    return fBound;
+  };
+}