feat(ServerRendering) add ServerRendering and SprocketsRenderer

Author: rmosolgo

Guardfile

@@ -0,0 +1,6 @@
+guard :minitest do
+  # with Minitest::Unit
+  watch(%r{^test/(.*)\/?(.*)_test\.rb$})
+  watch(%r{^lib/(.*/)?([^/]+)\.rb$})     { |m| "test/#{m[1]}#{m[2]}_test.rb" }
+  watch(%r{^test/test_helper\.rb$})      { 'test' }
+end

lib/react-rails.rb

@@ -2,4 +2,5 @@
 require 'react/renderer'
 require 'react/rails'
 require 'react/console'
+require 'react/server_rendering'
 

lib/react/server_rendering.rb

@@ -0,0 +1,27 @@
+require 'connection_pool'
+require 'react/server_rendering/sprockets_renderer'
+
+module React
+  module ServerRendering
+    mattr_accessor :renderer, :renderer_options,
+      :pool_size, :pool_timeout
+
+    self.pool_size = 10
+    self.pool_timeout = 20
+
+    def self.reset_pool
+      options = {size: pool_size, timeout: pool_timeout}
+      @@pool = ConnectionPool.new(options) { create_renderer }
+    end
+
+    def self.render(component_name, props)
+      @@pool.with do |renderer|
+        renderer.render(component_name, props)
+      end
+    end
+
+    def self.create_renderer
+      renderer.new(renderer_options)
+    end
+  end
+end

lib/react/server_rendering/sprockets_renderer.rb

@@ -0,0 +1,46 @@
+module React
+  module ServerRendering
+    class SprocketsRenderer
+      def initialize(options={})
+        filenames = options.fetch(:setup, ["react.js", "components.js"])
+        @replay_console = options.fetch(:replay_console, true)
+
+        js_code = SetupJavascript.new(filenames).to_s
+        @context = ExecJS.compile(js_code)
+      end
+
+      def render(component_name, props)
+        if !props.is_a?(String)
+          props = props.to_json
+        end
+        js_code = <<-JS
+          (function () {
+            var result = React.renderToString(React.createElement(#{component_name}, #{props}));
+            return result;
+          })()
+        JS
+        @context.eval(js_code).html_safe
+      # handle error
+      end
+
+      class SetupJavascript
+        GLOBAL_WRAPPER = <<-JS
+        var global = global || this;
+        var self = self || this;
+        var window = window || this;
+        JS
+        def initialize(filenames)
+          js_code = ""
+          filenames.each do |filename|
+            js_code << ::Rails.application.assets[filename].to_s
+          end
+          @wrapped_code = GLOBAL_WRAPPER + js_code
+        end
+
+        def to_s
+          @wrapped_code
+        end
+      end
+    end
+  end
+end

react-rails.gemspec

@@ -18,6 +18,8 @@ Gem::Specification.new do |s|
   s.add_development_dependency 'bundler', '>= 1.2.2'
   s.add_development_dependency 'coffee-rails'
   s.add_development_dependency 'es5-shim-rails', '>= 2.0.5'
+  s.add_development_dependency 'guard'
+  s.add_development_dependency 'guard-minitest'
   s.add_development_dependency 'jbuilder'
   s.add_development_dependency 'poltergeist', '>= 0.3.3'
   s.add_development_dependency 'test-unit', '~> 2.5'

test/react/server_rendering/sprockets_renderer_test.rb

@@ -0,0 +1,13 @@
+require 'test_helper'
+
+class SprocketsRendererTest < ActiveSupport::TestCase
+  setup do
+    @renderer = React::ServerRendering::SprocketsRenderer.new({})
+  end
+
+  test '#render returns HTML' do
+    result = @renderer.render("Todo", {todo: "write tests"})
+    # skip reactid & checksum:
+    assert_match(/<li.*write tests<\/li>/, result)
+  end
+end

test/react/server_rendering_test.rb

@@ -0,0 +1,48 @@
+require 'test_helper'
+
+class NullRenderer
+  def initialize(options)
+    # in this case, options is actually a string (just for testing)
+    @name = options
+  end
+
+  def render(component_name, props)
+    "#{@name} rendered #{component_name} with #{props}"
+  end
+end
+
+class ReactServerRenderingTest < ActiveSupport::TestCase
+  setup do
+    React::ServerRendering.renderer_options = "TEST"
+    React::ServerRendering.renderer = NullRenderer
+    React::ServerRendering.reset_pool
+  end
+
+  test '.create_renderer makes a renderer with initialization options' do
+    mock_renderer = MiniTest::Mock.new
+    mock_renderer.expect(:new, :fake_renderer, [{mock: true}])
+    React::ServerRendering.renderer = mock_renderer
+    React::ServerRendering.renderer_options = {mock: true}
+    renderer = React::ServerRendering.create_renderer
+    assert_equal(:fake_renderer, renderer)
+  end
+
+  test '.render returns a rendered string' do
+    props = {"props" => true}
+    result = React::ServerRendering.render("MyComponent", props)
+    assert_equal("TEST rendered MyComponent with #{props}", result)
+  end
+
+  test '.reset_pool forgets old renderers' do
+    # At first, they use the first options:
+    assert_match(/^TEST/, React::ServerRendering.render(nil, nil))
+    assert_match(/^TEST/, React::ServerRendering.render(nil, nil))
+
+    # Then change the init options and clear the pool:
+    React::ServerRendering.renderer_options = "DIFFERENT"
+    React::ServerRendering.reset_pool
+    # New renderers are created with the new init options:
+    assert_match(/^DIFFERENT/, React::ServerRendering.render(nil, nil))
+    assert_match(/^DIFFERENT/, React::ServerRendering.render(nil, nil))
+  end
+end