server-side link component

Author: Archmonger

src/js/package-lock.json

@@ -18,16 +18,15 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "devDependencies": {
-    "prettier": "^2.2.1",
     "eslint": "^8.38.0",
     "eslint-plugin-react": "^7.32.2",
+    "prettier": "^2.2.1",
     "rollup": "^2.35.1",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-replace": "^2.2.0"
   },
   "dependencies": {
-    "htm": "^3.0.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }

src/js/package.json

@@ -1,44 +1,28 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import htm from "htm";
-
-const html = htm.bind(React.createElement);
 
 export function bind(node) {
-  return {
-    create: (type, props, children) =>
-      React.createElement(type, props, ...children),
-    render: (element) => {
-      ReactDOM.render(element, node);
-    },
-    unmount: () => ReactDOM.unmountComponentAtNode(node),
-  };
-}
-
-export function History({ onChange }) {
-  // capture changes to the browser's history
-  React.useEffect(() => {
-    const listener = () => {
-      onChange({
-        pathname: window.location.pathname,
-        search: window.location.search,
-      });
+    return {
+        create: (type, props, children) =>
+            React.createElement(type, props, ...children),
+        render: (element) => {
+            ReactDOM.render(element, node);
+        },
+        unmount: () => ReactDOM.unmountComponentAtNode(node),
     };
-    window.addEventListener("popstate", listener);
-    return () => window.removeEventListener("popstate", listener);
-  });
-  return null;
 }
 
-export function Link({ to, onClick, children, ...props }) {
-  const handleClick = (event) => {
-    event.preventDefault();
-    window.history.pushState({}, to, new URL(to, window.location));
-    onClick({
-      pathname: window.location.pathname,
-      search: window.location.search,
+export function History({ onChange }) {
+    // capture changes to the browser's history
+    React.useEffect(() => {
+        const listener = () => {
+            onChange({
+                pathname: window.location.pathname,
+                search: window.location.search,
+            });
+        };
+        window.addEventListener("popstate", listener);
+        return () => window.removeEventListener("popstate", listener);
     });
-  };
-
-  return html`<a href=${to} onClick=${handleClick} ...${props}>${children}</a>`;
+    return null;
 }

src/js/src/index.js

@@ -7,6 +7,7 @@
 from pathlib import Path
 from typing import Any, Callable, Iterator, Literal, Sequence, TypeVar
 from urllib.parse import parse_qs
+from uuid import uuid4
 
 from reactpy import (
     component,
@@ -68,7 +69,7 @@ def router_component(
                 _route_state_context(element, value=_RouteState(set_location, params)),
                 value=Connection(old_conn.scope, location, old_conn.carrier),
             ),
-            _history({"on_change": lambda event: set_location(Location(**event))}),
+            History({"on_change": lambda event: set_location(Location(**event))}),
             key=location.pathname + select,
         )
 
@@ -79,12 +80,14 @@ def router_component(
 def link(*children: VdomChild, to: str, **attributes: Any) -> VdomDict:
     """A component that renders a link to the given path"""
     set_location = _use_route_state().set_location
+    uuid = uuid4().hex
     attrs = {
         **attributes,
         "to": to,
         "onClick": lambda event: set_location(Location(**event)),
+        "id": uuid,
     }
-    return _link(attrs, *children)
+    return html._(html.a(attrs, *children), html.script(link_js_content.replace("UUID", uuid)))
 
 
 def use_params() -> dict[str, Any]:
@@ -150,10 +153,11 @@ def _match_route(
     return matches or None
 
 
-_link, _history = export(
+History = export(
     module_from_file("reactpy-router", file=Path(__file__).parent / "bundle.js"),
-    ("Link", "History"),
+    ("History"),
 )
+link_js_content = (Path(__file__).parent / "js" / "Link.js").read_text(encoding="utf-8")
 
 
 @dataclass

src/reactpy_router/core.py

@@ -0,0 +1,8 @@
+document.getElementById("UUID").addEventListener("click", (event) => {
+    event.preventDefault();
+    window.history.pushState({}, to, new URL(to, window.location));
+    onClick({
+        pathname: window.location.pathname,
+        search: window.location.search,
+    });
+});

src/reactpy_router/js/Link.js

@@ -11,4 +11,3 @@
 browser_router = create_router(Resolver)
 """This is the recommended router for all ReactPy Router web projects.
 It uses the DOM History API to update the URL and manage the history stack."""
-# TODO: Check if this is true. If not, make it true.