Skip to content

Commit 75a57a4

Browse files
WebReflectionWebReflection
authored
[next] Porting most basic examples (#1631)
1 parent 8a1db28 commit 75a57a4

38 files changed

+451
-70
lines changed

‎examples/altair.html

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,15 @@
88
href="https://pyscript.net/latest/pyscript.css"
99
/>
1010
<link rel="stylesheet" href="./assets/css/examples.css" />
11-
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
11+
<style>
12+
py-script {
13+
display: none;
14+
}
15+
</style>
16+
<script
17+
type="module"
18+
src="https://esm.sh/@pyscript/core@latest/core.js"
19+
></script>
1220
</head>
1321
<body>
1422
<nav class="navbar" style="background-color: #000000">
@@ -33,6 +41,7 @@
3341
]
3442
</py-config>
3543
<py-script>
44+
from pyscript import display
3645
import altair as alt
3746
from vega_datasets import data
3847

‎examples/bokeh.html

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,16 @@
3232
href="https://pyscript.net/latest/pyscript.css"
3333
/>
3434

35-
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
3635
<link rel="stylesheet" href="./assets/css/examples.css" />
36+
<style>
37+
py-script {
38+
display: none;
39+
}
40+
</style>
41+
<script
42+
type="module"
43+
src="https://esm.sh/@pyscript/core@latest/core.js"
44+
></script>
3745
</head>
3846
<body>
3947
<nav class="navbar" style="background-color: #000000">

‎examples/folium.html

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,16 @@
77
rel="stylesheet"
88
href="https://pyscript.net/latest/pyscript.css"
99
/>
10-
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
1110
<link rel="stylesheet" href="./assets/css/examples.css" />
11+
<style>
12+
py-script {
13+
display: none;
14+
}
15+
</style>
16+
<script
17+
type="module"
18+
src="https://esm.sh/@pyscript/core@latest/core.js"
19+
></script>
1220
</head>
1321
<body>
1422
<nav class="navbar" style="background-color: #000000">
@@ -34,6 +42,7 @@
3442
</py-config>
3543

3644
<py-script>
45+
from pyscript import display
3746
import folium
3847
import json
3948
import pandas as pd

‎examples/hello_world.html

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,15 @@
1212
href="https://pyscript.net/latest/pyscript.css"
1313
/>
1414
<link rel="stylesheet" href="./assets/css/examples.css" />
15-
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
15+
<style>
16+
py-script {
17+
display: none;
18+
}
19+
</style>
20+
<script
21+
type="module"
22+
src="https://esm.sh/@pyscript/core@latest/core.js"
23+
></script>
1624
</head>
1725

1826
<body>
@@ -36,6 +44,7 @@
3644
Hello world! <br />
3745
This is the current date and time, as computed by Python:
3846
<py-script>
47+
from pyscript import display
3948
from datetime import datetime
4049
now = datetime.now()
4150
display(now.strftime("%m/%d/%Y, %H:%M:%S"))

‎examples/matplotlib.html

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@
77
rel="stylesheet"
88
href="https://pyscript.net/latest/pyscript.css"
99
/>
10-
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
10+
<script
11+
type="module"
12+
src="https://esm.sh/@pyscript/core@latest/core.js"
13+
></script>
1114
<link rel="stylesheet" href="./assets/css/examples.css" />
1215
</head>
1316
<body>

