TutorExilius
diff --git a/‎pyscriptjs/src/components/base.ts
Lines changed: 12 additions & 0 deletions b/‎pyscriptjs/src/components/base.ts
Lines changed: 12 additions & 0 deletions
diff --git a/‎pyscriptjs/src/components/pybutton.ts
Lines changed: 2 additions & 2 deletions b/‎pyscriptjs/src/components/pybutton.ts
Lines changed: 2 additions & 2 deletions
diff --git a/‎pyscriptjs/src/components/pyinputbox.ts
Lines changed: 2 additions & 2 deletions b/‎pyscriptjs/src/components/pyinputbox.ts
Lines changed: 2 additions & 2 deletions
@@ -184,6 +184,7 @@ export class BaseEvalElement extends HTMLElement {
             this.errorElement.children[this.errorElement.children.length - 1].setAttribute('error', '');
             this.errorElement.hidden = false;
             this.errorElement.style.display = 'block';
+            this.errorElement.style.visibility = 'visible';
         }
     } // end evaluate
 
@@ -200,6 +201,16 @@ export class BaseEvalElement extends HTMLElement {
             console.log(err);
         }
     } // end eval
+
+    runAfterRuntimeInitialized(callback: () => Promise<void>){
+        pyodideLoaded.subscribe(value => {
+            if ('runPythonAsync' in value) {
+                setTimeout(async () => {
+                    await callback();
+                }, 100);
+            }
+        });
+    }
 }
 
 function createWidget(name: string, code: string, klass: string) {
@@ -270,6 +281,7 @@ function createWidget(name: string, code: string, klass: string) {
             }
         }
     }
+    const xPyWidget = customElements.define(name, CustomWidget);
 }
 
 export class PyWidget extends HTMLElement {
 
@@ -65,11 +65,11 @@ export class PyButton extends BaseEvalElement {
 
         // now that we appended and the element is attached, lets connect with the event handlers
         // defined for this widget
-        setTimeout(async () => {
+        this.runAfterRuntimeInitialized(async () => {
             await this.eval(this.code);
             await this.eval(registrationCode);
             console.log('registered handlers');
-        }, 4000);
+        });
 
         console.log('py-button connected');
     }
 
@@ -43,10 +43,10 @@ export class PyInputBox extends BaseEvalElement {
 
         // TODO: For now we delay execution to allow pyodide to load but in the future this
         //       should really wait for it to load..
-        setTimeout(async () => {
+        this.runAfterRuntimeInitialized(async () => {
             await this.eval(this.code);
             await this.eval(registrationCode);
             console.log('registered handlers');
-        }, 4000);
+        });
     }
 }
Original file line number	Diff line number	Diff line change
`@@ -184,6 +184,7 @@ export class BaseEvalElement extends HTMLElement {`
`184`	`184`	`this.errorElement.children[this.errorElement.children.length - 1].setAttribute('error', '');`
`185`	`185`	`this.errorElement.hidden = false;`
`186`	`186`	`this.errorElement.style.display = 'block';`
	`187`	`+ this.errorElement.style.visibility = 'visible';`
`187`	`188`	`}`
`188`	`189`	`} // end evaluate`
`189`	`190`
`@@ -200,6 +201,16 @@ export class BaseEvalElement extends HTMLElement {`
`200`	`201`	console.log(err);
`201`	`202`	`}`
`202`	`203`	`} // end eval`
	`204`	`+`
	`205`	`+ runAfterRuntimeInitialized(callback: () => Promise<void>){`
	`206`	`+ pyodideLoaded.subscribe(value => {`
	`207`	`+ if ('runPythonAsync' in value) {`
	`208`	`+ setTimeout(async () => {`
	`209`	`+ await callback();`
	`210`	`+ }, 100);`
	`211`	`+ }`
	`212`	`+ });`
	`213`	`+ }`
`203`	`214`	`}`
`204`	`215`
`205`	`216`	`function createWidget(name: string, code: string, klass: string) {`
`@@ -270,6 +281,7 @@ function createWidget(name: string, code: string, klass: string) {`
`270`	`281`	`}`
`271`	`282`	`}`
`272`	`283`	`}`
	`284`	`+ const xPyWidget = customElements.define(name, CustomWidget);`
`273`	`285`	`}`
`274`	`286`
`275`	`287`	`export class PyWidget extends HTMLElement {`
Original file line number	Diff line number	Diff line change
`@@ -43,10 +43,10 @@ export class PyInputBox extends BaseEvalElement {`
`43`	`43`
`44`	`44`	`// TODO: For now we delay execution to allow pyodide to load but in the future this`
`45`	`45`	`// should really wait for it to load..`
`46`		`- setTimeout(async () => {`
	`46`	`+ this.runAfterRuntimeInitialized(async () => {`
`47`	`47`	`await this.eval(this.code);`
`48`	`48`	`await this.eval(registrationCode);`
`49`	`49`	`console.log('registered handlers');`
`50`		`- }, 4000);`
	`50`	`+ });`
`51`	`51`	`}`
`52`	`52`	`}`