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)
+
   }
 }

pyscriptjs/src/interpreter.ts

@@ -1,3 +1,5 @@
+import { getLastPath } from "./utils";
+
 // @ts-nocheck
 // @ts-ignore
 let pyodideReadyPromise;
@@ -129,4 +131,18 @@ let loadPackage = async function(package_name: string[] | string, runtime: any):
     await runtime.loadPackage(package_name);
 }
 
-export {loadInterpreter, pyodideReadyPromise, loadPackage}
+let loadFromFile = async function(s: string, runtime: any): Promise<any> {
+    let filename = getLastPath(s);
+    await runtime.runPythonAsync(`
+        from pyodide.http import pyfetch
+
+        response = await pyfetch("`+s+`")
+        content = await response.bytes()
+        with open("`+filename+`", "wb") as f:
+            f.write(content)
+    `)
+
+    runtime.pyimport(filename.replace(".py", ""));
+}
+
+export {loadInterpreter, pyodideReadyPromise, loadPackage, loadFromFile}

pyscriptjs/src/main.ts

@@ -2,12 +2,14 @@ import App from "./App.svelte";
 
 import { PyScript } from "./components/pyscript";
 import { PyRepl } from "./components/pyrepl";
-import { PyEnv } from "./components/pyenv"
+import { PyEnv } from "./components/pyenv";
+import { PyBox } from "./components/pybox";
 
 
 let xPyScript = customElements.define('py-script', PyScript);
 let xPyRepl = customElements.define('py-repl', PyRepl);
 let xPyEnv = customElements.define('py-env', PyEnv);
+let xPyBox = customElements.define('py-box', PyBox);
 
 
 const app = new App({

pyscriptjs/src/utils.ts

@@ -1,6 +1,12 @@
 
-export function addClasses(element: HTMLElement, classes: Array<string>){
+function addClasses(element: HTMLElement, classes: Array<string>){
     for (let entry of classes) {
       element.classList.add(entry);
     }
 }
+
+const getLastPath = function (str) {
+  return str.split('\\').pop().split('/').pop();
+}
+
+export {addClasses, getLastPath}