Skip to content

Commit 764a5a8

Browse files
rmorshearmorshea
authored
Unify vdom interface (#841)
* begin vdom interface unification * turn script into cli app * misc fixes * convert vdom func usages too * minor fix * start fixes in source/tests/docs * more fixes * correct more tests * improve warning * improve coverage * fix typo * remove console logs * Python<3.10 compat * more cov * skip python<3.9 * misc fixes * better skip * misc typing improvements + fix ico path * error if no files * test py 3.11 * warn on dir does not exist * fix tests * fix old class_name typos * remove unused var
1 parent cc47748 commit 764a5a8

File tree

89 files changed

+1417
-664
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

89 files changed

+1417
-664
lines changed

‎.github/workflows/test.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ jobs:
2323
session-name: test_python_suite
2424
session-arguments: --maxfail=3 --no-cov
2525
runs-on-array: '["ubuntu-latest", "macos-latest", "windows-latest"]'
26-
python-version-array: '["3.7", "3.8", "3.9", "3.10"]'
26+
python-version-array: '["3.7", "3.8", "3.9", "3.10", "3.11"]'
2727
docs:
2828
uses: ./.github/workflows/.nox-session.yml
2929
with:

‎docs/examples.py

+1-1
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ def Wrapper():
122122
def PrintView():
123123
text, set_text = idom.hooks.use_state(print_buffer.getvalue())
124124
print_buffer.set_callback(set_text)
125-
return idom.html.pre({"class": "printout"}, text) if text else idom.html.div()
125+
return idom.html.pre(text, class_name="printout") if text else idom.html.div()
126126

127127
return Wrapper()
128128

‎docs/source/_custom_js/package-lock.json

+4-14
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/source/_exts/custom_autosectionlabel.py

+2-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"""
66

77
from fnmatch import fnmatch
8-
from typing import Any, Dict, cast
8+
from typing import Any, cast
99

1010
from docutils import nodes
1111
from docutils.nodes import Node
@@ -30,7 +30,6 @@ def get_node_depth(node: Node) -> int:
3030

3131
def register_sections_as_label(app: Sphinx, document: Node) -> None:
3232
docname = app.env.docname
33-
print(docname)
3433

3534
for pattern in app.config.autosectionlabel_skip_docs:
3635
if fnmatch(docname, pattern):
@@ -67,7 +66,7 @@ def register_sections_as_label(app: Sphinx, document: Node) -> None:
6766
domain.labels[name] = docname, labelid, sectname
6867

6968

70-
def setup(app: Sphinx) -> Dict[str, Any]:
69+
def setup(app: Sphinx) -> dict[str, Any]:
7170
app.add_config_value("autosectionlabel_prefix_document", False, "env")
7271
app.add_config_value("autosectionlabel_maxdepth", None, "env")
7372
app.add_config_value("autosectionlabel_skip_docs", [], "env")

‎docs/source/guides/adding-interactivity/components-with-state/_examples/adding_state_variable/main.py

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@ def handle_click(event):
2525
url = sculpture["url"]
2626

2727
return html.div(
28-
html.button({"onClick": handle_click}, "Next"),
28+
html.button("Next", on_click=handle_click),
2929
html.h2(name, " by ", artist),
3030
html.p(f"({bounded_index + 1} of {len(sculpture_data)})"),
31-
html.img({"src": url, "alt": alt, "style": {"height": "200px"}}),
31+
html.img(src=url, alt=alt, style={"height": "200px"}),
3232
html.p(description),
3333
)
3434

‎docs/source/guides/adding-interactivity/components-with-state/_examples/isolated_state/main.py

+6-6
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,14 @@ def handle_more_click(event):
2929
url = sculpture["url"]
3030

3131
return html.div(
32-
html.button({"onClick": handle_next_click}, "Next"),
32+
html.button("Next", on_click=handle_next_click),
3333
html.h2(name, " by ", artist),
3434
html.p(f"({bounded_index + 1} or {len(sculpture_data)})"),
35-
html.img({"src": url, "alt": alt, "style": {"height": "200px"}}),
35+
html.img(src=url, alt=alt, style={"height": "200px"}),
3636
html.div(
3737
html.button(
38-
{"onClick": handle_more_click},
39-
f"{'Show' if show_more else 'Hide'} details",
38+
f"{('Show' if show_more else 'Hide')} details",
39+
on_click=handle_more_click,
4040
),
4141
(html.p(description) if show_more else ""),
4242
),
@@ -46,8 +46,8 @@ def handle_more_click(event):
4646
@component
4747
def App():
4848
return html.div(
49-
html.section({"style": {"width": "50%", "float": "left"}}, Gallery()),
50-
html.section({"style": {"width": "50%", "float": "left"}}, Gallery()),
49+
html.section(Gallery(), style={"width": "50%", "float": "left"}),
50+
html.section(Gallery(), style={"width": "50%", "float": "left"}),
5151
)
5252

5353

‎docs/source/guides/adding-interactivity/components-with-state/_examples/multiple_state_variables/main.py

+4-4
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,14 @@ def handle_more_click(event):
2929
url = sculpture["url"]
3030

3131
return html.div(
32-
html.button({"onClick": handle_next_click}, "Next"),
32+
html.button("Next", on_click=handle_next_click),
3333
html.h2(name, " by ", artist),
3434
html.p(f"({bounded_index + 1} or {len(sculpture_data)})"),
35-
html.img({"src": url, "alt": alt, "style": {"height": "200px"}}),
35+
html.img(src=url, alt=alt, style={"height": "200px"}),
3636
html.div(
3737
html.button(
38-
{"onClick": handle_more_click},
39-
f"{'Show' if show_more else 'Hide'} details",
38+
f"{('Show' if show_more else 'Hide')} details",
39+
on_click=handle_more_click,
4040
),
4141
(html.p(description) if show_more else ""),
4242
),

‎docs/source/guides/adding-interactivity/components-with-state/_examples/when_variables_are_not_enough/main.py

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@ def handle_click(event):
3131
url = sculpture["url"]
3232

3333
return html.div(
34-
html.button({"onClick": handle_click}, "Next"),
34+
html.button("Next", on_click=handle_click),
3535
html.h2(name, " by ", artist),
3636
html.p(f"({bounded_index + 1} or {len(sculpture_data)})"),
37-
html.img({"src": url, "alt": alt, "style": {"height": "200px"}}),
37+
html.img(src=url, alt=alt, style={"height": "200px"}),
3838
html.p(description),
3939
)
4040

‎docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/dict_remove.py

+4-9
Original file line numberDiff line numberDiff line change
@@ -26,26 +26,21 @@ def handle_click(event):
2626
return handle_click
2727

2828
return html.div(
29-
html.button({"onClick": handle_add_click}, "add term"),
29+
html.button("add term", on_click=handle_add_click),
3030
html.label(
3131
"Term: ",
32-
html.input({"value": term_to_add, "onChange": handle_term_to_add_change}),
32+
html.input(value=term_to_add, on_change=handle_term_to_add_change),
3333
),
3434
html.label(
3535
"Definition: ",
3636
html.input(
37-
{
38-
"value": definition_to_add,
39-
"onChange": handle_definition_to_add_change,
40-
}
37+
value=definition_to_add, on_change=handle_definition_to_add_change
4138
),
4239
),
4340
html.hr(),
4441
[
4542
html.div(
46-
html.button(
47-
{"onClick": make_delete_click_handler(term)}, "delete term"
48-
),
43+
html.button("delete term", on_click=make_delete_click_handler(term)),
4944
html.dt(term),
5045
html.dd(definition),
5146
key=term,

‎docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/dict_update.py

+3-9
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,15 @@ def handle_email_change(event):
2323
return html.div(
2424
html.label(
2525
"First name: ",
26-
html.input(
27-
{"value": person["first_name"], "onChange": handle_first_name_change},
28-
),
26+
html.input(value=person["first_name"], on_change=handle_first_name_change),
2927
),
3028
html.label(
3129
"Last name: ",
32-
html.input(
33-
{"value": person["last_name"], "onChange": handle_last_name_change},
34-
),
30+
html.input(value=person["last_name"], on_change=handle_last_name_change),
3531
),
3632
html.label(
3733
"Email: ",
38-
html.input(
39-
{"value": person["email"], "onChange": handle_email_change},
40-
),
34+
html.input(value=person["email"], on_change=handle_email_change),
4135
),
4236
html.p(f"{person['first_name']} {person['last_name']} {person['email']}"),
4337
)

‎docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/list_insert.py

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ def handle_click(event):
1616

1717
return html.div(
1818
html.h1("Inspiring sculptors:"),
19-
html.input({"value": artist_to_add, "onChange": handle_change}),
20-
html.button({"onClick": handle_click}, "add"),
19+
html.input(value=artist_to_add, on_change=handle_change),
20+
html.button("add", on_click=handle_click),
2121
html.ul([html.li(name, key=name) for name in artists]),
2222
)
2323

‎docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/list_re_order.py

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ def handle_reverse_click(event):
1515

1616
return html.div(
1717
html.h1("Inspiring sculptors:"),
18-
html.button({"onClick": handle_sort_click}, "sort"),
19-
html.button({"onClick": handle_reverse_click}, "reverse"),
18+
html.button("sort", on_click=handle_sort_click),
19+
html.button("reverse", on_click=handle_reverse_click),
2020
html.ul([html.li(name, key=name) for name in artists]),
2121
)
2222

‎docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/list_remove.py

+3-3
Original file line numberDiff line numberDiff line change
@@ -24,13 +24,13 @@ def handle_click(event):
2424

2525
return html.div(
2626
html.h1("Inspiring sculptors:"),
27-
html.input({"value": artist_to_add, "onChange": handle_change}),
28-
html.button({"onClick": handle_add_click}, "add"),
27+
html.input(value=artist_to_add, on_change=handle_change),
28+
html.button("add", on_click=handle_add_click),
2929
html.ul(
3030
[
3131
html.li(
3232
name,
33-
html.button({"onClick": make_handle_delete_click(index)}, "delete"),
33+
html.button("delete", on_click=make_handle_delete_click(index)),
3434
key=name,
3535
)
3636
for index, name in enumerate(artists)

‎docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/list_replace.py

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ def handle_click(event):
1616
[
1717
html.li(
1818
count,
19-
html.button({"onClick": make_increment_click_handler(index)}, "+1"),
19+
html.button("+1", on_click=make_increment_click_handler(index)),
2020
key=index,
2121
)
2222
for index, count in enumerate(counters)

‎docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/moving_dot.py

+16-20
Original file line numberDiff line numberDiff line change
@@ -16,29 +16,25 @@ async def handle_pointer_move(event):
1616
)
1717

1818
return html.div(
19-
{
20-
"onPointerMove": handle_pointer_move,
21-
"style": {
22-
"position": "relative",
23-
"height": "200px",
24-
"width": "100%",
25-
"backgroundColor": "white",
26-
},
27-
},
2819
html.div(
29-
{
30-
"style": {
31-
"position": "absolute",
32-
"backgroundColor": "red",
33-
"borderRadius": "50%",
34-
"width": "20px",
35-
"height": "20px",
36-
"left": "-10px",
37-
"top": "-10px",
38-
"transform": f"translate({position['x']}px, {position['y']}px)",
39-
},
20+
style={
21+
"position": "absolute",
22+
"background_color": "red",
23+
"border_radius": "50%",
24+
"width": "20px",
25+
"height": "20px",
26+
"left": "-10px",
27+
"top": "-10px",
28+
"transform": f"translate({position['x']}px, {position['y']}px)",
4029
}
4130
),
31+
on_pointer_move=handle_pointer_move,
32+
style={
33+
"position": "relative",
34+
"height": "200px",
35+
"width": "100%",
36+
"background_color": "white",
37+
},
4238
)
4339

4440

‎docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/moving_dot_broken.py

+16-20
Original file line numberDiff line numberDiff line change
@@ -14,29 +14,25 @@ def handle_pointer_move(event):
1414
position["y"] = event["clientY"] - outer_div_bounds["y"]
1515

1616
return html.div(
17-
{
18-
"onPointerMove": handle_pointer_move,
19-
"style": {
20-
"position": "relative",
21-
"height": "200px",
22-
"width": "100%",
23-
"backgroundColor": "white",
24-
},
25-
},
2617
html.div(
27-
{
28-
"style": {
29-
"position": "absolute",
30-
"backgroundColor": "red",
31-
"borderRadius": "50%",
32-
"width": "20px",
33-
"height": "20px",
34-
"left": "-10px",
35-
"top": "-10px",
36-
"transform": f"translate({position['x']}px, {position['y']}px)",
37-
},
18+
style={
19+
"position": "absolute",
20+
"background_color": "red",
21+
"border_radius": "50%",
22+
"width": "20px",
23+
"height": "20px",
24+
"left": "-10px",
25+
"top": "-10px",
26+
"transform": f"translate({position['x']}px, {position['y']}px)",
3827
}
3928
),
29+
on_pointer_move=handle_pointer_move,
30+
style={
31+
"position": "relative",
32+
"height": "200px",
33+
"width": "100%",
34+
"background_color": "white",
35+
},
4036
)
4137

4238

0 commit comments

Comments
 (0)