Merge pull request pyscript#42 from anaconda/auto-id

fpliger · web-flow · commit ea63e36ca1a3 · 2022-04-22T12:05:13.000-05:00
Auto-generate element ID to ensure output is rendered
diff --git a/pyscriptjs/src/components/base.ts b/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) {
diff --git a/pyscriptjs/src/components/pyscript.ts b/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);
diff --git a/pyscriptjs/src/utils.ts b/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}
