Skip to content

Commit 4065c13

Browse files
fpligerfpliger
committed
general cleanup before merging
1 parent 71873b6 commit 4065c13

File tree

5 files changed

+54
-85
lines changed

5 files changed

+54
-85
lines changed

‎pyscriptjs/examples/pylist.py

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,12 @@ class PyList(PyListTemplate):
1111
item_class = PyItem
1212

1313
def add_task(*ags, **kws):
14+
# create a new dictionary representing the new task
1415
task = { "content": new_task_content.value, "done": False, "created_at": dt.now() }
16+
17+
# add a new task to the list and tell it to use the `content` key to show in the UI
18+
# and to use the key `done` to sync the task status with a checkbox element in the UI
1519
myList.add(task, labels=['content'], state_key="done")
20+
21+
# clear the inputbox element used to create the new task
1622
new_task_content.clear()

‎pyscriptjs/src/components/base.ts

Lines changed: 2 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -157,11 +157,7 @@ export class BaseEvalElement extends HTMLElement {
157157

158158
try{
159159
output = await pyodide.runPythonAsync(source);
160-
161-
if (output !== undefined){
162-
console.log(output);
163-
}
164-
160+
if (output !== undefined){ console.log(output); }
165161
} catch (err) {
166162
console.log(err);
167163
}
@@ -170,7 +166,6 @@ export class BaseEvalElement extends HTMLElement {
170166

171167
function createWidget(name: string, code: string, klass: string){
172168

173-
174169
class CustomWidget extends HTMLElement{
175170
shadow: ShadowRoot;
176171
wrapper: HTMLElement;
@@ -208,10 +203,7 @@ export class BaseEvalElement extends HTMLElement {
208203

209204
async registerWidget(){
210205
let pyodide = await pyodideReadyPromise;
211-
212206
console.log('new widget registered:', this.name);
213-
214-
215207
pyodide.globals.set(this.id, this.proxy);
216208
}
217209

@@ -224,7 +216,6 @@ export class BaseEvalElement extends HTMLElement {
224216
if (output !== undefined){
225217
console.log(output);
226218
}
227-
228219
} catch (err) {
229220
console.log(err);
230221
}
@@ -266,7 +257,6 @@ export class BaseEvalElement extends HTMLElement {
266257
}
267258
}
268259

269-
270260
connectedCallback() {
271261
if (this.id === undefined){
272262
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 {
280270
this.getSourceFromFile(this.source).then((code:string) => {
281271
this.code = code;
282272
createWidget(this.name, code, this.klass);
283-
284273
});
285-
286-
console.log('py-template connected');
287274
}
288275

289276
initOutErr(): void {
@@ -304,9 +291,6 @@ export class BaseEvalElement extends HTMLElement {
304291
this.outputElement.classList.add("output");
305292
this.outputElement.hidden = true;
306293
this.outputElement.id = this.id + "-" + this.getAttribute("exec-id");
307-
308-
// add the output div id if there's not output pre-defined
309-
//mainDiv.appendChild(this.outputElement);
310294
}
311295

312296
if (this.hasAttribute('std-err')){
@@ -321,22 +305,18 @@ export class BaseEvalElement extends HTMLElement {
321305
let pyodide = await pyodideReadyPromise;
322306
let response = await fetch(s);
323307
return await response.text();
324-
}
308+
}
325309

326310
async eval(source: string): Promise<void> {
327311
let output;
328312
let pyodide = await pyodideReadyPromise;
329313
try{
330314
output = await pyodide.runPythonAsync(source);
331-
332315
if (output !== undefined){
333316
console.log(output);
334317
}
335-
336318
} catch (err) {
337319
console.log(err);
338320
}
339321
}
340-
341-
342322
}

‎pyscriptjs/src/components/pybutton.ts

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,11 @@ export class PyButton extends BaseEvalElement {
1111
constructor() {
1212
super();
1313

14-
// attach shadow so we can preserve the element original innerHtml content
15-
// this.shadow = this.attachShadow({ mode: 'open'});
16-
17-
// this.wrapper = document.createElement('slot');
18-
// this.shadow.appendChild(this.wrapper);
1914
if (this.hasAttribute('label')) {
2015
this.label = this.getAttribute('label');
2116
}
2217
}
2318

24-
2519
connectedCallback() {
2620
this.code = htmlDecode(this.innerHTML);
2721
this.mount_name = this.id.split("-").join("_");
@@ -60,5 +54,3 @@ export class PyButton extends BaseEvalElement {
6054
console.log('py-button connected');
6155
}
6256
}
63-
64-

‎pyscriptjs/src/components/pyinputbox.ts

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -9,32 +9,26 @@ export class PyInputBox extends BaseEvalElement {
99
label: string;
1010
mount_name: string;
1111
constructor() {
12-
super();
13-
14-
// attach shadow so we can preserve the element original innerHtml content
15-
// this.shadow = this.attachShadow({ mode: 'open'});
16-
17-
// this.wrapper = document.createElement('slot');
18-
// this.shadow.appendChild(this.wrapper);
19-
if (this.hasAttribute('label')) {
20-
this.label = this.getAttribute('label');
21-
}
22-
}
12+
super();
2313

14+
if (this.hasAttribute('label')) {
15+
this.label = this.getAttribute('label');
16+
}
17+
}
2418

25-
connectedCallback() {
26-
this.code = htmlDecode(this.innerHTML);
27-
this.mount_name = this.id.split("-").join("_");
28-
this.innerHTML = '';
29-
30-
let mainDiv = document.createElement('input');
31-
mainDiv.type = "text";
32-
addClasses(mainDiv, ["border", "flex-1", "w-full", "mr-3", "border-gray-300", "p-2", "rounded"]);
33-
34-
mainDiv.id = this.id;
35-
this.id = `${this.id}-container`;
36-
this.appendChild(mainDiv);
19+
connectedCallback() {
20+
this.code = htmlDecode(this.innerHTML);
21+
this.mount_name = this.id.split("-").join("_");
22+
this.innerHTML = '';
3723

24+
let mainDiv = document.createElement('input');
25+
mainDiv.type = "text";
26+
addClasses(mainDiv, ["border", "flex-1", "w-full", "mr-3", "border-gray-300", "p-2", "rounded"]);
27+
28+
mainDiv.id = this.id;
29+
this.id = `${this.id}-container`;
30+
this.appendChild(mainDiv);
31+
3832
// now that we appended and the element is attached, lets connect with the event handlers
3933
// defined for this widget
4034
this.appendChild(mainDiv);
@@ -45,16 +39,16 @@ export class PyInputBox extends BaseEvalElement {
4539
registrationCode += `\n${this.mount_name}.element.onkeypress = on_keypress_${this.mount_name}`
4640
}
4741

42+
// TODO: For now we delay execution to allow pyodide to load but in the future this
43+
// should really wait for it to load..
4844
setTimeout(() => {
4945
this.eval(this.code).then(() => {
5046
this.eval(registrationCode).then(() => {
5147
console.log('registered handlers');
5248
});
5349
});
54-
}, 4000);
55-
56-
console.log('py-inputbox connected');
57-
}
50+
}, 4000);
51+
}
5852
}
5953

6054

‎pyscriptjs/src/components/pytitle.ts

Lines changed: 25 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,33 @@ import { BaseEvalElement } from './base';
22
import { addClasses, ltrim, htmlDecode } from '../utils';
33

44
export class PyTitle extends BaseEvalElement {
5-
shadow: ShadowRoot;
6-
wrapper: HTMLElement;
7-
theme: string;
8-
widths: Array<string>;
9-
label: string;
10-
mount_name: string;
11-
constructor() {
12-
super();
13-
}
5+
shadow: ShadowRoot;
6+
wrapper: HTMLElement;
7+
theme: string;
8+
widths: Array<string>;
9+
label: string;
10+
mount_name: string;
11+
constructor() {
12+
super();
13+
}
1414

15+
connectedCallback() {
16+
this.label = htmlDecode(this.innerHTML);
17+
this.mount_name = this.id.split("-").join("_");
18+
this.innerHTML = '';
1519

16-
connectedCallback() {
17-
this.label = htmlDecode(this.innerHTML);
18-
this.mount_name = this.id.split("-").join("_");
19-
this.innerHTML = '';
20-
21-
let mainDiv = document.createElement('div');
22-
let divContent = document.createElement('h1')
23-
24-
addClasses(mainDiv, ["text-center", "w-full", "mb-8"]);
25-
addClasses(divContent, ["text-3xl", "font-bold", "text-gray-800", "uppercase", "tracking-tight"]);
26-
divContent.innerHTML = this.label;
27-
28-
mainDiv.id = this.id;
29-
this.id = `${this.id}-container`;
30-
mainDiv.appendChild(divContent);
31-
this.appendChild(mainDiv);
32-
33-
console.log('py-title connected');
34-
}
20+
let mainDiv = document.createElement('div');
21+
let divContent = document.createElement('h1')
22+
23+
addClasses(mainDiv, ["text-center", "w-full", "mb-8"]);
24+
addClasses(divContent, ["text-3xl", "font-bold", "text-gray-800", "uppercase", "tracking-tight"]);
25+
divContent.innerHTML = this.label;
26+
27+
mainDiv.id = this.id;
28+
this.id = `${this.id}-container`;
29+
mainDiv.appendChild(divContent);
30+
this.appendChild(mainDiv);
3531
}
32+
}
3633

3734

0 commit comments

Comments
 (0)