react_ujs.js in react-rails-2.6.1

- old
+ new

@@ -234,13 +234,20 @@
   PROPS_ATTR: 'data-react-props',
 
   // This attribute holds which method to use between: ReactDOM.hydrate, ReactDOM.render
   RENDER_ATTR: 'data-hydrate',
 
+  // A unique identifier to identify a node
+  CACHE_ID_ATTR: "data-react-cache-id",
+
+  TURBOLINKS_PERMANENT_ATTR: "data-turbolinks-permanent",
+
   // If jQuery is detected, save a reference to it for event handlers
   jQuery: (typeof window !== 'undefined') && (typeof window.jQuery !== 'undefined') && window.jQuery,
 
+  components: {},
+
   // helper method for the mount and unmount methods to find the
   // `data-react-class` DOM elements
   findDOMNodes: function(searchSelector) {
     var classNameAttr = ReactRailsUJS.CLASS_NAME_ATTR
     // we will use fully qualified paths as we do not bind the callbacks
@@ -302,25 +309,35 @@
       var className = node.getAttribute(ujs.CLASS_NAME_ATTR);
       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);
+      var cacheId = node.getAttribute(ujs.CACHE_ID_ATTR);
+      var turbolinksPermanent = node.hasAttribute(ujs.TURBOLINKS_PERMANENT_ATTR);
 
       if (!constructor) {
         var message = "Cannot find component: '" + className + "'"
         if (console && console.log) {
           console.log("%c[react-rails] %c" + message + " for element", "font-weight: bold", "", node)
         }
         throw new Error(message + ". Make sure your component is available to render.")
       } else {
+        var component = this.components[cacheId];
+        if(component === undefined) {
+          component = React.createElement(constructor, props);
+          if(turbolinksPermanent) {
+            this.components[cacheId] = component;
+          }
+        }
+
         if (hydrate && typeof ReactDOM.hydrate === "function") {
-          ReactDOM.hydrate(React.createElement(constructor, props), node);
+          component = ReactDOM.hydrate(component, node);
         } else {
-          ReactDOM.render(React.createElement(constructor, props), node);
+          component = ReactDOM.render(component, node);
         }
       }
-    }
+    } 
   },
 
   // Within `searchSelector`, find nodes which have React components
   // inside them, and unmount those components.
   unmountComponents: function(searchSelector) {
@@ -420,16 +437,16 @@
 /***/ (function(module, exports) {
 
 module.exports = {
   // Turbolinks 5+ got rid of named events (?!)
   setup: function(ujs) {
-    ujs.handleEvent('turbolinks:load', ujs.handleMount)
-    ujs.handleEvent('turbolinks:before-render', ujs.handleUnmount)
+  	ujs.handleEvent('turbolinks:load', ujs.handleMount);
+    ujs.handleEvent('turbolinks:before-render', ujs.handleUnmount);
   },
 
   teardown: function(ujs) {
-    ujs.removeEvent('turbolinks:load', ujs.handleMount)
-    ujs.removeEvent('turbolinks:before-render', ujs.handleUnmount)
+  	ujs.removeEvent('turbolinks:load', ujs.handleMount);
+    ujs.removeEvent('turbolinks:before-render', ujs.handleUnmount);
   },
 }
 
 
 /***/ }),
\ No newline at end of file