reflex 0.4.4a1__py3-none-any.whl → 0.4.5__py3-none-any.whl

reflex/compiler/utils.py

@@ -1,4 +1,5 @@
 """Common utility functions used in the compiler."""
+
 from __future__ import annotations
 
 import os
@@ -255,7 +256,7 @@ def compile_custom_component(
             "name": component.tag,
             "props": props,
             "render": render.render(),
-            "hooks": render.get_hooks(),
+            "hooks": render.get_hooks_internal() | render.get_hooks(),
             "custom_code": render.get_custom_code(),
         },
         imports,
@@ -404,7 +405,11 @@ def get_asset_path(filename: str | None = None) -> str:
 
 
 def add_meta(
-    page: Component, title: str, image: str, description: str, meta: list[dict]
+    page: Component,
+    title: str,
+    image: str,
+    meta: list[dict],
+    description: str | None = None,
 ) -> Component:
     """Add metadata to a page.
 
@@ -412,19 +417,24 @@ def add_meta(
         page: The component for the page.
         title: The title of the page.
         image: The image for the page.
-        description: The description of the page.
         meta: The metadata list.
+        description: The description of the page.
 
     Returns:
         The component with the metadata added.
     """
     meta_tags = [Meta.create(**item) for item in meta]
 
+    children: list[Any] = [
+        Title.create(title),
+    ]
+    if description:
+        children.append(Description.create(content=description))
+    children.append(Image.create(content=image))
+
     page.children.append(
         Head.create(
-            Title.create(title),
-            Description.create(content=description),
-            Image.create(content=image),
+            *children,
             *meta_tags,
         )
     )

reflex/components/component.py

@@ -74,6 +74,14 @@ class BaseComponent(Base, ABC):
             The dictionary for template of the component.
         """
 
+    @abstractmethod
+    def get_hooks_internal(self) -> set[str]:
+        """Get the reflex internal hooks for the component and its children.
+
+        Returns:
+            The code that should appear just before user-defined hooks.
+        """
+
     @abstractmethod
     def get_hooks(self) -> set[str]:
         """Get the React hooks for this component.
@@ -873,6 +881,20 @@ class Component(BaseComponent, ABC):
 
         return vars
 
+    def _has_event_triggers(self) -> bool:
+        """Check if the component or children have any event triggers.
+
+        Returns:
+            True if the component or children have any event triggers.
+        """
+        if self.event_triggers:
+            return True
+        else:
+            for child in self.children:
+                if isinstance(child, Component) and child._has_event_triggers():
+                    return True
+        return False
+
     def _get_custom_code(self) -> str | None:
         """Get custom code for the component.
 
@@ -1127,14 +1149,28 @@ class Component(BaseComponent, ABC):
         """
         return
 
+    def get_hooks_internal(self) -> set[str]:
+        """Get the reflex internal hooks for the component and its children.
+
+        Returns:
+            The code that should appear just before user-defined hooks.
+        """
+        # Store the code in a set to avoid duplicates.
+        code = self._get_hooks_internal()
+
+        # Add the hook code for the children.
+        for child in self.children:
+            code |= child.get_hooks_internal()
+
+        return code
+
     def get_hooks(self) -> Set[str]:
         """Get the React hooks for this component and its children.
 
         Returns:
             The code that should appear just before returning the rendered component.
         """
-        # Store the code in a set to avoid duplicates.
-        code = self._get_hooks_internal()
+        code = set()
 
         # Add the hook code for this component.
         hooks = self._get_hooks()
@@ -1251,6 +1287,9 @@ class CustomComponent(Component):
     # The props of the component.
     props: Dict[str, Any] = {}
 
