refactor(ViewHelper) move HTML tag to ComponentMount

Author: rmosolgo

lib/react/rails.rb

@@ -2,5 +2,6 @@
 require 'react/rails/engine'
 require 'react/rails/railtie'
 require 'react/rails/version'
+require 'react/rails/component_mount'
 require 'react/rails/view_helper'
 require 'react/rails/controller_renderer'

lib/react/rails/component_mount.rb

@@ -0,0 +1,33 @@
+module React
+  module Rails
+    class ComponentMount
+      include ActionView::Helpers::TagHelper
+      include ActionView::Helpers::TextHelper
+      attr_accessor :output_buffer
+
+      # Render a UJS-type HTML tag annotated with data attributes, which
+      # are used by react_ujs to actually instantiate the React component
+      # on the client.
+      def react_component(name, props = {}, options = {}, &block)
+        options = {:tag => options} if options.is_a?(Symbol)
+
+        prerender_options = options[:prerender]
+        if prerender_options
+          block = Proc.new{ concat React::ServerRendering.render(name, props, prerender_options) }
+        end
+
+        html_options = options.reverse_merge(:data => {})
+        html_options[:data].tap do |data|
+          data[:react_class] = name
+          data[:react_props] = (props.is_a?(String) ? props : props.to_json)
+        end
+        html_tag = html_options[:tag] || :div
+
+        # remove internally used properties so they aren't rendered to DOM
+        html_options.except!(:tag, :prerender)
+
+        content_tag(html_tag, '', html_options, &block)
+      end
+    end
+  end
+end

lib/react/rails/railtie.rb

@@ -15,6 +15,8 @@ class Railtie < ::Rails::Railtie
       config.react.server_renderer_timeout    = 20  # seconds
       config.react.server_renderer            = nil # defaults to SprocketsRenderer
       config.react.server_renderer_options    = {}  # SprocketsRenderer provides defaults
+      # View helper implementation:
+      config.react.view_helper_implementation = nil # Defaults to ComponentMount
 
       # Watch .jsx files for changes in dev, so we can reload the JS VMs with the new JS code.
       initializer "react_rails.add_watchable_files", group: :all do |app|
@@ -27,6 +29,8 @@ class Railtie < ::Rails::Railtie
         React::JSX.transformer_class = app.config.react.jsx_transformer_class
         React::JSX.transform_options = app.config.react.jsx_transform_options
 
+        app.config.react.view_helper_implementation ||= React::Rails::ComponentMount
+        React::Rails::ViewHelper.helper_implementation_class = app.config.react.view_helper_implementation
         ActiveSupport.on_load(:action_view) do
           include ::React::Rails::ViewHelper
         end

lib/react/rails/view_helper.rb

@@ -1,28 +1,13 @@
 module React
   module Rails
     module ViewHelper
-      # Render a UJS-type HTML tag annotated with data attributes, which
-      # are used by react_ujs to actually instantiate the React component
-      # on the client.
-      def react_component(name, props = {}, options = {}, &block)
-        options = {:tag => options} if options.is_a?(Symbol)
+      # This class will be used for inserting tags into HTML.
+      # It should implement react_component(name, props, options &block)
+      # The default is {React::Rails::ComponentMount}
+      mattr_accessor :helper_implementation_class
 
-        prerender_options = options[:prerender]
-        if prerender_options
-          block = Proc.new{ concat React::ServerRendering.render(name, props, prerender_options) }
-        end
-
-        html_options = options.reverse_merge(:data => {})
-        html_options[:data].tap do |data|
-          data[:react_class] = name
-          data[:react_props] = (props.is_a?(String) ? props : props.to_json)
-        end
-        html_tag = html_options[:tag] || :div
-
-        # remove internally used properties so they aren't rendered to DOM
-        html_options.except!(:tag, :prerender)
-
-        content_tag(html_tag, '', html_options, &block)
+      def react_component(*args, &block)
+        self.helper_implementation_class.new.react_component(*args, &block)
       end
     end
   end

test/react/rails/component_mount_test.rb

