diff --git a/pyscriptjs/examples/pylist.py b/pyscriptjs/examples/pylist.py
index 78a22aa1..851bb4b4 100644
--- a/pyscriptjs/examples/pylist.py
+++ b/pyscriptjs/examples/pylist.py
@@ -9,3 +9,9 @@ class PyItem(PyItemTemplate):
class PyList(PyListTemplate):
item_class = PyItem
+
+ def add(self, item):
+ if isinstance(item, str):
+ item = { "content": item, "done": False, "created_at": dt.now() }
+
+ super().add(item, labels=['content'], state_key="done")
diff --git a/pyscriptjs/examples/repl2.html b/pyscriptjs/examples/repl2.html
index 9e7d3b31..b1ae10cb 100644
--- a/pyscriptjs/examples/repl2.html
+++ b/pyscriptjs/examples/repl2.html
@@ -4,7 +4,7 @@
- Svelte app
+ Custom REPL Example
@@ -23,7 +23,7 @@
Custom REPL
-
+
diff --git a/pyscriptjs/examples/simple_clock.html b/pyscriptjs/examples/simple_clock.html
index eedc6940..7ac113cf 100644
--- a/pyscriptjs/examples/simple_clock.html
+++ b/pyscriptjs/examples/simple_clock.html
@@ -4,7 +4,7 @@
- Svelte app
+ Simple Clock Demo
diff --git a/pyscriptjs/examples/todo-pylist.html b/pyscriptjs/examples/todo-pylist.html
index bd59c931..9854b200 100644
--- a/pyscriptjs/examples/todo-pylist.html
+++ b/pyscriptjs/examples/todo-pylist.html
@@ -22,7 +22,7 @@
# add a new task to the list and tell it to use the `content` key to show in the UI
# and to use the key `done` to sync the task status with a checkbox element in the UI
- myList.add(task, labels=['content'], state_key="done")
+ myList.add(task)
# clear the inputbox element used to create the new task
new_task_content.clear()
diff --git a/pyscriptjs/src/components/base.ts b/pyscriptjs/src/components/base.ts
index 9d2d4e20..9dffb591 100644
--- a/pyscriptjs/src/components/base.ts
+++ b/pyscriptjs/src/components/base.ts
@@ -1,13 +1,14 @@
import { loadedEnvironments, mode, pyodideLoaded } from '../stores';
import { guidGenerator, addClasses } from '../utils';
// Premise used to connect to the first available pyodide interpreter
-let pyodideReadyPromise;
+let runtime;
let environments;
let currentMode;
let Element;
+
pyodideLoaded.subscribe(value => {
- pyodideReadyPromise = value;
+ runtime = value;
});
loadedEnvironments.subscribe(value => {
environments = value;
@@ -63,7 +64,7 @@ export class BaseEvalElement extends HTMLElement {
}
async getSourceFromFile(s: string): Promise {
- const pyodide = await pyodideReadyPromise;
+ const pyodide = runtime;
const response = await fetch(s);
this.code = await response.text();
return this.code;
@@ -101,7 +102,7 @@ export class BaseEvalElement extends HTMLElement {
async evaluate(): Promise {
console.log('evaluate');
- const pyodide = await pyodideReadyPromise;
+ const pyodide = runtime;
let source: string;
let output;
try {
@@ -154,7 +155,7 @@ export class BaseEvalElement extends HTMLElement {
async eval(source: string): Promise {
let output;
- const pyodide = await pyodideReadyPromise;
+ const pyodide = runtime;
try {
output = await pyodide.runPythonAsync(source);
@@ -193,25 +194,39 @@ function createWidget(name: string, code: string, klass: string) {
// ideally we can just wait for it to load and then run. To do
// so we need to replace using the promise and actually using
// the interpreter after it loads completely
- setTimeout(() => {
- this.eval(this.code).then(() => {
- this.proxy = this.proxyClass(this);
- console.log('proxy', this.proxy);
- this.proxy.connect();
- this.registerWidget();
- });
- }, 2000);
+ // setTimeout(() => {
+ // this.eval(this.code).then(() => {
+ // this.proxy = this.proxyClass(this);
+ // console.log('proxy', this.proxy);
+ // this.proxy.connect();
+ // this.registerWidget();
+ // });
+ // }, 2000);
+ pyodideLoaded.subscribe(value => {
+ console.log("RUNTIME READY", value)
+ if ("runPythonAsync" in value){
+ runtime = value;
+ setTimeout(() => {
+ this.eval(this.code).then(() => {
+ this.proxy = this.proxyClass(this);
+ console.log('proxy', this.proxy);
+ this.proxy.connect();
+ this.registerWidget();
+ });
+ }, 1000);
+ }
+ });
}
- async registerWidget() {
- const pyodide = await pyodideReadyPromise;
+ registerWidget() {
+ const pyodide = runtime;
console.log('new widget registered:', this.name);
pyodide.globals.set(this.id, this.proxy);
}
async eval(source: string): Promise {
let output;
- const pyodide = await pyodideReadyPromise;
+ const pyodide = runtime;
try {
output = await pyodide.runPythonAsync(source);
this.proxyClass = pyodide.globals.get(this.klass);
@@ -306,14 +321,14 @@ export class PyWidget extends HTMLElement {
}
async getSourceFromFile(s: string): Promise {
- const pyodide = await pyodideReadyPromise;
+ const pyodide = runtime;
const response = await fetch(s);
return await response.text();
}
async eval(source: string): Promise {
let output;
- const pyodide = await pyodideReadyPromise;
+ const pyodide = runtime;
try {
output = await pyodide.runPythonAsync(source);
if (output !== undefined) {