From bd7b16e38efb6e0e1c430128b5d4afb0266c9c0c Mon Sep 17 00:00:00 2001
From: Rocka <i@rocka.me>
Date: Sun, 12 Apr 2020 20:49:55 +0800
Subject: [PATCH] renderer: remove transition and keep-alive workarounds

---
 src/renderer/App.vue                          | 17 +++--------------
 .../components/ArtistDetail/ArtistDetail.vue  | 12 +++---------
 .../components/UserDetail/UserDetail.vue      | 12 +++---------
 src/renderer/main.js                          |  2 --
 src/renderer/page/Comment/Comment.vue         | 12 +++---------
 src/renderer/page/Favorite/Favorite.vue       |  8 +-------
 src/renderer/util/keep-alive-patched.js       | 19 -------------------
 7 files changed, 13 insertions(+), 69 deletions(-)
 delete mode 100644 src/renderer/util/keep-alive-patched.js

diff --git a/src/renderer/App.vue b/src/renderer/App.vue
index 2af09e64..1e1124ec 100644
--- a/src/renderer/App.vue
+++ b/src/renderer/App.vue
@@ -2,11 +2,10 @@
     <div>
         <AppNav></AppNav>
         <div class="router-view">
-            <transition :name="transitionName"
-                @after-leave="handleAfterLeave">
-                <keep-alive-patched :include="KeepAlive">
+            <transition :name="transitionName">
+                <keep-alive :include="KeepAlive">
                     <router-view></router-view>
-                </keep-alive-patched>
+                </keep-alive>
             </transition>
         </div>
         <PlayerBar></PlayerBar>
@@ -31,16 +30,6 @@ export default {
             transitionName: 'fade-up'
         };
     },