+    # Props that reference other components.
+    component_props: Dict[str, Component] = {}
+
     def __init__(self, *args, **kwargs):
         """Initialize the custom component.
 
@@ -1282,19 +1321,21 @@ class CustomComponent(Component):
                 self.props[format.to_camel_case(key)] = value
                 continue
 
-            # Convert the type to a Var, then get the type of the var.
-            if not types._issubclass(type_, Var):
-                type_ = Var[type_]
-            type_ = types.get_args(type_)[0]
-
             # Handle subclasses of Base.
-            if types._issubclass(type_, Base):
-                try:
-                    value = BaseVar(
-                        _var_name=value.json(), _var_type=type_, _var_is_local=True
+            if isinstance(value, Base):
+                base_value = Var.create(value)
+
+                # Track hooks and imports associated with Component instances.
+                if base_value is not None and isinstance(value, Component):
+                    self.component_props[key] = value
+                    value = base_value._replace(
+                        merge_var_data=VarData(  # type: ignore
+                            imports=value.get_imports(),
+                            hooks=value.get_hooks(),
+                        )
                     )
-                except Exception:
-                    value = Var.create(value)
+                else:
+                    value = base_value
             else:
                 value = Var.create(value, _var_is_string=type(value) is str)
 
@@ -1353,6 +1394,16 @@ class CustomComponent(Component):
             custom_components |= self.get_component(self).get_custom_components(
                 seen=seen
             )
+
+        # Fetch custom components from props as well.
+        for child_component in self.component_props.values():
+            if child_component.tag is None:
+                continue
+            if child_component.tag not in seen:
+                seen.add(child_component.tag)
+                if isinstance(child_component, CustomComponent):
+                    custom_components |= {child_component}
+                custom_components |= child_component.get_custom_components(seen=seen)
         return custom_components
 
     def _render(self) -> Tag:
@@ -1379,6 +1430,19 @@ class CustomComponent(Component):
             for name, prop in self.props.items()
         ]
 
+    def _get_vars(self, include_children: bool = False) -> list[Var]:
+        """Walk all Vars used in this component.
+
+        Args:
+            include_children: Whether to include Vars from children.
+
+        Returns:
+            Each var referenced by the component (props, styles, event handlers).
+        """
+        return super()._get_vars(include_children=include_children) + [
+            prop for prop in self.props.values() if isinstance(prop, Var)
+        ]
+
     @lru_cache(maxsize=None)  # noqa
     def get_component(self) -> Component:
         """Render the component.
@@ -1743,6 +1807,14 @@ class StatefulComponent(BaseComponent):
             )
         return trigger_memo
 
+    def get_hooks_internal(self) -> set[str]:
+        """Get the reflex internal hooks for the component and its children.
+
+        Returns:
+            The code that should appear just before user-defined hooks.
+        """
+        return set()
+
     def get_hooks(self) -> set[str]:
         """Get the React hooks for this component.
 
@@ -1851,7 +1923,7 @@ class MemoizationLeaf(Component):
             The memoization leaf
         """
         comp = super().create(*children, **props)
-        if comp.get_hooks():
+        if comp.get_hooks() or comp.get_hooks_internal():
             comp._memoization_mode = cls._memoization_mode.copy(
                 update={"disposition": MemoizationDisposition.ALWAYS}
             )

reflex/components/core/upload.py

@@ -128,7 +128,7 @@ uploaded_files_url_prefix: Var = Var.create_safe(
 )
 
 
-def get_upload_url(file_path: str) -> str:
+def get_upload_url(file_path: str) -> Var[str]:
     """Get the URL of an uploaded file.
 
     Args:
@@ -139,7 +139,7 @@ def get_upload_url(file_path: str) -> str:
     """
     Upload.is_used = True
 
-    return f"{uploaded_files_url_prefix}/{file_path}"
+    return Var.create_safe(f"{uploaded_files_url_prefix}/{file_path}")
 
 
 def _on_drop_spec(files: Var):

reflex/components/core/upload.pyi

@@ -40,7 +40,7 @@ def get_upload_dir() -> Path: ...
 
 uploaded_files_url_prefix: Var
 
-def get_upload_url(file_path: str) -> str: ...
+def get_upload_url(file_path: str) -> Var[str]: ...
 
 class UploadFilesProvider(Component):
     @overload

