wip: refactor(client): migrate components to composition api

packages/client/src/components/image-viewer.vue

@@ -1,8 +1,8 @@
 <template>
-<MkModal ref="modal" :z-priority="'middle'" @click="$refs.modal.close()" @closed="$emit('closed')">
+<MkModal ref="modal" :z-priority="'middle'" @click="modal.close()" @closed="emit('closed')">
 	<div class="xubzgfga">
 		<header>{{ image.name }}</header>
-		<img :src="image.url" :alt="image.comment" :title="image.comment" @click="$refs.modal.close()"/>
+		<img :src="image.url" :alt="image.comment" :title="image.comment" @click="modal.close()"/>
 		<footer>
 			<span>{{ image.type }}</span>
 			<span>{{ bytes(image.size) }}</span>
@@ -12,31 +12,23 @@
 </MkModal>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { } from 'vue';
+import * as misskey from 'misskey-js';
 import bytes from '@/filters/bytes';
 import number from '@/filters/number';
 import MkModal from '@/components/ui/modal.vue';
 
-export default defineComponent({
+const props = withDefaults(defineProps<{
-	components: {
+	image: misskey.entities.DriveFile;
-		MkModal,
+}>(), {
-	},
-
-	props: {
-		image: {
-			type: Object,
-			required: true
-		},
-	},
-
-	emits: ['closed'],
-
-	methods: {
-		bytes,
-		number,
-	}
 });
+
+const emit = defineEmits<{
+	(e: 'closed'): void;
+}>();
+
+const modal = $ref<InstanceType<typeof MkModal>>();
 </script>
 
 <style lang="scss" scoped>

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

@@ -5,67 +5,43 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { onMounted } from 'vue';
 import { decode } from 'blurhash';
 
-export default defineComponent({
+const props = withDefaults(defineProps<{
-	props: {
+	src?: string | null;
-		src: {
+	hash: string;
-			type: String,
+	alt?: string;
-			required: false,
+	title?: string | null;
-			default: null
+	size?: number;
-		},
+	cover?: boolean;
-		hash: {
+}>(), {
-			type: String,
+	src: null,
-			required: true
+	alt: '',
-		},
+	title: null,
-		alt: {
+	size: 64,
-			type: String,
+	cover: true,
-			required: false,
+});
-			default: '',
-		},
-		title: {
-			type: String,
-			required: false,
-			default: null,
-		},
-		size: {
-			type: Number,
-			required: false,
-			default: 64
-		},
-		cover: {
-			type: Boolean,
-			required: false,
-			default: true,
-		}
-	},
 
-	data() {
+const canvas = $ref<HTMLCanvasElement>();
-		return {
+let loaded = $ref(false);
-			loaded: false,
-		};
-	},
 
-	mounted() {
+function draw() {
-		this.draw();
+	if (props.hash == null) return;
-	},
+	const pixels = decode(props.hash, props.size, props.size);
-
+	const ctx = canvas.getContext('2d');
-	methods: {
+	const imageData = ctx!.createImageData(props.size, props.size);
-		draw() {
-			if (this.hash == null) return;
-			const pixels = decode(this.hash, this.size, this.size);
-			const ctx = (this.$refs.canvas as HTMLCanvasElement).getContext('2d');
-			const imageData = ctx!.createImageData(this.size, this.size);
 	imageData.data.set(pixels);
 	ctx!.putImageData(imageData, 0, 0);
-		},
+}
 
-		onLoad() {
+function onLoad() {
-			this.loaded = true;
+	loaded = true;
-		}
 }
+
+onMounted(() => {
+	draw();
 });
 </script>
 

packages/client/src/components/signin-dialog.vue

@@ -2,8 +2,8 @@
 <XModalWindow ref="dialog"
 	:width="370"
 	:height="400"
-	@close="$refs.dialog.close()"
+	@close="dialog.close()"
-	@closed="$emit('closed')"
+	@closed="emit('closed')"
 >
 	<template #header>{{ $ts.login }}</template>
 
@@ -11,32 +11,26 @@
 </XModalWindow>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XModalWindow from '@/components/ui/modal-window.vue';
 import MkSignin from './signin.vue';
 
-export default defineComponent({
+const props = withDefaults(defineProps<{
-	components: {
+	autoSet?: boolean;
-		MkSignin,
+}>(), {
-		XModalWindow,
+	autoSet: false,
-	},
-
-	props: {
-		autoSet: {
-			type: Boolean,
-			required: false,
-			default: false,
-		}
-	},
-
-	emits: ['done', 'closed'],
-
-	methods: {
-		onLogin(res) {
-			this.$emit('done', res);
-			this.$refs.dialog.close();
-		}
-	}
 });
+
+const emit = defineEmits<{
+	(e: 'done'): void;
+	(e: 'closed'): void;
+}>();
+
+const dialog = $ref<InstanceType<typeof XModalWindow>>();
+
+function onLogin(res) {
+	emit('done', res);
+	dialog.close();
+}
 </script>

packages/client/src/components/signup-dialog.vue

@@ -2,7 +2,7 @@
 <XModalWindow ref="dialog"
 	:width="366"
 	:height="500"
-	@close="$refs.dialog.close()"
+	@close="dialog.close()"
 	@closed="$emit('closed')"
 >
 	<template #header>{{ $ts.signup }}</template>
@@ -15,36 +15,30 @@
 </XModalWindow>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import XModalWindow from '@/components/ui/modal-window.vue';
 import XSignup from './signup.vue';
 
-export default defineComponent({
+const props = withDefaults(defineProps<{
-	components: {
+	autoSet?: boolean;
-		XSignup,
+}>(), {
-		XModalWindow,
+	autoSet: false,
-	},
-
-	props: {
-		autoSet: {
-			type: Boolean,
-			required: false,
-			default: false,
-		}
-	},
-
-	emits: ['done', 'closed'],
-
-	methods: {
-		onSignup(res) {
-			this.$emit('done', res);
-			this.$refs.dialog.close();
-		},
-
-		onSignupEmailPending() {
-			this.$refs.dialog.close();
-		}
-	}
 });
+
+const emit = defineEmits<{
+	(e: 'done'): void;
+	(e: 'closed'): void;
+}>();
+
+const dialog = $ref<InstanceType<typeof XModalWindow>>();
+
+function onSignup(res) {
+	emit('done', res);
+	dialog.close();
+}
+
+function onSignupEmailPending() {
+	dialog.close();
+}
 </script>