refactor(client): refactor settings/plugin/install to use Composition API (#8591)

packages/client/src/pages/settings/plugin.install.vue

@@ -1,19 +1,19 @@
 <template>
 <div class="_formRoot">
-	<FormInfo warn class="_formBlock">{{ $ts._plugin.installWarn }}</FormInfo>
+	<FormInfo warn class="_formBlock">{{ i18n.ts._plugin.installWarn }}</FormInfo>
 
 	<FormTextarea v-model="code" tall class="_formBlock">
-		<template #label>{{ $ts.code }}</template>
+		<template #label>{{ i18n.ts.code }}</template>
 	</FormTextarea>
 
 	<div class="_formBlock">
-		<FormButton :disabled="code == null" primary inline @click="install"><i class="fas fa-check"></i> {{ $ts.install }}</FormButton>
+		<FormButton :disabled="code == null" primary inline @click="install"><i class="fas fa-check"></i> {{ i18n.ts.install }}</FormButton>
 	</div>
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineAsyncComponent, defineComponent } from 'vue';
+import { defineExpose, defineAsyncComponent, nextTick, ref } from 'vue';
 import { AiScript, parse } from '@syuilo/aiscript';
 import { serialize } from '@syuilo/aiscript/built/serializer';
 import { v4 as uuid } from 'uuid';
@@ -23,111 +23,121 @@ import FormInfo from '@/components/ui/info.vue';
 import * as os from '@/os';
 import { ColdDeviceStorage } from '@/store';
 import { unisonReload } from '@/scripts/unison-reload';
+import { i18n } from '@/i18n';
 import * as symbols from '@/symbols';
 
-export default defineComponent({
+const code = ref(null);
-	components: {
-		FormTextarea,
-		FormButton,
-		FormInfo,
-	},
 
-	emits: ['info'],
+function installPlugin({ id, meta, ast, token }) {
+	ColdDeviceStorage.set('plugins', ColdDeviceStorage.get('plugins').concat({
+		...meta,
+		id,
+		active: true,
+		configData: {},
+		token: token,
+		ast: ast
+	}));
+}
 
-	data() {
+async function install() {
-		return {
+	let ast;
-			[symbols.PAGE_INFO]: {
+	try {
-				title: this.$ts._plugin.install,
+		ast = parse(code.value);
-				icon: 'fas fa-download',
+	} catch (e) {
-				bg: 'var(--bg)',
+		os.alert({
-			},
+			type: 'error',
-			code: null,
+			text: 'Syntax error :('
-		}
+		});
-	},
+		return;
+	}
 
-	methods: {
+	const meta = AiScript.collectMetadata(ast);
-		installPlugin({ id, meta, ast, token }) {
+	if (meta == null) {
-			ColdDeviceStorage.set('plugins', ColdDeviceStorage.get('plugins').concat({
+		os.alert({
-				...meta,
+			type: 'error',
-				id,
+			text: 'No metadata found :('
-				active: true,
+		});
-				configData: {},
+		return;
-				token: token,
+	}
-				ast: ast
+
-			}));
+	const data = meta.get(null);
+	if (data == null) {
+		os.alert({
+			type: 'error',
+			text: 'No metadata found :('
+		});
+		return;
+	}
+
+	const { name, version, author, description, permissions, config } = data;
+	if (name == null || version == null || author == null) {
+		os.alert({
+			type: 'error',
+			text: 'Required property not found :('
+		});
+		return;
+	}
+
+	const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => {
+		os.popup(import('@/components/token-generate-window.vue'), {
+			title: i18n.ts.tokenRequested,
+			information: i18n.ts.pluginTokenRequestedDescription,
+			initialName: name,
+			initialPermissions: permissions
+		}, {
+			done: async result => {
+				const { name, permissions } = result;
+				const { token } = await os.api('miauth/gen-token', {
+					session: null,
+					name: name,
+					permission: permissions,
+				});
+
+				res(token);
+			}
+		}, 'closed');
+	});
+
+	installPlugin({
+		id: uuid(),
+		meta: {
+			name, version, author, description, permissions, config
 		},
+		token,
+		ast: serialize(ast)
+	});
 
-		async install() {
+	os.success();
-			let ast;
+
-			try {
+	const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => {
-				ast = parse(this.code);
+		os.popup(defineAsyncComponent(() => import('@/components/token-generate-window.vue')), {
-			} catch (e) {
+			title: i18n.ts.tokenRequested,
-				os.alert({
+			information: i18n.ts.pluginTokenRequestedDescription,
-					type: 'error',
+			initialName: name,
-					text: 'Syntax error :('
+			initialPermissions: permissions
+		}, {
+			done: async result => {
+				const { name, permissions } = result;
+				const { token } = await os.api('miauth/gen-token', {
+					session: null,
+					name: name,
+					permission: permissions,
 				});
-				return;
+				res(token);
-			}
-			const meta = AiScript.collectMetadata(ast);
-			if (meta == null) {
-				os.alert({
-					type: 'error',
-					text: 'No metadata found :('
-				});
-				return;
-			}
-			const data = meta.get(null);
-			if (data == null) {
-				os.alert({
-					type: 'error',
-					text: 'No metadata found :('
-				});
-				return;
-			}
-			const { name, version, author, description, permissions, config } = data;
-			if (name == null || version == null || author == null) {
-				os.alert({
-					type: 'error',
-					text: 'Required property not found :('
-				});
-				return;
 			}
+		}, 'closed');
+	});
 
-			const token = permissions == null || permissions.length === 0 ? null : await new Promise((res, rej) => {
+	nextTick(() => {
-				os.popup(defineAsyncComponent(() => import('@/components/token-generate-window.vue')), {
+		unisonReload();
-					title: this.$ts.tokenRequested,
+	});
-					information: this.$ts.pluginTokenRequestedDescription,
+}
-					initialName: name,
-					initialPermissions: permissions
-				}, {
-					done: async result => {
-						const { name, permissions } = result;
-						const { token } = await os.api('miauth/gen-token', {
-							session: null,
-							name: name,
-							permission: permissions,
-						});
 
-						res(token);
+defineExpose({
-					}
+	[symbols.PAGE_INFO]: {
-				}, 'closed');
+		title: i18n.ts._plugin.install,
-			});
+		icon: 'fas fa-download',
-
+		bg: 'var(--bg)',
-			this.installPlugin({
-				id: uuid(),
-				meta: {
-					name, version, author, description, permissions, config
-				},
-				token,
-				ast: serialize(ast)
-			});
-
-			os.success();
-
-			this.$nextTick(() => {
-				unisonReload();
-			});
-		},
 	}
 });
 </script>