feat(ServerRendering) support per-request renderers

Author: rmosolgo

lib/react/rails/component_mount.rb

@@ -11,12 +11,16 @@ class ComponentMount
       attr_accessor :output_buffer
       mattr_accessor :camelize_props_switch
 
-      # ControllerLifecycle calls these hooks
+      # {ControllerLifecycle} calls these hooks
       # You can use them in custom helper implementations
-      def setup(env)
+      def setup(controller)
+        @controller = controller
       end
 
-      def teardown(env)
+      def teardown(controller)
+        if controller.__prerenderer
+          React::ServerRendering.checkin_renderer(controller.__prerenderer)
+        end
       end
 
       # Render a UJS-type HTML tag annotated with data attributes, which
@@ -30,7 +34,7 @@ def react_component(name, props = {}, options = {}, &block)
 
         prerender_options = options[:prerender]
         if prerender_options
-          block = Proc.new{ concat React::ServerRendering.render(name, props, prerender_options) }
+          block = Proc.new{ concat(prerender_component(name, props, prerender_options)) }
         end
 
         html_options = options.reverse_merge(:data => {})
@@ -47,6 +51,30 @@ def react_component(name, props = {}, options = {}, &block)
 
         content_tag(html_tag, '', html_options, &block)
       end
+
+      module ControllerHelpers
+        extend ActiveSupport::Concern
+
+        included do
+          # An instance of a server renderer, for use during this request
+          attr_accessor :__prerenderer
+        end
+
+        # If you want a per-request renderer, add this method as a before-action
+        #
+        # @example Having one renderer instance for each controller action
+        #   before_action :checkout_renderer
+        def checkout_prerenderer
+          self.__prerenderer = React::ServerRendering.checkout_renderer
+        end
+      end
+
+      private
+
+      def prerender_component(component_name, props, prerender_options)
+        renderer = @controller.try(:__prerenderer) || React::ServerRendering
+        renderer.render(component_name, props, prerender_options)
+      end
     end
   end
 end

lib/react/rails/controller_lifecycle.rb

@@ -1,5 +1,7 @@
 module React
   module Rails
+    # This module is included into ActionController so that
+    # per-request hooks can be called in the view helper.
     module ControllerLifecycle
       extend ActiveSupport::Concern
 
@@ -12,12 +14,14 @@ module ControllerLifecycle
         attr_reader :__react_component_helper
       end
 
+      # Instantiate the ViewHelper implementation and call its #setup method
       def setup_react_component_helper
         new_helper = React::Rails::ViewHelper.helper_implementation_class.new
         new_helper.setup(self)
         @__react_component_helper = new_helper
       end
 
+      # Call the ViewHelper implementation's #teardown method
       def teardown_react_component_helper
         @__react_component_helper.teardown(self)
       end

lib/react/rails/railtie.rb

@@ -37,6 +37,7 @@ class Railtie < ::Rails::Railtie
 
         ActiveSupport.on_load(:action_controller) do
           include ::React::Rails::ControllerLifecycle
+          include ::React::Rails::ComponentMount::ControllerHelpers
         end
 
         ActiveSupport.on_load(:action_view) do

lib/react/server_rendering.rb

@@ -7,19 +7,26 @@ module ServerRendering
     mattr_accessor :renderer, :renderer_options,
       :pool_size, :pool_timeout
 
+    # Discard the old ConnectionPool & create a new one
     def self.reset_pool
       options = {size: pool_size, timeout: pool_timeout}
-      @@pool = ConnectionPool.new(options) { create_renderer }
+      @@pool = ConnectionPool.new(options) { self.renderer.new(self.renderer_options) }
     end
 
+    # Check a renderer out of the pool and use it to render the component.
+    # @return [String] Prerendered HTML from `component_name`
     def self.render(component_name, props, prerender_options)
       @@pool.with do |renderer|
         renderer.render(component_name, props, prerender_options)
       end
     end
 
