Fix typos

docs/README.md

@@ -3,7 +3,7 @@
 We provide two main ways to run the docs. Both use
 [`nox`](https://pypi.org/project/nox/):
 
-- `nox -s docs` - displayes the docs and rebuilds when files are modified.
+- `nox -s docs` - displays the docs and rebuilds when files are modified.
 - `nox -s docs-in-docker` - builds a docker image and runs the docs from there.
 
 If any changes to the core of the documentation are made (i.e. to non-`*.rst` files),

docs/source/_custom_js/src/index.js

@@ -86,7 +86,7 @@ function triggerIfInViewport(element, callback) {
     },
     {
       root: null,
-      threshold: 0.1, // set offset 0.1 means trigger if atleast 10% of element in viewport
+      threshold: 0.1, // set offset 0.1 means trigger if at least 10% of element in viewport
     },
   );
 

docs/source/about/changelog.rst

@@ -62,7 +62,7 @@ v1.0.0-a4
 
 **Deprecated**
 
-- :pull:`919` - Declaration of keys via keywork arguments in standard elements. A script
+- :pull:`919` - Declaration of keys via keyword arguments in standard elements. A script
   has been added to automatically convert old usages where possible.
 
 
@@ -590,7 +590,7 @@ v0.35.2
 This release includes several bug fixes. The most significant of which is the ability to
 change the type of an element in the try (i.e. to and from being a component) without
 getting an error. Originally the errors were introduced because it was though changing
-element type would not be desireable. This was not the case though - swapping types
+element type would not be desirable. This was not the case though - swapping types
 turns out to be quite common and useful.
 
 **Closed Issues**

docs/source/guides/adding-interactivity/components-with-state/_examples/adding_state_variable/data.json

@@ -44,7 +44,7 @@
   {
     "name": "Terracotta Army",
     "artist": "Unknown Artist",
-    "description": "The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consited of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.",
+    "description": "The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.",
     "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/2015-09-22-081415_-_Terrakotta-Armee%2C_Grosse_Halle.jpg/1920px-2015-09-22-081415_-_Terrakotta-Armee%2C_Grosse_Halle.jpg",
     "alt": "12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor."
   },

docs/source/guides/adding-interactivity/components-with-state/_examples/isolated_state/data.json

@@ -44,7 +44,7 @@
   {
     "name": "Terracotta Army",
     "artist": "Unknown Artist",
-    "description": "The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consited of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.",
+    "description": "The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.",
     "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/2015-09-22-081415_-_Terrakotta-Armee%2C_Grosse_Halle.jpg/1920px-2015-09-22-081415_-_Terrakotta-Armee%2C_Grosse_Halle.jpg",
     "alt": "12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor."
   },

docs/source/guides/adding-interactivity/components-with-state/_examples/multiple_state_variables/data.json

@@ -44,7 +44,7 @@
   {
     "name": "Terracotta Army",
     "artist": "Unknown Artist",
-    "description": "The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consited of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.",
+    "description": "The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.",
     "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/2015-09-22-081415_-_Terrakotta-Armee%2C_Grosse_Halle.jpg/1920px-2015-09-22-081415_-_Terrakotta-Armee%2C_Grosse_Halle.jpg",
     "alt": "12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor."
   },

docs/source/guides/adding-interactivity/components-with-state/_examples/when_variables_are_not_enough/data.json

@@ -44,7 +44,7 @@
   {
     "name": "Terracotta Army",
     "artist": "Unknown Artist",
-    "description": "The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consited of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.",
+    "description": "The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.",
     "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/2015-09-22-081415_-_Terrakotta-Armee%2C_Grosse_Halle.jpg/1920px-2015-09-22-081415_-_Terrakotta-Armee%2C_Grosse_Halle.jpg",
     "alt": "12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor."
   },

docs/source/guides/adding-interactivity/dangers-of-mutability/index.rst

@@ -531,7 +531,7 @@ Removing Set Items
             s.difference_update(values)
             s -= values  # "in-place" operators mutate!
 
-            s.symetric_difference_update(values)
+            s.symmetric_difference_update(values)
             s ^= values  # "in-place" operators mutate!
 
             s.intersection_update(values)
@@ -547,7 +547,7 @@ Removing Set Items
             s.difference(values)
             s - values
 
-            s.symetric_difference(values)
+            s.symmetric_difference(values)
             s ^ values
 
             s.intersection(values)

docs/source/guides/adding-interactivity/index.rst

