reflex 0.4.2a1__py3-none-any.whl → 0.4.3a2__py3-none-any.whl

reflex/app.py

@@ -1,4 +1,5 @@
 """The main Reflex app."""
+
 from __future__ import annotations
 
 import asyncio
@@ -36,7 +37,7 @@ from reflex.admin import AdminDash
 from reflex.base import Base
 from reflex.compiler import compiler
 from reflex.compiler import utils as compiler_utils
-from reflex.components import connection_modal
+from reflex.components import connection_modal, connection_pulser
 from reflex.components.base.app_wrap import AppWrap
 from reflex.components.base.fragment import Fragment
 from reflex.components.component import (
@@ -69,9 +70,11 @@ from reflex.state import (
     State,
     StateManager,
     StateUpdate,
+    _substate_key,
     code_uses_state_contexts,
 )
 from reflex.utils import console, exceptions, format, prerequisites, types
+from reflex.utils.exec import is_testing_env
 from reflex.utils.imports import ImportVar
 
 # Define custom types.
@@ -85,7 +88,7 @@ def default_overlay_component() -> Component:
     Returns:
         The default overlay_component, which is a connection_modal.
     """
-    return connection_modal()
+    return Fragment.create(connection_pulser(), connection_modal())
 
 
 class App(Base):
@@ -159,10 +162,9 @@ class App(Base):
             )
         super().__init__(*args, **kwargs)
         state_subclasses = BaseState.__subclasses__()
-        is_testing_env = constants.PYTEST_CURRENT_TEST in os.environ
 
         # Special case to allow test cases have multiple subclasses of rx.BaseState.
-        if not is_testing_env:
+        if not is_testing_env():
             # Only one Base State class is allowed.
             if len(state_subclasses) > 1:
                 raise ValueError(
@@ -176,7 +178,8 @@ class App(Base):
                     deprecation_version="0.3.5",
                     removal_version="0.5.0",
                 )
-            if len(State.class_subclasses) > 0:
+            # 2 substates are built-in and not considered when determining if app is stateless.
+            if len(State.class_subclasses) > 2:
                 self.state = State
         # Get the config
         config = get_config()
@@ -196,9 +199,11 @@ class App(Base):
             # Set up the Socket.IO AsyncServer.
             self.sio = AsyncServer(
                 async_mode="asgi",
-                cors_allowed_origins="*"
-                if config.cors_allowed_origins == ["*"]
-                else config.cors_allowed_origins,
+                cors_allowed_origins=(
+                    "*"
+                    if config.cors_allowed_origins == ["*"]
+                    else config.cors_allowed_origins
+                ),
                 cors_credentials=True,
                 max_http_buffer_size=constants.POLLING_MAX_HTTP_BUFFER_SIZE,
                 ping_interval=constants.Ping.INTERVAL,
@@ -374,7 +379,7 @@ class App(Base):
                 raise TypeError(
                     "You may be trying to use an invalid Python function on a state var. "
                     "When referencing a var inside your render code, only limited var operations are supported. "
-                    "See the var operation docs here: https://reflex.dev/docs/state/vars/#var-operations"
+                    "See the var operation docs here: https://reflex.dev/docs/vars/var-operations/"
                 ) from e
             raise e
 
@@ -385,10 +390,9 @@ class App(Base):
         title: str = constants.DefaultPage.TITLE,
         description: str = constants.DefaultPage.DESCRIPTION,
         image: str = constants.DefaultPage.IMAGE,
-        on_load: EventHandler
-        | EventSpec
-        | list[EventHandler | EventSpec]
-        | None = None,
+        on_load: (
+            EventHandler | EventSpec | list[EventHandler | EventSpec] | None
+        ) = None,
         meta: list[dict[str, str]] = constants.DefaultPage.META_LIST,
         script_tags: list[Component] | None = None,
     ):
@@ -518,10 +522,9 @@ class App(Base):
         title: str = constants.Page404.TITLE,
         image: str = constants.Page404.IMAGE,
         description: str = constants.Page404.DESCRIPTION,
-        on_load: EventHandler
-        | EventSpec
-        | list[EventHandler | EventSpec]
-        | None = None,
+        on_load: (
+            EventHandler | EventSpec | list[EventHandler | EventSpec] | None
+        ) = None,
         meta: list[dict[str, str]] = constants.DefaultPage.META_LIST,
     ):
         """Define a custom 404 page for any url having no match.
@@ -1002,7 +1005,7 @@ def upload(app: App):
             )
 
         # Get the state for the session.
