Force user to add slashes to tail and head of path_prefix, and create ReactPyApp

Author: Archmonger

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

@@ -7,7 +7,7 @@ export function mountReactPy(props: MountProps) {
   // WebSocket route for component rendering
   const wsProtocol = `ws${window.location.protocol === "https:" ? "s" : ""}:`;
   const wsOrigin = `${wsProtocol}//${window.location.host}`;
-  const componentUrl = new URL(`${wsOrigin}/${props.pathPrefix}/${props.appendComponentPath || ""}`);
+  const componentUrl = new URL(`${wsOrigin}${props.pathPrefix}${props.appendComponentPath || ""}`);
 
   // Embed the initial HTTP path into the WebSocket URL
   componentUrl.searchParams.append("http_pathname", window.location.pathname);
@@ -19,7 +19,7 @@ export function mountReactPy(props: MountProps) {
   const client = new ReactPyClient({
     urls: {
       componentUrl: componentUrl,
-      jsModulesPath: `${window.location.origin}/${props.pathPrefix}/modules/`,
+      jsModulesPath: `${window.location.origin}${props.pathPrefix}modules/`,
       queryString: document.location.search,
     },
     reconnectOptions: {

src/reactpy/backend/middleware.py

@@ -15,7 +15,7 @@
 from servestatic import ServeStaticASGI
 
 from reactpy.backend.types import Connection, Location
-from reactpy.backend.utils import check_path, import_components, normalize_url_path
+from reactpy.backend.utils import check_path, import_components
 from reactpy.config import REACTPY_WEB_MODULES_DIR
 from reactpy.core.hooks import ConnectionContext
 from reactpy.core.layout import Layout
@@ -37,15 +37,15 @@ def __init__(
         root_components: Iterable[str],
         *,
         # TODO: Add a setting attribute to this class. Or maybe just put a shit ton of kwargs here. Or add a **kwargs that resolves to a TypedDict?
-        path_prefix: str = "reactpy/",
+        path_prefix: str = "/reactpy/",
         web_modules_dir: Path | None = None,
     ) -> None:
         """Configure the ASGI app. Anything initialized in this method will be shared across all future requests."""
         # URL path attributes
-        self.path_prefix = normalize_url_path(path_prefix)
-        self.dispatcher_path = f"/{self.path_prefix}/"
-        self.web_modules_path = f"/{self.path_prefix}/modules/"
-        self.static_path = f"/{self.path_prefix}/static/"
+        self.path_prefix = path_prefix
+        self.dispatcher_path = self.path_prefix
+        self.web_modules_path = f"{self.path_prefix}modules/"
+        self.static_path = f"{self.path_prefix}static/"
         self.dispatcher_pattern = re.compile(
             f"^{self.dispatcher_path}(?P<dotted_path>[^/]+)/?"
         )
@@ -161,6 +161,7 @@ async def run_dispatcher(
             else:
                 raise RuntimeError("No root component provided.")
 
+            # TODO: Get HTTP URL from `http_pathname` and `http_query_string`
             parsed_url = urllib.parse.urlparse(scope["path"])
 
             await serve_layout(
@@ -169,6 +170,7 @@ async def run_dispatcher(
                         component(),
                         value=Connection(
                             scope=scope,
+                            # TODO: Rename `search` to `query_string`
                             location=Location(
                                 parsed_url.path,
                                 f"?{parsed_url.query}" if parsed_url.query else "",

src/reactpy/backend/standalone.py

@@ -2,40 +2,36 @@
 import os
 import re
 from collections.abc import Coroutine, Sequence
+from dataclasses import dataclass
 from email.utils import formatdate
 from logging import getLogger
 from pathlib import Path
 from typing import Any, Callable
 
 from reactpy import html
 from reactpy.backend.middleware import ReactPyMiddleware
-from reactpy.backend.utils import dict_to_byte_list, find_and_replace, vdom_head_to_html
+from reactpy.backend.utils import dict_to_byte_list, replace_many, vdom_head_to_html
 from reactpy.core.types import VdomDict
 from reactpy.types import RootComponentConstructor
 
 _logger = getLogger(__name__)
 
 
 class ReactPy(ReactPyMiddleware):
-    cached_index_html = ""
-    etag = ""
-    last_modified = ""
-    templates_dir = Path(__file__).parent.parent / "templates"
-    index_html_path = templates_dir / "index.html"
     multiple_root_components = False
 
     def __init__(
         self,
         root_component: RootComponentConstructor,
         *,
-        path_prefix: str = "reactpy/",
+        path_prefix: str = "/reactpy/",
         web_modules_dir: Path | None = None,
         http_headers: dict[str, str | int] | None = None,
         html_head: VdomDict | None = None,
         html_lang: str = "en",
     ) -> None:
         super().__init__(
-            app=self.reactpy_app,
+            app=ReactPyApp(self),
             root_components=[],
             path_prefix=path_prefix,
             web_modules_dir=web_modules_dir,
@@ -46,7 +42,17 @@ def __init__(
         self.html_head = html_head or html.head()
         self.html_lang = html_lang
 
-    async def reactpy_app(
+
+@dataclass
+class ReactPyApp:
+    parent: ReactPy
+    _cached_index_html = ""
+    _etag = ""
+    _last_modified = ""
+    _templates_dir = Path(__file__).parent.parent / "templates"
+    _index_html_path = _templates_dir / "index.html"
+
+    async def __call__(
         self,
         scope: dict[str, Any],
         receive: Callable[..., Coroutine],
@@ -65,18 +71,18 @@ async def reactpy_app(
             return
 
         # Store the HTTP response in memory for performance
-        if not self.cached_index_html:
+        if not self._cached_index_html:
             self.process_index_html()
 
         # Return headers for all HTTP responses
         request_headers = dict(scope["headers"])
         response_headers: dict[str, str | int] = {
-            "etag": self.etag,
-            "last-modified": self.last_modified,
+            "etag": self._etag,
+            "last-modified": self._last_modified,
             "access-control-allow-origin": "*",
             "cache-control": "max-age=60, public",
-            "content-length": len(self.cached_index_html),
-            **self.extra_headers,
+            "content-length": len(self._cached_index_html),
+            **self.parent.extra_headers,
         }
 
         # Browser is asking for the headers
@@ -91,7 +97,7 @@ async def reactpy_app(
             )
 
         # Browser already has the content cached
-        if request_headers.get(b"if-none-match") == self.etag.encode():
+        if request_headers.get(b"if-none-match") == self._etag.encode():
             response_headers.pop("content-length")
             return await http_response(
                 scope["method"],
@@ -107,37 +113,37 @@ async def reactpy_app(
             scope["method"],
             send,
             200,
-            self.cached_index_html,
+            self._cached_index_html,
             content_type=b"text/html",
             headers=dict_to_byte_list(response_headers),
         )
 
     def match_dispatch_path(self, scope: dict) -> bool:
         """Method override to remove `dotted_path` from the dispatcher URL."""
-        return str(scope["path"]) == self.dispatcher_path
+        return str(scope["path"]) == self.parent.dispatcher_path
 
     def process_index_html(self):
         """Process the index.html and store the results in memory."""
-        with open(self.index_html_path, encoding="utf-8") as file_handle:
+        with open(self._index_html_path, encoding="utf-8") as file_handle:
             cached_index_html = file_handle.read()
 
-        self.cached_index_html = find_and_replace(
+        self._cached_index_html = replace_many(
             cached_index_html,
             {
-                'from "index.ts"': f'from "{self.static_path}index.js"',
-                '<html lang="en">': f'<html lang="{self.html_lang}">',
-                "<head></head>": vdom_head_to_html(self.html_head),
-                "{path_prefix}": self.path_prefix,
+                'from "index.ts"': f'from "{self.parent.static_path}index.js"',
+                '<html lang="en">': f'<html lang="{self.parent.html_lang}">',
+                "<head></head>": vdom_head_to_html(self.parent.html_head),
+                "{path_prefix}": self.parent.path_prefix,
                 "{reconnect_interval}": "750",
                 "{reconnect_max_interval}": "60000",
                 "{reconnect_max_retries}": "150",
                 "{reconnect_backoff_multiplier}": "1.25",
             },
         )
 
-        self.etag = f'"{hashlib.md5(self.cached_index_html.encode(), usedforsecurity=False).hexdigest()}"'
-        self.last_modified = formatdate(
-            os.stat(self.index_html_path).st_mtime, usegmt=True
+        self._etag = f'"{hashlib.md5(self._cached_index_html.encode(), usedforsecurity=False).hexdigest()}"'
+        self._last_modified = formatdate(
+            os.stat(self._index_html_path).st_mtime, usegmt=True
         )
 
 

src/reactpy/backend/utils.py

@@ -12,14 +12,6 @@
 logger = logging.getLogger(__name__)
 
 
-def normalize_url_path(url: str) -> str:
-    """Normalize a URL path."""
-    new_url = re.sub(r"/+", "/", url)
-    new_url = new_url.lstrip("/")
-    new_url = new_url.rstrip("/")
-    return new_url
-
-
 def import_dotted_path(dotted_path: str) -> Any:
     """Imports a dotted path and returns the callable."""
     module_name, component_name = dotted_path.rsplit(".", 1)
@@ -58,13 +50,15 @@ def check_path(url_path: str) -> str:
         return "URL path must not be empty."
     if not isinstance(url_path, str):
         return "URL path is must be a string."
-    if not url_path[0].isalnum():
-        return "URL path must start with an alphanumeric character."
+    if not url_path.startswith("/"):
+        return "URL path must start with a forward slash."
+    if not url_path.endswith("/"):
+        return "URL path must end with a forward slash."
 
     return ""
 
 
-def find_and_replace(content: str, replacements: dict[str, str]) -> str:
+def replace_many(content: str, replacements: dict[str, str]) -> str:
     """Find and replace several key-values, and throw and error if the substring is not found."""
     for key, value in replacements.items():
         if key not in content: