Make code Vue 3 compliant

ItsOnlyBinary · Nov 12, 2023 · e2fbaf3 · e2fbaf3
1 parent 320dc59
commit e2fbaf3
Show file tree

Hide file tree

Showing 54 changed files with 854 additions and 853 deletions.
diff --git a/src/components/App.vue b/src/components/App.vue
@@ -64,6 +64,8 @@
 <script>
 'kiwi public';
 
+import { markRaw, toRef, watch } from 'vue';
+
 import cssVarsPonyfill from 'css-vars-ponyfill';
 import '@/res/globalStyle.css';
 import Tinycon from 'tinycon';
@@ -78,9 +80,9 @@ import AppSettings from '@/components/AppSettings';
 import Container from '@/components/Container';
 import ControlInput from '@/components/ControlInput';
 import MediaViewer from '@/components/MediaViewer';
-import { State as SidebarState } from '@/components/Sidebar';
 import * as Notifications from '@/libs/Notifications';
 import * as bufferTools from '@/libs/bufferTools';
+import useSidebarState from '@/libs/SidebarState';
 import ThemeManager from '@/libs/ThemeManager';
 import Logger from '@/libs/Logger';
 
@@ -112,7 +114,7 @@ export default {
             mediaviewerComponentProps: {},
             mediaviewerIframe: false,
             themeUrl: '',
-            sidebarState: new SidebarState(),
+            sidebarState: useSidebarState(),
         };
     },
     computed: {
@@ -156,7 +158,7 @@ export default {
         if (!startup) {
             Logger.error(`Startup screen "${startupName}" does not exist`);
         } else {
-            this.startupComponent = startup;
+            this.startupComponent = markRaw(startup);
         }
         this.trackWindowDimensions();
     },
@@ -196,15 +198,15 @@ export default {
                 this.activeComponent = null;
                 if (component) {
                     this.activeComponentProps = props;
-                    this.activeComponent = component;
+                    this.activeComponent = markRaw(component);
                 }
             });
             this.listen(this.$state, 'active.component.toggle', (component, props) => {
                 if (component === this.activeComponent) {
                     this.activeComponent = null;
                 } else if (component) {
                     this.activeComponentProps = props;
-                    this.activeComponent = component;
+                    this.activeComponent = markRaw(component);
                 }
             });
         },
@@ -241,7 +243,9 @@ export default {
                 }
 
                 this.mediaviewerUrl = opts.url;
-                this.mediaviewerComponent = opts.component;
+                this.mediaviewerComponent = opts.component
+                    ? markRaw(opts.component)
+                    : opts.component;
                 this.mediaviewerComponentProps = opts.componentProps;
                 this.mediaviewerIframe = opts.iframe;
                 this.mediaviewerOpen = true;
@@ -261,7 +265,7 @@ export default {
                 fallback: true,
             });
 
