8000 first stab ad pybox · rmyers/pyscript@b559f76 · GitHub
[go: up one dir, main page]
Skip to content

Commit b559f76

Browse files
fpligerfpliger
committed
first stab ad pybox
1 parent ff5ab7a commit b559f76

File tree

3 files changed

+73
-7
lines changed

3 files changed

+73
-7
lines changed

‎pyscriptjs/examples/repl2.html

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,9 @@
2020
</py-env>
2121

2222
<body>
23-
<div class="w-full h-full">
24-
<div class="flex">
23+
<py-box>
2524
<div class="w-2/3"><py-repl id="my-repl" auto-generate="true" target="output"> </py-repl></div>
2625
<div id="output" class="w-1/3"></div>
27-
</div>
28-
</div>
29-
30-
26+
</py-box>
3127
</body>
3228
</html>

‎pyscriptjs/src/components/pybox.ts

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { addClasses } from '../utils';
2+
3+
// Premise used to connect to the first available pyodide interpreter
4+
// let pyodideReadyPromise;
5+
// let environments;
6+
// let currentMode;
7+
8+
// pyodideLoaded.subscribe(value => {
9+
// pyodideReadyPromise = value;
10+
// });
11+
// loadedEnvironments.subscribe(value => {
12+
// environments = value;
13+
// });
14+
15+
// let propertiesNavOpen;
16+
// componentDetailsNavOpen.subscribe(value => {
17+
// propertiesNavOpen = value;
18+
// });
19+
20+
// mode.subscribe(value => {
21+
// currentMode = value;
22+
// });
23+
24+
25+
export class PyBox extends HTMLElement {
26+
shadow: ShadowRoot;
27+
wrapper: HTMLElement;
28+
theme: string;
29+
widths: Array<string>;
30+
// editorState: EditorState;
31+
32+
constructor() {
33+
super();
34+
35+
// attach shadow so we can preserve the element original innerHtml content
36+
this.shadow = this.attachShadow({ mode: 'open'});
37+
38+
this.wrapper = document.createElement('slot');
39+
this.shadow.appendChild(this.wrapper);
40+
}
41+
42+
43+
connectedCallback() {
44+
this.innerHTML = '';
45+
46+
let mainDiv = document.createElement('div');
47+
addClasses(mainDiv, ["flex"])
48+
// add Editor to main PyScript div
49+
debugger
50+
// mainDiv.appendChild(eDiv);
51+
// mainDiv.appendChild(this.editorNode);
52+
53+
if (!this.id){
54+
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!")
55+
}
56+
57+
if (!this.hasAttribute('widths')) {
58+
this.setAttribute("exec-id", "1");
59+
}
60+
61+
62+
this.appendChild(mainDiv);
63+
64+
console.log('connected');
65+
}
66+
}
67+
68+

‎pyscriptjs/src/main.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import App from "./App.svelte";
22

33
import { PyScript } from "./components/pyscript";
44
import { PyRepl } from "./components/pyrepl";
5-
import { PyEnv } from "./components/pyenv"
5+
import { PyEnv } from "./components/pyenv";
6+
import { PyBox } from "./components/pybox";
67

78

89
let xPyScript = customElements.define('py-script', PyScript);
910
let xPyRepl = customElements.define('py-repl', PyRepl);
1011
let xPyEnv = customElements.define('py-env', PyEnv);
12+
let xPyBox = customElements.define('py-box', PyBox);
1113

1214

1315
const app = new App({

0 commit comments

Comments
 (0)
0