refactor(client): use setup syntax

packages/client/src/components/MkRipple.vue

@@ -1,8 +1,9 @@
 <template>
-<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }" :class="{ active }">
+<div class="vswabwbm" :style="{ zIndex, top: `${y - 64}px`, left: `${x - 64}px` }">
 	<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
 		<circle fill="none" cx="64" cy="64">
-			<animate attributeName="r"
+			<animate
+				attributeName="r"
 				begin="0s" dur="0.5s"
 				values="4; 32"
 				calcMode="spline"
@@ -10,7 +11,8 @@
 				keySplines="0.165, 0.84, 0.44, 1"
 				repeatCount="1"
 			/>
-			<animate attributeName="stroke-width"
+			<animate
+				attributeName="stroke-width"
 				begin="0s" dur="0.5s"
 				values="16; 0"
 				calcMode="spline"
@@ -21,7 +23,8 @@
 		</circle>
 		<g fill="none" fill-rule="evenodd">
 			<circle v-for="(particle, i) in particles" :key="i" :fill="particle.color">
-				<animate attributeName="r"
+				<animate
+					attributeName="r"
 					begin="0s" dur="0.8s"
 					:values="`${particle.size}; 0`"
 					calcMode="spline"
@@ -29,7 +32,8 @@
 					keySplines="0.165, 0.84, 0.44, 1"
 					repeatCount="1"
 				/>
-				<animate attributeName="cx"
+				<animate
+					attributeName="cx"
 					begin="0s" dur="0.8s"
 					:values="`${particle.xA}; ${particle.xB}`"
 					calcMode="spline"
@@ -37,7 +41,8 @@
 					keySplines="0.3, 0.61, 0.355, 1"
 					repeatCount="1"
 				/>
-				<animate attributeName="cy"
+				<animate
+					attributeName="cy"
 					begin="0s" dur="0.8s"
 					:values="`${particle.yA}; ${particle.yB}`"
 					calcMode="spline"
@@ -51,59 +56,47 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, onMounted } from 'vue';
+import { onMounted } from 'vue';
 import * as os from '@/os';
 
