diff --git a/pyscriptjs/src/components/base.ts b/pyscriptjs/src/components/base.ts index 8c2861d..4fedfbb 100644 --- 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 index f40b0be..b25dad0 100644 --- 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);