reflex/components/el/elements/forms.py

@@ -162,7 +162,7 @@ class Form(BaseHTML):
         props["handle_submit_unique_name"] = ""
         form = super().create(*children, **props)
         form.handle_submit_unique_name = md5(
-            str(form.get_hooks()).encode("utf-8")
+            str(form.get_hooks_internal().union(form.get_hooks())).encode("utf-8")
         ).hexdigest()
         return form
 

reflex/components/markdown/markdown.py

@@ -291,8 +291,10 @@ class Markdown(Component):
 
     def _get_custom_code(self) -> str | None:
         hooks = set()
-        for component in self.component_map.values():
-            hooks |= component(_MOCK_ARG).get_hooks()
+        for _component in self.component_map.values():
+            comp = _component(_MOCK_ARG)
+            hooks |= comp.get_hooks_internal()
+            hooks |= comp.get_hooks()
         formatted_hooks = "\n".join(hooks)
         return f"""
         function {self._get_component_map_name()} () {{

reflex/components/radix/themes/components/radio_group.py

@@ -1,4 +1,5 @@
 """Interactive components provided by @radix-ui/themes."""
+from __future__ import annotations
 
 from typing import Any, Dict, List, Literal, Optional, Union
 
@@ -126,7 +127,7 @@ class HighLevelRadioGroup(RadixThemesComponent):
     def create(
         cls,
         items: Var[List[Optional[Union[str, int, float, list, dict, bool]]]],
-        **props
+        **props,
     ) -> Component:
         """Create a radio group component.
 

reflex/components/radix/themes/components/select.py

@@ -184,6 +184,9 @@ class HighLevelSelect(SelectRoot):
     # The width of the select.
     width: Var[str]
 
+    # The positioning mode to use. Default is "item-aligned".
+    position: Var[Literal["item-aligned", "popper"]]
+
     @classmethod
     def create(cls, items: Union[List[str], Var[List[str]]], **props) -> Component:
         """Create a select component.
@@ -196,12 +199,14 @@ class HighLevelSelect(SelectRoot):
             The select component.
         """
         content_props = {
-            prop: props.pop(prop) for prop in ["high_contrast"] if prop in props
+            prop: props.pop(prop)
+            for prop in ["high_contrast", "position"]
+            if prop in props
         }
 
         trigger_props = {
             prop: props.pop(prop)
-            for prop in ["placeholder", "variant", "radius", "width"]
+            for prop in ["placeholder", "variant", "radius", "width", "flex_shrink"]
             if prop in props
         }
 

reflex/components/radix/themes/components/select.pyi

@@ -864,6 +864,12 @@ class HighLevelSelect(SelectRoot):
             ]
         ] = None,
         width: Optional[Union[Var[str], str]] = None,
+        position: Optional[
+            Union[
+                Var[Literal["item-aligned", "popper"]],
+                Literal["item-aligned", "popper"],
+            ]
+        ] = None,
         size: Optional[
             Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
         ] = None,
@@ -945,6 +951,7 @@ class HighLevelSelect(SelectRoot):
             variant: The variant of the select.
             radius: The radius of the select.
             width: The width of the select.
+            position: The positioning mode to use. Default is "item-aligned".
             size: The size of the select: "1" | "2" | "3"
             default_value: The value of the select when initially rendered. Use when you do not need to control the state of the select.
             value: The controlled value of the select. Should be used in conjunction with on_change.
@@ -1057,6 +1064,12 @@ class Select(ComponentNamespace):
             ]
         ] = None,
         width: Optional[Union[Var[str], str]] = None,
+        position: Optional[
+            Union[
+                Var[Literal["item-aligned", "popper"]],
+                Literal["item-aligned", "popper"],
+            ]
+        ] = None,
         size: Optional[
             Union[Var[Literal["1", "2", "3"]], Literal["1", "2", "3"]]
         ] = None,