-    methods: {
-        /** @param {HTMLElement} el */
-        handleAfterLeave(el) {
-            for (const k of this.KeepAlive) {
-                if (el.classList.contains(k)) return;
-            }
-            // clear DOM nodes to workaround memory leak issue
-            el.textContent = '';
-        }
-    },
     created() {
         this.KeepAlive = ['index', 'player', 'favorite'];
         this.$router.beforeEach((to, from, next) => {
diff --git a/src/renderer/components/ArtistDetail/ArtistDetail.vue b/src/renderer/components/ArtistDetail/ArtistDetail.vue
index 67e93116..c93cfda4 100644
--- a/src/renderer/components/ArtistDetail/ArtistDetail.vue
+++ b/src/renderer/components/ArtistDetail/ArtistDetail.vue
@@ -43,13 +43,12 @@
                 :value="tab[0]">{{tab[1]}}</mu-tab>
         </mu-tabs>
         <transition mode="out-in"
-            :name="transitionName"
-            @after-leave="handleAfterLeave">
-            <keep-alive-patched>
+            :name="transitionName">
+            <keep-alive>
                 <component :is="detailCompo"
                     :artist="artist"
                     @scroll="handleScroll"></component>
-            </keep-alive-patched>
+            </keep-alive>
         </transition>
     </div>
 </template>
@@ -151,11 +150,6 @@ export default {
             if (el) {
                 el.scrollTo({ top: 300, behavior: 'smooth' });
             }
-        },
-        /** @param {HTMLElement} el */
-        handleAfterLeave(el) {
-            // clear DOM nodes to workaround memory leak issue
-            el.textContent = '';
         }
     },
     created() {
diff --git a/src/renderer/components/UserDetail/UserDetail.vue b/src/renderer/components/UserDetail/UserDetail.vue
index 4704bed5..e6997541 100644
--- a/src/renderer/components/UserDetail/UserDetail.vue
+++ b/src/renderer/components/UserDetail/UserDetail.vue
@@ -56,13 +56,12 @@
                 :value="tab[0]">{{tab[1]}}</mu-tab>
         </mu-tabs>
         <transition mode="out-in"
-            :name="transitionName"
-            @after-leave="handleAfterLeave">
-            <keep-alive-patched>
+            :name="transitionName">
+            <keep-alive>
                 <component :is="detailCompo"
                     :user="user"
                     :isSelf="isSelf"></component>
-            </keep-alive-patched>
+            </keep-alive>
         </transition>
     </div>
 </template>
@@ -189,11 +188,6 @@ export default {
                 this.transitionName = 'slide-left';
             }
             this.tab = val;
-        },
-        /** @param {HTMLElement} el */
-        handleAfterLeave(el) {
-            // clear DOM nodes to workaround memory leak issue
-            el.textContent = '';
         }
     },
     watch: {
diff --git a/src/renderer/main.js b/src/renderer/main.js
index 894c2dc7..b4b4e17f 100644
--- a/src/renderer/main.js
+++ b/src/renderer/main.js
@@ -12,7 +12,6 @@ import routes from './routes';
 import { isLinux } from './util/globals';
 import { initTheme } from './util/theme';
 import DblclickRipple from './util/dblclick-ripple';
-import KeepAlivePatched from './util/keep-alive-patched';
 import './style.css';
 import './transition.css';
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
@@ -22,7 +21,6 @@ Vue.use(MuseUI);
 Vue.use(Toast);
 Vue.use(Message);
 Vue.use(DblclickRipple);
-Vue.use(KeepAlivePatched);
 Vue.component('RecycleScroller', RecycleScroller);
 
 try {
diff --git a/src/renderer/page/Comment/Comment.vue b/src/renderer/page/Comment/Comment.vue
index bd26afd6..7190e8c3 100644
--- a/src/renderer/page/Comment/Comment.vue
+++ b/src/renderer/page/Comment/Comment.vue
@@ -17,15 +17,14 @@
         </mu-tabs>
         <div class="list-wrapper">
             <transition mode="out-in"
-                :name="transitionName"
-                @after-leave="handleAfterLeave">
-                <keep-alive-patched>
+                :name="transitionName">
+                <keep-alive>
                     <CommentList :key="tab"
                         :thread="thread"
                         v-bind="comment[tab]"
                         @page="loadComments"
                         @reply="handleReply"></CommentList>
-                </keep-alive-patched>
+                </keep-alive>
             </transition>
         </div>
         <mu-dialog dialog-class="comment-editor-dlg"
@@ -193,11 +192,6 @@ export default {
             } else {
                 this.$toast.message(`发布评论失败 ...  ${resp.code}: ${resp.msg}`);
             }
-        },
-        /** @param {HTMLElement} el */
-        handleAfterLeave(el) {
-            // clear DOM nodes to workaround memory leak issue
-            el.textContent = '';
         }
     },
     watch: {
diff --git a/src/renderer/page/Favorite/Favorite.vue b/src/renderer/page/Favorite/Favorite.vue
index f533094a..1bdc0022 100644
--- a/src/renderer/page/Favorite/Favorite.vue
+++ b/src/renderer/page/Favorite/Favorite.vue
@@ -10,8 +10,7 @@
         </mu-tabs>
         <div class="fav-content">
             <transition mode="out-in"
-                :name="transitionName"
-                @after-leave="handleAfterLeave">
+                :name="transitionName">
                 <component :is="favCompo"></component>
             </transition>
         </div>
@@ -67,11 +66,6 @@ export default {
                 this.transitionName = 'slide-left';
             }
             this.tab = val;
-        },
-        /** @param {HTMLElement} el */
-        handleAfterLeave(el) {
-            // clear DOM nodes to workaround memory leak issue
-            el.textContent = '';
         }
     },
     created() {
diff --git a/src/renderer/util/keep-alive-patched.js b/src/renderer/util/keep-alive-patched.js
deleted file mode 100644
index 3195666f..00000000
--- a/src/renderer/util/keep-alive-patched.js
+++ /dev/null
@@ -1,19 +0,0 @@
-export default {
-    /**
-     * @param {Vue.VueConstructor} Vue
-     */
-    install(Vue) {
-        const KeepAlive = Vue.component('KeepAlive');
-        Vue.component('keep-alive-patched', {
-            extends: KeepAlive,
-            updated() {
-                const { _vnode, cache } = this;
-                for (let key in cache) {
-                    if (cache[key] && cache[key].parent && (cache[key].tag != _vnode.tag)) {
-                        cache[key].parent = null;
-                    }
-                }
-            }
-        });
-    }
-};