From ccd970aca40180d158c60fd242e8d8a2f8c47c9b Mon Sep 17 00:00:00 2001 From: Volkan Unsal Date: Sun, 25 Dec 2016 17:52:58 -0500 Subject: [PATCH] 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. --- CHANGELOG.md | 6 +++++- node_package/src/clientStartup.js | 7 +++---- spec/dummy/Gemfile | 2 -- .../app/views/layouts/application.html.erb | 2 ++ spec/dummy/app/views/pages/_header.erb | 3 +++ .../views/pages/turbolinks_cache_disabled.erb | 10 ++++++++++ .../client/app/components/CacheDisabled.js | 19 +++++++++++++++++++ .../client/app/startup/clientRegistration.jsx | 2 ++ spec/dummy/config/routes.rb | 1 + 9 files changed, 45 insertions(+), 7 deletions(-) create mode 100644 spec/dummy/app/views/pages/turbolinks_cache_disabled.erb create mode 100644 spec/dummy/client/app/components/CacheDisabled.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 5d8e7ada5..e98f52f98 100644 --- 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 index 375b8ecdd..8fcb711d6 100644 --- 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 index 7081328cd..81db57ded 100644 --- 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 index 202b1dc5c..e270efd69 100644 --- a/spec/dummy/app/views/layouts/application.html.erb +++ b/spec/dummy/app/views/layouts/application.html.erb @@ -3,6 +3,8 @@ Dummy + <%= 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 index e87f1a20e..a0834dcf8 100644 --- a/spec/dummy/app/views/pages/_header.erb +++ b/spec/dummy/app/views/pages/_header.erb @@ -71,5 +71,8 @@
  • <%= link_to "CSS Modules Images Fonts Example", css_modules_images_fonts_example_path %>
    • +
  • + <%= link_to "Turbolinks Cache Disabled Example", turbolinks_cache_disabled_path %> +
    • diff --git a/spec/dummy/app/views/pages/turbolinks_cache_disabled.erb b/spec/dummy/app/views/pages/turbolinks_cache_disabled.erb new file mode 100644 index 000000000..3e0d46e59 --- /dev/null +++ b/spec/dummy/app/views/pages/turbolinks_cache_disabled.erb @@ -0,0 +1,10 @@ +<% content_for(:head) do %> + +<% end %> + +<%= render "header" %> + +<%= react_component("CacheDisabled") %> +
    + +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 new file mode 100644 index 000000000..7f84b7328 --- /dev/null +++ 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 ( +
    +

    Turbolinks cache is disabled

    +

    + Must call componentWillUnmount. +

    +
    + ); + } +} diff --git a/spec/dummy/client/app/startup/clientRegistration.jsx b/spec/dummy/client/app/startup/clientRegistration.jsx index e18ed41be..a72c78c83 100644 --- 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 index 910cdaaca..689a4a9b6 100644 --- 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