wip

src/client/components/acct.vue

@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
 import { host } from '../config';
 
-export default Vue.extend({
+export default defineComponent({
 	props: ['user', 'detail'],
 	data() {
 		return {

src/client/components/analog-clock.vue

@@ -34,10 +34,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import * as tinycolor from 'tinycolor2';
 
-export default Vue.extend({
+export default defineComponent({
 	data() {
 		return {
 			now: new Date(),

src/client/components/autocomplete.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { emojilist } from '../../misc/emojilist';
 import contains from '../scripts/contains';
 import { twemojiSvgBase } from '../../misc/twemoji-base';
@@ -74,7 +74,7 @@ for (const x of lib) {
 
 emjdb.sort((a, b) => a.name.length - b.name.length);
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		type: {
 			type: String,

src/client/components/avatar.vue

@@ -8,10 +8,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { getStaticImageUrl } from '../scripts/get-static-image-url';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		user: {
 			type: Object,

src/client/components/avatars.vue

@@ -7,9 +7,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		userIds: {
 			required: true

src/client/components/captcha.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 type Captcha = {
 	render(container: string | Node, options: {
@@ -29,7 +29,7 @@ declare global {
 	}
 }
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		provider: {
 			type: String,

src/client/components/code-core.vue

@@ -3,11 +3,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import 'prismjs';
 import 'prismjs/themes/prism-okaidia.css';
 import XPrism from 'vue-prism-component';
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XPrism
 	},

src/client/components/code.vue

@@ -3,8 +3,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XCode: () => import('./code-core.vue').then(m => m.default)
 	},

src/client/components/cw-button.vue

@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { length } from 'stringz';
 import { concat } from '../../prelude/array';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			type: Boolean,

src/client/components/date-separated-list.vue

@@ -13,10 +13,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		items: {
 			type: Array,

src/client/components/deck/antenna-column.vue

@@ -9,12 +9,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSatellite, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '../timeline.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XTimeline,

src/client/components/deck/column-core.vue

@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XTlColumn from './tl-column.vue';
 import XAntennaColumn from './antenna-column.vue';
 import XListColumn from './list-column.vue';
@@ -20,7 +20,7 @@ import XWidgetsColumn from './widgets-column.vue';
 import XMentionsColumn from './mentions-column.vue';
 import XDirectColumn from './direct-column.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XTlColumn,
 		XAntennaColumn,

src/client/components/deck/column.vue

@@ -32,11 +32,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faArrowUp, faArrowDown, faAngleUp, faAngleDown, faCaretDown, faTimes, faArrowRight, faArrowLeft, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import { faWindowMaximize, faTrashAlt, faWindowRestore } from '@fortawesome/free-regular-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		column: {
 			type: Object,

src/client/components/deck/direct-column.vue

@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faEnvelope } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XDirect from '../../pages/messages.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XDirect

src/client/components/deck/list-column.vue

@@ -9,12 +9,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faListUl, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '../timeline.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XTimeline,

src/client/components/deck/mentions-column.vue

@@ -7,12 +7,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAt } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XMentions from '../../pages/mentions.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XMentions

src/client/components/deck/notifications-column.vue

@@ -7,13 +7,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCog } from '@fortawesome/free-solid-svg-icons';
 import { faBell } from '@fortawesome/free-regular-svg-icons';
 import XColumn from './column.vue';
 import XNotifications from '../notifications.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XNotifications

src/client/components/deck/tl-column.vue

@@ -20,12 +20,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faMinusCircle, faHome, faComments, faShareAlt, faGlobe, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import XTimeline from '../timeline.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XTimeline,

src/client/components/deck/widgets-column.vue

@@ -26,14 +26,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import * as XDraggable from 'vuedraggable';
 import { v4 as uuid } from 'uuid';
 import { faWindowMaximize, faTimes, faCog } from '@fortawesome/free-solid-svg-icons';
 import XColumn from './column.vue';
 import { widgets } from '../../widgets';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XColumn,
 		XDraggable,

src/client/components/dialog.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSpinner, faInfoCircle, faExclamationTriangle, faCheck } from '@fortawesome/free-solid-svg-icons';
 import { faTimesCircle, faQuestionCircle } from '@fortawesome/free-regular-svg-icons';
 import MkButton from './ui/button.vue';
@@ -58,7 +58,7 @@ import MkSelect from './ui/select.vue';
 import MkSignin from './signin.vue';
 import parseAcct from '../../misc/acct/parse';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 		MkInput,

src/client/components/drive-file-thumbnail.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import {
 	faFile,
 	faFileAlt,
@@ -28,7 +28,7 @@ import {
 	} from '@fortawesome/free-solid-svg-icons';
 import ImgWithBlurhash from './img-with-blurhash.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		ImgWithBlurhash
 	},

src/client/components/drive-window.vue

@@ -11,11 +11,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XDrive from './drive.vue';
 import XWindow from './window.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XDrive,
 		XWindow,

src/client/components/drive.file.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import copyToClipboard from '../scripts/copy-to-clipboard';
 //import updateAvatar from '../api/update-avatar';
@@ -38,7 +38,7 @@ import copyToClipboard from '../scripts/copy-to-clipboard';
 import XFileThumbnail from './drive-file-thumbnail.vue';
 import { faDownload, faLink, faICursor, faTrashAlt } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XFileThumbnail
 	},

src/client/components/drive.folder.vue

@@ -26,10 +26,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faFolder, faFolderOpen } from '@fortawesome/free-regular-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		folder: {
 			type: Object,

src/client/components/drive.nav-folder.vue

@@ -13,10 +13,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCloud } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		folder: {
 			type: Object,

src/client/components/drive.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import XNavFolder from './drive.nav-folder.vue';
 import XFolder from './drive.folder.vue';
@@ -54,7 +54,7 @@ import XFile from './drive.file.vue';
 import XUploader from './uploader.vue';
 import MkButton from './ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNavFolder,
 		XFolder,

src/client/components/emoji-picker.vue

@@ -63,7 +63,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { emojilist } from '../../misc/emojilist';
 import { getStaticImageUrl } from '../scripts/get-static-image-url';
 import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice, faGlobe, faHistory, faUser } from '@fortawesome/free-solid-svg-icons';
@@ -71,7 +71,7 @@ import { faHeart, faFlag, faLaugh } from '@fortawesome/free-regular-svg-icons';
 import { groupByX } from '../../prelude/array';
 import XPopup from './popup.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XPopup,
 	},

src/client/components/emoji.vue

@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { getStaticImageUrl } from '../scripts/get-static-image-url';
 import { twemojiSvgBase } from '../../misc/twemoji-base';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		name: {
 			type: String,

src/client/components/error.vue

@@ -9,11 +9,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import MkButton from './ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 	},

src/client/components/file-type-icon.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faFileImage } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		type: {
 			type: String,

src/client/components/follow-button.vue

@@ -29,10 +29,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSpinner, faPlus, faMinus, faHourglassHalf } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		user: {
 			type: Object,

src/client/components/form-window.vue

@@ -15,13 +15,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XWindow from './window.vue';
 import MkInput from './ui/input.vue';
 import MkTextarea from './ui/textarea.vue';
 import MkSwitch from './ui/switch.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XWindow,
 		MkInput,

src/client/components/formula-core.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import * as katex from 'katex';
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		formula: {
 			type: String,

src/client/components/formula.vue

@@ -3,8 +3,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XFormula: () => import('./formula-core.vue').then(m => m.default)
 	},

src/client/components/google.vue

@@ -6,10 +6,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faSearch } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: ['q'],
 	data() {
 		return {

src/client/components/header-clock.vue

@@ -14,10 +14,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkClock from './analog-clock.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkClock
 	},

src/client/components/image-viewer.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XModal from './modal.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XModal,
 	},

src/client/components/img-with-blurhash.vue

@@ -6,10 +6,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { decode } from 'blurhash';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		src: {
 			type: String,

src/client/components/instance-stats.vue

@@ -122,7 +122,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faChartBar, faUser, faPencilAlt } from '@fortawesome/free-solid-svg-icons';
 import Chart from 'chart.js';
 import MkSelect from './ui/select.vue';
@@ -138,7 +138,7 @@ const alpha = (hex, a) => {
 	return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkSelect
 	},

src/client/components/link.vue

@@ -10,13 +10,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 import { url as local } from '../config';
 import MkUrlPreview from './url-preview-popup.vue';
 import { isDeviceTouch } from '../scripts/is-device-touch';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		url: {
 			type: String,

src/client/components/loading.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		inline: {
 			type: Boolean,

src/client/components/media-banner.vue

@@ -26,10 +26,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		media: {
 			type: Object,

src/client/components/media-image.vue

@@ -22,13 +22,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { getStaticImageUrl } from '../scripts/get-static-image-url';
 import ImageViewer from './image-viewer.vue';
 import ImgWithBlurhash from './img-with-blurhash.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		ImgWithBlurhash
 	},

src/client/components/media-list.vue

@@ -15,12 +15,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XBanner from './media-banner.vue';
 import XImage from './media-image.vue';
 import XVideo from './media-video.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XBanner,
 		XImage,

src/client/components/media-video.vue

@@ -20,11 +20,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
 import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		video: {
 			type: Object,

src/client/components/mention.vue

@@ -15,11 +15,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
 import { host as localHost } from '../config';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		username: {
 			type: String,

src/client/components/menu.vue

@@ -33,12 +33,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCircle } from '@fortawesome/free-solid-svg-icons';
 import XPopup from './popup.vue';
 import { focusPrev, focusNext } from '../scripts/focus';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XPopup
 	},

src/client/components/misskey-flavored-markdown.vue

@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MfmCore from './mfm';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MfmCore
 	}

src/client/components/modal.vue

@@ -10,9 +10,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		canClose: {
 			type: Boolean,

src/client/components/note-header.vue

@@ -23,11 +23,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faHome, faUnlock, faEnvelope, faMobileAlt, faBookmark, faBiohazard } from '@fortawesome/free-solid-svg-icons';
 import { faBookmark as farBookmark } from '@fortawesome/free-regular-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		note: {
 			type: Object,

src/client/components/note-preview.vue

@@ -17,12 +17,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XNoteHeader from './note-header.vue';
 import XSubNoteContent from './sub-note-content.vue';
 import XCwButton from './cw-button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNoteHeader,
 		XSubNoteContent,

src/client/components/note.sub.vue

@@ -20,12 +20,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XNoteHeader from './note-header.vue';
 import XSubNoteContent from './sub-note-content.vue';
 import XCwButton from './cw-button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'x-sub',
 
 	components: {

src/client/components/note.vue

@@ -88,7 +88,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faBolt, faTimes, faBullhorn, faStar, faLink, faExternalLinkSquareAlt, faPlus, faMinus, faRetweet, faReply, faReplyAll, faEllipsisH, faHome, faUnlock, faEnvelope, faThumbtack, faBan, faQuoteRight, faInfoCircle, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { faCopy, faTrashAlt, faEdit, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import { parse } from '../../mfm/parse';
@@ -107,7 +107,7 @@ import { focusPrev, focusNext } from '../scripts/focus';
 import { url } from '../config';
 import copyToClipboard from '../scripts/copy-to-clipboard';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XSub,
 		XNoteHeader,

src/client/components/notes.vue

@@ -28,13 +28,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import paging from '../scripts/paging';
 import XNote from './note.vue';
 import XList from './date-separated-list.vue';
 import MkButton from './ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNote, XList, MkButton
 	},

src/client/components/notification.vue

@@ -58,14 +58,14 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faIdCardAlt, faPlus, faQuoteLeft, faQuoteRight, faRetweet, faReply, faAt, faCheck, faPollH } from '@fortawesome/free-solid-svg-icons';
 import { faClock } from '@fortawesome/free-regular-svg-icons';
 import noteSummary from '../../misc/get-note-summary';
 import XReactionIcon from './reaction-icon.vue';
 import MkFollowButton from './follow-button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XReactionIcon, MkFollowButton
 	},

src/client/components/notifications.vue

@@ -17,13 +17,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import paging from '../scripts/paging';
 import XNotification from './notification.vue';
 import XList from './date-separated-list.vue';
 import XNote from './note.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNotification,
 		XList,

src/client/components/page-preview.vue

@@ -15,9 +15,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		page: {
 			type: Object,

src/client/components/page/page.block.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XText from './page.text.vue';
 import XSection from './page.section.vue';
 import XImage from './page.image.vue';
@@ -19,7 +19,7 @@ import XCounter from './page.counter.vue';
 import XRadioButton from './page.radio-button.vue';
 import XCanvas from './page.canvas.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XText, XSection, XImage, XButton, XNumberInput, XTextInput, XTextareaInput, XTextarea, XPost, XSwitch, XIf, XCounter, XRadioButton, XCanvas
 	},

src/client/components/page/page.button.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkButton from '../ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton
 	},

src/client/components/page/page.canvas.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true

src/client/components/page/page.counter.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkButton from '../ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton
 	},

src/client/components/page/page.if.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true

src/client/components/page/page.image.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true

src/client/components/page/page.number-input.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkInput from '../ui/input.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkInput
 	},

src/client/components/page/page.post.vue

@@ -6,13 +6,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCheck, faPaperPlane } from '@fortawesome/free-solid-svg-icons';
 import MkTextarea from '../ui/textarea.vue';
 import MkButton from '../ui/button.vue';
 import { apiUrl } from '../../config';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkTextarea,
 		MkButton,

src/client/components/page/page.radio-button.vue

@@ -6,10 +6,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkRadio from '../ui/radio.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkRadio
 	},

src/client/components/page/page.section.vue

@@ -9,9 +9,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true

src/client/components/page/page.switch.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkSwitch from '../ui/switch.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkSwitch
 	},

src/client/components/page/page.text-input.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkInput from '../ui/input.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkInput
 	},

src/client/components/page/page.text.vue

@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { parse } from '../../../mfm/parse';
 import { unique } from '../../../prelude/array';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: true

src/client/components/page/page.textarea-input.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkTextarea from '../ui/textarea.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkTextarea
 	},

src/client/components/page/page.textarea.vue

@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkTextarea from '../ui/textarea.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkTextarea
 	},

src/client/components/page/page.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { parse } from '@syuilo/aiscript';
 import { faHeart as faHeartS } from '@fortawesome/free-solid-svg-icons';
 import { faHeart } from '@fortawesome/free-regular-svg-icons';
@@ -13,7 +13,7 @@ import XBlock from './page.block.vue';
 import { Hpml } from '../../scripts/hpml/evaluator';
 import { url } from '../../config';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XBlock
 	},

