refactor: improve design

IFB-ElixirFr · Aug 7, 2023 · df2bd39 · df2bd39
1 parent 054610a
commit df2bd39
Show file tree

Hide file tree

Showing 8 changed files with 170 additions and 51 deletions.
diff --git a/components/Editor.vue b/components/Editor.vue
@@ -18,7 +18,6 @@
     >
       Source</v-btn
     >
-
   </div>
   <div id="editorArea" style="height: 90%" ref="codeValue"></div>
 </template>

diff --git a/components/content/Quiz.vue b/components/content/Quiz.vue
@@ -12,6 +12,7 @@
 
     <div v-if="type == 'multiple'">
       <v-checkbox
+        hide-details="true"
         v-for="(c, k) in choices"
         :key="k"
         :label="c.value"
@@ -20,8 +21,9 @@
         v-model="checkedNames"
       ></v-checkbox>
     </div>
-    <v-btn @click="submit">Submit</v-btn>
-
+    <div class="text-right">
+      <v-btn @click="submit">Submit</v-btn>
+    </div>
     <p>{{ message }}</p>
   </v-card>
 </template>
@@ -39,7 +41,7 @@ export default {
   },
   setup(props) {
     var id = new Date().valueOf();
-    id = "editorArea" + id 
+    id = "editorArea" + id;
     return { id };
   },
   methods: {

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -7,7 +7,7 @@ const { resolve } = createResolver(import.meta.url)
 export default defineNuxtConfig({
   target: 'static',
   buildModules: [
-    '@nuxt/image',
+    '@nuxt/image'
   ],
   modules: [
     '@pinia/nuxt',

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,10 +23,12 @@
     "@vueuse/core": "^10.3.0",
     "ace-builds": "^1.23.4",
     "ace-code": "^1.23.4",
+    "buffer": "^6.0.3",
     "gh-pages": "^5.0.0",
     "markdown-it": "^13.0.1",
     "nuxt-content-assets": "^1.3.2",
     "pyodide": "^0.23.4",
+    "quickjs-emscripten": "^0.23.0",
     "sass": "^1.64.1",
     "vite-plugin-vuetify": "^1.0.2",
     "vue-markdown-render": "^2.0.1",

diff --git a/pages/[lang]/[...slug].vue b/pages/[lang]/[...slug].vue
@@ -77,6 +77,7 @@
 import { Console } from "@r-wasm/webr";
 import { useCommandStore } from "@/stores/useCommandStore";
 import { storeToRefs } from "pinia";
+import { getQuickJS } from "quickjs-emscripten";
 
 export default {
   data() {
@@ -118,13 +119,16 @@ export default {
           );
         },
       });
-    } else {
+    } else if (lang == "js") {
+      const QuickJS = await getQuickJS();
+      webConsole = QuickJS.newContext();
+    } else if (lang == "python") {
       webConsole = await loadPyodide({
         indexURL: "https://cdn.jsdelivr.net/pyodide/v0.23.4/full/",
         stdout: (line) => document.getElementById("out").append(line + "\n"),
         stderr: (line) => document.getElementById("out").append(line + "\n"),
       });
-    }
+    } 
 
     // Get Tuto pages
     const tutosList = await queryContent(path).find();
@@ -181,22 +185,15 @@ print("Welcome to the Pyodide terminal emulator 🐍\\n" + BANNER)
     },
     async onEnter() {
       if (this.lang == "python") {
-        document.getElementById("out").append(">>>" + this.command + "\n");
-        try {
-          let output = this.webConsole.runPython(this.command + "\n\n");
-          if (output !== undefined) {
-            document.getElementById("out").append(output + "\n");
-          }
-        } catch (err) {
-          document.getElementById("out").append(err + "\n");
-        }
-        this.command = "";
+        this.runPython();
       } else if (this.lang == "r") {
         this.webConsole.stdin(this.command);
         document.getElementById("out").append(this.command + "\n");
-        this.command = "";
-      }
+      } else if (this.lang == "js") {
+        this.runJS();
+      } 
 
+      this.command = "";
       var objDiv = document.getElementById("divConsole");
       objDiv.scrollTop = objDiv.scrollHeight;
     },
@@ -229,6 +226,34 @@ print("Welcome to the Pyodide terminal emulator 🐍\\n" + BANNER)
 
       this.test = result;
     },
+    async runJS() {
+      const result = this.webConsole.evalCode(this.command);
+      document.getElementById("out").append(">" + this.command + "\n");
+      if (result.error) {
+        document
+          .getElementById("out")
+          .append(this.webConsole.dump(result.error) + "\n");
+        this.command = "";
+        result.error.dispose();
+      } else {
+        document
+          .getElementById("out")
+          .append(this.webConsole.dump(result.value) + "\n");
+        this.command = "";
+        result.value.dispose();
+      }
+    },
+    runPython() {
+      document.getElementById("out").append(">>>" + this.store.command + "\n");
+      try {
+        let output = this.webConsole.runPython(this.store.command + "\n\n");
+        if (output !== undefined) {
+          document.getElementById("out").append(output + "\n");
+        }
+      } catch (err) {
+        document.getElementById("out").append(err + "\n");
+      }
+    },
   },
   watch: {
     async command(new_val) {
@@ -239,18 +264,11 @@ print("Welcome to the Pyodide terminal emulator 🐍\\n" + BANNER)
             document.getElementById("out").append(element + "\n");
           }
         } else if (this.lang == "python") {
-          document
-            .getElementById("out")
-            .append(">>>" + this.store.command + "\n");
-          try {
-            let output = this.webConsole.runPython(this.store.command + "\n\n");
-            if (output !== undefined) {
-              document.getElementById("out").append(output + "\n");
-            }
-          } catch (err) {
-            document.getElementById("out").append(err + "\n");
-          }
-        }
+          this.runPython();
+        } else if (this.lang == "js") {
+          this.runJS();
+        } 
+
         this.store.reset();
         var objDiv = document.getElementById("divConsole");
         objDiv.scrollTop = objDiv.scrollHeight;

diff --git a/pages/index.vue b/pages/index.vue
@@ -33,7 +33,7 @@
           >
           <v-btn
             class="mx-3"
-            href="https://github.com/IFB-ElixirFr/Wasm4Learn/discussions"
+            href="https://github.com/IFB-ElixirFr/R_WASM/discussions"
             target="_blank"
           >
             <v-icon class="me-3">mdi-forum</v-icon>