Allow react_component to accept JSON strings

Rails ships with a useful JSON builder that makes rendering to strings
of JSON via templates very easy, but rendering from objects to json
not quite so easy. It's used by a lot of Rails apps as the default way
to serialize objects to JSON.

This allows render_component to take a string as the props argument,
and instead of calling #to_json on it, just pass it straight through
to the renderer.

Basically, this allows syntax like the following:

```ruby
react_component(
  'Todo',
  render(template: 'todos/show.json.jbuilder', locals: {todo: @todo}),
  {prerender: true}
)
```

Author: xionon

README.md

@@ -111,6 +111,61 @@ react_component('HelloMessage', {name: 'John'}, {id: 'hello', class: 'foo', tag:
 # <span class="foo" id="hello" data-...></span>
 ```
 
+#### With JSON and Jbuilder
+
+You can pass prepared JSON directly to the helper, as well.
+
+```ruby
+react_component('HelloMessage', {name: 'John'}.to_json)
+# <div data-react-class="HelloMessage" data-react-props="{&quot;name&quot;:&quot;John&quot;}"></div>
+```
+
+This is especially helpful if you are already using a tool like Jbuilder in your project.
+
+```ruby
+# messages/show.json.jbuilder
+json.name name
+```
+
+```ruby
+react_component('HelloMessage', render(template: 'messages/show.json.jbuilder', locals: {name: 'John'}))
+# <div data-react-class="HelloMessage" data-react-props="{&quot;name&quot;:&quot;John&quot;}"></div>
+```
+
+##### Important Note
+
+By default, the scaffolded Rails index jbuilder templates do not include a root-node. An example scaffolded index.json.jbuilder looks like this:
+
+```ruby
+json.array!(@messages) do |message|
+  json.extract! message, :id, :name
+  json.url message_url(message, format: :json)
+end
+```
+
+which generates JSON like this:
+
+```json
+[{"id":1,"name":"hello","url":"http://localhost:3000/messages/1.json"},{"id":2,"name":"hello","url":"http://localhost:3000/messages/2.json"},{"id":3,"name":"hello","url":"http://localhost:3000/messages/3.json"}]
+```
+
+This is not suitable for ReactJS props, which is expected to be a key-value object. You will need to wrap your index.json.jbuilder node with a root node, like so:
+
+```ruby
+json.messages do |json|
+  json.array!(@messages) do |message|
+    json.extract! message, :id, :name
+    json.url message_url(message, format: :json)
+  end
+end
+```
+
+Which will generate:
+
+```json
+{"messages":[{"id":1,"name":"hello","url":"http://localhost:3000/messages/1.json"},{"id":2,"name":"hello","url":"http://localhost:3000/messages/2.json"},{"id":3,"name":"hello","url":"http://localhost:3000/messages/3.json"}]}
+```
+
 ### Server Rendering
 
 React components can also use the same ExecJS mechanisms in Sprockets to execute JavaScript code on the server, and render React components to HTML to be delivered to the browser, and then the `react_ujs` script will cause the component to be mounted. In this way, users get fast initial page loads and search-engine-friendly pages.

lib/react/rails/view_helper.rb

@@ -13,7 +13,7 @@ def react_component(name, args = {}, options = {}, &block)
         html_options = options.reverse_merge(:data => {})
         html_options[:data].tap do |data|
           data[:react_class] = name
-          data[:react_props] = args.to_json unless args.empty?
+          data[:react_props] = React::Renderer.react_props(args) unless args.empty?
         end
         html_tag = html_options[:tag] || :div
 

lib/react/renderer.rb

@@ -5,7 +5,7 @@ class Renderer
 
     class PrerenderError < RuntimeError
       def initialize(component_name, props, js_message)
-        message = "Encountered error \"#{js_message}\" when prerendering #{component_name} with #{props.to_json}"
+        message = "Encountered error \"#{js_message}\" when prerendering #{component_name} with #{props}"
         super(message)
       end
     end
@@ -54,19 +54,28 @@ def self.combined_js
       @@combined_js
     end
 
+    def self.react_props(args={})
+      if args.is_a? String
+        args
+      else
+        args.to_json
+      end
+    end
+
     def context
       @context ||= ExecJS.compile(self.class.combined_js)
     end
 
     def render(component, args={})
+      react_props = React::Renderer.react_props(args)
       jscode = <<-JS
         function() {
-          return React.renderComponentToString(#{component}(#{args.to_json}));
+          return React.renderComponentToString(#{component}(#{react_props}));
         }()
       JS
       context.eval(jscode).html_safe
     rescue ExecJS::ProgramError => e
-      raise PrerenderError.new(component, args, e)
+      raise PrerenderError.new(component, react_props, e)
     end
   end
 end

react-rails.gemspec

@@ -21,6 +21,8 @@ Gem::Specification.new do |s|
   s.add_development_dependency 'es5-shim-rails', '>= 2.0.5'
   s.add_development_dependency 'poltergeist', '>= 0.3.3'
 
+  s.add_development_dependency 'jbuilder'
+
   s.add_dependency 'execjs'
   s.add_dependency 'rails', '>= 3.1'
   s.add_dependency 'react-source', '0.11.1'

test/react_renderer_test.rb

@@ -8,6 +8,16 @@ class ReactRendererTest < ActiveSupport::TestCase
     assert_match /data-react-checksum/, result
   end
 
+  test 'Server rendering with an already-encoded json string' do
+    json_string = Jbuilder.new do |json|
+      json.todos %w{todo1 todo2 todo3}
+    end.target!
+
+    result = React::Renderer.render "TodoList", json_string
+    assert_match /todo1.*todo2.*todo3/, result
+    assert_match /data-react-checksum/, result
+  end
+
   test 'Rendering does not throw an exception when console log api is used' do
     %W(error info log warn).each do |fn|
       assert_nothing_raised(ExecJS::ProgramError) do
@@ -23,4 +33,17 @@ class ReactRendererTest < ActiveSupport::TestCase
     expected_message = 'Encountered error "ReferenceError: NonexistentComponent is not defined" when prerendering NonexistentComponent with {"error":true,"exists":false}'
     assert_equal expected_message, err.message
   end
+
+  test 'prerender errors are thrown when given a string' do
+    json_string = Jbuilder.new do |json|
+      json.error true
+      json.exists false
+    end.target!
+
+    err = assert_raises React::Renderer::PrerenderError do
+      React::Renderer.render("NonexistentComponent", json_string)
+    end
+    expected_message = 'Encountered error "ReferenceError: NonexistentComponent is not defined" when prerendering NonexistentComponent with {"error":true,"exists":false}'
+    assert_equal expected_message, err.message
+  end
 end

test/view_helper_test.rb

@@ -29,6 +29,17 @@ class ViewHelperTest < ActionDispatch::IntegrationTest
     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 HTML options and HTML tag' do
     assert @helper.react_component('Foo', {}, :span).match(/<span\s.*><\/span>/)