diff --git a/CHANGELOG.md b/CHANGELOG.md index 82db93e5..c7d50623 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/lib/assets/javascripts/react_ujs.js b/lib/assets/javascripts/react_ujs.js index 7490a8f2..be603824 100644 --- a/lib/assets/javascripts/react_ujs.js +++ b/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); diff --git a/lib/react/rails/component_mount.rb b/lib/react/rails/component_mount.rb index 23c7c775..723d108e 100644 --- a/lib/react/rails/component_mount.rb +++ b/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 diff --git a/react_ujs/dist/react_ujs.js b/react_ujs/dist/react_ujs.js index 7490a8f2..be603824 100644 --- a/react_ujs/dist/react_ujs.js +++ b/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); diff --git a/react_ujs/index.js b/react_ujs/index.js index 71258f82..a2bc3752 100644 --- a/react_ujs/index.js +++ b/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);