Merge pull request #691 from reactjs/fix-console-replay

Fix console replay

Author: rmosolgo

lib/react/rails/component_mount.rb

@@ -46,7 +46,15 @@ def react_component(name, props = {}, options = {}, &block)
         # remove internally used properties so they aren't rendered to DOM
         html_options.except!(:tag, :prerender, :camelize_props)
 
-        content_tag(html_tag, '', html_options, &block)
+        rendered_tag = content_tag(html_tag, '', html_options, &block)
+        if React::ServerRendering.renderer_options[:replay_console]
+          # Grab the server-rendered console replay script
+          # and move it _outside_ the container div
+          rendered_tag.sub!(/\n(<script class="react-rails-console-replay">.*<\/script>)<\/(\w+)>$/m,'</\2>\1')
+          rendered_tag.html_safe
+        else
+          rendered_tag
+        end
       end
 
       private

lib/react/server_rendering.rb

@@ -7,6 +7,8 @@ module ServerRendering
     mattr_accessor :renderer, :renderer_options,
       :pool_size, :pool_timeout
 
+    self.renderer_options = {}
+
     # Discard the old ConnectionPool & create a new one
     def self.reset_pool
       options = {size: pool_size, timeout: pool_timeout}

lib/react/server_rendering/bundle_renderer/console_replay.js

@@ -1,6 +1,6 @@
 (function (history) {
   if (history && history.length > 0) {
-    result += '\n<scr'+'ipt>';
+    result += '\n<scr'+'ipt class="react-rails-console-replay">';
     history.forEach(function (msg) {
       result += '\nconsole.' + msg.level + '.apply(console, ' + JSON.stringify(msg.arguments) + ');';
     });

test/dummy/app/javascript/components/TodoList.js

@@ -8,6 +8,7 @@ module.exports = React.createClass({
     this.setState({mounted: 'yep'});
   },
   render: function() {
+    console.log("Test Console Replay")
     return (
       <ul>
         <li id='status'>{this.state.mounted}</li>

test/dummy/config/application.rb

@@ -32,6 +32,10 @@ class Application < Rails::Application
     # config.i18n.default_locale = :de
     config.react.variant = :production
     config.react.addons = false
+    config.react.server_renderer_options = {
+      replay_console: true,
+    }
+
     if SprocketsHelpers.available?
       config.assets.enabled = true
     end

test/react/server_rendering/bundle_renderer_test.rb

@@ -49,7 +49,7 @@ class BundleRendererTest < ActiveSupport::TestCase
 
     test '#render replays console messages' do
       result = @renderer.render("TodoListWithConsoleLog", {todos: ["log some messages"]}, nil)
-      assert_match(/<script>$/, result)
+      assert_match(/<script class="react-rails-console-replay">$/, result)
       assert_match(/console.log.apply\(console, \["got initial state"\]\);$/, result)
       assert_match(/console.warn.apply\(console, \["mounted component"\]\);$/, result)
       assert_match(/console.error.apply\(console, \["rendered!","foo"\]\);$/, result)