Make code Vue 3 compliant

ItsOnlyBinary · Dec 17, 2023 · 6568a9b · 6568a9b
1 parent 91d1071
commit 6568a9b
Show file tree

Hide file tree

Showing 54 changed files with 880 additions and 917 deletions.
diff --git a/src/components/App.vue b/src/components/App.vue
@@ -75,6 +75,8 @@
 <script>
 'kiwi public';
 
+import { markRaw, toRef, watch } from 'vue';
+
 import '@/res/globalStyle.css';
 import Tinycon from 'tinycon';
 
@@ -83,9 +85,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 Logger from '@/libs/Logger';
 
 let log = Logger.namespace('App.vue');
@@ -115,7 +117,7 @@ export default {
             mediaviewerComponent: null,
             mediaviewerComponentProps: {},
             mediaviewerIframe: false,
-            sidebarState: new SidebarState(),
+            sidebarState: useSidebarState(),
         };
     },
     computed: {
@@ -181,15 +183,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);
                 }
             });
         },
@@ -221,7 +223,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;
@@ -241,7 +245,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 {
@@ -381,13 +385,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
@@ -219,6 +219,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';
@@ -245,29 +247,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';
@@ -327,13 +330,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');
@@ -377,11 +385,10 @@ export default {
             }, 800, { leading: false, trailing: true });
 
             // Remove all our attached events to cleanup
-            let teardownFn = () => {
+            this.teardownFn = () => {
                 this.$state.$off('theme.change', updateFn);
                 this.$state.$off('theme.failed', failedFn);
                 watches.forEach((unwatchFn) => unwatchFn());
-                this.$off('hook:destroy', teardownFn);
             };
 
             // Update our info with the latest theme settings before we start
@@ -390,14 +397,13 @@ export default {
 
             this.$state.$on('theme.change', updateFn);
             this.$state.$on('theme.failed', failedFn);
-            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
@@ -36,6 +36,7 @@ import * as Misc from '@/helpers/Misc';
 
 export default {
     props: ['filter', 'buffer', 'items', 'itemsPerPage'],
+    emits: ['cancel', 'click', 'selected', 'temp'],
     data() {
         return {
             // items: [

diff --git a/src/components/AwayStatusIndicator.vue b/src/components/AwayStatusIndicator.vue
@@ -1,14 +1,14 @@
-<template functional>
+<template>
     <span
-        v-if="$options.m.shouldShowStatus(props)"
+        v-if="$options.m.shouldShowStatus($props)"
         :class="{
-            'kiwi-awaystatusindicator--offline': !props.user || props.user.isOffline(),
-            'kiwi-awaystatusindicator--away': props.user && props.user.isAway(),
-            'kiwi-awaystatusindicator--self': $options.m.isUserSelf(props),
-            [data.staticClass]: !!data.staticClass,
+            'kiwi-awaystatusindicator--offline': !$props.user || $props.user.isOffline(),
+            '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';
@@ -401,7 +402,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,