reflex 0.5.3a2__tar.gz → 0.5.4a1__tar.gz

{reflex-0.5.3a2 → reflex-0.5.4a1}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: reflex
-Version: 0.5.3a2
+Version: 0.5.4a1
 Summary: Web apps in pure Python.
 Home-page: https://reflex.dev
 License: Apache-2.0

{reflex-0.5.3a2 → reflex-0.5.4a1}/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "reflex"
-version = "0.5.3a2"
+version = "0.5.4a1"
 description = "Web apps in pure Python."
 license = "Apache-2.0"
 authors = [

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/.templates/apps/demo/code/webui/state.py

@@ -66,7 +66,8 @@ class State(State):
         del self.chats[self.current_chat]
         if len(self.chats) == 0:
             self.chats = DEFAULT_CHATS
-        self.current_chat = list(self.chats.keys())[0]
+        # set self.current_chat to the first chat.
+        self.current_chat = next(iter(self.chats))
         self.toggle_drawer()
 
     def set_chat(self, chat_name: str):
@@ -85,7 +86,7 @@ class State(State):
         Returns:
             The list of chat names.
         """
-        return list(self.chats.keys())
+        return [*self.chats]
 
     async def process_question(self, form_data: dict[str, str]):
         """Get the response from the API.

reflex-0.5.4a1/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js

@@ -0,0 +1,21 @@
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { ColorModeContext, defaultColorMode } from "/utils/context.js";
+
+export default function RadixThemesColorModeProvider({ children }) {
+  const { resolvedTheme, setTheme } = useTheme();
+  const [colorMode, setColorMode] = useState(defaultColorMode);
+
+  useEffect(() => {
+    setColorMode(resolvedTheme);
+  }, [resolvedTheme]);
+
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === "light" ? "dark" : "light");
+  };
+  return (
+    <ColorModeContext.Provider value={[colorMode, toggleColorMode]}>
+      {children}
+    </ColorModeContext.Provider>
+  );
+}

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/.templates/web/utils/state.js