@@ -111,7 +111,7 @@ Section 3: State as a Snapshot
 ------------------------------
 
 As we :ref:`learned earlier <Components with State>`, state setters behave a little
-differently than you might exepct at first glance. Instead of updating your current
+differently than you might expect at first glance. Instead of updating your current
 handle on the setter's corresponding variable, it schedules a re-render of the component
 which owns the state.
 
@@ -133,7 +133,7 @@ actually sent?
 .. reactpy:: state-as-a-snapshot/_examples/print_chat_message
 
 As it turns out, changing the message recipient after pressing send does not change
-where the message ulitmately goes. However, one could imagine a bug where the recipient
+where the message ultimately goes. However, one could imagine a bug where the recipient
 of a message is determined at the time the message is sent rather than at the time the
 "Send" button it clicked. Thus changing the recipient after pressing send would change
 where the message got sent.

docs/source/guides/adding-interactivity/multiple-state-updates/index.rst

@@ -10,7 +10,7 @@ Batched Updates
 ---------------
 
 As we learned :ref:`previously <state as a snapshot>`, state variables remain fixed
-inside each render as if state were a snapshot taken at the begining of each render.
+inside each render as if state were a snapshot taken at the beginning of each render.
 This is why, in the example below, even though it might seem like clicking the
 "Increment" button would cause the ``number`` to increase by ``3``, it only does by
 ``1``:
@@ -22,7 +22,7 @@ the event handler is not an ``async`` function), ReactPy waits until all the cod
 event handler has run before processing state and starting the next render. Thus, it's
 the last call to a given state setter that matters. In the example below, even though we
 set the color of the button to ``"orange"`` and then ``"pink"`` before ``"blue"``,
-the color does not quickly flash orange and pink before blue - it alway remains blue:
+the color does not quickly flash orange and pink before blue - it always remains blue:
 
 .. reactpy:: _examples/set_color_3_times
 

docs/source/guides/adding-interactivity/responding-to-events/_examples/stop_event_propagation.py

@@ -30,7 +30,7 @@ def DivInDiv():
     return html.div(
         html.button(
             {"on_click": lambda event: set_stop_propagatation(not stop_propagatation)},
-            "Toggle Propogation",
+            "Toggle Propagation",
         ),
         html.pre(f"Will propagate: {not stop_propagatation}"),
         html.pre(f"Inner click count: {inner_count}"),

docs/source/guides/adding-interactivity/responding-to-events/index.rst

@@ -131,13 +131,13 @@ Unfortunately this means you cannot conditionally prevent default behavior in re
 to event data without writing :ref:`Custom Javascript Components`.
 
 
-Stop Event Propogation
+Stop Event Propagation
 ......................
 
 Similarly to :ref:`preventing default behavior <Preventing Default Event Actions>`, you
 can use the :func:`~reactpy.core.events.event` decorator to prevent events originating in a
 child element from propagating to parent elements by setting ``stop_propagation``. In
-the example below we place a red ``div`` inside a parent blue ``div``. When propogation
+the example below we place a red ``div`` inside a parent blue ``div``. When propagation
 is turned on, clicking the red element will cause the handler for the outer blue one to
 trigger. Conversely, when it's off, only the handler for the red element will trigger.
 

docs/source/guides/adding-interactivity/state-as-a-snapshot/index.rst

@@ -17,7 +17,7 @@ version of the view rather then mutating the existing one.
 
 Given this, when ReactPy "renders" something, it's as if ReactPy has taken a snapshot of the
 UI where all the event handlers, local variables and the view itself were calculated
-using what state was present at the time of that render. Then, when user iteractions
+using what state was present at the time of that render. Then, when user interactions
 trigger state setters, ReactPy is made away of the newly set state and schedules a
 re-render. When this subsequent renders occurs it performs all the same calculations as
 before, but with this new state.
@@ -70,7 +70,7 @@ Even though, we called ``set_count`` three times with what might have seemed lik
 different values, every time we were actually just doing ``set_count(1)`` on each call.
 Only after the event handler returns will ReactPy actually perform the next render where
 count is ``1``. When it does, ``number`` will be ``1`` and we'll be able to perform the
-same subtitution as before to see what the next number will be after we click
+same substitution as before to see what the next number will be after we click
 "Increment":
 
 .. code-block::
@@ -89,7 +89,7 @@ to reason about what should happen in the example below. What will be printed wh
 
 .. reactpy:: _examples/print_count_after_set
 
-If we use the same subtitution trick we saw before, we can rewrite these lines:
+If we use the same substitution trick we saw before, we can rewrite these lines:
 
 .. code-block::
 

docs/source/guides/creating-interfaces/html-with-reactpy/index.rst

@@ -99,7 +99,7 @@ In ReactPy we add these attributes to elements using a dictionary:
 
 .. raw:: html
 
-    <!-- no tabindex since that would ruin accesibility of the page -->
+    <!-- no tabindex since that would ruin accessibility of the page -->
     <img
         src="https://picsum.photos/id/237/500/300"
         class="img-fluid"

docs/source/guides/escape-hatches/distributing-javascript.rst

@@ -174,7 +174,7 @@ loaded with :func:`~reactpy.web.module.export`.
         # unique since it must share a namespace with all other javascript packages.
         name="YOUR-PACKAGE-NAME",
         file=_BUNDLE_PATH,
-        # What to temporarilly display while the module is being loaded
+        # What to temporarily display while the module is being loaded
         fallback="Loading...",
     )
 

