add stores, move pyscript component in it's own file add method to add new scripts to page

pyscriptjs/src/components/pyscript.ts

@@ -0,0 +1,138 @@
+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';
+import { addClasses } from '../utils';
+
+// Premise used to connect to the first available pyodide interpreter
+let pyodideReadyPromise;
+
+pyodideLoaded.subscribe(value => {
+  pyodideReadyPromise = value;
+});
+
+export class PyScript extends HTMLElement {
+    shadow: ShadowRoot;
+    wrapper: HTMLElement;
+    editor: EditorView;
+    editorNode: HTMLElement;
+    code: string;
+    cm: any;
+    btnEdit: HTMLElement;
+    btnRun: HTMLElement;
+    editorOut: HTMLTextAreaElement;
+    // editorState: EditorState;
+  
+    constructor() {
+        super();
+  
+        // attach shadow so we can preserve the element original innerHtml content
+        this.shadow = this.attachShadow({ mode: 'open'});
+  
+        this.wrapper = document.createElement('slot');
+  
+        // add an extra div where we can attach the codemirror editor
+        this.editorNode = document.createElement('div');
+  
+        this.shadow.appendChild(this.wrapper);
+        // this.shadow.appendChild(this.editorNode);
+        // this.code = this.wrapper.innerHTML;
+        console.log("Woooohooo");
+      }
+    connectedCallback() {
+  
+        this.code = this.innerHTML;
+        this.innerHTML = '';
+        let startState = EditorState.create({
+          doc: this.code,
+          extensions: [
+              keymap.of(defaultKeymap),
+              oneDarkTheme,
+              // python()
+          ]
+      })
+  
+      this.editor = new EditorView({
+          state: startState,
+          parent: this.editorNode
+      })
+  
+      let mainDiv = document.createElement('div');
+      addClasses(mainDiv, ["flex", "flex-col"])
+  
+      mainDiv.appendChild(this.editorNode);
+  
+      // Butons DIV
+      var eDiv = document.createElement('div');
+      // addClasses(eDiv, ["flex", "flex-row-reverse",  "justify-center", "rounded-lg", "text-lg", "mb-4"]);
+      addClasses(eDiv, "flex flex-row-reverse space-x-reverse space-x-4 font-mono text-white text-sm font-bold leading-6 dev-buttons-group".split(" "))
+      eDiv.setAttribute("role", "group");
+  
+      // RUN BUTTON
+      this.btnRun = document.createElement('button');
+      this.btnRun.innerHTML = "run";
+      let buttonClasses = ["mr-2", "block", "py-2", "px-8", "rounded-full"];
+      addClasses(this.btnRun, buttonClasses);
+      addClasses(this.btnRun, ["text-green-100", "bg-green-500"])
+  
+      eDiv.appendChild(this.btnRun);
+  
+  
+      this.btnEdit = document.createElement('button');
+      this.btnEdit.innerHTML = "edit";
+      addClasses(this.btnEdit, buttonClasses);
+      addClasses(this.btnEdit, ["text-blue-100", "bg-blue-500"])
+      eDiv.appendChild(this.btnEdit);
+  
+  
+      this.editorOut = document.createElement('textarea');
+      this.editorOut.classList.add("output");
+      this.editorOut.disabled = true;
+      this.editorOut.hidden = true;
+      mainDiv.appendChild(eDiv);
+      mainDiv.appendChild(this.editorOut);
+      this.appendChild(mainDiv);
+  
+  
+      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());
+              if (output !== undefined){
+                addToOutput(output);
+                el.editorOut.hidden = false;
+              }
+                
+                // debugger
+              } catch (err) {
+                addToOutput(err);
+            }
+        }
+        return evaluatePython;
+      }
+  
+  
+      console.log('connected');
+    }
+  
+    render(){
+      console.log('rendered');
+  
+    }
+  }
+
+