replace Vue.set with direct setting

grnd-alt · grnd-alt · commit f4acf380351e · 2025-07-09T14:10:39.000+02:00
Signed-off-by: grnd-alt &lt;github@belakkaf.net&gt;
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -44,7 +44,6 @@
     "@nextcloud/notify_push": "^1.3.0",
     "@nextcloud/router": "^3.0.1",
     "@nextcloud/vue": "^9.0.0-alpha.7",
-    "@vue/compat": "^3.5.13",
     "@vue/compiler-sfc": "^3.5.13",
     "@vue/vue3-jest": "^29.2.6",
     "@vueuse/core": "^13.1.0",
diff --git a/src/components/KeyboardShortcuts.vue b/src/components/KeyboardShortcuts.vue
@@ -260,7 +260,6 @@ export default {
 			this.$refs.shortcutModal?.focus()
 		},
 		close() {
-			console.log("HHHHH")
 			this.card = null
 			this.selector = null
 		},
diff --git a/src/components/board/Stack.vue b/src/components/board/Stack.vue
@@ -94,7 +94,7 @@
 			non-drag-area-selector=".dragDisabled"
 			:drag-handle-selector="dragHandleSelector"
 			data-dragscroll-enabled
-			@should-accept-drop="canEdit"
+			:should-accept-drop="() => canEdit"
 			@drag-start="draggingCard = true"
 			@drag-end="draggingCard = false"
 			@drop="($event) => onDropCard(stack.id, $event)">
diff --git a/src/init-collections.js b/src/init-collections.js
@@ -3,38 +3,34 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import Vue from 'vue'
-
 import './../css/collections.css'
 import FileSharingPicker from './views/FileSharingPicker.js'
 import { buildSelector } from './helpers/selector.js'
 
 import './shared-init.js'
 
