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

add support for std-out and std-err attributes in py-repl and py-script

Browse Source
This commit is contained in:
Fabio Pliger
2022-04-18 21:55:29 -05:00
parent 57d6ae967b
commit b38d2e5df1
4 changed files with 70 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
pyscriptjs/examples/repl2.html
View File

@@ -20,9 +20,12 @@
</py-env> </py-env>
<body> <body>
<h1 class="font-semibold text-2xl ml-5">Custom REPL</h1>
<py-box widths="2/3;1/3"> <py-box widths="2/3;1/3">
<py-repl id="my-repl" auto-generate="true" output="output"> </py-repl> <py-repl id="my-repl" auto-generate="true" std-out="output" std-err="err-div"> </py-repl>
<div id="output"></div> <div id="output"></div>
</py-box> </py-box>
<footer id="err-div" class="bg-red-700 text-white text-center border-t-4 border-gree-500 fixed inset-x-0 bottom-0 p-4 hidden">
</footer>
</body> </body>
</html> </html>

21
pyscriptjs/src/components/base.ts
View File

@@ -35,7 +35,8 @@ export class BaseEvalElement extends HTMLElement {
source: string; source: string;
btnConfig: HTMLElement; btnConfig: HTMLElement;
btnRun: HTMLElement; btnRun: HTMLElement;
outputElement: HTMLElement; //HTMLTextAreaElement; outputElement: HTMLElement;
errorElement: HTMLElement;
theme: string; theme: string;
constructor() { constructor() {
@@ -115,32 +116,38 @@ export class BaseEvalElement extends HTMLElement {
await this._register_esm(pyodide); await this._register_esm(pyodide);
if (source.includes("asyncio")){ if (source.includes("asyncio")){
await pyodide.runPythonAsync(`output_manager.change("`+this.outputElement.id+`")`); await pyodide.runPythonAsync(`output_manager.change("`+this.outputElement.id+`", "`+this.errorElement.id+`")`);
output = await pyodide.runPythonAsync(source); output = await pyodide.runPythonAsync(source);
await pyodide.runPythonAsync(`output_manager.revert()`) await pyodide.runPythonAsync(`output_manager.revert()`)
}else{ }else{
output = pyodide.runPython(`output_manager.change("`+this.outputElement.id+`")`); output = pyodide.runPython(`output_manager.change("`+this.outputElement.id+`", "`+this.errorElement.id+`")`);
output = pyodide.runPython(source); output = pyodide.runPython(source);
pyodide.runPython(`output_manager.revert()`) pyodide.runPython(`output_manager.revert()`)
} }
if (output !== undefined){ if (output !== undefined){
if (Element === undefined){ if (Element === undefined){
Element = pyodide.globals.get('Element'); Element = pyodide.globals.get('Element');
} }
const out = Element(this.outputElement.id); const out = Element(this.outputElement.id);
// @ts-ignore // @ts-ignore
out.write.callKwargs(output, { append : true}); out.write.callKwargs(output, { append : true});
if (!this.hasAttribute('output')) {
this.outputElement.hidden = false; this.outputElement.hidden = false;
this.outputElement.style.display = 'block';
} }
}
this.postEvaluate() this.postEvaluate()
} catch (err) { } catch (err) {
this.addToOutput(err); if (Element === undefined){
Element = pyodide.globals.get('Element');
}
const out = Element(this.errorElement.id);
// @ts-ignore
out.write.callKwargs(err, { append : true});
this.errorElement.hidden = false;
this.errorElement.style.display = 'block';
} }
} }
} }

36
pyscriptjs/src/components/pyrepl.ts
View File

