From df2bd39637d069b1e7ceb023545f445f99ddb9f5 Mon Sep 17 00:00:00 2001 From: thomasdenecker Date: Mon, 7 Aug 2023 16:08:02 +0200 Subject: [PATCH] refactor: improve design --- components/Editor.vue | 1 - components/content/Quiz.vue | 8 ++- nuxt.config.ts | 2 +- package-lock.json | 111 ++++++++++++++++++++++++++++++------ package.json | 2 + pages/[lang]/[...slug].vue | 70 ++++++++++++++--------- pages/index.vue | 2 +- yarn.lock | 25 +++++++- 8 files changed, 170 insertions(+), 51 deletions(-) diff --git a/components/Editor.vue b/components/Editor.vue index 9510741..fa531f8 100644 --- a/components/Editor.vue +++ b/components/Editor.vue @@ -18,7 +18,6 @@ > Source -
diff --git a/components/content/Quiz.vue b/components/content/Quiz.vue index 8003e1a..58e6638 100644 --- a/components/content/Quiz.vue +++ b/components/content/Quiz.vue @@ -12,6 +12,7 @@
- Submit - +
+ Submit +

{{ message }}

@@ -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 index 836a1a3..12986be 100644 --- 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 index d3a21f5..c41bddb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,10 +13,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", @@ -2867,7 +2869,6 @@ "version": "1.5.1", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", - "dev": true, "funding": [ { "type": "github", @@ -2935,6 +2936,30 @@ "readable-stream": "^3.4.0" } }, + "node_modules/bl/node_modules/buffer": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz", + "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "dependencies": { + "base64-js": "^1.3.1", + "ieee754": "^1.1.13" + } + }, "node_modules/boolbase": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", @@ -3087,10 +3112,9 @@ } }, "node_modules/buffer": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz", - "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==", - "dev": true, + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz", + "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==", "funding": [ { "type": "github", @@ -3105,10 +3129,9 @@ "url": "https://feross.org/support" } ], - "license": "MIT", "dependencies": { "base64-js": "^1.3.1", - "ieee754": "^1.1.13" + "ieee754": "^1.2.1" } }, "node_modules/buffer-alloc": { @@ -6144,7 +6167,6 @@ "version": "1.2.1", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", - "dev": true, "funding": [ { "type": "github", @@ -10246,6 +10268,11 @@ ], "license": "MIT" }, + "node_modules/quickjs-emscripten": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz", + "integrity": "sha512-CIP+NDRYDDqbT3cTiN8Bon1wsZ7IgISVYCJHYsPc86oxszpepVMPXFfttyQgn1u1okg1HPnCnM7Xv1LrCO/VmQ==" + }, "node_modules/radix3": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.0.1.tgz", @@ -11966,6 +11993,30 @@ "through": "^2.3.8" } }, + "node_modules/unbzip2-stream/node_modules/buffer": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz", + "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "dependencies": { + "base64-js": "^1.3.1", + "ieee754": "^1.1.13" + } + }, "node_modules/uncrypto": { "version": "0.1.3", "resolved": "https://registry.npmjs.org/uncrypto/-/uncrypto-0.1.3.tgz", @@ -15576,8 +15627,7 @@ "base64-js": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", - "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==", - "dev": true + "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==" }, "big-integer": { "version": "1.6.51", @@ -15614,6 +15664,18 @@ "buffer": "^5.5.0", "inherits": "^2.0.4", "readable-stream": "^3.4.0" + }, + "dependencies": { + "buffer": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz", + "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==", + "dev": true, + "requires": { + "base64-js": "^1.3.1", + "ieee754": "^1.1.13" + } + } } }, "boolbase": { @@ -15710,13 +15772,12 @@ } }, "buffer": { - "version": "5.7.1", - "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz", - "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==", - "dev": true, + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz", + "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==", "requires": { "base64-js": "^1.3.1", - "ieee754": "^1.1.13" + "ieee754": "^1.2.1" } }, "buffer-alloc": { @@ -17773,8 +17834,7 @@ "ieee754": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz", - "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==", - "dev": true + "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==" }, "ignore": { "version": "5.2.4", @@ -20428,6 +20488,11 @@ "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==" }, + "quickjs-emscripten": { + "version": "0.23.0", + "resolved": "https://registry.npmjs.org/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz", + "integrity": "sha512-CIP+NDRYDDqbT3cTiN8Bon1wsZ7IgISVYCJHYsPc86oxszpepVMPXFfttyQgn1u1okg1HPnCnM7Xv1LrCO/VmQ==" + }, "radix3": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/radix3/-/radix3-1.0.1.tgz", @@ -21604,6 +21669,18 @@ "requires": { "buffer": "^5.2.1", "through": "^2.3.8" + }, + "dependencies": { + "buffer": { + "version": "5.7.1", + "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz", + "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==", + "dev": true, + "requires": { + "base64-js": "^1.3.1", + "ieee754": "^1.1.13" + } + } } }, "uncrypto": { diff --git a/package.json b/package.json index abc631e..7f73e46 100644 --- 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 index 03507b2..bacd89f 100644 --- 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 index 0ed31d6..2e4c1dd 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -33,7 +33,7 @@ > mdi-forum diff --git a/yarn.lock b/yarn.lock index b16ac7c..1e19cdd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1615,7 +1615,7 @@ "resolved" "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz" "version" "1.1.2" -"buffer@^5.2.1", "buffer@^5.5.0": +"buffer@^5.2.1": "integrity" "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==" "resolved" "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz" "version" "5.7.1" @@ -1623,6 +1623,22 @@ "base64-js" "^1.3.1" "ieee754" "^1.1.13" +"buffer@^5.5.0": + "integrity" "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==" + "resolved" "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz" + "version" "5.7.1" + dependencies: + "base64-js" "^1.3.1" + "ieee754" "^1.1.13" + +"buffer@^6.0.3": + "integrity" "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==" + "resolved" "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz" + "version" "6.0.3" + dependencies: + "base64-js" "^1.3.1" + "ieee754" "^1.2.1" + "builtin-modules@^3.3.0": "integrity" "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==" "resolved" "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz" @@ -3347,7 +3363,7 @@ dependencies: "safer-buffer" ">= 2.1.2 < 3.0.0" -"ieee754@^1.1.13": +"ieee754@^1.1.13", "ieee754@^1.2.1": "integrity" "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==" "resolved" "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz" "version" "1.2.1" @@ -5668,6 +5684,11 @@ dependencies: "inherits" "~2.0.3" +"quickjs-emscripten@^0.23.0": + "integrity" "sha512-CIP+NDRYDDqbT3cTiN8Bon1wsZ7IgISVYCJHYsPc86oxszpepVMPXFfttyQgn1u1okg1HPnCnM7Xv1LrCO/VmQ==" + "resolved" "https://registry.npmjs.org/quickjs-emscripten/-/quickjs-emscripten-0.23.0.tgz" + "version" "0.23.0" + "radix3@^1.0.1": "integrity" "sha512-y+AcwZ3HcUIGc9zGsNVf5+BY/LxL+z+4h4J3/pp8jxSmy1STaCocPS3qrj4tA5ehUSzqtqK+0Aygvz/r/8vy4g==" "resolved" "https://registry.npmjs.org/radix3/-/radix3-1.0.1.tgz"