src/client/components/particle.vue

@@ -47,9 +47,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		x: {
 			type: Number,

src/client/components/poll-editor.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle, faTimes } from '@fortawesome/free-solid-svg-icons';
 import { erase } from '../../prelude/array';
 import { addTime } from '../../prelude/time';
@@ -59,7 +59,7 @@ import MkSelect from './ui/select.vue';
 import MkSwitch from './ui/switch.vue';
 import MkButton from './ui/button.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkInput,
 		MkSelect,

src/client/components/poll.vue

@@ -22,11 +22,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { sum } from '../../prelude/array';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		note: {
 			type: Object,

src/client/components/popup.vue

@@ -10,9 +10,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		source: {
 			required: true

src/client/components/post-form-attaches.vue

@@ -13,13 +13,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import * as XDraggable from 'vuedraggable';
 import { faTimesCircle, faEye, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
 import { faExclamationTriangle, faICursor } from '@fortawesome/free-solid-svg-icons';
 import XFileThumbnail from './drive-file-thumbnail.vue'
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XDraggable,
 		XFileThumbnail

src/client/components/post-form-dialog.vue

@@ -25,10 +25,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XPostForm from './post-form.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XPostForm
 	},

src/client/components/post-form.vue

@@ -52,7 +52,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faReply, faQuoteRight, faPaperPlane, faTimes, faUpload, faPollH, faGlobe, faHome, faUnlock, faEnvelope, faPlus, faPhotoVideo, faCloud, faLink, faAt, faBiohazard, faPlug } from '@fortawesome/free-solid-svg-icons';
 import { faEyeSlash, faLaughSquint } from '@fortawesome/free-regular-svg-icons';
 import insertTextAtCursor from 'insert-text-at-cursor';
@@ -70,7 +70,7 @@ import { formatTimeString } from '../../misc/format-time-string';
 import { selectDriveFile } from '../scripts/select-drive-file';
 import { noteVisibilities } from '../../types';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNotePreview,
 		XUploader: () => import('./uploader.vue').then(m => m.default),

src/client/components/reaction-icon.vue

@@ -3,8 +3,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		reaction: {
 			type: String,

src/client/components/reaction-picker.vue

@@ -10,12 +10,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { emojiRegex } from '../../misc/emoji-regex';
 import XReactionIcon from './reaction-icon.vue';
 import XPopup from './popup.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XPopup,
 		XReactionIcon,

src/client/components/reactions-viewer.details.vue

@@ -17,10 +17,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkTooltip from './ui/tooltip.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkTooltip
 	},

src/client/components/reactions-viewer.reaction.vue

@@ -17,11 +17,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XDetails from './reactions-viewer.details.vue';
 import XReactionIcon from './reaction-icon.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XReactionIcon
 	},

