Enhanced turbolinks support (#978)

* Mount components when displaying cached page

* Cache rendered components to prevent destroying previously rendered components

* move cache_ids initialization to initialize

* Added data-react-cache-id to view tests

* Rearrange html attributes in test

* Only cache data-turbolinks-permanent nodes

* Be consistent

Author: BookOfGreg

lib/react/rails/component_mount.rb

@@ -11,6 +11,10 @@ class ComponentMount
       attr_accessor :output_buffer
       mattr_accessor :camelize_props_switch
 
+      def initialize
+        @cache_ids = []
+      end
+
       # {ControllerLifecycle} calls these hooks
       # You can use them in custom helper implementations
       def setup(controller)
@@ -40,6 +44,9 @@ def react_component(name, props = {}, options = {}, &block)
             data[:react_class] = name
             data[:react_props] = (props.is_a?(String) ? props : props.to_json)
             data[:hydrate] = 't' if prerender_options
+
+            num_components = @cache_ids.count { |c| c.start_with? name }
+            data[:react_cache_id] = "#{name}-#{num_components}"
           end
         end
         html_tag = html_options[:tag] || :div

react_ujs/index.js

@@ -18,9 +18,16 @@ var ReactRailsUJS = {
   // 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) {
@@ -86,6 +93,8 @@ var ReactRailsUJS = {
       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 + "'"
@@ -94,13 +103,21 @@ var ReactRailsUJS = {
         }
         throw new Error(message + ". Make sure your component is available to render.")
       } else {
+        let 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

react_ujs/src/events/turbolinks.js

@@ -1,12 +1,12 @@
 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.handleMount);
   },
 
   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.handleMount);
   },
 }

test/react/rails/view_helper_test.rb

@@ -10,13 +10,13 @@ class ViewHelperHelper
 
 class ViewHelperTest < ActionView::TestCase
   test 'view helper can be called directly' do
-    expected_html = %{<div data-react-class="Component" data-react-props="{&quot;a&quot;:&quot;b&quot;}"></div>}
+    expected_html = %{<div data-react-class="Component" data-react-props="{&quot;a&quot;:&quot;b&quot;}" data-react-cache-id="Component-0"></div>}
     rendered_html = ViewHelperHelper.react_component('Component', { a: 'b' })
     assert_equal(expected_html, rendered_html)
   end
 
   test 'view helper accepts block usage' do
-    expected_html = %{<div data-react-class="Component" data-react-props="{&quot;a&quot;:&quot;b&quot;}">content</div>}
+    expected_html = %{<div data-react-class="Component" data-react-props="{&quot;a&quot;:&quot;b&quot;}" data-react-cache-id="Component-0">content</div>}
     rendered_html = ViewHelperHelper.react_component('Component', { a: 'b' }) do
       'content'
     end
@@ -32,7 +32,7 @@ class ViewHelperTest < ActionView::TestCase
   test 'view helper can accept block and render inner content only once' do
     rendered_html = render partial: 'pages/component_with_inner_html'
     expected_html = <<HTML
-<div data-react-class=\"GreetingMessage\" data-react-props=\"{&quot;name&quot;:&quot;Name&quot;}\" id=\"component\">
+<div data-react-class=\"GreetingMessage\" data-react-props=\"{&quot;name&quot;:&quot;Name&quot;}\" data-react-cache-id=\"GreetingMessage-0\" id=\"component\">
   <div id=\"unique-nested-id\">NestedContent</div>
 </div>
 HTML