From e8420c51afed0c97688cceb082015f2403c98f00 Mon Sep 17 00:00:00 2001 From: Kai Wood Date: Wed, 28 Oct 2015 11:56:31 +0100 Subject: [PATCH 1/2] Add ability to render custom attributes from the controller Currently, all custom attributes are sliced from options when using the controller renderer, instead of forwarding it to the view helper, making it impossible to set a custom class name or id. This patch changes the behaviour to allow class, id, custom data-* and aria-* attributes. --- lib/react/rails/controller_renderer.rb | 2 +- test/dummy/app/controllers/server_controller.rb | 7 ++++++- test/server_rendered_html_test.rb | 6 +++++- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/lib/react/rails/controller_renderer.rb b/lib/react/rails/controller_renderer.rb index aaaa2cbc6..e978f21b2 100644 --- a/lib/react/rails/controller_renderer.rb +++ b/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 diff --git a/test/dummy/app/controllers/server_controller.rb b/test/dummy/app/controllers/server_controller.rb index 21009432b..4d48181c5 100644 --- a/test/dummy/app/controllers/server_controller.rb +++ b/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 diff --git a/test/server_rendered_html_test.rb b/test/server_rendered_html_test.rb index 0b32e45de..b5d9500a1 100644 --- a/test/server_rendered_html_test.rb +++ b/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>/, rendered_html, "it accepts a tag override") # make sure that the layout is rendered with the component assert_match(/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 From a793672d4190e161afa77fe4f40136274751ac9e Mon Sep 17 00:00:00 2001 From: Kai Wood <kwood@kwd.io> Date: Wed, 28 Oct 2015 12:48:36 +0100 Subject: [PATCH 2/2] Update README.md to hint for the custom HTML attributes --- README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 8ba38f2e0..ad8f07b2b 100644 --- a/README.md +++ b/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