Revert "MainArea"

This reverts commit a8bb0eb.

src/App.vue

@@ -1,22 +1,28 @@
 <template>
-	<div id='wrapper'>
   <h1>
     AiScript (
     <MenuButton id="version" :options="menu" @select="onVersionSelect">{{
       version
     }}</MenuButton>
     ) Playground
   </h1>
-	<div v-for='v in versions'>
-		<MainArea :ver='v' v-if='v==version'/>
-	</div>
-	</div>
+  <Next v-if="version === 'next'"></Next>
+  <Develop v-if="version === 'develop'"></Develop>
+  <V0_16_0 v-if="version === '0.16.0'"></V0_16_0>
+  <V0_15_0 v-if="version === '0.15.0'"></V0_15_0>
+  <V0_14_1 v-if="version === '0.14.1'"></V0_14_1>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
-import MainArea, { versions, latest } from './MainArea.vue';
 import MenuButton from "@common/MenuButton.vue";
+import Next from "./versions/next/index.vue";
+import Develop from "./versions/develop/index.vue";
+import V0_16_0 from "./versions/0.16.0/index.vue";
+import V0_15_0 from "./versions/0.15.0/index.vue";
+import V0_14_1 from "./versions/0.14.1/index.vue";
+const versions = ["next", "develop", "0.16.0", "0.15.0", "0.14.1"] as const;
+const latest = "0.16.0";
 
 const version = ref(window.localStorage.getItem("version") ?? latest);
 const menu = Object.fromEntries(
@@ -56,11 +62,8 @@ body {
 </style>
 
 <style scoped>
-#wrapper {
-	padding: 16px;
-}
 h1 {
   font-size: 1.5em;
-  margin: 0 16px;
+  margin: 16px 16px 0 16px;
 }
 </style>

src/MainArea.vue → src/versions/0.14.1/index.vue

@@ -22,7 +22,7 @@
     <div id="grid2">
       <Container id="ast">
         <template #header>AST</template>
-        <pre>{{ ast }}</pre>
+        <pre>{{ JSON.stringify(ast, null, "\t") }}</pre>
       </Container>
       <Container id="bin">
         <template #header>Bytecode</template>
@@ -35,76 +35,92 @@
   </div>
 </template>
 
-<script lang="ts">
-export const versions = ["next", "develop", "0.16.0", "0.15.0", "0.14.1"] as const;
-export const latest = "0.16.0" as const;
-export type Log = {
-	id: number;
-	type?: string;
-	text?: string;
-	print?: boolean;
-}
-</script>
 <script setup lang="ts">
 import { ref, watch } from "vue";
+import { Interpreter, Parser, values, utils, Ast } from "./version.ts";
+import { version, samples } from "./version.ts";
 import Editor from "@common/Editor.vue";
 import Container from "@common/Container.vue";
-import * as Next from "@/versions/next/index.ts";
-import * as Develop from "@/versions/develop/index.ts";
-import * as V0_16_0 from "@/versions/0.16.0/index.ts";
-import * as V0_15_0 from "@/versions/0.15.0/index.ts";
-import * as V0_14_1 from "@/versions/0.14.1/index.ts";
-
-const props = defineProps<{
-	ver: typeof versions[number];
-}>();
-const { parse, exec, version, samples } = {
-	'next': Next,
-	'develop': Develop,
-	'0.16.0': V0_16_0,
-	'0.15.0': V0_15_0,
-	'0.14.1': V0_14_1,
-}[props.ver];
 
 const script = ref(
   window.localStorage.getItem(version) ?? '<: "Hello, AiScript!"',
 );
 
-const logs = ref<Log[]>([]);
-const ast = ref<string>('');
+const ast = ref<Ast.Node[] | null>(null);
+const logs = ref<
+  {
+    id: number;
+    type?: string;
+    text?: string;
+    print?: boolean;
+  }[]
+>([]);
 const syntaxErrorMessage = ref<string | null>(null);
 
 watch(
   script,
   () => {
     window.localStorage.setItem(version, script.value);
     try {
-      ast.value = parse(script.value);
+      ast.value = Parser.parse(script.value);
       syntaxErrorMessage.value = null;
     } catch (e) {
       const err = e as Error;
       syntaxErrorMessage.value = err.message;
       console.error("info" in err ? err.info : err);
       return;
     }
-  }, { immediate: true, }
+  },
+  {
+    immediate: true,
+  },
 );
 
-function run() {
+let interpreter: Interpreter | null = null;
+const run = async () => {
   logs.value = [];
-	exec({
-		in: (q: string) => new Promise((ok) => {
-			const res = window.prompt(q);
-			ok(res ?? "");
-		}),
-		out: (l: Log) => logs.value.push(l),
-		end: (l: Log) => logs.value.push(l),
-		err: (e: any) => {
-			console.error(e);
-			window.alert(`{e}`);
-		}
-	});
-}
+
+  interpreter?.abort();
+  interpreter = new Interpreter(
+    {},
+    {
+      in: (q: string) => {
+        return new Promise((ok) => {
+          const res = window.prompt(q);
+          ok(res ?? "");
+        });
+      },
+      out: (value: values.Value) => {
+        logs.value.push({
+          id: Math.random(),
+          type: value.type,
+          text: utils.valToString(value, true),
+          print: true,
+        });
+      },
+      log: (type: string, params: Record<string, any>) => {
+        switch (type) {
+          case "end":
+            logs.value.push({
+              id: Math.random(),
+              text: utils.valToString(params.val, true),
+              print: false,
+            });
+            break;
+          default:
+            break;
+        }
+      },
+    },
+  );
+
+  try {
+    await interpreter.exec(ast.value!);
+  } catch (e) {
+    console.error(e);
+    window.alert(`{e}`);
+  }
+};
 </script>
 
 <style scoped>
@@ -118,16 +134,30 @@ pre {
   height: 100vh;
 }
 
-.grid {
+#grid1 {
+  box-sizing: border-box;
+  flex: 1;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-template-rows: 1fr;
+  grid-gap: 16px;
+  padding: 16px 16px 16px 16px;
+  min-height: 0;
+}
+#grid1 > * {
+  min-height: 0;
+}
+#grid2 {
   box-sizing: border-box;
   flex: 1;
   display: grid;
-  grid-template-columns:
-		repeat(auto-fit, min-max(100px, 1fr));
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-rows: 1fr;
   grid-gap: 16px;
+  padding: 0 16px 16px 16px;
   min-height: 0;
 }
-.grid > * {
+#grid2 > * {
   min-height: 0;
 }