Mkasout

packages/frontend/src/components/MkAsOut.vue

@@ -0,0 +1,65 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="$style.root">
+	<div v-for="log in model.logs" :key="log.id" :class="$style[log.type]">{{ log.text }}</div>
+</div>
+</template>
+
+<script lang="ts">
+export class AsOutTL {
+  constructor(){}
+  readonly logs = ref<AsOutLog[]>([]);
+  private push(type: AsOutLog['type'], text: string) {
+    this.logs.value.push({type, text, id: Math.random().toString()});
+  }
+	flush() { this.logs.value = [] }
+  out(value: values.Value): void {
+    this.push('out', value.type === 'str' ? value.value : utils.valToString(value));
+  }
+  log(type: string, params: values.Value): void {
+    switch (type) {
+      case 'end':
+        this.push('log', utils.valToString(params.val, true));
+      default: break;
+    }
+  }
+  logManually(mes: string): void {
+    this.push('log', mes);
+  }
+  err(err: errors.AiScriptError): void {
+    this.push('err', `${err}`);
+  }
+};
+</script>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { values, utils, errors } from '@syuilo/aiscript';
+
+const model = defineModel<AsOutTL>({ required: true });
+
+type AsOutLog = {
+  type: 'out' | 'log' | 'err',
+  text: string,
+  id: string,
+};
+</script>
+
+<style lang="scss" module>
+.root {
+	padding: 16px;
+}
+
+.out {
+}
+.log {
+  opacity: 0.7;
+}
+.err {
+  color: var(--error);
+}
+</style>

packages/frontend/src/pages/scratchpad.vue

@@ -25,9 +25,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<MkContainer :foldable="true" class="">
 				<template #header>{{ i18n.ts.output }}</template>
-				<div :class="$style.logs">
-					<div v-for="log in logs" :key="log.id" class="log" :class="{ print: log.print }">{{ log.text }}</div>
-				</div>
+				<MkAsOut v-model="logtl"/>
 			</MkContainer>
 
 			<div class="">
@@ -51,13 +49,14 @@ import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { AsUiComponent, AsUiRoot, registerAsUiLib } from '@/scripts/aiscript/ui.js';
 import MkAsUi from '@/components/MkAsUi.vue';
+import MkAsOut, { AsOutTL } from '@/components/MkAsOut.vue';
 import { miLocalStorage } from '@/local-storage.js';
 import { claimAchievement } from '@/scripts/achievements.js';
 
 const parser = new Parser();
 let aiscript: Interpreter;
 const code = ref('');
-const logs = ref<any[]>([]);
+const logtl = new AsOutTL();
 const root = ref<AsUiRoot>();
 const components = ref<Ref<AsUiComponent>[]>([]);
 const uiKey = ref(0);
@@ -76,7 +75,7 @@ async function run() {
 	root.value = undefined;
 	components.value = [];
 	uiKey.value++;
-	logs.value = [];
+	logtl.flush();
 	aiscript = new Interpreter(({
 		...createAiScriptEnv({
 			storageKey: 'widget',
@@ -91,29 +90,17 @@ async function run() {
 			if (value.type === 'str' && value.value.toLowerCase().replace(',', '').includes('hello world')) {
 				claimAchievement('outputHelloWorldOnScratchpad');
 			}
-			logs.value.push({
-				id: Math.random(),
-				text: value.type === 'str' ? value.value : utils.valToString(value),
-				print: true,
-			});
+			logtl.out(value);
 		},
 		err: (err) => {
 			os.alert({
 				type: 'error',
 				title: 'AiScript Error',
 				text: err.toString(),
 			});
+			logtl.err(err);
 		},
-		log: (type, params) => {
-			switch (type) {
-				case 'end': logs.value.push({
-					id: Math.random(),
-					text: utils.valToString(params.val, true),
-					print: false,
-				}); break;
-				default: break;
-			}
-		},
+		log: logtl.log,
 	});
 
 	let ast;
@@ -180,16 +167,4 @@ definePageMetadata(() => ({
 .ui {
 	padding: 32px;
 }
-
-.logs {
-	padding: 16px;
-
-	&:global {
-		> .log {
-			&:not(.print) {
-				opacity: 0.7;
-			}
-		}
-	}
-}
 </style>