@@ -358,6 +358,12 @@ export const connect = async (
   socket.current.on("connect_error", (error) => {
     setConnectErrors((connectErrors) => [connectErrors.slice(-9), error]);
   });
+
+  // When the socket disconnects reset the event_processing flag
+  socket.current.on("disconnect", () => {
+    event_processing = false;
+  });
+
   // On each received message, queue the updates and events.
   socket.current.on("event", (message) => {
     const update = JSON5.parse(message);

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/__init__.py

@@ -248,7 +248,12 @@ _MAPPING: dict = {
     "admin": ["AdminDash"],
     "app": ["App", "UploadFile"],
     "base": ["Base"],
-    "components.component": ["Component", "NoSSRComponent", "memo"],
+    "components.component": [
+        "Component",
+        "NoSSRComponent",
+        "memo",
+        "ComponentNamespace",
+    ],
     "components.el.elements.media": ["image"],
     "components.lucide": ["icon"],
     **COMPONENTS_BASE_MAPPING,
@@ -270,6 +275,7 @@ _MAPPING: dict = {
         "data_editor",
         "data_editor_theme",
     ],
+    "components.sonner.toast": ["toast"],
     "components.datadisplay.logo": ["logo"],
     "components.gridjs": ["data_table"],
     "components.moment": ["MomentDelta", "moment"],

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/__init__.pyi

@@ -24,6 +24,7 @@ from .base import Base as Base
 from .components.component import Component as Component
 from .components.component import NoSSRComponent as NoSSRComponent
 from .components.component import memo as memo
+from .components.component import ComponentNamespace as ComponentNamespace
 from .components.el.elements.media import image as image
 from .components.lucide import icon as icon
 from .components.base.fragment import fragment as fragment
@@ -143,6 +144,7 @@ from .components.core.upload import upload as upload
 from .components.datadisplay.code import code_block as code_block
 from .components.datadisplay.dataeditor import data_editor as data_editor
 from .components.datadisplay.dataeditor import data_editor_theme as data_editor_theme
+from .components.sonner.toast import toast as toast
 from .components.datadisplay.logo import logo as logo
 from .components.gridjs import data_table as data_table
 from .components.moment import MomentDelta as MomentDelta

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/app.py

@@ -707,11 +707,8 @@ class App(LifespanMixin, Base):
         page_imports = {
             i
             for i, tags in imports.items()
-            if i
-            not in [
-                *constants.PackageJson.DEPENDENCIES.keys(),
-                *constants.PackageJson.DEV_DEPENDENCIES.keys(),
-            ]
+            if i not in constants.PackageJson.DEPENDENCIES
+            and i not in constants.PackageJson.DEV_DEPENDENCIES
             and not any(i.startswith(prefix) for prefix in ["/", ".", "next/"])
             and i != ""
             and any(tag.install for tag in tags)

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/compiler/compiler.py

@@ -17,7 +17,7 @@ from reflex.components.component import (
 )
 from reflex.config import get_config
 from reflex.state import BaseState
-from reflex.style import LIGHT_COLOR_MODE
+from reflex.style import SYSTEM_COLOR_MODE
 from reflex.utils.exec import is_prod_mode
 from reflex.utils.imports import ImportVar
 from reflex.vars import Var
@@ -79,7 +79,7 @@ def _compile_contexts(state: Optional[Type[BaseState]], theme: Component | None)
     """
     appearance = getattr(theme, "appearance", None)
     if appearance is None:
-        appearance = LIGHT_COLOR_MODE
+        appearance = SYSTEM_COLOR_MODE
     return (
         templates.CONTEXT.render(
             initial_state=utils.compile_state(state),

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/components/component.py

@@ -360,7 +360,6 @@ class Component(BaseComponent, ABC):
         # Get the component fields, triggers, and props.
         fields = self.get_fields()
         component_specific_triggers = self.get_event_triggers()
-        triggers = component_specific_triggers.keys()
         props = self.get_props()
 
         # Add any events triggers.
@@ -370,13 +369,17 @@ class Component(BaseComponent, ABC):
 
         # Iterate through the kwargs and set the props.
         for key, value in kwargs.items():
-            if key.startswith("on_") and key not in triggers and key not in props:
+            if (
+                key.startswith("on_")
+                and key not in component_specific_triggers
+                and key not in props
+            ):
                 raise ValueError(
                     f"The {(comp_name := type(self).__name__)} does not take in an `{key}` event trigger. If {comp_name}"
                     f" is a third party component make sure to add `{key}` to the component's event triggers. "
                     f"visit https://reflex.dev/docs/wrapping-react/guide/#event-triggers for more info."
                 )
-            if key in triggers:
+            if key in component_specific_triggers:
                 # Event triggers are bound to event chains.
                 field_type = EventChain
             elif key in props:
@@ -436,7 +439,7 @@ class Component(BaseComponent, ABC):
                     )
 
             # Check if the key is an event trigger.
-            if key in triggers:
+            if key in component_specific_triggers:
                 # Temporarily disable full control for event triggers.
                 kwargs["event_triggers"][key] = self._create_event_chain(
                     value=value, args_spec=component_specific_triggers[key]
@@ -519,13 +522,23 @@ class Component(BaseComponent, ABC):
                     events.append(event)
                 elif isinstance(v, Callable):
                     # Call the lambda to get the event chain.
-                    events.extend(call_event_fn(v, args_spec))
+                    result = call_event_fn(v, args_spec)
+                    if isinstance(result, Var):
+                        raise ValueError(
+                            f"Invalid event chain: {v}. Cannot use a Var-returning "
+                            "lambda inside an EventChain list."
+                        )
+                    events.extend(result)
                 else:
                     raise ValueError(f"Invalid event: {v}")
 
         # If the input is a callable, create an event chain.
         elif isinstance(value, Callable):
-            events = call_event_fn(value, args_spec)
+            result = call_event_fn(value, args_spec)
+            if isinstance(result, Var):
+                # Recursively call this function if the lambda returned an EventChain Var.
+                return self._create_event_chain(args_spec, result)
+            events = result
 
         # Otherwise, raise an error.
         else:

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/components/core/client_side_routing.py

@@ -23,13 +23,13 @@ class ClientSideRouting(Component):
     library = "/utils/client_side_routing"
     tag = "useClientSideRouting"
 
-    def _get_hooks(self) -> str:
+    def add_hooks(self) -> list[str]:
         """Get the hooks to render.
 
         Returns:
             The useClientSideRouting hook.
         """
-        return f"const {constants.ROUTE_NOT_FOUND} = {self.tag}()"
+        return [f"const {constants.ROUTE_NOT_FOUND} = {self.tag}()"]
 
     def render(self) -> str:
         """Render the component.

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/components/core/client_side_routing.pyi

@@ -15,6 +15,7 @@ from reflex.vars import Var
 route_not_found: Var
 
 class ClientSideRouting(Component):
+    def add_hooks(self) -> list[str]: ...
     def render(self) -> str: ...
     @overload
     @classmethod

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/components/core/upload.py

@@ -230,7 +230,7 @@ class Upload(MemoizationLeaf):
             key: value for key, value in props.items() if key in supported_props
         }
         # The file input to use.
-        upload = Input.create(type_="file")
+        upload = Input.create(type="file")
         upload.special_props = {
             BaseVar(_var_name="{...getInputProps()}", _var_type=None)
         }

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/components/datadisplay/dataeditor.py

@@ -252,7 +252,12 @@ class DataEditor(NoSSRComponent):
             "on_column_resize": lambda col, width: [col, width],
         }
 
-    def _get_hooks(self) -> str | None:
+    def add_hooks(self) -> list[str]:
+        """Get the hooks to render.
+
+        Returns:
+            The hooks to render.
+        """
         # Define the id of the component in case multiple are used in the same page.
         editor_id = get_unique_variable_name()
 
@@ -272,7 +277,7 @@ class DataEditor(NoSSRComponent):
             ]
         )
 
-        return "\n".join(code)
+        return ["\n".join(code)]
 
     @classmethod
     def create(cls, *children, **props) -> Component:

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/components/datadisplay/dataeditor.pyi

@@ -81,6 +81,7 @@ class DataEditorTheme(Base):
 
 class DataEditor(NoSSRComponent):
     def get_event_triggers(self) -> Dict[str, Callable]: ...
+    def add_hooks(self) -> list[str]: ...
     @overload
     @classmethod
     def create(  # type: ignore

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/components/el/elements/forms.py

@@ -181,18 +181,25 @@ class Form(BaseHTML):
             },
         )
 
