Remove FirstLoad and handle URL mutations on client-side

Author: Archmonger

src/js/src/index.ts

@@ -1,12 +1,7 @@
 import React from "preact/compat";
 import ReactDOM from "preact/compat";
 import { createLocationObject, pushState, replaceState } from "./utils";
-import {
-  HistoryProps,
-  LinkProps,
-  NavigateProps,
-  FirstLoadProps,
-} from "./types";
+import { HistoryProps, LinkProps, NavigateProps } from "./types";
 
 /**
  * Interface used to bind a ReactPy node to React.
@@ -26,8 +21,8 @@ export function bind(node) {
  * History component that captures browser "history go back" actions and notifies the server.
  */
 export function History({ onHistoryChangeCallback }: HistoryProps): null {
+  // Tell the server about history "popstate" events
   React.useEffect(() => {
-    // Register a listener for the "popstate" event and send data back to the server using the `onHistoryChange` callback.
     const listener = () => {
       onHistoryChangeCallback(createLocationObject());
     };
@@ -40,16 +35,10 @@ export function History({ onHistoryChangeCallback }: HistoryProps): null {
   });
 
   // Tell the server about the URL during the initial page load
-  // FIXME: This code is commented out since it currently runs every time any component
-  // is mounted due to a ReactPy core rendering bug. `FirstLoad` component is used instead.
-  // https://github.com/reactive-python/reactpy/pull/1224
-  // React.useEffect(() => {
-  //   onHistoryChange({
-  //     pathname: window.location.pathname,
-  //     search: window.location.search,
-  //   });
-  //   return () => {};
-  // }, []);
+  React.useEffect(() => {
+    onHistoryChangeCallback(createLocationObject());
+    return () => {};
+  }, []);
   return null;
 }
 
@@ -58,18 +47,18 @@ export function History({ onHistoryChangeCallback }: HistoryProps): null {
  *
  * This component is not the actual `<a>` link element. It is just an event
  * listener for ReactPy-Router's server-side link component.
- *
- * @disabled This component is currently unused due to a ReactPy core rendering bug
- * which causes duplicate rendering (and thus duplicate event listeners).
  */
 export function Link({ onClickCallback, linkClass }: LinkProps): null {
   React.useEffect(() => {
     // Event function that will tell the server about clicks
-    const handleClick = (event: MouseEvent) => {
-      event.preventDefault();
-      let to = (event.target as HTMLElement).getAttribute("href");
-      pushState(to);
-      onClickCallback(createLocationObject());
+    const handleClick = (event: Event) => {
+      let click_event = event as MouseEvent;
+      if (!click_event.ctrlKey) {
+        event.preventDefault();
+        let to = (event.currentTarget as HTMLElement).getAttribute("href");
+        pushState(to);
+        onClickCallback(createLocationObject());
+      }
     };
 
     // Register the event listener
@@ -82,7 +71,6 @@ export function Link({ onClickCallback, linkClass }: LinkProps): null {
 
     // Delete the event listener when the component is unmounted
     return () => {
-      let link = document.querySelector(`.${linkClass}`);
       if (link) {
         link.removeEventListener("click", handleClick);
       }
@@ -111,19 +99,3 @@ export function Navigate({
 
   return null;
 }
-
-/**
- * FirstLoad component that captures the URL during the initial page load and notifies the server.
- *
- * FIXME: This component only exists because of a ReactPy core rendering bug, and should be removed when the bug
- * is fixed. In the future, all this logic should be handled by the `History` component.
- * https://github.com/reactive-python/reactpy/pull/1224
- */
-export function FirstLoad({ onFirstLoadCallback }: FirstLoadProps): null {
-  React.useEffect(() => {
-    onFirstLoadCallback(createLocationObject());
-    return () => {};
-  }, []);
-
-  return null;
-}

src/js/src/types.ts

@@ -17,7 +17,3 @@ export interface NavigateProps {
   to: string;
   replace?: boolean;
 }
-
-export interface FirstLoadProps {
-  onFirstLoadCallback: (location: ReactPyLocation) => void;
-}

src/js/src/utils.ts

@@ -7,10 +7,18 @@ export function createLocationObject(): ReactPyLocation {
   };
 }
 
-export function pushState(to: string): void {
+export function pushState(to: any): void {
+  if (typeof to !== "string") {
+    console.error("pushState() requires a string argument.");
+    return;
+  }
   window.history.pushState(null, "", new URL(to, window.location.href));
 }
 
-export function replaceState(to: string): void {
+export function replaceState(to: any): void {
+  if (typeof to !== "string") {
+    console.error("replaceState() requires a string argument.");
+    return;
+  }
   window.history.replaceState(null, "", new URL(to, window.location.href));
 }

src/reactpy_router/components.py

@@ -2,10 +2,9 @@
 
 from pathlib import Path
 from typing import TYPE_CHECKING, Any
-from urllib.parse import urljoin
 from uuid import uuid4
 
-from reactpy import component, html, use_connection
+from reactpy import component, html, use_connection, use_ref
 from reactpy.backend.types import Location
 from reactpy.web.module import export, module_from_file
 
@@ -34,13 +33,6 @@
 )
 """Client-side portion of the navigate component"""
 
-FirstLoad = export(
-    module_from_file("reactpy-router", file=Path(__file__).parent / "static" / "bundle.js"),
-    ("FirstLoad"),
-)
-
-link_js_content = (Path(__file__).parent / "static" / "link.js").read_text(encoding="utf-8")
-
 
 def link(attributes: dict[str, Any], *children: Any, key: Key | None = None) -> Component:
     """
@@ -59,8 +51,7 @@ def link(attributes: dict[str, Any], *children: Any, key: Key | None = None) ->
 @component
 def _link(attributes: dict[str, Any], *children: Any) -> VdomDict:
     attributes = attributes.copy()
-    uuid_string = f"link-{uuid4().hex}"
-    class_name = f"{uuid_string}"
+    class_name = use_ref(f"link-{uuid4().hex}").current
     set_location = _use_route_state().set_location
     if "className" in attributes:
         class_name = " ".join([attributes.pop("className"), class_name])
@@ -80,44 +71,10 @@ 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
-
-    def on_click(_event: dict[str, Any]) -> None:
-        if _event.get("ctrlKey", False):
-            return
-
-        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)))
+    def on_click_callback(_event: dict[str, Any]) -> None:
+        set_location(Location(**_event))
 
-    # def on_click_callback(_event: dict[str, Any]) -> None:
-    #     set_location(Location(**_event))
-    # return html._(html.a(attrs, *children), Link({"onClickCallback": on_click_callback, "linkClass": uuid_string}))
+    return html._(Link({"onClickCallback": on_click_callback, "linkClass": class_name}), html.a(attrs, *children))
 
 
 def route(path: str, element: Any | None, *routes: Route) -> Route:

src/reactpy_router/routers.py

@@ -11,7 +11,7 @@
 from reactpy.core.hooks import ConnectionContext, use_connection
 from reactpy.types import ComponentType, VdomDict
 
-from reactpy_router.components import FirstLoad, History
+from reactpy_router.components import History
 from reactpy_router.hooks import RouteState, _route_state_context
 from reactpy_router.resolvers import StarletteResolver
 
@@ -76,9 +76,9 @@ def router(
     if match:
         if first_load:
             # We need skip rendering the application on 'first_load' to avoid
-            # rendering it twice. The second render occurs following
-            # the impending on_history_change event
+            # rendering it twice. The second render follows the on_history_change event
             route_elements = []
+            set_first_load(False)
         else:
             route_elements = [
                 _route_state_context(
@@ -94,15 +94,8 @@ def on_history_change(event: dict[str, Any]) -> None:
             if location != new_location:
                 set_location(new_location)
 
-        def on_first_load(event: dict[str, Any]) -> None:
-            """Callback function used within the JavaScript `FirstLoad` component."""
-            if first_load:
-                set_first_load(False)
-                on_history_change(event)
-
         return ConnectionContext(
             History({"onHistoryChangeCallback": on_history_change}),  # type: ignore[return-value]
-            FirstLoad({"onFirstLoadCallback": on_first_load}) if first_load else "",
             *route_elements,
             value=Connection(old_conn.scope, location, old_conn.carrier),
         )