Merge pull request #150 from pyscript/quickfix/pyscript_loading_sequence

Hotfix for py-script/py-repl loading
This commit is contained in:
Fabio Pliger
2022-05-03 11:09:21 -05:00
committed by GitHub
5 changed files with 43 additions and 22 deletions

View File

@@ -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")

View File

@@ -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>

View File

@@ -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" />

View File

@@ -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()

View File

@@ -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) {