diff --git a/pyscriptjs/src/components/base.ts b/pyscriptjs/src/components/base.ts index 8c2861d..e76ab6d 100644 --- 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 index f40b0be..672c722 100644 --- 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 index ac9f83d..cdcd1c7 100644 --- 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}