src/client/components/reactions-viewer.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XReaction from './reactions-viewer.reaction.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XReaction
 	},

src/client/components/remote-caution.vue

@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		href: {
 			type: String,

src/client/components/sidebar.vue

@@ -45,13 +45,13 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faGripVertical, faChevronLeft, faHashtag, faBroadcastTower, faFireAlt, faEllipsisH, faPencilAlt, faBars, faTimes, faSearch, faUserCog, faCog, faUser, faHome, faStar, faCircle, faAt, faListUl, faPlus, faUserClock, faUsers, faTachometerAlt, faExchangeAlt, faGlobe, faChartBar, faCloud, faServer, faInfoCircle, faQuestionCircle, faProjectDiagram } from '@fortawesome/free-solid-svg-icons';
 import { faBell, faEnvelope, faLaugh, faComments } from '@fortawesome/free-regular-svg-icons';
 import { host, instanceName } from '../config';
 import { search } from '../scripts/search';
 
-export default Vue.extend({
+export default defineComponent({
 	data() {
 		return {
 			host: host,

src/client/components/signin-dialog.vue

@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XWindow from './window.vue';
 import MkSignin from './signin.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkSignin,
 		XWindow,

src/client/components/signin.vue

@@ -43,7 +43,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { toUnicode } from 'punycode';
 import { faLock, faGavel } from '@fortawesome/free-solid-svg-icons';
 import { faTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons';
@@ -52,7 +52,7 @@ import MkInput from './ui/input.vue';
 import { apiUrl, host } from '../config';
 import { byteify, hexify } from '../scripts/2fa';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 		MkInput,

src/client/components/signup-dialog.vue

@@ -6,11 +6,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XWindow from './window.vue';
 import XSignup from './signup.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XSignup,
 		XWindow,

src/client/components/signup.vue

@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faLock, faExclamationTriangle, faSpinner, faCheck, faKey } from '@fortawesome/free-solid-svg-icons';
 const getPasswordStrength = require('syuilo-password-strength');
 import { toUnicode } from 'punycode';
@@ -58,7 +58,7 @@ import MkButton from './ui/button.vue';
 import MkInput from './ui/input.vue';
 import MkSwitch from './ui/switch.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		MkButton,
 		MkInput,

src/client/components/stream-indicator.vue

@@ -9,9 +9,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	data() {
 		return {
 			hasDisconnected: false,

src/client/components/sub-note-content.vue

@@ -19,12 +19,12 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faReply } from '@fortawesome/free-solid-svg-icons';
 import XPoll from './poll.vue';
 import XMediaList from './media-list.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XPoll,
 		XMediaList,

src/client/components/time.vue

@@ -7,9 +7,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		time: {
 			type: [Date, String],

src/client/components/timeline.vue

@@ -3,10 +3,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XNotes from './notes.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNotes
 	},

src/client/components/toast.vue

@@ -7,10 +7,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import XNotification from './notification.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XNotification
 	},

src/client/components/token-generate-window.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { kinds } from '../../misc/api-permissions';
 import XWindow from './window.vue';
 import MkInput from './ui/input.vue';
@@ -28,7 +28,7 @@ import MkSwitch from './ui/switch.vue';
 import MkButton from './ui/button.vue';
 import MkInfo from './ui/info.vue';
 
-export default Vue.extend({
+export default defineComponent({
 	components: {
 		XWindow,
 		MkInput,

src/client/components/ui/button.vue

@@ -14,8 +14,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		type: {
 			type: String,

src/client/components/ui/container.vue

@@ -22,10 +22,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		showHeader: {
 			type: Boolean,

src/client/components/ui/hr.vue

@@ -3,8 +3,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
-export default Vue.extend({});
+export default defineComponent({});
 </script>
 
 <style lang="scss" scoped>