fix(comments): Extend Vue before calling `new` on it

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Signed-off-by: Louis Chemineau <louis@chmn.me>

1 files changed, 15 insertions, 10 deletions

diff --git a/apps/comments/src/comments-activity-tab.ts b/apps/comments/src/comments-activity-tab.ts
index f67f702d97b..f38484d25e7 100644
--- a/apps/comments/src/comments-activity-tab.ts
+++ b/apps/comments/src/comments-activity-tab.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 import moment from '@nextcloud/moment'
-import Vue from 'vue'
+import Vue, { type ComponentPublicInstance } from 'vue'
 import logger from './logger.js'
 import { getComments } from './services/GetComments.js'
 
@@ -23,18 +23,19 @@ export function registerCommentsPlugins() {
 			const pinia = createPinia()
 
 			if (!ActivityTabPluginView) {
-				const { default: ActivityCommmentAction } = await import('./views/ActivityCommentAction.vue')
-				ActivityTabPluginView = ActivityCommmentAction
+				const { default: ActivityCommentAction } = await import('./views/ActivityCommentAction.vue')
+				/** @ts-expect-error Types are broken for Vue2 */
+				ActivityTabPluginView = Vue.extend(ActivityCommentAction)
 			}
 			ActivityTabPluginInstance = new ActivityTabPluginView({
+				el,
 				parent: context,
+				pinia,
 				propsData: {
 					reloadCallback: reload,
 					resourceId: fileInfo.id,
 				},
-				pinia,
 			})
-			ActivityTabPluginInstance.$mount(el)
 			logger.info('Comments plugin mounted in Activity sidebar action', { fileInfo })
 		},
 		unmount: () => {
@@ -49,12 +50,17 @@ export function registerCommentsPlugins() {
 		const { data: comments } = await getComments({ resourceType: 'files', resourceId: fileInfo.id }, { limit, offset })
 		logger.debug('Loaded comments', { fileInfo, comments })
 		const { default: CommentView } = await import('./views/ActivityCommentEntry.vue')
-		const CommentsViewObject = CommentView
+		/** @ts-expect-error Types are broken for Vue2 */
+		const CommentsViewObject = Vue.extend(CommentView)
 
 		return comments.map((comment) => ({
-			timestamp: moment(comment.props.creationDateTime).toDate().getTime(),
-			mount(element, { context, reload }) {
+			_CommentsViewInstance: undefined as ComponentPublicInstance | undefined,
+
+			timestamp: moment(comment.props?.creationDateTime).toDate().getTime(),
+
+			mount(element: HTMLElement, { context, reload }) {
 				this._CommentsViewInstance = new CommentsViewObject({
+					el: element,
 					parent: context,
 					propsData: {
 						comment,
@@ -62,10 +68,9 @@ export function registerCommentsPlugins() {
 						reloadCallback: reload,
 					},
 				})
-				this._CommentsViewInstance.$mount(element)
 			},
 			unmount() {
-				this._CommentsViewInstance.$destroy()
+				this._CommentsViewInstance?.$destroy()
 			},
 		}))
 	})