@@ -1138,6 +1151,7 @@ class Select(ComponentNamespace):
             variant: The variant of the select.
             radius: The radius of the select.
             width: The width of the select.
+            position: The positioning mode to use. Default is "item-aligned".
             size: The size of the select: "1" | "2" | "3"
             default_value: The value of the select when initially rendered. Use when you do not need to control the state of the select.
             value: The controlled value of the select. Should be used in conjunction with on_change.

reflex/components/radix/themes/layout/list.py

@@ -5,6 +5,8 @@ from typing import Iterable, Literal, Optional, Union
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.foreach import Foreach
 from reflex.components.el.elements.typography import Li
+from reflex.components.lucide.icon import Icon
+from reflex.components.radix.themes.typography.text import Text
 from reflex.style import Style
 from reflex.vars import Var
 
@@ -39,12 +41,16 @@ LiteralListStyleTypeOrdered = Literal[
 class BaseList(Flex, LayoutComponent):
     """Base class for ordered and unordered lists."""
 
+    # The style of the list. Default to "none".
+    list_style_type: Var[
+        Union[LiteralListStyleTypeUnordered, LiteralListStyleTypeOrdered]
+    ]
+
     @classmethod
     def create(
         cls,
         *children,
         items: Optional[Union[Var[Iterable], Iterable]] = None,
-        list_style_type: str = "",
         **props,
     ):
         """Create a list component.
@@ -52,21 +58,23 @@ class BaseList(Flex, LayoutComponent):
         Args:
             *children: The children of the component.
             items: A list of items to add to the list.
-            list_style_type: The style of the list.
             **props: The properties of the component.
 
         Returns:
             The list component.
+
         """
+        list_style_type = props.pop("list_style_type", "none")
         if not children and items is not None:
             if isinstance(items, Var):
                 children = [Foreach.create(items, ListItem.create)]
             else:
                 children = [ListItem.create(item) for item in items]
-        props["list_style_type"] = list_style_type
+        # props["list_style_type"] = list_style_type
         props["direction"] = "column"
         style = props.setdefault("style", {})
         style["list_style_position"] = "outside"
+        style["list_style_type"] = list_style_type
         if "gap" in props:
             style["gap"] = props["gap"]
         return super().create(*children, **props)
@@ -102,6 +110,7 @@ class UnorderedList(BaseList):
 
         Returns:
             The list component.
+
         """
         return super().create(
             *children, items=items, list_style_type=list_style_type, **props
@@ -129,6 +138,7 @@ class OrderedList(BaseList):
 
         Returns:
             The list component.
+
         """
         return super().create(
             *children, items=items, list_style_type=list_style_type, **props
@@ -138,7 +148,24 @@ class OrderedList(BaseList):
 class ListItem(Li):
     """Display an item of an ordered or unordered list."""
 
-    ...
+    @classmethod
+    def create(cls, *children, **props):
+        """Create a list item component.
+
+        Args:
+            *children: The children of the component.
+            **props: The properties of the component.
+
+        Returns:
+            The list item component.
+
+        """
+        for child in children:
+            if isinstance(child, Text):
+                child.as_ = "span"
+            elif isinstance(child, Icon) and "display" not in child.style:
+                child.style["display"] = "inline"
+        return super().create(*children, **props)
 
 
 class List(ComponentNamespace):

reflex/components/radix/themes/layout/list.pyi

@@ -11,6 +11,8 @@ from typing import Iterable, Literal, Optional, Union
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.foreach import Foreach
 from reflex.components.el.elements.typography import Li
+from reflex.components.lucide.icon import Icon
+from reflex.components.radix.themes.typography.text import Text
 from reflex.style import Style
 from reflex.vars import Var
 from .base import LayoutComponent
@@ -41,7 +43,50 @@ class BaseList(Flex, LayoutComponent):
         cls,
         *children,
         items: Optional[Union[Union[Var[Iterable], Iterable], Iterable]] = None,
-        list_style_type: Optional[str] = "",
+        list_style_type: Optional[
+            Union[
+                Var[
+                    Union[
+                        Literal["none", "disc", "circle", "square"],
+                        Literal[
+                            "none",
+                            "decimal",
+                            "decimal-leading-zero",
+                            "lower-roman",
+                            "upper-roman",
+                            "lower-greek",
+                            "lower-latin",
+                            "upper-latin",
+                            "armenian",
+                            "georgian",
+                            "lower-alpha",
+                            "upper-alpha",
+                            "hiragana",
+                            "katakana",
+                        ],
+                    ]
+                ],
+                Union[
+                    Literal["none", "disc", "circle", "square"],
+                    Literal[
+                        "none",
+                        "decimal",
+                        "decimal-leading-zero",
+                        "lower-roman",
+                        "upper-roman",
+                        "lower-greek",
+                        "lower-latin",
+                        "upper-latin",
+                        "armenian",
+                        "georgian",
+                        "lower-alpha",
+                        "upper-alpha",
+                        "hiragana",
+                        "katakana",
+                    ],
+                ],
+            ]
+        ] = None,
         as_child: Optional[Union[Var[bool], bool]] = None,
         direction: Optional[
             Union[
@@ -257,7 +302,7 @@ class BaseList(Flex, LayoutComponent):
         Args:
             *children: The children of the component.
             items: A list of items to add to the list.
-            list_style_type: The style of the list.
+            list_style_type: The style of the list. Default to "none".
             as_child: Change the default rendered element for the one passed as a child, merging their props and behavior.
             direction: How child items are layed out: "row" | "column" | "row-reverse" | "column-reverse"
             align: Alignment of children along the main axis: "start" | "center" | "end" | "baseline" | "stretch"
@@ -306,6 +351,7 @@ class BaseList(Flex, LayoutComponent):
 
         Returns:
             The list component.
+
         """
         ...
 
@@ -581,6 +627,7 @@ class UnorderedList(BaseList):
 
         Returns:
             The list component.
+
         """
         ...
 
@@ -873,12 +920,11 @@ class OrderedList(BaseList):
 
         Returns:
             The list component.
+
         """
         ...
 
 class ListItem(Li):
-    ...
-
     @overload
     @classmethod
     def create(  # type: ignore
@@ -977,7 +1023,7 @@ class ListItem(Li):
         ] = None,
         **props
     ) -> "ListItem":
-        """Create the component.
+        """Create a list item component.
 
         Args:
             *children: The children of the component.
@@ -1003,13 +1049,11 @@ class ListItem(Li):
             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 component.
+            **props: The properties of the component.
 
         Returns:
-            The component.
+            The list item component.
 
-        Raises:
-            TypeError: If an invalid child is passed.
         """
         ...
 

reflex/constants/installer.py

@@ -71,7 +71,7 @@ class Node(SimpleNamespace):
     # The Node version.
     VERSION = "18.17.0"
     # The minimum required node version.
-    MIN_VERSION = "16.8.0"
+    MIN_VERSION = "18.17.0"
 
     # The node bin path.
     BIN_PATH = os.path.join(

reflex/constants/route.py

@@ -50,9 +50,9 @@ class DefaultPage(SimpleNamespace):
     """Default page constants."""
 
     # The default title to show for Reflex apps.
-    TITLE = "Reflex App"
+    TITLE = "{} | {}"
     # The default description to show for Reflex apps.
-    DESCRIPTION = "A Reflex app."
+    DESCRIPTION = ""
     # The default image to show for Reflex apps.
     IMAGE = "favicon.ico"
     # The default meta list to show for Reflex apps.

reflex/event.py

@@ -147,6 +147,10 @@ class EventHandler(EventActionsMixin):
     # The function to call in response to the event.
     fn: Any
 
+    # The full name of the state class this event handler is attached to.
+    # Emtpy string means this event handler is a server side event.
+    state_full_name: str = ""
+
     class Config:
         """The Pydantic config."""