@@ -100,7 +100,7 @@ export class PyRepl extends BaseEvalElement {
}) })
let mainDiv = document.createElement('div'); let mainDiv = document.createElement('div');
addClasses(mainDiv, ["parentBox", "group", "flex", "flex-col", "mt-10", "border-2", "border-gray-200", "rounded-lg"]) addClasses(mainDiv, ["parentBox", "group", "flex", "flex-col", "mt-2", "border-2", "border-gray-200", "rounded-lg"])
// add Editor to main PyScript div // add Editor to main PyScript div
// Butons DIV // Butons DIV
@@ -161,23 +161,35 @@ export class PyRepl extends BaseEvalElement {
} }
if (this.hasAttribute('output')) { if (this.hasAttribute('output')) {
this.outputElement = document.getElementById(this.getAttribute('output')); this.errorElement = this.outputElement = document.getElementById(this.getAttribute('output'));
// in this case, the default output-mode is append, if hasn't been specified // in this case, the default output-mode is append, if hasn't been specified
if (!this.hasAttribute('output-mode')) { if (!this.hasAttribute('output-mode')) {
this.setAttribute('output-mode', 'append'); this.setAttribute('output-mode', 'append');
} }
}else{ }else{
// Editor Output Div if (this.hasAttribute('std-out')){
this.outputElement = document.createElement('div'); this.outputElement = document.getElementById(this.getAttribute('std-out'));
this.outputElement.classList.add("output"); }else{
this.outputElement.hidden = true; // In this case neither output or std-out have been provided so we need
this.outputElement.id = this.id + "-" + this.getAttribute("exec-id"); // to create a new output div to output to
this.outputElement = document.createElement('div');
this.outputElement.classList.add("output");
this.outputElement.hidden = true;
this.outputElement.id = this.id + "-" + this.getAttribute("exec-id");
// add the output div id if there's not output pre-defined // add the output div id if there's not output pre-defined
mainDiv.appendChild(this.outputElement); mainDiv.appendChild(this.outputElement);
}
if (this.hasAttribute('std-err')){
this.errorElement = document.getElementById(this.getAttribute('std-err'));
}else{
this.errorElement = this.outputElement;
}
} }
this.appendChild(mainDiv); this.appendChild(mainDiv);
this.editor.focus(); this.editor.focus();
console.log('connected'); console.log('connected');
@@ -198,6 +210,12 @@ export class PyRepl extends BaseEvalElement {
if (this.hasAttribute('output')){ if (this.hasAttribute('output')){
newPyRepl.setAttribute('output', this.getAttribute('output')); newPyRepl.setAttribute('output', this.getAttribute('output'));
} }
if (this.hasAttribute('std-out')){
newPyRepl.setAttribute('std-out', this.getAttribute('std-out'));
}
if (this.hasAttribute('std-err')){
newPyRepl.setAttribute('std-err', this.getAttribute('std-err'));
}
newPyRepl.setAttribute('exec-id', nextExecId.toString()); newPyRepl.setAttribute('exec-id', nextExecId.toString());
this.parentElement.appendChild(newPyRepl); this.parentElement.appendChild(newPyRepl);

33
pyscriptjs/src/components/pyscript.ts
View File

@@ -173,15 +173,32 @@ export class PyScript extends BaseEvalElement {
mainDiv.appendChild(eDiv); mainDiv.appendChild(eDiv);
if (this.hasAttribute('output')) { if (this.hasAttribute('output')) {
this.outputElement = document.getElementById(this.getAttribute('output')); this.errorElement = this.outputElement = document.getElementById(this.getAttribute('output'));
}else{
// Editor Output Div
this.outputElement = document.createElement('div');
this.outputElement.classList.add("output");
this.outputElement.hidden = true;
// add the output div id there's no output element // in this case, the default output-mode is append, if hasn't been specified
mainDiv.appendChild(this.outputElement); if (!this.hasAttribute('output-mode')) {
this.setAttribute('output-mode', 'append');
}
}else{
if (this.hasAttribute('std-out')){
this.outputElement = document.getElementById(this.getAttribute('std-out'));
}else{
// In this case neither output or std-out have been provided so we need
// to create a new output div to output to
this.outputElement = document.createElement('div');
this.outputElement.classList.add("output");
this.outputElement.hidden = true;
this.outputElement.id = this.id + "-" + this.getAttribute("exec-id");
// add the output div id if there's not output pre-defined
mainDiv.appendChild(this.outputElement);
}
if (this.hasAttribute('std-err')){
this.outputElement = document.getElementById(this.getAttribute('std-err'));
}else{
this.errorElement = this.outputElement;
}
} }
if (currentMode=="edit"){ if (currentMode=="edit"){