Revert to dumb script for links

Author: Archmonger

src/js/src/index.js

@@ -44,6 +44,9 @@ export function History({ onHistoryChange }) {
   return null;
 }
 
+// FIXME: The Link component is unused due to a ReactPy core rendering bug
+// which causes duplicate rendering (and thus duplicate event listeners).
+// https://github.com/reactive-python/reactpy/pull/1224
 export function Link({ onClick, linkClass }) {
   // This component is not the actual anchor link.
   // It is an event listener for the link component created by ReactPy.

src/reactpy_router/components.py

@@ -2,9 +2,10 @@
 
 from pathlib import Path
 from typing import Any
+from urllib.parse import urljoin
 from uuid import uuid4
 
-from reactpy import component, html
+from reactpy import component, event, html, use_connection
 from reactpy.backend.types import Location
 from reactpy.core.component import Component
 from reactpy.core.types import VdomDict
@@ -25,6 +26,8 @@
 )
 """Client-side portion of link handling"""
 
+link_js_content = (Path(__file__).parent / "static" / "link.js").read_text(encoding="utf-8")
+
 
 def link(attributes: dict[str, Any], *children: Any) -> Component:
     """Create a link with the given attributes and children."""
@@ -55,10 +58,42 @@ def _link(attributes: dict[str, Any], *children: Any) -> VdomDict:
         "className": class_name,
     }
 
+    # FIXME: This component currently works in a "dumb" way by trusting that ReactPy's script tag \
+    # properly sets the location due to bugs in ReactPy rendering.
+    # https://github.com/reactive-python/reactpy/pull/1224
+    current_path = use_connection().location.pathname
+
+    @event(prevent_default=True)
     def on_click(_event: dict[str, Any]) -> None:
-        set_location(Location(**_event))
+        pathname, search = to.split("?", 1) if "?" in to else (to, "")
+        if search:
+            search = f"?{search}"
+
+        # Resolve relative paths that match `../foo`
+        if pathname.startswith("../"):
+            pathname = urljoin(current_path, pathname)
+
+        # Resolve relative paths that match `foo`
+        if not pathname.startswith("/"):
+            pathname = urljoin(current_path, pathname)
+
+        # Resolve relative paths that match `/foo/../bar`
+        while "/../" in pathname:
+            part_1, part_2 = pathname.split("/../", 1)
+            pathname = urljoin(f"{part_1}/", f"../{part_2}")
+
+        # Resolve relative paths that match `foo/./bar`
+        pathname = pathname.replace("/./", "/")
+
+        set_location(Location(pathname, search))
+
+    attrs["onClick"] = on_click
+
+    return html._(html.a(attrs, *children), html.script(link_js_content.replace("UUID", uuid_string)))
 
-    return html._(html.a(attrs, *children), Link({"onClick": on_click, "linkClass": uuid_string}))
+    # def on_click(_event: dict[str, Any]) -> None:
+    #     set_location(Location(**_event))
+    # return html._(html.a(attrs, *children), Link({"onClick": on_click, "linkClass": uuid_string}))
 
 
 def route(path: str, element: Any | None, *routes: Route) -> Route:

src/reactpy_router/static/link.js

@@ -0,0 +1,8 @@
+document.querySelector(".UUID").addEventListener(
+  "click",
+  (event) => {
+    let to = event.target.getAttribute("href");
+    window.history.pushState({}, to, new URL(to, window.location));
+  },
+  { once: true },
+);