Merge pull request pyscript#13 from anaconda/pys-7/support_local_imports

fpliger · web-flow · commit ff5ab7acc2c1 · 2022-04-13T09:59:38.000-05:00
support local imports
diff --git a/pyscriptjs/examples/repl2.html b/pyscriptjs/examples/repl2.html
@@ -12,6 +12,13 @@
     <script defer src="../build/pyscript.js"></script>
   </head>
 
+  <py-env>
+- bokeh
+- numpy
+- paths:
+  - /utils.py
+  </py-env>
+
   <body>
     <div class="w-full h-full">
       <div class="flex">
diff --git a/pyscriptjs/examples/simple_script2.html b/pyscriptjs/examples/simple_script2.html
@@ -10,27 +10,29 @@
     <link rel="stylesheet" href="../build/pyscript.css" />
     
     <script defer src="../build/pyscript.js"></script>
+    <py-env>
+    - paths:
+      - /utils.py
+    </py-env>
   </head>
 
   <body>
     <div class="font-mono">start time: <label id="outputDiv"></label></div>
     <div id="outputDiv2" class="font-mono"></div>
     <div id="outputDiv3" class="font-mono"></div>
     <py-script target="outputDiv">
-from datetime import datetime
-now = datetime.now()
-now.strftime("%m/%d/%Y, %H:%M:%S")
+import utils
+utils.now()
     </py-script>
 
     <py-script>
-from datetime import datetime
+from utils import now
 import asyncio
 
 async def foo():
   while True:
     await asyncio.sleep(1)
-    now = datetime.now()
-    output = now.strftime("%m/%d/%Y, %H:%M:%S")
+    output = now()
     pyscript.write("outputDiv2", output)
     
     out3 = Element("outputDiv3")
diff --git a/pyscriptjs/examples/todo.html b/pyscriptjs/examples/todo.html
@@ -10,6 +10,10 @@
     <link rel="stylesheet" href="/build/pyscript.css" />
     
     <script defer src="/build/pyscript.js"></script>
+    <py-env>
+    - paths:
+      - /utils.py
+    </py-env>
   </head>
 
   <body class="container">
@@ -22,14 +26,14 @@
     <div class="text-center w-full mb-8">
       <h1 class="text-3xl font-bold text-gray-800 uppercase tracking-tight">To Do List</h1>
     </div>
-    
     <div>
       <input id="new-task-content" class="border flex-1 mr-3 border-gray-300 p-2 rounded" type="text">
       <button id="new-task-btn" class="p-2 text-white bg-blue-600 border border-blue-600 rounded" type="submit" pys-onClick="add_task">
         Add task
       </button>
     </div>
   
+    <py-list id="myList"></py-list>
     <div id="list-tasks-container" class="flex flex-col-reverse mt-4">
   </div>
     
diff --git a/pyscriptjs/examples/todo.py b/pyscriptjs/examples/todo.py
@@ -1,4 +1,5 @@
 from datetime import datetime as dt
+from utils import add_class, remove_class
 from js import console
 
 tasks = []
@@ -12,6 +13,7 @@ def add_task(*ags, **kws):
   # create task
   task_id = f"task-{len(tasks)}"
   task = {"id": task_id, "content": new_task_content.element.value, "done": False, "created_at": dt.now()}
+
   tasks.append(task)
   
   # add the task element to the page as new node in the list by cloning from a template
@@ -24,14 +26,13 @@ def add_task(*ags, **kws):
   def check_task(evt=None):
     task['done'] = not task['done']
     if task['done']:
-      taskHtmlContent.element.classList.add("line-through")
+      add_class(taskHtmlContent, "line-through")
     else:
-      taskHtmlContent.element.classList.remove("line-through")
+      remove_class(taskHtmlContent, "line-through")
 
   new_task_content.clear()
   taskHtmlCheck.element.onclick = check_task
 
 def add_task_event(e):
-  console.log("im in")
   if (e.key == "Enter"):
     add_task()
diff --git a/pyscriptjs/src/components/pyenv.ts b/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)
+
   }
 }
diff --git a/pyscriptjs/src/interpreter.ts b/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}
diff --git a/pyscriptjs/src/utils.ts b/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}

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,12 @@`
`1`	`1`
`2`		`-export function addClasses(element: HTMLElement, classes: Array<string>){`
	`2`	`+function addClasses(element: HTMLElement, classes: Array<string>){`
`3`	`3`	`for (let entry of classes) {`
`4`	`4`	`element.classList.add(entry);`
`5`	`5`	`}`
`6`	`6`	`}`
	`7`	`+`
	`8`	`+const getLastPath = function (str) {`
	`9`	`+ return str.split('\\').pop().split('/').pop();`
	`10`	`+}`
	`11`	`+`
	`12`	`+export {addClasses, getLastPath}`