エラーの出力に対応

Author: kakkokari-gtyih

.vitepress/components/Playground.vue

@@ -6,62 +6,115 @@
             <button :class="[$style.playgroundButton]" :disabled="loading" @click="clearLog">Clear</button>
         </div>
         <div :class="$style.playgroundLogs">
-            <div v-for="log in logs" :key="log" :class="$style.playgroundLogItem">{{ log }}</div>
+            <div
+                v-for="log in logs"
+                :key="log.text"
+                :class="[
+                    $style.playgroundLogItem,
+                    {
+                        [$style.error]: log.type === 'error',
+                        [$style.info]: log.type === 'info',
+                    }
+                ]"
+            >{{ log.text }}</div>
         </div>
     </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import type { Interpreter, Parser, utils as aisUtils } from '@syuilo/aiscript';
+import { utils, errors } from '@syuilo/aiscript';
+import type { Interpreter, Parser } from '@syuilo/aiscript';
 
 const props = defineProps<{
     code: string;
 }>();
 
-const logs = ref<string[]>([]);
+const logs = ref<{
+    text: string;
+    type?: 'error' | 'info';
+}[]>([]);
 const loading = ref(false);
 
 let ParserClass: typeof Parser | null = null;
 let InterpreterClass: typeof Interpreter | null = null;
-let utils: typeof aisUtils | null = null;
 
 let parser: Parser | null = null;
 let interpreter: Interpreter | null = null;
 
 async function run() {
     loading.value = true;
-    logs.value = ['[Playground] Loading...'];
-    if (!ParserClass || !InterpreterClass || !utils) {
+
+    if (logs.value.length > 0) {
+        logs.value = [];
+        await new Promise((resolve) => setTimeout(resolve, 100));
+    }
+
+    logs.value = [{
+        text: `[Playground] Loading...`,
+        type: 'info',
+    }];
+
+    if (!ParserClass || !InterpreterClass) {
         const [
-            { Parser, Interpreter, utils: importedUtils },
+            { Parser, Interpreter },
         ] = await Promise.all([
             import('@syuilo/aiscript'),
             new Promise((resolve) => setTimeout(resolve, 250)), // あまりにも高速に切り替わると実行できてるのかわかりにくいので、最低250msはロード画面を挟む
         ]);
         ParserClass = Parser;
         InterpreterClass = Interpreter;
-        utils = importedUtils;
     } else {
         await new Promise((resolve) => setTimeout(resolve, 250)); // あまりにも高速に切り替わると実行できてるのかわかりにくいので、最低250msはロード画面を挟む
     }
+
     if (!parser) {
         parser = new ParserClass();
     }
     if (interpreter) {
         interpreter.abort();
     }
+
     interpreter = new InterpreterClass({}, {
         out: (value) => {
-            logs.value.push(value.type === 'num' ? value.value.toString() : value.type === 'str' ? value.value : utils?.valToString(value) ?? '');
+            logs.value.push({
+                text: value.type === 'num' ? value.value.toString() : value.type === 'str' ? value.value : utils.valToString(value) ?? '',
+            });
         },
     });
 
-    logs.value = [];
     loading.value = false;
 
-    const ast = parser.parse(props.code);
-    await interpreter.exec(ast);
+    try {
+        const ast = parser.parse(props.code);
+        await interpreter.exec(ast);
+    } catch (err) {
+        if (err instanceof errors.AiScriptError) {
+            let errorName = 'AiScriptError';
+
+            if (err instanceof errors.AiScriptSyntaxError) {
+                errorName = 'SyntaxError';
+            } else if (err instanceof errors.AiScriptTypeError) {
+                errorName = 'TypeError';
+            } else if (err instanceof errors.AiScriptRuntimeError) {
+                errorName = 'RuntimeError';
+            } else if (err instanceof errors.AiScriptIndexOutOfRangeError) {
+                errorName = 'IndexOutOfRangeError';
+            } else if (err instanceof errors.AiScriptUserError) {
+                errorName = 'UserError';
+            }
+
+            logs.value.push({
+                text: `[${errorName}] ${err.name}: ${err.message}`,
+                type: 'error',
+            });
+        } else {
+            logs.value.push({
+                text: `[Error] ${err}`,
+                type: 'error',
+            });
+        }
+    }
 }
 
 function stop() {
@@ -136,5 +189,18 @@ function clearLog() {
     font-family: var(--vp-font-family-mono);
     white-space: pre-wrap;
     font-size: 14px;
+    padding: 0 8px;
+    border-radius: 4px;
+}
+
+.playgroundLogItem.error {
+    background-color: var(--vp-c-danger-soft);
+    color: var(--vp-c-danger-1);
+}
+
+.playgroundLogItem.info {
+    background-color: var(--vp-c-tip-soft);
+    color: var(--vp-c-tip-2);
+    font-style: italic;
 }
 </style>

docs/ja/guides/get-started.md

@@ -262,11 +262,11 @@ AiScriptファイルにメタデータを埋め込める機能です。
 
 ## エラーメッセージ
 進行不能なエラーが発生するとエラーメッセージが表示されます。  
-```aiscript
+```aiscript playground
 let scores=[10, 8, 5, 5]
 let 3rd=scores[2] // unexpected token: NumberLiteral (Line 2, Column 5)
 ```
-```aiscript
+```aiscript playground
 let arr=[]
 arr[0] // Runtime: Index out of range. Index: 0 max: -1 (Line 2, Column 4)
 ```