-    def self.create_renderer
-      renderer.new(renderer_options)
+    def self.checkout_renderer
+      @@pool.checkout
+    end
+
+    def self.checkin_renderer(renderer)
+      @@pool.checkin
     end
 
     class PrerenderError < RuntimeError
@@ -30,4 +37,4 @@ def initialize(component_name, props, js_message)
       end
     end
   end
-end
+end

lib/react/server_rendering/exec_js_renderer.rb

@@ -5,6 +5,9 @@ module ServerRendering
     # - No Rails dependency
     # - No browser concerns
     class ExecJSRenderer
+      # @return [ExecJS::Runtime::Context] The JS context for this renderer
+      attr_reader :context
+
       def initialize(options={})
         js_code = options[:code] || raise("Pass `code:` option to instantiate a JS context!")
         @context = ExecJS.compile(GLOBAL_WRAPPER + js_code)

test/dummy/app/controllers/server_controller.rb

@@ -4,14 +4,6 @@ def show
   end
 
   def console_example
-    React::ServerRendering.renderer_options = {replay_console:  true}
-    React::ServerRendering.reset_pool
-    @todos = %w{todo1 todo2 todo3}
-  end
-
-  def console_example_suppressed
-    React::ServerRendering.renderer_options = {replay_console:  false}
-    React::ServerRendering.reset_pool
     @todos = %w{todo1 todo2 todo3}
   end
 

test/dummy/config/routes.rb

@@ -3,7 +3,6 @@
   resources :server, only: [:show] do
     collection do
       get :console_example
-      get :console_example_suppressed
       get :inline_component
     end
   end

test/react/rails/component_mount_test.rb

@@ -72,5 +72,23 @@ class ComponentMountTest < ActionDispatch::IntegrationTest
       assert html.include?('class="test"')
       assert html.include?('data-foo="1"')
     end
+
+    module DummyRenderer
+      def self.render(component_name, props, prerender_options)
+        "rendered #{component_name} with #{props.to_json}"
+      end
+    end
+
+    module DummyController
+      def self.__prerenderer
+        DummyRenderer
+      end
+    end
+
+    test "it uses the controller's __prerenderer, if available" do
+      @helper.setup(DummyController)
+      rendered_component = @helper.react_component('Foo', {"ok" => true}, prerender: :static)
+      assert_equal %|<div>rendered Foo with {&quot;ok&quot;:true}</div>|, rendered_component
+    end
   end
 end

test/react/server_rendering_test.rb

@@ -26,15 +26,6 @@ class ReactServerRenderingTest < ActiveSupport::TestCase
     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, "prerender-opts")
@@ -53,4 +44,4 @@ class ReactServerRenderingTest < ActiveSupport::TestCase
     assert_match(/^DIFFERENT/, React::ServerRendering.render(nil, nil, nil))
     assert_match(/^DIFFERENT/, React::ServerRendering.render(nil, nil, nil))
   end
-end
+end

test/server_rendered_html_test.rb

@@ -39,14 +39,19 @@ def wait_to_ensure_asset_pipeline_detects_changes
 
     test 'react server rendering shows console output as html comment' do
       # Make sure console messages are replayed when requested
+      React::ServerRendering.renderer_options = {replay_console: true}
+      React::ServerRendering.reset_pool
       get '/server/console_example'
       assert_match(/Console Logged/, response.body)
       assert_match(/console.log.apply\(console, \["got initial state"\]\)/, response.body)
       assert_match(/console.warn.apply\(console, \["mounted component"\]\)/, response.body)
       assert_match(/console.error.apply\(console, \["rendered!","foo"\]\)/, response.body)
 
       # Make sure they're not when we don't ask for them
-      get '/server/console_example_suppressed'
+      React::ServerRendering.renderer_options = {replay_console: false}
+      React::ServerRendering.reset_pool
+
+      get '/server/console_example'
       assert_match(/Console Logged/, response.body)
       assert_no_match(/console.log/, response.body)
       assert_no_match(/console.warn/, response.body)