jprdonnelly/pyscript
1
0
Fork 0
mirror of https://github.com/pyscript/pyscript.git synced 2025-12-20 02:37:41 -05:00
Code Issues Projects Releases Wiki Activity

Refactor how py-script are executed, kill scriptQueue store, introduce pyExec (#881)

Browse Source 
Yet another refactoring to untangle the old mess.
Highlights:

base.ts, pyscript.ts and pyrepl.ts were a tangled mess of code, in which each of them interacted with the others in non-obvious ways. Now PyScript is no longer a subclass of BaseEvalElement and it is much simpler. I removed code for handling the attributes std-out and std-err because they are no longer needed with the new display() logic.

The logic for executing python code is now in pyexec.ts: so we are decoupling the process of "finding" the python code (handled by the py-script web component) and the logic to actually execute it. This has many advantages, including the fact that it will be more easily usable by other components (e.g. pyrepl). Also, note that it's called pyexec and not pyeval: in the vast majority of cases in Python you have statements to execute, and almost never expressions to evaluate.

I killed the last remaining global store, scriptQueue tada. As a bonus effect, now we automatically do the correct thing when a <py-script> tag is dynamically added to the DOM (I added a test for it). I did not remove svelte from packages.json, because I don't fully understand the implications: there are various options which mention svelte in rollup.js and tsconfig.json, so it's probably better to kill it in its own PR.

pyexec.ts is also responsible of handling the default target for display() and correct handling/visualization of exceptions. I fixed/improved/added display/output tests in the process.
I also found a problem though, see issue #878, so I improved the test and marked it as xfail.

I removed BaseEvalElement as the superclass of most components. Now the only class which inherits from it is PyRepl. In a follow-up PR, I plan to merge them into a single class and do more cleanup.

During the refactoring, I killed guidGenerator: now instead of generating random py-* IDs which are very hard to read for humans, we generated py-internal-X IDs, where X is 0, 1, 2, 3, etc. This makes writing tests and debugging much easier.

I improved a lot our test machinery: it turns out that PR #829 broke the ability to use/view sourcemaps inside the playwright browser (at least on my machine).
For some reason chromium is unable to find sourcemaps if you use playwrights internal routing. So I reintroduced the http_server fixture which was removed by that PR, and added a pytest option --no-fake-server to use it instead, useful for debugging. By default we are still using the fakeserver though (which is faster and parallelizable).

Similarly, I added --dev which implies --headed and also automatically open chrome dev tools.
This commit is contained in:
Antonio Cuni
2022-10-23 23:31:50 +02:00
committed by GitHub
parent d9b8b48972
commit f9194cc833
23 changed files with 379 additions and 389 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,117 +1,37 @@
import {
addToScriptsQueue,
} from '../stores';
import { getAttribute, addClasses, htmlDecode } from '../utils';
import { BaseEvalElement } from './base';
import { htmlDecode, ensureUniqueId } from '../utils';
import type { Runtime } from '../runtime';
import { getLogger } from '../logger';
import { pyExec } from '../pyexec';
const logger = getLogger('py-script');
export class PyScript extends BaseEvalElement {
constructor() {
super();
export function make_PyScript(runtime: Runtime) {
// add an extra div where we can attach the codemirror editor
this.shadow.appendChild(this.wrapper);
}
class PyScript extends HTMLElement {
connectedCallback() {
this.checkId();
this.code = htmlDecode(this.innerHTML);
this.innerHTML = '';
const mainDiv = document.createElement('div');
addClasses(mainDiv, ['output']);
// add Editor to main PyScript div
const output = getAttribute( this, "output");
if (output) {
const el = document.getElementById(output);
if( el ){
this.errorElement = el;
this.outputElement = el;
}
// 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 {
const stdOut = getAttribute( this, "std-out");
if (stdOut) {
const el = document.getElementById( stdOut );
if( el){
this.outputElement = el
}
} else {
// In this case neither output or std-out have been provided so we need
// to create a new output div to output to
// Let's check if we have an id first and create one if not
this.outputElement = document.createElement('div');
const exec_id = this.getAttribute('exec-id');
this.outputElement.id = this.id + (exec_id ? '-' + exec_id : '');
// add the output div id if there's not output pre-defined
mainDiv.appendChild(this.outputElement);
}
const stdErr = getAttribute( this, "std-err");
if ( stdErr ) {
const el = document.getElementById( stdErr );
if( el ){
this.errorElement = el;
}else{
this.errorElement = this.outputElement;
}
} else {
this.errorElement = this.outputElement;
}
async connectedCallback() {
ensureUniqueId(this);
const pySrc = await this.getPySrc();
this.innerHTML = '';
await pyExec(runtime, pySrc, this);
}
this.appendChild(mainDiv);
addToScriptsQueue(this);
if (this.hasAttribute('src')) {
this.source = this.getAttribute('src');
}
}
protected async _register_esm(runtime: Runtime): Promise<void> {
for (const node of document.querySelectorAll("script[type='importmap']")) {
const importmap = (() => {
try {
return JSON.parse(node.textContent);
} catch {
return null;
}
})();
if (importmap?.imports == null) continue;
for (const [name, url] of Object.entries(importmap.imports)) {
if (typeof name != 'string' || typeof url != 'string') continue;
let exports: object;
try {
// XXX: pyodide doesn't like Module(), failing with
// "can't read 'name' of undefined" at import time
exports = { ...(await import(url)) };
} catch {
logger.warn(`failed to fetch '${url}' for '${name}'`);
continue;
}
runtime.registerJsModule(name, exports);
async getPySrc(): Promise<string> {
if (this.hasAttribute('src')) {
// XXX: what happens if the fetch() fails?
// We should handle the case correctly, but in my defense
// this case was broken also before the refactoring. FIXME!
const url = this.getAttribute('src');
const response = await fetch(url);
return await response.text();
}
else {
return htmlDecode(this.innerHTML);
}
}
}
getSourceFromElement(): string {
return htmlDecode(this.code);
}
return PyScript;
}
/** Defines all possible py-on* and their corresponding event types */