Merge pull request #375 from mariusandra/master

\u2028 and \u2029 break rendering

CHANGELOG.md

@@ -3,6 +3,9 @@ All notable changes to this project will be documented in this file. Items under
 
 Contributors: please follow the recommendations outlined at [keepachangelog.com](http://keepachangelog.com/). Please use the existing headings and styling as a guide, and add a link for the version diff at the bottom of the file. Also, please update the `Unreleased` link to compare to the latest release version.
 ## [Unreleased]
+##### Fixed
+- Fixed errors when server rendered props contain \u2028 or \u2029 characters [#375](https://github.com/shakacode/react_on_rails/pull/375) by [mariusandra]
+
 ##### Added
 - Non-digested version of assets in public folder [#413](https://github.com/shakacode/react_on_rails/pull/413) by [alleycat-at-git]
 

app/helpers/react_on_rails_helper.rb

@@ -274,12 +274,24 @@ def server_rendered_react_component_html(props, react_component_name, dom_id,
     ReactOnRails::ServerRenderingPool.reset_pool_if_server_bundle_was_modified
 
     # Since this code is not inserted on a web page, we don't need to escape props
+    #
+    # However, as JSON (returned from `props_string(props)`) isn't JavaScript,
+    # but we want treat it as such, we need to compensate for the difference.
+    #
+    # \u2028 and \u2029 are valid characters in strings in JSON, but are treated
+    # as newline separators in JavaScript. As no newlines are allowed in
+    # strings in JavaScript, this causes an exception.
+    #
+    # We fix this by replacing these unicode characters with their escaped versions.
+    # This should be safe, as the only place they can appear is in strings anyway.
+    #
+    # Read more here: http://timelessrepo.com/json-isnt-a-javascript-subset
 
     wrapper_js = <<-JS
 (function() {
   var railsContext = #{rails_context(server_side: true).to_json};
 #{initialize_redux_stores}
-  var props = #{props_string(props)};
+  var props = #{props_string(props).gsub("\u2028", '\u2028').gsub("\u2029", '\u2029')};
   return ReactOnRails.serverRenderReactComponent({
     name: '#{react_component_name}',
     domNodeId: '#{dom_id}',