alihan/pyscript-python-html
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2022-05-01 19:47:48 +03:00
Code Issues Projects Releases Wiki Activity

first stab ad pybox

Browse Source
This commit is contained in:
Fabio Pliger
2022-04-13 12:17:48 -05:00
parent ff5ab7acc2
commit b559f767eb
3 changed files with 73 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
pyscriptjs/examples/repl2.html
View File

@@ -20,13 +20,9 @@
</py-env>
<body>
<div class="w-full h-full">
<div class="flex">
<py-box>
<div class="w-2/3"><py-repl id="my-repl" auto-generate="true" target="output"> </py-repl></div>
<div id="output" class="w-1/3"></div>
</div>
</div>
</py-box>
</body>
</html>

68
pyscriptjs/src/components/pybox.ts Normal file
View File

@@ -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<string>;
// 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: <pyrepl> define with an id. <pyrepl> should always have an id. More than one <pyrepl> on a page won't work otherwise!")
}
if (!this.hasAttribute('widths')) {
this.setAttribute("exec-id", "1");
}
this.appendChild(mainDiv);
console.log('connected');
}
}

4
pyscriptjs/src/main.ts
View File

@@ -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({