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">
+<script lang="ts" setup>
-import { computed, defineComponent, ref } from 'vue';
+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,19 +23,11 @@ import { $i } from '@/account';
 import { useTooltip } from '@/scripts/use-tooltip';
 import { i18n } from '@/i18n';
 
-export default defineComponent({
+const props = defineProps<{
-	props: {
+	note: misskey.entities.Note;
-		count: {
+	count: number;
-			type: Number,
+}>();
-			required: true,
-		},
-		note: {
-			type: Object,
-			required: true,
-		},
-	},
 
-	setup(props) {
 const buttonRef = ref<HTMLElement>();
 
 const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i.id);
@@ -41,7 +35,7 @@ export default defineComponent({
 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,7 +46,7 @@ export default defineComponent({
 		showing,
 		users,
 		count: props.count,
-				targetElement: buttonRef.value
+		targetElement: buttonRef.value,
 	}, {}, 'closed');
 });
 
@@ -63,9 +57,9 @@ export default defineComponent({
 		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,12 +63,9 @@
 </span>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, onMounted, onUnmounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
-import * as os from '@/os';
 
-export default defineComponent({
-	setup() {
 const particles = ref([]);
 const el = ref<HTMLElement>();
 const width = ref(0);
@@ -112,15 +109,6 @@ export default defineComponent({
 	if (ro) ro.disconnect();
 	stop = true;
 });
-
-		return {
-			el,
-			width,
-			height,
-			particles,
-		};
-	},
-});
 </script>
 
 <style lang="scss" scoped>

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>