Merge pull request #95 from xionon/jbuilder-integration

Allow react_component to accept JSON strings

Author: jtmalinowski

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>/)