-        substate_token = token + "_" + handler.rpartition(".")[0]
+        substate_token = _substate_key(token, handler.rpartition(".")[0])
         state = await app.state_manager.get_state(substate_token)
 
         # get the current session ID

reflex/compiler/compiler.py

@@ -1,4 +1,5 @@
 """Compiler for the reflex apps."""
+
 from __future__ import annotations
 
 import os
@@ -78,18 +79,21 @@ def _compile_contexts(state: Optional[Type[BaseState]], theme: Component) -> str
     Returns:
         The compiled context file.
     """
+    appearance = getattr(theme, "appearance", None)
+    if appearance is None:
+        appearance = LIGHT_COLOR_MODE
     return (
         templates.CONTEXT.render(
             initial_state=utils.compile_state(state),
             state_name=state.get_name(),
             client_storage=utils.compile_client_storage(state),
             is_dev_mode=_is_dev_mode(),
-            default_color_mode=getattr(theme, "appearance", LIGHT_COLOR_MODE),
+            default_color_mode=appearance,
         )
         if state
         else templates.CONTEXT.render(
             is_dev_mode=_is_dev_mode(),
-            default_color_mode=getattr(theme, "appearance", LIGHT_COLOR_MODE),
+            default_color_mode=appearance,
         )
     )
 

reflex/compiler/templates.py

@@ -98,3 +98,20 @@ STYLE = get_template("web/styles/styles.css.jinja2")
 
 # Code that generate the package json file
 PACKAGE_JSON = get_template("web/package.json.jinja2")
+
+# Code that generate the pyproject.toml file for custom components
+CUSTOM_COMPONENTS_PYPROJECT_TOML = get_template(
+    "custom_components/pyproject.toml.jinja2"
+)
+
+# Code that generates the README file for custom components
+CUSTOM_COMPONENTS_README = get_template("custom_components/README.md.jinja2")
+
+# Code that generates the source file for custom components
+CUSTOM_COMPONENTS_SOURCE = get_template("custom_components/src.py.jinja2")
+
+# Code that generates the init file for custom components
+CUSTOM_COMPONENTS_INIT_FILE = get_template("custom_components/__init__.py.jinja2")
+
+# Code that generates the demo app main py file for testing custom components
+CUSTOM_COMPONENTS_DEMO_APP = get_template("custom_components/demo_app.py.jinja2")

reflex/compiler/utils.py

@@ -138,12 +138,12 @@ def compile_state(state: Type[BaseState]) -> dict:
         A dictionary of the compiled state.
     """
     try:
-        initial_state = state().dict()
+        initial_state = state(_reflex_internal_init=True).dict(initial=True)
     except Exception as e:
         console.warn(
             f"Failed to compile initial state with computed vars, excluding them: {e}"
         )
-        initial_state = state().dict(include_computed=False)
+        initial_state = state(_reflex_internal_init=True).dict(include_computed=False)
     return format.format_state(initial_state)
 
 

reflex/components/core/__init__.py

@@ -1,7 +1,7 @@
 """Core Reflex components."""
 
 from . import layout as layout
-from .banner import ConnectionBanner, ConnectionModal
+from .banner import ConnectionBanner, ConnectionModal, ConnectionPulser
 from .colors import color
 from .cond import Cond, color_mode_cond, cond
 from .debounce import DebounceInput
