fix url router

Author: Archmonger

src/js/src/client.ts

@@ -1,21 +1,35 @@
 import {
-  ReactPyClient,
+  BaseReactPyClient,
   createReconnectingWebSocket,
   type GenericReactPyClientProps,
+  type ReactPyClientInterface,
+  type ReactPyModule,
+  type ReactPyUrls,
 } from "@reactpy/client";
 
-export class ReactPyDjangoClient extends ReactPyClient {
+export class ReactPyDjangoClient
+  extends BaseReactPyClient
+  implements ReactPyClientInterface
+{
+  urls: ReactPyUrls;
+  socket: { current?: WebSocket };
+  mountElement: HTMLElement;
   prerenderElement: HTMLElement | null = null;
   offlineElement: HTMLElement | null = null;
+  private readonly messageQueue: any[] = [];
 
   constructor(props: GenericReactPyClientProps) {
-    super(props);
+    super();
+
+    this.urls = props.urls;
+    this.mountElement = props.mountElement;
     this.prerenderElement = document.getElementById(
       props.mountElement.id + "-prerender",
     );
     this.offlineElement = document.getElementById(
       props.mountElement.id + "-offline",
     );
+
     this.socket = createReconnectingWebSocket({
       url: this.urls.componentUrl,
       readyPromise: this.ready,
@@ -42,4 +56,19 @@ export class ReactPyDjangoClient extends ReactPyClient {
       },
     });
   }
+
+  sendMessage(message: any): void {
+    if (
+      this.socket.current &&
+      this.socket.current.readyState === WebSocket.OPEN
+    ) {
+      this.socket.current.send(JSON.stringify(message));
+    } else {
+      this.messageQueue.push(message);
+    }
+  }
+
+  loadModule(moduleName: string): Promise<ReactPyModule> {
+    return import(`${this.urls.jsModulesPath}${moduleName}`);
+  }
 }

src/js/src/mount.tsx

@@ -20,12 +20,9 @@ export function mountComponent(
   const componentUrl = new URL(`${wsOrigin}/${urlPrefix}/${componentPath}`);
 
   // Embed the initial HTTP path into the WebSocket URL
-  componentUrl.searchParams.append("http_path", window.location.pathname);
+  componentUrl.searchParams.append("path", window.location.pathname);
   if (window.location.search) {
-    componentUrl.searchParams.append(
-      "http_query_string",
-      window.location.search,
-    );
+    componentUrl.searchParams.append("qs", window.location.search);
   }
 
   // HTTP route for JavaScript modules

src/reactpy_django/websocket/consumer.py

@@ -156,8 +156,8 @@ async def run_dispatcher(self):
         has_args = scope["url_route"]["kwargs"].get("has_args")
         scope["reactpy"] = {"id": str(uuid)}
         query_string = parse_qs(scope["query_string"].decode(), strict_parsing=True)
-        http_path = query_string.get("http_path", [""])[0]
-        http_query_string = query_string.get("http_query_string", [""])[0]
+        http_path = query_string.get("path", [""])[0]
+        http_query_string = query_string.get("qs", [""])[0]
         self.recv_queue = asyncio.Queue()
         connection = Connection(  # For `use_connection`
             scope=scope,

tests/test_app/router/components.py

@@ -1,5 +1,7 @@
-from reactpy import component, html, use_location
-from reactpy_router import route, use_params, use_search_params
+from uuid import uuid4
+
+from reactpy import component, html, use_location, use_state
+from reactpy_router import link, route, use_params, use_search_params
 from reactpy_router.types import Route
 
 from reactpy_django.router import django_router
@@ -27,6 +29,21 @@ def show_route(path: str, *children: Route) -> Route:
     return route(path, display_params(path), *children)
 
 
+@component
+def next_page():
+    url_params = use_params()
+    state, set_state = use_state(uuid4)
+    page = url_params.get("page", 0)
+    next_page = page + 1
+    return html.fragment(
+        display_params("/router/next/<int:page>/"),
+        html.div({"id": "router-uuid", "data-uuid": state.hex}, f"UUID: {state.hex}"),
+        html.button(
+            link({"to": f"/router/next/{next_page}/"}, "Next Page"),
+        ),
+    )
+
+
 @component
 def main():
     return django_router(
@@ -39,4 +56,5 @@ def main():
         show_route("/router/uuid/<uuid:value>/"),
         show_route("/router/any/<any:name>"),
         show_route("/router/two/<int:value>/<str:value2>/"),
+        route("/router/next/<int:page>/", next_page()),
     )

tests/test_app/tests/test_components.py

@@ -535,6 +535,19 @@ def test_url_router_int_and_string(self):
         string = self.page.query_selector("#router-string")
         assert string.text_content() == "/router/two/<int:value>/<str:value2>/"
 
+    def test_url_router_navigation_state(self):
+        self.page.goto(f"{self.live_server_url}/router/next/1/")
+        uuid1 = self.page.wait_for_selector("#router-uuid").get_attribute("data-uuid")
+        self.page.locator("button").click()
+        self.page.wait_for_selector(f"#router-path[data-path='/router/next/2/']")
+        uuid2 = self.page.wait_for_selector("#router-uuid").get_attribute("data-uuid")
+        assert uuid1 == uuid2
+        self.page.go_back()
+        self.page.wait_for_selector(f"#router-path[data-path='/router/next/1/']")
+        uuid3 = self.page.wait_for_selector("#router-uuid").get_attribute("data-uuid")
+        # When going back, it should also be a new mount if navigation always remounts
+        assert uuid1 == uuid3
+
     #######################
     # Channel Layer Tests #
     #######################