refactor(client): refactor components

packages/client/src/components/renote-button.vue

@@ -1,5 +1,6 @@
 <template>
-<button v-if="canRenote"
+<button
+	v-if="canRenote"
 	ref="buttonRef"
 	class="eddddedb _button canRenote"
 	@click="renote()"
@@ -12,8 +13,9 @@
 </button>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, ref } from 'vue';
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import * as misskey from 'misskey-js';
 import XDetails from '@/components/users-tooltip.vue';
 import { pleaseLogin } from '@/scripts/please-login';
 import * as os from '@/os';
@@ -21,27 +23,19 @@ import { $i } from '@/account';
 import { useTooltip } from '@/scripts/use-tooltip';
 import { i18n } from '@/i18n';
 
-export default defineComponent({
-	props: {
-		count: {
-			type: Number,
-			required: true,
-		},
-		note: {
-			type: Object,
-			required: true,
-		},
-	},
+const props = defineProps<{
+	note: misskey.entities.Note;
+	count: number;
+}>();
 
-	setup(props) {
-		const buttonRef = ref<HTMLElement>();
+const buttonRef = ref<HTMLElement>();
 
-		const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i.id);
+const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i.id);
 
-		useTooltip(buttonRef, async (showing) => {
+useTooltip(buttonRef, async (showing) => {
 	const renotes = await os.api('notes/renotes', {
 		noteId: props.note.id,
-				limit: 11
+		limit: 11,
 	});
 
 	const users = renotes.map(x => x.user);
@@ -52,20 +46,20 @@ export default defineComponent({
 		showing,
 		users,
 		count: props.count,
-				targetElement: buttonRef.value
+		targetElement: buttonRef.value,
 	}, {}, 'closed');
-		});
+});
 
-		const renote = (viaKeyboard = false) => {
+const renote = (viaKeyboard = false) => {
 	pleaseLogin();
 	os.popupMenu([{
 		text: i18n.ts.renote,
 		icon: 'fas fa-retweet',
 		action: () => {
 			os.api('notes/create', {
-						renoteId: props.note.id
+				renoteId: props.note.id,
 			});
-				}
+		},
 	}, {
 		text: i18n.ts.quote,
 		icon: 'fas fa-quote-right',
@@ -73,19 +67,11 @@ export default defineComponent({
 			os.post({
 				renote: props.note,
 			});
-				}
-			}], buttonRef.value, {
-				viaKeyboard
-			});
-		};
-
-		return {
-			buttonRef,
-			canRenote,
-			renote,
-		};
 		},
-});
+	}], buttonRef.value, {
+		viaKeyboard,
+	});
+};
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/sparkle.vue

@@ -63,21 +63,18 @@
 </span>
 </template>
 
-<script lang="ts">
-import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
-import * as os from '@/os';
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
 
-export default defineComponent({
-	setup() {
-		const particles = ref([]);
-		const el = ref<HTMLElement>();
-		const width = ref(0);
-		const height = ref(0);
-		const colors = ['#FF1493', '#00FFFF', '#FFE202', '#FFE202', '#FFE202'];
-		let stop = false;
-		let ro: ResizeObserver | undefined;
+const particles = ref([]);
+const el = ref<HTMLElement>();
+const width = ref(0);
+const height = ref(0);
+const colors = ['#FF1493', '#00FFFF', '#FFE202', '#FFE202', '#FFE202'];
+let stop = false;
+let ro: ResizeObserver | undefined;
 
-		onMounted(() => {
+onMounted(() => {
 	ro = new ResizeObserver((entries, observer) => {
 		width.value = el.value?.offsetWidth + 64;
 		height.value = el.value?.offsetHeight + 64;
@@ -106,20 +103,11 @@ export default defineComponent({
 		}, 500 + (Math.random() * 500));
 	};
 	add();
-		});
+});
 
-		onUnmounted(() => {
+onUnmounted(() => {
 	if (ro) ro.disconnect();
 	stop = true;
-		});
-
-		return {
-			el,
-			width,
-			height,
-			particles,
-		};
-	},
 });
 </script>
 

packages/client/src/components/tab.vue

@@ -18,13 +18,13 @@ export default defineComponent({
 			disabled: this.modelValue === option.props.value,
 			onClick: () => {
 				this.$emit('update:modelValue', option.props.value);
-			}
+			},
 		}, option.children), [
-			[resolveDirective('click-anime')]
+			[resolveDirective('click-anime')],
 		]))), [
-			[resolveDirective('size'), { max: [500] }]
+			[resolveDirective('size'), { max: [500] }],
 		]);
-	}
+	},
 });
 </script>