Merge pull request pyscript#150 from pyscript/quickfix/pyscript_loading_sequence

fpliger · web-flow · commit 70d4014ab325 · 2022-05-03T11:09:21.000-05:00
Hotfix for py-script/py-repl loading
diff --git a/pyscriptjs/examples/pylist.py b/pyscriptjs/examples/pylist.py
@@ -9,3 +9,9 @@ def on_click(self, evt=None):
     
 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
@@ -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
@@ -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
@@ -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
@@ -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;
+        registerWidget() {
+            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) {
