refactor(client): use setup syntax

packages/client/src/components/MkGalleryPostPreview.vue

@@ -14,26 +14,15 @@
 </MkA>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { } from 'vue';
 import { userName } from '@/filters/user';
 import ImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
 import * as os from '@/os';
 
-export default defineComponent({
+const props = defineProps<{
-	components: {
+	post: any;
-		ImgWithBlurhash,
+}>();
-	},
-	props: {
-		post: {
-			type: Object,
-			required: true,
-		},
-	},
-	methods: {
-		userName,
-	},
-});
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/global/MkAd.vue

@@ -1,8 +1,8 @@
 <template>
-<div v-if="ad" class="qiivuoyo">
+<div v-if="chosen" class="qiivuoyo">
-	<div v-if="!showMenu" class="main" :class="ad.place">
+	<div v-if="!showMenu" class="main" :class="chosen.place">
-		<a :href="ad.url" target="_blank">
+		<a :href="chosen.url" target="_blank">
-			<img :src="ad.imageUrl">
+			<img :src="chosen.imageUrl">
 			<button class="_button menu" @click.prevent.stop="toggleMenu"><span class="fas fa-info-circle info-circle"></span></button>
 		</a>
 	</div>
@@ -10,7 +10,7 @@
 		<div class="body">
 			<div>Ads by {{ host }}</div>
 			<!--<MkButton class="button" primary>{{ $ts._ad.like }}</MkButton>-->
-			<MkButton v-if="ad.ratio !== 0" class="button" @click="reduceFrequency">{{ $ts._ad.reduceFrequencyOfThisAd }}</MkButton>
+			<MkButton v-if="chosen.ratio !== 0" class="button" @click="reduceFrequency">{{ $ts._ad.reduceFrequencyOfThisAd }}</MkButton>
 			<button class="_textButton" @click="toggleMenu">{{ $ts._ad.back }}</button>
 		</div>
 	</div>
@@ -18,44 +18,34 @@
 <div v-else></div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent, ref } from 'vue';
+import { ref } from 'vue';
 import { instance } from '@/instance';
 import { host } from '@/config';
 import MkButton from '@/components/ui/button.vue';
 import { defaultStore } from '@/store';
 import * as os from '@/os';
 
-export default defineComponent({
+type Ad = (typeof instance)['ads'][number];
-	components: {
-		MkButton
-	},
 
-	props: {
+const props = defineProps<{
-		prefer: {
+	prefer: string[];
-			type: Array,
+	specify?: Ad;
-			required: true
+}>();
-		},
-		specify: {
-			type: Object,
-			required: false
-		},
-	},
 
-	setup(props) {
 const showMenu = ref(false);
-		const toggleMenu = () => {
+const toggleMenu = (): void => {
 	showMenu.value = !showMenu.value;
 };
 
-		const choseAd = (): (typeof instance)['ads'][number] | null => {
+const choseAd = (): Ad | null => {
 	if (props.specify) {
-				return props.specify as (typeof instance)['ads'][number];
+		return props.specify;
 	}
 
 	const allAds = instance.ads.map(ad => defaultStore.state.mutedAds.includes(ad.id) ? {
 		...ad,
-				ratio: 0
+		ratio: 0,
 	} : ad);
 
 	let ads = allAds.filter(ad => props.prefer.includes(ad.place));
@@ -92,24 +82,14 @@ export default defineComponent({
 
 const chosen = ref(choseAd());
 
-		const reduceFrequency = () => {
+function reduceFrequency(): void {
 	if (chosen.value == null) return;
 	if (defaultStore.state.mutedAds.includes(chosen.value.id)) return;
 	defaultStore.push('mutedAds', chosen.value.id);
 	os.success();
 	chosen.value = choseAd();
 	showMenu.value = false;
-		};
-
-		return {
-			ad: chosen,
-			showMenu,
-			toggleMenu,
-			host,
-			reduceFrequency,
-		};
 }
-});
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/global/MkUrl.vue

@@ -18,27 +18,19 @@
 </component>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineAsyncComponent, defineComponent, ref } from 'vue';
+import { defineAsyncComponent, ref } from 'vue';
 import { toUnicode as decodePunycode } from 'punycode/';
 import { url as local } from '@/config';
 import * as os from '@/os';
 import { useTooltip } from '@/scripts/use-tooltip';
 import { safeURIDecode } from '@/scripts/safe-uri-decode';
 
-export default defineComponent({
+const props = defineProps<{
-	props: {
+	url: string;
-		url: {
+	rel?: string;
-			type: String,
+}>();
-			required: true,
+
-		},
-		rel: {
-			type: String,
-			required: false,
-			default: null,
-		},
-	},
-	setup(props) {
 const self = props.url.startsWith(local);
 const url = new URL(props.url);
 const el = ref();
@@ -51,21 +43,14 @@ export default defineComponent({
 	}, {}, 'closed');
 });
 
-		return {
+const schema = url.protocol;
-			local,
+const hostname = decodePunycode(url.hostname);
-			schema: url.protocol,
+const port = url.port;
-			hostname: decodePunycode(url.hostname),
+const pathname = safeURIDecode(url.pathname);
-			port: url.port,
+const query = safeURIDecode(url.search);
-			pathname: safeURIDecode(url.pathname),
+const hash = safeURIDecode(url.hash);
-			query: safeURIDecode(url.search),
+const attr = self ? 'to' : 'href';
-			hash: safeURIDecode(url.hash),
+const target = self ? null : '_blank';
-			self: self,
-			attr: self ? 'to' : 'href',
-			target: self ? null : '_blank',
-			el,
-		};
-	},
-});
 </script>
 
 <style lang="scss" scoped>

packages/client/src/components/ui/hr.vue

@@ -1,17 +0,0 @@
-<template>
-<div class="evrzpitu"></div>
-</template>
-
-<script lang="ts">
-import { defineComponent } from 'vue';
-import * as os from '@/os';
-
-export default defineComponent({});
-</script>
-
-<style lang="scss" scoped>
-.evrzpitu
-	margin 16px 0
-	border-bottom solid var(--lineWidth) var(--faceDivider)
-
-</style>

packages/client/src/pages/user/clips.vue

@@ -9,40 +9,22 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from 'vue';
+import { computed } from 'vue';
+import * as misskey from 'misskey-js';
 import MkPagination from '@/components/ui/pagination.vue';
 
-export default defineComponent({
+const props = defineProps<{
-	components: {
+	user: misskey.entities.User;
-		MkPagination,
+}>();
-	},
 
-	props: {
+const pagination = {
-		user: {
-			type: Object,
-			required: true
-		},
-	},
-
-	data() {
-		return {
-			pagination: {
 	endpoint: 'users/clips' as const,
 	limit: 20,
-				params: {
+	params: computed(() => ({
-					userId: this.user.id,
+		userId: props.user.id,
-				}
+	})),
-			},
 };
-	},
-
-	watch: {
-		user() {
-			this.$refs.list.reload();
-		}
-	},
-});
 </script>
 
 <style lang="scss" scoped>