-Vue.prototype.t = t
-Vue.prototype.n = n
-Vue.prototype.OC = OC
-
-window.addEventListener('DOMContentLoaded', () => {
-	if (OCA.Sharing && OCA.Sharing.ShareSearch) {
-		OCA.Sharing.ShareSearch.addNewResult(FileSharingPicker)
-	}
+export function initCollections() {
+	window.addEventListener('DOMContentLoaded', () => {
+		if (OCA.Sharing && OCA.Sharing.ShareSearch) {
+			OCA.Sharing.ShareSearch.addNewResult(FileSharingPicker)
+		}
 
-	window.OCP.Collaboration.registerType('deck', {
-		action: () => {
-			const BoardSelector = () => import('./BoardSelector.vue')
-			return buildSelector(BoardSelector)
-		},
-		typeString: t('deck', 'Link to a board'),
-		typeIconClass: 'icon-deck',
-	})
+		window.OCP.Collaboration.registerType('deck', {
+			action: () => {
+				const BoardSelector = () => import('./BoardSelector.vue')
+				return buildSelector(BoardSelector)
+			},
+			typeString: t('deck', 'Link to a board'),
+			typeIconClass: 'icon-deck',
+		})
 
-	window.OCP.Collaboration.registerType('deck-card', {
-		action: () => {
-			const CardSelector = () => import('./CardSelector.vue')
-			return buildSelector(CardSelector)
-		},
-		typeString: t('deck', 'Link to a card'),
-		typeIconClass: 'icon-deck',
+		window.OCP.Collaboration.registerType('deck-card', {
+			action: () => {
+				const CardSelector = () => import('./CardSelector.vue')
+				return buildSelector(CardSelector)
+			},
+			typeString: t('deck', 'Link to a card'),
+			typeIconClass: 'icon-deck',
+		})
 	})
-})
+}
diff --git a/src/main.js b/src/main.js
@@ -13,9 +13,7 @@ import ClickOutside from 'vue-click-outside'
 import './shared-init.js'
 import './models/index.js'
 import './sessions.js'
-import { configureCompat } from '@vue/compat'
-
-configureCompat({ MODE: 3, INSTANCE_SCOPED_SLOTS: false, ATTR_ENUMERATED_COERCION: true, INSTANCE_EVENT_EMITTER: true, OPTIONS_BEFORE_DESTROY: true, CUSTOM_DIR: true, OPTIONS_DESTROYED: true, INSTANCE_LISTENERS: true, GLOBAL_SET: true })
+import { initCollections } from './init-collections.js'
 
 // the server snap.js conflicts with vertical scrolling so we disable it
 document.body.setAttribute('data-snap-ignore', 'true')
@@ -24,6 +22,9 @@ const app = createApp(App)
 
 app.config.globalProperties.t = translate
 app.config.globalProperties.n = translatePlural
+app.config.globalProperties.OC = OC
+
+initCollections({ t, n, OC })
 
 app.directive('click-outside', ClickOutside)
 
diff --git a/src/store/attachment.js b/src/store/attachment.js
@@ -4,7 +4,6 @@
  */
 
 import { AttachmentApi } from './../services/AttachmentApi.js'
-import Vue from 'vue'
 
 const apiClient = new AttachmentApi()
 
@@ -24,20 +23,20 @@ export default {
 	mutations: {
 		createAttachment(state, { cardId, attachment }) {
 			if (typeof state.attachments[cardId] === 'undefined') {
-				Vue.set(state.attachments, cardId, [attachment])
+				state.attachments[cardId] = [attachment]
 			} else {
 				state.attachments[cardId].push(attachment)
 			}
 		},
 
 		createAttachments(state, { cardId, attachments }) {
-			Vue.set(state.attachments, cardId, attachments)
+			state.attachments[cardId] = attachments
 		},
 
 		updateAttachment(state, { cardId, attachment }) {
 			const existingIndex = state.attachments[attachment.cardId].findIndex(a => a.id === attachment.id && a.type === attachment.type)
 			if (existingIndex !== -1) {
-				Vue.set(state.attachments[cardId], existingIndex, attachment)
+				state.attachments[cardId][existingIndex] = attachment
 			}
 		},
 
diff --git a/src/store/card.js b/src/store/card.js
@@ -5,7 +5,6 @@
 
 import { CardApi } from './../services/CardApi.js'
 import moment from 'moment'
-import Vue from 'vue'
 
 const apiClient = new CardApi()
 
@@ -180,6 +179,7 @@ export default {
 				.sort((a, b) => a.order - b.order || a.createdAt - b.createdAt)
 		},
 		cardById: state => (id) => {
+			alert('cardById')
 			return state.cards.find((card) => card.id === id)
 		},
 	},
@@ -190,7 +190,7 @@ export default {
 			const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
 			if (existingIndex !== -1) {
 				const existingCard = state.cards.find(_card => _card.id === card.id)
-				Vue.set(state.cards, existingIndex, Object.assign({}, existingCard, card))
+				state.cards[existingIndex] = { ...existingCard, ...card }
 			} else {
 				state.cards.push(card)
 			}
@@ -204,15 +204,15 @@ export default {
 		updateCard(state, card) {
 			const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
 			if (existingIndex !== -1) {
-				Vue.set(state.cards, existingIndex, Object.assign({}, state.cards[existingIndex], card))
+				state.cards[existingIndex] = { ...state.cards[existingIndex], ...card }
 			}
 		},
 		updateCardsReorder(state, cards) {
 			for (const newCard of cards) {
 				const existingIndex = state.cards.findIndex(_card => _card.id === newCard.id)
 				if (existingIndex !== -1) {
-					Vue.set(state.cards[existingIndex], 'order', newCard.order)
-					Vue.set(state.cards[existingIndex], 'stackId', newCard.stackId)
+					state.cards[existingIndex].order = newCard.order
+					state.cards[existingIndex].stackId = newCard.stackId
 				}
 			}
 		},
@@ -234,26 +234,26 @@ export default {
 		updateCardProperty(state, { card, property }) {
 			const existingIndex = state.cards.findIndex(_card => _card.id === card.id)
 			if (existingIndex !== -1) {
-				Vue.set(state.cards[existingIndex], property, card[property])
-				Vue.set(state.cards[existingIndex], 'lastModified', Date.now() / 1000)
+				state.cards[existingIndex][property] = card[property]
+				state.cards[existingIndex].lastModifiedBy = Date.now() / 1000
 			}
 		},
 		cardSetAttachmentCount(state, { cardId, count }) {
 			const existingIndex = state.cards.findIndex(_card => _card.id === cardId)
 			if (existingIndex !== -1) {
-				Vue.set(state.cards[existingIndex], 'attachmentCount', count)
+				state.cards[existingIndex].attachmentCount = count
 			}
 		},
 		cardIncreaseAttachmentCount(state, cardId) {
 			const existingIndex = state.cards.findIndex(_card => _card.id === cardId)
 			if (existingIndex !== -1) {
-				Vue.set(state.cards[existingIndex], 'attachmentCount', state.cards[existingIndex].attachmentCount + 1)
+				state.cards[existingIndex].attachmentCount = state.cards[existingIndex].attachmentCount + 1
 			}
 		},
 		cardDecreaseAttachmentCount(state, cardId) {
 			const existingIndex = state.cards.findIndex(_card => _card.id === cardId)
 			if (existingIndex !== -1) {
-				Vue.set(state.cards[existingIndex], 'attachmentCount', state.cards[existingIndex].attachmentCount - 1)
+				state.cards[existingIndex].attachmentCount = state.cards[existingIndex].attachmentCount - 1
 			}
 		},
 		addNewCard(state, card) {
@@ -344,6 +344,7 @@ export default {
 			commit('removeUserFromCard', user)
 		},
 		async addLabel({ commit }, data) {
+			alert('hello world')
 			await apiClient.assignLabelToCard(data)
 			commit('updateCardProperty', { property: 'labels', card: data.card })
 		},
diff --git a/src/store/comment.js b/src/store/comment.js
@@ -34,10 +34,10 @@ export default {
 		},
 		addComments(state, { comments, cardId }) {
 			if (state.comments[cardId] === undefined) {
-				Vue.set(state.comments, cardId, {
-					hasMore: comments.length > 0,
+				state.comments[cardId] = {
+					hasMore: comments.length >= 0,
 					comments: [...comments],
-				})
+				}
 			} else {
 				const newComments = comments.filter((comment) => {
 					return state.comments[cardId].comments.findIndex((item) => item.id === comment.id) === -1
@@ -59,11 +59,11 @@ export default {
 		},
 		markCommentsAsRead(state, cardId) {
 			state.comments[cardId].comments.forEach(_comment => {
-				Vue.set(_comment, 'isUnread', false)
+				_comment.isUnread = false
 			})
 		},
 		setReplyTo(state, comment) {
-			Vue.set(state, 'replyTo', comment)
+			state.replyTo = comment
 		},
 	},
 	actions: {
diff --git a/src/store/main.js b/src/store/main.js
@@ -6,7 +6,6 @@
 import 'url-search-params-polyfill'
 
 import { loadState } from '@nextcloud/initial-state'
-import Vue from 'vue'
 import { createStore } from 'vuex'
 import axios from '@nextcloud/axios'
 import { generateOcsUrl, generateUrl } from '@nextcloud/router'
@@ -129,7 +128,7 @@ const store = createStore({
 	},
 	mutations: {
 		setFullApp(state, isFullApp) {
-			Vue.set(state, 'isFullApp', isFullApp)
+			state.isFullApp = isFullApp
 		},
 		setHasCardSaveError(state, hasCardSaveError) {
 			Vue.set(state, 'hasCardSaveError', hasCardSaveError)
@@ -144,11 +143,11 @@ const store = createStore({
 				})
 
 				if (indexExisting > -1) {
-					Vue.set(state.boards[indexExisting].settings, configKey, value)
+					state.boards[indexExisting].settings[configKey] = value
 				}
 				break
 			default:
-				Vue.set(state.config, key, value)
+				state.config[key] = value
 			}
 		},
 		setSearchQuery(state, searchQuery) {
@@ -161,7 +160,7 @@ const store = createStore({
 			Object.keys(filter).forEach((key) => {
 				switch (key) {
 				case 'due':
-					Vue.set(state.filter, key, filter.due)
+					state.filter[key] = filter.due
 					break
 				default:
 					filter[key].forEach((item) => {
@@ -188,7 +187,7 @@ const store = createStore({
 			})
 
 			if (indexExisting > -1) {
-				Vue.set(state.boards, indexExisting, board)
+				state.boards[indexExisting] = board
 			} else {
 				state.boards.push(board)
 			}
@@ -200,7 +199,7 @@ const store = createStore({
 			})
 
 			if (indexExisting > -1) {
-				Vue.set(state.boards, indexExisting, board)
+				state.boards[indexExisting] = board
 			} else {
 				state.boards.push(board)
 			}
@@ -233,7 +232,7 @@ const store = createStore({
 			state.boards = boards
 		},
 		setSharees(state, shareesUsersAndGroups) {
-			Vue.set(state, 'sharees', shareesUsersAndGroups.exact.users)
+			state.sharees = shareesUsersAndGroups.exact.users
 			state.sharees.push(...shareesUsersAndGroups.exact.groups)
 			state.sharees.push(...shareesUsersAndGroups.exact.circles)
 
@@ -283,7 +282,7 @@ const store = createStore({
 		updateAclFromCurrentBoard(state, acl) {
 			for (const acl_ in state.currentBoard.acl) {
 				if (state.currentBoard.acl[acl_].participant.uid === acl.participant.uid) {
-					Vue.set(state.currentBoard.acl, acl_, acl)
+					state.currentBoard.acl[acl_] = acl
 					break
 				}
 			}
@@ -299,7 +298,7 @@ const store = createStore({
 			}
 
 			if (removeIndex > -1) {
-				Vue.delete(state.currentBoard.acl, removeIndex)
+				state.currentBoard.acl.splice(removeIndex, 1)
 			}
 		},
 		TOGGLE_SHORTCUT_LOCK(state, lock) {
diff --git a/src/store/overview.js b/src/store/overview.js
@@ -3,20 +3,18 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import Vue from 'vue'
-import Vuex from 'vuex'
+import { createStore } from 'vuex/dist/vuex.cjs.js'
 import { OverviewApi } from '../services/OverviewApi.js'
-Vue.use(Vuex)
 
 const apiClient = new OverviewApi()
-export default {
+export default createStore({
 	state: {
 		assignedCards: [],
 		loading: false,
 	},
 	getters: {
-		assignedCardsDashboard: state => {
-			return state.assignedCards
+		assignedCardsDashboard(state) {
+			return () => state.assignedCards
 		},
 	},
 	mutations: {
@@ -46,4 +44,4 @@ export default {
 			return promise
 		},
 	},
-}
+})
diff --git a/src/store/stack.js b/src/store/stack.js
diff --git a/webpack.js b/webpack.js
