From 96564180798e0ed3d50f5df9e9b15f8505c37d52 Mon Sep 17 00:00:00 2001
From: Dominik Schmidt <dev@dominik-schmidt.de>
Date: Tue, 10 Jan 2023 00:24:38 +0100
Subject: [PATCH] Get rid of LifecycleMixin

It's poorly documented but there used to be `@hook:mounted/...` in Vue 2
already and now there is `@vue:mounted/...` let's use that instead of our
own custom lifecycle mixin
---
 .../src/components/SideBar/SideBar.vue        |  4 +-
 packages/web-runtime/src/App.vue              |  4 +-
 packages/web-runtime/src/defaults/vue.js      |  2 -
 .../web-runtime/src/mixins/lifecycleMixin.js  | 12 ----
 .../tests/unit/mixins/lifecycleMixin.spec.ts  | 56 -------------------
 5 files changed, 4 insertions(+), 74 deletions(-)
 delete mode 100644 packages/web-runtime/src/mixins/lifecycleMixin.js
 delete mode 100644 packages/web-runtime/tests/unit/mixins/lifecycleMixin.spec.ts

diff --git a/packages/web-app-files/src/components/SideBar/SideBar.vue b/packages/web-app-files/src/components/SideBar/SideBar.vue
index b27ff8e3907..f52dc8221a4 100644
--- a/packages/web-app-files/src/components/SideBar/SideBar.vue
+++ b/packages/web-app-files/src/components/SideBar/SideBar.vue
@@ -13,8 +13,8 @@
     :is-header-compact="isSingleResource"
     v-bind="$attrs"
     data-custom-key-bindings="true"
-    @beforeUnmount="destroySideBar"
-    @mounted="focusSideBar"
+    @vue:beforeUnmount="destroySideBar"
+    @vue:mounted="focusSideBar"
     @fileChanged="focusSideBar"
     @selectPanel="setActiveSideBarPanel"
     @close="closeSideBar"
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
index b2db66d97a4..0fd1494e765 100644
--- a/packages/web-runtime/src/App.vue
+++ b/packages/web-runtime/src/App.vue
@@ -32,8 +32,8 @@
       @input="modal.onInput"
       @checkbox-changed="modal.onCheckboxValueChanged"
       @confirm-secondary="modal.onConfirmSecondary"
-      @mounted="focusModal"
-      @beforeUnmount="focusModal"
+      @vue:mounted="focusModal"
+      @vue:beforeUnmount="focusModal"
     >
       <template v-if="modal.customContent" #content>
         <div v-html="modal.customContent"></div>
diff --git a/packages/web-runtime/src/defaults/vue.js b/packages/web-runtime/src/defaults/vue.js
index 2f12418b766..b51a2e84b8b 100644
--- a/packages/web-runtime/src/defaults/vue.js
+++ b/packages/web-runtime/src/defaults/vue.js
@@ -3,7 +3,6 @@ import Vue from 'vue'
 import WebPlugin from '../plugins/web'
 import Avatar from '../components/Avatar.vue'
 import focusMixin from '../mixins/focusMixin'
-import lifecycleMixin from '../mixins/lifecycleMixin'
 import VueEvents from 'vue-events'
 import VueScrollTo from 'vue-scrollto'
 import VueResize from 'vue-resize'
@@ -28,7 +27,6 @@ Vue.use(AsyncComputed)
 Vue.component('AvatarImage', Avatar)
 
 Vue.mixin(focusMixin)
-Vue.mixin(lifecycleMixin)
 
 // externalize Vue - this is not the Vue instance but the class
 window.Vue = Vue
diff --git a/packages/web-runtime/src/mixins/lifecycleMixin.js b/packages/web-runtime/src/mixins/lifecycleMixin.js
deleted file mode 100644
index e2b890a758a..00000000000
--- a/packages/web-runtime/src/mixins/lifecycleMixin.js
+++ /dev/null
@@ -1,12 +0,0 @@
-export default {
-  emits: ['beforeUnmount', 'mounted', 'updated'],
-  mounted() {
-    this.$nextTick(() => this.$emit('mounted', this, 'mounted'))
-  },
-  beforeUnmount() {
-    this.$emit('beforeUnmount', this, 'beforeUnmount')
-  },
-  updated() {
-    this.$nextTick(() => this.$emit('updated', this, 'updated'))
-  }
-}
diff --git a/packages/web-runtime/tests/unit/mixins/lifecycleMixin.spec.ts b/packages/web-runtime/tests/unit/mixins/lifecycleMixin.spec.ts
deleted file mode 100644
index 1dd7f83ec64..00000000000
--- a/packages/web-runtime/tests/unit/mixins/lifecycleMixin.spec.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import lifecycleMixin from '../../../src/mixins/lifecycleMixin'
-import { mount } from 'web-test-helpers'
-import { defineComponent } from 'vue'
-
-const Component = defineComponent({
-  name: 'DummyComponent',
-  mixins: [lifecycleMixin],
-  data: () => ({
-    id: 'dummy'
-  }),
-  template: '<div v-bind:id="id">{{id}}</div>'
-})
-
-describe('livecycleMixin', () => {
-  it('handles mounted', async () => {
-    const { wrapper } = getWrapper()
-    const wrapperComponent = wrapper.findComponent({ name: 'DummyComponent' })
-
-    await wrapper.vm.$nextTick()
-    const event = 'mounted'
-    const [emittedComponent, emittedEvent] = wrapper.emitted(event)[0]
-    expect((emittedComponent as any).$el.outerHTML).toBe(wrapperComponent.html())
-    expect(emittedEvent).toBe(event)
-  })
-
-  // FIXME
-  it.skip('handles updated', async () => {
-    const { wrapper } = getWrapper()
-    const wrapperComponent = wrapper.findComponent({ name: 'DummyComponent' })
-
-    const event = 'updated'
-    wrapperComponent.vm.$data.id = event
-    await wrapper.vm.$nextTick()
-    const [emittedComponent, emittedEvent] = wrapper.emitted(event)[0]
-    expect((emittedComponent as any).$el.outerHTML).toBe(wrapperComponent.html())
-    expect(emittedEvent).toBe(event)
-  })
-
-  it('handles beforeUnmount', async () => {
-    const { wrapper } = getWrapper()
-    const wrapperComponent = wrapper.findComponent({ name: 'DummyComponent' })
-
-    const event = 'beforeUnmount'
-    wrapper.unmount()
-    await wrapper.vm.$nextTick()
-    const [emittedComponent, emittedEvent] = wrapper.emitted(event)[0]
-    expect((emittedComponent as any).$el.outerHTML).toBe(wrapperComponent.element.outerHTML)
-    expect(emittedEvent).toBe(event)
-  })
-})
-
-function getWrapper() {
-  return {
-    wrapper: mount(Component, {})
-  }
-}