refactor(client): use setup syntax

packages/client/src/components/notification.vue

@@ -72,8 +72,8 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, ref, onMounted, onUnmounted, watch } from 'vue';
+import { ref, onMounted, onUnmounted, watch } from 'vue';
 import * as misskey from 'misskey-js';
 import XReactionIcon from './reaction-icon.vue';
 import MkFollowButton from './follow-button.vue';
@@ -86,36 +86,22 @@ import * as os from '@/os';
 import { stream } from '@/stream';
 import { useTooltip } from '@/scripts/use-tooltip';
 
-export default defineComponent({
+const props = withDefaults(defineProps<{
-	components: {
+	notification: misskey.entities.Notification;
-		XReactionIcon, MkFollowButton,
+	withTime?: boolean;
-	},
+	full?: boolean;
+}>(), {
+	withTime: false,
+	full: false,
+});
 
-	props: {
+const elRef = ref<HTMLElement>(null);
-		notification: {
+const reactionRef = ref(null);
-			type: Object,
-			required: true,
-		},
-		withTime: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		full: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
 
-	setup(props) {
+let readObserver: IntersectionObserver | undefined;
-		const elRef = ref<HTMLElement>(null);
+let connection;
-		const reactionRef = ref(null);
 
-		let readObserver: IntersectionObserver | undefined;
+onMounted(() => {
-		let connection;
-
-		onMounted(() => {
 	if (!props.notification.isRead) {
 		readObserver = new IntersectionObserver((entries, observer) => {
 			if (!entries.some(entry => entry.isIntersecting)) return;
@@ -134,60 +120,43 @@ export default defineComponent({
 			readObserver.disconnect();
 		});
 	}
-		});
+});
 
-		onUnmounted(() => {
+onUnmounted(() => {
 	if (readObserver) readObserver.disconnect();
 	if (connection) connection.dispose();
-		});
+});
 
-		const followRequestDone = ref(false);
+const followRequestDone = ref(false);
-		const groupInviteDone = ref(false);
+const groupInviteDone = ref(false);
 
-		const acceptFollowRequest = () => {
+const acceptFollowRequest = () => {
 	followRequestDone.value = true;
 	os.api('following/requests/accept', { userId: props.notification.user.id });
-		};
+};
 
-		const rejectFollowRequest = () => {
+const rejectFollowRequest = () => {
 	followRequestDone.value = true;
 	os.api('following/requests/reject', { userId: props.notification.user.id });
-		};
+};
 
-		const acceptGroupInvitation = () => {
+const acceptGroupInvitation = () => {
 	groupInviteDone.value = true;
 	os.apiWithDialog('users/groups/invitations/accept', { invitationId: props.notification.invitation.id });
-		};
+};
 
-		const rejectGroupInvitation = () => {
+const rejectGroupInvitation = () => {
 	groupInviteDone.value = true;
 	os.api('users/groups/invitations/reject', { invitationId: props.notification.invitation.id });
-		};
+};
 
-		useTooltip(reactionRef, (showing) => {
+useTooltip(reactionRef, (showing) => {
 	os.popup(XReactionTooltip, {
 		showing,
 		reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction,
 		emojis: props.notification.note.emojis,
 		targetElement: reactionRef.value.$el,
 	}, {}, 'closed');
-		});
-
-		return {
-			getNoteSummary: (note: misskey.entities.Note) => getNoteSummary(note),
-			followRequestDone,
-			groupInviteDone,
-			notePage,
-			userPage,
-			acceptFollowRequest,
-			rejectFollowRequest,
-			acceptGroupInvitation,
-			rejectGroupInvitation,
-			elRef,
-			reactionRef,
-			i18n,
-		};
-	},
 });
 </script>