Use turbolinks:before-visit, not turbolinks:before-cache (#644)

By using the hook on `turbolinks:before-visit` to unmount the components, we can ensure that components are unmounted even when Turbolinks cache is disabled. Previously, we used `turbolinks:before-cache` event hook.
shakacode · Dec 25, 2016 · ccd970a · ccd970a
1 parent 4c0f963
commit ccd970a
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,9 @@ Contributors: please follow the recommendations outlined at [keepachangelog.com]
 ## [Unreleased]
 *Please add entries here for your pull requests.*
 
+## [6.3.3] - 2016-12-25
+- By using the hook on `turbolinks:before-visit` to unmount the components, we can ensure that components are unmounted even when Turbolinks cache is disabled. Previously, we used `turbolinks:before-cache` event hook. [#644](https://github.com/shakacode/react_on_rails/pull/644) by [volkanunsal](https://github.com/volkanunsal).
+
 ## [6.3.2] - 2016-12-5
 ##### Fixed
 - The `react_component` method was raising a `NameError` when `ReactOnRailsHelper` was included in a plain object. [#636](https://github.com/shakacode/react_on_rails/pull/636) by [jtibbertsma](https://github.com/jtibbertsma).
@@ -404,7 +407,8 @@ Best done with Object destructing:
 ##### Fixed
 - Fix several generator related issues.
 
-[Unreleased]: https://github.com/shakacode/react_on_rails/compare/6.3.2...master
+[Unreleased]: https://github.com/shakacode/react_on_rails/compare/6.3.3...master
+[6.3.3]: https://github.com/shakacode/react_on_rails/compare/6.3.2...6.3.3
 [6.3.2]: https://github.com/shakacode/react_on_rails/compare/6.3.1...6.3.2
 [6.3.1]: https://github.com/shakacode/react_on_rails/compare/6.3.0...6.3.1
 [6.3.0]: https://github.com/shakacode/react_on_rails/compare/6.2.1...6.3.0

diff --git a/node_package/src/clientStartup.js b/node_package/src/clientStartup.js
@@ -182,10 +182,9 @@ export function clientStartup(context) {
       reactOnRailsPageLoaded();
     } else if (turbolinksVersion5()) {
       debugTurbolinks(
-        'USING TURBOLINKS 5: document added event listeners turbolinks:before-cache and ' +
-        'turbolinks:load.',
-      );
-      document.addEventListener('turbolinks:before-cache', reactOnRailsPageUnloaded);
+        'USING TURBOLINKS 5: document added event listeners ' +
+        ' turbolinks:before-visit and turbolinks:load.');
+      document.addEventListener('turbolinks:before-visit', reactOnRailsPageUnloaded);
       document.addEventListener('turbolinks:load', reactOnRailsPageLoaded);
     } else {
       debugTurbolinks(

diff --git a/spec/dummy/Gemfile b/spec/dummy/Gemfile
@@ -12,8 +12,6 @@ gem 'sass-rails', '~> 5.0'
 gem 'uglifier', '>= 2.7.2'
 # Use CoffeeScript for .coffee assets and views
 gem 'coffee-rails', '~> 4.1.0'
-# See https://github.com/rails/execjs#readme for more supported runtimes
-# gem 'mini_racer', platforms: :ruby
 
 # Use jquery as the JavaScript library
 gem 'jquery-rails'

diff --git a/spec/dummy/app/views/layouts/application.html.erb b/spec/dummy/app/views/layouts/application.html.erb
@@ -3,6 +3,8 @@
 <head>
   <title>Dummy</title>
 
+  <%= yield :head %>
+
   <%= env_stylesheet_link_tag(static: 'application_static',
                               hot: 'application_non_webpack',
                               media: 'all',

diff --git a/spec/dummy/app/views/pages/_header.erb b/spec/dummy/app/views/pages/_header.erb
@@ -71,5 +71,8 @@
   <li>
     <%= link_to "CSS Modules Images Fonts Example", css_modules_images_fonts_example_path %>
   </li>
+  <li>
+    <%= link_to "Turbolinks Cache Disabled Example", turbolinks_cache_disabled_path %>
+  </li>
 </ul>
 <hr/>
diff --git a/spec/dummy/app/views/pages/turbolinks_cache_disabled.erb b/spec/dummy/app/views/pages/turbolinks_cache_disabled.erb
@@ -0,0 +1,10 @@
+<% content_for(:head) do %>
+  <meta name="turbolinks-cache-control" content="no-cache">
+<% end %>
+
+<%= render "header" %>
+
+<%= react_component("CacheDisabled") %>
+<hr/>
+
+This page demonstrates that components are still unmounted when the Turbolinks cache is disabled.
diff --git a/spec/dummy/client/app/components/CacheDisabled.js b/spec/dummy/client/app/components/CacheDisabled.js
@@ -0,0 +1,19 @@
+import React from 'react';
+
+export default class CacheDisabled extends React.Component {
+
+  componentWillUnmount() {
+    console.log('CacheDisabled#componentWillUnmount')
+  }
+
+  render() {
+    return (
+      <div className="container">
+        <h2>Turbolinks cache is disabled</h2>
+        <p>
+          Must call componentWillUnmount.
+        </p>
+      </div>
+    );
+  }
+}
diff --git a/spec/dummy/client/app/startup/clientRegistration.jsx b/spec/dummy/client/app/startup/clientRegistration.jsx
@@ -9,6 +9,7 @@ import ReduxApp from './ClientReduxApp';
 import ReduxSharedStoreApp from './ClientReduxSharedStoreApp';
 import RouterApp from './ClientRouterApp';
 import PureComponent from '../components/PureComponent';
+import CacheDisabled from '../components/CacheDisabled';
 import CssModulesImagesFontsExample from '../components/CssModulesImagesFontsExample';
 import ManualRenderApp from './ManualRenderAppRenderer';
 import DeferredRenderApp from './DeferredRenderAppRenderer';
@@ -31,6 +32,7 @@ ReactOnRails.register({
   CssModulesImagesFontsExample,
   ManualRenderApp,
   DeferredRenderApp,
+  CacheDisabled
 });
 
 ReactOnRails.registerStore({

diff --git a/spec/dummy/config/routes.rb b/spec/dummy/config/routes.rb
@@ -27,4 +27,5 @@
   get "react_router(/*all)" => "react_router#index", as: :react_router
   get "pure_component" => "pages#pure_component"
   get "css_modules_images_fonts_example" => "pages#css_modules_images_fonts_example"
+  get "turbolinks_cache_disabled" => "pages#turbolinks_cache_disabled"
 end
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,5 +71,8 @@ @@
       <li>
         <%= link_to "CSS Modules Images Fonts Example", css_modules_images_fonts_example_path %>
       </li>
+      <li>
+        <%= link_to "Turbolinks Cache Disabled Example", turbolinks_cache_disabled_path %>
+      </li>
     </ul>
     <hr/>