MainArea

src/App.vue

@@ -1,28 +1,22 @@
 <template>
+	<div id='wrapper'>
   <h1>
     AiScript (
     <MenuButton id="version" :options="menu" @select="onVersionSelect">{{
       version
     }}</MenuButton>
     ) Playground
   </h1>
-  <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>
+	<div v-for='v in versions'>
+		<MainArea :ver='v' v-if='v==version'/>
+	</div>
+	</div>
 </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(
@@ -62,8 +56,11 @@ body {
 </style>
 
 <style scoped>
+#wrapper {
+	padding: 16px;
+}
 h1 {
   font-size: 1.5em;
-  margin: 16px 16px 0 16px;
+  margin: 0 16px;
 }
 </style>

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

@@ -22,7 +22,7 @@
     <div id="grid2">
       <Container id="ast">
         <template #header>AST</template>
-        <pre>{{ JSON.stringify(ast, null, "\t") }}</pre>
+        <pre>{{ ast }}</pre>
       </Container>
       <Container id="bin">
         <template #header>Bytecode</template>
@@ -35,92 +35,76 @@
   </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 ast = ref<Ast.Node[] | null>(null);
-const logs = ref<
-  {
-    id: number;
-    type?: string;
-    text?: string;
-    print?: boolean;
-  }[]
->([]);
+const logs = ref<Log[]>([]);
+const ast = ref<string>('');
 const syntaxErrorMessage = ref<string | null>(null);
 
 watch(
   script,
   () => {
     window.localStorage.setItem(version, script.value);
     try {
-      ast.value = Parser.parse(script.value);
+      ast.value = 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, }
 );
 
-let interpreter: Interpreter | null = null;
-const run = async () => {
+function run() {
   logs.value = [];
-
-  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}`);
-  }
-};
+	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}`);
+		}
+	});
+}
 </script>
 
 <style scoped>
@@ -134,30 +118,16 @@ pre {
   height: 100vh;
 }
 
-#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 {
+.grid {
   box-sizing: border-box;
   flex: 1;
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
-  grid-template-rows: 1fr;
+  grid-template-columns:
+		repeat(auto-fit, min-max(100px, 1fr));
   grid-gap: 16px;
-  padding: 0 16px 16px 16px;
   min-height: 0;
 }
-#grid2 > * {
+.grid > * {
   min-height: 0;
 }
 

src/versions/0.14.1/index.ts

@@ -0,0 +1,55 @@
+import { Interpreter, Parser, values, utils, Ast } from "./version.ts";
+import { version, samples } from "./version.ts";
+import type { Log } from '@/MainArea.vue';
+
+export { version, samples };
+
+let ast: Ast.Node[] = [];
+let interpreter: Interpreter | null = null;
+
+export function parse(code: string): string {
+	ast = Parser.parse(code);
+	return JSON.stringify(ast, null, "\t");
+}
+
+export async function exec(io: {
+	in: (q: string) => Promise<string>;
+	out: (l: Log) => void;
+	end: (l: Log) => void;
+	err: (e: any) => void;
+}): Promise<void> {
+  interpreter?.abort();
+  interpreter = new Interpreter(
+    {},
+    {
+			in: io.in,
+      out: (value: values.Value) => {
+        io.out({
+          id: Math.random(),
+          type: value.type,
+          text: utils.valToString(value, true),
+          print: true,
+        });
+      },
+      log: (type: string, params: Record<string, any>) => {
+        switch (type) {
+          case "end":
+            io.end({
+              id: Math.random(),
+              text: utils.valToString(params.val, true),
+              print: false,
+            });
+            break;
+          default:
+            break;
+        }
+      },
+    },
+  );
+
+  try {
+    await interpreter.exec(ast);
+  } catch (e) {
+		io.err(e);
+  }
+};

src/versions/0.15.0/index.ts

@@ -0,0 +1,55 @@
+import { Interpreter, Parser, values, utils, Ast } from "./version.ts";
+import { version, samples } from "./version.ts";
+import type { Log } from '@/MainArea.vue';
+
+export { version, samples };
+
+let ast: Ast.Node[] = [];
+let interpreter: Interpreter | null = null;
+
+export function parse(code: string): string {
+	ast = Parser.parse(code);
+	return JSON.stringify(ast, null, "\t");
+}
+
+export async function exec(io: {
+	in: (q: string) => Promise<string>;
+	out: (l: Log) => void;
+	end: (l: Log) => void;
+	err: (e: any) => void;
+}): Promise<void> {
+  interpreter?.abort();
+  interpreter = new Interpreter(
+    {},
+    {
+			in: io.in,
+      out: (value: values.Value) => {
+        io.out({
+          id: Math.random(),
+          type: value.type,
+          text: utils.valToString(value, true),
+          print: true,
+        });
+      },
+      log: (type: string, params: Record<string, any>) => {
+        switch (type) {
+          case "end":
+            io.end({
+              id: Math.random(),
+              text: utils.valToString(params.val, true),
+              print: false,
+            });
+            break;
+          default:
+            break;
+        }
+      },
+    },
+  );
+
+  try {
+    await interpreter.exec(ast);
+  } catch (e) {
+		io.err(e);
+  }
+};