Load and initialized pyodide on mount

offen · Dec 20, 2024 · 803af46 · 803af46
1 parent 2b3f1dd
commit 803af46
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -9,10 +9,22 @@
   </head>
   <body>
     <div id="app" class="center" v-cloak>
-      <h1 class="sans-serif f1">
-        {{ name }}
-      </h1>
+      <div v-if="globalError">
+        <p>{{ globalError.message }}</p>
+        <pre>{{globalError.stack}}</pre>
+      </div>
+      <div v-else-if="pyodide">
+        <h1 class="sans-serif f1">
+          Pyla
+        </h1>
+        <textarea class="db"></textarea>
+        <button>Run Script</button>
+      </div>
+      <div v-else>
+        <p>Python runtime is initializing ...</p>
+      </div>
     </div>
+    <script src="https://cdn.jsdelivr.net/pyodide/v0.26.2/full/pyodide.js"></script>
     <script type="module" src="/src/main.js"></script>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -3,7 +3,23 @@ import { createApp } from 'vue'
 createApp({
   data() {
     return {
-      'name': 'Pyla'
+      pyodide: null,
+    }
+  },
+  computed: {
+    globalError() {
+      if (this.pyodide instanceof Error) {
+        return this.pyodide
+      }
+      return null
+    }
+  },
+  async mounted() {
+    try {
+      const pyodide = await window.loadPyodide()
+      this.pyodide = pyodide
+    } catch (err) {
+      this.pyodide = err
     }
   }
 }).mount('#app')