Merge pull request #42 from anaconda/auto-id

Auto-generate element ID to ensure output is rendered

pyscriptjs/src/components/base.ts

@@ -1,5 +1,5 @@
 import { pyodideLoaded, loadedEnvironments, componentDetailsNavOpen, mode } from '../stores';
-
+import { guidGenerator } from '../utils';
 // Premise used to connect to the first available pyodide interpreter
 let pyodideReadyPromise;
 let environments;
@@ -27,7 +27,6 @@ type PyodideInterface = {
     registerJsModule(name: string, module: object): void
 }
 
-
 export class BaseEvalElement extends HTMLElement {
     shadow: ShadowRoot;
     wrapper: HTMLElement;
@@ -46,6 +45,8 @@ export class BaseEvalElement extends HTMLElement {
         this.shadow = this.attachShadow({ mode: 'open'});
         this.wrapper = document.createElement('slot');
         this.shadow.appendChild(this.wrapper);
+        if (!this.id)
+	  this.id = this.constructor.name+"-"+guidGenerator()
       }
 
     addToOutput(s: string) {

pyscriptjs/src/components/pyscript.ts

@@ -140,13 +140,9 @@ export class PyScript extends BaseEvalElement {
           // to create a new output div to output to
 
           // Let's check if we have an id first and create one if not
-          if (!this.id){
-            this.id = `pyid-${Date.now()}`
-          }
           this.outputElement = document.createElement('div');
-          // this.outputElement.classList.add("output");
-          this.outputElement.hidden = true;
-          this.outputElement.id = this.id + "-" + this.childElementCount;
+          const exec_id = this.getAttribute("exec-id");
+          this.outputElement.id = this.id + (exec_id ? "-"+exec_id : "");
 
           // add the output div id if there's not output pre-defined
           mainDiv.appendChild(this.outputElement);

pyscriptjs/src/utils.ts

@@ -34,4 +34,11 @@ function ltrim(code: string): string {
     return code
 }
 
-export {addClasses, getLastPath, ltrim, htmlDecode}
+function guidGenerator(): string {
+  var S4 = function(): string {
+    return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
+  };
+  return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
+}
+
+export {addClasses, getLastPath, ltrim, htmlDecode, guidGenerator}