-    def _get_hooks(self) -> str | None:
+    def add_hooks(self) -> list[str]:
+        """Add hooks for the form.
+
+        Returns:
+            The hooks for the form.
+        """
         if EventTriggers.ON_SUBMIT not in self.event_triggers:
-            return
-        return HANDLE_SUBMIT_JS_JINJA2.render(
-            handle_submit_unique_name=self.handle_submit_unique_name,
-            form_data=FORM_DATA,
-            field_ref_mapping=str(Var.create_safe(self._get_form_refs())),
-            on_submit_event_chain=format_event_chain(
-                self.event_triggers[EventTriggers.ON_SUBMIT]
-            ),
-            reset_on_submit=self.reset_on_submit,
-        )
+            return []
+        return [
+            HANDLE_SUBMIT_JS_JINJA2.render(
+                handle_submit_unique_name=self.handle_submit_unique_name,
+                form_data=FORM_DATA,
+                field_ref_mapping=str(Var.create_safe(self._get_form_refs())),
+                on_submit_event_chain=format_event_chain(
+                    self.event_triggers[EventTriggers.ON_SUBMIT]
+                ),
+                reset_on_submit=self.reset_on_submit,
+            )
+        ]
 
     def _render(self) -> Tag:
         render_tag = super()._render()

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/components/el/elements/forms.pyi

@@ -581,6 +581,7 @@ class Form(BaseHTML):
             The form component.
         """
         ...
+    def add_hooks(self) -> list[str]: ...
 
 class Input(BaseHTML):
     def get_event_triggers(self) -> Dict[str, Any]: ...

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/components/markdown/markdown.py

@@ -229,7 +229,7 @@ class Markdown(Component):
         Returns:
             The formatted component.
         """
