Routing (#210)

* wip

* tinkering

* vue hash router

Author: FineArchs

package-lock.json

@@ -9,6 +9,7 @@
     "prettier": "npx prettier . --write"
   },
   "dependencies": {
+    "@vueuse/core": "^11.2.0",
     "aiscript_develop": "npm:@syuilo/aiscript@dev",
     "aiscript_next": "npm:@syuilo/aiscript@next",
     "aiscript0_14_1": "npm:@syuilo/[email protected]",
@@ -19,7 +20,8 @@
     "aiscript0_19_0": "npm:@syuilo/[email protected]",
     "prismjs": "^1.29.0",
     "vue": "^3.4.31",
-    "vue-prism-editor": "^2.0.0-alpha.2"
+    "vue-prism-editor": "^2.0.0-alpha.2",
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@babel/types": "^7.24.7",

package.json

@@ -3,28 +3,27 @@
     <h1>
       AiScript (
       <MenuButton id="version" :options="menu" @select="onVersionSelect">{{
-        version
+        router.currentRoute.value.params.ver
       }}</MenuButton>
       ) Playground
     </h1>
-    <div v-for="v in versions">
-      <MainArea :ver="v" v-if="v == version" />
-    </div>
+    <RouterView />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
-import MainArea, { versions, latest } from "./MainArea.vue";
+import { useRouter, useRoute } from 'vue-router'
+import { versions, latest } from "./MainArea.vue";
 import MenuButton from "@common/MenuButton.vue";
 
-const version = ref(window.localStorage.getItem("version") ?? latest);
+const router = useRouter();
 const menu = Object.fromEntries(
   versions.map((v) => [v, v + (v == latest ? "(latest)" : "")]),
 );
 function onVersionSelect(v: string) {
-  version.value = v;
-  window.localStorage.setItem("version", version.value);
+  window.localStorage.setItem("version", v);
+  router.push({ path: v });
 }
 </script>
 

src/App.vue

@@ -3,7 +3,7 @@
     <div id="grid1">
       <Editor
         v-model="script"
-        :samples="samples"
+        :samples="v.samples"
         :parseError="syntaxErrorMessage"
         @run="run"
       />
@@ -55,7 +55,8 @@ export type Log = {
 };
 </script>
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, computed, watch } from "vue";
+import { useStorage } from '@vueuse/core';
 import Editor from "@common/Editor.vue";
 import Container from "@common/Container.vue";
 // import * as Next from "@/versions/next/index.ts";
@@ -70,7 +71,8 @@ import * as V0_14_1 from "@/versions/0.14.1/index.ts";
 const props = defineProps<{
   ver: (typeof versions)[number];
 }>();
-const { parse, exec, version, samples } = {
+
+const vmodules = {
   // next: Next,
   develop: Develop,
   "0.19.0": V0_19_0,
@@ -79,36 +81,34 @@ const { parse, exec, version, samples } = {
   "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!"',
-);
+} as const;
+const v = computed(() => vmodules[props.ver]);
 
+const vscripts = Object.fromEntries(versions.map(
+  (_v) => [_v, useStorage<string>(_v, '<: "Hello, AiScript!"')]
+));
+const script = computed({
+  get(): string { return vscripts[props.ver]!.value },
+  set(newVal: string): void { vscripts[props.ver]!.value = newVal },
+});
 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 = 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 },
-);
+const ast = computed<string>(() => {
+  try {
+    const _ast = v.value.parse(script.value);
+    syntaxErrorMessage.value = null;
+    return _ast;
+  } catch (e) {
+    const err = e as Error;
+    syntaxErrorMessage.value = err.message;
+    console.error("info" in err ? err.info : err);
+    return `${err}`;
+  }
+});
 
 function run() {
   logs.value = [];
-  exec({
+  v.value.exec({
     in: (q: string) =>
       new Promise((ok) => {
         const res = window.prompt(q);

src/MainArea.vue

@@ -12,7 +12,7 @@
     </template>
     <PrismEditor
       :class="$style.code"
-      v-model="modelValueInter"
+      v-model="code"
       :highlight="highlighter"
       :line-numbers="false"
     />
@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from "vue";
+import { ref, computed, watch } from "vue";
 import { PrismEditor } from "vue-prism-editor";
 import "vue-prism-editor/dist/prismeditor.min.css";
 import "prismjs";
@@ -55,28 +55,16 @@ declare function highlight(
 ): string;
 
 const props = defineProps<{
-  modelValue: string;
   samples?: Record<string, string>;
   parseError?: string | null;
 }>();
 const emit = defineEmits<{
   (e: "run"): void;
-  (e: "update:modelValue", value: string): void;
 }>();
-
-const modelValueInter = ref<string>(props.modelValue);
-watch(
-  modelValueInter,
-  () => {
-    emit("update:modelValue", modelValueInter.value);
-  },
-  {
-    immediate: true,
-  },
-);
+const code = defineModel<string>();
 
 function onSelectSample(chosen: string) {
-  modelValueInter.value = props.samples![chosen] as string;
+  code.value = props.samples![chosen] as string;
 }
 
 const highlighter = (code: string) => {

src/common/Editor.vue

@@ -1,4 +1,7 @@
 import { createApp } from "vue";
 import App from "./App.vue";
+import { router } from "./router.js";
 
-createApp(App).mount("#app");
+const app = createApp(App);
+app.use(router);
+app.mount("#app");

src/main.ts

@@ -0,0 +1,17 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+import MainArea, { latest } from "./MainArea.vue";
+
+export const router = createRouter({
+	history: createWebHashHistory(),
+	routes: [
+		{
+			path: '/',
+			redirect: () => window.localStorage.getItem("version") ?? latest,
+		},
+		{
+			path: '/:ver',
+			component: MainArea,
+			props: true,
+		},
+	],
+});