Refactoring related to ReactPy v2.0.0

Author: shawncrawley

docs/examples/python/use_params.py

@@ -6,7 +6,7 @@
 @component
 def user():
     params = use_params()
-    return html._(html.h1(f"User {params['id']} 👤"), html.p("Nothing (yet)."))
+    return html(html.h1(f"User {params['id']} 👤"), html.p("Nothing (yet)."))
 
 
 @component

docs/examples/python/use_search_params.py

@@ -6,7 +6,7 @@
 @component
 def search():
     search_params = use_search_params()
-    return html._(html.h1(f"Search Results for {search_params['query'][0]} 🔍"), html.p("Nothing (yet)."))
+    return html(html.h1(f"Search Results for {search_params['query'][0]} 🔍"), html.p("Nothing (yet)."))
 
 
 @component

docs/src/learn/routers-routes-and-links.md

@@ -9,7 +9,7 @@ The [`browser_router`][reactpy_router.browser_router] component is one possible
 !!! abstract "Note"
 
     The current location is determined based on the browser's current URL and can be found
-    by checking the [`use_location`][reactpy.backend.hooks.use_location] hook.
+    by checking the [`use_location`][reactpy.use_location] hook.
 
 Here's a basic example showing how to use `#!python browser_router` with two routes.
 

pyproject.toml

@@ -28,7 +28,11 @@ classifiers = [
   "Environment :: Web Environment",
   "Typing :: Typed",
 ]
-dependencies = ["reactpy>=1.1.0, <2.0.0", "typing_extensions"]
+dependencies = [
+  "reactpy[asgi]>=2.0.0b10, <3.0.0", 
+  "typing_extensions",
+  "jsonpointer==3.*",
+]
 dynamic = ["version"]
 urls.Changelog = "https://reactive-python.github.io/reactpy-router/latest/about/changelog/"
 urls.Documentation = "https://reactive-python.github.io/reactpy-router/latest/"

src/js/src/types.ts