@@ -26,6 +26,7 @@ from .upload import (
 
 connection_banner = ConnectionBanner.create
 connection_modal = ConnectionModal.create
+connection_pulser = ConnectionPulser.create
 debounce_input = DebounceInput.create
 foreach = Foreach.create
 html = Html.create

reflex/components/core/banner.py

@@ -7,14 +7,17 @@ from typing import Optional
 from reflex.components.base.bare import Bare
 from reflex.components.component import Component
 from reflex.components.core.cond import cond
+from reflex.components.el.elements.typography import Div
+from reflex.components.lucide.icon import Icon
 from reflex.components.radix.themes.components.dialog import (
     DialogContent,
     DialogRoot,
     DialogTitle,
 )
-from reflex.components.radix.themes.layout import Box
+from reflex.components.radix.themes.layout import Flex
 from reflex.components.radix.themes.typography.text import Text
 from reflex.constants import Dirs, Hooks, Imports
+from reflex.state import State
 from reflex.utils import imports
 from reflex.vars import Var, VarData
 
@@ -24,12 +27,24 @@ connect_error_var_data: VarData = VarData(  # type: ignore
 )
 
 connection_error: Var = Var.create_safe(
-    value="(connectError !== null) ? connectError.message : ''",
+    value="(connectErrors.length > 0) ? connectErrors[connectErrors.length - 1].message : ''",
     _var_is_local=False,
     _var_is_string=False,
 )._replace(merge_var_data=connect_error_var_data)
-has_connection_error: Var = Var.create_safe(
-    value="connectError !== null",
+
+connection_errors_count: Var = Var.create_safe(
+    value="connectErrors.length",
+    _var_is_string=False,
+    _var_is_local=False,
+)._replace(merge_var_data=connect_error_var_data)
+
+has_connection_errors: Var = Var.create_safe(
+    value="connectErrors.length > 0",
+    _var_is_string=False,
+)._replace(_var_type=bool, merge_var_data=connect_error_var_data)
+
+has_too_many_connection_errors: Var = Var.create_safe(
+    value="connectErrors.length >= 2",
     _var_is_string=False,
 )._replace(_var_type=bool, merge_var_data=connect_error_var_data)
 
@@ -81,16 +96,20 @@ class ConnectionBanner(Component):
             The connection banner component.
         """
         if not comp:
-            comp = Box.create(
+            comp = Flex.create(
                 Text.create(
                     *default_connection_error(),
-                    bg="red",
-                    color="white",
+                    color="black",
+                    size="4",
                 ),
-                textAlign="center",
+                justify="center",
+                background_color="crimson",
+                width="100vw",
+                padding="5px",
+                position="fixed",
             )
 
-        return cond(has_connection_error, comp)
+        return cond(has_connection_errors, comp)
 
 
 class ConnectionModal(Component):
@@ -109,12 +128,81 @@ class ConnectionModal(Component):
         if not comp:
             comp = Text.create(*default_connection_error())
         return cond(
-            has_connection_error,
+            has_too_many_connection_errors,
             DialogRoot.create(
                 DialogContent.create(
                     DialogTitle.create("Connection Error"),
                     comp,
                 ),
-                open=has_connection_error,
+                open=has_too_many_connection_errors,
+                z_index=9999,
+            ),
+        )
+
+
+class WifiOffPulse(Icon):
+    """A wifi_off icon with an animated opacity pulse."""
+
+    @classmethod
+    def create(cls, **props) -> Component:
+        """Create a wifi_off icon with an animated opacity pulse.
+
+        Args:
+            **props: The properties of the component.
+
+        Returns:
+            The icon component with default props applied.
+        """
+        return super().create(
+            "wifi_off",
+            color=props.pop("color", "crimson"),
+            size=props.pop("size", 32),
+            z_index=props.pop("z_index", 9999),
+            position=props.pop("position", "fixed"),
+            bottom=props.pop("botton", "30px"),
+            right=props.pop("right", "30px"),
+            animation=Var.create(f"${{pulse}} 1s infinite", _var_is_string=True),
+            **props,
+        )
+
+    def _get_imports(self) -> imports.ImportDict:
+        return imports.merge_imports(
+            super()._get_imports(),
+            {"@emotion/react": [imports.ImportVar(tag="keyframes")]},
+        )
+
+    def _get_custom_code(self) -> str | None:
+        return """
+const pulse = keyframes`
+    0% {
+        opacity: 0;
+    }
+    100% {
+        opacity: 1;
+    }
+`
+"""
+
+
+class ConnectionPulser(Div):
+    """A connection pulser component."""
+
+    @classmethod
+    def create(cls, **props) -> Component:
+        """Create a connection pulser component.
+
+        Args:
+            **props: The properties of the component.
+
+        Returns:
+            The connection pulser component.
+        """
+        return super().create(
+            cond(
+                ~State.is_hydrated | has_connection_errors,  # type: ignore
+                WifiOffPulse.create(**props),
             ),
+            position="fixed",
+            width="100vw",
+            height="0",
         )

reflex/components/core/banner.pyi

@@ -11,20 +11,25 @@ from typing import Optional
 from reflex.components.base.bare import Bare
 from reflex.components.component import Component
 from reflex.components.core.cond import cond
+from reflex.components.el.elements.typography import Div
+from reflex.components.lucide.icon import Icon
 from reflex.components.radix.themes.components.dialog import (
     DialogContent,
     DialogRoot,
     DialogTitle,
 )
-from reflex.components.radix.themes.layout import Box
+from reflex.components.radix.themes.layout import Flex
 from reflex.components.radix.themes.typography.text import Text
 from reflex.constants import Dirs, Hooks, Imports
+from reflex.state import State
 from reflex.utils import imports
 from reflex.vars import Var, VarData
 
 connect_error_var_data: VarData
 connection_error: Var
-has_connection_error: Var
+connection_errors_count: Var
+has_connection_errors: Var
+has_too_many_connection_errors: Var
 
 class WebsocketTargetURL(Bare):
     @overload
@@ -232,3 +237,211 @@ class ConnectionModal(Component):
             The connection banner component.
         """
         ...
+
+class WifiOffPulse(Icon):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        size: Optional[Union[Var[int], int]] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "WifiOffPulse":
+        """Create a wifi_off icon with an animated opacity pulse.
+
+        Args:
+            size: The size of the icon in pixels.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The properties of the component.
+
+        Returns:
+            The icon component with default props applied.
+        """
+        ...
+
+class ConnectionPulser(Div):
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        access_key: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        auto_capitalize: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        content_editable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        context_menu: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        dir: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        draggable: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        enter_key_hint: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        hidden: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        input_mode: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        item_prop: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        lang: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        role: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        slot: Optional[Union[Var[Union[str, int, bool]], Union[str, int, bool]]] = None,
+        spell_check: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        tab_index: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        title: Optional[
+            Union[Var[Union[str, int, bool]], Union[str, int, bool]]
+        ] = None,
+        style: Optional[Style] = None,
+        key: Optional[Any] = None,
+        id: Optional[Any] = None,
+        class_name: Optional[Any] = None,
+        autofocus: Optional[bool] = None,
+        custom_attrs: Optional[Dict[str, Union[Var, str]]] = None,
+        on_blur: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_context_menu: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_double_click: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_enter: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_leave: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_move: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_out: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_over: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_mouse_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_scroll: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_unmount: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        **props
+    ) -> "ConnectionPulser":
+        """Create a connection pulser component.
+
+        Args:
+            access_key:  Provides a hint for generating a keyboard shortcut for the current element.
+            auto_capitalize: Controls whether and how text input is automatically capitalized as it is entered/edited by the user.
+            content_editable: Indicates whether the element's content is editable.
+            context_menu: Defines the ID of a <menu> element which will serve as the element's context menu.
+            dir: Defines the text direction. Allowed values are ltr (Left-To-Right) or rtl (Right-To-Left)
+            draggable: Defines whether the element can be dragged.
+            enter_key_hint: Hints what media types the media element is able to play.
+            hidden: Defines whether the element is hidden.
+            input_mode: Defines the type of the element.
+            item_prop: Defines the name of the element for metadata purposes.
+            lang: Defines the language used in the element.
+            role: Defines the role of the element.
+            slot: Assigns a slot in a shadow DOM shadow tree to an element.
+            spell_check: Defines whether the element may be checked for spelling errors.
+            tab_index: Defines the position of the current element in the tabbing order.
+            title: Defines a tooltip for the element.
+            style: The style of the component.
+            key: A unique key for the component.
+            id: The id for the component.
+            class_name: The class name for the component.
+            autofocus: Whether the component should take the focus once the page is loaded
+            custom_attrs: custom attribute
+            **props: The properties of the component.
+
+        Returns:
+            The connection pulser component.
+        """
+        ...

reflex/components/el/elements/__init__.py

@@ -146,6 +146,7 @@ address = Address.create
 article = Article.create
 aside = Aside.create
 body = Body.create
+header = Header.create
 footer = Footer.create
 
 # Typography

reflex/components/el/elements/forms.py

@@ -125,6 +125,12 @@ class Input(BaseHTML):
     # Indicates whether the input is checked (for checkboxes and radio buttons)
     checked: Var[Union[str, int, bool]]
 
+    # The initial value (for checkboxes and radio buttons)
+    default_checked: Var[bool]
+
+    # The initial value for a text field
+    default_value: Var[str]
+
     # Name part of the input to submit in 'dir' and 'name' pair when form is submitted
     dirname: Var[Union[str, int, bool]]
 

reflex/components/el/elements/forms.pyi

@@ -598,6 +598,8 @@ class Input(BaseHTML):
         checked: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
+        default_checked: Optional[Union[Var[bool], bool]] = None,
+        default_value: Optional[Union[Var[str], str]] = None,
         dirname: Optional[
             Union[Var[Union[str, int, bool]], Union[str, int, bool]]
         ] = None,
@@ -767,6 +769,8 @@ class Input(BaseHTML):
             auto_focus: Automatically focuses the input when the page loads
             capture: Captures media from the user (camera or microphone)
             checked: Indicates whether the input is checked (for checkboxes and radio buttons)
+            default_checked: The initial value (for checkboxes and radio buttons)
+            default_value: The initial value for a text field
             dirname: Name part of the input to submit in 'dir' and 'name' pair when form is submitted
             disabled: Disables the input
             form: Associates the input with a form (by id)