clean up http path/qs handling

Author: Archmonger

src/js/packages/@reactpy/client/src/mount.tsx

@@ -12,12 +12,9 @@ export function mountReactPy(props: MountProps) {
   );
 
   // Embed the initial HTTP path into the WebSocket URL
-  componentUrl.searchParams.append("http_pathname", 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);
   }
 
   // Configure a new ReactPy client

src/js/packages/@reactpy/client/src/websocket.ts

@@ -1,6 +1,19 @@
 import type { CreateReconnectingWebSocketProps } from "./types";
 import log from "./logger";
 
+function syncBrowserLocation(url: URL): void {
+  // The window will always have a HTTP path, so ReactPy should always be aware of it.
+  url.searchParams.set("path", window.location.pathname);
+
+  if (window.location.search) {
+    // Set the query string parameter if the HTTP location has a query string.
+    url.searchParams.set("qs", window.location.search);
+  } else {
+    // Remove any existing (potentially stale) query string parameter if the current location doesn't have one
+    url.searchParams.delete("qs");
+  }
+}
+
 export function createReconnectingWebSocket(
   props: CreateReconnectingWebSocketProps,
 ) {
@@ -15,8 +28,7 @@ export function createReconnectingWebSocket(
     if (closed) {
       return;
     }
-    props.url.searchParams.set("path", window.location.pathname);
-    props.url.searchParams.set("qs", window.location.search);
+    syncBrowserLocation(props.url);
     socket.current = new WebSocket(props.url);
     socket.current.onopen = () => {
       everConnected = true;

src/reactpy/executors/asgi/middleware.py

@@ -42,6 +42,14 @@
 _logger = logging.getLogger(__name__)
 
 
+def _location_from_websocket_query_string(query_string: str) -> Location:
+    ws_query_string = urllib.parse.parse_qs(query_string, strict_parsing=True)
+    return Location(
+        path=ws_query_string.get("path", [""])[0],
+        query_string=ws_query_string.get("qs", [""])[0],
+    )
+
+
 class ReactPyMiddleware:
     root_component: RootComponentConstructor | None = None
     root_components: dict[str, RootComponentConstructor]
@@ -221,14 +229,10 @@ async def run_dispatcher(self) -> None:
                 raise RuntimeError("No root component provided.")
 
             # Create a connection object by analyzing the websocket's query string.
-            ws_query_string = urllib.parse.parse_qs(
-                self.scope["query_string"].decode(), strict_parsing=True
-            )
             connection = Connection(
                 scope=self.scope,  # type: ignore
-                location=Location(
-                    path=ws_query_string.get("http_pathname", [""])[0],
-                    query_string=ws_query_string.get("http_query_string", [""])[0],
+                location=_location_from_websocket_query_string(
+                    self.scope["query_string"].decode()
                 ),
                 carrier=self,
             )

tests/test_asgi/test_standalone.py

@@ -9,6 +9,7 @@
 import reactpy
 from reactpy import html
 from reactpy.config import REACTPY_TESTS_DEFAULT_TIMEOUT
+from reactpy.executors.asgi.middleware import _location_from_websocket_query_string
 from reactpy.executors.asgi.standalone import ReactPy
 from reactpy.testing import BackendFixture, DisplayFixture, poll
 from reactpy.types import Connection, Location
@@ -107,6 +108,60 @@ def ShowRoute():
         await poll_location.until_equals(loc)
 
 
+async def test_use_location_after_reconnect_from_client_navigation(
+    display: DisplayFixture,
+):
+    location = reactpy.Ref()
+
+    @poll
+    async def poll_location():
+        return getattr(location, "current", None)
+
+    @reactpy.component
+    def ShowRoute():
+        location.current = reactpy.use_location()
+        return html.pre(str(location.current))
+
+    await display.page.add_init_script(
+        """
+                (() => {
+                    window.__reactpySockets = [];
+                    const NativeWebSocket = window.WebSocket;
+                    window.WebSocket = class extends NativeWebSocket {
+                        constructor(url, protocols) {
+                            super(url, protocols);
+                            window.__reactpySockets.push(this);
+                        }
+                    };
+                })();
+                """
+    )
+
+    await display.show(ShowRoute)
+    await poll_location.until_equals(Location("/", ""))
+
+    await display.page.evaluate(
+        """
+                () => {
+                    history.pushState({}, "", "/client-route?view=next");
+                    const socket = window.__reactpySockets.at(-1);
+                    if (!socket) {
+                        throw new Error("Missing ReactPy websocket");
+                    }
+                    socket.close();
+                }
+                """
+    )
+
+    await poll_location.until_equals(Location("/client-route", "?view=next"))
+
+
+def test_location_from_websocket_query_string_uses_path_and_qs():
+    assert _location_from_websocket_query_string(
+        "path=%2Fcurrent&qs=%3Fview%3Dnext"
+    ) == Location("/current", "?view=next")
+
+
 async def test_carrier(display: DisplayFixture):
     hook_val = reactpy.Ref()