feat(ExecJSRenderer) add ExecJSRenderer

Author: rmosolgo

lib/react/server_rendering.rb

@@ -1,4 +1,5 @@
 require 'connection_pool'
+require 'react/server_rendering/exec_js_renderer'
 require 'react/server_rendering/sprockets_renderer'
 
 module React
@@ -20,5 +21,13 @@ def self.render(component_name, props, prerender_options)
     def self.create_renderer
       renderer.new(renderer_options)
     end
+
+    class PrerenderError < RuntimeError
+      def initialize(component_name, props, js_message)
+        message = ["Encountered error \"#{js_message}\" when prerendering #{component_name} with #{props}",
+                    js_message.backtrace.join("\n")].join("\n")
+        super(message)
+      end
+    end
   end
 end

lib/react/server_rendering/exec_js_renderer.rb

@@ -0,0 +1,40 @@
+# A bare-bones renderer for React.js + Exec.js
+# - No Rails dependency
+# - No browser concerns
+module React
+  module ServerRendering
+    class ExecJSRenderer
+      def initialize(options={})
+        js_code = options.fetch(:code) || raise("Pass `code:` option to instantiate a JS context!")
+        @context = ExecJS.compile(GLOBAL_WRAPPER + js_code)
+      end
+
+      def render(component_name, props, prerender_options)
+        render_function = prerender_options.fetch(:render_function, "renderToString")
+        js_code = <<-JS
+          (function () {
+            #{before_render}
+            var result = React.#{render_function}(React.createElement(#{component_name}, #{props}));
+            #{after_render}
+            return result;
+          })()
+        JS
+        @context.eval(js_code)
+      rescue ExecJS::ProgramError => err
+        raise React::ServerRendering::PrerenderError.new(component_name, props, err)
+      end
+
+      # Hooks for inserting JS before/after rendering
+      def before_render; ""; end
+      def after_render; ""; end
+
+      # Handle Node.js & other ExecJS contexts
+      GLOBAL_WRAPPER = <<-JS
+        var global = global || this;
+        var self = self || this;
+        var window = window || this;
+      JS
+
+    end
+  end
+end

lib/react/server_rendering/sprockets_renderer.rb

@@ -1,17 +1,20 @@
+# Extends ExecJSRenderer for the Rails environment
+# - builds JS code out of the asset pipeline
+# - stringifies props
+# - implements console replay
 module React
   module ServerRendering
-    class SprocketsRenderer
+    class SprocketsRenderer < ExecJSRenderer
       def initialize(options={})
         @replay_console = options.fetch(:replay_console, true)
-
         filenames = options.fetch(:files, ["react.js", "components.js"])
-        js_code = GLOBAL_WRAPPER + CONSOLE_POLYFILL
+        js_code = CONSOLE_POLYFILL.dup
 
         filenames.each do |filename|
           js_code << ::Rails.application.assets[filename].to_s
         end
 
-        @context = ExecJS.compile(js_code)
+        super(options.merge(code: js_code))
       end
 
       def render(component_name, props, prerender_options)
@@ -26,25 +29,12 @@ def render(component_name, props, prerender_options)
           props = props.to_json
         end
 
-        js_code = <<-JS
-          (function () {
-            var result = React.#{react_render_method}(React.createElement(#{component_name}, #{props}));
-            #{@replay_console ? CONSOLE_REPLAY : ""}
-            return result;
-          })()
-        JS
-
-        @context.eval(js_code).html_safe
-      rescue ExecJS::ProgramError => err
-        raise PrerenderError.new(component_name, props, err)
+        super(component_name, props, {render_function: react_render_method})
       end
 
-      # Handle node.js & other RubyRacer contexts
-      GLOBAL_WRAPPER = <<-JS
-        var global = global || this;
-        var self = self || this;
-        var window = window || this;
-      JS
+      def after_render
+        @replay_console ? CONSOLE_REPLAY : ""
+      end
 
       # Reimplement console methods for replaying on the client
       CONSOLE_POLYFILL = <<-JS
@@ -68,14 +58,6 @@ def render(component_name, props, prerender_options)
           }
         })(console.history);
       JS
-
-      class PrerenderError < RuntimeError
-        def initialize(component_name, props, js_message)
-          message = ["Encountered error \"#{js_message}\" when prerendering #{component_name} with #{props}",
-                      js_message.backtrace.join("\n")].join("\n")
-          super(message)
-        end
-      end
     end
   end
 end

test/react/server_rendering/sprockets_renderer_test.rb

@@ -38,7 +38,7 @@ class SprocketsRendererTest < ActiveSupport::TestCase
   end
 
   test '#render errors include stack traces' do
-    err = assert_raises React::ServerRendering::SprocketsRenderer::PrerenderError do
+    err = assert_raises React::ServerRendering::PrerenderError do
       @renderer.render("NonExistentComponent", {}, nil)
     end
     assert_match(/ReferenceError/, err.to_s)
@@ -49,7 +49,7 @@ class SprocketsRendererTest < ActiveSupport::TestCase
   test '.new accepts any filenames' do
     limited_renderer = React::ServerRendering::SprocketsRenderer.new(files: ["react.js", "components/Todo.js"])
     assert_match(/get a real job<\/li>/, limited_renderer.render("Todo", {todo: "get a real job"}, nil))
-    err = assert_raises React::ServerRendering::SprocketsRenderer::PrerenderError do
+    err = assert_raises React::ServerRendering::PrerenderError do
       limited_renderer.render("TodoList", {todos: []}, nil)
     end
     assert_match(/ReferenceError/, err.to_s, "it doesnt load other files")