-        return str(self.get_component(tag, **props)).replace("\n", " ")
+        return str(self.get_component(tag, **props)).replace("\n", "")
 
     def format_component_map(self) -> dict[str, str]:
         """Format the component map for rendering.

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/components/plotly/plotly.py

@@ -4,14 +4,20 @@ from __future__ import annotations
 from typing import Any, Dict, List
 
 from reflex.base import Base
-from reflex.components.component import NoSSRComponent
+from reflex.components.component import Component, NoSSRComponent
+from reflex.components.core.cond import color_mode_cond
 from reflex.event import EventHandler
+from reflex.utils import console
 from reflex.vars import Var
 
 try:
-    from plotly.graph_objects import Figure
+    from plotly.graph_objects import Figure, layout
+
+    Template = layout.Template
 except ImportError:
+    console.warn("Plotly is not installed. Please run `pip install plotly`.")
     Figure = Any  # type: ignore
+    Template = Any  # type: ignore
 
 
 def _event_data_signature(e0: Var) -> List[Any]:
@@ -84,17 +90,13 @@ def _null_signature() -> List[Any]:
     return []
 
 
-class PlotlyLib(NoSSRComponent):
-    """A component that wraps a plotly lib."""
+class Plotly(NoSSRComponent):
+    """Display a plotly graph."""
 
     library = "react-plotly.js@2.6.0"
 
     lib_dependencies: List[str] = ["plotly.js@2.22.0"]
 
-
-class Plotly(PlotlyLib):
-    """Display a plotly graph."""
-
     tag = "Plot"
 
     is_default = True
@@ -105,6 +107,9 @@ class Plotly(PlotlyLib):
     # The layout of the graph.
     layout: Var[Dict]
 
+    # The template for visual appearance of the graph.
+    template: Var[Template]
+
     # The config of the graph.
     config: Var[Dict]
 
@@ -171,6 +176,17 @@ class Plotly(PlotlyLib):
     # Fired when a hovered element is no longer hovered.
     on_unhover: EventHandler[_event_points_data_signature]
 
+    def add_imports(self) -> dict[str, str]:
+        """Add imports for the plotly component.
+
+        Returns:
+            The imports for the plotly component.
+        """
+        return {
+            # For merging plotly data/layout/templates.
+            "mergician@v2.0.2": "mergician"
+        }
+
     def add_custom_code(self) -> list[str]:
         """Add custom codes for processing the plotly points data.
 
