Migrate website script view to vue3 and Monaco

.github/workflows/default.yml

@@ -29,12 +29,12 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-node-
       - name: install dependencies
-        run: npm install
+        run: npm ci
       - name: build
         run: npm run build
       - name: package
         run: npm run package
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         with:
           name: truncated-cube-website
           path: website/truncated-website-build.tar.gz

website/.env.online

@@ -0,0 +1 @@
+VITE_API_URL=https://lamp.mercotui.com/

website/.gitignore

@@ -2,6 +2,8 @@
 node_modules
 /dist
 
+./*.tar.gz
+
 # local env files
 .env.local
 .env.*.local

website/package.json

@@ -3,6 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
+    "dev online": "vite -m online",
     "build": "vite build",
     "preview": "vite preview",
     "lint": "eslint . --fix --ignore-path .gitignore",
@@ -22,6 +23,7 @@
     "core-js": "^3.37.1",
     "lodash": "^4.17.21",
     "miragejs": "^0.2.0-alpha.3",
+    "monaco-editor": "^0.52.0",
     "roboto-fontface": "*",
     "utf8": "^3.0.0",
     "vue": "^3.4.31",

website/src/components/CodeEditor.vue

@@ -2,8 +2,8 @@
   <v-container>
     <v-row class="text-center">
       <v-col class="mb-4">
-        <v-overlay :value="save_overlay_opened">
-          <v-card class="mx-auto my-12" max-width="374">
+        <v-overlay v-model="save_overlay_opened">
+          <v-card class="mx-auto my-12" style="right: 50vw; left: 50vw" max-width="374">
             <v-card-title>Enter Script Name</v-card-title>
             <v-text-field label="Script Name" model-value="script_name" solo></v-text-field>
             <v-card-actions>
@@ -20,13 +20,15 @@
         <div class="text-center">
           <v-btn class="mx-1" elevation="2" :disabled="!save_enabled" v-on:click="save">Save</v-btn>
           <v-btn class="mx-1" elevation="2" v-on:click="save_overlay_opened = true">Save As</v-btn>
-          <v-btn class="mx-1" elevation="2" :disabled="!delete_enabled" color="error" v-on:click="delete_overlay_opened = true">Delete</v-btn>
+          <v-btn class="mx-1" elevation="2" :disabled="!delete_enabled" color="error"
+                 v-on:click="delete_overlay_opened = true">Delete
+          </v-btn>
           <v-btn class="mx-1" elevation="2" color="success" v-on:click="runInEmulator">Run in Emulator</v-btn>
         </div>
 
         <v-overlay :value="delete_overlay_opened">
           <v-card class="mx-auto my-12" max-width="374">
-            <v-card-title>Delete {{script_name}} ?</v-card-title>
+            <v-card-title>Delete {{ script_name }} ?</v-card-title>
             <v-card-actions>
               <v-btn @click="delete_overlay_opened = false">
                 Cancel
@@ -38,12 +40,8 @@
           </v-card>
         </v-overlay>
 
-        <div class="container" style="display: flex; flex: 1;">
-          <editor v-model="content" @init="editorInit" lang="javascript" theme="monokai"></editor>
-        </div>
-
-
-        <!-- <v-textarea solo v-model="text_editor" name="input-7-4" label="Code Editor"></v-textarea> -->
+        <div id="monaco-container" style="text-align: left; display: flex; flex: 1; overflow: hidden; height: 60vh"></div>
+        <!-- <v-textarea solo v-model="content" name="input-7-4" label="Code Editor"></v-textarea> -->
       </v-col>
     </v-row>
   </v-container>
@@ -54,84 +52,91 @@ import axios from 'axios';
 import base64 from 'base-64';
 import utf8 from 'utf8';
 
-  export default {
-    data() {
-      return {
-        save_overlay_opened: false,
-        delete_overlay_opened: false,
-        type: ["template"],
-        content: "Loading",
-      }
-    },
+import * as monaco from 'monaco-editor'
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
+
+export default {
+  editor: null,
+
+  data() {
+    return {
+      save_overlay_opened: false,
+      delete_overlay_opened: false,
+      type: ["template"],
+      content: "Loading",
+    }
+  },
 
-    computed: {
-      save_enabled: function () {
-        return !(this.type.includes("default") || this.type.includes("template") || this.script_name  === "")
-      },
-      delete_enabled: function () {
-        return !(this.type.includes("default") || this.type.includes("template"))
-      },
+  computed: {
+    save_enabled: function () {
+      return !(this.type.includes("default") || this.type.includes("template") || this.script_name === "")
     },
+    delete_enabled: function () {
+      return !(this.type.includes("default") || this.type.includes("template"))
+    },
+  },
+
+  props: {
+    script_name: String
+  },
+
+  mounted() {
+    self.MonacoEnvironment = {
+      getWorker(_, label) {
+        if (label === 'typescript' || label === 'javascript') {
+          return new tsWorker()
+        }
+        return new editorWorker()
+      }
+    }
 
+    this.editor = monaco.editor.create(document.getElementById('monaco-container'), {
+      value: "Loading",
+      language: 'javascript',
+      theme: "vs-dark",
+    });
 
-    props: {
-      script_name: String
+    if(this.script_name) {
+      axios.get('/api/scripts/' + this.script_name + '/').then(response => {
+        const bytes = base64.decode(response.data.script);
+        const decoded_script = utf8.decode(bytes);
+        this.editor.setValue(decoded_script);
+        this.type = response.data.type;
+      });
+    } else {
+      this.editor.setValue("");
+    }
+  },
+
+  methods: {
+    save: function () {
+      var bytes = utf8.encode(this.editor.getValue());
+      var encoded_script = base64.encode(bytes);
+
+      axios.put('/api/scripts/' + this.script_name + '/', {
+        name: this.script_name,
+        script: encoded_script,
+        type: this.type,
+      });
     },
 
-    components: {
-        editor: require('vue2-ace-editor'),
+    saveAs: function () {
+      this.save_overlay_opened = false;
+      this.type = ["animation"]
+      this.save();
+      this.$router.push('/script/' + this.script_name);
     },
 
-    mounted() {
-      axios.get('/api/scripts/' + this.script_name + '/').then(response => {
-        var bytes = base64.decode(response.data.script);
-        this.content = utf8.decode(bytes);
-        this.type = response.data.type
-      })
+    deleteScript: function () {
+      axios.delete('/api/scripts/' + this.script_name + '/').then(() => {
+        this.$router.push('/');
+      });
     },
 
-    methods: {
-      editorInit: function (editor) {
-        require('brace/ext/language_tools') //language extension prerequsite...
-        require('brace/mode/javascript')    //language
-        require('brace/mode/less')
-        require('brace/theme/monokai')
-        require('brace/snippets/javascript') //snippet
-        editor.setOptions({
-            maxLines: 30,
-            wrap: true,
-            enableBasicAutocompletion: true,
-            autoScrollEditorIntoView: true
-        });
-      },
-
-      save: function () {
-        var bytes = utf8.encode(this.content);
-        var encoded_script = base64.encode(bytes);
-
-        axios.put('/api/scripts/' + this.script_name + '/', {
-          name: this.script_name,
-          script: encoded_script,
-          type: this.type,
-        });
-      },
-
-      saveAs: function () {
-        this.save_overlay_opened = false;
-        this.type = ["animation"]
-        this.save();
-        this.$router.push('/scriptview/' + this.script_name);
-      },
-
-      deleteScript: function () {
-        axios.delete('/api/scripts/' + this.script_name + '/').then(() => {
-          this.$router.push('/');
-        });
-      },
-
-      runInEmulator: function () {
-        this.$emit('runInEmulator', this.content)
-      },
-    }
+    runInEmulator: function () {
+      this.$emit('runInEmulator', this.editor.getValue())
+    },
   }
+}
 </script>

website/src/main.js

@@ -8,7 +8,8 @@ import App from './App.vue'
 import { createApp } from 'vue'
 import {makeServer} from "./mock-server"
 
-if (process.env.NODE_ENV === "development") {
+if (import.meta.env.DEV && import.meta.env.MODE !== "online") {
+  // If we are in development mode, and not using a proxy for our API calls, then start a mock API server
   makeServer()
 }
 

website/src/plugins/router.js

@@ -9,7 +9,7 @@ import {createMemoryHistory, createRouter} from 'vue-router'
 
 // Views
 import IndexView from '../views/IndexView';
-// import ScriptView from '../views/ScriptView';
+import ScriptView from '../views/ScriptView';
 import DrawView from '../views/DrawView';
 
 const router = new createRouter({
@@ -18,8 +18,8 @@ const router = new createRouter({
         {path: '/', component: IndexView},
         {path: '/draw/', component: DrawView, props: true},
         {path: '/draw/:name', component: DrawView, props: true},
-        // {path: '/script/', component: ScriptView, props: true},
-        // {path: '/script/:name', component: ScriptView, props: true},
+        {path: '/script/', component: ScriptView, props: true},
+        {path: '/script/:name', component: ScriptView, props: true},
     ],
 
 })

website/src/views/IndexView.vue

@@ -4,7 +4,7 @@
       <v-col class="mb-4">
         <v-list dense>
           <v-list-subheader>Images</v-list-subheader>
-          <v-list-item v-on:click="openDrawing(image_template)">
+          <v-list-item :disabled="!image_template" v-on:click="openDrawing(image_template)">
             <v-list-item-title>Draw</v-list-item-title>
             <template v-slot:append>
               <v-icon>mdi-brush</v-icon>
@@ -49,33 +49,33 @@ export default {
 
   computed: {
     animations: function () {
-      var animation_scripts = this.scripts.filter(script => {
+      const animation_scripts = this.scripts.filter(script => {
         return script.type.includes("animation") && !script.type.includes("template") && !script.type.includes("temporary");
-      })
+      });
       return Array.from(animation_scripts, script => script.name).sort();
     },
     images: function () {
-      var image_scripts = this.scripts.filter(script => {
+      const image_scripts = this.scripts.filter(script => {
         return script.type.includes("image") && !script.type.includes("template") && !script.type.includes("temporary");
-      })
+      });
       return Array.from(image_scripts, script => script.name).sort();
     },
     animation_template: function () {
-      var animation_template_scripts = this.scripts.filter(script => {
+      const animation_template_scripts = this.scripts.filter(script => {
         return script.type.includes("animation") && script.type.includes("template");
-      })
+      });
       return Array.from(animation_template_scripts, script => script.name).sort()[0];
     },
     image_template: function () {
-      var image_template_scripts = this.scripts.filter(script => {
+      const image_template_scripts = this.scripts.filter(script => {
         return script.type.includes("image") && script.type.includes("template");
-      })
+      });
       return Array.from(image_template_scripts, script => script.name).sort()[0];
     }
   },
 
   mounted() {
-    axios.get('/api/scripts/').then(response => (this.scripts = response.data.scripts))
+    axios.get('/api/scripts/').then(response => (this.scripts = response.data.scripts || []))
   },
 
   methods: {
@@ -85,7 +85,7 @@ export default {
       });
     },
     openScript: function (script_name) {
-      this.$router.push('/script/' + script_name)
+      this.$router.push('/script/' + (script_name || ""))
     },
     openDrawing: function (drawing_name) {
       this.$router.push('/draw/' + drawing_name)

website/src/views/ScriptView.vue

@@ -1,14 +1,8 @@
-<script setup>
-definePage({
-  alias: ['/script/:name'],
-})
-</script>
-
 <template>
   <v-container>
     <v-row class="text-center">
       <v-col class="mb-4">
-        <CodeEditor v-bind:script_name=name @runInEmulator="runInEmulator" />
+        <CodeEditor v-bind:script_name=name @runInEmulator="runInEmulator"/>
       </v-col>
       <v-col class="mb-4">
         <LampEmulator/>