Auto-generate element ID to ensure output is rendered

philippjfr · philippjfr · commit 190ae3969095 · 2022-04-21T20:40:24.000+02:00
diff --git a/pyscriptjs/src/components/base.ts b/pyscriptjs/src/components/base.ts
@@ -27,6 +27,12 @@ type PyodideInterface = {
     registerJsModule(name: string, module: object): void
 }
 
+export 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 class BaseEvalElement extends HTMLElement {
     shadow: ShadowRoot;
@@ -46,6 +52,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) {
diff --git a/pyscriptjs/src/components/pyscript.ts b/pyscriptjs/src/components/pyscript.ts
@@ -144,9 +144,8 @@ export class PyScript extends BaseEvalElement {
             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);
