From 77ce0990086ee097648c9e33d69d859491ad2b44 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Fri, 19 Jul 2024 17:46:46 +0200
Subject: [PATCH] fix(comments): Extend Vue before calling `new` on it

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 apps/comments/src/comments-activity-tab.ts | 24 ++++++++++++++--------
 1 file changed, 15 insertions(+), 9 deletions(-)

diff --git a/apps/comments/src/comments-activity-tab.ts b/apps/comments/src/comments-activity-tab.ts
index f67f702d97bc9..ab6882881b232 100644
--- a/apps/comments/src/comments-activity-tab.ts
+++ b/apps/comments/src/comments-activity-tab.ts
@@ -3,11 +3,12 @@
  * 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'
 
 import { PiniaVuePlugin, createPinia } from 'pinia'
+import type { ExtendedVue } from 'vue/types/vue'
 
 Vue.use(PiniaVuePlugin)
 
@@ -24,17 +25,18 @@ export function registerCommentsPlugins() {
 
 			if (!ActivityTabPluginView) {
 				const { default: ActivityCommmentAction } = await import('./views/ActivityCommentAction.vue')
-				ActivityTabPluginView = ActivityCommmentAction
+				/** @ts-expect-error Types are broken for Vue2 */
+				ActivityTabPluginView = Vue.extend(ActivityCommmentAction)
 			}
 			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 +51,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 +69,9 @@ export function registerCommentsPlugins() {
 						reloadCallback: reload,
 					},
 				})
-				this._CommentsViewInstance.$mount(element)
 			},
 			unmount() {
-				this._CommentsViewInstance.$destroy()
+				this._CommentsViewInstance?.$destroy()
 			},
 		}))
 	})