reflex 0.3.5a4__py3-none-any.whl → 0.3.7__py3-none-any.whl

reflex/.templates/jinja/web/pages/base_page.js.jinja2

@@ -1,5 +1,7 @@
 {% import 'web/pages/utils.js.jinja2' as utils %}
 
+/** @jsxImportSource @emotion/react */
+
 {%- block imports_libs %}
 {% for module in imports%}
   {{- utils.get_import(module) }}

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

@@ -549,7 +549,7 @@ export const useEventLoop = (
       return;
     }
     // only use websockets if state is present
-    if (Object.keys(initialState).length > 0) {
+    if (Object.keys(initialState).length > 1) {
       // Initialize the websocket connection.
       if (!socket.current) {
         connect(socket, dispatch, ['websocket', 'polling'], setConnectError, client_storage)

reflex/__init__.py

@@ -4,10 +4,13 @@ Anything imported here will be available in the default Reflex import as `rx.*`.
 To signal to typecheckers that something should be reexported,
 we use the Flask "import name as name" syntax.
 """
+from __future__ import annotations
+
 import importlib
 from typing import Type
 
 from reflex.page import page as page
+from reflex.utils import console
 from reflex.utils.format import to_snake_case
 
 _ALL_COMPONENTS = [
@@ -181,10 +184,6 @@ _ALL_COMPONENTS = [
     "StatGroup",
     "StatHelpText",
     "StatLabel",
-    "StatArrow",
-    "StatGroup",
-    "StatHelpText",
-    "StatLabel",
     "StatNumber",
     "Step",
     "StepDescription",
@@ -250,7 +249,7 @@ _MAPPING = {
     "reflex.base": ["base", "Base"],
     "reflex.compiler": ["compiler"],
     "reflex.compiler.utils": ["get_asset_path"],
-    "reflex.components": _ALL_COMPONENTS,
+    "reflex.components": _ALL_COMPONENTS + ["chakra", "next"],
     "reflex.components.component": ["memo"],
     "reflex.components.graphing": ["recharts"],
     "reflex.components.datadisplay.moment": ["MomentDelta"],
@@ -286,7 +285,31 @@ _MAPPING = {
     "reflex.utils": ["utils"],
     "reflex.vars": ["vars", "cached_var", "Var"],
 }
-_MAPPING = {value: key for key, values in _MAPPING.items() for value in values}
+
+
+def _reverse_mapping(mapping: dict[str, list]) -> dict[str, str]:
+    """Reverse the mapping used to lazy loading, and check for conflicting name.
+
+    Args:
+        mapping: The mapping to reverse.
+
+    Returns:
+        The reversed mapping.
+    """
+    reversed_mapping = {}
+    for key, values in mapping.items():
+        for value in values:
+            if value not in reversed_mapping:
+                reversed_mapping[value] = key
+            else:
+                console.warn(
+                    f"Key {value} is present multiple times in the imports _MAPPING: {key} / {reversed_mapping[value]}"
+                )
+    return reversed_mapping
+
+
+# _MAPPING = {value: key for key, values in _MAPPING.items() for value in values}
+_MAPPING = _reverse_mapping(_MAPPING)
 
 
 def _removeprefix(text, prefix):

reflex/__init__.pyi

@@ -440,6 +440,8 @@ from reflex.components import clear_selected_files as clear_selected_files
 from reflex.components import EditorButtonList as EditorButtonList
 from reflex.components import EditorOptions as EditorOptions
 from reflex.components import NoSSRComponent as NoSSRComponent
+from reflex.components import chakra as chakra
+from reflex.components import next as next
 from reflex.components.component import memo as memo
 from reflex.components.graphing import recharts as recharts
 from reflex.components.datadisplay.moment import MomentDelta as MomentDelta

reflex/app.py

@@ -667,6 +667,9 @@ class App(Base):
                 # Merge the component style with the app style.
                 component.add_style(self.style)
 
+                if self.theme is not None:
+                    component.apply_theme(self.theme)
+
                 # Add component.get_imports() to all_imports.
                 all_imports.update(component.get_imports())
 

reflex/components/__init__.py

@@ -1,7 +1,9 @@
 """Import all the components."""
 from __future__ import annotations
 
+from . import next as next
 from .base import Script
+from .chakra import *
 from .component import Component
 from .component import NoSSRComponent as NoSSRComponent
 from .datadisplay import *

reflex/components/chakra/__init__.py

@@ -0,0 +1,23 @@
+"""Chakra components."""
+
+
+import importlib
+from typing import Type
+
+from .media.image import Image
+
+image = Image.create
+
+# _MAPPING = {
+#     "image": "media",
+# }
+
+
+# def __getattr__(name: str) -> Type:
+#     print(f"importing {name}")
+#     if name not in _MAPPING:
+#         return importlib.import_module(name)
+
+#     module = importlib.import_module(_MAPPING[name], package=".")
+
+#     return getattr(module, name) if name != _MAPPING[name].rsplit(".")[-1] else module

reflex/components/{media → chakra/media}/image.py

@@ -1,13 +1,10 @@
 """An image component."""
 from __future__ import annotations
 
-import base64
-import io
 from typing import Any, Optional, Union
 
 from reflex.components.component import Component
 from reflex.components.libs.chakra import ChakraComponent, LiteralImageLoading
-from reflex.utils.serializers import serializer
 from reflex.vars import Var
 
 
@@ -15,7 +12,7 @@ class Image(ChakraComponent):
     """Display an image."""
 
     tag = "Image"
-
+    alias = "ChakraImage"
     # How to align the image within its bounds. It maps to css `object-position` property.
     align: Var[str]
 
@@ -79,27 +76,3 @@ class Image(ChakraComponent):
         if src is not None and not isinstance(src, (Var)):
             props["src"] = Var.create(value=src, _var_is_string=True)
         return super().create(*children, **props)
-
-
-try:
-    from PIL.Image import Image as Img
-
-    @serializer
-    def serialize_image(image: Img) -> str:
-        """Serialize a plotly figure.
-
-        Args:
-            image: The image to serialize.
-
-        Returns:
-            The serialized image.
-        """
-        buff = io.BytesIO()
-        image.save(buff, format=getattr(image, "format", None) or "PNG")
-        image_bytes = buff.getvalue()
-        base64_image = base64.b64encode(image_bytes).decode("utf-8")
-        mime_type = getattr(image, "get_format_mimetype", lambda: "image/png")()
-        return f"data:{mime_type};base64,{base64_image}"
-
-except ImportError:
-    pass

reflex/components/chakra/media/image.pyi

@@ -0,0 +1,120 @@
+"""Stub file for reflex/components/chakra/media/image.py"""
+# ------------------- DO NOT EDIT ----------------------
+# This file was generated by `scripts/pyi_generator.py`!
+# ------------------------------------------------------
+
+from typing import Any, Dict, Literal, Optional, Union, overload
+from reflex.vars import Var, BaseVar, ComputedVar
+from reflex.event import EventChain, EventHandler, EventSpec
+from reflex.style import Style
+from typing import Any, Optional, Union
+from reflex.components.component import Component
+from reflex.components.libs.chakra import ChakraComponent, LiteralImageLoading
+from reflex.vars import Var
+
+class Image(ChakraComponent):
+    def get_event_triggers(self) -> dict[str, Union[Var, Any]]: ...
+    @overload
+    @classmethod
+    def create(  # type: ignore
+        cls,
+        *children,
+        align: Optional[Union[Var[str], str]] = None,
+        fallback: Optional[Component] = None,
+        fallback_src: Optional[Union[Var[str], str]] = None,
+        fit: Optional[Union[Var[str], str]] = None,
+        html_height: Optional[Union[Var[str], str]] = None,
+        html_width: Optional[Union[Var[str], str]] = None,
+        ignore_fallback: Optional[Union[Var[bool], bool]] = None,
+        loading: Optional[
+            Union[Var[Literal["eager", "lazy"]], Literal["eager", "lazy"]]
+        ] = None,
+        src: Optional[Union[Var[Any], Any]] = None,
+        alt: Optional[Union[Var[str], str]] = None,
+        src_set: Optional[Union[Var[str], str]] = 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_error: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_focus: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_load: 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
+    ) -> "Image":
+        """Create an Image component.
+
+        Args:
+            *children: The children of the image.
+            align: How to align the image within its bounds. It maps to css `object-position` property.
+            fallback: Fallback Reflex component to show if image is loading or image fails.
+            fallback_src: Fallback image src to show if image is loading or image fails.
+            fit: How the image to fit within its bounds. It maps to css `object-fit` property.
+            html_height: The native HTML height attribute to the passed to the img.
+            html_width: The native HTML width attribute to the passed to the img.
+            ignore_fallback: If true, opt out of the fallbackSrc logic and use as img.
+            loading: "eager" | "lazy"
+            src: The path/url to the image or PIL image object.
+            alt: The alt text of the image.
+            src_set: Provide multiple sources for an image, allowing the browser  to select the most appropriate source based on factors like  screen resolution and device capabilities.  Learn more _[here](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)_
+            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 props of the image.
+
+        Returns:
+            The Image component.
+        """
+        ...

reflex/components/component.py

@@ -40,7 +40,7 @@ from reflex.event import (
     call_event_handler,
     get_handler_args,
 )
-from reflex.style import Style
+from reflex.style import Style, format_as_emotion
 from reflex.utils import console, format, imports, types
 from reflex.utils.imports import ImportVar
 from reflex.utils.serializers import serializer
@@ -266,8 +266,9 @@ class Component(BaseComponent, ABC):
                     passed_type = type(value)
                     expected_type = fields[key].outer_type_
                 if not types._issubclass(passed_type, expected_type):
+                    value_name = value._var_name if isinstance(value, Var) else value
                     raise TypeError(
-                        f"Invalid var passed for prop {key}, expected type {expected_type}, got value {value} of type {passed_type}."
+                        f"Invalid var passed for prop {key}, expected type {expected_type}, got value {value_name} of type {passed_type}."
                     )
 
             # Check if the key is an event trigger.
@@ -287,6 +288,7 @@ class Component(BaseComponent, ABC):
 
         kwargs["style"] = Style(
             {
+                **self.get_fields()["style"].default,
                 **style,
                 **{attr: value for attr, value in kwargs.items() if attr not in fields},
             }
@@ -444,6 +446,26 @@ class Component(BaseComponent, ABC):
 
         return _compile_component(self)
 
+    def _apply_theme(self, theme: Component):
+        """Apply the theme to this component.
+
+        Args:
+            theme: The theme to apply.
+        """
+        pass
+
+    def apply_theme(self, theme: Component):
+        """Apply a theme to the component and its children.
+
+        Args:
+            theme: The theme to apply.
+        """
+        self._apply_theme(theme)
+        for child in self.children:
+            if not isinstance(child, Component):
+                continue
+            child.apply_theme(theme)
+
     def _render(self, props: dict[str, Any] | None = None) -> Tag:
         """Define how to render the component in React.
 
@@ -602,7 +624,7 @@ class Component(BaseComponent, ABC):
         Returns:
             The dictionary of the component style as value and the style notation as key.
         """
-        return {"style": self.style}
+        return {"css": Var.create(format_as_emotion(self.style))}
 
     def render(self) -> Dict:
         """Render the component.
@@ -784,6 +806,10 @@ class Component(BaseComponent, ABC):
         for child in self.children:
             dynamic_imports |= child.get_dynamic_imports()
 
+        for prop in self.get_component_props():
+            if getattr(self, prop) is not None:
+                dynamic_imports |= getattr(self, prop).get_dynamic_imports()
+
         # Return the dynamic imports
         return dynamic_imports
 
@@ -1476,7 +1502,9 @@ class StatefulComponent(BaseComponent):
         code_hash = md5(str(rendered_code).encode("utf-8")).hexdigest()
 
         # Format the tag name including the hash.
-        return format.format_state_name(f"{component.tag or 'Comp'}_{code_hash}")
+        return format.format_state_name(
+            f"{component.tag or 'Comp'}_{code_hash}"
+        ).capitalize()
 
     @classmethod
     def _render_stateful_code(

reflex/components/datadisplay/datatable.py

@@ -7,7 +7,7 @@ from typing import Any, Dict, List, Union
 from reflex.components.component import Component
 from reflex.components.tags import Tag
 from reflex.utils import imports, types
-from reflex.utils.serializers import serialize, serializer
+from reflex.utils.serializers import serialize
 from reflex.vars import BaseVar, ComputedVar, Var
 
 
@@ -129,39 +129,3 @@ class DataTable(Gridjs):
 
         # Render the table.
         return super()._render()
-
-
-try:
-    from pandas import DataFrame
-
-    def format_dataframe_values(df: DataFrame) -> List[List[Any]]:
-        """Format dataframe values to a list of lists.
-
-        Args:
-            df: The dataframe to format.
-
-        Returns:
-            The dataframe as a list of lists.
-        """
-        return [
-            [str(d) if isinstance(d, (list, tuple)) else d for d in data]
-            for data in list(df.values.tolist())
-        ]
-
-    @serializer
-    def serialize_dataframe(df: DataFrame) -> dict:
-        """Serialize a pandas dataframe.
-
-        Args:
-            df: The dataframe to serialize.
-
-        Returns:
-            The serialized dataframe.
-        """
-        return {
-            "columns": df.columns.tolist(),
-            "data": format_dataframe_values(df),
-        }
-
-except ImportError:
-    pass

reflex/components/datadisplay/datatable.pyi

@@ -11,7 +11,7 @@ from typing import Any, Dict, List, Union
 from reflex.components.component import Component
 from reflex.components.tags import Tag
 from reflex.utils import imports, types
-from reflex.utils.serializers import serialize, serializer
+from reflex.utils.serializers import serialize
 from reflex.vars import BaseVar, ComputedVar, Var
 
 class Gridjs(Component):
@@ -183,13 +183,3 @@ class DataTable(Gridjs):
             ValueError: If a pandas dataframe is passed in and columns are also provided.
         """
         ...
-
-try:
-    from pandas import DataFrame
-
-    def format_dataframe_values(df: DataFrame) -> List[List[Any]]: ...
-    @serializer
-    def serialize_dataframe(df: DataFrame) -> dict: ...
-
-except ImportError:
-    pass

reflex/components/el/elements/forms.py

@@ -1,7 +1,8 @@
 """Element classes. This is an auto-generated file. Do not edit. See ../generate.py."""
-from typing import Union
+from typing import Any, Dict, Union
 
 from reflex.components.el.element import Element
+from reflex.constants.event import EventTriggers
 from reflex.vars import Var
 
 from .base import BaseHTML
@@ -205,6 +206,21 @@ class Input(BaseHTML):
     # The width of the input (only for type="image")
     width: Var[Union[str, int, bool]]
 
+    def get_event_triggers(self) -> Dict[str, Any]:
+        """Get the event triggers that pass the component's value to the handler.
+
+        Returns:
+            A dict mapping the event trigger to the var that is passed to the handler.
+        """
+        return {
+            **super().get_event_triggers(),
+            EventTriggers.ON_CHANGE: lambda e0: [e0.target.value],
+            EventTriggers.ON_FOCUS: lambda e0: [e0.target.value],
+            EventTriggers.ON_BLUR: lambda e0: [e0.target.value],
+            EventTriggers.ON_KEY_DOWN: lambda e0: [e0.key],
+            EventTriggers.ON_KEY_UP: lambda e0: [e0.key],
+        }
+
 
 class Label(BaseHTML):
     """Display the label element."""
@@ -341,6 +357,17 @@ class Select(BaseHTML):
     # Number of visible options in a drop-down list
     size: Var[Union[str, int, bool]]
 
+    def get_event_triggers(self) -> Dict[str, Any]:
+        """Get the event triggers that pass the component's value to the handler.
+
+        Returns:
+            A dict mapping the event trigger to the var that is passed to the handler.
+        """
+        return {
+            **super().get_event_triggers(),
+            EventTriggers.ON_CHANGE: lambda e0: [e0.target.value],
+        }
+
 
 class Textarea(BaseHTML):
     """Display the textarea element."""
@@ -388,3 +415,18 @@ class Textarea(BaseHTML):
 
     # How the text in the textarea is to be wrapped when submitting the form
     wrap: Var[Union[str, int, bool]]
+
+    def get_event_triggers(self) -> Dict[str, Any]:
+        """Get the event triggers that pass the component's value to the handler.
+
+        Returns:
+            A dict mapping the event trigger to the var that is passed to the handler.
+        """
+        return {
+            **super().get_event_triggers(),
+            EventTriggers.ON_CHANGE: lambda e0: [e0.target.value],
+            EventTriggers.ON_FOCUS: lambda e0: [e0.target.value],
+            EventTriggers.ON_BLUR: lambda e0: [e0.target.value],
+            EventTriggers.ON_KEY_DOWN: lambda e0: [e0.key],
+            EventTriggers.ON_KEY_UP: lambda e0: [e0.key],
+        }

reflex/components/el/elements/forms.pyi

@@ -7,8 +7,9 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-from typing import Union
+from typing import Any, Dict, Union
 from reflex.components.el.element import Element
+from reflex.constants.event import EventTriggers
 from reflex.vars import Var
 from .base import BaseHTML
 
@@ -589,6 +590,7 @@ class Form(BaseHTML):
         ...
 
 class Input(BaseHTML):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -725,6 +727,9 @@ class Input(BaseHTML):
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
+        on_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
@@ -737,6 +742,12 @@ class Input(BaseHTML):
         on_focus: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
+        on_key_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_key_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
         on_mount: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
@@ -1877,6 +1888,7 @@ class Progress(BaseHTML):
         ...
 
 class Select(BaseHTML):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -1952,6 +1964,9 @@ class Select(BaseHTML):
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
+        on_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
@@ -2042,6 +2057,7 @@ class Select(BaseHTML):
         ...
 
 class Textarea(BaseHTML):
+    def get_event_triggers(self) -> Dict[str, Any]: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -2131,6 +2147,9 @@ class Textarea(BaseHTML):
         on_blur: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
+        on_change: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
         on_click: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
@@ -2143,6 +2162,12 @@ class Textarea(BaseHTML):
         on_focus: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,
+        on_key_down: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
+        on_key_up: Optional[
+            Union[EventHandler, EventSpec, list, function, BaseVar]
+        ] = None,
         on_mount: Optional[
             Union[EventHandler, EventSpec, list, function, BaseVar]
         ] = None,

reflex/components/graphing/plotly.py

@@ -1,10 +1,8 @@
 """Component for displaying a plotly graph."""
 
-import json
 from typing import Any, Dict, List
 
 from reflex.components.component import NoSSRComponent
-from reflex.utils.serializers import serializer
 from reflex.vars import Var
 
 try:
@@ -42,23 +40,3 @@ class Plotly(PlotlyLib):
 
     # If true, the graph will resize when the window is resized.
     use_resize_handler: Var[bool]
-
-
-try:
-    from plotly.graph_objects import Figure
-    from plotly.io import to_json
-
-    @serializer
-    def serialize_figure(figure: Figure) -> list:
-        """Serialize a plotly figure.
-
-        Args:
-            figure: The figure to serialize.
-
-        Returns:
-            The serialized figure.
-        """
-        return json.loads(str(to_json(figure)))["data"]
-
-except ImportError:
-    pass

reflex/components/graphing/plotly.pyi

@@ -7,10 +7,8 @@ from typing import Any, Dict, Literal, Optional, Union, overload
 from reflex.vars import Var, BaseVar, ComputedVar
 from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
-import json
 from typing import Any, Dict, List
 from reflex.components.component import NoSSRComponent
-from reflex.utils.serializers import serializer
 from reflex.vars import Var
 
 try:
@@ -185,13 +183,3 @@ class Plotly(PlotlyLib):
             TypeError: If an invalid child is passed.
         """
         ...
-
-try:
-    from plotly.graph_objects import Figure  # type: ignore
-    from plotly.io import to_json
-
-    @serializer
-    def serialize_figure(figure: Figure) -> list: ...  # type: ignore
-
-except ImportError:
-    pass