From 42b56e6a0fd0a8a28a9e839f1a6d9f4d7e75dab6 Mon Sep 17 00:00:00 2001
From: Sebastien Chopin <sebastien.chopin@neo9.fr>
Date: Wed, 2 Aug 2017 18:39:34 +0200
Subject: [PATCH] fix: Handle kept-alive components & vue-router transitions

---
 examples/index.html              |  1 +
 examples/keep-alive/app.js       | 34 ++++++++++++++++++++++++++++++++
 examples/keep-alive/index.html   |  5 +++++
 examples/vue-router/app.js       |  4 +++-
 examples/vue-router/index.html   |  8 ++++++++
 src/shared/getComponentOption.js |  2 ++
 src/shared/plugin.js             | 19 +++++++++++++++++-
 7 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 examples/keep-alive/app.js
 create mode 100644 examples/keep-alive/index.html
diff --git a/examples/index.html b/examples/index.html
index 54711b6..5c96d83 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -9,6 +9,7 @@
   <ul>
     <li><a href="basic">Basic</a></li>
     <li><a href="basic-render">Basic Render</a></li>
+    <li><a href="keep-alive">Keep alive</a></li>
     <li><a href="vue-router">Usage with vue-router</a></li>
     <li><a href="vuex">Usage with vuex</a></li>
     <li><a href="vuex-async">Usage with vuex + async actions</a></li>
diff --git a/examples/keep-alive/app.js b/examples/keep-alive/app.js
new file mode 100644
index 0000000..bf17f3b
--- /dev/null
+++ b/examples/keep-alive/app.js
@@ -0,0 +1,34 @@
+import Vue from 'vue'
+import VueMeta from 'vue-meta'
+
+Vue.use(VueMeta)
+
+Vue.component('foo', {
+  template: '<p>Foo component</p>',
+  metaInfo: {
+    title: 'Keep me Foo'
+  }
+})
+
+new Vue({
+  template: `
+    <div id="app">
+      <h1>Kept alive foo</h1>
+      <button @click="show">Toggle Foo</button>
+      <keep-alive>
+        <foo v-if="showFoo"/>
+      </keep-alive>
+    </div>
+  `,
+  data () {
+    return { showFoo: false }
+  },
+  methods: {
+    show () {
+      this.showFoo = !this.showFoo
+    }
+  },
+  metaInfo: () => ({
+    title: 'Keep-alive'
+  })
+}).$mount('#app')
diff --git a/examples/keep-alive/index.html b/examples/keep-alive/index.html
new file mode 100644
index 0000000..7298523
--- /dev/null
+++ b/examples/keep-alive/index.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/global.css">
+<a href="/">&larr; Examples index</a>
+<div id="app"></div>
+<script src="/__build__/keep-alive.js"></script>
diff --git a/examples/vue-router/app.js b/examples/vue-router/app.js
index 74f5c86..776462f 100644
--- a/examples/vue-router/app.js
+++ b/examples/vue-router/app.js
@@ -46,7 +46,9 @@ const App = {
       <h1>vue-router</h1>
       <router-link to="/">Home</router-link>
       <router-link to="/about">About</router-link>
-      <router-view></router-view>
+      <transition name="page" mode="out-in">
+        <router-view></router-view>
+      </transition>
       <p>Inspect Element to see the meta info</p>
     </div>
   `
diff --git a/examples/vue-router/index.html b/examples/vue-router/index.html
index cf41105..7ae5a53 100644
--- a/examples/vue-router/index.html
+++ b/examples/vue-router/index.html
@@ -3,3 +3,11 @@
 <a href="/">&larr; Examples index</a>
 <div id="app"></div>
 <script src="/__build__/vue-router.js"></script>
+<style>
+.page-enter-active, .page-leave-active {
+  transition: opacity .5s
+}
+.page-enter, .page-leave-to {
+  opacity: 0
+}
+</style>
diff --git a/src/shared/getComponentOption.js b/src/shared/getComponentOption.js
index 58e2405..cd5f644 100644
--- a/src/shared/getComponentOption.js
+++ b/src/shared/getComponentOption.js
@@ -18,6 +18,8 @@ export default function getComponentOption (opts, result = {}) {
   const { component, option, deep, arrayMerge } = opts
   const { $options } = component
 
+  if (component._inactive) return result
+
   // only collect option data if it exists
   if (typeof $options[option] !== 'undefined' && $options[option] !== null) {
     let data = $options[option]
diff --git a/src/shared/plugin.js b/src/shared/plugin.js
index c275bc0..4f321cb 100644
--- a/src/shared/plugin.js
+++ b/src/shared/plugin.js
@@ -62,6 +62,18 @@ export default function VueMeta (Vue, options = {}) {
         })
       }
     },
+    activated () {
+      if (this._hasMetaInfo) {
+        // batch potential DOM updates to prevent extraneous re-rendering
+        batchID = batchUpdate(batchID, () => this.$meta().refresh())
+      }
+    },
+    deactivated () {
+      if (this._hasMetaInfo) {
+        // batch potential DOM updates to prevent extraneous re-rendering
+        batchID = batchUpdate(batchID, () => this.$meta().refresh())
+      }
+    },
     beforeMount () {
       // batch potential DOM updates to prevent extraneous re-rendering
       if (this._hasMetaInfo) {
@@ -73,7 +85,12 @@ export default function VueMeta (Vue, options = {}) {
       if (this.$isServer) return
       // re-render meta data when returning from a child component to parent
       if (this._hasMetaInfo) {
-        batchID = batchUpdate(batchID, () => this.$meta().refresh())
+        // Wait that element is hidden before refreshing meta tags (to support animations)
+        const interval = setInterval(() => {
+          if (this.$el.offsetParent !== null) return
+          clearInterval(interval)
+          batchID = batchUpdate(batchID, () => this.$meta().refresh())
+        }, 50)
       }
     }
   })
