stop using vue.set

src/components/font_control/font_control.js

@@ -1,4 +1,3 @@
-import { set } from 'vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faChevronDown
@@ -40,8 +39,8 @@ export default {
         return this.dValue.family
       },
       set (v) {
-        set(this.lValue, 'family', v)
+        this.lValue.family = v
-        this.$emit('input', this.lValue)
+        this.$emit('update:modelValue', this.lValue)
       }
     },
     isCustom () {

src/components/gallery/gallery.js

@@ -34,7 +34,7 @@ const Gallery = {
   },
   methods: {
     onNaturalSizeLoad (id, size) {
-      this.$set(this.sizes, id, size)
+      this.sizes[id] = size
     },
     rowStyle (itemsPerRow) {
       return { 'padding-bottom': `${(100 / (itemsPerRow + 0.6))}%` }

src/components/settings_modal/tabs/theme_tab/theme_tab.js

@@ -1,4 +1,3 @@
-import { set, delete as del } from 'vue'
 import {
   rgb2hex,
   hex2rgb,
@@ -326,9 +325,9 @@ export default {
       },
       set (val) {
         if (val) {
-          set(this.shadowsLocal, this.shadowSelected, this.currentShadowFallback.map(_ => Object.assign({}, _)))
+          this.shadowsLocal[this.shadowSelected] = this.currentShadowFallback.map(_ => Object.assign({}, _))
         } else {
-          del(this.shadowsLocal, this.shadowSelected)
+          delete this.shadowsLocal[this.shadowSelected]
         }
       }
     },
@@ -340,7 +339,7 @@ export default {
         return this.shadowsLocal[this.shadowSelected]
       },
       set (v) {
-        set(this.shadowsLocal, this.shadowSelected, v)
+        this.shadowsLocal[this.shadowSelected] = v
       }
     },
     themeValid () {
@@ -562,7 +561,7 @@ export default {
         .filter(_ => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal'))
         .filter(_ => !v1OnlyNames.includes(_))
         .forEach(key => {
-          set(this.$data, key, undefined)
+          this.$data[key] = undefined
         })
     },
 
@@ -570,7 +569,7 @@ export default {
       Object.keys(this.$data)
         .filter(_ => _.endsWith('RadiusLocal'))
         .forEach(key => {
-          set(this.$data, key, undefined)
+          this.$data[key] = undefined
         })
     },
 
@@ -578,7 +577,7 @@ export default {
       Object.keys(this.$data)
         .filter(_ => _.endsWith('OpacityLocal'))
         .forEach(key => {
-          set(this.$data, key, undefined)
+          this.$data[key] = undefined
         })
     },
 

src/modules/chats.js

@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { reactive } from 'vue'
 import { find, omitBy, orderBy, sumBy } from 'lodash'
 import chatService from '../services/chat_service/chat_service.js'
 import { parseChat, parseChatMessage } from '../services/entity_normalizer/entity_normalizer.service.js'
@@ -13,8 +13,8 @@ const emptyChatList = () => ({
 const defaultState = {
   chatList: emptyChatList(),
   chatListFetcher: null,
-  openedChats: {},
+  openedChats: reactive({}),
-  openedChatMessageServices: {},
+  openedChatMessageServices: reactive({}),
   fetcher: undefined,
   currentChatId: null,
   lastReadMessageId: null
@@ -137,10 +137,10 @@ const chats = {
     },
     addOpenedChat (state, { _dispatch, chat }) {
       state.currentChatId = chat.id
-      Vue.set(state.openedChats, chat.id, chat)
+      state.openedChats[chat.id] = chat
 
       if (!state.openedChatMessageServices[chat.id]) {
-        Vue.set(state.openedChatMessageServices, chat.id, chatService.empty(chat.id))
+        state.openedChatMessageServices[chat.id] = chatService.empty(chat.id)
       }
     },
     setCurrentChatId (state, { chatId }) {
@@ -160,7 +160,7 @@ const chats = {
           }
         } else {
           state.chatList.data.push(updatedChat)
-          Vue.set(state.chatList.idStore, updatedChat.id, updatedChat)
+          state.chatList.idStore[updatedChat.id] = updatedChat
         }
       })
     },
@@ -172,7 +172,7 @@ const chats = {
         chat.updated_at = updatedChat.updated_at
       }
       if (!chat) { state.chatList.data.unshift(updatedChat) }
-      Vue.set(state.chatList.idStore, updatedChat.id, updatedChat)
+      state.chatList.idStore[updatedChat.id] = updatedChat
     },
     deleteChat (state, { _dispatch, id, _rootGetters }) {
       state.chats.data = state.chats.data.filter(conversation =>
@@ -186,8 +186,8 @@ const chats = {
       commit('setChatListFetcher', { fetcher: undefined })
       for (const chatId in state.openedChats) {
         chatService.clear(state.openedChatMessageServices[chatId])
-        Vue.delete(state.openedChats, chatId)
+        delete state.openedChats[chatId]
-        Vue.delete(state.openedChatMessageServices, chatId)
+        delete state.openedChatMessageServices[chatId]
       }
     },
     setChatsLoading (state, { value }) {
@@ -215,8 +215,8 @@ const chats = {
       for (const chatId in state.openedChats) {
         if (currentChatId !== chatId) {
           chatService.clear(state.openedChatMessageServices[chatId])
-          Vue.delete(state.openedChats, chatId)
+          delete state.openedChats[chatId]
-          Vue.delete(state.openedChatMessageServices, chatId)
+          delete state.openedChatMessageServices[chatId]
         }
       }
     },

src/modules/config.js

@@ -1,4 +1,3 @@
-import { set, delete as del } from 'vue'
 import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'
 import messages from '../i18n/messages'
 
@@ -98,14 +97,14 @@ const config = {
   },
   mutations: {
     setOption (state, { name, value }) {
-      set(state, name, value)
+      state[name] = value
     },
     setHighlight (state, { user, color, type }) {
       const data = this.state.config.highlight[user]
       if (color || type) {
-        set(state.highlight, user, { color: color || data.color, type: type || data.type })
+        state.highlight[user] = { color: color || data.color, type: type || data.type }
       } else {
-        del(state.highlight, user)
+        delete state.highlight[user]
       }
     }
   },

src/modules/instance.js

@@ -1,4 +1,3 @@
-import { set } from 'vue'
 import { getPreset, applyTheme } from '../services/style_setter/style_setter.js'
 import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
 import apiService from '../services/api/api.service.js'
@@ -86,7 +85,7 @@ const instance = {
   mutations: {
     setInstanceOption (state, { name, value }) {
       if (typeof value !== 'undefined') {
-        set(state, name, value)
+        state[name] = value
       }
     },
     setKnownDomains (state, domains) {

src/modules/interface.js

@@ -1,5 +1,3 @@
-import { set, delete as del } from 'vue'
-
 const defaultState = {
   settingsModalState: 'hidden',
   settingsModalLoaded: false,
@@ -29,11 +27,10 @@ const interfaceMod = {
         if (state.noticeClearTimeout) {
           clearTimeout(state.noticeClearTimeout)
         }
-        set(state.settings, 'currentSaveStateNotice', { error: false, data: success })
+        state.settings.currentSaveStateNotice = { error: false, data: success }
-        set(state.settings, 'noticeClearTimeout',
+        state.settings.noticeClearTimeout = setTimeout(() => delete state.settings.currentSaveStateNotice, 2000)
-          setTimeout(() => del(state.settings, 'currentSaveStateNotice'), 2000))
       } else {
-        set(state.settings, 'currentSaveStateNotice', { error: true, errorData: error })
+        state.settings.currentSaveStateNotice = { error: true, errorData: error }
       }
     },
     setNotificationPermission (state, permission) {

src/modules/oauth.js

@@ -1,5 +1,3 @@
-import { delete as del } from 'vue'
-
 const oauth = {
   state: {
     clientId: false,
@@ -29,7 +27,7 @@ const oauth = {
       state.userToken = false
       // state.token is userToken with older name, coming from persistent state
       // let's clear it as well, since it is being used as a fallback of state.userToken
-      del(state, 'token')
+      delete state.token
     }
   },
   getters: {

src/modules/polls.js

@@ -1,5 +1,4 @@
 import { merge } from 'lodash'
-import { set } from 'vue'
 
 const polls = {
   state: {
@@ -13,25 +12,25 @@ const polls = {
       // Make expired-state change trigger re-renders properly
       poll.expired = Date.now() > Date.parse(poll.expires_at)
       if (existingPoll) {
-        set(state.pollsObject, poll.id, merge(existingPoll, poll))
+        state.pollsObject[poll.id] = merge(existingPoll, poll)
       } else {
-        set(state.pollsObject, poll.id, poll)
+        state.pollsObject[poll.id] = poll
       }
     },
     trackPoll (state, pollId) {
       const currentValue = state.trackedPolls[pollId]
       if (currentValue) {
-        set(state.trackedPolls, pollId, currentValue + 1)
+        state.trackedPolls[pollId] = currentValue + 1
       } else {
-        set(state.trackedPolls, pollId, 1)
+        state.trackedPolls[pollId] = 1
       }
     },
     untrackPoll (state, pollId) {
       const currentValue = state.trackedPolls[pollId]
       if (currentValue) {
-        set(state.trackedPolls, pollId, currentValue - 1)
+        state.trackedPolls[pollId] = currentValue - 1
       } else {
-        set(state.trackedPolls, pollId, 0)
+        state.trackedPolls[pollId] = 0
       }
     }
   },

src/modules/statuses.js

@@ -12,7 +12,6 @@ import {
   isArray,
   omitBy
 } from 'lodash'
-import { set } from 'vue'
 import {
   isStatusNotification,
   isValidNotification,
@@ -92,7 +91,7 @@ const mergeOrAdd = (arr, obj, item) => {
     // This is a new item, prepare it
     prepareStatus(item)
     arr.push(item)
-    set(obj, item.id, item)
+    obj[item.id] = item
     return { item, new: true }
   }
 }
@@ -131,7 +130,7 @@ const addStatusToGlobalStorage = (state, data) => {
     if (conversationsObject[conversationId]) {
       conversationsObject[conversationId].push(status)
     } else {
-      set(conversationsObject, conversationId, [status])
+      conversationsObject[conversationId] = [status]
     }
   }
   return result
@@ -523,7 +522,7 @@ export const mutations = {
   },
   addEmojiReactionsBy (state, { id, emojiReactions, currentUser }) {
     const status = state.allStatusesObject[id]
-    set(status, 'emoji_reactions', emojiReactions)
+    status['emoji_reactions'] = emojiReactions
   },
   addOwnReaction (state, { id, emoji, currentUser }) {
     const status = state.allStatusesObject[id]
@@ -542,9 +541,9 @@ export const mutations = {
 
     // Update count of existing reaction if it exists, otherwise append at the end
     if (reactionIndex >= 0) {
-      set(status.emoji_reactions, reactionIndex, newReaction)
+      status.emoji_reactions[reactionIndex] = newReaction
     } else {
-      set(status, 'emoji_reactions', [...status.emoji_reactions, newReaction])
+      status['emoji_reactions'] = [...status.emoji_reactions, newReaction]
     }
   },
   removeOwnReaction (state, { id, emoji, currentUser }) {
@@ -563,9 +562,9 @@ export const mutations = {
     }
 
     if (newReaction.count > 0) {
-      set(status.emoji_reactions, reactionIndex, newReaction)
+      status.emoji_reactions[reactionIndex] = newReaction
     } else {
-      set(status, 'emoji_reactions', status.emoji_reactions.filter(r => r.name !== emoji))
+      status['emoji_reactions'] = status.emoji_reactions.filter(r => r.name !== emoji)
     }
   },
   updateStatusWithPoll (state, { id, poll }) {

src/modules/users.js

@@ -1,7 +1,6 @@
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import oauthApi from '../services/new_api/oauth.js'
 import { compact, map, each, mergeWith, last, concat, uniq, isArray } from 'lodash'
-import { set } from 'vue'
 import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js'
 
 // TODO: Unify with mergeOrAdd in statuses.js
@@ -15,9 +14,9 @@ export const mergeOrAdd = (arr, obj, item) => {
   } else {
     // This is a new item, prepare it
     arr.push(item)
-    set(obj, item.id, item)
+    obj[item.id] = item
     if (item.screen_name && !item.screen_name.includes('@')) {
-      set(obj, item.screen_name.toLowerCase(), item)
+      obj[item.screen_name.toLowerCase()] = item
     }
     return { item, new: true }
   }
@@ -103,23 +102,23 @@ export const mutations = {
     const user = state.usersObject[id]
     const tags = user.tags || []
     const newTags = tags.concat([tag])
-    set(user, 'tags', newTags)
+    user['tags'] = newTags
   },
   untagUser (state, { user: { id }, tag }) {
     const user = state.usersObject[id]
     const tags = user.tags || []
     const newTags = tags.filter(t => t !== tag)
-    set(user, 'tags', newTags)
+    user['tags'] = newTags
   },
   updateRight (state, { user: { id }, right, value }) {
     const user = state.usersObject[id]
     let newRights = user.rights
     newRights[right] = value
-    set(user, 'rights', newRights)
+    user['rights'] = newRights
   },
   updateActivationStatus (state, { user: { id }, deactivated }) {
     const user = state.usersObject[id]
-    set(user, 'deactivated', deactivated)
+    user['deactivated'] = deactivated
   },
   setCurrentUser (state, user) {
     state.lastLoginName = user.screen_name
@@ -148,26 +147,26 @@ export const mutations = {
   clearFriends (state, userId) {
     const user = state.usersObject[userId]
     if (user) {
-      set(user, 'friendIds', [])
+      user['friendIds'] = []
     }
   },
   clearFollowers (state, userId) {
     const user = state.usersObject[userId]
     if (user) {
-      set(user, 'followerIds', [])
+      user['followerIds'] = []
     }
   },
   addNewUsers (state, users) {
     each(users, (user) => {
       if (user.relationship) {
-        set(state.relationships, user.relationship.id, user.relationship)
+        state.relationships[user.relationship.id] = user.relationship
       }
       mergeOrAdd(state.users, state.usersObject, user)
     })
   },
   updateUserRelationship (state, relationships) {
     relationships.forEach((relationship) => {
-      set(state.relationships, relationship.id, relationship)
+      state.relationships[relationship.id] = relationship
     })
   },
   saveBlockIds (state, blockIds) {
@@ -222,7 +221,7 @@ export const mutations = {
   },
   setColor (state, { user: { id }, highlighted }) {
     const user = state.usersObject[id]
-    set(user, 'highlight', highlighted)
+    user['highlight'] = highlighted
   },
   signUpPending (state) {
     state.signUpPending = true