From 314be1997a6bd8edda7b62817433a8047a50c45d Mon Sep 17 00:00:00 2001
From: Fabio Pliger <fabio.pliger@gmail.com>
Date: Tue, 3 May 2022 08:54:23 -0500
Subject: [PATCH 1/3] replace using interpreter promise with the interpreter
 instance itself. Also properly wait for it to be fully initialized before
 using on the base widget class

---
 pyscriptjs/src/components/base.ts | 49 ++++++++++++++++++++-----------
 1 file changed, 32 insertions(+), 17 deletions(-)

diff --git a/pyscriptjs/src/components/base.ts b/pyscriptjs/src/components/base.ts
index 9d2d4e20..d5a59d23 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<string> {
-        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<void> {
         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<void> {
         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;
+            const pyodide = runtime;
             console.log('new widget registered:', this.name);
             pyodide.globals.set(this.id, this.proxy);
         }
 
         async eval(source: string): Promise<void> {
             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<string> {
-        const pyodide = await pyodideReadyPromise;
+        const pyodide = runtime;
         const response = await fetch(s);
         return await response.text();
     }
 
     async eval(source: string): Promise<void> {
         let output;
-        const pyodide = await pyodideReadyPromise;
+        const pyodide = runtime;
         try {
             output = await pyodide.runPythonAsync(source);
             if (output !== undefined) {

From ede0adac8144662701ba9247af35213750a2e3df Mon Sep 17 00:00:00 2001
From: Fabio Pliger <fabio.pliger@gmail.com>
Date: Tue, 3 May 2022 08:54:36 -0500
Subject: [PATCH 2/3] fix some examples

---
 pyscriptjs/examples/pylist.py         | 6 ++++++
 pyscriptjs/examples/repl2.html        | 4 ++--
 pyscriptjs/examples/simple_clock.html | 2 +-
 pyscriptjs/examples/todo-pylist.html  | 4 ++--
 4 files changed, 11 insertions(+), 5 deletions(-)

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 df05d062..c8c84c86 100644
--- a/pyscriptjs/examples/repl2.html
+++ b/pyscriptjs/examples/repl2.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
 
-    <title>Svelte app</title>
+    <title>Custom REPL Example</title>
 
     <link rel="icon" type="image/png" href="favicon.png" />
     <link rel="stylesheet" href="../build/pyscript.css" />
@@ -23,7 +23,7 @@
 
   <body>
       <h1 class="font-semibold text-2xl ml-5">Custom REPL</h1>
-      <py-box widths="2/3;1/3">
+      <py-box widths="1/2;1/2">
         <py-repl id="my-repl" auto-generate="true" std-out="output" std-err="err-div"> </py-repl>
         <div id="output" class="p-4"></div>
       </py-box>
diff --git a/pyscriptjs/examples/simple_clock.html b/pyscriptjs/examples/simple_clock.html
index c52e3b01..2ead74c3 100644
--- a/pyscriptjs/examples/simple_clock.html
+++ b/pyscriptjs/examples/simple_clock.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width,initial-scale=1" />
 
-    <title>Svelte app</title>
+    <title>Simple Clock Demo</title>
 
     <link rel="icon" type="image/png" href="favicon.png" />
     <link rel="stylesheet" href="../build/pyscript.css" />
diff --git a/pyscriptjs/examples/todo-pylist.html b/pyscriptjs/examples/todo-pylist.html
index ae76ff39..9854b200 100644
--- a/pyscriptjs/examples/todo-pylist.html
+++ b/pyscriptjs/examples/todo-pylist.html
@@ -11,7 +11,7 @@
     <script defer src="/build/pyscript.js"></script>
     <py-env>
     - paths:
-      - /utils.py
+      - ./utils.py
     </py-env>
     <py-register-widget src="/pylist.py" name="py-list" klass="PyList"></py-register-widget>
 
@@ -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()

From f957fdaaa6b138cea24e3d2aad9bf1c68af1b858 Mon Sep 17 00:00:00 2001
From: Fabio Pliger <fabio.pliger@gmail.com>
Date: Tue, 3 May 2022 09:18:57 -0500
Subject: [PATCH 3/3] remove async from method that is not async anymore

---
 pyscriptjs/src/components/base.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pyscriptjs/src/components/base.ts b/pyscriptjs/src/components/base.ts
index d5a59d23..9dffb591 100644
--- a/pyscriptjs/src/components/base.ts
+++ b/pyscriptjs/src/components/base.ts
@@ -218,7 +218,7 @@ function createWidget(name: string, code: string, klass: string) {
             });
         }
 
-        async registerWidget() {
+        registerWidget() {
             const pyodide = runtime;
             console.log('new widget registered:', this.name);
             pyodide.globals.set(this.id, this.proxy);