docs/source/guides/getting-started/_examples/debug_error_example.py

@@ -8,7 +8,7 @@ def App():
 
 @component
 def GoodComponent():
-    return html.p("This component rendered successfuly")
+    return html.p("This component rendered successfully")
 
 
 @component

docs/source/guides/understanding-reactpy/representing-html.rst

@@ -7,7 +7,7 @@ Representing HTML 🚧
 
     Under construction 🚧
 
-We've already discussed how to contruct HTML with ReactPy in a :ref:`previous section <HTML
+We've already discussed how to construct HTML with ReactPy in a :ref:`previous section <HTML
 with ReactPy>`, but we skimmed over the question of the data structure we use to represent
 it. Let's reconsider the examples from before - on the top is some HTML and on the
 bottom is the corresponding code to create it in ReactPy:

docs/source/reference/_static/vdom-json-schema.json

@@ -61,7 +61,7 @@
       },
       "type": ["object", "string"]
     },
-    "eventHander": {
+    "eventHandler": {
       "properties": {
         "preventDefault": {
           "type": "boolean"

docs/source/reference/html-attributes.rst

@@ -11,7 +11,7 @@ words. For example, ``tabindex`` and ``margin-left`` become ``tab_index`` and
 ``margin_left`` respectively.
 
 
-Noteable Attributes
+Notable Attributes
 -------------------
 
 Some attributes in ReactPy are renamed, have special meaning, or are used differently

pyproject.toml

@@ -3,7 +3,7 @@
 [project]
 name = "scripts"
 version = "0.0.0"
-description = "Scripts for managing the ReactPy respository"
+description = "Scripts for managing the ReactPy repository"
 
 # --- Hatch ----------------------------------------------------------------------------
 

src/js/packages/event-to-object/tests/event-to-object.test.ts

@@ -57,7 +57,7 @@ const simpleTestCases: SimpleTestCase<any>[] = [
   },
   {
     types: ["copy", "cut", "paste"],
-    description: "clipboad event",
+    description: "clipboard event",
     givenEventType: window.ClipboardEvent,
     expectedConversion: { clipboardData: null },
   },

src/py/reactpy/reactpy/_console/ast_utils.py

@@ -41,7 +41,7 @@ def rewrite_changed_nodes(
             msg = "Failed to change code"
             raise RuntimeError(msg)
 
-    # check if an nodes to rewrite contain eachother, pick outermost nodes
+    # check if an nodes to rewrite contain each other, pick outermost nodes
     current_outermost_node, *sorted_nodes_to_unparse = sorted(
         nodes_to_unparse, key=lambda n: n.lineno
     )

src/py/reactpy/reactpy/_console/rewrite_keys.py

@@ -40,7 +40,7 @@ def rewrite_keys(paths: list[str]) -> None:
     recommend running your code formatter like Black against your code after executing
     this command.
 
-    Additionally, We are unable to perserve the location of comments that lie within any
+    Additionally, We are unable to preserve the location of comments that lie within any
     rewritten code. This command will place the comments in the code it plans to rewrite
     just above its changes. As such it requires manual intervention to put those
     comments back in their original location.

src/py/reactpy/reactpy/backend/flask.py

@@ -106,7 +106,7 @@ def run_server() -> None:
     try:
         await stopped.wait()
     finally:
-        # we may have exitted because this task was cancelled
+        # we may have exited because this task was cancelled
         server.current.shutdown()
         # the thread should eventually join
         thread.join(timeout=3)

src/py/reactpy/reactpy/config.py

@@ -1,6 +1,6 @@
 """
 ReactPy provides a series of configuration options that can be set using environment
-variables or, for those which allow it, a programatic interface.
+variables or, for those which allow it, a programmatic interface.
 """
 
 from pathlib import Path
@@ -49,7 +49,7 @@
 
 This directory **MUST** be treated as a black box. Downstream applications **MUST NOT**
 assume anything about the structure of this directory see :mod:`reactpy.web.module` for a
-set of publically available APIs for working with the client.
+set of publicly available APIs for working with the client.
 """
 
 REACTPY_TESTING_DEFAULT_TIMEOUT = _Option(

src/py/reactpy/reactpy/core/events.py

@@ -44,7 +44,7 @@ def event(
         element = reactpy.html.button({"onClick": my_callback})
 
     You may want the ability to prevent the default action associated with the event
-    from taking place, or stoping the event from propagating up the DOM. This decorator
+    from taking place, or stopping the event from propagating up the DOM. This decorator
     allows you to add that functionality to your callbacks.
 
     .. code-block:: python
@@ -191,7 +191,7 @@ def merge_event_handlers(
             or handler.prevent_default != prevent_default
             or handler.target != target
         ):
-            msg = "Cannot merge handlers - 'stop_propagation', 'prevent_default' or 'target' mistmatch."
+            msg = "Cannot merge handlers - 'stop_propagation', 'prevent_default' or 'target' mismatch."
             raise ValueError(msg)
 
     return EventHandler(

src/py/reactpy/reactpy/core/hooks.py

@@ -341,7 +341,7 @@ def use_callback(
         function:
             The function whose identity will be preserved
         dependencies:
-            Dependencies of the callback. The identity the ``function`` will be udpated
+            Dependencies of the callback. The identity the ``function`` will be updated
             if the identity of any value in the given sequence changes (i.e. their
             :func:`id` is different). By default these are inferred based on local
             variables that are referenced by the given function.
@@ -573,7 +573,7 @@ class LifeCycleHook:
             # given render have been completed.
             hook.affect_layout_did_render()
 
-            # Typically an event occurs and a new render is scheduled, thus begining
+            # Typically an event occurs and a new render is scheduled, thus beginning
             # the render cycle anew.
             hook.schedule_render()
 
@@ -626,7 +626,7 @@ def schedule_render(self) -> None:
 
     def use_state(self, function: Callable[[], _Type]) -> _Type:
         if not self._rendered_atleast_once:
-            # since we're not intialized yet we're just appending state
+            # since we're not initialized yet we're just appending state
             result = function()
             self._state += (result,)
         else:
@@ -636,7 +636,7 @@ def use_state(self, function: Callable[[], _Type]) -> _Type:
         return result
 
     def add_effect(self, effect_type: EffectType, function: Callable[[], None]) -> None:
-        """Trigger a function on the occurance of the given effect type"""
+        """Trigger a function on the occurrence of the given effect type"""
         self._event_effects[effect_type].append(function)
 
     def set_context_provider(self, provider: ContextProvider[Any]) -> None:

src/py/reactpy/reactpy/core/layout.py

@@ -568,7 +568,7 @@ def __init__(
         """The actual model of the element"""
 
         self.patch_path = patch_path
-        """A "/" delimitted path to the element within the greater layout"""
+        """A "/" delimited path to the element within the greater layout"""
 
         self.children_by_key = children_by_key
         """Child model states indexed by their unique keys"""

src/py/reactpy/reactpy/core/types.py

@@ -187,7 +187,7 @@ class EventHandlerType(Protocol):
     """Typically left as ``None`` except when a static target is useful.
 
     When testing, it may be useful to specify a static target ID so events can be
-    triggered programatically.
+    triggered programmatically.
 
     .. note::
 

src/py/reactpy/reactpy/core/vdom.py

@@ -58,10 +58,10 @@
         "elementEventHandlers": {
             "type": "object",
             "patternProperties": {
-                ".*": {"$ref": "#/definitions/eventHander"},
+                ".*": {"$ref": "#/definitions/eventHandler"},
             },
         },
-        "eventHander": {
+        "eventHandler": {
             "type": "object",
             "properties": {
                 "target": {"type": "string"},
@@ -152,7 +152,7 @@ def vdom(
             iterables of children. The attribute mapping **must** precede the children,
             or children which will be merged into their respective parts of the model.
         key:
-            A string idicating the identity of a particular element. This is significant
+            A string indicating the identity of a particular element. This is significant
             to preserve event handlers across updates - without a key, a re-render would
             cause these handlers to be deleted, but with a key, they would be redirected
             to any newly defined handlers.