Skip to content

Fix docs typos #289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
May 3, 2025
Merged

Fix docs typos #289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6778959
misc docs fixes
Archmonger May 3, 2025
022feac
Use camel case props
Archmonger May 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/examples/python/django_router.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,5 +15,5 @@ def my_component():
route("/router/string/<str:value>/", html.div("Example 6")),
route("/router/uuid/<uuid:value>/", html.div("Example 7")),
route("/router/two_values/<int:value>/<str:value2>/", html.div("Example 8")),
route("/router/*", html.div("Fallback")),
route("/router/<any:value>", html.div("Fallback")),
)
2 changes: 1 addition & 1 deletion docs/examples/python/use_mutation.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,6 @@ def submit_event(event):

return html.div(
html.label("Add an item:"),
html.input({"type": "text", "on_key_down": submit_event}),
html.input({"type": "text", "onKeyDown": submit_event}),
mutation_status,
)
2 changes: 1 addition & 1 deletion docs/examples/python/use_mutation_query_refetch.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ def submit_event(event):

return html.div(
html.label("Add an item:"),
html.input({"type": "text", "on_key_down": submit_event}),
html.input({"type": "text", "onKeyDown": submit_event}),
mutation_status,
rendered_items,
)
4 changes: 2 additions & 2 deletions docs/examples/python/use_mutation_reset.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,12 +22,12 @@ def submit_event(event):
if item_mutation.loading:
mutation_status = html.h2("Adding...")
elif item_mutation.error:
mutation_status = html.button({"on_click": reset_event}, "Error: Try again!")
mutation_status = html.button({"onClick": reset_event}, "Error: Try again!")
else:
mutation_status = html.h2("Mutation done.")

return html.div(
html.label("Add an item:"),
html.input({"type": "text", "on_key_down": submit_event}),
html.input({"type": "text", "onKeyDown": submit_event}),
mutation_status,
)
2 changes: 1 addition & 1 deletion docs/examples/python/use_mutation_thread_sensitive.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,6 @@ def submit_event(event):
mutation_status = html.h2("Done.")

return html.div(
html.input({"type": "text", "on_key_down": submit_event}),
html.input({"type": "text", "onKeyDown": submit_event}),
mutation_status,
)
26 changes: 26 additions & 0 deletions docs/examples/python/use_query_refetch.py
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
from channels.db import database_sync_to_async
from reactpy import component, html

from example.models import TodoItem
from reactpy_django.hooks import use_query


async def get_items():
return await database_sync_to_async(TodoItem.objects.all)()


@component
def todo_list():
item_query = use_query(get_items)

if item_query.loading:
rendered_items = html.h2("Loading...")
elif item_query.error or not item_query.data:
rendered_items = html.h2("Error when loading!")
else:
rendered_items = html.ul([html.li(item.text, key=item.pk) for item in item_query.data])

def on_click(event):
item_query.refetch()

return html.div("Rendered items: ", rendered_items, html.button({"onClick": on_click}, "Refresh"))
2 changes: 1 addition & 1 deletion docs/examples/python/use_user_data.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,5 +16,5 @@ def on_submit(event):
html.div(f"Data: {query.data}"),
html.div(f"Loading: {query.loading | mutation.loading}"),
html.div(f"Error(s): {query.error} {mutation.error}"),
html.input({"on_key_press": on_submit}),
html.input({"onKeyPress": on_submit}),
)
20 changes: 7 additions & 13 deletions docs/src/reference/hooks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,22 +135,16 @@ Query functions can be sync or async.

{% include-markdown "../../includes/orm.md" start="<!--orm-excp-start-->" end="<!--orm-excp-end-->" %}

??? question "Can I make a failed query try again?"
??? question "Can I force a query to run again?"

Yes, `#!python use_mutation` can be re-executed by calling `#!python reset()` on your `#!python use_mutation` instance.
`#!python use_query` can be re-executed by calling `#!python refetch()` on your `#!python use_query` result.

For example, take a look at `#!python reset_event` below.
The example below uses an `#!python onClick` event to determine when to reset the query.

=== "components.py"

```python
{% include "../../examples/python/use_mutation_reset.py" %}
```

=== "models.py"

```python
{% include "../../examples/python/todo_item_model.py" %}
{% include "../../examples/python/use_query_refetch.py" %}
```

??? question "Why does the example query function return `#!python TodoItem.objects.all()`?"
Expand Down Expand Up @@ -231,9 +225,9 @@ Mutation functions can be sync or async.

{% include-markdown "../../includes/orm.md" start="<!--orm-excp-start-->" end="<!--orm-excp-end-->" %}

??? question "Can I make a failed mutation try again?"
??? question "Can I force a mutation run again?"

Yes, `#!python use_mutation` can be re-executed by calling `#!python reset()` on your `#!python use_mutation` instance.
`#!python use_mutation` can be re-executed by calling `#!python reset()` on your `#!python use_mutation` result.

For example, take a look at `#!python reset_event` below.

Expand All @@ -251,7 +245,7 @@ Mutation functions can be sync or async.

??? question "Can `#!python use_mutation` trigger a refetch of `#!python use_query`?"

