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>
<body>
<h1 class="font-semibold text-2xl ml-5">Custom REPL</h1>
<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>
</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>
</html>

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

@@ -35,7 +35,8 @@ export class BaseEvalElement extends HTMLElement {
source: string;
btnConfig: HTMLElement;
btnRun: HTMLElement;
outputElement: HTMLElement; //HTMLTextAreaElement;
outputElement: HTMLElement;
errorElement: HTMLElement;
theme: string;
constructor() {
@@ -115,32 +116,38 @@ export class BaseEvalElement extends HTMLElement {
await this._register_esm(pyodide);
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);
await pyodide.runPythonAsync(`output_manager.revert()`)
}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);
pyodide.runPython(`output_manager.revert()`)
}
if (output !== undefined){
if (Element === undefined){
Element = pyodide.globals.get('Element');
Element = pyodide.globals.get('Element');
}
const out = Element(this.outputElement.id);
// @ts-ignore
out.write.callKwargs(output, { append : true});
if (!this.hasAttribute('output')) {
this.outputElement.hidden = false;
this.outputElement.style.display = 'block';
}
}
this.postEvaluate()
} 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');
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
// Butons DIV
@@ -161,23 +161,35 @@ export class PyRepl extends BaseEvalElement {
}
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
if (!this.hasAttribute('output-mode')) {
this.setAttribute('output-mode', 'append');
}
}else{
// Editor Output Div
this.outputElement = document.createElement('div');
this.outputElement.classList.add("output");
this.outputElement.hidden = true;
this.outputElement.id = this.id + "-" + this.getAttribute("exec-id");
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);
// add the output div id if there's not output pre-defined
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.editor.focus();
console.log('connected');
@@ -198,6 +210,12 @@ export class PyRepl extends BaseEvalElement {
if (this.hasAttribute('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());
this.parentElement.appendChild(newPyRepl);

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

@@ -173,15 +173,32 @@ export class PyScript extends BaseEvalElement {
mainDiv.appendChild(eDiv);
if (this.hasAttribute('output')) {
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;
this.errorElement = this.outputElement = document.getElementById(this.getAttribute('output'));
// add the output div id there's no output element
mainDiv.appendChild(this.outputElement);
// in this case, the default output-mode is append, if hasn't been specified
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"){