refactor(comments): migrate to Vue 3

apps/comments/lib/Listener/LoadSidebarScripts.php

@@ -34,7 +34,8 @@
 		$this->commentsManager->load();
 
 		$this->initialState->provideInitialState('activityEnabled', $this->appManager->isEnabledForUser('activity'));
-		// Add comments sidebar tab script
+		// Add comments sidebar tab script/style
+		Util::addStyle(Application::APP_ID, 'comments-tab', 'files');
 		Util::addScript(Application::APP_ID, 'comments-tab', 'files');
 	}
 }

apps/comments/src/actions/inlineUnreadCommentsAction.spec.ts

@@ -7,7 +7,7 @@ import type { IFolder, IView } from '@nextcloud/files'
 
 import { File, Permission } from '@nextcloud/files'
 import { describe, expect, test, vi } from 'vitest'
-import logger from '../logger.js'
+import logger from '../logger.ts'
 import { action } from './inlineUnreadCommentsAction.ts'
 
 const view = {

apps/comments/src/actions/inlineUnreadCommentsAction.ts

@@ -8,8 +8,8 @@ import type { IFileAction } from '@nextcloud/files'
 import CommentProcessingSvg from '@mdi/svg/svg/comment-processing.svg?raw'
 import { getSidebar } from '@nextcloud/files'
 import { n, t } from '@nextcloud/l10n'
-import logger from '../logger.js'
-import { isUsingActivityIntegration } from '../utils/activity.js'
+import logger from '../logger.ts'
+import { isUsingActivityIntegration } from '../utils/activity.ts'
 
 export const action: IFileAction = {
 	id: 'comments-unread',

apps/comments/src/comments-activity-tab.ts

@@ -6,44 +6,38 @@
 import type { INode } from '@nextcloud/files'
 
 import moment from '@nextcloud/moment'
-import { createPinia, PiniaVuePlugin } from 'pinia'
-import Vue, { type ComponentPublicInstance } from 'vue'
-import logger from './logger.js'
-import { getComments } from './services/GetComments.js'
-
-Vue.use(PiniaVuePlugin)
-
-let ActivityTabPluginView
-let ActivityTabPluginInstance
+import { createPinia } from 'pinia'
+import { createApp, type ComponentPublicInstance } from 'vue'
+import logger from './logger.ts'
+import { getComments } from './services/GetComments.ts'
 
 /**
  * Register the comments plugins for the Activity sidebar
  */
 export function registerCommentsPlugins() {
+	let app
+
 	window.OCA.Activity.registerSidebarAction({
 		mount: async (el: HTMLElement, { node, reload }: { node: INode, reload: () => void }) => {
 			const pinia = createPinia()
 
-			if (!ActivityTabPluginView) {
+			if (!app) {
 				const { default: ActivityCommentAction } = await import('./views/ActivityCommentAction.vue')
-				// @ts-expect-error Types are broken for Vue2
-				ActivityTabPluginView = Vue.extend(ActivityCommentAction)
+				app = createApp(
+					ActivityCommentAction,
+					{
+						reloadCallback: reload,
+						resourceId: node.fileid,
+					},
+				)
 			}
-			ActivityTabPluginInstance = new ActivityTabPluginView({
-				el,
-				pinia,
-				propsData: {
-					reloadCallback: reload,
-					resourceId: node.fileid,
-				},
-			})
+			app.use(pinia)
+			app.mount(el)
 			logger.info('Comments plugin mounted in Activity sidebar action', { node })
 		},
 		unmount: () => {
 			// destroy previous instance if available
-			if (ActivityTabPluginInstance) {
-				ActivityTabPluginInstance.$destroy()
-			}
+			app?.unmount()
 		},
 	})
 
@@ -57,26 +51,25 @@ export function registerCommentsPlugins() {
 		)
 		logger.debug('Loaded comments', { node, comments })
 		const { default: CommentView } = await import('./views/ActivityCommentEntry.vue')
-		// @ts-expect-error Types are broken for Vue2
-		const CommentsViewObject = Vue.extend(CommentView)
 
 		return comments.map((comment) => ({
 			_CommentsViewInstance: undefined as ComponentPublicInstance | undefined,
 
 			timestamp: moment(comment.props?.creationDateTime).toDate().getTime(),
 
 			mount(element: HTMLElement, { reload }) {
-				this._CommentsViewInstance = new CommentsViewObject({
-					el: element,
-					propsData: {
+				this._CommentsViewInstance = createApp(
+					CommentView,
+					{
 						comment,
 						resourceId: node.fileid,
 						reloadCallback: reload,
 					},
-				})
+				)
+				this._CommentsViewInstance.mount(el)
 			},
 			unmount() {
-				this._CommentsViewInstance?.$destroy()
+				this._CommentsViewInstance?.unmount()
 			},
 		}))
 	})

apps/comments/src/comments-app.js → apps/comments/src/comments-app.ts

@@ -3,8 +3,8 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import logger from './logger.js'
-import CommentsInstance from './services/CommentsInstance.js'
+import logger from './logger.ts'
+import CommentsInstance from './services/CommentsInstance.ts'
 
 // Init Comments
 if (window.OCA && !window.OCA.Comments) {

apps/comments/src/components/Comment.vue

@@ -75,7 +75,7 @@
 						:model-value="localMessage"
 						:user-data="userData"
 						aria-describedby="tab-comments__editor-description"
-						@update:value="updateLocalMessage"
+						@update:model-value="updateLocalMessage"
 						@submit="onSubmit" />
 					<div class="comment__submit">
 						<NcButton
@@ -104,7 +104,7 @@
 				:text="richContent.message"
 				:arguments="richContent.mentions"
 				use-markdown
-				@click.native="onExpand" />
+				@click="onExpand" />
 		</div>
 	</component>
 </template>
@@ -125,8 +125,8 @@ import IconArrowRight from 'vue-material-design-icons/ArrowRight.vue'
 import IconClose from 'vue-material-design-icons/Close.vue'
 import IconPencilOutline from 'vue-material-design-icons/PencilOutline.vue'
 import IconTrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
-import CommentMixin from '../mixins/CommentMixin.js'
-import { useDeletedCommentLimbo } from '../store/deletedCommentLimbo.js'
+import CommentMixin from '../mixins/CommentMixin.ts'
+import { useDeletedCommentLimbo } from '../store/deletedCommentLimbo.ts'
 
 // Dynamic loading
 const NcRichContenteditable = () => import('@nextcloud/vue/components/NcRichContenteditable')

apps/comments/src/files-sidebar.ts

@@ -7,9 +7,9 @@ import MessageReplyText from '@mdi/svg/svg/message-reply-text.svg?raw'
 import { getCSPNonce } from '@nextcloud/auth'
 import { registerSidebarTab } from '@nextcloud/files'
 import { t } from '@nextcloud/l10n'
-import wrap from '@vue/web-component-wrapper'
-import { createPinia, PiniaVuePlugin } from 'pinia'
-import Vue from 'vue'
+import { createPinia } from 'pinia'
+import { defineCustomElement, h, createApp, getCurrentInstance } from 'vue'
+import { createWebComponent } from 'vue-web-component-wrapper'
 import { registerCommentsPlugins } from './comments-activity-tab.ts'
 import { isUsingActivityIntegration } from './utils/activity.ts'
 
@@ -32,17 +32,28 @@ if (isUsingActivityIntegration()) {
 		async onInit() {
 			const { default: FilesSidebarTab } = await import('./views/FilesSidebarTab.vue')
 
-			Vue.use(PiniaVuePlugin)
-			Vue.mixin({ pinia: createPinia() })
-			const webComponent = wrap(Vue, FilesSidebarTab)
-			// In Vue 2, wrap doesn't support disabling shadow. Disable with a hack
-			Object.defineProperty(webComponent.prototype, 'attachShadow', {
-				value() { return this },
-			})
-			Object.defineProperty(webComponent.prototype, 'shadowRoot', {
-				get() { return this },
+			const pluginsWrapper = {
+			  install(GivenVue: any) {
+					const Vue = GivenVue
+
+					Vue.mixin({ pinia: createPinia() })
+				},
+			}
+
+			createWebComponent({
+				rootComponent: FilesSidebarTab,
+				elementName: tagName,
+				plugins: pluginsWrapper,
+				cssFrameworkStyles: null,
+				defineCustomElement,
+				h,
+				createApp,
+				getCurrentInstance,
+				disableStyleRemoval: false,
+				disableShadowDOM: true,
+				replaceRootWithHostInCssFramework: false,
+				nonce: __webpack_nonce__,
 			})
-			window.customElements.define(tagName, webComponent)
 		},
 	})
 }

apps/comments/src/mixins/CommentMixin.js → apps/comments/src/mixins/CommentMixin.ts

@@ -5,11 +5,11 @@
 
 import { showError, showUndo, TOAST_UNDO_TIMEOUT } from '@nextcloud/dialogs'
 import { mapStores } from 'pinia'
-import logger from '../logger.js'
-import DeleteComment from '../services/DeleteComment.js'
-import EditComment from '../services/EditComment.js'
-import NewComment from '../services/NewComment.js'
-import { useDeletedCommentLimbo } from '../store/deletedCommentLimbo.js'
+import logger from '../logger.ts'
+import DeleteComment from '../services/DeleteComment.ts'
+import EditComment from '../services/EditComment.ts'
+import NewComment from '../services/NewComment.ts'
+import { useDeletedCommentLimbo } from '../store/deletedCommentLimbo.ts'
 
 export default {
 	props: {

apps/comments/src/services/CommentsInstance.js → apps/comments/src/services/CommentsInstance.ts

@@ -5,49 +5,46 @@
 
 import { getCSPNonce } from '@nextcloud/auth'
 import { n, t } from '@nextcloud/l10n'
-import { createPinia, PiniaVuePlugin } from 'pinia'
-import Vue from 'vue'
+import { createPinia } from 'pinia'
+import { createApp } from 'vue'
 import CommentsApp from '../views/Comments.vue'
-import logger from '../logger.js'
-
-Vue.use(PiniaVuePlugin)
+import logger from '../logger.ts'
 
 __webpack_nonce__ = getCSPNonce()
 
-// Add translates functions
-Vue.mixin({
-	data() {
-		return {
-			logger,
-		}
-	},
-	methods: {
-		t,
-		n,
-	},
-})
-
 export default class CommentInstance {
 	/**
 	 * Initialize a new Comments instance for the desired type
 	 *
 	 * @param {string} resourceType the comments endpoint type
-	 * @param  {object} options the vue options (propsData, parent, el...)
+	 * @param {object} options the vue options (propsData, parent, el...)
 	 */
 	constructor(resourceType = 'files', options = {}) {
 		const pinia = createPinia()
 
-		// Merge options and set `resourceType` property
-		options = {
-			...options,
-			propsData: {
+		const app = createApp(
+			CommentsApp,
+			{
 				...(options.propsData ?? {}),
 				resourceType,
 			},
-			pinia,
-		}
-		// Init Comments component
-		const View = Vue.extend(CommentsApp)
-		return new View(options)
+		)
+
+		// Add translates functions
+		app.mixin({
+			data() {
+				return {
+					logger,
+				}
+			},
+			methods: {
+				t,
+				n,
+			},
+		})
+
+		app.use(pinia)
+		// app.mount(options.el)
+		return app
 	}
 }

apps/comments/src/services/DavClient.js → apps/comments/src/services/DavClient.ts

@@ -5,7 +5,7 @@
 
 import { getRequestToken, onRequestTokenUpdate } from '@nextcloud/auth'
 import { createClient } from 'webdav'
-import { getRootPath } from '../utils/davUtils.js'
+import { getRootPath } from '../utils/davUtils.ts'
 
 // init webdav client
 const client = createClient(getRootPath())

apps/comments/src/services/DeleteComment.js → apps/comments/src/services/DeleteComment.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import client from './DavClient.js'
+import client from './DavClient.ts'
 
 /**
  * Delete a comment

apps/comments/src/services/EditComment.js → apps/comments/src/services/EditComment.ts

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import client from './DavClient.js'
+import client from './DavClient.ts'
 
 /**
  * Edit an existing comment

apps/comments/src/services/GetComments.ts

@@ -8,7 +8,7 @@ import type { DAVResult, FileStat, ResponseDataDetailed } from 'webdav'
 import { parseXML } from 'webdav'
 import { processResponsePayload } from 'webdav/dist/node/response.js'
 import { prepareFileFromProps } from 'webdav/dist/node/tools/dav.js'
-import client from './DavClient.js'
+import client from './DavClient.ts'
 
 export const DEFAULT_LIMIT = 20
 

apps/comments/src/services/NewComment.js → apps/comments/src/services/NewComment.ts

@@ -5,9 +5,9 @@
 
 import { getCurrentUser } from '@nextcloud/auth'
 import axios from '@nextcloud/axios'
-import { getRootPath } from '../utils/davUtils.js'
-import { decodeHtmlEntities } from '../utils/decodeHtmlEntities.js'
-import client from './DavClient.js'
+import { getRootPath } from '../utils/davUtils.ts'
+import { decodeHtmlEntities } from '../utils/decodeHtmlEntities.ts'
+import client from './DavClient.ts'
 
 /**
  * Retrieve the comments list

apps/comments/src/services/ReadComments.ts

@@ -5,7 +5,7 @@
 
 import type { Response } from 'webdav'
 
-import client from './DavClient.js'
+import client from './DavClient.ts'
 
 /**
  * Mark comments older than the date timestamp as read

apps/comments/src/views/ActivityCommentAction.vue

@@ -20,8 +20,8 @@ import { showError } from '@nextcloud/dialogs'
 import { t } from '@nextcloud/l10n'
 import { defineComponent } from 'vue'
 import Comment from '../components/Comment.vue'
-import logger from '../logger.js'
-import CommentView from '../mixins/CommentView.js'
+import logger from '../logger.ts'
+import CommentView from '../mixins/CommentView.ts'
 
 export default defineComponent({
 	components: {

apps/comments/src/views/Comments.vue

@@ -79,11 +79,11 @@ import IconAlertCircleOutline from 'vue-material-design-icons/AlertCircleOutline
 import IconMessageReplyTextOutline from 'vue-material-design-icons/MessageReplyTextOutline.vue'
 import IconRefresh from 'vue-material-design-icons/Refresh.vue'
 import Comment from '../components/Comment.vue'
-import logger from '../logger.js'
+import logger from '../logger.ts'
 import CommentView from '../mixins/CommentView.ts'
 import { DEFAULT_LIMIT, getComments } from '../services/GetComments.ts'
 import { markCommentsAsRead } from '../services/ReadComments.ts'
-import cancelableRequest from '../utils/cancelableRequest.js'
+import cancelableRequest from '../utils/cancelableRequest.ts'
 
 export default {
 	/* eslint vue/multi-word-component-names: "warn" */