Merge pull request #844 from jsbaltodano/master

🐛 Use ReactDOM.render instead of hydrate when prerender is falsy

Author: BookOfGreg

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 2.4.2
 #### Bug Fixes
 - ReactDOM.hydrate() may not be defined for everyone, it will now use hydrate if it is defined or fallback to render #832
+- Call ReactDOM.render() when react_component :prerender option is falsy ( instead of ReactDOM.hydrate() ).
 
 ## 2.4.1
 

lib/assets/javascripts/react_ujs.js

@@ -240,6 +240,9 @@ var ReactRailsUJS = {
   // example: `data-react-props="{\"item\": { \"id\": 1, \"name\": \"My Item\"} }"`
   PROPS_ATTR: 'data-react-props',
 
+  // This attribute holds which method to use between: ReactDOM.hydrate, ReactDOM.render
+  RENDER_ATTR: 'data-hydrate',
+
   // If jQuery is detected, save a reference to it for event handlers
   jQuery: (typeof window !== 'undefined') && (typeof window.jQuery !== 'undefined') && window.jQuery,
 
@@ -307,6 +310,7 @@ var ReactRailsUJS = {
       var constructor = ujs.getConstructor(className);
       var propsJson = node.getAttribute(ujs.PROPS_ATTR);
       var props = propsJson && JSON.parse(propsJson);
+      var hydrate = node.getAttribute(ujs.RENDER_ATTR);
 
       if (!constructor) {
         var message = "Cannot find component: '" + className + "'"
@@ -315,7 +319,7 @@ var ReactRailsUJS = {
         }
         throw new Error(message + ". Make sure your component is available to render.")
       } else {
-        if (typeof ReactDOM.hydrate === "function") {
+        if (hydrate && typeof ReactDOM.hydrate === "function") {
           ReactDOM.hydrate(React.createElement(constructor, props), node);
         } else {
           ReactDOM.render(React.createElement(constructor, props), node);

lib/react/rails/component_mount.rb

@@ -39,6 +39,7 @@ def react_component(name, props = {}, options = {}, &block)
           html_options[:data].tap do |data|
             data[:react_class] = name
             data[:react_props] = (props.is_a?(String) ? props : props.to_json)
+            data[:hydrate] = 't' if prerender_options
           end
         end
         html_tag = html_options[:tag] || :div

react_ujs/dist/react_ujs.js

@@ -240,6 +240,9 @@ var ReactRailsUJS = {
   // example: `data-react-props="{\"item\": { \"id\": 1, \"name\": \"My Item\"} }"`
   PROPS_ATTR: 'data-react-props',
 
+  // This attribute holds which method to use between: ReactDOM.hydrate, ReactDOM.render
+  RENDER_ATTR: 'data-hydrate',
+
   // If jQuery is detected, save a reference to it for event handlers
   jQuery: (typeof window !== 'undefined') && (typeof window.jQuery !== 'undefined') && window.jQuery,
 
@@ -307,6 +310,7 @@ var ReactRailsUJS = {
       var constructor = ujs.getConstructor(className);
       var propsJson = node.getAttribute(ujs.PROPS_ATTR);
       var props = propsJson && JSON.parse(propsJson);
+      var hydrate = node.getAttribute(ujs.RENDER_ATTR);
 
       if (!constructor) {
         var message = "Cannot find component: '" + className + "'"
@@ -315,7 +319,7 @@ var ReactRailsUJS = {
         }
         throw new Error(message + ". Make sure your component is available to render.")
       } else {
-        if (typeof ReactDOM.hydrate === "function") {
+        if (hydrate && typeof ReactDOM.hydrate === "function") {
           ReactDOM.hydrate(React.createElement(constructor, props), node);
         } else {
           ReactDOM.render(React.createElement(constructor, props), node);

react_ujs/index.js

@@ -15,6 +15,9 @@ var ReactRailsUJS = {
   // example: `data-react-props="{\"item\": { \"id\": 1, \"name\": \"My Item\"} }"`
   PROPS_ATTR: 'data-react-props',
 
+  // This attribute holds which method to use between: ReactDOM.hydrate, ReactDOM.render
+  RENDER_ATTR: 'data-hydrate',
+
   // If jQuery is detected, save a reference to it for event handlers
   jQuery: (typeof window !== 'undefined') && (typeof window.jQuery !== 'undefined') && window.jQuery,
 
@@ -82,6 +85,7 @@ var ReactRailsUJS = {
       var constructor = ujs.getConstructor(className);
       var propsJson = node.getAttribute(ujs.PROPS_ATTR);
       var props = propsJson && JSON.parse(propsJson);
+      var hydrate = node.getAttribute(ujs.RENDER_ATTR);
 
       if (!constructor) {
         var message = "Cannot find component: '" + className + "'"
@@ -90,7 +94,7 @@ var ReactRailsUJS = {
         }
         throw new Error(message + ". Make sure your component is available to render.")
       } else {
-        if (typeof ReactDOM.hydrate === "function") {
+        if (hydrate && typeof ReactDOM.hydrate === "function") {
           ReactDOM.hydrate(React.createElement(constructor, props), node);
         } else {
           ReactDOM.render(React.createElement(constructor, props), node);