Merge pull request #378 from matestack/232

#232: added turbolinks handler

Author: jonasjabari

Gemfile

@@ -29,6 +29,7 @@ group :development, :test do
   gem 'webmock'
   gem 'pry-rails'
   gem 'pry-byebug'
+  gem 'turbolinks'
 end
 
 group :test do

Gemfile.lock

@@ -237,6 +237,9 @@ GEM
       reform-rails (>= 0.1.4, < 0.2.0)
       trailblazer (~> 2.0.0)
       trailblazer-loader (>= 0.1.0)
+    turbolinks (5.2.1)
+      turbolinks-source (~> 5.2)
+    turbolinks-source (5.2.0)
     tzinfo (1.2.6)
       thread_safe (~> 0.1)
     uber (0.1.0)
@@ -276,6 +279,7 @@ DEPENDENCIES
   trailblazer
   trailblazer-cells
   trailblazer-rails
+  turbolinks
   webmock
   webpacker (~> 4.0)
 

app/concepts/matestack/ui/core/app/store.js

@@ -20,6 +20,9 @@ const store = new Vuex.Store({
       state.currentPathName = current.path
       state.currentSearch = current.search
       state.currentOrigin = current.origin
+    },
+    resetPageTemplate (state) {
+      state.pageTemplate = null;
     }
   },
   actions: {

app/concepts/matestack/ui/core/js/core.js

@@ -1,4 +1,5 @@
 import Vue from 'vue/dist/vue.esm'
+import { turbolinksAdapterMixin } from 'vue-turbolinks';
 
 // Import from app/concepts/matestack/ui/core:
 import app from '../app/app'
@@ -18,13 +19,35 @@ import collectionOrder from '../collection/order/order'
 
 let matestackUiApp = undefined
 
+// this event fires first and always
 document.addEventListener('DOMContentLoaded', () => {
-
-    matestackUiApp = new Vue({
+  // somehow we need to inject the turbolinks mixin even
+  // if the turbolinks:load event will recreate the vue instance
+  // skipping the injection here caused errors when submitting forms or action
+  // if they were present on the first page, which was loaded and activated turbolinks
+  // the mixin does not impact the app when turbolinks is disabled
+  matestackUiApp = new Vue({
       el: "#matestack_ui",
+      mixins: [turbolinksAdapterMixin],
       store: store
-    })
+  })
+})
 
+// this event fires after DOMContentLoaded and only if turbolinks are enabled
+document.addEventListener('turbolinks:load', () => {
+  // we need to empty the currently stored pageTemplate state variable
+  // otherwise the matestack page will jump back to the latest pageTemplate
+  // fetched during the last matestack transition as the turbolinks powered
+  // page transition does not write the matestack store pageTemplate state variable
+  store.commit('resetPageTemplate')
+  // we need to destroy the vue app instance
+  matestackUiApp.$destroy();
+  // and recreate it right afterwards in order to work when used with turbolinks
+  matestackUiApp = new Vue({
+      el: "#matestack_ui",
+      mixins: [turbolinksAdapterMixin],
+      store: store
+  })
 })
 
 export default Vue

docs/install/README.md

@@ -65,9 +65,11 @@ Require 'matestack-ui-core' in your `app/assets/stylesheets/application.css`
  */
 ```
 
-### Turbolinks Coming Soon
+### Turbolinks
 
-At the moment, matestack-ui-core is not compatible with [turbolinks](https://github.com/turbolinks/turbolinks). Please remove or deactive turbolinks for now. We are working on turbolinks support and will add it soon. ([Issue #232](https://github.com/matestack/matestack-ui-core/issues/232))
+Since `0.7.5`, matestack-ui-core is compatible with activated [turbolinks](https://github.com/turbolinks/turbolinks).
+
+We recommend to (remove/deactivate)(https://stackoverflow.com/a/38649595) turbolinks, as there is no real reason to use it alongside matetack-ui-core UI dynamics and there might appear some strange side effects. If you encounter strange page-transition/form-submit/action-submit behavior and have turbolinks activated, try to deactivate it first.
 
 ## Matestack Folder
 

package.json

@@ -8,12 +8,13 @@
     "link-module-alias": "^1.2.0",
     "v-runtime-template": "^1.5.2",
     "vue": "^2.5.17",
+    "vue-turbolinks": "^2.1.0",
     "vuex": "^3.0.1",
     "yarn": "^1.22.0"
   },
   "exports": {
     "./concepts/": "./app/concepts/matestack/ui/core/"
-  },  
+  },
   "scripts": {
     "postinstall": "link-module-alias"
   },

spec/dummy/app/assets/javascripts/application.js

@@ -13,7 +13,7 @@
 //= require rails-ujs
 //= require activestorage
 //= require matestack-ui-core
-//= require_tree .
+//= require cable
 
 //= require demo/component
 

spec/dummy/app/assets/javascripts/application_with_turbolinks.js

@@ -0,0 +1,25 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// compiled file. JavaScript code in this file should be added after the last require_* statement.
+//
+// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
+// about supported directives.
+//
+//= require rails-ujs
+//= require activestorage
+//= require turbolinks
+//= require matestack-ui-core
+//= require cable
+
+//= require demo/component
+
+App.cable.subscriptions.create("MatestackUiCoreChannel", {
+  received(data) {
+    MatestackUiCore.matestackEventHub.$emit('MatestackUiCoreChannel', data)
+  }
+});

spec/dummy/app/views/layouts/application_with_turbolinks.html.erb

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Dummy</title>
+    <%= csrf_meta_tags %>
+    <%= csp_meta_tag %>
+
+    <%= stylesheet_link_tag    'application', media: 'all' %>
+    <%= javascript_include_tag 'application_with_turbolinks' %>
+  </head>
+
+  <body>
+    <div id="matestack_ui">
+      <%= yield %>
+    </div>
+  </body>
+</html>

spec/dummy/config/initializers/assets.rb

@@ -12,4 +12,4 @@
 # Precompile additional assets.
 # application.js, application.css, and all non-JS/CSS in the app/assets
 # folder are already added.
-# Rails.application.config.assets.precompile += %w( admin.js admin.css )
+Rails.application.config.assets.precompile += %w( application_with_turbolinks.js )

spec/dummy/yarn.lock

@@ -4371,7 +4371,7 @@ matestack-ui-core@../../:
     v-runtime-template "^1.5.2"
     vue "^2.5.17"
     vuex "^3.0.1"
-    yarn "^1.17.3"
+    yarn "^1.22.0"
 
 md5.js@^1.3.4:
   version "1.3.5"
@@ -7870,7 +7870,7 @@ yargs@^7.0.0:
     y18n "^3.2.1"
     yargs-parser "^5.0.0"
 
-yarn@^1.17.3:
-  version "1.22.0"
-  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.0.tgz#acf82906e36bcccd1ccab1cfb73b87509667c881"
-  integrity sha512-KMHP/Jq53jZKTY9iTUt3dIVl/be6UPs2INo96+BnZHLKxYNTfwMmlgHTaMWyGZoO74RI4AIFvnWhYrXq2USJkg==
+yarn@^1.22.0:
+  version "1.22.4"
+  resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.4.tgz#01c1197ca5b27f21edc8bc472cd4c8ce0e5a470e"
+  integrity sha512-oYM7hi/lIWm9bCoDMEWgffW8aiNZXCWeZ1/tGy0DWrN6vmzjCXIKu2Y21o8DYVBUtiktwKcNoxyGl/2iKLUNGA==

spec/spec_helper.rb

@@ -39,7 +39,7 @@
 require 'pry'
 
 require 'rspec/retry'
-require "rspec/wait"  
+require "rspec/wait"
 
 RSpec.configure do |config|
   # repeat flaky tests
@@ -50,14 +50,14 @@
 
   # run retry only on features
   config.around :each, :js do |ex|
-    ex.run_with_retry retry: 10
+    ex.run_with_retry retry: 3
   end
 
-  # callback to be run between retries  
+  # callback to be run between retries
   config.retry_callback = proc do |ex|
     # run some additional clean up task - can be filtered by example metadata
     if ex.metadata[:js]
-      Capybara.reset!     
+      Capybara.reset!
     end
   end
   # config.include Capybara::DSL

spec/usage/integrations/turbolinks_integration_spec.rb

@@ -0,0 +1,145 @@
+describe "Turbolinks integration", type: :feature, js: true do
+
+  class TestController < ActionController::Base
+
+    before_action :check_params
+
+    def check_params
+      expect_params(params.permit!.to_h)
+    end
+
+    def expect_params(params)
+    end
+
+  end
+
+  it "Matestack can be used with turbolinks" do
+
+    module Apps
+    end
+
+    class Apps::TurbolinksTest < Matestack::Ui::App
+      def response
+        components {
+          nav do
+            link path: :turbolinks1_path do
+              button text: "Link to Page 1"
+            end
+            transition path: :turbolinks2_path do
+              button text: "Transition to Page 2"
+            end
+            link path: :turbolinks3_path do
+              button text: "Link to Page 3"
+            end
+          end
+          main do
+            page_content
+          end
+        }
+      end
+    end
+
+    module Pages::TurbolinksTest
+    end
+
+    class Pages::TurbolinksTest::Page1 < Matestack::Ui::Page
+      def response
+        components {
+          plain "Hello from matestack with turbolinks - Page 1"
+        }
+      end
+    end
+    class Pages::TurbolinksTest::Page2 < Matestack::Ui::Page
+      def response
+        components {
+          plain "Hello from matestack with turbolinks - Page 2"
+        }
+      end
+    end
+    class Pages::TurbolinksTest::Page3 < Matestack::Ui::Page
+      def response
+        components {
+          plain "Hello from matestack with turbolinks - Page 3"
+          action action_config do
+            button text: "click me"
+          end
+        }
+      end
+
+      def action_config
+        return {
+          method: :post,
+          path: :action_test_path,
+          data: {
+            foo: "bar"
+          }
+        }
+      end
+    end
+
+    Rails.application.routes.append do
+      get '/turbolinks1', to: 'turbolinks_test#page1', as: :turbolinks1
+      get '/turbolinks2', to: 'turbolinks_test#page2', as: :turbolinks2
+      get '/turbolinks3', to: 'turbolinks_test#page3', as: :turbolinks3
+      post '/action_test', to: 'action_test#test'
+    end
+    Rails.application.reload_routes!
+
+    class TurbolinksTestController < ActionController::Base
+      layout "application_with_turbolinks"
+
+      include Matestack::Ui::Core::ApplicationHelper
+
+      def page1
+        responder_for(Pages::TurbolinksTest::Page1)
+      end
+      def page2
+        responder_for(Pages::TurbolinksTest::Page2)
+      end
+      def page3
+        responder_for(Pages::TurbolinksTest::Page3)
+      end
+    end
+
+    class ActionTestController < TestController
+
+      def test
+        render json: {}, status: 200
+      end
+
+    end
+    allow_any_instance_of(ActionTestController).to receive(:expect_params)
+
+
+    visit "/turbolinks1"
+
+    expect(page).to have_text "Hello from matestack with turbolinks - Page 1"
+
+    click_button "Transition to Page 2"
+
+    expect(page).to have_text "Hello from matestack with turbolinks - Page 2"
+
+    click_button "Link to Page 1"
+
+    expect(page).to have_text "Hello from matestack with turbolinks - Page 1"
+
+    click_button "Transition to Page 2"
+
+    expect(page).to have_text "Hello from matestack with turbolinks - Page 2"
+
+    click_button "Link to Page 1"
+
+    expect(page).to have_text "Hello from matestack with turbolinks - Page 1"
+
+    visit "/turbolinks3"
+
+    expect(page).to have_text "Hello from matestack with turbolinks - Page 3"
+
+    expect_any_instance_of(ActionTestController).to receive(:expect_params)
+      .with(hash_including(:foo => "bar"))
+
+    click_button "click me"
+
+    expect(page).to have_text "Hello from matestack with turbolinks - Page 3"
+  end
+end