Merge pull request #89 from meleyal/disable-turbolinks-cache

disable the Turbolinks cache, fixes #87

Author: Robert Mosolgo

README.md

@@ -95,7 +95,9 @@ You can use the `--harmony` or `--strip-types` options by adding a configuration
 
 `react_ujs` will also scan DOM elements and call `React.unmountComponentAtNode` on page unload. If you want to disable this behavior, remove `data-react-class` attribute in `componentDidMount`.
 
-To use `react_ujs`, simply `require` it after `react` (and after `turbolinks` if [Turbolinks](https://github.com/rails/turbolinks) is used):
+To use `react_ujs`, simply `require` it after `react` (and after `turbolinks` if [Turbolinks](https://github.com/rails/turbolinks) is used).
+
+**Note:** _Turbolinks >= 2.4.0 is recommended. For older versions `react_ujs` will disable the Turbolinks cache to ensure components are correctly unmounted. See [#87](https://github.com/reactjs/react-rails/issues/87) for details._
 
 ```js
 // app/assets/javascripts/application.js

lib/assets/javascripts/react_ujs.js renamed to lib/assets/javascripts/react_ujs.js.erb

@@ -4,47 +4,48 @@
 (function(document, window) {
   // jQuery is optional. Use it to support legacy browsers.
   var $ = (typeof window.jQuery !== 'undefined') && window.jQuery;
-  
+
   // create the  namespace
   window.ReactRailsUJS = {
     CLASS_NAME_ATTR: 'data-react-class',
     PROPS_ATTR: 'data-react-props',
-    // helper method for the mount and unmount methods to find the 
+    RAILS_ENV_DEVELOPMENT: <%= Rails.env == "development" %>,
+    // helper method for the mount and unmount methods to find the
     // `data-react-class` DOM elements
     findDOMNodes: function() {
-      // we will use fully qualified paths as we do not bind the callbacks   
+      // we will use fully qualified paths as we do not bind the callbacks
       var selector = '[' + window.ReactRailsUJS.CLASS_NAME_ATTR + ']';
-      
+
       if ($) {
         return $(selector);
       } else {
         return document.querySelectorAll(selector);
       }
     },
-    
+
     mountComponents: function() {
       var nodes = window.ReactRailsUJS.findDOMNodes();
-      
+
       for (var i = 0; i < nodes.length; ++i) {
         var node = nodes[i];
         var className = node.getAttribute(window.ReactRailsUJS.CLASS_NAME_ATTR);
-        
+
         // Assume className is simple and can be found at top-level (window).
         // Fallback to eval to handle cases like 'My.React.ComponentName'.
         var constructor = window[className] || eval.call(window, className);
         var propsJson = node.getAttribute(window.ReactRailsUJS.PROPS_ATTR);
         var props = propsJson && JSON.parse(propsJson);
-        
+
         React.render(React.createElement(constructor, props), node);
       }
     },
-    
+
     unmountComponents: function() {
       var nodes = window.ReactRailsUJS.findDOMNodes();
-      
+
       for (var i = 0; i < nodes.length; ++i) {
         var node = nodes[i];
-        
+
         React.unmountComponentAtNode(node);
         // now remove the `data-react-class` wrapper as well
         node.parentElement && node.parentElement.removeChild(node);
@@ -55,26 +56,37 @@
   // functions not exposed publicly
   function handleTurbolinksEvents () {
     var handleEvent;
-    
+    var unmountEvent;
+
     if ($) {
       handleEvent = function(eventName, callback) {
         $(document).on(eventName, callback);
       };
-      
+
     } else {
       handleEvent = function(eventName, callback) {
         document.addEventListener(eventName, callback);
       };
     }
+
+    if (Turbolinks.EVENTS) {
+      unmountEvent = Turbolinks.EVENTS.BEFORE_UNLOAD;
+    } else {
+      unmountEvent = 'page:receive';
+      Turbolinks.pagesCached(0);
+
+      if (window.ReactRailsUJS.RAILS_ENV_DEVELOPMENT) {
+        console.warn('The Turbolinks cache has been disabled (Turbolinks >= 2.4.0 is recommended). See https://github.com/reactjs/react-rails/issues/87 for more information.');
+      }
+    }
     handleEvent('page:change', window.ReactRailsUJS.mountComponents);
-    handleEvent('page:receive', window.ReactRailsUJS.unmountComponents);
+    handleEvent(unmountEvent, window.ReactRailsUJS.unmountComponents);
   }
 
   function handleNativeEvents() {
-    if ($) {   
+    if ($) {
       $(window.ReactRailsUJS.mountComponents);
       $(window).unload(window.ReactRailsUJS.unmountComponents);
-      
     } else {
       document.addEventListener('DOMContentLoaded', window.ReactRailsUJS.mountComponents);
       window.addEventListener('unload', window.ReactRailsUJS.unmountComponents);