Merge pull request #559 from reactjs/per-request-js-ctx

feat(ServerRendering) support per-request renderers

Author: rmosolgo

Appraisals

@@ -44,15 +44,25 @@ appraise "rails-4.2-sprockets_4" do
   gem "sprockets", "~> 4.0.x"
   gem "turbolinks", "~> 2.5.0"
   gem "webpacker", github: "rails/webpacker"
+  # This ExecJS backend provides stateful context
+  # which the default nodejs backend does not
+  gem "mini_racer"
 end
 
 appraise "rails-5" do
   gem 'rails', '~> 5.0.0'
   gem "turbolinks", "~> 5.0.0"
   gem "webpacker", github: "rails/webpacker"
+  # This ExecJS backend provides stateful context
+  # which the default nodejs backend does not
+  gem "therubyracer"
 end
 
 appraise "rails-5-no_sprockets" do
+  # Appraisal adds `turbolinks` to this gemfile because it is
+  # present in `./Gemfile`.
+  # But it causes this gemfile to break, so it must be removed
+  # from `./gemfiles/rails_5_no_sprockets.gemfile` manually.
   gem 'rails', '~> 5.0.0'
 end
 

gemfiles/rails_4.2_sprockets_4.gemfile

@@ -6,5 +6,6 @@ gem "rails", "~> 4.2.1"
 gem "sprockets", "~> 4.0.x"
 gem "turbolinks", "~> 2.5.0"
 gem "webpacker", :github => "rails/webpacker"
+gem "mini_racer"
 
 gemspec :path => "../"

gemfiles/rails_5.gemfile

@@ -5,5 +5,6 @@ source "http://rubygems.org"
 gem "rails", "~> 5.0.0"
 gem "turbolinks", "~> 5.0.0"
 gem "webpacker", :github => "rails/webpacker"
+gem "therubyracer"
 
 gemspec :path => "../"

gemfiles/rails_5_no_sprockets.gemfile

@@ -1,4 +1,5 @@
 # This file was generated by Appraisal
+# This shouldn't have turbolinks or sprockets
 
 source "http://rubygems.org"
 

lib/react/rails/component_mount.rb

@@ -11,12 +11,13 @@ 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)
       end
 
       # Render a UJS-type HTML tag annotated with data attributes, which
@@ -30,7 +31,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 +48,15 @@ def react_component(name, props = {}, options = {}, &block)
 
         content_tag(html_tag, '', html_options, &block)
       end
+
+      private
+
+      # If this controller has checked out a renderer, use that one.
+      # Otherwise, use {React::ServerRendering} directly (which will check one out for this rendering).
+      def prerender_component(component_name, props, prerender_options)
+        renderer = @controller.try(:react_rails_prerenderer) || React::ServerRendering
+        renderer.render(component_name, props, prerender_options)
+      end
     end
   end
 end

lib/react/rails/controller_lifecycle.rb

@@ -1,25 +1,53 @@
 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
 
       included do
         # use both names to support Rails 3..5
-        before_action_with_fallback = respond_to?(:before_action) ? :before_action : :before_filter
-        after_action_with_fallback = respond_to?(:after_action) ? :after_action : :after_filter
-        public_send(before_action_with_fallback, :setup_react_component_helper)
-        public_send(after_action_with_fallback, :teardown_react_component_helper)
+        around_action_with_fallback = respond_to?(:around_action) ? :around_action : :around_filter
+        public_send(around_action_with_fallback, :use_react_component_helper)
         attr_reader :__react_component_helper
       end
 
-      def setup_react_component_helper
+      module ClassMethods
+        # Call this in the controller to check out a prerender for the whole request.
+        # You can access the renderer with {#react_rails_prerenderer}.
+        def per_request_react_rails_prerenderer
+          around_action_with_fallback = respond_to?(:around_action) ? :around_action : :around_filter
+          public_send(around_action_with_fallback, :per_request_react_rails_prerenderer)
+        end
+      end
+
+      # Instantiate the ViewHelper implementation and call its #setup method
+      # then let the controller action run,
+      # then call the ViewHelper implementation's #teardown method
+      def use_react_component_helper
         new_helper = React::Rails::ViewHelper.helper_implementation_class.new
         new_helper.setup(self)
         @__react_component_helper = new_helper
+        yield
+        @__react_component_helper.teardown(self)
       end
 
-      def teardown_react_component_helper
-        @__react_component_helper.teardown(self)
+      # If you want a per-request renderer, add this method as an around-action
+      #
+      # (`.per_request_react_rails_prerenderer` does this for you)
+      # @example Having one renderer instance for each controller action
+      #   around_action :per_request_react_rails_prerenderer
+      def per_request_react_rails_prerenderer
+        React::ServerRendering.with_renderer do |renderer|
+          @__react_rails_prerenderer = renderer
+          yield
+        end
+      end
+
+
+      # An instance of a server renderer, for use during this request
+      def react_rails_prerenderer
+        @__react_rails_prerenderer
       end
     end
   end

lib/react/server_rendering.rb

@@ -7,19 +7,23 @@ 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)
+    # Yield a renderer for an arbitrary block
+    def self.with_renderer
+      @@pool.with { |renderer| yield(renderer) }
     end
 
     class PrerenderError < RuntimeError

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/assets/javascripts/components.js

@@ -1,2 +1,3 @@
 //= require_self
 //= require_tree ./components
+//= require ./pages

test/dummy/app/assets/javascripts/pages.js

@@ -1,6 +1,13 @@
 var GreetingMessage = React.createClass({
   getInitialState: function() {
-    return {greeting: 'Hello'};
+    var initialGreeting = 'Hello';
+    if (typeof global !== "undefined" && global.ctx && global.ctx.greeting) {
+      initialGreeting = global.ctx.greeting
+    }
+
+    return {
+      greeting: initialGreeting
+    }
   },
   goodbye: function() {
     this.setState({greeting: 'Goodbye'});