Yes, `#!python use_mutation` can queue a refetch of a `#!python use_query` via the `#!python refetch=...` argument.
`#!python use_mutation` can queue a refetch of a `#!python use_query` via the `#!python refetch=...` argument.

The example below is a merge of the `#!python use_query` and `#!python use_mutation` examples above with the addition of a `#!python use_mutation(refetch=...)` argument.

Expand Down
4 changes: 1 addition & 3 deletions docs/src/reference/router.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,7 @@ URL router that enables the ability to conditionally render other components bas
You can duplicate all your URL patterns within both Django and ReactPy, but it's easiest to use a wildcard `.*` within Django's `#!python urlpatterns` and let ReactPy handle the rest. For example...

```python linenums="0"
urlpatterns = [
re_path(r"^.*$", my_reactpy_router_view),
]
urlpatterns = [ re_path(r"^.*$", my_reactpy_router_view) ]
```

=== "components.py"
Expand Down
50 changes: 25 additions & 25 deletions tests/test_app/components.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ def button():
html.div(
"button:",
html.button(
{"id": "counter-inc", "on_click": lambda _: set_count(count + 1)},
{"id": "counter-inc", "onClick": lambda _: set_count(count + 1)},
"Click me!",
),
html.p({"id": "counter-num", "data-count": count}, f"Current count is: {count}"),
Expand Down Expand Up @@ -293,7 +293,7 @@ def _render_todo_items(items, toggle_item):
"id": f"todo-item-{item.text}-checkbox",
"type": "checkbox",
"checked": item.done,
"on_change": lambda _, i=item: toggle_item(i),
"onChange": lambda _, i=item: toggle_item(i),
}),
)
for item in items
Expand Down Expand Up @@ -342,8 +342,8 @@ def on_change(event):
"type": "text",
"id": "todo-input",
"value": input_value,
"on_key_press": on_submit,
"on_change": on_change,
"onKeyPress": on_submit,
"onChange": on_change,
}),
mutation_status,
rendered_items,
Expand Down Expand Up @@ -413,8 +413,8 @@ async def on_change(event):
"type": "text",
"id": "async-todo-input",
"value": input_value,
"on_key_press": on_submit,
"on_change": on_change,
"onKeyPress": on_submit,
"onChange": on_change,
}),
mutation_status,
rendered_items,
Expand Down Expand Up @@ -508,7 +508,7 @@ def on_click(_):
html.button(
{
"id": f"{inspect.currentframe().f_code.co_name}_btn",
"on_click": on_click,
"onClick": on_click,
},
"Click me",
),
Expand All @@ -527,7 +527,7 @@ def on_click(_):
html.button(
{
"id": f"{inspect.currentframe().f_code.co_name}_btn",
"on_click": on_click,
"onClick": on_click,
},
"Click me",
),
Expand All @@ -546,7 +546,7 @@ def on_click(_):
html.button(
{
"id": f"{inspect.currentframe().f_code.co_name}_btn",
"on_click": on_click,
"onClick": on_click,
},
"Click me",
),
Expand All @@ -561,7 +561,7 @@ def custom_host(number=0):

return html.div(
{
"class_name": f"{inspect.currentframe().f_code.co_name}-{number}",
"className": f"{inspect.currentframe().f_code.co_name}-{number}",
"data-port": port,
},
f"Server Port: {port}",
Expand Down Expand Up @@ -630,15 +630,15 @@ async def on_submit(event):
"data-username": ("AnonymousUser" if current_user.is_anonymous else current_user.username),
},
html.div("use_user_data"),
html.button({"className": "login-1", "on_click": login_user1}, "Login 1"),
html.button({"className": "login-2", "on_click": login_user2}, "Login 2"),
html.button({"className": "logout", "on_click": logout_user}, "Logout"),
html.button({"className": "clear", "on_click": clear_data}, "Clear Data"),
html.button({"className": "login-1", "onClick": login_user1}, "Login 1"),
html.button({"className": "login-2", "onClick": login_user2}, "Login 2"),
html.button({"className": "logout", "onClick": logout_user}, "Logout"),
html.button({"className": "clear", "onClick": clear_data}, "Clear Data"),
html.div(f"User: {current_user}"),
html.div(f"Data: {user_data_query.data}"),
html.div(f"Data State: (loading={user_data_query.loading}, error={user_data_query.error})"),
html.div(f"Mutation State: (loading={user_data_mutation.loading}, error={user_data_mutation.error})"),
html.div(html.input({"on_key_press": on_submit, "placeholder": "Type here to add data"})),
html.div(html.input({"onKeyPress": on_submit, "placeholder": "Type here to add data"})),
)


