chore(vue3): migrate async component registration and remove $childrenchore/vue3-async-components

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

3 files changed, 15 insertions, 17 deletions

diff --git a/src/FilesSidebarCallViewApp.vue b/src/FilesSidebarCallViewApp.vue
index 6dc766270..a2333683d 100644
--- a/src/FilesSidebarCallViewApp.vue
+++ b/src/FilesSidebarCallViewApp.vue
@@ -15,6 +15,8 @@
 </template>
 
 <script>
+import { defineComponent, defineAsyncComponent, h } from 'vue'
+
 import LoadingComponent from './components/LoadingComponent.vue'
 
 import { useHashCheck } from './composables/useHashCheck.js'
@@ -22,17 +24,14 @@ import { useIsInCall } from './composables/useIsInCall.js'
 import { useSessionIssueHandler } from './composables/useSessionIssueHandler.js'
 
 export default {
-
 	name: 'FilesSidebarCallViewApp',
 
 	components: {
-		CallView: () => ({
-			component: import(/* webpackChunkName: "files-sidebar-call-chunk" */'./components/CallView/CallView.vue'),
-			loading: {
-				render: (h) => h(LoadingComponent, { class: 'call-loading' }),
-			},
+		CallView: defineAsyncComponent({
+			loader: () => import(/* webpackChunkName: "files-sidebar-call-chunk" */'./components/CallView/CallView.vue'),
+			loadingComponent: defineComponent(() => h(LoadingComponent, { class: 'call-loading' })),
 		}),
-		TopBar: () => import(/* webpackChunkName: "files-sidebar-call-chunk" */'./components/TopBar/TopBar.vue'),
+		TopBar: defineAsyncComponent(() => import(/* webpackChunkName: "files-sidebar-call-chunk" */'./components/TopBar/TopBar.vue')),
 	},
 
 	setup() {
diff --git a/src/FilesSidebarTabApp.vue b/src/FilesSidebarTabApp.vue
index 9f210e2b0..bfb6f9e70 100644
--- a/src/FilesSidebarTabApp.vue
+++ b/src/FilesSidebarTabApp.vue
@@ -27,6 +27,7 @@
 </template>
 
 <script>
+import { defineComponent, defineAsyncComponent, h } from 'vue'
 
 import { getCurrentUser } from '@nextcloud/auth'
 import Axios from '@nextcloud/axios'
@@ -51,11 +52,9 @@ export default {
 	name: 'FilesSidebarTabApp',
 
 	components: {
-		FilesSidebarChatView: () => ({
-			component: import(/* webpackChunkName: "files-sidebar-tab-chunk" */'./views/FilesSidebarChatView.vue'),
-			loading: {
-				render: (h) => h(LoadingComponent, { class: 'tab-loading' }),
-			},
+		FilesSidebarChatView: defineAsyncComponent({
+			loader: () => import(/* webpackChunkName: "files-sidebar-tab-chunk" */'./views/FilesSidebarChatView.vue'),
+			loadingComponent: defineComponent(() => h(LoadingComponent, { class: 'tab-loading' })),
 		}),
 		NcButton,
 	},
diff --git a/src/views/FilesSidebarCallView.js b/src/views/FilesSidebarCallView.js
index f51d704d7..8a7d1f9e4 100644
--- a/src/views/FilesSidebarCallView.js
+++ b/src/views/FilesSidebarCallView.js
@@ -17,12 +17,12 @@
 export default class FilesSidebarCallView {
 
 	constructor() {
-		this.callViewInstance = OCA.Talk.newCallView()
+		const callViewApp = OCA.Talk.newCallView()
 
-		this.$el = document.createElement('div')
-		this.id = 'FilesSidebarCallView'
+		const container = document.createElement('div')
+		container.id = 'FilesSidebarCallView'
 
-		this.callViewInstance.mount(this.$el)
+		this.callViewInstance = callViewApp.mount(container)
 		this.$el = this.callViewInstance.$el
 
 		this.$el.replaceAll = function(target) {
@@ -33,7 +33,7 @@ export default class FilesSidebarCallView {
 	setFileInfo(fileInfo) {
 		// The FilesSidebarCallViewApp is the first (and only) child of the Vue
 		// instance.
-		this.callViewInstance.$children[0].setFileInfo(fileInfo)
+		this.callViewInstance.setFileInfo(fileInfo)
 	}
 
 }