reflex 0.5.1a3__tar.gz → 0.5.2__tar.gz

{reflex-0.5.1a3 → reflex-0.5.2}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: reflex
-Version: 0.5.1a3
+Version: 0.5.2
 Summary: Web apps in pure Python.
 Home-page: https://reflex.dev
 License: Apache-2.0
@@ -174,14 +174,15 @@ def index():
                 on_blur=State.set_prompt,
                 width="25em",
             ),
-            rx.button("Generate Image", on_click=State.get_image, width="25em"),
+            rx.button(
+                "Generate Image", 
+                on_click=State.get_image,
+                width="25em",
+                loading=State.processing
+            ),
             rx.cond(
-                State.processing,
-                rx.chakra.circular_progress(is_indeterminate=True),
-                rx.cond(
-                    State.complete,
-                    rx.image(src=State.image_url, width="20em"),
-                ),
+                State.complete,
+                rx.image(src=State.image_url, width="20em"),
             ),
             align="center",
         ),
@@ -239,7 +240,7 @@ class State(rx.State):
 
 The state defines all the variables (called vars) in an app that can change and the functions that change them.
 
-Here the state is comprised of a `prompt` and `image_url`. There are also the booleans `processing` and `complete` to indicate when to show the circular progress and image.
+Here the state is comprised of a `prompt` and `image_url`. There are also the booleans `processing` and `complete` to indicate when to disable the button (during image generation) and when to show the resulting image.
 
 ### **Event Handlers**
 

{reflex-0.5.1a3 → reflex-0.5.2}/README.md

@@ -120,14 +120,15 @@ def index():
                 on_blur=State.set_prompt,
                 width="25em",
             ),
-            rx.button("Generate Image", on_click=State.get_image, width="25em"),
+            rx.button(
+                "Generate Image", 
+                on_click=State.get_image,
+                width="25em",
+                loading=State.processing
+            ),
             rx.cond(
-                State.processing,
-                rx.chakra.circular_progress(is_indeterminate=True),
-                rx.cond(
-                    State.complete,
-                    rx.image(src=State.image_url, width="20em"),
-                ),
+                State.complete,
+                rx.image(src=State.image_url, width="20em"),
             ),
             align="center",
         ),
@@ -185,7 +186,7 @@ class State(rx.State):
 
 The state defines all the variables (called vars) in an app that can change and the functions that change them.
 
-Here the state is comprised of a `prompt` and `image_url`. There are also the booleans `processing` and `complete` to indicate when to show the circular progress and image.
+Here the state is comprised of a `prompt` and `image_url`. There are also the booleans `processing` and `complete` to indicate when to disable the button (during image generation) and when to show the resulting image.
 
 ### **Event Handlers**
 

