Fix asset reloading in development mode

The renderer was using a memoized class variable to cache the
concatinated react.js and components.js for server-side rendering. This
meant that when you updated a component, the server-rendered version would
not be refreshed.

Since #setup! is called every time a watched file is updated, it seems
like the natural place to reset the memozied string.

Author: xionon

lib/react/rails/railtie.rb

@@ -56,13 +56,15 @@ class Railtie < ::Rails::Railtie
       config.after_initialize do |app|
         # Server Rendering
         # Concat component_filenames together for server rendering
-        app.config.react.components_js = app.config.react.component_filenames.map do |filename|
-          app.assets[filename].to_s
-        end.join(";")
+        app.config.react.components_js = lambda {
+          app.config.react.component_filenames.map do |filename|
+            app.assets[filename].to_s
+          end.join(";")
+        }
 
         do_setup = lambda do
           cfg = app.config.react
-          React::Renderer.setup!( cfg.react_js.call, cfg.components_js,
+          React::Renderer.setup!( cfg.react_js.call, cfg.components_js.call,
                                 {:size => cfg.size, :timeout => cfg.timeout})
         end
 

lib/react/renderer.rb

@@ -10,6 +10,7 @@ def self.setup!(react_js, components_js, args={})
       @@react_js = react_js
       @@components_js = components_js
       @@pool.shutdown{} if @@pool
+      @@combined_js = nil if defined? @@combined_js
       @@pool = ConnectionPool.new(:size => args[:size]||10, :timeout => args[:timeout]||20) { self.new }
     end
 

test/helper_files/TodoListWithUpdates.js.jsx

@@ -0,0 +1,22 @@
+/** @jsx React.DOM */
+
+TodoList = React.createClass({
+  getInitialState: function() {
+    return({mounted: "nope"});
+  },
+  componentWillMount: function() {
+    this.setState({mounted: 'yep'});
+  },
+  render: function() {
+    return (
+      <ul>
+        <li>Updated</li>
+        <li id='status'>{this.state.mounted}</li>
+        {this.props.todos.map(function(todo, i) {
+          return (<Todo key={i} todo={todo} />)
+        })}
+      </ul>
+    )
+  }
+})
+

test/server_rendered_html_test.rb

@@ -0,0 +1,33 @@
+require 'test_helper'
+require 'fileutils'
+
+class ServerRenderedHtmlTest  < ActionDispatch::IntegrationTest
+  test 'react server rendering reloads jsx after changes to the jsx files' do
+    file_with_updates = File.expand_path('../helper_files/TodoListWithUpdates.js.jsx', __FILE__)
+    file_without_updates = File.expand_path('../helper_files/TodoListWithoutUpdates.js.jsx', __FILE__)
+    app_file = File.expand_path('../dummy/app/assets/javascripts/components/TodoList.js.jsx', __FILE__)
+
+    sleep(1)
+    FileUtils.cp app_file, file_without_updates
+    # fixes inconsistent test runs; phantomjs doesn't always see that the file was
+    # updated without manually calling #touch on it
+    FileUtils.touch app_file
+
+    begin
+      get '/server/1'
+      refute_match 'Updated', response.body
+
+      sleep(1)
+      FileUtils.cp file_with_updates, app_file
+      FileUtils.touch app_file
+
+      get '/server/1'
+      assert_match 'Updated', response.body
+    ensure
+      # if we have a test failure, we want to make sure that we revert the dummy file
+      sleep(1)
+      FileUtils.mv file_without_updates, app_file
+      FileUtils.touch app_file
+    end
+  end
+end