From 190ae3969095b4e83696a73a45cfa7fafbcbc1f5 Mon Sep 17 00:00:00 2001 From: Philipp Rudiger Date: Thu, 21 Apr 2022 20:40:24 +0200 Subject: [PATCH 1/3] Auto-generate element ID to ensure output is rendered --- pyscriptjs/src/components/base.ts | 8 ++++++++ pyscriptjs/src/components/pyscript.ts | 5 ++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/pyscriptjs/src/components/base.ts b/pyscriptjs/src/components/base.ts index 8c2861db..4fedfbb7 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 f40b0be0..b25dad0f 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); From 9d0837abecd5e5b196a42fc31c840016415b9097 Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Fri, 22 Apr 2022 11:55:18 -0500 Subject: [PATCH 2/3] remove unecessary check for id since the base class is making sure that it always has an ID --- pyscriptjs/src/components/pyscript.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/pyscriptjs/src/components/pyscript.ts b/pyscriptjs/src/components/pyscript.ts index b25dad0f..672c7223 100644 --- a/pyscriptjs/src/components/pyscript.ts +++ b/pyscriptjs/src/components/pyscript.ts @@ -140,11 +140,8 @@ 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'); - const exec_id = this.getAttribute("exec-id"); + 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 From 1be8aa3a28344a6abd0469e253a7e48e58bbfc22 Mon Sep 17 00:00:00 2001 From: Fabio Pliger Date: Fri, 22 Apr 2022 12:03:04 -0500 Subject: [PATCH 3/3] move guidGenerator to utils to make it more available --- pyscriptjs/src/components/base.ts | 9 +-------- pyscriptjs/src/utils.ts | 9 ++++++++- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/pyscriptjs/src/components/base.ts b/pyscriptjs/src/components/base.ts index 4fedfbb7..e76ab6de 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,13 +27,6 @@ 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; wrapper: HTMLElement; diff --git a/pyscriptjs/src/utils.ts b/pyscriptjs/src/utils.ts index ac9f83d5..cdcd1c7e 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}