@@ -210,14 +226,62 @@ const extractPoints = (points) => {
 """,
         ]
 
+    @classmethod
+    def create(cls, *children, **props) -> Component:
+        """Create the Plotly component.
+
+        Args:
+            *children: The children of the component.
+            **props: The properties of the component.
+
+        Returns:
+            The Plotly component.
+        """
+        from plotly.io import templates
+
+        responsive_template = color_mode_cond(
+            light=Var.create_safe(templates["plotly"]).to(dict),
+            dark=Var.create_safe(templates["plotly_dark"]).to(dict),
+        )
+        if isinstance(responsive_template, Var):
+            # Mark the conditional Var as a Template to avoid type mismatch
+            responsive_template = responsive_template.to(Template)
+        props.setdefault("template", responsive_template)
+        return super().create(*children, **props)
+
+    def _exclude_props(self) -> set[str]:
+        # These props are handled specially in the _render function
+        return {"data", "layout", "template"}
+
     def _render(self):
         tag = super()._render()
         figure = self.data.to(dict)
-        if self.layout is None:
-            tag.remove_props("data", "layout")
+        merge_dicts = []  # Data will be merged and spread from these dict Vars
+        if self.layout is not None:
+            # Why is this not a literal dict? Great question... it didn't work
+            # reliably because of how _var_name_unwrapped strips the outer curly
+            # brackets if any of the contained Vars depend on state.
+            layout_dict = Var.create_safe(
+                f"{{'layout': {self.layout.to(dict)._var_name_unwrapped}}}"
+            ).to(dict)
+            merge_dicts.append(layout_dict)
+        if self.template is not None:
+            template_dict = Var.create_safe(
+                {"layout": {"template": self.template.to(dict)}}
+            )
+            template_dict._var_data = None  # To avoid stripping outer curly brackets
+            merge_dicts.append(template_dict)
+        if merge_dicts:
             tag.special_props.add(
-                Var.create_safe(f"{{...{figure._var_name_unwrapped}}}")
+                # Merge all dictionaries and spread the result over props.
+                Var.create_safe(
+                    f"{{...mergician({figure._var_name_unwrapped},"
+                    f"{','.join(md._var_name_unwrapped for md in merge_dicts)})}}",
+                ),
             )
         else:
-            tag.add_props(data=figure["data"])
+            # Spread the figure dict over props, nothing to merge.
+            tag.special_props.add(
+                Var.create_safe(f"{{...{figure._var_name_unwrapped}}}")
+            )
         return tag

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/components/plotly/plotly.pyi

@@ -9,97 +9,28 @@ from reflex.event import EventChain, EventHandler, EventSpec
 from reflex.style import Style
 from typing import Any, Dict, List
 from reflex.base import Base
-from reflex.components.component import NoSSRComponent
+from reflex.components.component import Component, NoSSRComponent
+from reflex.components.core.cond import color_mode_cond
 from reflex.event import EventHandler
+from reflex.utils import console
 from reflex.vars import Var
 
 try:
-    from plotly.graph_objects import Figure  # type: ignore
+    from plotly.graph_objects import Figure, layout  # type: ignore
+
+    Template = layout.Template
 except ImportError:
+    console.warn("Plotly is not installed. Please run `pip install plotly`.")
     Figure = Any  # type: ignore
+    Template = Any
 
 class _ButtonClickData(Base):
     menu: Any
     button: Any
     active: Any
 
-class PlotlyLib(NoSSRComponent):
-    @overload
-    @classmethod
-    def create(  # type: ignore
-        cls,
-        *children,
-        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
-    ) -> "PlotlyLib":
-        """Create the component.
-
-        Args:
-            *children: The children of the component.
-            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 component.
-
-        Returns:
-            The component.
-        """
-        ...
-
-class Plotly(PlotlyLib):
+class Plotly(NoSSRComponent):
+    def add_imports(self) -> dict[str, str]: ...
     def add_custom_code(self) -> list[str]: ...
     @overload
     @classmethod
@@ -108,6 +39,7 @@ class Plotly(PlotlyLib):
         *children,
         data: Optional[Union[Var[Figure], Figure]] = None,  # type: ignore
         layout: Optional[Union[Var[Dict], Dict]] = None,
+        template: Optional[Union[Var[Template], Template]] = None,  # type: ignore
         config: Optional[Union[Var[Dict], Dict]] = None,
         use_resize_handler: Optional[Union[Var[bool], bool]] = None,
         style: Optional[Style] = None,
@@ -217,12 +149,13 @@ class Plotly(PlotlyLib):
         ] = None,
         **props
     ) -> "Plotly":
-        """Create the component.
+        """Create the Plotly component.
 
         Args:
             *children: The children of the component.
             data: The figure to display. This can be a plotly figure or a plotly data json.
             layout: The layout of the graph.
+            template: The template for visual appearance of the graph.
             config: The config of the graph.
             use_resize_handler: If true, the graph will resize when the window is resized.
             style: The style of the component.
@@ -231,9 +164,9 @@ class Plotly(PlotlyLib):
             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 Plotly component.
         """
         ...

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/components/radix/themes/base.py

@@ -257,10 +257,16 @@ class ThemePanel(RadixThemesComponent):
         """
         return {"react": "useEffect"}
 
-    def _get_hooks(self) -> str | None:
+    def add_hooks(self) -> list[str]:
+        """Add a hook on the ThemePanel to clear chakra-ui-color-mode.
+
+        Returns:
+            The hooks to render.
+        """
         # The panel freezes the tab if the user color preference differs from the
         # theme "appearance", so clear it out when theme panel is used.
-        return """
+        return [
+            """
             useEffect(() => {
                 if (typeof window !== 'undefined') {
                     window.onbeforeunload = () => {
@@ -269,6 +275,7 @@ class ThemePanel(RadixThemesComponent):
                     window.onbeforeunload();
                 }
             }, [])"""
+        ]
 
 
 class RadixThemesColorModeProvider(Component):

{reflex-0.5.3a2 → reflex-0.5.4a1}/reflex/components/radix/themes/base.pyi

@@ -584,6 +584,7 @@ class Theme(RadixThemesComponent):
 
 class ThemePanel(RadixThemesComponent):
     def add_imports(self) -> dict[str, str]: ...
+    def add_hooks(self) -> list[str]: ...
     @overload
     @classmethod
     def create(  # type: ignore