Merge pull request #384 from kaiwood/custom_attributes_in_component_renderer

Add ability to render custom attributes from the controller

Author: Robert Mosolgo

README.md

@@ -212,13 +212,14 @@ Components can also be prerendered directly from a controller action with the cu
 class TodoController < ApplicationController
   def index
     @todos = Todo.all
-    render component: 'TodoList', props: { todos: @todos }, tag: 'span'
+    render component: 'TodoList', props: { todos: @todos }, tag: 'span', class: 'todo'
   end
 end
 ```
 
 This custom renderer behaves the same as a normal view renderer and accepts the usual arguments - `content_type`, `layout`, `location` and `status`.
-By default, your current layout will be used and the component, rather than a view, will be rendered in place of `yield`.
+By default, your current layout will be used and the component, rather than a view, will be rendered in place of `yield`. Custom data-* attributes
+can be passed like `data: {remote: true}`.
 
 ### Component generator
 

lib/react/rails/controller_renderer.rb

@@ -12,7 +12,7 @@ def initialize(options={})
 
   def call(name, options, &block)
     props = options.fetch(:props, {})
-    options = options.slice(:data, :tag).merge(prerender: true)
+    options = options.slice(:data, :aria, :tag, :class, :id).merge(prerender: true)
     react_component(name, props, options, &block)
   end
 end

test/dummy/app/controllers/server_controller.rb

@@ -16,6 +16,11 @@ def console_example_suppressed
   end
 
   def inline_component
-    render component: 'TodoList', props: { todos: ['Render this inline'] }, tag: 'span'
+    render component: 'TodoList',
+           props: { todos: ['Render this inline'] },
+           tag: 'span',
+           class: 'custom-class',
+           id: 'custom-id',
+           data: { remote: true }
   end
 end

test/server_rendered_html_test.rb

@@ -55,11 +55,15 @@ def wait_to_ensure_asset_pipeline_detects_changes
   test 'react inline component rendering' do
     get '/server/inline_component'
     rendered_html = response.body
-    assert_match(/<span data-react-class=\"TodoList\"/, rendered_html)
+    assert_match(/<span.*data-react-class=\"TodoList\"/, rendered_html)
     # make sure that the items are prerendered
     assert_match(/Render this inline/, rendered_html)
     assert_match(/<\/ul><\/span>/, rendered_html, "it accepts a tag override")
     # make sure that the layout is rendered with the component
     assert_match(/<title>Dummy<\/title>/, rendered_html)
+    # make sure that custom html attributes are rendered
+    assert_match(/class=\"custom-class\"/, rendered_html)
+    assert_match(/id=\"custom-id\"/, rendered_html)
+    assert_match(/data-remote=\"true\"/, rendered_html)
   end
 end