@@ -1,6 +1,6 @@
 export interface ReactPyLocation {
-  pathname: string;
-  search: string;
+  path: string;
+  query_string: string;
 }
 
 export interface HistoryProps {

src/js/src/utils.ts

@@ -2,8 +2,8 @@ import { ReactPyLocation } from "./types";
 
 export function createLocationObject(): ReactPyLocation {
   return {
-    pathname: window.location.pathname,
-    search: window.location.search,
+    path: window.location.pathname,
+    query_string: window.location.search,
   };
 }
 

src/reactpy_router/components.py

@@ -5,32 +5,22 @@
 from uuid import uuid4
 
 from reactpy import component, html, use_connection, use_ref
-from reactpy.backend.types import Location
-from reactpy.web.module import export, module_from_file
+from reactpy.types import Location
+from reactpy.reactjs import component_from_file
 
 from reactpy_router.hooks import _use_route_state
 from reactpy_router.types import Route
 
 if TYPE_CHECKING:
-    from reactpy.core.component import Component
-    from reactpy.core.types import Key, VdomDict
+    from reactpy.types import Key, VdomDict, Component
 
-History = export(
-    module_from_file("reactpy-router", file=Path(__file__).parent / "static" / "bundle.js"),
-    ("History"),
-)
+History = component_from_file(Path(__file__).parent / "static" / "bundle.js", import_names="History", name="reactpy-router")
 """Client-side portion of history handling"""
 
-Link = export(
-    module_from_file("reactpy-router", file=Path(__file__).parent / "static" / "bundle.js"),
-    ("Link"),
-)
+Link = component_from_file(Path(__file__).parent / "static" / "bundle.js", import_names="Link", name="reactpy-router")
 """Client-side portion of link handling"""
 
-Navigate = export(
-    module_from_file("reactpy-router", file=Path(__file__).parent / "static" / "bundle.js"),
-    ("Navigate"),
-)
+Navigate = component_from_file(Path(__file__).parent / "static" / "bundle.js", import_names="Navigate", name="reactpy-router")
 """Client-side portion of the navigate component"""
 
 
@@ -74,7 +64,7 @@ def _link(attributes: dict[str, Any], *children: Any) -> VdomDict:
     def on_click_callback(_event: dict[str, Any]) -> None:
         set_location(Location(**_event))
 
-    return html._(Link({"onClickCallback": on_click_callback, "linkClass": class_name}), html.a(attrs, *children))
+    return html(Link({"onClickCallback": on_click_callback, "linkClass": class_name}), html.a(attrs, *children))
 
 
 def route(path: str, element: Any | None, *routes: Route) -> Route:
@@ -118,7 +108,7 @@ def _navigate(to: str, replace: bool = False) -> VdomDict | None:
     def on_navigate_callback(_event: dict[str, Any]) -> None:
         set_location(Location(**_event))
 
-    if location.pathname != pathname:
+    if location.path != pathname:
         return Navigate({"onNavigateCallback": on_navigate_callback, "to": to, "replace": replace})
 
     return None

src/reactpy_router/hooks.py

@@ -59,7 +59,7 @@ def use_search_params(
         A dictionary of the current URL's query string parameters.
     """
     location = use_location()
-    query_string = location.search[1:] if len(location.search) > 1 else ""
+    query_string = location.query_string[1:] if len(location.query_string) > 1 else ""
 
     # TODO: In order to match `react-router`, this will need to return a tuple of the search params \
     # and a function to update them. This is currently not possible without reactpy core having a \

src/reactpy_router/routers.py

@@ -7,19 +7,15 @@
 from typing import TYPE_CHECKING, Any, Union, cast
 
 from reactpy import component, use_memo, use_state
-from reactpy.backend.types import Connection, Location
 from reactpy.core.hooks import ConnectionContext, use_connection
-from reactpy.types import ComponentType, VdomDict
+from reactpy.types import Component, VdomDict, Connection, Location
 
 from reactpy_router.components import History
 from reactpy_router.hooks import RouteState, _route_state_context
 from reactpy_router.resolvers import ReactPyResolver
 
 if TYPE_CHECKING:
     from collections.abc import Iterator, Sequence
-
-    from reactpy.core.component import Component
-
     from reactpy_router.types import CompiledRoute, MatchedRoute, Resolver, Route, Router
 
 __all__ = ["browser_router", "create_router"]
@@ -105,11 +101,11 @@ def _add_route_key(match: MatchedRoute, key: str | int) -> Any:
     """Add a key to the VDOM or component on the current route, if it doesn't already have one."""
     element = match.element
     if hasattr(element, "render") and not element.key:
-        element = cast(ComponentType, element)
+        element = cast(Component, element)
         element.key = key
     elif isinstance(element, dict) and not element.get("key", None):
         element = cast(VdomDict, element)
-        element["key"] = key
+        element["attributes"]["key"] = key
     return match
 
 
@@ -118,10 +114,10 @@ def _match_route(
     location: Location,
 ) -> MatchedRoute | None:
     for resolver in compiled_routes:
-        match = resolver.resolve(location.pathname)
+        match = resolver.resolve(location.path)
         if match is not None:
             return _add_route_key(match, resolver.key)
 
-    _logger.debug("No matching route found for %s", location.pathname)
+    _logger.debug("No matching route found for %s", location.path)
 
     return None

src/reactpy_router/types.py

@@ -11,7 +11,7 @@
 if TYPE_CHECKING:
     from collections.abc import Sequence
 
-    from reactpy.backend.types import Location
+    from reactpy.types import Location
     from reactpy.core.component import Component
     from reactpy.types import Key
 
@@ -42,7 +42,7 @@ class Route:
 
     def __hash__(self) -> int:
         el = self.element
-        key = el["key"] if is_vdom(el) and "key" in el else getattr(el, "key", id(el))
+        key = el["attributes"]["key"] if is_vdom(el) and "attributes" in el and "key" in el["attributes"] else getattr(el, "key", id(el))
         return hash((self.path, key, self.routes))