@@ -0,0 +1,49 @@
+require 'test_helper'
+
+class ComponentMountTest < ActionDispatch::IntegrationTest
+  setup do
+    @helper = React::Rails::ComponentMount.new
+  end
+
+  test '#react_component accepts React props' do
+    html = @helper.react_component('Foo', {bar: 'value'})
+    expected_props = %w(data-react-class="Foo" data-react-props="{&quot;bar&quot;:&quot;value&quot;}")
+    expected_props.each do |segment|
+      assert html.include?(segment)
+    end
+  end
+
+  test '#react_component accepts jbuilder-based strings as properties' do
+    jbuilder_json = Jbuilder.new do |json|
+      json.bar 'value'
+    end.target!
+
+    html = @helper.react_component('Foo', jbuilder_json)
+    expected_props = %w(data-react-class="Foo" data-react-props="{&quot;bar&quot;:&quot;value&quot;}")
+    expected_props.each do |segment|
+      assert html.include?(segment), "expected #{html} to include #{segment}"
+    end
+  end
+
+  test '#react_component accepts string props with prerender: true' do
+    html = @helper.react_component('Todo', {todo: 'render on the server'}.to_json, prerender: true)
+    assert(html.include?('data-react-class="Todo"'), "it includes attrs for UJS")
+    assert(html.include?('>render on the server</li>'), "it includes rendered HTML")
+    assert(html.include?('data-reactid'), "it includes React properties")
+  end
+
+  test '#react_component passes :static to SprocketsRenderer' do
+    html = @helper.react_component('Todo', {todo: 'render on the server'}.to_json, prerender: :static)
+    assert(html.include?('>render on the server</li>'), "it includes rendered HTML")
+    assert(!html.include?('data-reactid'), "it DOESNT INCLUDE React properties")
+  end
+
+  test '#react_component accepts HTML options and HTML tag' do
+    assert @helper.react_component('Foo', {}, :span).match(/<span\s.*><\/span>/)
+
+    html = @helper.react_component('Foo', {}, {class: 'test', tag: :span, data: {foo: 1}})
+    assert html.match(/<span\s.*><\/span>/)
+    assert html.include?('class="test"')
+    assert html.include?('data-foo="1"')
+  end
+end

test/react/rails/view_helper_test.rb

@@ -18,50 +18,9 @@ class ViewHelperTest < ActionDispatch::IntegrationTest
   include Capybara::DSL
 
   setup do
-    @helper = ActionView::Base.new.extend(React::Rails::ViewHelper)
     Capybara.current_driver = Capybara.javascript_driver
   end
 
-  test 'react_component accepts React props' do
-    html = @helper.react_component('Foo', {bar: 'value'})
-    %w(data-react-class="Foo" data-react-props="{&quot;bar&quot;:&quot;value&quot;}").each do |segment|
-      assert html.include?(segment)
-    end
-  end
-
-  test 'react_component accepts jbuilder-based strings as properties' do
-    jbuilder_json = Jbuilder.new do |json|
-      json.bar 'value'
-    end.target!
-
-    html = @helper.react_component('Foo', jbuilder_json)
-    %w(data-react-class="Foo" data-react-props="{&quot;bar&quot;:&quot;value&quot;}").each do |segment|
-      assert html.include?(segment), "expected #{html} to include #{segment}"
-    end
-  end
-
-  test 'react_component accepts string props with prerender: true' do
-    html = @helper.react_component('Todo', {todo: 'render on the server'}.to_json, prerender: true)
-    assert(html.include?('data-react-class="Todo"'), "it includes attrs for UJS")
-    assert(html.include?('>render on the server</li>'), "it includes rendered HTML")
-    assert(html.include?('data-reactid'), "it includes React properties")
-  end
-
-  test 'react_component passes :static to SprocketsRenderer' do
-    html = @helper.react_component('Todo', {todo: 'render on the server'}.to_json, prerender: :static)
-    assert(html.include?('>render on the server</li>'), "it includes rendered HTML")
-    assert(!html.include?('data-reactid'), "it DOESNT INCLUDE React properties")
-  end
-
-  test 'react_component accepts HTML options and HTML tag' do
-    assert @helper.react_component('Foo', {}, :span).match(/<span\s.*><\/span>/)
-
-    html = @helper.react_component('Foo', {}, {:class => 'test', :tag => :span, :data => {:foo => 1}})
-    assert html.match(/<span\s.*><\/span>/)
-    assert html.include?('class="test"')
-    assert html.include?('data-foo="1"')
-  end
-
   test 'ujs object present on the global React object and has our methods' do
     visit '/pages/1'
     assert page.has_content?('Hello Bob')