{reflex-0.5.1a3 → reflex-0.5.2}/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "reflex"
-version = "0.5.1a3"
+version = "0.5.2"
 description = "Web apps in pure Python."
 license = "Apache-2.0"
 authors = [

{reflex-0.5.1a3 → reflex-0.5.2}/reflex/app.py

@@ -7,10 +7,12 @@ import concurrent.futures
 import contextlib
 import copy
 import functools
+import inspect
 import io
 import multiprocessing
 import os
 import platform
+import sys
 from typing import (
     Any,
     AsyncIterator,
@@ -100,7 +102,50 @@ class OverlayFragment(Fragment):
     pass
 
 
-class App(Base):
+class LifespanMixin(Base):
+    """A Mixin that allow tasks to run during the whole app lifespan."""
+
+    # Lifespan tasks that are planned to run.
+    lifespan_tasks: Set[Union[asyncio.Task, Callable]] = set()
+
+    @contextlib.asynccontextmanager
+    async def _run_lifespan_tasks(self, app: FastAPI):
+        running_tasks = []
+        try:
+            async with contextlib.AsyncExitStack() as stack:
+                for task in self.lifespan_tasks:
+                    if isinstance(task, asyncio.Task):
+                        running_tasks.append(task)
+                    else:
+                        signature = inspect.signature(task)
+                        if "app" in signature.parameters:
+                            task = functools.partial(task, app=app)
+                        _t = task()
+                        if isinstance(_t, contextlib._AsyncGeneratorContextManager):
+                            await stack.enter_async_context(_t)
+                        elif isinstance(_t, Coroutine):
+                            running_tasks.append(asyncio.create_task(_t))
+                yield
+        finally:
+            cancel_kwargs = (
+                {"msg": "lifespan_cleanup"} if sys.version_info >= (3, 9) else {}
+            )
+            for task in running_tasks:
+                task.cancel(**cancel_kwargs)
+
+    def register_lifespan_task(self, task: Callable | asyncio.Task, **task_kwargs):
+        """Register a task to run during the lifespan of the app.
+
+        Args:
+            task: The task to register.
+            task_kwargs: The kwargs of the task.
+        """
+        if task_kwargs:
+            task = functools.partial(task, **task_kwargs)  # type: ignore
+        self.lifespan_tasks.add(task)  # type: ignore
+
+
+class App(LifespanMixin, Base):
     """The main Reflex app that encapsulates the backend and frontend.
 
     Every Reflex app needs an app defined in its main module.
@@ -203,7 +248,7 @@ class App(Base):
         self.middleware.append(HydrateMiddleware())
 
         # Set up the API.
-        self.api = FastAPI()
+        self.api = FastAPI(lifespan=self._run_lifespan_tasks)
         self._add_cors()
         self._add_default_endpoints()
 

{reflex-0.5.1a3 → reflex-0.5.2}/reflex/components/datadisplay/code.py

@@ -493,7 +493,7 @@ class CodeBlock(Component):
         else:
             return code_block
 
-    def add_style(self) -> Style | None:
+    def add_style(self):
         """Add style to the component."""
         self.custom_style.update(self.style)
 

{reflex-0.5.1a3 → reflex-0.5.2}/reflex/components/datadisplay/code.pyi

@@ -1111,6 +1111,6 @@ class CodeBlock(Component):
             The text component.
         """
         ...
-    def add_style(self) -> Style | None: ...
+    def add_style(self): ...
     @staticmethod
     def convert_theme_name(theme) -> str: ...

{reflex-0.5.1a3 → reflex-0.5.2}/reflex/components/radix/primitives/accordion.py

@@ -59,7 +59,7 @@ class AccordionComponent(RadixPrimitiveComponent):
     # The variant of the component.
     variant: Var[LiteralAccordionVariant]
 
-    def add_style(self) -> Style | None:
+    def add_style(self):
         """Add style to the component."""
         if self.color_scheme is not None:
             self.custom_attrs["data-accent-color"] = self.color_scheme
@@ -250,43 +250,41 @@ class AccordionItem(AccordionComponent):
 
         return super().create(*children, value=value, **props, class_name=cls_name)
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
         divider_style = f"var(--divider-px) solid {color('gray', 6, alpha=True)}"
-        return Style(
-            {
-                "overflow": "hidden",
-                "width": "100%",
-                "margin_top": "1px",
+        return {
+            "overflow": "hidden",
+            "width": "100%",
+            "margin_top": "1px",
+            "border_top": divider_style,
+            "&:first-child": {
+                "margin_top": 0,
+                "border_top": 0,
+                "border_top_left_radius": "var(--radius-4)",
+                "border_top_right_radius": "var(--radius-4)",
+            },
+            "&:last-child": {
+                "border_bottom_left_radius": "var(--radius-4)",
+                "border_bottom_right_radius": "var(--radius-4)",
+            },
+            "&:focus-within": {
+                "position": "relative",
+                "z_index": 1,
+            },
+            _inherited_variant_selector("ghost", "&:first-child"): {
+                "border_radius": 0,
                 "border_top": divider_style,
-                "&:first-child": {
-                    "margin_top": 0,
-                    "border_top": 0,
-                    "border_top_left_radius": "var(--radius-4)",
-                    "border_top_right_radius": "var(--radius-4)",
-                },
-                "&:last-child": {
-                    "border_bottom_left_radius": "var(--radius-4)",
-                    "border_bottom_right_radius": "var(--radius-4)",
-                },
-                "&:focus-within": {
-                    "position": "relative",
-                    "z_index": 1,
-                },
-                _inherited_variant_selector("ghost", "&:first-child"): {
-                    "border_radius": 0,
-                    "border_top": divider_style,
-                },
-                _inherited_variant_selector("ghost", "&:last-child"): {
-                    "border_radius": 0,
-                    "border_bottom": divider_style,
-                },
-            }
-        )
+            },
+            _inherited_variant_selector("ghost", "&:last-child"): {
+                "border_radius": 0,
+                "border_bottom": divider_style,
+            },
+        }
 
 
 class AccordionHeader(AccordionComponent):
@@ -314,13 +312,13 @@ class AccordionHeader(AccordionComponent):
 
         return super().create(*children, class_name=cls_name, **props)
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        return Style({"display": "flex"})
+        return {"display": "flex"}
 
 
 class AccordionTrigger(AccordionComponent):
@@ -348,44 +346,42 @@ class AccordionTrigger(AccordionComponent):
 
         return super().create(*children, class_name=cls_name, **props)
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        return Style(
-            {
-                "color": color("accent", 11),
-                "font_size": "1.1em",
-                "line_height": 1,
-                "justify_content": "space-between",
-                "align_items": "center",
-                "flex": 1,
-                "display": "flex",
-                "padding": "var(--space-3) var(--space-4)",
-                "width": "100%",
-                "box_shadow": f"0 var(--divider-px) 0 {color('gray', 6, alpha=True)}",
-                "&[data-state='open'] > .AccordionChevron": {
-                    "transform": "rotate(180deg)",
-                },
+        return {
+            "color": color("accent", 11),
+            "font_size": "1.1em",
+            "line_height": 1,
+            "justify_content": "space-between",
+            "align_items": "center",
+            "flex": 1,
+            "display": "flex",
+            "padding": "var(--space-3) var(--space-4)",
+            "width": "100%",
+            "box_shadow": f"0 var(--divider-px) 0 {color('gray', 6, alpha=True)}",
+            "&[data-state='open'] > .AccordionChevron": {
+                "transform": "rotate(180deg)",
+            },
+            "&:hover": {
+                "background_color": color("accent", 4),
+            },
+            "& > .AccordionChevron": {
+                "transition": f"transform var(--animation-duration) var(--animation-easing)",
+            },
+            _inherited_variant_selector("classic"): {
+                "color": "var(--accent-contrast)",
                 "&:hover": {
-                    "background_color": color("accent", 4),
+                    "background_color": color("accent", 10),
                 },
                 "& > .AccordionChevron": {
-                    "transition": f"transform var(--animation-duration) var(--animation-easing)",
-                },
-                _inherited_variant_selector("classic"): {
                     "color": "var(--accent-contrast)",
-                    "&:hover": {
-                        "background_color": color("accent", 10),
-                    },
-                    "& > .AccordionChevron": {
-                        "color": "var(--accent-contrast)",
-                    },
                 },
-            }
-        )
+            },
+        }
 
 
 class AccordionIcon(Icon):
@@ -470,7 +466,7 @@ to {
 """
         ]
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
@@ -486,24 +482,22 @@ to {
             _var_is_string=True,
         )
 
-        return Style(
-            {
-                "overflow": "hidden",
-                "color": color("accent", 11),
-                "padding_x": "var(--space-4)",
-                # Apply before and after content to avoid height animation jank.
-                "&:before, &:after": {
-                    "content": "' '",
-                    "display": "block",
-                    "height": "var(--space-3)",
-                },
-                "&[data-state='open']": {"animation": slideDown},
-                "&[data-state='closed']": {"animation": slideUp},
-                _inherited_variant_selector("classic"): {
-                    "color": "var(--accent-contrast)",
-                },
-            }
-        )
+        return {
+            "overflow": "hidden",
+            "color": color("accent", 11),
+            "padding_x": "var(--space-4)",
+            # Apply before and after content to avoid height animation jank.
+            "&:before, &:after": {
+                "content": "' '",
+                "display": "block",
+                "height": "var(--space-3)",
+            },
+            "&[data-state='open']": {"animation": slideDown},
+            "&[data-state='closed']": {"animation": slideUp},
+            _inherited_variant_selector("classic"): {
+                "color": "var(--accent-contrast)",
+            },
+        }
 
 
 class Accordion(ComponentNamespace):

{reflex-0.5.1a3 → reflex-0.5.2}/reflex/components/radix/primitives/accordion.pyi

@@ -26,7 +26,7 @@ DEFAULT_ANIMATION_DURATION = 250
 DEFAULT_ANIMATION_EASING = "cubic-bezier(0.87, 0, 0.13, 1)"
 
 class AccordionComponent(RadixPrimitiveComponent):
-    def add_style(self) -> Style | None: ...
+    def add_style(self): ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -520,7 +520,7 @@ class AccordionItem(AccordionComponent):
             The accordion item.
         """
         ...
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
 
 class AccordionHeader(AccordionComponent):
     @overload
@@ -669,7 +669,7 @@ class AccordionHeader(AccordionComponent):
             The Accordion header Component.
         """
         ...
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
 
 class AccordionTrigger(AccordionComponent):
     @overload
@@ -818,7 +818,7 @@ class AccordionTrigger(AccordionComponent):
             The Accordion trigger Component.
         """
         ...
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
 
 class AccordionIcon(Icon):
     @overload
@@ -1047,7 +1047,7 @@ class AccordionContent(AccordionComponent):
         """
         ...
     def add_custom_code(self) -> list[str]: ...
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
 
 class Accordion(ComponentNamespace):
     content = staticmethod(AccordionContent.create)

{reflex-0.5.1a3 → reflex-0.5.2}/reflex/components/radix/primitives/form.py

@@ -8,7 +8,6 @@ from reflex.components.component import ComponentNamespace
 from reflex.components.el.elements.forms import Form as HTMLForm
 from reflex.components.radix.themes.components.text_field import TextFieldRoot
 from reflex.constants.event import EventTriggers
-from reflex.style import Style
 from reflex.vars import Var
 
 from .base import RadixPrimitiveComponentWithClassName
@@ -38,13 +37,13 @@ class FormRoot(FormComponent, HTMLForm):
             EventTriggers.ON_CLEAR_SERVER_ERRORS: lambda: [],
         }
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        return Style({"width": "100%"})
+        return {"width": "100%"}
 
 
 class FormField(FormComponent):
@@ -60,13 +59,13 @@ class FormField(FormComponent):
     # Flag to mark the form field as invalid, for server side validation.
     server_invalid: Var[bool]
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        return Style({"display": "grid", "margin_bottom": "10px"})
+        return {"display": "grid", "margin_bottom": "10px"}
 
 
 class FormLabel(FormComponent):
@@ -76,13 +75,13 @@ class FormLabel(FormComponent):
 
     alias = "RadixFormLabel"
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        return Style({"font_size": "15px", "font_weight": "500", "line_height": "35px"})
+        return {"font_size": "15px", "font_weight": "500", "line_height": "35px"}
 
 
 class FormControl(FormComponent):
@@ -149,13 +148,13 @@ class FormMessage(FormComponent):
     # Forces the message to be shown. This is useful when using server-side validation.
     force_match: Var[bool]
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        return Style({"font_size": "13px", "opacity": "0.8", "color": "white"})
+        return {"font_size": "13px", "opacity": "0.8", "color": "white"}
 
 
 class FormValidityState(FormComponent):

{reflex-0.5.1a3 → reflex-0.5.2}/reflex/components/radix/primitives/form.pyi

@@ -12,7 +12,6 @@ from reflex.components.component import ComponentNamespace
 from reflex.components.el.elements.forms import Form as HTMLForm
 from reflex.components.radix.themes.components.text_field import TextFieldRoot
 from reflex.constants.event import EventTriggers
-from reflex.style import Style
 from reflex.vars import Var
 from .base import RadixPrimitiveComponentWithClassName
 
@@ -96,7 +95,7 @@ class FormComponent(RadixPrimitiveComponentWithClassName):
 
 class FormRoot(FormComponent, HTMLForm):
     def get_event_triggers(self) -> Dict[str, Any]: ...
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -275,7 +274,7 @@ class FormRoot(FormComponent, HTMLForm):
         ...
 
 class FormField(FormComponent):
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -358,7 +357,7 @@ class FormField(FormComponent):
         ...
 
 class FormLabel(FormComponent):
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
     @overload
     @classmethod
     def create(  # type: ignore
@@ -532,7 +531,7 @@ LiteralMatcher = Literal[
 ]
 
 class FormMessage(FormComponent):
-    def add_style(self) -> Style | None: ...
+    def add_style(self) -> dict[str, Any] | None: ...
     @overload
     @classmethod
     def create(  # type: ignore

{reflex-0.5.1a3 → reflex-0.5.2}/reflex/components/radix/primitives/progress.py

@@ -2,14 +2,13 @@
 
 from __future__ import annotations
 
-from typing import Optional
+from typing import Any, Optional
 
 from reflex.components.component import Component, ComponentNamespace
 from reflex.components.core.colors import color
 from reflex.components.radix.primitives.accordion import DEFAULT_ANIMATION_DURATION
 from reflex.components.radix.primitives.base import RadixPrimitiveComponentWithClassName
 from reflex.components.radix.themes.base import LiteralAccentColor, LiteralRadius
-from reflex.style import Style
 from reflex.vars import Var
 
 
@@ -28,7 +27,7 @@ class ProgressRoot(ProgressComponent):
     # Override theme radius for progress bar: "none" | "small" | "medium" | "large" | "full"
     radius: Var[LiteralRadius]
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
@@ -37,17 +36,15 @@ class ProgressRoot(ProgressComponent):
         if self.radius is not None:
             self.custom_attrs["data-radius"] = self.radius
 
-        return Style(
-            {
-                "position": "relative",
-                "overflow": "hidden",
-                "background": color("gray", 3, alpha=True),
-                "border_radius": "max(var(--radius-2), var(--radius-full))",
-                "width": "100%",
-                "height": "20px",
-                "boxShadow": f"inset 0 0 0 1px {color('gray', 5, alpha=True)}",
-            }
-        )
+        return {
+            "position": "relative",
+            "overflow": "hidden",
+            "background": color("gray", 3, alpha=True),
+            "border_radius": "max(var(--radius-2), var(--radius-full))",
+            "width": "100%",
+            "height": "20px",
+            "boxShadow": f"inset 0 0 0 1px {color('gray', 5, alpha=True)}",
+        }
 
     def _exclude_props(self) -> list[str]:
         return ["radius"]
@@ -69,7 +66,7 @@ class ProgressIndicator(ProgressComponent):
     # The color scheme of the progress indicator.
     color_scheme: Var[LiteralAccentColor]
 
-    def add_style(self) -> Style | None:
+    def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
@@ -78,19 +75,17 @@ class ProgressIndicator(ProgressComponent):
         if self.color_scheme is not None:
             self.custom_attrs["data-accent-color"] = self.color_scheme
 
-        return Style(
-            {
-                "background_color": color("accent", 9),
-                "width": "100%",
-                "height": "100%",
+        return {
+            "background_color": color("accent", 9),
+            "width": "100%",
+            "height": "100%",
+            "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
+            "&[data_state='loading']": {
                 "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
-                "&[data_state='loading']": {
-                    "transition": f"transform {DEFAULT_ANIMATION_DURATION}ms linear",
-                },
-                "transform": f"translateX(calc(-100% + ({self.value} / {self.max} * 100%)))",  # type: ignore
-                "boxShadow": "inset 0 0 0 1px var(--gray-a5)",
-            }
-        )
+            },
+            "transform": f"translateX(calc(-100% + ({self.value} / {self.max} * 100%)))",  # type: ignore
+            "boxShadow": "inset 0 0 0 1px var(--gray-a5)",
+        }
 
     def _exclude_props(self) -> list[str]:
         return ["color_scheme"]