Expand Down Expand Up @@ -685,13 +685,13 @@ async def on_submit(event):
"data-username": ("AnonymousUser" if current_user.is_anonymous else current_user.username),
},
html.div("use_user_data_with_default"),
html.button({"className": "login-3", "on_click": login_user3}, "Login 3"),
html.button({"className": "clear", "on_click": clear_data}, "Clear Data"),
html.button({"className": "login-3", "onClick": login_user3}, "Login 3"),
html.button({"className": "clear", "onClick": clear_data}, "Clear Data"),
html.div(f"User: {current_user}"),
html.div(f"Data: {user_data_query.data}"),
html.div(f"Data State: (loading={user_data_query.loading}, error={user_data_query.error})"),
html.div(f"Mutation State: (loading={user_data_mutation.loading}, error={user_data_mutation.error})"),
html.div(html.input({"on_key_press": on_submit, "placeholder": "Type here to add data"})),
html.div(html.input({"onKeyPress": on_submit, "placeholder": "Type here to add data"})),
)


Expand Down Expand Up @@ -720,9 +720,9 @@ async def disconnect(event):
},
html.div("use_auth"),
html.div(f"UUID: {uuid}"),
html.button({"className": "login", "on_click": login_user}, "Login"),
html.button({"className": "logout", "on_click": logout_user}, "Logout"),
html.button({"className": "disconnect", "on_click": disconnect}, "disconnect"),
html.button({"className": "login", "onClick": login_user}, "Login"),
html.button({"className": "logout", "onClick": logout_user}, "Logout"),
html.button({"className": "disconnect", "onClick": disconnect}, "disconnect"),
html.div(f"User: {current_user}"),
)

Expand Down Expand Up @@ -752,9 +752,9 @@ async def disconnect(event):
},
html.div("use_auth_no_rerender"),
html.div(f"UUID: {uuid}"),
html.button({"className": "login", "on_click": login_user}, "Login"),
html.button({"className": "logout", "on_click": logout_user}, "Logout"),
html.button({"className": "disconnect", "on_click": disconnect}, "disconnect"),
html.button({"className": "login", "onClick": login_user}, "Login"),
html.button({"className": "logout", "onClick": logout_user}, "Logout"),
html.button({"className": "disconnect", "onClick": disconnect}, "disconnect"),
html.div(f"User: {current_user}"),
)

Expand All @@ -774,5 +774,5 @@ def on_click(event):
},
html.div("use_rerender"),
html.div(f"UUID: {uuid}"),
html.button({"on_click": on_click}, "Rerender"),
html.button({"onClick": on_click}, "Rerender"),
)
18 changes: 9 additions & 9 deletions tests/test_app/performance/components.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,15 @@ def run_tests():
return html.div(
html.div(f"Total renders: {count}"),
html.div(
{"class_name": "rps", "data-rps": rps},
{"className": "rps", "data-rps": rps},
f"Renders Per Second: {rps}",
),
)


@component
def time_to_load():
return html.div({"class_name": "ttl"}, "Loaded!")
return html.div({"className": "ttl"}, "Loaded!")


GIANT_STR_10MB = "@" * 10000000
Expand All @@ -34,7 +34,7 @@ def time_to_load():
@component
def net_io_time_to_load():
return html.div(
{"class_name": "ttl"},
{"className": "ttl"},
html.div({"style": {"display": "none"}}, GIANT_STR_10MB),
html.div("Loaded!"),
)
Expand All @@ -59,7 +59,7 @@ def run_tests():
html.div({"style": {"display": "none"}}, GIANT_STR_1MB),
html.div(f"Total renders: {count}"),
html.div(
{"class_name": "rps", "data-rps": rps},
{"className": "rps", "data-rps": rps},
f"Renders Per Second: {rps}",
),
)
Expand All @@ -79,14 +79,14 @@ async def event_handler(event):
return html.div(
html.div(f"Total events: {count}"),
html.div(
{"class_name": "erps", "data-erps": erps},
{"className": "erps", "data-erps": erps},
f"Event Renders Per Second: {erps}",
),
html.input({
"type": "text",
"default_value": "0",
"defaultValue": "0",
"data-count": str(count),
"on_click": event_handler,
"onClick": event_handler,
}),
)

Expand All @@ -101,12 +101,12 @@ async def event_handler(_event):
return html.div(
html.input(
{
"class_name": "et",
"className": "et",
"data-clicked": clicked,
"data-worker-num": worker_num,
"value": f"Clicked: {clicked}",
"type": "button",
"on_click": event_handler,
"onClick": event_handler,
},
),
)
4 changes: 2 additions & 2 deletions tests/test_app/pyscript/components/child.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,11 @@ def root():
html.div(
{"className": "grid"},
html.button(
{"className": "plus", "on_click": lambda _: set_value(value + 1)},
{"className": "plus", "onClick": lambda _: set_value(value + 1)},
"+",
),
html.button(
{"className": "minus", "on_click": lambda _: set_value(value - 1)},
{"className": "minus", "onClick": lambda _: set_value(value - 1)},
"-",
),
),
Expand Down
4 changes: 2 additions & 2 deletions tests/test_app/pyscript/components/counter.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ def root():
html.div(
{"className": "grid"},
html.button(
{"className": "plus", "on_click": lambda _: set_value(value + 1)},
{"className": "plus", "onClick": lambda _: set_value(value + 1)},
"+",
),
html.button(
{"className": "minus", "on_click": lambda _: set_value(value - 1)},
{"className": "minus", "onClick": lambda _: set_value(value - 1)},
"-",
),
),
Expand Down