reflex 0.8.16a1__py3-none-any.whl → 0.8.17__py3-none-any.whl

reflex/.templates/web/utils/state.js

@@ -665,7 +665,9 @@ export const connect = async (
       }
     }
     applyClientStorageDelta(client_storage, update.delta);
-    event_processing = !update.final;
+    if (update.final !== null) {
+      event_processing = !update.final;
+    }
     if (update.events) {
       queueEvents(update.events, socket, false, navigate, params);
     }

reflex/app.py

@@ -1556,11 +1556,14 @@ class App(MiddlewareMixin, LifespanMixin):
         )
 
     @contextlib.asynccontextmanager
-    async def modify_state(self, token: str) -> AsyncIterator[BaseState]:
+    async def modify_state(
+        self, token: str, background: bool = False
+    ) -> AsyncIterator[BaseState]:
         """Modify the state out of band.
 
         Args:
             token: The token to modify the state for.
+            background: Whether the modification is happening in a background task.
 
         Yields:
             The state to modify.
@@ -1581,7 +1584,10 @@ class App(MiddlewareMixin, LifespanMixin):
                 # When the state is modified reset dirty status and emit the delta to the frontend.
                 state._clean()
                 await self.event_namespace.emit_update(
-                    update=StateUpdate(delta=delta),
+                    update=StateUpdate(
+                        delta=delta,
+                        final=True if not background else None,
+                    ),
                     token=token,
                 )
 
@@ -1758,7 +1764,9 @@ async def process(
             constants.RouteVar.CLIENT_IP: client_ip,
         })
         # Get the state for the session exclusively.
-        async with app.state_manager.modify_state(event.substate_token) as state:
+        async with app.state_manager.modify_state(
+            event.substate_token, event=event
+        ) as state:
             # When this is a brand new instance of the state, signal the
             # frontend to reload before processing it.
             if (

reflex/compiler/templates.py

@@ -4,7 +4,7 @@ from __future__ import annotations
 
 import json
 from collections.abc import Iterable, Mapping
-from typing import TYPE_CHECKING, Any
+from typing import TYPE_CHECKING, Any, Literal
 
 from reflex import constants
 from reflex.constants import Hooks
@@ -492,13 +492,21 @@ def package_json_template(
     })
 
 
-def vite_config_template(base: str, hmr: bool, force_full_reload: bool):
+def vite_config_template(
+    base: str,
+    hmr: bool,
+    force_full_reload: bool,
+    experimental_hmr: bool,
+    sourcemap: bool | Literal["inline", "hidden"],
+):
     """Template for vite.config.js.
 
     Args:
         base: The base path for the Vite config.
         hmr: Whether to enable hot module replacement.
         force_full_reload: Whether to force a full reload on changes.
+        experimental_hmr: Whether to enable experimental HMR features.
+        sourcemap: The sourcemap configuration.
 
     Returns:
         Rendered vite.config.js content as string.