-export default defineComponent({
+const props = withDefaults(defineProps<{
-	props: {
+	x: number;
-		x: {
+	y: number;
-			type: Number,
+	particle?: boolean;
-			required: true
+}>(), {
-		},
+	particle: true,
-		y: {
+});
-			type: Number,
-			required: true
-		},
-		particle: {
-			type: Boolean,
-			required: false,
-			default: true,
-		}
-	},
-	emits: ['end'],
-	setup(props, context) {
-		const particles = [];
-		const origin = 64;
-		const colors = ['#FF1493', '#00FFFF', '#FFE202'];
 
-		if (props.particle) {
+const emit = defineEmits<{
-			for (let i = 0; i < 12; i++) {
+	(ev: 'end'): void;
-				const angle = Math.random() * (Math.PI * 2);
+}>();
-				const pos = Math.random() * 16;
-				const velocity = 16 + (Math.random() * 48);
-				particles.push({
-					size: 4 + (Math.random() * 8),
-					xA: origin + (Math.sin(angle) * pos),
-					yA: origin + (Math.cos(angle) * pos),
-					xB: origin + (Math.sin(angle) * (pos + velocity)),
-					yB: origin + (Math.cos(angle) * (pos + velocity)),
-					color: colors[Math.floor(Math.random() * colors.length)]
-				});
-			}
-		}
 
-		onMounted(() => {
+const particles = [];
-			window.setTimeout(() => {
+const origin = 64;
-				context.emit('end');
+const colors = ['#FF1493', '#00FFFF', '#FFE202'];
-			}, 1100);
+const zIndex = os.claimZIndex('high');
+
+if (props.particle) {
+	for (let i = 0; i < 12; i++) {
+		const angle = Math.random() * (Math.PI * 2);
+		const pos = Math.random() * 16;
+		const velocity = 16 + (Math.random() * 48);
+		particles.push({
+			size: 4 + (Math.random() * 8),
+			xA: origin + (Math.sin(angle) * pos),
+			yA: origin + (Math.cos(angle) * pos),
+			xB: origin + (Math.sin(angle) * (pos + velocity)),
+			yB: origin + (Math.cos(angle) * (pos + velocity)),
+			color: colors[Math.floor(Math.random() * colors.length)],
 		});
+	}
+}
 
-		return {
+onMounted(() => {
-			particles,
+	window.setTimeout(() => {
-			zIndex: os.claimZIndex('high'),
+		emit('end');
-		};
+	}, 1100);
-	},
 });
 </script>
 

packages/client/src/pages/follow.vue

@@ -3,63 +3,58 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import * as Acct from 'misskey-js/built/acct';
 import * as os from '@/os';
 import { mainRouter } from '@/router';
+import { i18n } from '@/i18n';
 
-export default defineComponent({
+async function follow(user): Promise<void> {
-	created() {
+	const { canceled } = await os.confirm({
-		const acct = new URL(location.href).searchParams.get('acct');
+		type: 'question',
-		if (acct == null) return;
+		text: i18n.t('followConfirm', { name: user.name || user.username }),
+	});
 
-		let promise;
+	if (canceled) {
+		window.close();
+		return;
+	}
 	
-		if (acct.startsWith('https://')) {
+	os.apiWithDialog('following/create', {
-			promise = os.api('ap/show', {
+		userId: user.id,
-				uri: acct,
+	});
-			});
+}
-			promise.then(res => {
+
-				if (res.type === 'User') {
+const acct = new URL(location.href).searchParams.get('acct');
-					this.follow(res.object);
+if (acct == null) return;
-				} else if (res.type === 'Note') {
+
-					mainRouter.push(`/notes/${res.object.id}`);
+let promise;
-				} else {
+
-					os.alert({
+if (acct.startsWith('https://')) {
-						type: 'error',
+	promise = os.api('ap/show', {
-						text: 'Not a user',
+		uri: acct,
-					}).then(() => {
+	});
-						window.close();
+	promise.then(res => {
-					});
+		if (res.type === 'User') {
-				}
+			follow(res.object);
-			});
+		} else if (res.type === 'Note') {
+			mainRouter.push(`/notes/${res.object.id}`);
 		} else {
-			promise = os.api('users/show', Acct.parse(acct));
+			os.alert({
-			promise.then(user => {
+				type: 'error',
-				this.follow(user);
+				text: 'Not a user',
+			}).then(() => {
+				window.close();
 			});
 		}
+	});
+} else {
+	promise = os.api('users/show', Acct.parse(acct));
+	promise.then(user => {
+		follow(user);
+	});
+}
 
-		os.promiseDialog(promise, null, null, this.$ts.fetchingAsApObject);
+os.promiseDialog(promise, null, null, i18n.ts.fetchingAsApObject);
-	},
-
-	methods: {
-		async follow(user) {
-			const { canceled } = await os.confirm({
-				type: 'question',
-				text: this.$t('followConfirm', { name: user.name || user.username }),
-			});
-
-			if (canceled) {
-				window.close();
-				return;
-			}
-			
-			os.apiWithDialog('following/create', {
-				userId: user.id,
-			});
-		},
-	},
-});
 </script>

packages/client/src/ui/deck/tl-column.vue

@@ -102,22 +102,6 @@ const menu = [{
 	text: i18n.ts.timeline,
 	action: setType,
 }];
-
-/*
-export default defineComponent({
-	watch: {
-		mediaOnly() {
-			(this.$refs.timeline as any).reload();
-		}
-	},
-
-	methods: {
-		focus() {
-			(this.$refs.timeline as any).focus();
-		}
-	}
-});
-*/
 </script>
 
 <style lang="scss" scoped>