mirror of
https://github.com/pyscript/pyscript.git
synced 2025-12-23 12:12:59 -05:00
Simplify pyrepl.ts and kill base.ts (#884)
Major highlights: 1. Merge&simplify base.ts and pyrepl.ts; kill base.ts 2. improve and extente the py-repl integration tests 3. Reorder the code in pyrepl.ts. This part of the PR doesn't change much of the concrete logic: it's just a sequence of renaming variables, moving code around, group code into functions, killing code which is no longer needed. But the end result is much better and nicer to read, IMHO. Minor highlights: 1. py-repl now uses the new logic in pyexec.ts to run the code 2. after PR Add display impl, rm outputManage, print and console.log default to browser console #749 py-repl no longer displayed the result of the last evaluated expression (e.g. if you typed 42 and run it, it displayed nothing). This PR re-introduces this behavior, which is what you would expect by a REPL. 3. improve the pytest --dev option: now it implies --no-fake-server so that sourcemaps works automatically 4. improve the names of the CSS classes to be more consistent 5. kill pyrepl.test.ts: the old tests didn't check anything useful, this style of unit test doesn't really add much value if you have good integration tests (which now we have) and trying to revive them was not worth the hassle
This commit is contained in:
Antonio Cuni
@@ -1,116 +0,0 @@
|
||||
// XXX this should be eventually killed.
|
||||
// The only remaining class which inherit from BaseEvalElement is PyRepl: we
|
||||
// should merge the two classes together, do a refactoing of how PyRepl to use
|
||||
// the new pyExec and in general clean up the unnecessary code.
|
||||
|
||||
import { ensureUniqueId, addClasses, removeClasses, getAttribute } from '../utils';
|
||||
import type { Runtime } from '../runtime';
|
||||
import { getLogger } from '../logger';
|
||||
import { pyExecDontHandleErrors } from '../pyexec';
|
||||
|
||||
const logger = getLogger('pyscript/base');
|
||||
|
||||
let Element;
|
||||
|
||||
export class BaseEvalElement extends HTMLElement {
|
||||
shadow: ShadowRoot;
|
||||
wrapper: HTMLElement;
|
||||
code: string;
|
||||
source: string;
|
||||
btnConfig: HTMLElement;
|
||||
btnRun: HTMLElement;
|
||||
outputElement: HTMLElement;
|
||||
errorElement: HTMLElement;
|
||||
theme: string;
|
||||
appendOutput: boolean;
|
||||
|
||||
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);
|
||||
this.setOutputMode("append");
|
||||
}
|
||||
|
||||
setOutputMode(defaultMode = "append") {
|
||||
const mode = getAttribute(this,'output-mode') || defaultMode;
|
||||
|
||||
switch (mode) {
|
||||
case "append":
|
||||
this.appendOutput = true;
|
||||
break;
|
||||
case "replace":
|
||||
this.appendOutput = false;
|
||||
break;
|
||||
default:
|
||||
logger.warn(`${this.id}: custom output-modes are currently not implemented`);
|
||||
}
|
||||
}
|
||||
|
||||
// subclasses should overwrite this method to define custom logic
|
||||
// before code gets evaluated
|
||||
preEvaluate(): void {
|
||||
return null;
|
||||
}
|
||||
|
||||
// subclasses should overwrite this method to define custom logic
|
||||
// after code has been evaluated
|
||||
postEvaluate(): void {
|
||||
return null;
|
||||
}
|
||||
|
||||
checkId() {
|
||||
ensureUniqueId(this);
|
||||
}
|
||||
|
||||
getSourceFromElement(): string {
|
||||
return '';
|
||||
}
|
||||
|
||||
async getSourceFromFile(s: string): Promise<string> {
|
||||
const response = await fetch(s);
|
||||
this.code = await response.text();
|
||||
return this.code;
|
||||
}
|
||||
|
||||
async evaluate(runtime: Runtime): Promise<void> {
|
||||
this.preEvaluate();
|
||||
|
||||
let source: string;
|
||||
try {
|
||||
source = this.source ? await this.getSourceFromFile(this.source)
|
||||
: this.getSourceFromElement();
|
||||
|
||||
// XXX we should use pyExec and let it display the errors
|
||||
await pyExecDontHandleErrors(runtime, source, this);
|
||||
|
||||
removeClasses(this.errorElement, ['py-error']);
|
||||
this.postEvaluate();
|
||||
} catch (err) {
|
||||
logger.error(err);
|
||||
try{
|
||||
if (Element === undefined) {
|
||||
Element = <Element>runtime.globals.get('Element');
|
||||
}
|
||||
const out = Element(this.errorElement.id);
|
||||
|
||||
addClasses(this.errorElement, ['py-error']);
|
||||
out.write.callKwargs(err.toString(), { append: this.appendOutput });
|
||||
if (this.errorElement.children.length === 0){
|
||||
this.errorElement.setAttribute('error', '');
|
||||
}else{
|
||||
this.errorElement.children[this.errorElement.children.length - 1].setAttribute('error', '');
|
||||
}
|
||||
|
||||
this.errorElement.hidden = false;
|
||||
this.errorElement.style.display = 'block';
|
||||
this.errorElement.style.visibility = 'visible';
|
||||
} catch (internalErr){
|
||||
logger.error("Unnable to write error to error element in page.")
|
||||
}
|
||||
|
||||
}
|
||||
} // end evaluate
|
||||
}
|
||||
@@ -5,161 +5,201 @@ import { Compartment, StateCommand } from '@codemirror/state';
|
||||
import { keymap } from '@codemirror/view';
|
||||
import { defaultKeymap } from '@codemirror/commands';
|
||||
import { oneDarkTheme } from '@codemirror/theme-one-dark';
|
||||
import { getAttribute, addClasses, htmlDecode } from '../utils';
|
||||
import { BaseEvalElement } from './base';
|
||||
|
||||
import { getAttribute, ensureUniqueId, htmlDecode } from '../utils';
|
||||
import type { Runtime } from '../runtime';
|
||||
import { pyExec, pyDisplay } from '../pyexec';
|
||||
import { getLogger } from '../logger';
|
||||
|
||||
const logger = getLogger('py-repl');
|
||||
|
||||
export function make_PyRepl(runtime: Runtime) {
|
||||
|
||||
function createCmdHandler(el: PyRepl): StateCommand {
|
||||
// Creates a codemirror cmd handler that calls the el.evaluate when an event
|
||||
// triggers that specific cmd
|
||||
return () => {
|
||||
void el.evaluate(runtime);
|
||||
return true;
|
||||
};
|
||||
}
|
||||
/* High level structure of py-repl DOM, and the corresponding JS names.
|
||||
|
||||
let initialTheme: string;
|
||||
function getEditorTheme(el: BaseEvalElement): string {
|
||||
const theme = getAttribute(el, 'theme');
|
||||
if( !initialTheme && theme){
|
||||
initialTheme = theme;
|
||||
}
|
||||
return initialTheme;
|
||||
}
|
||||
|
||||
class PyRepl extends BaseEvalElement {
|
||||
this <py-repl>
|
||||
shadow #shadow-root
|
||||
<slot></slot>
|
||||
boxDiv <div class='py-repl-box'>
|
||||
editorLabel <label>...</label>
|
||||
editorDiv <div class="py-repl-editor"></div>
|
||||
outDiv <div class="py-repl-output"></div>
|
||||
</div>
|
||||
</py-repl>
|
||||
*/
|
||||
class PyRepl extends HTMLElement {
|
||||
shadow: ShadowRoot;
|
||||
outDiv: HTMLElement;
|
||||
editor: EditorView;
|
||||
editorNode: HTMLElement;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
|
||||
// add an extra div where we can attach the codemirror editor
|
||||
this.editorNode = document.createElement('div');
|
||||
addClasses(this.editorNode, ['editor-box']);
|
||||
this.shadow.appendChild(this.wrapper);
|
||||
}
|
||||
|
||||
connectedCallback() {
|
||||
this.checkId();
|
||||
this.code = htmlDecode(this.innerHTML);
|
||||
this.innerHTML = '';
|
||||
const languageConf = new Compartment();
|
||||
ensureUniqueId(this);
|
||||
this.shadow = this.attachShadow({ mode: 'open' });
|
||||
const slot = document.createElement('slot');
|
||||
this.shadow.appendChild(slot);
|
||||
|
||||
if (!this.hasAttribute('exec-id')) {
|
||||
this.setAttribute('exec-id', '1');
|
||||
}
|
||||
if (!this.hasAttribute('root')) {
|
||||
this.setAttribute('root', this.id);
|
||||
}
|
||||
|
||||
const pySrc = htmlDecode(this.innerHTML).trim();
|
||||
this.innerHTML = '';
|
||||
this.editor = this.makeEditor(pySrc);
|
||||
const boxDiv = this.makeBoxDiv();
|
||||
this.appendChild(boxDiv);
|
||||
this.editor.focus();
|
||||
logger.debug(`element ${this.id} successfully connected`);
|
||||
}
|
||||
|
||||
/** Create and configure the codemirror editor
|
||||
*/
|
||||
makeEditor(pySrc: string): EditorView {
|
||||
const languageConf = new Compartment();
|
||||
const extensions = [
|
||||
indentUnit.of(" "),
|
||||
basicSetup,
|
||||
languageConf.of(python()),
|
||||
keymap.of([
|
||||
...defaultKeymap,
|
||||
{ key: 'Ctrl-Enter', run: createCmdHandler(this) },
|
||||
{ key: 'Shift-Enter', run: createCmdHandler(this) },
|
||||
{ key: 'Ctrl-Enter', run: this.execute.bind(this) },
|
||||
{ key: 'Shift-Enter', run: this.execute.bind(this) },
|
||||
]),
|
||||
];
|
||||
|
||||
if (getEditorTheme(this) === 'dark') {
|
||||
if (getAttribute(this, 'theme') === 'dark') {
|
||||
extensions.push(oneDarkTheme);
|
||||
}
|
||||
|
||||
this.editor = new EditorView({
|
||||
doc: this.code.trim(),
|
||||
return new EditorView({
|
||||
doc: pySrc,
|
||||
extensions,
|
||||
parent: this.editorNode,
|
||||
});
|
||||
}
|
||||
|
||||
const mainDiv = document.createElement('div');
|
||||
addClasses(mainDiv, ['py-repl-box']);
|
||||
// ******** main entry point for py-repl DOM building **********
|
||||
//
|
||||
// The following functions are written in a top-down, depth-first
|
||||
// order (so that the order of code roughly matches the order of
|
||||
// execution)
|
||||
makeBoxDiv(): HTMLElement {
|
||||
const boxDiv = document.createElement('div');
|
||||
boxDiv.className = 'py-repl-box';
|
||||
|
||||
const editorDiv = this.makeEditorDiv();
|
||||
const editorLabel = this.makeLabel('Python Script Area', editorDiv);
|
||||
this.outDiv = this.makeOutDiv();
|
||||
|
||||
boxDiv.append(editorLabel);
|
||||
boxDiv.appendChild(editorDiv);
|
||||
boxDiv.appendChild(this.outDiv);
|
||||
|
||||
return boxDiv;
|
||||
}
|
||||
|
||||
makeEditorDiv(): HTMLElement {
|
||||
const editorDiv = document.createElement('div');
|
||||
editorDiv.id = 'code-editor';
|
||||
editorDiv.className = 'py-repl-editor';
|
||||
editorDiv.appendChild(this.editor.dom);
|
||||
|
||||
const runButton = this.makeRunButton();
|
||||
const runLabel = this.makeLabel('Python Script Run Button', runButton);
|
||||
editorDiv.appendChild(runLabel);
|
||||
editorDiv.appendChild(runButton);
|
||||
|
||||
return editorDiv;
|
||||
}
|
||||
|
||||
makeLabel(text: string, elementFor: HTMLElement): HTMLElement {
|
||||
ensureUniqueId(elementFor);
|
||||
const lbl = document.createElement('label');
|
||||
lbl.innerHTML = text;
|
||||
lbl.htmlFor = elementFor.id;
|
||||
// XXX this should be a CSS class
|
||||
// Styles that we use to hide the labels whilst also keeping it accessible for screen readers
|
||||
const labelStyle = 'overflow:hidden; display:block; width:1px; height:1px';
|
||||
lbl.setAttribute('style', labelStyle);
|
||||
return lbl;
|
||||
}
|
||||
|
||||
// Code editor Label
|
||||
this.editorNode.id = 'code-editor';
|
||||
const editorLabel = document.createElement('label');
|
||||
editorLabel.innerHTML = 'Python Script Area';
|
||||
editorLabel.setAttribute('style', labelStyle);
|
||||
editorLabel.htmlFor = 'code-editor';
|
||||
|
||||
mainDiv.append(editorLabel);
|
||||
|
||||
// add Editor to main PyScript div
|
||||
mainDiv.appendChild(this.editorNode);
|
||||
|
||||
// Play Button
|
||||
this.btnRun = document.createElement('button');
|
||||
this.btnRun.id = 'btnRun';
|
||||
this.btnRun.innerHTML =
|
||||
makeRunButton(): HTMLElement {
|
||||
const runButton = document.createElement('button');
|
||||
runButton.id = 'runButton';
|
||||
runButton.className = 'absolute py-repl-run-button';
|
||||
// XXX I'm sure there is a better way to embed svn into typescript
|
||||
runButton.innerHTML =
|
||||
'<svg id="" style="height:20px;width:20px;vertical-align:-.125em;transform-origin:center;overflow:visible;color:green" viewBox="0 0 384 512" aria-hidden="true" role="img" xmlns="http://www.w3.org/2000/svg"><g transform="translate(192 256)" transform-origin="96 0"><g transform="translate(0,0) scale(1,1)"><path d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z" fill="currentColor" transform="translate(-192 -256)"></path></g></g></svg>';
|
||||
addClasses(this.btnRun, ['absolute', 'repl-play-button']);
|
||||
runButton.addEventListener('click', this.execute.bind(this));
|
||||
return runButton;
|
||||
}
|
||||
|
||||
// Play Button Label
|
||||
const btnLabel = document.createElement('label');
|
||||
btnLabel.innerHTML = 'Python Script Run Button';
|
||||
btnLabel.setAttribute('style', labelStyle);
|
||||
btnLabel.htmlFor = 'btnRun';
|
||||
makeOutDiv(): HTMLElement {
|
||||
const outDiv = document.createElement('div');
|
||||
outDiv.className = 'py-repl-output';
|
||||
outDiv.id = this.id + '-' + this.getAttribute('exec-id');
|
||||
return outDiv;
|
||||
}
|
||||
|
||||
this.editorNode.appendChild(btnLabel);
|
||||
this.editorNode.appendChild(this.btnRun);
|
||||
// ********************* execution logic *********************
|
||||
|
||||
this.btnRun.addEventListener('click', () => {
|
||||
void this.evaluate(runtime);
|
||||
});
|
||||
/** Execute the python code written in the editor, and automatically
|
||||
* display() the last evaluated expression
|
||||
*/
|
||||
async execute(): Promise<void> {
|
||||
const pySrc = this.getPySrc();
|
||||
|
||||
if (!this.id) {
|
||||
logger.warn(
|
||||
"WARNING: <py-repl> defined without an id. <py-repl> should always have an id, otherwise multiple <py-repl> in the same page will not work!"
|
||||
);
|
||||
// determine the output element
|
||||
const outEl = this.getOutputElement();
|
||||
if (outEl === undefined) {
|
||||
// this happens if we specified output="..." but we couldn't
|
||||
// find the ID. We already displayed an error message inside
|
||||
// getOutputElement, stop the execution.
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.hasAttribute('exec-id')) {
|
||||
this.setAttribute('exec-id', '1');
|
||||
}
|
||||
// clear the old output before executing the new code
|
||||
outEl.innerHTML = '';
|
||||
|
||||
if (!this.hasAttribute('root')) {
|
||||
this.setAttribute('root', this.id);
|
||||
}
|
||||
// execute the python code
|
||||
const pyResult = await pyExec(runtime, pySrc, outEl);
|
||||
|
||||
const output = getAttribute(this, "output")
|
||||
if (output) {
|
||||
const el = document.getElementById(output);
|
||||
if(el){
|
||||
this.errorElement = el;
|
||||
this.outputElement = el
|
||||
// display the value of the last evaluated expression (REPL-style)
|
||||
if (pyResult !== undefined) {
|
||||
pyDisplay(runtime, pyResult, { target: outEl.id });
|
||||
}
|
||||
}
|
||||
|
||||
getPySrc(): string {
|
||||
return this.editor.state.doc.toString();
|
||||
}
|
||||
|
||||
getOutputElement(): HTMLElement {
|
||||
const outputID = getAttribute(this, "output");
|
||||
if (outputID !== null) {
|
||||
const el = document.getElementById(outputID);
|
||||
if (el === null) {
|
||||
const err = `py-repl ERROR: cannot find the output element #${outputID} in the DOM`
|
||||
this.outDiv.innerText = err;
|
||||
return undefined;
|
||||
}
|
||||
} else {
|
||||
// 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);
|
||||
|
||||
this.errorElement = this.outputElement;
|
||||
return el;
|
||||
}
|
||||
|
||||
this.appendChild(mainDiv);
|
||||
this.editor.focus();
|
||||
logger.debug(`element ${this.id} successfully connected`);
|
||||
}
|
||||
|
||||
preEvaluate(): void {
|
||||
this.setOutputMode("replace");
|
||||
if(!this.appendOutput) {
|
||||
this.outputElement.innerHTML = '';
|
||||
else {
|
||||
return this.outDiv;
|
||||
}
|
||||
}
|
||||
|
||||
postEvaluate(): void {
|
||||
this.outputElement.hidden = false;
|
||||
this.outputElement.style.display = 'block';
|
||||
|
||||
// XXX the autogenerate logic is very messy. We should redo it, and it
|
||||
// should be the default.
|
||||
autogenerateMaybe(): void {
|
||||
if (this.hasAttribute('auto-generate')) {
|
||||
const allPyRepls = document.querySelectorAll(`py-repl[root='${this.getAttribute('root')}'][exec-id]`);
|
||||
const lastRepl = allPyRepls[allPyRepls.length - 1];
|
||||
@@ -196,9 +236,6 @@ export function make_PyRepl(runtime: Runtime) {
|
||||
}
|
||||
}
|
||||
|
||||
getSourceFromElement(): string {
|
||||
return this.editor.state.doc.toString();
|
||||
}
|
||||
}
|
||||
|
||||
return PyRepl
|
||||
|
||||
@@ -12,7 +12,7 @@ export async function pyExec(runtime: Runtime, pysrc: string, outElem: HTMLEleme
|
||||
set_current_display_target(outElem.id);
|
||||
try {
|
||||
try {
|
||||
await runtime.run(pysrc);
|
||||
return await runtime.run(pysrc);
|
||||
}
|
||||
catch (err) {
|
||||
// XXX: currently we display exceptions in the same position as
|
||||
@@ -27,6 +27,21 @@ export async function pyExec(runtime: Runtime, pysrc: string, outElem: HTMLEleme
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Javascript API to call the python display() function
|
||||
*
|
||||
* Expected usage:
|
||||
* pyDisplay(runtime, obj);
|
||||
* pyDisplay(runtime, obj, { target: targetID });
|
||||
*/
|
||||
export function pyDisplay(runtime: Runtime, obj: any, kwargs: object) {
|
||||
const display = runtime.globals.get('display');
|
||||
if (kwargs === undefined)
|
||||
display(obj);
|
||||
else {
|
||||
display.callKwargs(obj, kwargs);
|
||||
}
|
||||
}
|
||||
|
||||
function displayPyException(err: any, errElem: HTMLElement) {
|
||||
//addClasses(errElem, ['py-error'])
|
||||
@@ -47,19 +62,3 @@ function displayPyException(err: any, errElem: HTMLElement) {
|
||||
}
|
||||
errElem.appendChild(pre);
|
||||
}
|
||||
|
||||
|
||||
// XXX this is used by base.ts but should be removed once we complete the refactoring
|
||||
export async function pyExecDontHandleErrors(runtime: Runtime, pysrc: string, out: HTMLElement)
|
||||
{
|
||||
// this is the python function defined in pyscript.py
|
||||
const set_current_display_target = runtime.globals.get('set_current_display_target');
|
||||
ensureUniqueId(out);
|
||||
set_current_display_target(out.id);
|
||||
try {
|
||||
await runtime.run(pysrc);
|
||||
}
|
||||
finally {
|
||||
set_current_display_target(undefined);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -131,7 +131,7 @@ color: #0f172a;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.editor-box {
|
||||
.py-repl-editor {
|
||||
--tw-border-opacity: 1;
|
||||
border-color: rgba(209, 213, 219, var(--tw-border-opacity));
|
||||
border-width: 1px;
|
||||
@@ -158,7 +158,7 @@ color: #0f172a;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.repl-play-button {
|
||||
.py-repl-run-button {
|
||||
opacity: 0;
|
||||
bottom: 0.25rem;
|
||||
right: 0.25rem;
|
||||
@@ -192,7 +192,7 @@ color: #0f172a;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.repl-play-button:hover {
|
||||
.py-repl-run-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user