diff --git a/pyscriptjs/examples/repl2.html b/pyscriptjs/examples/repl2.html index 38ca506..e43cc34 100644 --- a/pyscriptjs/examples/repl2.html +++ b/pyscriptjs/examples/repl2.html @@ -20,13 +20,9 @@ -
-
+
-
-
- - + diff --git a/pyscriptjs/src/components/pybox.ts b/pyscriptjs/src/components/pybox.ts new file mode 100644 index 0000000..5db92e2 --- /dev/null +++ b/pyscriptjs/src/components/pybox.ts @@ -0,0 +1,68 @@ +import { addClasses } from '../utils'; + +// Premise used to connect to the first available pyodide interpreter +// let pyodideReadyPromise; +// let environments; +// let currentMode; + +// pyodideLoaded.subscribe(value => { +// pyodideReadyPromise = value; +// }); +// loadedEnvironments.subscribe(value => { +// environments = value; +// }); + +// let propertiesNavOpen; +// componentDetailsNavOpen.subscribe(value => { +// propertiesNavOpen = value; +// }); + +// mode.subscribe(value => { +// currentMode = value; +// }); + + +export class PyBox extends HTMLElement { + shadow: ShadowRoot; + wrapper: HTMLElement; + theme: string; + widths: Array; + // editorState: EditorState; + + constructor() { + super(); + + // attach shadow so we can preserve the element original innerHtml content + this.shadow = this.attachShadow({ mode: 'open'}); + + this.wrapper = document.createElement('slot'); + this.shadow.appendChild(this.wrapper); + } + + + connectedCallback() { + this.innerHTML = ''; + + let mainDiv = document.createElement('div'); + addClasses(mainDiv, ["flex"]) + // add Editor to main PyScript div + debugger + // mainDiv.appendChild(eDiv); + // mainDiv.appendChild(this.editorNode); + + if (!this.id){ + console.log("WARNING: define with an id. should always have an id. More than one on a page won't work otherwise!") + } + + if (!this.hasAttribute('widths')) { + this.setAttribute("exec-id", "1"); + } + + + this.appendChild(mainDiv); + + console.log('connected'); + } + } + + \ No newline at end of file diff --git a/pyscriptjs/src/main.ts b/pyscriptjs/src/main.ts index c0853da..bd4f69d 100644 --- a/pyscriptjs/src/main.ts +++ b/pyscriptjs/src/main.ts @@ -2,12 +2,14 @@ import App from "./App.svelte"; import { PyScript } from "./components/pyscript"; import { PyRepl } from "./components/pyrepl"; -import { PyEnv } from "./components/pyenv" +import { PyEnv } from "./components/pyenv"; +import { PyBox } from "./components/pybox"; let xPyScript = customElements.define('py-script', PyScript); let xPyRepl = customElements.define('py-repl', PyRepl); let xPyEnv = customElements.define('py-env', PyEnv); +let xPyBox = customElements.define('py-box', PyBox); const app = new App({