‎examples/panel.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@
2828
<script defer src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js"></script>
2929
<script defer src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.4.3.min.js"></script>
3030
<script defer src="https://cdn.jsdelivr.net/npm/@holoviz/panel@0.14.1/dist/panel.min.js"></script>
31-
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
31+
<style>py-script{display:none}</style>
32+
<script type="module" src="https://esm.sh/@pyscript/core@latest/core.js"></script>
3233
<py-config>
3334
packages = [
3435
"https://cdn.holoviz.org/panel/0.14.3/dist/wheels/bokeh-2.4.3-py3-none-any.whl",

‎examples/simple_clock.html

Lines changed: 21 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,16 @@
1212
href="https://pyscript.net/latest/pyscript.css"
1313
/>
1414

15-
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
1615
<link rel="stylesheet" href="./assets/css/examples.css" />
16+
<style>
17+
py-script {
18+
display: none;
19+
}
20+
</style>
21+
<script
22+
type="module"
23+
src="https://esm.sh/@pyscript/core@latest/core.js"
24+
></script>
1725
</head>
1826

1927
<body>
@@ -27,10 +35,10 @@
2735
</nav>
2836
<section class="pyscript">
2937
<div class="font-mono">
30-
start time: <label id="outputDiv"></label>
38+
start time: <label id="output1"></label>
3139
</div>
32-
<div id="outputDiv2" class="font-mono"></div>
33-
<div id="outputDiv3" class="font-mono"></div>
40+
<div id="output2" class="font-mono"></div>
41+
<div id="output3" class="font-mono"></div>
3442

3543
<py-tutor modules="utils.py">
3644
<py-config>
@@ -40,28 +48,29 @@
4048
[[fetch]]
4149
files = ["./utils.py"]
4250
</py-config>
43-
<py-script>
51+
<script type="py">
4452
import utils
45-
display(utils.now())
46-
</py-script>
53+
from pyscript import display
54+
display(utils.now(), target="output1")
55+
</script>
4756

4857
<py-script>
58+
from pyscript import display
4959
from utils import now
5060
import asyncio
5161

5262
async def foo():
5363
while True:
5464
await asyncio.sleep(1)
5565
output = now()
56-
Element("outputDiv2").write(output)
66+
display(output, target="output2")
5767

58-
out3 = Element("outputDiv3")
5968
if output[-1] in ["0", "4", "8"]:
60-
out3.write("It's espresso time!")
69+
display("It's espresso time!", target="output3")
6170
else:
62-
out3.clear()
71+
display("", target="output3")
6372

64-
pyscript.run_until_complete(foo())
73+
foo()
6574
</py-script>
6675
</py-tutor>
6776
</section>

‎examples/todo.html

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,11 @@
1212
href="https://pyscript.net/latest/pyscript.css"
1313
/>
1414

15-
<script defer src="https://pyscript.net/latest/pyscript.js"></script>
1615
<link rel="stylesheet" href="./assets/css/examples.css" />
16+
<script
17+
type="module"
18+
src="https://esm.sh/@pyscript/core@latest/core.js"
19+
></script>
1720
</head>
1821

1922
<body>
@@ -26,14 +29,14 @@
2629
</div>
2730
</nav>
2831
<section class="pyscript">
29-
<py-tutor modules="./utils.py;./todo.py">
32+
<py-tutor modules="./todo.py">
3033
<py-config>
3134
plugins = [
3235
"https://pyscript.net/latest/plugins/python/py_tutor.py",
3336
"./py_list.py"
3437
]
3538
[[fetch]]
36-
files = ["./utils.py", "./todo.py"]
39+
files = ["./todo.py"]
3740
</py-config>
3841

3942
<py-script src="./todo.py"></py-script>
@@ -57,7 +60,7 @@
5760
id="new-task-btn"
5861
class="py-button"
5962
type="submit"
60-
py-click="add_task()"
63+
py-click="add_task"
6164
>
6265
Add task
6366
</button>

‎examples/todo.py

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,30 @@
11
from datetime import datetime as dt
22

3-
from utils import add_class, remove_class
3+
from pyscript import document
44

55
tasks = []
66

7+
8+
def q(selector, root=document):
9+
return root.querySelector(selector)
10+
11+
712
# define the task template that will be use to render new templates to the page
8-
task_template = Element("task-template").select(".task", from_content=True)
9-
task_list = Element("list-tasks-container")
10-
new_task_content = Element("new-task-content")
13+
task_template = q("#task-template").content.querySelector(".task")
14+
task_list = q("#list-tasks-container")
15+
new_task_content = q("#new-task-content")
1116

1217

13-
def add_task(*args, **kws):
18+
def add_task(e):
1419
# ignore empty task
15-
if not new_task_content.element.value:
20+
if not new_task_content.value:
1621
return None
1722

1823
# create task
1924
task_id = f"task-{len(tasks)}"
2025
task = {
2126
"id": task_id,
22-
"content": new_task_content.element.value,
27+
"content": new_task_content.value,
2328
"done": False,
2429
"created_at": dt.now(),
2530
}
@@ -28,26 +33,24 @@ def add_task(*args, **kws):
2833

2934
# add the task element to the page as new node in the list by cloning from a
3035
# template
31-
task_html = task_template.clone(task_id)
32-
task_html_content = task_html.select("p")
33-
task_html_content.element.innerText = task["content"]
34-
task_html_check = task_html.select("input")
35-
task_list.element.appendChild(task_html.element)
36+
task_html = task_template.cloneNode(True)
37+
task_html.id = task_id
38+
task_html_check = q("input", root=task_html)
39+
task_html_content = q("p", root=task_html)
40+
task_html_content.textContent = task["content"]
41+
task_list.append(task_html)
3642

3743
def check_task(evt=None):
3844
task["done"] = not task["done"]
39-
if task["done"]:
40-
add_class(task_html_content, "line-through")
41-
else:
42-
remove_class(task_html_content, "line-through")
45+
task_html_content.classList.toggle("line-through", task["done"])
4346

44-
new_task_content.clear()
45-
task_html_check.element.onclick = check_task
47+
new_task_content.value = ""
48+
task_html_check.onclick = check_task
4649

4750

4851
def add_task_event(e):
4952
if e.key == "Enter":
50-
add_task()
53+
add_task(e)
5154

5255

53-
new_task_content.element.onkeypress = add_task_event
56+
new_task_content.onkeypress = add_task_event

‎examples/utils.py

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ def now(fmt="%m/%d/%Y, %H:%M:%S"):
1010

1111

1212
def remove_class(element, class_name):
13-
element.element.classList.remove(class_name)
13+
element.classList.remove(class_name)
1414

1515

1616
def add_class(element, class_name):
17-
element.element.classList.add(class_name)
17+
element.classList.add(class_name)

0 commit comments

Comments
 (0)