initialize and connect pyodide to a py-script tag

pyscriptjs/src/App.svelte

@@ -4,8 +4,24 @@
   import Main from "./Main.svelte";
   import Header from "./Header.svelte";
   import Tailwind from "./Tailwind.svelte";
+  import { loadInterpreter } from './interpreter';
+  import { pyodideLoaded } from './stores';
+
+  let pyodideReadyPromise
+  const initializePyodide = () =>{
+    // @ts-ignore
+    // pyodideLoaded.set('loaded', true);
+    pyodideReadyPromise = loadInterpreter();
+    // @ts-ignore
+    pyodideLoaded.set(pyodideReadyPromise);
+  }
+
 </script>
 
+<svelte:head>
+	<script src="https://cdn.jsdelivr.net/pyodide/v0.19.0/full/pyodide.js" on:load={initializePyodide}></script>
+</svelte:head>
+
 <style>
   :global(div.dev-buttons-group) {
     margin-top: -12px;

pyscriptjs/src/main.ts

@@ -1,22 +1,29 @@
 import App from "./App.svelte";
 
 import {EditorState, EditorView , basicSetup} from "@codemirror/basic-setup"
-
 import { python } from "@codemirror/lang-python"
 import { keymap } from "@codemirror/view";
 import { defaultKeymap } from "@codemirror/commands";
 import { oneDarkTheme } from "@codemirror/theme-one-dark";
 
+import { pyodideLoaded } from './stores';
+
 function addClasses(element: HTMLElement, classes: Array<string>){
     for (let entry of classes) {
       element.classList.add(entry);
     }
 }
 
+let pyodideReadyPromise;
+
+pyodideLoaded.subscribe(value => {
+  pyodideReadyPromise = value;
+});
+
 class PyScript extends HTMLElement {
   shadow: ShadowRoot;
   wrapper: HTMLElement;
-  // editor: EditorView;
+  editor: EditorView;
   editorNode: HTMLElement;
   code: string;
   cm: any;
@@ -54,7 +61,7 @@ class PyScript extends HTMLElement {
         ]
     })
 
-    let editor = new EditorView({
+    this.editor = new EditorView({
         state: startState,
         parent: this.editorNode
     })
@@ -94,22 +101,31 @@ class PyScript extends HTMLElement {
     mainDiv.appendChild(this.editorOut);
     this.appendChild(mainDiv);
 
-    function addToOutput(s: string) {
-      this.editorOut.value += ">>>" + s + "\n";
-    }
-    this.btnRun.onclick = evaluatePython;
 
-    async function evaluatePython() {
-      console.log('evaluate');
-        // let pyodide = await pyodideReadyPromise;
-        // try {
-        // let output = pyodide.runPython(elem.editor.state.doc.toString());
-        // addToOutput(output);
-        // } catch (err) {
-        // addToOutput(err);
-        // }
+    this.btnRun.onclick = wrap(this);
+
+    function wrap(el: any){
+      function addToOutput(s: string) {
+        el.editorOut.value += ">>> " + s + "\n";
+      }
+
+      async function evaluatePython() {
+        console.log('evaluate');
+          let pyodide = await pyodideReadyPromise;
+          // debugger
+          try {
+
+            // @ts-ignore
+            let output = pyodide.runPython(el.editor.state.doc.toString());
+              addToOutput(output);
+            } catch (err) {
+              addToOutput(err);
+          }
+      }
+      return evaluatePython;
     }
 
+
     console.log('connected');
   }