Merge branch 'main' into css

pyscriptjs/src/components/pybox.ts

@@ -0,0 +1,69 @@
+import { addClasses } from '../utils';
+
+export class PyBox extends HTMLElement {
+    shadow: ShadowRoot;
+    wrapper: HTMLElement;
+    theme: string;
+    widths: Array<string>;
+  
+    constructor() {
+        super();
+  
+        // attach shadow so we can preserve the element original innerHtml content
+        this.shadow = this.attachShadow({ mode: 'open'});
+  
+        this.wrapper = document.createElement('slot');
+        this.shadow.appendChild(this.wrapper);
+      }
+
+
+    connectedCallback() {
+      let mainDiv = document.createElement('div');
+      addClasses(mainDiv, ["flex"])
+      
+      // Hack: for some reason when moving children, the editor box duplicates children
+      // meaning that we end up with 2 editors, if there's a <py-repl> inside the <py-box>
+      // so, if we have more than 2 children with the cm-editor class, we remove one of them
+      while (this.childNodes.length > 0) {
+        console.log(this.firstChild);
+        if ( this.firstChild.nodeName == "PY-REPL" ){
+          // in this case we need to remove the child and craete a new one from scratch
+          let replDiv = document.createElement('div');
+          // we need to put the new repl inside a div so that if the repl has auto-generate true
+          // it can replicate itself inside that constrained div
+          replDiv.appendChild(this.firstChild.cloneNode());
+          mainDiv.appendChild(replDiv);
+          this.firstChild.remove();
+        }
+        else{
+          if ( this.firstChild.nodeName != "#text" ){
+            mainDiv.appendChild(this.firstChild);  
+          }else{
+            this.firstChild.remove()
+          }
+        }
+      }
+
+      // now we need to set widths
+      this.widths = []
+      if (this.hasAttribute('widths')) {
+        for (let w of this.getAttribute('widths').split(";")) {
+          this.widths.push(`w-${w}`);
+        }
+      }else{
+        for (let el of mainDiv.childNodes) {
+          this.widths.push(`w-1/${mainDiv.childNodes.length}`);
+        }
+      }
+
+      for (let i in this.widths) {
+        // @ts-ignore
+        addClasses(mainDiv.childNodes[parseInt(i)], [this.widths[i]]);
+      }
+
+      this.appendChild(mainDiv);  
+      console.log('py-box connected');
+    }
+  }
+
+  

pyscriptjs/src/components/pyenv.ts

@@ -1,7 +1,7 @@
 import * as jsyaml from 'js-yaml';
 
 import { pyodideLoaded, loadedEnvironments, mode, addInitializer } from '../stores';
-import { loadPackage } from '../interpreter';
+import { loadPackage, loadFromFile } from '../interpreter';
 
 // Premise used to connect to the first available pyodide interpreter
 let pyodideReadyPromise;
@@ -37,13 +37,36 @@ export class PyEnv extends HTMLElement {
     this.code = this.innerHTML;
     this.innerHTML = '';
 
-    let env = this.environment = jsyaml.load(this.code);
+    let env = [];
+    let paths = [];
+    this.environment = jsyaml.load(this.code);
+    for (let entry of this.environment) {
+      if (typeof entry == "string" ){
+        env.push(entry);
+      }
+      else if (entry.hasOwnProperty('paths')){
+        for (let path of entry.paths) {
+          paths.push(path);
+        }
+      }
+    }
+
     async function loadEnv() {
       let pyodide = await pyodideReadyPromise;
       await loadPackage(env, pyodide);
       console.log("enviroment loaded")
     }
+
+    async function loadPaths() {
+      let pyodide = await pyodideReadyPromise;
+      for (let singleFile of paths) {
+        await loadFromFile(singleFile, pyodide);
+      }
+      console.log("paths loaded")
+    }
     addInitializer(loadEnv);
+    addInitializer(loadPaths);
     console.log("enviroment loading...", env)
+
   }
 }