-            this.$state.$watch('ui.favicon_counter', (newVal) => {
+            watch(toRef(this.$state, 'ui.favicon_counter'), (newVal) => {
                 if (newVal) {
                     Tinycon.setBubble(newVal);
                 } else {
@@ -401,13 +405,7 @@ export default {
 @import "~font-awesome/less/path.less";
 @import "~font-awesome/less/animated.less";
 
-html {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-}
-
-body {
+html, body, #app {
     height: 100%;
     margin: 0;
     padding: 0;

diff --git a/src/components/AppSettings.vue b/src/components/AppSettings.vue
@@ -216,6 +216,8 @@
 'kiwi public';
 
 import _ from 'lodash';
+import { toRef, watch } from 'vue';
+
 import ThemeManager from '@/libs/ThemeManager';
 import GlobalApi from '@/libs/GlobalApi';
 import localesList from '@/res/localesList';
@@ -242,29 +244,30 @@ export default {
         SettingsAliases,
         SettingsAdvanced,
     },
-    data: function data() {
+    data() {
         return {
             theme: '',
             customThemeUrl: '',
             pluginUiElements: GlobalApi.singleton().appSettingsPlugins,
             localesList,
+            teardownFn: null,
         };
     },
     computed: {
-        themeSupportsMonospace: function themeSupportsMonospace() {
+        themeSupportsMonospace() {
             let themeMgr = ThemeManager.instance();
             let val = themeMgr.themeVar('supports-monospace');
             return val === '1';
         },
-        canRegisterProtocolHandler: function canRegisterProtocolHandler() {
+        canRegisterProtocolHandler() {
             return !!navigator.registerProtocolHandler && this.$state.setting('allowRegisterProtocolHandler');
         },
         timestamps_24h: {
-            get: function get24Timestamps() {
+            get() {
                 // %H is 24 hour format
                 return this.$state.setting('buffers.timestamp_format').substr(0, 2) === '%H';
             },
-            set: function set24Timestamps(newVal) {
+            set(newVal) {
                 let newFormat = newVal ?
                     '%H:%M:%S' :
                     '%l:%M:%S %p';
@@ -324,13 +327,18 @@ export default {
             },
         },
     },
-    created: function created() {
+    created() {
         this.listenForThemeSettings();
 
         this.listen(this.$state, 'settings.tab.show', (tabName) => {
             this.showTab(tabName);
         });
     },
+    beforeUnmount() {
+        if (this.teardownFn) {
+            this.teardownFn();
+        }
+    },
     methods: {
         closeSettings: function closeSettings() {
             this.$state.$emit('active.component');
@@ -365,25 +373,23 @@ export default {
             };
 
             // Remove all our attached events to cleanup
-            let teardownFn = () => {
+            this.teardownFn = () => {
                 this.$state.$off('theme.change', updateFn);
                 watches.forEach((unwatchFn) => unwatchFn());
-                this.$off('hook:destroy', teardownFn);
             };
 
             // Update our info with the latest theme settings before we start
             // listening for changes
             updateFn();
 
             this.$state.$on('theme.change', updateFn);
-            this.$once('hook:destroyed', teardownFn);
 
-            // $watch returns a function to stop watching the data field. Add them into
+            // watch returns a function to stop watching the data field. Add them into
             // an array to make it easier to iterate over them all and unwatch them all
             // when needed.
             watches = [
-                this.$watch('theme', watchTheme),
-                this.$watch('customThemeUrl', watchCustomThemeUrl),
+                watch(toRef(this, 'theme'), watchTheme),
+                watch(toRef(this, 'customThemeUrl'), watchCustomThemeUrl),
             ];
         },
         enableAdvancedTab() {

diff --git a/src/components/AutoComplete.vue b/src/components/AutoComplete.vue
@@ -1,13 +1,12 @@
 <template>
     <div class="kiwi-autocomplete kiwi-theme-bg">
-
         <div
             v-for="item in filteredAndLimitedItems"
             :key="item.type+item.text"
             :class="{
                 'kiwi-autocomplete-item': true,
-                'kiwi-autocomplete-item--selected': item.idx === selected_idx}
-            "
+                'kiwi-autocomplete-item--selected': item.idx === selected_idx,
+            }"
             @mousedown.prevent
             @click="selected_idx = item.idx; selectCurrentItem()"
         >
@@ -47,6 +46,7 @@ import * as Misc from '@/helpers/Misc';
 
 export default {
     props: ['filter', 'buffer', 'items', 'itemsPerPage'],
+    emits: ['cancel', 'selected', 'temp'],
     data() {
         return {
             // items: [

diff --git a/src/components/Avatar.vue b/src/components/Avatar.vue
@@ -1,15 +1,18 @@
-<template functional>
+<template>
     <div
-        :data-nick="$options.m.nick(props)"
-        :class="[$options.m.hasAvatar(props) ? 'kiwi-avatar--image' : '', data.staticClass]"
+        :data-nick="$options.m.nick($props)"
+        :class="[
+            $options.m.hasAvatar($props) ? 'kiwi-avatar--image' : '',
+            $data.staticClass ? $data.staticClass : ''
+        ]"
         class="kiwi-avatar"
     >
         <span
-            :style="$options.m.avatarStyle(props)"
-            :class="{'kiwi-avatar--default': $options.m.isDefault(props)}"
+            :style="$options.m.avatarStyle($props)"
+            :class="{'kiwi-avatar--default': $options.m.isDefault($props)}"
             class="kiwi-avatar-inner"
         >
-            {{ $options.m.hasAvatar(props) ? '' : $options.m.firstNickLetter(props) }}
+            {{ $options.m.hasAvatar($props) ? '' : $options.m.firstNickLetter($props) }}
         </span>
     </div>
 </template>

diff --git a/src/components/AwayStatusIndicator.vue b/src/components/AwayStatusIndicator.vue
@@ -1,13 +1,13 @@
-<template functional>
+<template>
     <span
-        v-if="$options.m.shouldShowStatus(props)"
+        v-if="$options.m.shouldShowStatus($props)"
         :class="{
-            'kiwi-awaystatusindicator--away': !props.user || props.user.isAway(),
-            'kiwi-awaystatusindicator--self': $options.m.isUserSelf(props),
-            [data.staticClass]: !!data.staticClass,
+            'kiwi-awaystatusindicator--away': !$props.user || $props.user.isAway(),
+            'kiwi-awaystatusindicator--self': $options.m.isUserSelf($props),
+            [$data.staticClass]: !!$data.staticClass,
         }"
         class="kiwi-awaystatusindicator"
-        @click="$options.m.toggleSelfAway(props)"
+        @click="$options.m.toggleSelfAway($props)"
     />
 </template>
 

diff --git a/src/components/ChannelBanlist.vue b/src/components/ChannelBanlist.vue
@@ -31,21 +31,14 @@
             <div class="kiwi-sidebar-settings-access-table-header" />
             <div v-if="areWeAnOp" class="kiwi-sidebar-settings-access-table-header" />
 
-            <template v-for="ban in sortedBanList">
-                <div
-                    :key="'mask' + ban.banned"
-                    class="kiwi-sidebar-settings-access-mask"
-                >
+            <template v-for="ban in sortedBanList" :key="ban.banned">
+                <div class="kiwi-sidebar-settings-access-mask">
                     {{ displayMask(ban.banned) }}
                 </div>
-                <div
-                    :key="'who' + ban.banned"
-                    class="kiwi-sidebar-settings-access-who"
-                >
+                <div class="kiwi-sidebar-settings-access-who">
                     {{ ban.banned_by }}
                 </div>
                 <div
-                    :key="'when' + ban.banned"
                     class="kiwi-sidebar-settings-access-when"
                     :title="(new Date(ban.banned_at * 1000)).toLocaleString({
                         year: 'numeric', month: '2-digit', day: '2-digit'
@@ -57,11 +50,7 @@
                         })
                     }}
                 </div>
-                <div
-                    v-if="areWeAnOp"
-                    :key="'actions' + ban.banned"
-                    class="kiwi-sidebar-settings-access-actions"
-                >
+                <div v-if="areWeAnOp" class="kiwi-sidebar-settings-access-actions">
                     <i class="fa fa-trash" aria-hidden="true" @click="removeBan(ban.banned)" />
                 </div>
             </template>

diff --git a/src/components/ChannelInvitelist.vue b/src/components/ChannelInvitelist.vue
@@ -60,21 +60,14 @@
             <div class="kiwi-sidebar-settings-access-table-header" />
             <div v-if="areWeAnOp" class="kiwi-sidebar-settings-access-table-header" />
 
-            <template v-for="invite in sortedInviteList">
-                <div
-                    :key="'mask' + invite.invited"
-                    class="kiwi-sidebar-settings-access-mask"
-                >
+            <template v-for="invite in sortedInviteList" :key="invite.invited">
+                <div class="kiwi-sidebar-settings-access-mask">
                     {{ displayMask(invite.invited) }}
                 </div>
-                <div
-                    :key="'who' + invite.invited"
-                    class="kiwi-sidebar-settings-access-who"
-                >
+                <div class="kiwi-sidebar-settings-access-who">
                     {{ invite.invited_by }}
                 </div>
                 <div
-                    :key="'when' + invite.invited"
                     class="kiwi-sidebar-settings-access-when"
                     :title="(new Date(invite.invited_at * 1000)).toLocaleString({
                         year: 'numeric', month: '2-digit', day: '2-digit'
@@ -86,11 +79,7 @@
                         })
                     }}
                 </div>
-                <div
-                    v-if="areWeAnOp"
-                    :key="'actions' + invite.invited"
-                    class="kiwi-sidebar-settings-access-actions"
-                >
+                <div v-if="areWeAnOp" class="kiwi-sidebar-settings-access-actions">
                     <i
                         class="fa fa-trash"
                         aria-hidden="true"

diff --git a/src/components/ControlInput.vue b/src/components/ControlInput.vue
@@ -150,6 +150,7 @@
 'kiwi public';
 
 import _ from 'lodash';
+import { markRaw } from 'vue';
 
 import * as Misc from '@/helpers/Misc';
 import * as TextFormatting from '@/helpers/TextFormatting';
@@ -408,7 +409,7 @@ export default {
                     buffer: this.buffer,
                     ircinput: this.$refs.input,
                 };
-                this.active_tool = tool;
+                this.active_tool = markRaw(tool);
             }
         },
         toggleBold() {

diff --git a/src/components/LoadingAnimation.vue b/src/components/LoadingAnimation.vue
@@ -49,7 +49,7 @@ export default {
             this.draw();
         };
     },
-    beforeDestroy() {
+    beforeUnmount() {
         this.destroying = true;
         cancelAnimationFrame(this.animationFrame);
     },

diff --git a/src/components/MediaViewer.vue b/src/components/MediaViewer.vue
@@ -56,6 +56,7 @@ export default {
         UrlEmbed,
     },
     props: ['url', 'component', 'componentProps', 'isIframe', 'showPin'],
+    emits: ['close', 'pin'],
     data() {
         return {
             debouncedUpdateEmbed: null,