reflex 0.8.0a3__py3-none-any.whl → 0.8.0a5__py3-none-any.whl

reflex/app.py

@@ -77,6 +77,7 @@ from reflex.event import (
     EventType,
     IndividualEventType,
     get_hydrate_event,
+    noop,
 )
 from reflex.model import Model, get_db_status
 from reflex.page import DECORATED_PAGES
@@ -213,17 +214,21 @@ def default_overlay_component() -> Component:
     return Fragment.create(memo(default_overlay_components)())
 
 
-def default_error_boundary(*children: Component) -> Component:
+def default_error_boundary(*children: Component, **props) -> Component:
     """Default error_boundary attribute for App.
 
     Args:
         *children: The children to render in the error boundary.
+        **props: The props to pass to the error boundary.
 
     Returns:
         The default error_boundary, which is an ErrorBoundary.
 
     """
-    return ErrorBoundary.create(*children)
+    return ErrorBoundary.create(
+        *children,
+        **props,
+    )
 
 
 class OverlayFragment(Fragment):
@@ -332,6 +337,9 @@ class App(MiddlewareMixin, LifespanMixin):
     # A list of URLs to [stylesheets](https://reflex.dev/docs/styling/custom-stylesheets/) to include in the app.
     stylesheets: list[str] = dataclasses.field(default_factory=list)
 
+    # Whether to include CSS reset for margin and padding (defaults to True).
+    reset_style: bool = dataclasses.field(default=True)
+
     # A component that is present on every page (defaults to the Connection Error banner).
     overlay_component: Component | ComponentCallable | None = dataclasses.field(
         default=None
@@ -342,7 +350,9 @@ class App(MiddlewareMixin, LifespanMixin):
         dataclasses.field(
             default_factory=lambda: {
                 (55, "ErrorBoundary"): (
-                    lambda stateful: default_error_boundary() if stateful else None
+                    lambda stateful: default_error_boundary(
+                        **({"on_error": noop()} if not stateful else {})
+                    )
                 ),
                 (5, "Overlay"): (
                     lambda stateful: default_overlay_component() if stateful else None
@@ -755,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:
@@ -812,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
 
@@ -844,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.
@@ -906,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:
@@ -1358,7 +1355,9 @@ class App(MiddlewareMixin, LifespanMixin):
                 )
 
             # Compile the root stylesheet with base styles.
-            _submit_work(compiler.compile_root_stylesheet, self.stylesheets)
+            _submit_work(
+                compiler.compile_root_stylesheet, self.stylesheets, self.reset_style
+            )
 
             # Compile the theme.
             _submit_work(compile_theme, self.style)
@@ -1730,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/compiler/compiler.py

@@ -19,7 +19,7 @@ from reflex.components.component import (
     StatefulComponent,
 )
 from reflex.config import get_config
-from reflex.constants.compiler import PageNames
+from reflex.constants.compiler import PageNames, ResetStylesheet
 from reflex.constants.state import FIELD_MARKER
 from reflex.environment import environment
 from reflex.state import BaseState
@@ -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(),
     )
@@ -171,18 +173,21 @@ def _compile_page(
     )
 
 
-def compile_root_stylesheet(stylesheets: list[str]) -> tuple[str, str]:
+def compile_root_stylesheet(
+    stylesheets: list[str], reset_style: bool = True
+) -> tuple[str, str]:
     """Compile the root stylesheet.
 
     Args:
         stylesheets: The stylesheets to include in the root stylesheet.
+        reset_style: Whether to include CSS reset for margin and padding.
 
     Returns:
         The path and code of the compiled root stylesheet.
     """
     output_path = utils.get_root_stylesheet_path()
 
-    code = _compile_root_stylesheet(stylesheets)
+    code = _compile_root_stylesheet(stylesheets, reset_style)
 
     return output_path, code
 
@@ -224,11 +229,12 @@ def _validate_stylesheet(stylesheet_full_path: Path, assets_app_path: Path) -> N
 RADIX_THEMES_STYLESHEET = "@radix-ui/themes/styles.css"
 
 
-def _compile_root_stylesheet(stylesheets: list[str]) -> str:
+def _compile_root_stylesheet(stylesheets: list[str], reset_style: bool = True) -> str:
     """Compile the root stylesheet.
 
     Args:
         stylesheets: The stylesheets to include in the root stylesheet.
+        reset_style: Whether to include CSS reset for margin and padding.
 
     Returns:
         The compiled root stylesheet.
@@ -237,11 +243,21 @@ def _compile_root_stylesheet(stylesheets: list[str]) -> str:
         FileNotFoundError: If a specified stylesheet in assets directory does not exist.
     """
     # Add stylesheets from plugins.
-    sheets = [RADIX_THEMES_STYLESHEET] + [
-        sheet
-        for plugin in get_config().plugins
-        for sheet in plugin.get_stylesheet_paths()
-    ]
+    sheets = []
+
+    # Add CSS reset if enabled
+    if reset_style:
+        # Reference the vendored style reset file (automatically copied from .templates/web)
+        sheets.append(f"./{ResetStylesheet.FILENAME}")
+
+    sheets.extend(
+        [RADIX_THEMES_STYLESHEET]
+        + [
+            sheet
+            for plugin in get_config().plugins
+            for sheet in plugin.get_stylesheet_paths()
+        ]
+    )
 
     failed_to_import_sass = False
     assets_app_path = Path.cwd() / constants.Dirs.APP_ASSETS

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/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/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/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/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/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/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/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/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/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/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/constants/compiler.py

@@ -204,3 +204,10 @@ class SpecialAttributes(enum.Enum):
             True if the attribute is special.
         """
         return attr.startswith(SPECIAL_ATTRS)
+
+
+class ResetStylesheet(SimpleNamespace):
+    """Constants for CSS reset stylesheet."""
+
+    # The filename of the CSS reset file.
+    FILENAME = "__reflex_style_reset.css"

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__"