diff --git a/pyscriptjs/examples/todo.html b/pyscriptjs/examples/todo.html index 1690441..61a75dc 100644 --- a/pyscriptjs/examples/todo.html +++ b/pyscriptjs/examples/todo.html @@ -7,50 +7,14 @@ Todo App - + - + - -from datetime import datetime as dt - -tasks = [] - -# define the task template that will be use to render new templates to the page -task_template = Element("task-template").select('.task', from_content=True) -task_list = Element("list-tasks-container") -new_task_content = Element("new-task-content") - -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 - taskHtml = task_template.clone(task_id, to=task_list) - taskHtmlContent = taskHtml.select('p') - taskHtmlContent.element.innerText = task['content'] - taskHtmlCheck = taskHtml.select('input') - task_list.element.appendChild(taskHtml.element) - - def check_task(evt=None): - task['done'] = not task['done'] - if task['done']: - taskHtmlContent.element.classList.add("line-through") - else: - taskHtmlContent.element.classList.remove("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() - - + + +
@@ -80,4 +44,5 @@ def add_task_event(e):
+ diff --git a/pyscriptjs/src/components/pyscript.ts b/pyscriptjs/src/components/pyscript.ts index 572fbdc..80cfcbe 100644 --- a/pyscriptjs/src/components/pyscript.ts +++ b/pyscriptjs/src/components/pyscript.ts @@ -95,6 +95,7 @@ export class PyScript extends HTMLElement { btnConfig: HTMLElement; btnRun: HTMLElement; editorOut: HTMLElement; //HTMLTextAreaElement; + source: string; // editorState: EditorState; constructor() { @@ -205,6 +206,10 @@ export class PyScript extends HTMLElement { } console.log('connected'); + + if (this.hasAttribute('src')) { + this.source = this.getAttribute('src'); + } } addToOutput(s: string) { @@ -212,8 +217,36 @@ export class PyScript extends HTMLElement { this.editorOut.hidden = false; } + async loadFromFile(s: string){ + let pyodide = await pyodideReadyPromise; + let response = await fetch(s); + this.code = await response.text(); + + await pyodide.runPythonAsync(this.code); + await pyodide.runPythonAsync(` + from pyodide.http import pyfetch + from pyodide import eval_code + response = await pyfetch("`+s+`") + content = await response.bytes() + + with open("todo.py", "wb") as f: + print(content) + f.write(content) + print("done writing") + `) + // let pkg = pyodide.pyimport("todo"); + // pyodide.runPython(` + // import todo + // `) + // pkg.do_something(); + } + async evaluate() { + console.log('evaluate'); + if (this.source){ + this.loadFromFile(this.source) + }else{ let pyodide = await pyodideReadyPromise; // debugger try { @@ -238,8 +271,9 @@ export class PyScript extends HTMLElement { this.addToOutput(err); console.log(err); } + } } - + render(){ console.log('rendered'); @@ -298,5 +332,5 @@ async function mountElements() { } await pyodide.runPythonAsync(source); } -addPostInitializer(initHandlers); addInitializer(mountElements); +addPostInitializer(initHandlers); diff --git a/pyscriptjs/src/interpreter.ts b/pyscriptjs/src/interpreter.ts index 9db0452..336fd20 100644 --- a/pyscriptjs/src/interpreter.ts +++ b/pyscriptjs/src/interpreter.ts @@ -98,17 +98,29 @@ pyscript = PyScript() let loadInterpreter = async function(): any { /* @ts-ignore */ + console.log("creating pyodide runtime"); pyodide = await loadPyodide({ - indexURL: "https://cdn.jsdelivr.net/pyodide/v0.19.0/full/", stdout: console.log, stderr: console.log }); // now that we loaded, add additional convenience fuctions + console.log("loading micropip"); await pyodide.loadPackage("micropip"); + console.log('loading pyscript module'); + await pyodide.runPythonAsync(` + from pyodide.http import pyfetch + response = await pyfetch("/build/pyscript.py") + with open("pyscript.py", "wb") as f: + content = await response.bytes() + print(content) + f.write(content) + `) + let pkg = pyodide.pyimport("pyscript"); + console.log("creating additional definitions"); let output = pyodide.runPython(additional_definitions); - + console.log("done setting up environment"); /* @ts-ignore */ return pyodide; }