Add component renderer to render a component instead of a view

Author: Gabe Scholz

lib/react/rails.rb

@@ -2,3 +2,4 @@
 require 'react/rails/engine'
 require 'react/rails/railtie'
 require 'react/rails/view_helper'
+require 'react/rails/controller_renderer'

lib/react/rails/controller_renderer.rb

@@ -0,0 +1,19 @@
+class React::ControllerRenderer
+  include React::Rails::ViewHelper
+  include ActionView::Helpers::TagHelper
+  include ActionView::Helpers::TextHelper
+
+  attr_accessor :output_buffer
+
+  def self.call(*args, &block)
+    new.call(*args, &block)
+  end
+
+  def call(name, options, &block)
+    options = options.dup
+    props = options.fetch(:props, {})
+    options.slice!(:data, :tag)
+    options.merge!({ prerender: true })
+    react_component(name, props, options, &block)
+  end
+end

lib/react/rails/railtie.rb

@@ -32,6 +32,14 @@ class Railtie < ::Rails::Railtie
         end
       end
 
+      initializer "react_rails.add_component_renderer", group: :all do |app|
+        ActionController::Renderers.add :component do |component_name, options|
+          html = React::ControllerRenderer.call(component_name, options)
+          render_options = options.merge(html: html)
+          render(render_options)
+        end
+      end
+
       initializer "react_rails.bust_cache", group: :all do |app|
         asset_variant = React::Rails::AssetVariant.new({
           variant: app.config.react.variant,

test/dummy/app/controllers/server_controller.rb

@@ -14,4 +14,8 @@ def console_example_suppressed
     React::ServerRendering.reset_pool
     @todos = %w{todo1 todo2 todo3}
   end
+
+  def inline_component
+    render component: 'TodoList', props: { todos: [{todo: 'Render this inline'}] }, tag: 'span'
+  end
 end

test/dummy/config/routes.rb

@@ -4,6 +4,7 @@
     collection do
       get :console_example
       get :console_example_suppressed
+      get :inline_component
     end
   end
 end

test/server_rendered_html_test.rb

@@ -51,4 +51,9 @@ def wait_to_ensure_asset_pipeline_detects_changes
     assert_no_match(/console.warn/, response.body)
     assert_no_match(/console.error/, response.body)
   end
+
+  test 'react inline component rendering' do
+    get '/server/inline_component'
+    assert_match(/Render this inline/, response.body)
+  end
 end