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>

diff --git a/apps/comments/src/comments-activity-tab.ts b/apps/comments/src/comments-activity-tab.ts
index f67f702d97bc9e18578f7decd182571b2723bcf5..f38484d25e77aed29249dfdf08f81c4f3148623f 100644 (file)
--- 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()
                        },
                }))
        })