general cleanup before merging

pyscriptjs/examples/pylist.py

@@ -11,6 +11,12 @@ class PyList(PyListTemplate):
   item_class = PyItem
 
 def add_task(*ags, **kws):
+  # create a new dictionary representing the new task
   task = { "content": new_task_content.value,  "done": False, "created_at": dt.now() }
+
+  # 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")
+
+  # clear the inputbox element used to create the new task
   new_task_content.clear()

pyscriptjs/src/components/base.ts

@@ -157,11 +157,7 @@ export class BaseEvalElement extends HTMLElement {
         
         try{ 
             output = await pyodide.runPythonAsync(source);
-
+            if (output !== undefined){ console.log(output); }
-            if (output !== undefined){
-                console.log(output);
-            }
-
         } catch (err) {
             console.log(err);
         }
@@ -170,7 +166,6 @@ export class BaseEvalElement extends HTMLElement {
 
   function createWidget(name: string, code: string, klass: string){
       
-    
     class CustomWidget extends HTMLElement{
         shadow: ShadowRoot;
         wrapper: HTMLElement;
@@ -208,10 +203,7 @@ export class BaseEvalElement extends HTMLElement {
 
         async registerWidget(){
             let pyodide = await pyodideReadyPromise;
-
             console.log('new widget registered:', this.name);
-            
-
             pyodide.globals.set(this.id, this.proxy);
         }
 
@@ -224,7 +216,6 @@ export class BaseEvalElement extends HTMLElement {
                 if (output !== undefined){
                     console.log(output);
                 }
-    
             } catch (err) {
                 console.log(err);
             }
@@ -266,7 +257,6 @@ export class BaseEvalElement extends HTMLElement {
         }
       }
 
-
     connectedCallback() {
       if (this.id === undefined){
         throw new ReferenceError(`No id specified for component. Components must have an explicit id. Please use id="" to specify your component id.`)
@@ -280,10 +270,7 @@ export class BaseEvalElement extends HTMLElement {
       this.getSourceFromFile(this.source).then((code:string) => {
         this.code = code;
         createWidget(this.name, code, this.klass);
-
       });
-      
-      console.log('py-template connected');
     }
 
     initOutErr(): void {
@@ -304,9 +291,6 @@ export class BaseEvalElement extends HTMLElement {
                 this.outputElement.classList.add("output");
                 this.outputElement.hidden = true;
                 this.outputElement.id = this.id + "-" + this.getAttribute("exec-id");
-
-                // add the output div id if there's not output pre-defined
-                //mainDiv.appendChild(this.outputElement);
             }
 
             if (this.hasAttribute('std-err')){
@@ -328,15 +312,11 @@ export class BaseEvalElement extends HTMLElement {
         let pyodide = await pyodideReadyPromise;
         try{ 
             output = await pyodide.runPythonAsync(source);
-
             if (output !== undefined){
                 console.log(output);
             }
-
         } catch (err) {
             console.log(err);
         }
     }
-
-    
   }

pyscriptjs/src/components/pybutton.ts

@@ -11,17 +11,11 @@ export class PyButton extends BaseEvalElement {
     constructor() {
         super();
   
-        // attach shadow so we can preserve the element original innerHtml content
-        // this.shadow = this.attachShadow({ mode: 'open'});
-  
-        // this.wrapper = document.createElement('slot');
-        // this.shadow.appendChild(this.wrapper);
         if (this.hasAttribute('label')) {
           this.label = this.getAttribute('label');
         }
       }
 
-
     connectedCallback() {
       this.code = htmlDecode(this.innerHTML);
       this.mount_name  = this.id.split("-").join("_");
@@ -60,5 +54,3 @@ export class PyButton extends BaseEvalElement {
       console.log('py-button connected');
     }
   }
-
-  

pyscriptjs/src/components/pyinputbox.ts

@@ -11,17 +11,11 @@ export class PyInputBox extends BaseEvalElement {
     constructor() {
       super();
 
-        // attach shadow so we can preserve the element original innerHtml content
-        // this.shadow = this.attachShadow({ mode: 'open'});
-  
-        // this.wrapper = document.createElement('slot');
-        // this.shadow.appendChild(this.wrapper);
       if (this.hasAttribute('label')) {
         this.label = this.getAttribute('label');
       }
     }
 
-
     connectedCallback() {
       this.code = htmlDecode(this.innerHTML);
       this.mount_name  = this.id.split("-").join("_");
@@ -45,6 +39,8 @@ export class PyInputBox extends BaseEvalElement {
         registrationCode += `\n${this.mount_name}.element.onkeypress = on_keypress_${this.mount_name}`
       }
 
+      // TODO: For now we delay execution to allow pyodide to load but in the future this
+      //       should really wait for it to load..
       setTimeout(() => { 
         this.eval(this.code).then(() => {
           this.eval(registrationCode).then(() => {
@@ -52,8 +48,6 @@ export class PyInputBox extends BaseEvalElement {
           });
         });
         }, 4000);
-
-        console.log('py-inputbox connected');
     }
   }
 

pyscriptjs/src/components/pytitle.ts

@@ -12,7 +12,6 @@ export class PyTitle extends BaseEvalElement {
       super();
     }
 
-
   connectedCallback() {
     this.label = htmlDecode(this.innerHTML);
     this.mount_name  = this.id.split("-").join("_");
@@ -29,9 +28,7 @@ export class PyTitle extends BaseEvalElement {
     this.id = `${this.id}-container`;
     mainDiv.appendChild(divContent);
     this.appendChild(mainDiv);
-        
-      console.log('py-title connected');
-    }
   }
+}