added turbolinks support

Author: jonasjabari

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,23 +19,35 @@ import collectionOrder from '../collection/order/order'
 
 let matestackUiApp = undefined
 
-let turbolinksLoaded = false
-
-document.addEventListener('turbolinks:load', () => {
-    turbolinksLoaded = true
-    matestackUiApp = new Vue({
-        el: "#matestack_ui",
-        store: store
-    })
+// this event fires first and always
+document.addEventListener('DOMContentLoaded', () => {
+  // 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
+  })
 })
 
-document.addEventListener('DOMContentLoaded', () => {
-    if(turbolinksLoaded === false){
-        matestackUiApp = new Vue({
-            el: "#matestack_ui",
-            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

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"
   },

vendor/assets/javascripts/dist/matestack-ui-core.js

@@ -91,6 +91,18 @@ v-runtime-template@^1.5.2:
   resolved "https://registry.yarnpkg.com/v-runtime-template/-/v-runtime-template-1.10.0.tgz#8ea7066c37cf4be5c701a06ca247e1afda89c4be"
   integrity sha512-WLlq9jUepSfUrMEenw3mn7FDXX6hhbl11JjC1OKhwLzifHzVrY5a696TUHDPyj9jke3GGnR7b+2T3od/RL5cww==
 
+vue-turbolinks@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/vue-turbolinks/-/vue-turbolinks-2.1.0.tgz#fc7372d06d624aa3fb68231dc0b509719edc778f"
+  integrity sha512-Rgq9eUS2LgHVoSR58S0utW7g/aqLlVZ6uM7S1e02+xEUGKW1fqhUHQXea3p+cE59ldf+f3nz3Cc3HVO4MlrTFA==
+  dependencies:
+    vue "^2.2.4"
+
+vue@^2.2.4:
+  version "2.6.11"
+  resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.11.tgz#76594d877d4b12234406e84e35275c6d514125c5"
+  integrity sha512-VfPwgcGABbGAue9+sfrD4PuwFar7gPb1yl1UK1MwXoQPAw0BKSqWfoYCT/ThFrdEVWoI51dBuyCoiNU9bZDZxQ==
+
 vue@^2.5.17:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.10.tgz#a72b1a42a4d82a721ea438d1b6bf55e66195c637"