reflex 0.8.0a4__tar.gz → 0.8.0a5__tar.gz

{reflex-0.8.0a4 → reflex-0.8.0a5}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: reflex
-Version: 0.8.0a4
+Version: 0.8.0a5
 Summary: Web apps in pure Python.
 Project-URL: homepage, https://reflex.dev
 Project-URL: repository, https://github.com/reflex-dev/reflex
@@ -19,7 +19,7 @@ Classifier: Programming Language :: Python :: 3.12
 Classifier: Programming Language :: Python :: 3.13
 Requires-Python: <4.0,>=3.10
 Requires-Dist: alembic<2.0,>=1.15.2
-Requires-Dist: click>=8
+Requires-Dist: click>=8.2
 Requires-Dist: fastapi>=0.115.0
 Requires-Dist: granian[reload]>=2.2.5
 Requires-Dist: httpx<1.0,>=0.28.0

{reflex-0.8.0a4 → reflex-0.8.0a5}/pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "reflex"
-version = "0.8.0a4"
+version = "0.8.0a5"
 description = "Web apps in pure Python."
 license.text = "Apache-2.0"
 authors = [
@@ -35,7 +35,7 @@ dependencies = [
   "reflex-hosting-cli >=0.1.47",
   "rich >=13,<15",
   "sqlmodel >=0.0.24,<0.1",
-  "click >=8",
+  "click >=8.2",
   "typing_extensions >=4.13.0",
   "wrapt >=1.17.0,<2.0",
 ]

{reflex-0.8.0a4 → reflex-0.8.0a5}/reflex/.templates/jinja/web/styles/styles.css.jinja2

@@ -1,4 +1,5 @@
 {%- block imports_styles %}
+@layer __reflex_base;
 {% for sheet_name in stylesheets %}
     {{- "@import url('" + sheet_name + "'); " }}
 {% endfor %}

reflex-0.8.0a5/reflex/.templates/web/app/routes.js

@@ -0,0 +1,10 @@
+import { route } from "@react-router/dev/routes";
+import { flatRoutes } from "@react-router/fs-routes";
+
+export default [
+  route("404", "routes/[404]._index.jsx", { id: "404" }),
+  ...(await flatRoutes({
+    ignoredRouteFiles: ["routes/\\[404\\]._index.jsx"],
+  })),
+  route("*", "routes/[404]._index.jsx"),
+];

{reflex-0.8.0a4 → reflex-0.8.0a5}/reflex/.templates/web/utils/client_side_routing.js

@@ -25,7 +25,7 @@ export const useClientSideRouting = () => {
       const search = window.location.search;
 
       // Use navigate instead of replace
-      navigate(path + search, { replace: true })
+      navigate(path + search, { replace: true, state: { fromNotFound: true } })
         .then(() => {
           // Check if we're still on a NotFound route
           // Note: This depends on how your routes are set up

{reflex-0.8.0a4 → reflex-0.8.0a5}/reflex/.templates/web/utils/state.js

@@ -5,7 +5,7 @@ import JSON5 from "json5";
 import env from "$/env.json";
 import reflexEnvironment from "$/reflex.json";
 import Cookies from "universal-cookie";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import {
   useLocation,
   useNavigate,
@@ -851,7 +851,7 @@ export const useEventLoop = (
   }, [paramsR]);
 
   // Function to add new events to the event queue.
-  const addEvents = (events, args, event_actions) => {
+  const addEvents = useCallback((events, args, event_actions) => {
     const _events = events.filter((e) => e !== undefined && e !== null);
 
     if (!(args instanceof Array)) {
@@ -894,7 +894,7 @@ export const useEventLoop = (
     } else {
       queueEvents(_events, socket, false, navigate, () => params.current);
     }
-  };
+  }, []);
 
   const sentHydrate = useRef(false); // Avoid double-hydrate due to React strict-mode
   useEffect(() => {
@@ -1020,31 +1020,42 @@ export const useEventLoop = (
     return () => window.removeEventListener("storage", handleStorage);
   });
 
+  const handleNavigationEvents = useRef(false);
   // Route after the initial page hydration
   useEffect(() => {
+    // The first time this effect runs is initial load, so don't handle
+    // any navigation events.
+    if (!handleNavigationEvents.current) {
+      handleNavigationEvents.current = true;
+      return;
+    }
+    if (location.state?.fromNotFound) {
+      // If the redirect is from a 404 page, we skip onLoadInternalEvent,
+      // since it was already run when the 404 page was first rendered.
+      return;
+    }
     // This will run when the location changes
     if (
-      location.pathname + location.search + location.hash !==
-      prevLocationRef.current.pathname +
-        prevLocationRef.current.search +
-        prevLocationRef.current.hash
+      location.pathname + location.search ===
+      prevLocationRef.current.pathname + prevLocationRef.current.search
     ) {
-      // Equivalent to routeChangeStart - runs when navigation begins
-      const change_start = () => {
-        const main_state_dispatch = dispatch["reflex___state____state"];
-        if (main_state_dispatch !== undefined) {
-          main_state_dispatch({ is_hydrated_rx_state_: false });
-        }
-      };
-      change_start();
-
-      // Equivalent to routeChangeComplete - runs after navigation completes
-      const change_complete = () => addEvents(onLoadInternalEvent());
-      change_complete();
+      if (location.hash) {
+        // If the hash is the same, we don't need to do anything.
+        return;
+      }
+    }
 
-      // Update the ref
-      prevLocationRef.current = location;
+    // Equivalent to routeChangeStart - runs when navigation begins
+    const main_state_dispatch = dispatch["reflex___state____state"];
+    if (main_state_dispatch !== undefined) {
+      main_state_dispatch({ is_hydrated_rx_state_: false });
     }
+
+    // Equivalent to routeChangeComplete - runs after navigation completes
+    addEvents(onLoadInternalEvent());
+
+    // Update the ref
+    prevLocationRef.current = location;
   }, [location, dispatch, onLoadInternalEvent, addEvents]);
 
   return [addEvents, connectErrors];

{reflex-0.8.0a4 → reflex-0.8.0a5}/reflex/app.py

@@ -765,9 +765,9 @@ class App(MiddlewareMixin, LifespanMixin):
                 msg = "Route must be set if component is not a callable."
                 raise exceptions.RouteValueError(msg)
             # Format the route.
-            route = format.format_route(component.__name__)
+            route = format.format_route(format.to_kebab_case(component.__name__))
         else:
-            route = format.format_route(route, format_case=False)
+            route = format.format_route(route)
 
         if route == constants.Page404.SLUG:
             if component is None:
@@ -822,10 +822,11 @@ class App(MiddlewareMixin, LifespanMixin):
         state = self._state if self._state else State
         state.setup_dynamic_args(get_route_args(route))
 
-        if on_load:
-            self._load_events[route] = (
-                on_load if isinstance(on_load, list) else [on_load]
-            )
+        self._load_events[route] = (
+            (on_load if isinstance(on_load, list) else [on_load])
+            if on_load is not None
+            else []
+        )
 
         self._unevaluated_pages[route] = unevaluated_page
 
@@ -854,48 +855,35 @@ class App(MiddlewareMixin, LifespanMixin):
         if save_page:
             self._pages[route] = component
 
-    def get_load_events(self, route: str) -> list[IndividualEventType[()]]:
+    @functools.cached_property
+    def router(self) -> Callable[[str], str | None]:
+        """Get the route computer function.
+
+        Returns:
+            The route computer function.
+        """
+        from reflex.route import get_router
+
+        return get_router(list(self._pages))
+
+    def get_load_events(self, path: str) -> list[IndividualEventType[()]]:
         """Get the load events for a route.
 
         Args:
-            route: The route to get the load events for.
+            path: The route to get the load events for.
 
         Returns:
             The load events for the route.
         """
-        route = route.lstrip("/").rstrip("/")
-        if route == "":
-            return self._load_events.get(constants.PageNames.INDEX_ROUTE, [])
-
-        # Separate the pages by route type.
-        static_page_paths_to_page_route = {}
-        dynamic_page_paths_to_page_route = {}
-        for page_route in list(self._pages) + list(self._unevaluated_pages):
-            page_path = page_route.lstrip("/").rstrip("/")
-            if "[" in page_path and "]" in page_path:
-                dynamic_page_paths_to_page_route[page_path] = page_route
-            else:
-                static_page_paths_to_page_route[page_path] = page_route
-
-        # Check for static routes.
-        if (page_route := static_page_paths_to_page_route.get(route)) is not None:
-            return self._load_events.get(page_route, [])
-
-        # Check for dynamic routes.
-        parts = route.split("/")
-        for page_path, page_route in dynamic_page_paths_to_page_route.items():
-            page_parts = page_path.split("/")
-            if len(page_parts) != len(parts):
-                continue
-            if all(
-                part == page_part
-                or (page_part.startswith("[") and page_part.endswith("]"))
-                for part, page_part in zip(parts, page_parts, strict=False)
-            ):
-                return self._load_events.get(page_route, [])
-
-        # Default to 404 page load events if no match found.
-        return self._load_events.get("404", [])
+        four_oh_four_load_events = self._load_events.get("404", [])
+        route = self.router(path)
+        if not route:
+            # If the path is not a valid route, return the 404 page load events.
+            return four_oh_four_load_events
+        return self._load_events.get(
+            route,
+            four_oh_four_load_events,
+        )
 
     def _check_routes_conflict(self, new_route: str):
         """Verify if there is any conflict between the new route and any existing route.
@@ -916,7 +904,6 @@ class App(MiddlewareMixin, LifespanMixin):
         segments = (
             constants.RouteRegex.SINGLE_SEGMENT,
             constants.RouteRegex.DOUBLE_SEGMENT,
-            constants.RouteRegex.SINGLE_CATCHALL_SEGMENT,
             constants.RouteRegex.DOUBLE_CATCHALL_SEGMENT,
         )
         for route in self._pages:
@@ -1742,6 +1729,11 @@ async def process(
                 # assignment will recurse into substates and force recalculation of
                 # dependent ComputedVar (dynamic route variables)
                 state.router_data = router_data
+                router_data[constants.RouteVar.PATH] = "/" + (
+                    app.router(path) or "404"
+                    if (path := router_data.get(constants.RouteVar.PATH))
+                    else "404"
+                ).removeprefix("/")
                 state.router = RouterData(router_data)
 
             # Preprocess the event.

{reflex-0.8.0a4 → reflex-0.8.0a5}/reflex/compiler/compiler.py

@@ -86,6 +86,8 @@ def _compile_app(app_root: Component) -> str:
         (_normalize_library_name(name), name) for name in bundled_libraries
     ]
 
+    window_libraries_deduped = list(dict.fromkeys(window_libraries))
+
     app_root_imports = app_root._get_all_imports()
     _apply_common_imports(app_root_imports)
 
@@ -93,7 +95,7 @@ def _compile_app(app_root: Component) -> str:
         imports=utils.compile_imports(app_root_imports),
         custom_codes=app_root._get_all_custom_code(),
         hooks=app_root._get_all_hooks(),
-        window_libraries=window_libraries,
+        window_libraries=window_libraries_deduped,
         render=app_root.render(),
         dynamic_imports=app_root._get_all_dynamic_imports(),
     )

{reflex-0.8.0a4 → reflex-0.8.0a5}/reflex/compiler/utils.py

@@ -417,9 +417,11 @@ def _format_route_part(part: str) -> str:
     if part.startswith("[") and part.endswith("]"):
         if part.startswith(("[...", "[[...")):
             return "$"
+        if part.startswith("[["):
+            return "($" + part.removeprefix("[[").removesuffix("]]") + ")"
         # We don't add [] here since we are reusing them from the input
-        return "$" + part + "_"
-    return "[" + part + "]_"
+        return "$" + part
+    return "[" + part + "]"
 
 
 def _path_to_file_stem(path: str) -> str:

{reflex-0.8.0a4 → reflex-0.8.0a5}/reflex/components/base/meta.py

@@ -4,6 +4,7 @@ from __future__ import annotations
 
 from reflex.components.base.bare import Bare
 from reflex.components.el import elements
+from reflex.vars.base import Var
 
 
 class Title(elements.Title):
@@ -28,31 +29,19 @@ class Title(elements.Title):
 class Meta(elements.Meta):
     """A component that displays metadata for the current page."""
 
-    # The description of character encoding.
-    char_set: str | None = None
-
-    # The value of meta.
-    content: str | None = None
-
-    # The name of metadata.
-    name: str | None = None
-
-    # The type of metadata value.
-    property: str | None = None
-
     # The type of metadata value.
-    http_equiv: str | None = None
+    property: Var[str]
 
 
 class Description(elements.Meta):
     """A component that displays the title of the current page."""
 
     # The type of the description.
-    name: str | None = "description"
+    name: Var[str] = Var.create("description")
 
 
 class Image(elements.Meta):
     """A component that displays the title of the current page."""
 
     # The type of the image.
-    property: str | None = "og:image"
+    property: Var[str] = Var.create("og:image")

{reflex-0.8.0a4 → reflex-0.8.0a5}/reflex/components/core/foreach.py

@@ -8,7 +8,7 @@ from collections.abc import Callable, Iterable
 from typing import Any
 
 from reflex.components.base.fragment import Fragment
-from reflex.components.component import Component
+from reflex.components.component import Component, field
 from reflex.components.core.cond import cond
 from reflex.components.tags import IterTag
 from reflex.constants import MemoizationMode
@@ -36,7 +36,7 @@ class Foreach(Component):
     iterable: Var[Iterable]
 
     # A function from the render args to the component.
-    render_fn: Callable = Fragment.create
+    render_fn: Callable = field(default=Fragment.create, is_javascript_property=False)
 
     @classmethod
     def create(

{reflex-0.8.0a4 → reflex-0.8.0a5}/reflex/components/core/match.py

@@ -4,7 +4,7 @@ import textwrap
 from typing import Any
 
 from reflex.components.base import Fragment
-from reflex.components.component import BaseComponent, Component, MemoizationLeaf
+from reflex.components.component import BaseComponent, Component, MemoizationLeaf, field
 from reflex.components.tags import MatchTag, Tag
 from reflex.style import Style
 from reflex.utils import format
@@ -21,10 +21,10 @@ class Match(MemoizationLeaf):
     cond: Var[Any]
 
     # The list of match cases to be matched.
-    match_cases: list[Any] = []
+    match_cases: list[Any] = field(default_factory=list, is_javascript_property=False)
 
     # The catchall case to match.
-    default: Any
+    default: Any = field(default=None, is_javascript_property=False)
 
     @classmethod
     def create(cls, cond: Any, *cases) -> Component | Var:

{reflex-0.8.0a4 → reflex-0.8.0a5}/reflex/components/core/upload.py

@@ -12,6 +12,7 @@ from reflex.components.component import (
     ComponentNamespace,
     MemoizationLeaf,
     StatefulComponent,
+    field,
 )
 from reflex.components.core.cond import cond
 from reflex.components.el.elements.forms import Input
@@ -234,7 +235,7 @@ class Upload(MemoizationLeaf):
     on_drop: EventHandler[_on_drop_spec]
 
     # Style rules to apply when actively dragging.
-    drag_active_style: Style | None = None
+    drag_active_style: Style | None = field(default=None, is_javascript_property=False)
 
     @classmethod
     def create(cls, *children, **props) -> Component:

{reflex-0.8.0a4 → reflex-0.8.0a5}/reflex/components/datadisplay/code.py

@@ -5,7 +5,7 @@ from __future__ import annotations
 import dataclasses
 from typing import ClassVar, Literal
 
-from reflex.components.component import Component, ComponentNamespace
+from reflex.components.component import Component, ComponentNamespace, field
 from reflex.components.core.cond import color_mode_cond
 from reflex.components.lucide.icon import Icon
 from reflex.components.markdown.markdown import MarkdownComponentMap
@@ -407,16 +407,24 @@ class CodeBlock(Component, MarkdownComponentMap):
     wrap_long_lines: Var[bool]
 
     # A custom style for the code block.
-    custom_style: dict[str, str | Var | Color] = {}
+    custom_style: dict[str, str | Var | Color] = field(
+        default_factory=dict, is_javascript_property=False
+    )
 
     # Props passed down to the code tag.
     code_tag_props: Var[dict[str, str]]
 
     # Whether a copy button should appear.
-    can_copy: bool | None = False
+    can_copy: bool | None = field(
+        default=False,
+        is_javascript_property=False,
+    )
 
     # A custom copy button to override the default one.
-    copy_button: bool | Component | None = None
+    copy_button: bool | Component | None = field(
+        default=None,
+        is_javascript_property=False,
+    )
 
     @classmethod
     def create(
@@ -498,9 +506,6 @@ class CodeBlock(Component, MarkdownComponentMap):
 
         return out
 
-    def _exclude_props(self) -> list[str]:
-        return ["can_copy", "copy_button"]
-
 
 class CodeblockNamespace(ComponentNamespace):
     """Namespace for the CodeBlock component."""

{reflex-0.8.0a4 → reflex-0.8.0a5}/reflex/components/datadisplay/shiki_code_block.py

@@ -8,7 +8,7 @@ from collections import defaultdict
 from dataclasses import dataclass
 from typing import Any, Literal
 
-from reflex.components.component import Component, ComponentNamespace
+from reflex.components.component import Component, ComponentNamespace, field
 from reflex.components.core.colors import color
 from reflex.components.core.cond import color_mode_cond
 from reflex.components.el.elements.forms import Button
@@ -721,10 +721,12 @@ class ShikiHighLevelCodeBlock(ShikiCodeBlock):
     show_line_numbers: Var[bool]
 
     # Whether a copy button should appear.
-    can_copy: bool = False
+    can_copy: bool = field(default=False, is_javascript_property=False)
 
     # copy_button: A custom copy button to override the default one.
-    copy_button: Component | bool | None = None
+    copy_button: Component | bool | None = field(
+        default=None, is_javascript_property=False
+    )
 
     @classmethod
     def create(

{reflex-0.8.0a4 → reflex-0.8.0a5}/reflex/components/markdown/markdown.py

@@ -9,7 +9,7 @@ from functools import lru_cache
 from hashlib import md5
 from typing import Any
 
-from reflex.components.component import BaseComponent, Component, CustomComponent
+from reflex.components.component import BaseComponent, Component, CustomComponent, field
 from reflex.components.tags.tag import Tag
 from reflex.utils.imports import ImportDict, ImportVar
 from reflex.vars.base import LiteralVar, Var, VarData
@@ -150,10 +150,12 @@ class Markdown(Component):
     is_default = True
 
     # The component map from a tag to a lambda that creates a component.
-    component_map: dict[str, Any] = {}
+    component_map: dict[str, Any] = field(
+        default_factory=dict, is_javascript_property=False
+    )
 
     # The hash of the component map, generated at create() time.
-    component_map_hash: str = ""
+    component_map_hash: str = field(default="", is_javascript_property=False)
 
     @classmethod
     def create(cls, *children, **props) -> Component:

{reflex-0.8.0a4 → reflex-0.8.0a5}/reflex/components/plotly/plotly.py

@@ -2,7 +2,7 @@
 
 from __future__ import annotations
 
-from typing import Any, TypedDict, TypeVar
+from typing import TYPE_CHECKING, Any, TypedDict, TypeVar
 
 from reflex.components.component import Component, NoSSRComponent
 from reflex.components.core.cond import color_mode_cond
@@ -17,8 +17,9 @@ try:
 
 except ImportError:
     console.warn("Plotly is not installed. Please run `pip install plotly`.")
-    Figure = Any
-    Template = Any
+    if not TYPE_CHECKING:
+        Figure = Any
+        Template = Any
 
 
 def _event_points_data_signature(e0: Var) -> tuple[Var[list[Point]]]:
@@ -78,13 +79,13 @@ class Plotly(NoSSRComponent):
     is_default = True
 
     # The figure to display. This can be a plotly figure or a plotly data json.
-    data: Var[Figure]  # pyright: ignore [reportInvalidTypeForm]
+    data: Var[Figure]
 
     # The layout of the graph.
     layout: Var[dict]
 
     # The template for visual appearance of the graph.
-    template: Var[Template]  # pyright: ignore [reportInvalidTypeForm]
+    template: Var[Template]
 
     # The config of the graph.
     config: Var[dict]
@@ -213,6 +214,7 @@ const extractPoints = (points) => {
         Returns:
             The Plotly component.
         """
+        from plotly.graph_objs.layout import Template
         from plotly.io import templates
 
         responsive_template = color_mode_cond(
@@ -277,8 +279,12 @@ def dynamic_plotly_import(name: str, package: str) -> str:
     Returns:
         The dynamic import for the plotly component.
     """
+    library_import = f"import('{package}')"
+    mod_import = ".then((mod) => ({ default: createPlotlyComponent(mod) }))"
     return f"""
-const {name} = dynamic(() => import('{package}').then(mod => createPlotlyComponent(mod)), {{ssr: false}})
+const {name} = ClientSide(lazy(() =>
+    {library_import}{mod_import}
+))
 """
 
 

{reflex-0.8.0a4 → reflex-0.8.0a5}/reflex/components/radix/themes/color_mode.py

@@ -19,7 +19,7 @@ from __future__ import annotations
 
 from typing import Any, Literal, get_args
 
-from reflex.components.component import BaseComponent
+from reflex.components.component import BaseComponent, field
 from reflex.components.core.cond import Cond, color_mode_cond, cond
 from reflex.components.lucide.icon import Icon
 from reflex.components.radix.themes.components.dropdown_menu import dropdown_menu
@@ -99,10 +99,12 @@ class ColorModeIconButton(IconButton):
     """Icon Button for toggling light / dark mode via toggle_color_mode."""
 
     # The position of the icon button. Follow document flow if None.
-    position: LiteralPosition | Var[LiteralPosition] | None = None
+    position: LiteralPosition | Var[LiteralPosition] | None = field(
+        default=None, is_javascript_property=False
+    )
 
     # Allow picking the "system" value for the color mode.
-    allow_system: bool = False
+    allow_system: bool = field(default=False, is_javascript_property=False)
 
     @classmethod
     def create(
@@ -168,9 +170,6 @@ class ColorModeIconButton(IconButton):
             **props,
         )
 
-    def _exclude_props(self) -> list[str]:
-        return ["position", "allow_system"]
-
 
 class ColorModeSwitch(Switch):
     """Switch for toggling light / dark mode via toggle_color_mode."""

{reflex-0.8.0a4 → reflex-0.8.0a5}/reflex/components/recharts/cartesian.py

@@ -3,7 +3,7 @@
 from __future__ import annotations
 
 from collections.abc import Sequence
-from typing import Any, ClassVar
+from typing import Any, ClassVar, TypedDict
 
 from reflex.constants import EventTriggers
 from reflex.constants.colors import Color
@@ -663,6 +663,13 @@ class Reference(Recharts):
     is_front: Var[bool]
 
 
+class Segment(TypedDict):
+    """A segment in a ReferenceLine or ReferenceArea."""
+
+    x: str | int
+    y: str | int
+
+
 class ReferenceLine(Reference):
     """A ReferenceLine component in Recharts."""
 
@@ -686,7 +693,7 @@ class ReferenceLine(Reference):
     _valid_children: ClassVar[list[str]] = ["Label"]
 
     # Array of endpoints in { x, y } format. These endpoints would be used to draw the ReferenceLine.
-    segment: Sequence[Any] = []
+    segment: Var[Sequence[Segment]]
 
 
 class ReferenceDot(Reference):

{reflex-0.8.0a4 → reflex-0.8.0a5}/reflex/constants/route.py

@@ -41,23 +41,30 @@ class RouteRegex(SimpleNamespace):
     _CLOSING_BRACKET = r"\]"
     _ARG_NAME = r"[a-zA-Z_]\w*"
 
+    # The regex for a valid arg name, e.g. "slug" in "[slug]"
+    _ARG_NAME_PATTERN = re.compile(_ARG_NAME)
+
+    SLUG = re.compile(r"[a-zA-Z0-9_-]+")
     # match a single arg (i.e. "[slug]"), returns the name of the arg
     ARG = re.compile(rf"{_OPENING_BRACKET}({_ARG_NAME}){_CLOSING_BRACKET}")
-    # match a single catch-all arg (i.e. "[...slug]" or "[[...slug]]"), returns the name of the arg
-    CATCHALL = re.compile(
-        rf"({_OPENING_BRACKET}?{_OPENING_BRACKET}{_DOT_DOT_DOT}[^[{_CLOSING_BRACKET}]*{_CLOSING_BRACKET}?{_CLOSING_BRACKET})"
+    # match a single optional arg (i.e. "[[slug]]"), returns the name of the arg
+    OPTIONAL_ARG = re.compile(
+        rf"{_OPENING_BRACKET * 2}({_ARG_NAME}){_CLOSING_BRACKET * 2}"
     )
+
     # match a single non-optional catch-all arg (i.e. "[...slug]"), returns the name of the arg
     STRICT_CATCHALL = re.compile(
         rf"{_OPENING_BRACKET}{_DOT_DOT_DOT}({_ARG_NAME}){_CLOSING_BRACKET}"
     )
-    # match a snigle optional catch-all arg (i.e. "[[...slug]]"), returns the name of the arg
-    OPT_CATCHALL = re.compile(
+
+    # match a single optional catch-all arg (i.e. "[[...slug]]"), returns the name of the arg
+    OPTIONAL_CATCHALL = re.compile(
         rf"{_OPENING_BRACKET * 2}{_DOT_DOT_DOT}({_ARG_NAME}){_CLOSING_BRACKET * 2}"
     )
+
+    SPLAT_CATCHALL = "[[...splat]]"
     SINGLE_SEGMENT = "__SINGLE_SEGMENT__"
     DOUBLE_SEGMENT = "__DOUBLE_SEGMENT__"
-    SINGLE_CATCHALL_SEGMENT = "__SINGLE_CATCHALL_SEGMENT__"
     DOUBLE_CATCHALL_SEGMENT = "__DOUBLE_CATCHALL_SEGMENT__"