Fix extensions regression bug (#489)

* add output div visibility rule and make sure CustomWidget is being registered

* add new runAfterRuntimeInitialized method that classes can use to run code only after runtime actually initialized

* replace setTimout with proper event to wait for runtime to be completed

* replace setTimout on pyinpytbox with proper event to wait for runtime to be completed

pyscriptjs/src/components/base.ts

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

pyscriptjs/src/components/pybutton.ts

@@ -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');
     }

pyscriptjs/src/components/pyinputbox.ts

@@ -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);
+        });
     }
 }