Plugin system (#6479)

* wip

* wip

* wip

* wip

* Update store.ts

src/client/pages/preferences/index.vue

@@ -9,6 +9,8 @@
 
 	<x-sidebar/>
 
+	<x-plugins/>
+
 	<section class="_card">
 		<div class="_title"><fa :icon="faMusic"/> {{ $t('sounds') }}</div>
 		<div class="_content">
@@ -115,6 +117,7 @@ import MkRadio from '../../components/ui/radio.vue';
 import MkRange from '../../components/ui/range.vue';
 import XTheme from './theme.vue';
 import XSidebar from './sidebar.vue';
+import XPlugins from './plugins.vue';
 import { langs } from '../../config';
 import { clientDb, set } from '../../db';
 
@@ -146,11 +149,12 @@ export default Vue.extend({
 	components: {
 		XTheme,
 		XSidebar,
+		XPlugins,
 		MkButton,
 		MkSwitch,
 		MkSelect,
 		MkRadio,
-		MkRange
+		MkRange,
 	},
 
 	data() {

src/client/pages/preferences/plugins.vue

@@ -0,0 +1,134 @@
+<template>
+<section class="_card">
+	<div class="_title"><fa :icon="faPlug"/> {{ $t('plugins') }}</div>
+	<div class="_content">
+		<details>
+			<summary><fa :icon="faDownload"/> {{ $t('install') }}</summary>
+			<mk-info warn>{{ $t('pluginInstallWarn') }}</mk-info>
+			<mk-textarea v-model="script" tall>
+				<span>{{ $t('script') }}</span>
+			</mk-textarea>
+			<mk-button @click="install()" primary><fa :icon="faSave"/> {{ $t('install') }}</mk-button>
+		</details>
+	</div>
+	<div class="_content">
+		<details>
+			<summary><fa :icon="faFolderOpen"/> {{ $t('manage') }}</summary>
+			<mk-select v-model="selectedPluginId">
+				<option v-for="x in $store.state.deviceUser.plugins" :value="x.id" :key="x.id">{{ x.name }}</option>
+			</mk-select>
+			<template v-if="selectedPlugin">
+				<div class="_keyValue">
+					<div>{{ $t('version') }}:</div>
+					<div>{{ selectedPlugin.version }}</div>
+				</div>
+				<div class="_keyValue">
+					<div>{{ $t('author') }}:</div>
+					<div>{{ selectedPlugin.author }}</div>
+				</div>
+				<div class="_keyValue">
+					<div>{{ $t('description') }}:</div>
+					<div>{{ selectedPlugin.description }}</div>
+				</div>
+				<mk-button @click="uninstall()" style="margin-top: 8px;"><fa :icon="faTrashAlt"/> {{ $t('uninstall') }}</mk-button>
+			</template>
+		</details>
+	</div>
+</section>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { faPlug, faSave, faTrashAlt, faFolderOpen, faDownload } from '@fortawesome/free-solid-svg-icons';
+import MkButton from '../../components/ui/button.vue';
+import MkTextarea from '../../components/ui/textarea.vue';
+import MkSelect from '../../components/ui/select.vue';
+import MkInfo from '../../components/ui/info.vue';
+import { AiScript, parse } from '@syuilo/aiscript';
+
+export default Vue.extend({
+	components: {
+		MkButton,
+		MkTextarea,
+		MkSelect,
+		MkInfo,
+	},
+	
+	data() {
+		return {
+			script: '',
+			selectedPluginId: null,
+			faPlug, faSave, faTrashAlt, faFolderOpen, faDownload
+		}
+	},
+
+	computed: {
+		selectedPlugin() {
+			if (this.selectedPluginId == null) return null;
+			return this.$store.state.deviceUser.plugins.find(x => x.id === this.selectedPluginId);
+		},
+	},
+
+	methods: {
+		install() {
+			let ast;
+			try {
+				ast = parse(this.script);
+			} catch (e) {
+				this.$root.dialog({
+					type: 'error',
+					text: 'Syntax error :('
+				});
+				return;
+			}
+			const meta = AiScript.collectMetadata(ast);
+			console.log(meta);
+			if (meta == null) {
+				this.$root.dialog({
+					type: 'error',
+					text: 'No metadata found :('
+				});
+				return;
+			}
+			const data = meta.get(null);
+			if (data == null) {
+				this.$root.dialog({
+					type: 'error',
+					text: 'No metadata found :('
+				});
+				return;
+			}
+			const { id, name, version, author, description } = data;
+			if (id == null || name == null || version == null || author == null) {
+				this.$root.dialog({
+					type: 'error',
+					text: 'Required property not found :('
+				});
+				return;
+			}
+			this.$store.commit('deviceUser/installPlugin', {
+				meta: {
+					id, name, version, author, description
+				},
+				ast
+			});
+			this.$root.dialog({
+				type: 'success',
+				iconOnly: true, autoClose: true
+			});
+		},
+
+		uninstall() {
+			this.$store.commit('deviceUser/uninstallPlugin', this.selectedPluginId);
+			this.$root.dialog({
+				type: 'success',
+				iconOnly: true, autoClose: true
+			});
+		}
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/client/pages/scratchpad.vue

@@ -30,7 +30,7 @@ import PrismEditor from 'vue-prism-editor';
 import { AiScript, parse, utils, values } from '@syuilo/aiscript';
 import MkContainer from '../components/ui/container.vue';
 import MkButton from '../components/ui/button.vue';
-import { createAiScriptEnv } from '../scripts/create-aiscript-env';
+import { createAiScriptEnv } from '../scripts/aiscript/api';
 
 export default Vue.extend({
 	metaInfo() {