Run code given in textarea

index.html

@@ -11,14 +11,24 @@
     <div id="app" class="center" v-cloak>
       <div v-if="globalError">
         <p>{{ globalError.message }}</p>
-        <pre>{{globalError.stack}}</pre>
+        <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>
+        <label>
+          Script
+          <textarea class="db" v-model="script"></textarea>
+        </label>
+        <label>
+          Requirements
+          <textarea class="db" v-model="requirements"></textarea>
+        </label>
+        <button @click="run">Run Script</button>
+        <div>
+          <pre>{{ output.join('\n') }}</pre>
+        </div>
       </div>
       <div v-else>
         <p>Python runtime is initializing ...</p>

src/main.js

@@ -4,6 +4,9 @@ createApp({
   data() {
     return {
       pyodide: null,
+      script: '',
+      requirements: '',
+      output: ['Output goes here ...']
     }
   },
   computed: {
@@ -16,10 +19,39 @@ createApp({
   },
   async mounted() {
     try {
-      const pyodide = await window.loadPyodide()
+      const pyodide = await window.loadPyodide({
+        env: {
+          'FILES_PATH': '/home/pyodide/pyla'
+        }
+      })
       this.pyodide = pyodide
+      this.pyodide.setStdout({ batched: (msg) => this.output.push(msg) })
     } catch (err) {
       this.pyodide = err
     }
+  },
+  methods: {
+    async run () {
+      if (this.requirements.trim()) {
+        const requirements = this.requirements.trim().split('\n')
+        await this.pyodide.loadPackage('micropip')
+            .then(() => this.pyodide.pyimport('micropip'))
+            .then(async micropip => {
+              for (const req of requirements) {
+                await micropip.install(req)
+              }
+            })
+      }
+      const dirHandle = await showDirectoryPicker()
+      const permissionStatus = await dirHandle.requestPermission({
+        mode: 'readwrite',
+      })
+
+      if (permissionStatus !== 'granted') {
+        throw new Error('read access to directory not granted')
+      }
+      const nativefs = await this.pyodide.mountNativeFS('/home/pyodide/pyla', dirHandle)
+      await this.pyodide.runPython(this.script)
+    }
   }
 }).mount('#app')