remove PyWidget and py-register-widget + refactor PyList as a Python Plugin (#1452)

* remove PyWidget and py-register-widget

* refactor py-list as Plugin

* add newline

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* fix eslint

* handle case if src not supplied

* move inside if

* - Remove src attribute for py-list
- Re-implement as a Python plugin
- Remove pylist.py from examples directory
- Remove PyListPlugin as one of the default ones

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* move PyItem and PyList classes to the plugin

* clean up PyListTemplate and PyItemTemplate from pyscript module

* fix linting

* use PyList instead of PyListTemplate instead

* fix example for todo-pylist

* re-enable and improve test

* move py-list plugin to examples

* fix py-list plugin link

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
This commit is contained in:
Madhur Tandon
2023-05-10 20:17:07 +05:30
committed by GitHub
parent d3bcd87cfa
commit b247864414
10 changed files with 198 additions and 280 deletions

View File

@@ -1,14 +1,11 @@
import { InterpreterClient } from '../interpreter_client';
import type { PyScriptApp } from '../main';
import { make_PyRepl } from './pyrepl';
import { make_PyWidget } from './pywidget';
function createCustomElements(interpreter: InterpreterClient, app: PyScriptApp) {
const PyWidget = make_PyWidget(interpreter);
const PyRepl = make_PyRepl(interpreter, app);
customElements.define('py-repl', PyRepl);
customElements.define('py-register-widget', PyWidget);
}
export { createCustomElements };

View File

@@ -1,93 +0,0 @@
import type { PyProxy, PyProxyCallable } from 'pyodide';
import { getLogger } from '../logger';
import { robustFetch } from '../fetch';
import { InterpreterClient } from '../interpreter_client';
import type { Remote } from 'synclink';
const logger = getLogger('py-register-widget');
function createWidget(interpreter: InterpreterClient, name: string, code: string, klass: string) {
class CustomWidget extends HTMLElement {
wrapper: HTMLElement;
name: string = name;
klass: string = klass;
code: string = code;
proxy: Remote<PyProxy & { connect(): void }>;
proxyClass: Remote<PyProxyCallable>;
constructor() {
super();
this.wrapper = document.createElement('slot');
this.attachShadow({ mode: 'open' }).appendChild(this.wrapper);
}
async connectedCallback() {
await interpreter.runButDontRaise(this.code);
this.proxyClass = (await interpreter.globals.get(this.klass)) as Remote<PyProxyCallable>;
this.proxy = (await this.proxyClass(this)) as Remote<PyProxy & { connect(): void }>;
await this.proxy.connect();
await this.registerWidget();
}
async registerWidget() {
logger.info('new widget registered:', this.name);
await interpreter.globals.set(this.id, this.proxy);
}
}
customElements.define(name, CustomWidget);
}
export function make_PyWidget(interpreter: InterpreterClient) {
class PyWidget extends HTMLElement {
name: string;
klass: string;
outputElement: HTMLElement;
errorElement: HTMLElement;
wrapper: HTMLElement;
theme: string;
source: string;
code: string;
constructor() {
super();
this.wrapper = document.createElement('slot');
this.attachShadow({ mode: 'open' }).appendChild(this.wrapper);
this.addAttributes('src', 'name', 'klass');
}
addAttributes(...attrs: string[]) {
for (const each of attrs) {
const property = each === 'src' ? 'source' : each;
if (this.hasAttribute(each)) {
this[property] = this.getAttribute(each);
}
}
}
async connectedCallback() {
if (this.id === undefined) {
throw new ReferenceError(
`No id specified for component. Components must have an explicit id. Please use id="" to specify your component id.`,
);
}
const mainDiv = document.createElement('div');
mainDiv.id = this.id + '-main';
this.appendChild(mainDiv);
logger.debug('PyWidget: reading source', this.source);
this.code = await this.getSourceFromFile(this.source);
createWidget(interpreter, this.name, this.code, this.klass);
}
async getSourceFromFile(s: string): Promise<string> {
const response = await robustFetch(s);
return await response.text();
}
}
return PyWidget;
}