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

general cleanup before merging

Browse Source
This commit is contained in:
Fabio Pliger
2022-04-20 20:27:13 -05:00
parent 71873b6b50
commit 4065c13d32
5 changed files with 55 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pyscriptjs/examples/pylist.py
View File

@@ -11,6 +11,12 @@ class PyList(PyListTemplate):
item_class = PyItem item_class = PyItem
def add_task(*ags, **kws): def add_task(*ags, **kws):
# create a new dictionary representing the new task
task = { "content": new_task_content.value, "done": False, "created_at": dt.now() } task = { "content": new_task_content.value, "done": False, "created_at": dt.now() }
# add a new task to the list and tell it to use the `content` key to show in the UI
# and to use the key `done` to sync the task status with a checkbox element in the UI
myList.add(task, labels=['content'], state_key="done") myList.add(task, labels=['content'], state_key="done")
# clear the inputbox element used to create the new task
new_task_content.clear() new_task_content.clear()

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

@@ -157,11 +157,7 @@ export class BaseEvalElement extends HTMLElement {
try{ try{
output = await pyodide.runPythonAsync(source); output = await pyodide.runPythonAsync(source);
if (output !== undefined){ console.log(output); }
if (output !== undefined){
console.log(output);
}
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
@@ -170,7 +166,6 @@ export class BaseEvalElement extends HTMLElement {
function createWidget(name: string, code: string, klass: string){ function createWidget(name: string, code: string, klass: string){
class CustomWidget extends HTMLElement{ class CustomWidget extends HTMLElement{
shadow: ShadowRoot; shadow: ShadowRoot;
wrapper: HTMLElement; wrapper: HTMLElement;
@@ -208,10 +203,7 @@ export class BaseEvalElement extends HTMLElement {
async registerWidget(){ async registerWidget(){
let pyodide = await pyodideReadyPromise; let pyodide = await pyodideReadyPromise;
console.log('new widget registered:', this.name); console.log('new widget registered:', this.name);
pyodide.globals.set(this.id, this.proxy); pyodide.globals.set(this.id, this.proxy);
} }
@@ -224,7 +216,6 @@ export class BaseEvalElement extends HTMLElement {
if (output !== undefined){ if (output !== undefined){
console.log(output); console.log(output);
} }
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
@@ -266,7 +257,6 @@ export class BaseEvalElement extends HTMLElement {
} }
} }
connectedCallback() { connectedCallback() {
if (this.id === undefined){ 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.`) throw new ReferenceError(`No id specified for component. Components must have an explicit id. Please use id="" to specify your component id.`)
@@ -280,10 +270,7 @@ export class BaseEvalElement extends HTMLElement {
this.getSourceFromFile(this.source).then((code:string) => { this.getSourceFromFile(this.source).then((code:string) => {
this.code = code; this.code = code;
createWidget(this.name, code, this.klass); createWidget(this.name, code, this.klass);
}); });
console.log('py-template connected');
} }
initOutErr(): void { initOutErr(): void {
@@ -304,9 +291,6 @@ export class BaseEvalElement extends HTMLElement {
this.outputElement.classList.add("output"); this.outputElement.classList.add("output");
this.outputElement.hidden = true; this.outputElement.hidden = true;
this.outputElement.id = this.id + "-" + this.getAttribute("exec-id"); 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')){ if (this.hasAttribute('std-err')){
@@ -321,22 +305,18 @@ export class BaseEvalElement extends HTMLElement {
let pyodide = await pyodideReadyPromise; let pyodide = await pyodideReadyPromise;
let response = await fetch(s); let response = await fetch(s);
return await response.text(); return await response.text();
} }
async eval(source: string): Promise<void> { async eval(source: string): Promise<void> {
let output; let output;
let pyodide = await pyodideReadyPromise; let pyodide = await pyodideReadyPromise;
try{ try{
output = await pyodide.runPythonAsync(source); output = await pyodide.runPythonAsync(source);
if (output !== undefined){ if (output !== undefined){
console.log(output); console.log(output);
} }
} catch (err) { } catch (err) {
console.log(err); console.log(err);
} }
} }
} }

8
pyscriptjs/src/components/pybutton.ts
View File

@@ -11,17 +11,11 @@ export class PyButton extends BaseEvalElement {
constructor() { constructor() {
super(); 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);
if (this.hasAttribute('label')) { if (this.hasAttribute('label')) {
this.label = this.getAttribute('label'); this.label = this.getAttribute('label');
} }
} }
connectedCallback() { connectedCallback() {
this.code = htmlDecode(this.innerHTML); this.code = htmlDecode(this.innerHTML);
this.mount_name = this.id.split("-").join("_"); this.mount_name = this.id.split("-").join("_");
@@ -60,5 +54,3 @@ export class PyButton extends BaseEvalElement {
console.log('py-button connected'); console.log('py-button connected');
} }
} }

48
pyscriptjs/src/components/pyinputbox.ts
View File

@@ -9,32 +9,26 @@ export class PyInputBox extends BaseEvalElement {
label: string; label: string;
mount_name: string; mount_name: string;
constructor() { constructor() {
super(); super();
// attach shadow so we can preserve the element original innerHtml content if (this.hasAttribute('label')) {
// this.shadow = this.attachShadow({ mode: 'open'}); this.label = this.getAttribute('label');
// this.wrapper = document.createElement('slot');
// this.shadow.appendChild(this.wrapper);
if (this.hasAttribute('label')) {
this.label = this.getAttribute('label');
}
} }
}
connectedCallback() {
connectedCallback() { this.code = htmlDecode(this.innerHTML);
this.code = htmlDecode(this.innerHTML); this.mount_name = this.id.split("-").join("_");
this.mount_name = this.id.split("-").join("_"); this.innerHTML = '';
this.innerHTML = '';
let mainDiv = document.createElement('input');
mainDiv.type = "text";
addClasses(mainDiv, ["border", "flex-1", "w-full", "mr-3", "border-gray-300", "p-2", "rounded"]);
mainDiv.id = this.id;
this.id = `${this.id}-container`;
this.appendChild(mainDiv);
let mainDiv = document.createElement('input');
mainDiv.type = "text";
addClasses(mainDiv, ["border", "flex-1", "w-full", "mr-3", "border-gray-300", "p-2", "rounded"]);
mainDiv.id = this.id;
this.id = `${this.id}-container`;
this.appendChild(mainDiv);
// now that we appended and the element is attached, lets connect with the event handlers // now that we appended and the element is attached, lets connect with the event handlers
// defined for this widget // defined for this widget
this.appendChild(mainDiv); this.appendChild(mainDiv);
@@ -45,16 +39,16 @@ export class PyInputBox extends BaseEvalElement {
registrationCode += `\n${this.mount_name}.element.onkeypress = on_keypress_${this.mount_name}` registrationCode += `\n${this.mount_name}.element.onkeypress = on_keypress_${this.mount_name}`
} }
// TODO: For now we delay execution to allow pyodide to load but in the future this
// should really wait for it to load..
setTimeout(() => { setTimeout(() => {
this.eval(this.code).then(() => { this.eval(this.code).then(() => {
this.eval(registrationCode).then(() => { this.eval(registrationCode).then(() => {
console.log('registered handlers'); console.log('registered handlers');
}); });
}); });
}, 4000); }, 4000);
}
console.log('py-inputbox connected');
}
} }

55
pyscriptjs/src/components/pytitle.ts
View File

@@ -2,36 +2,33 @@ import { BaseEvalElement } from './base';
import { addClasses, ltrim, htmlDecode } from '../utils'; import { addClasses, ltrim, htmlDecode } from '../utils';
export class PyTitle extends BaseEvalElement { export class PyTitle extends BaseEvalElement {
shadow: ShadowRoot; shadow: ShadowRoot;
wrapper: HTMLElement; wrapper: HTMLElement;
theme: string; theme: string;
widths: Array<string>; widths: Array<string>;
label: string; label: string;
mount_name: string; mount_name: string;
constructor() { constructor() {
super(); super();
}
connectedCallback() {
this.label = htmlDecode(this.innerHTML);
this.mount_name = this.id.split("-").join("_");
this.innerHTML = '';
let mainDiv = document.createElement('div');
let divContent = document.createElement('h1')
addClasses(mainDiv, ["text-center", "w-full", "mb-8"]);
addClasses(divContent, ["text-3xl", "font-bold", "text-gray-800", "uppercase", "tracking-tight"]);
divContent.innerHTML = this.label;
mainDiv.id = this.id;
this.id = `${this.id}-container`;
mainDiv.appendChild(divContent);
this.appendChild(mainDiv);
console.log('py-title connected');
} }
connectedCallback() {
this.label = htmlDecode(this.innerHTML);
this.mount_name = this.id.split("-").join("_");
this.innerHTML = '';
let mainDiv = document.createElement('div');
let divContent = document.createElement('h1')
addClasses(mainDiv, ["text-center", "w-full", "mb-8"]);
addClasses(divContent, ["text-3xl", "font-bold", "text-gray-800", "uppercase", "tracking-tight"]);
divContent.innerHTML = this.label;
mainDiv.id = this.id;
this.id = `${this.id}-container`;
mainDiv.appendChild(divContent);
this.appendChild(mainDiv);
} }
}