@@ -550,6 +558,7 @@ export default defineConfig((config) => ({{
   ].concat({"[fullReload()]" if force_full_reload else "[]"}),
   build: {{
     assetsDir: "{base}assets".slice(1),
+    sourcemap: {"true" if sourcemap is True else "false" if sourcemap is False else repr(sourcemap)},
     rollupOptions: {{
       onwarn(warning, warn) {{
         if (warning.code === "EVAL" && warning.id && warning.id.endsWith("state.js")) return;
@@ -570,6 +579,7 @@ export default defineConfig((config) => ({{
   }},
   experimental: {{
     enableNativePlugin: false,
+    hmr: {"true" if experimental_hmr else "false"},
   }},
   server: {{
     port: process.env.PORT,

reflex/components/base/error_boundary.py

@@ -4,7 +4,7 @@ from __future__ import annotations
 
 from reflex.components.component import Component
 from reflex.components.datadisplay.logo import svg_logo
-from reflex.components.el import a, button, details, div, h2, hr, p, pre, summary
+from reflex.components.el import a, button, div, h2, hr, p, pre, svg
 from reflex.event import EventHandler, set_clipboard
 from reflex.state import FrontendEventExceptionState
 from reflex.vars.base import Var
@@ -65,53 +65,67 @@ class ErrorBoundary(Component):
                     div(
                         div(
                             div(
+                                svg(
+                                    svg.circle(cx="12", cy="12", r="10"),
+                                    svg.path(d="M16 16s-1.5-2-4-2-4 2-4 2"),
+                                    svg.line(x1="9", x2="9.01", y1="9", y2="9"),
+                                    svg.line(x1="15", x2="15.01", y1="9", y2="9"),
+                                    xmlns="http://www.w3.org/2000/svg",
+                                    width="25vmin",
+                                    view_box="0 0 24 24",
+                                    class_name="lucide lucide-frown-icon lucide-frown",
+                                    custom_attrs={
+                                        "fill": "none",
+                                        "stroke": "currentColor",
+                                        "stroke-width": "2",
+                                        "stroke-linecap": "round",
+                                        "stroke-linejoin": "round",
+                                    },
+                                ),
                                 h2(
                                     "An error occurred while rendering this page.",
-                                    font_size="1.25rem",
+                                    font_size="5vmin",
                                     font_weight="bold",
                                 ),
-                                p(
-                                    "This is an error with the application itself.",
-                                    opacity="0.75",
-                                ),
-                                details(
-                                    summary("Error message", padding="0.5rem"),
-                                    div(
-                                        div(
-                                            pre(
-                                                Var(_js_expr=_ERROR_DISPLAY),
-                                            ),
-                                            padding="0.5rem",
-                                            width="fit-content",
-                                        ),
-                                        width="100%",
-                                        max_height="50vh",
-                                        overflow="auto",
-                                        background="#000",
-                                        color="#fff",
-                                        border_radius="0.25rem",
-                                    ),
-                                    button(
-                                        "Copy",
-                                        on_click=set_clipboard(
-                                            Var(_js_expr=_ERROR_DISPLAY)
-                                        ),
-                                        padding="0.35rem 0.75rem",
-                                        margin="0.5rem",
-                                        background="#fff",
-                                        color="#000",
-                                        border="1px solid #000",
-                                        border_radius="0.25rem",
-                                        font_weight="bold",
+                                opacity="0.5",
+                                display="flex",
+                                gap="4vmin",
+                                align_items="center",
+                            ),
+                            p(
+                                "This is an error with the application itself. Refreshing the page might help.",
+                                opacity="0.75",
+                                margin_block="1rem",
+                            ),
+                            div(
+                                div(
+                                    pre(
+                                        Var(_js_expr=_ERROR_DISPLAY),
                                     ),
+                                    padding="0.5rem",
+                                    width="fit-content",
                                 ),
-                                display="flex",
-                                flex_direction="column",
-                                gap="1rem",
-                                max_width="50ch",
-                                border="1px solid #888888",
-                                border_radius="0.25rem",
-                                padding="1rem",
+                                width="100%",
+                                background="color-mix(in srgb, currentColor 5%, transparent)",
+                                max_height="15rem",
+                                overflow="auto",
+                                border_radius="0.4rem",
+                            ),
+                            button(
+                                "Copy",
+                                on_click=set_clipboard(Var(_js_expr=_ERROR_DISPLAY)),
+                                padding="0.35rem 1.35rem",
+                                margin_block="0.5rem",
+                                margin_inline_start="auto",
+                                background="color-mix(in srgb, currentColor 15%, transparent)",
+                                border_radius="0.4rem",
+                                width="fit-content",
+                                _hover={
+                                    "background": "color-mix(in srgb, currentColor 25%, transparent)"
+                                },
+                                _active={
+                                    "background": "color-mix(in srgb, currentColor 35%, transparent)"
+                                },
                             ),
                             hr(
                                 border_color="currentColor",
@@ -131,7 +145,10 @@ class ErrorBoundary(Component):
                             ),
                             display="flex",
                             flex_direction="column",
-                            gap="1rem",
+                            gap="0.5rem",
+                            max_width="min(80ch, 90vw)",
+                            border_radius="0.25rem",
+                            padding="1rem",
                         ),
                         height="100%",
                         width="100%",

reflex/components/core/window_events.py

@@ -1,7 +1,12 @@
 """Window event listener component for Reflex."""
 
+from __future__ import annotations
+
+from typing import Any, cast
+
 import reflex as rx
 from reflex.components.base.fragment import Fragment
+from reflex.components.component import StatefulComponent, field
 from reflex.constants.compiler import Hooks
 from reflex.event import key_event, no_args_event_spec
 from reflex.vars.base import Var, VarData
@@ -61,6 +66,23 @@ class WindowEventListener(Fragment):
     on_popstate: rx.EventHandler[no_args_event_spec]
     on_storage: rx.EventHandler[_on_storage_spec]
 
+    hooks: list[str] = field(default_factory=list, is_javascript_property=False)
+
+    @classmethod
+    def create(cls, **props) -> WindowEventListener:
+        """Create a WindowEventListener component.
+
+        Args:
+            **props: The props to set on the component.
+
+        Returns:
+            The created component.
+        """
+        real_component = cast("WindowEventListener", super().create(**props))
+        hooks = StatefulComponent._fix_event_triggers(real_component)
+        real_component.hooks = hooks
+        return real_component
+
     def _exclude_props(self) -> list[str]:
         """Exclude event handler props from being passed to Fragment.
 
@@ -69,31 +91,30 @@ class WindowEventListener(Fragment):
         """
         return [*super()._exclude_props(), *self.event_triggers.keys()]
 
-    def add_hooks(self) -> list[str | Var[str]]:
+    def add_hooks(self) -> list[str | Var[Any]]:
         """Add hooks to register window event listeners.
 
         Returns:
             The hooks to add to the component.
         """
-        hooks = []
+        hooks: list[str | Var[Any]] = [*self.hooks]
 
         for prop_name, event_trigger in self.event_triggers.items():
             # Get JS event name: remove on_ prefix and underscores
             event_name = prop_name.removeprefix("on_").replace("_", "")
 
             hook_expr = f"""
-                    useEffect(() => {{
-                        if (typeof window === 'undefined') return;
-
-                        window.addEventListener('{event_name}', {event_trigger});
-                        return () => window.removeEventListener('{event_name}', {event_trigger});
-                    }}, []);
+useEffect(() => {{
+    if (typeof window === 'undefined') return;
+    const fn = {Var.create(event_trigger)};
+    window.addEventListener('{event_name}', fn);
+    return () => window.removeEventListener('{event_name}', fn);
+}}, []);
                 """
 
             hooks.append(
                 Var(
                     hook_expr,
-                    _var_type="str",
                     _var_data=VarData(position=Hooks.HookPosition.POST_TRIGGER),
                 )
             )

reflex/components/core/window_events.pyi

@@ -12,11 +12,11 @@ from reflex.event import EventType, KeyInputInfo, PointerEventInfo
 from reflex.vars.base import Var
 
 class WindowEventListener(Fragment):
-    def add_hooks(self) -> list[str | Var[str]]: ...
     @classmethod
     def create(
         cls,
         *children,
+        hooks: list[str] | None = None,
         style: Sequence[Mapping[str, Any]]
         | Mapping[str, Any]
         | Var[Mapping[str, Any]]
@@ -62,10 +62,9 @@ class WindowEventListener(Fragment):
         on_visibility_change: EventType[()] | EventType[bool] | None = None,
         **props,
     ) -> WindowEventListener:
-        """Create the component.
+        """Create a WindowEventListener component.
 
         Args:
-            *children: The children of the component.
             on_resize: Event handlers
             style: The style of the component.
             key: A unique key for the component.
@@ -73,10 +72,12 @@ class WindowEventListener(Fragment):
             ref: The Var to pass as the ref to the component.
             class_name: The class name for the component.
             custom_attrs: custom attribute
-            **props: The props of the component.
+            **props: The props to set on the component.
 
         Returns:
-            The component.
+            The created component.
         """
 
+    def add_hooks(self) -> list[str | Var[Any]]: ...
+
 window_event_listener = WindowEventListener.create

reflex/components/lucide/icon.py

@@ -6,7 +6,7 @@ from reflex.utils.imports import ImportVar
 from reflex.vars.base import LiteralVar, Var
 from reflex.vars.sequence import LiteralStringVar, StringVar
 
-LUCIDE_LIBRARY = "lucide-react@0.545.0"
+LUCIDE_LIBRARY = "lucide-react@0.546.0"
 
 
 class LucideIconComponent(Component):
@@ -1115,6 +1115,7 @@ LUCIDE_ICON_LIST = [
     "minimize",
     "minus",
     "monitor_check",
+    "monitor_cloud",
     "monitor_cog",
     "monitor_dot",
     "monitor_down",

reflex/components/lucide/icon.pyi

@@ -11,7 +11,7 @@ from reflex.components.core.breakpoints import Breakpoints
 from reflex.event import EventType, PointerEventInfo
 from reflex.vars.base import Var
 
-LUCIDE_LIBRARY = "lucide-react@0.545.0"
+LUCIDE_LIBRARY = "lucide-react@0.546.0"
 
 class LucideIconComponent(Component):
     @classmethod
@@ -1176,6 +1176,7 @@ LUCIDE_ICON_LIST = [
     "minimize",
     "minus",
     "monitor_check",
+    "monitor_cloud",
     "monitor_cog",
     "monitor_dot",
     "monitor_down",

reflex/components/plotly/plotly.py

@@ -72,7 +72,7 @@ class Plotly(NoSSRComponent):
 
     library = "react-plotly.js@2.6.0"
 
-    lib_dependencies: list[str] = ["plotly.js@3.1.1"]
+    lib_dependencies: list[str] = ["plotly.js@3.1.2"]
 
     tag = "Plot"
 
@@ -303,7 +303,7 @@ class PlotlyBasic(Plotly):
 
     library = "react-plotly.js@2.6.0"
 
-    lib_dependencies: list[str] = ["plotly.js-basic-dist-min@3.1.1"]
+    lib_dependencies: list[str] = ["plotly.js-basic-dist-min@3.1.2"]
 
     def add_imports(self) -> ImportDict | list[ImportDict]:
         """Add imports for the plotly basic component.
@@ -329,7 +329,7 @@ class PlotlyCartesian(Plotly):
 
     library = "react-plotly.js@2.6.0"
 
-    lib_dependencies: list[str] = ["plotly.js-cartesian-dist-min@3.1.1"]
+    lib_dependencies: list[str] = ["plotly.js-cartesian-dist-min@3.1.2"]
 
     def add_imports(self) -> ImportDict | list[ImportDict]:
         """Add imports for the plotly cartesian component.
@@ -355,7 +355,7 @@ class PlotlyGeo(Plotly):
 
     library = "react-plotly.js@2.6.0"
 
-    lib_dependencies: list[str] = ["plotly.js-geo-dist-min@3.1.1"]
+    lib_dependencies: list[str] = ["plotly.js-geo-dist-min@3.1.2"]
 
     def add_imports(self) -> ImportDict | list[ImportDict]:
         """Add imports for the plotly geo component.
@@ -381,7 +381,7 @@ class PlotlyGl3d(Plotly):
 
     library = "react-plotly.js@2.6.0"
 
-    lib_dependencies: list[str] = ["plotly.js-gl3d-dist-min@3.1.1"]
+    lib_dependencies: list[str] = ["plotly.js-gl3d-dist-min@3.1.2"]
 
     def add_imports(self) -> ImportDict | list[ImportDict]:
         """Add imports for the plotly 3d component.
@@ -407,7 +407,7 @@ class PlotlyGl2d(Plotly):
 
     library = "react-plotly.js@2.6.0"
 
-    lib_dependencies: list[str] = ["plotly.js-gl2d-dist-min@3.1.1"]
+    lib_dependencies: list[str] = ["plotly.js-gl2d-dist-min@3.1.2"]
 
     def add_imports(self) -> ImportDict | list[ImportDict]:
         """Add imports for the plotly 2d component.
@@ -433,7 +433,7 @@ class PlotlyMapbox(Plotly):
 
     library = "react-plotly.js@2.6.0"
 
-    lib_dependencies: list[str] = ["plotly.js-mapbox-dist-min@3.1.1"]
+    lib_dependencies: list[str] = ["plotly.js-mapbox-dist-min@3.1.2"]
 
     def add_imports(self) -> ImportDict | list[ImportDict]:
         """Add imports for the plotly mapbox component.
@@ -459,7 +459,7 @@ class PlotlyFinance(Plotly):
 
     library = "react-plotly.js@2.6.0"
 
-    lib_dependencies: list[str] = ["plotly.js-finance-dist-min@3.1.1"]
+    lib_dependencies: list[str] = ["plotly.js-finance-dist-min@3.1.2"]
 
     def add_imports(self) -> ImportDict | list[ImportDict]:
         """Add imports for the plotly finance component.
@@ -485,7 +485,7 @@ class PlotlyStrict(Plotly):
 
     library = "react-plotly.js@2.6.0"
 
-    lib_dependencies: list[str] = ["plotly.js-strict-dist-min@3.1.1"]
+    lib_dependencies: list[str] = ["plotly.js-strict-dist-min@3.1.2"]
 
     def add_imports(self) -> ImportDict | list[ImportDict]:
         """Add imports for the plotly strict component.

reflex/components/recharts/recharts.py

@@ -8,7 +8,7 @@ from reflex.components.component import Component, MemoizationLeaf, NoSSRCompone
 class Recharts(Component):
     """A component that wraps a recharts lib."""
 
-    library = "recharts@3.2.1"
+    library = "recharts@3.3.0"
 
     def _get_style(self) -> dict:
         return {"wrapperStyle": self.style}
@@ -17,7 +17,7 @@ class Recharts(Component):
 class RechartsCharts(NoSSRComponent, MemoizationLeaf):
     """A component that wraps a recharts lib."""
 
-    library = "recharts@3.2.1"
+    library = "recharts@3.3.0"
 
 
 LiteralAnimationEasing = Literal["ease", "ease-in", "ease-out", "ease-in-out", "linear"]

reflex/constants/installer.py

@@ -143,11 +143,11 @@ class PackageJson(SimpleNamespace):
         "postcss-import": "16.1.1",
         "@react-router/dev": _react_router_version,
         "@react-router/fs-routes": _react_router_version,
-        "vite": "npm:rolldown-vite@7.1.17",
+        "vite": "npm:rolldown-vite@7.1.18",
     }
     OVERRIDES = {
         # This should always match the `react` version in DEPENDENCIES for recharts compatibility.
         "react-is": _react_version,
         "cookie": "1.0.2",
-        "vite": "npm:rolldown-vite@7.1.17",
+        "vite": "npm:rolldown-vite@7.1.18",
     }

reflex/environment.py

@@ -17,6 +17,7 @@ from typing import (
     Annotated,
     Any,
     Generic,
+    Literal,
     TypeVar,
     get_args,
     get_origin,
@@ -256,6 +257,27 @@ def interpret_env_var_value(
         return interpret_existing_path_env(value, field_name)
     if field_type is Plugin:
         return interpret_plugin_env(value, field_name)
+    if get_origin(field_type) is Literal:
+        literal_values = get_args(field_type)
+        for literal_value in literal_values:
+            if isinstance(literal_value, str) and literal_value == value:
+                return literal_value
+            if isinstance(literal_value, bool):
+                try:
+                    interpreted_bool = interpret_boolean_env(value, field_name)
+                    if interpreted_bool == literal_value:
+                        return interpreted_bool
+                except EnvironmentVarValueError:
+                    continue
+            if isinstance(literal_value, int):
+                try:
+                    interpreted_int = interpret_int_env(value, field_name)
+                    if interpreted_int == literal_value:
+                        return interpreted_int
+                except EnvironmentVarValueError:
+                    continue
+        msg = f"Invalid literal value: {value!r} for {field_name}, expected one of {literal_values}"
+        raise EnvironmentVarValueError(msg)
     if get_origin(field_type) in (list, Sequence):
         return [
             interpret_env_var_value(
@@ -687,6 +709,12 @@ class EnvironmentVariables:
     # Whether to force a full reload on changes.
     VITE_FORCE_FULL_RELOAD: EnvVar[bool] = env_var(False)
 
+    # Whether to enable Rolldown's experimental HMR.
+    VITE_EXPERIMENTAL_HMR: EnvVar[bool] = env_var(False)
+
+    # Whether to generate sourcemaps for the frontend.
+    VITE_SOURCEMAP: EnvVar[Literal[False, True, "inline", "hidden"]] = env_var(False)  # noqa: RUF038
+
     # Whether to enable SSR for the frontend.
     REFLEX_SSR: EnvVar[bool] = env_var(True)
 
@@ -696,6 +724,9 @@ class EnvironmentVariables:
     # How long to delay writing updated states to disk. (Higher values mean less writes, but more chance of lost data.)
     REFLEX_STATE_MANAGER_DISK_DEBOUNCE_SECONDS: EnvVar[float] = env_var(2.0)
 
+    # How long to wait between automatic reload on frontend error to avoid reload loops.
+    REFLEX_AUTO_RELOAD_COOLDOWN_TIME_MS: EnvVar[int] = env_var(10_000)
+
 
 environment = EnvironmentVariables()
 

reflex/istate/manager/__init__.py

@@ -4,14 +4,27 @@ import contextlib
 import dataclasses
 from abc import ABC, abstractmethod
 from collections.abc import AsyncIterator
+from typing import TypedDict
+
+from typing_extensions import ReadOnly, Unpack
 
 from reflex import constants
 from reflex.config import get_config
+from reflex.event import Event
 from reflex.state import BaseState
 from reflex.utils import console, prerequisites
 from reflex.utils.exceptions import InvalidStateManagerModeError
 
 
+class StateModificationContext(TypedDict, total=False):
+    """The context for modifying state."""
+
+    event: ReadOnly[Event]
+
+
+EmptyContext = StateModificationContext()
+
+
 @dataclasses.dataclass
 class StateManager(ABC):
     """A class to manage many client states."""
@@ -71,21 +84,30 @@ class StateManager(ABC):
         """
 
     @abstractmethod
-    async def set_state(self, token: str, state: BaseState):
+    async def set_state(
+        self,
+        token: str,
+        state: BaseState,
+        **context: Unpack[StateModificationContext],
+    ):
         """Set the state for a token.
 
         Args:
             token: The token to set the state for.
             state: The state to set.
+            context: The state modification context.
         """
 
     @abstractmethod
     @contextlib.asynccontextmanager
-    async def modify_state(self, token: str) -> AsyncIterator[BaseState]:
+    async def modify_state(
+        self, token: str, **context: Unpack[StateModificationContext]
+    ) -> AsyncIterator[BaseState]:
         """Modify the state for a token while holding exclusive lock.
 
         Args:
             token: The token to modify the state for.
+            context: The state modification context.
 
         Yields:
             The state for the token.

reflex/istate/manager/disk.py

@@ -9,10 +9,14 @@ from collections.abc import AsyncIterator
 from hashlib import md5
 from pathlib import Path
 
-from typing_extensions import override
+from typing_extensions import Unpack, override
 
 from reflex.environment import environment
-from reflex.istate.manager import StateManager, _default_token_expiration
+from reflex.istate.manager import (
+    StateManager,
+    StateModificationContext,
+    _default_token_expiration,
+)
 from reflex.state import BaseState, _split_substate_key, _substate_key
 from reflex.utils import console, path_ops, prerequisites
 from reflex.utils.misc import run_in_thread
@@ -301,12 +305,15 @@ class StateManagerDisk(StateManager):
                     await asyncio.sleep(0)  # Yield to allow the task to start.
 
     @override
-    async def set_state(self, token: str, state: BaseState):
+    async def set_state(
+        self, token: str, state: BaseState, **context: Unpack[StateModificationContext]
+    ):
         """Set the state for a token.
 
         Args:
             token: The token to set the state for.
             state: The state to set.
+            context: The state modification context.
         """
         client_token, _ = _split_substate_key(token)
         if self._write_debounce_seconds > 0:
@@ -325,11 +332,14 @@ class StateManagerDisk(StateManager):
 
     @override
     @contextlib.asynccontextmanager
-    async def modify_state(self, token: str) -> AsyncIterator[BaseState]:
+    async def modify_state(
+        self, token: str, **context: Unpack[StateModificationContext]
+    ) -> AsyncIterator[BaseState]:
         """Modify the state for a token while holding exclusive lock.
 
         Args:
             token: The token to modify the state for.
+            context: The state modification context.
 
         Yields:
             The state for the token.
@@ -344,7 +354,7 @@ class StateManagerDisk(StateManager):
         async with self._states_locks[client_token]:
             state = await self.get_state(token)
             yield state
-            await self.set_state(token, state)
+            await self.set_state(token, state, **context)
 
     async def close(self):
         """Close the state manager, flushing any pending writes to disk."""