Merge remote-tracking branch 'origin/main' into masenf/background-never-resets-event-processing

Author: masenf

README.md

@@ -39,25 +39,50 @@ See our [architecture page](https://reflex.dev/blog/2024-03-21-reflex-architectu
 
 ## ⚙️ Installation
 
-Open a terminal and run (Requires Python 3.10+):
-
-```bash
-pip install reflex
-```
+**Important:** We strongly recommend using a virtual environment to ensure the `reflex` command is available in your PATH.
 
 ## 🥳 Create your first app
 
-Installing `reflex` also installs the `reflex` command line tool.
+### 1. Create the project directory
 
-Test that the install was successful by creating a new project. (Replace `my_app_name` with your project name):
+Replace `my_app_name` with your project name:
 
 ```bash
 mkdir my_app_name
 cd my_app_name
+```
+
+### 2. Set up a virtual environment
+
+Create and activate virtual environment
+
+```bash
+# On Windows:
+python -m venv .venv
+.venv\Scripts\activate
+
+# On macOS/Linux:
+python3 -m venv .venv
+source .venv/bin/activate
+```
+
+### 3. Install Reflex
+
+Reflex is available as a pip package (Requires Python 3.10+):
+
+```bash
+pip install reflex
+```
+
+### 4. Initialize the project
+
+This command initializes a template app in your new directory:
+
+```bash
 reflex init
 ```
 
-This command initializes a template app in your new directory.
+### 5. Run the app
 
 You can run this app in development mode:
 
@@ -69,6 +94,10 @@ You should see your app running at http://localhost:3000.
 
 Now you can modify the source code in `my_app_name/my_app_name.py`. Reflex has fast refreshes so you can see your changes instantly when you save your code.
 
+### Troubleshooting
+
+If you installed Reflex without a virtual environment and the `reflex` command is not found, you can run commands using: `python3 -m reflex init` and `python3 -m reflex run`
+
 ## 🫧 Example App
 
 Let's go over an example: creating an image generation UI around [DALL·E](https://platform.openai.com/docs/guides/images/image-generation?context=node). For simplicity, we just call the [OpenAI API](https://platform.openai.com/docs/api-reference/authentication), but you could replace this with an ML model run locally.

pyi_hashes.json

@@ -20,7 +20,7 @@
   "reflex/components/core/html.pyi": "86eb9d4c1bb4807547b2950d9a32e9fd",
   "reflex/components/core/sticky.pyi": "cb763b986a9b0654d1a3f33440dfcf60",
   "reflex/components/core/upload.pyi": "6dc28804a6dddf903e31162e87c1b023",
-  "reflex/components/core/window_events.pyi": "76bf03a273a1fbbb3b333e10d5d08c30",
+  "reflex/components/core/window_events.pyi": "af33ccec866b9540ee7fbec6dbfbd151",
   "reflex/components/datadisplay/__init__.pyi": "52755871369acbfd3a96b46b9a11d32e",
   "reflex/components/datadisplay/code.pyi": "b86769987ef4d1cbdddb461be88539fd",
   "reflex/components/datadisplay/dataeditor.pyi": "35391d4ba147cf20ce4ac7a782066d61",
@@ -39,7 +39,7 @@
   "reflex/components/el/elements/tables.pyi": "686eb70ea7d8c4dafb0cc5c284e76184",
   "reflex/components/el/elements/typography.pyi": "684e83dde887dba12badd0fb75c87c04",
   "reflex/components/gridjs/datatable.pyi": "98a7e1b3f3b60cafcdfcd8879750ee42",
-  "reflex/components/lucide/icon.pyi": "ecaa40d72315ff4b8577f22c1537c0f3",
+  "reflex/components/lucide/icon.pyi": "cc0bbb10e53b339b8c8f10c00996768c",
   "reflex/components/markdown/markdown.pyi": "2f84254a548e908020949564fc289339",
   "reflex/components/moment/moment.pyi": "e1952f1c2c82cef85d91e970d1be64ab",
   "reflex/components/plotly/plotly.pyi": "4311a0aae2abcc9226abb6a273f96372",

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "reflex"
-version = "0.8.16dev1"
+version = "0.8.17dev1"
 description = "Web apps in pure Python."
 license.text = "Apache-2.0"
 authors = [
@@ -31,12 +31,12 @@ dependencies = [
   "python-multipart >=0.0.20,<1.0",
   "python-socketio >=5.12.0,<6.0",
   "redis >=5.2.1,<7.0",
-  "reflex-hosting-cli >=0.1.55",
+  "reflex-hosting-cli >=0.1.57",
   "rich >=13,<15",
   "sqlmodel >=0.0.27,<0.1",
   "starlette >=0.47.0",
   "typing_extensions >=4.13.0",
-  "wrapt >=1.17.0,<2.0",
+  "wrapt >=1.17.0,<3.0",
 ]
 
 classifiers = [
@@ -243,7 +243,7 @@ fail_fast = true
 
 [[tool.pre-commit.repos]]
 repo = "https://github.com/astral-sh/ruff-pre-commit"
-rev = "v0.14.0"
+rev = "v0.14.1"
 hooks = [
   { id = "ruff-format", args = [
     "reflex",

reflex/app.py

@@ -1764,7 +1764,9 @@ async def process(
             constants.RouteVar.CLIENT_IP: client_ip,
         })
         # Get the state for the session exclusively.
-        async with app.state_manager.modify_state(event.substate_token) as state:
+        async with app.state_manager.modify_state(
+            event.substate_token, event=event
+        ) as state:
             # When this is a brand new instance of the state, signal the
             # frontend to reload before processing it.
             if (

reflex/components/core/window_events.py

@@ -1,7 +1,12 @@
 """Window event listener component for Reflex."""
 
+from __future__ import annotations
+
+from typing import Any, cast
+
 import reflex as rx
 from reflex.components.base.fragment import Fragment
+from reflex.components.component import StatefulComponent, field
 from reflex.constants.compiler import Hooks
 from reflex.event import key_event, no_args_event_spec
 from reflex.vars.base import Var, VarData
@@ -61,6 +66,23 @@ class WindowEventListener(Fragment):
     on_popstate: rx.EventHandler[no_args_event_spec]
     on_storage: rx.EventHandler[_on_storage_spec]
 
+    hooks: list[str] = field(default_factory=list, is_javascript_property=False)
+
+    @classmethod
+    def create(cls, **props) -> WindowEventListener:
+        """Create a WindowEventListener component.
+
+        Args:
+            **props: The props to set on the component.
+
+        Returns:
+            The created component.
+        """
+        real_component = cast("WindowEventListener", super().create(**props))
+        hooks = StatefulComponent._fix_event_triggers(real_component)
+        real_component.hooks = hooks
+        return real_component
+
     def _exclude_props(self) -> list[str]:
         """Exclude event handler props from being passed to Fragment.
 
@@ -69,31 +91,30 @@ def _exclude_props(self) -> list[str]:
         """
         return [*super()._exclude_props(), *self.event_triggers.keys()]
 
-    def add_hooks(self) -> list[str | Var[str]]:
+    def add_hooks(self) -> list[str | Var[Any]]:
         """Add hooks to register window event listeners.
 
         Returns:
             The hooks to add to the component.
         """
-        hooks = []
+        hooks: list[str | Var[Any]] = [*self.hooks]
 
         for prop_name, event_trigger in self.event_triggers.items():
             # Get JS event name: remove on_ prefix and underscores
             event_name = prop_name.removeprefix("on_").replace("_", "")
 
             hook_expr = f"""
-                    useEffect(() => {{
-                        if (typeof window === 'undefined') return;
-
-                        window.addEventListener('{event_name}', {event_trigger});
-                        return () => window.removeEventListener('{event_name}', {event_trigger});
-                    }}, []);
+useEffect(() => {{
+    if (typeof window === 'undefined') return;
+    const fn = {Var.create(event_trigger)};
+    window.addEventListener('{event_name}', fn);
+    return () => window.removeEventListener('{event_name}', fn);
+}}, []);
                 """
 
             hooks.append(
                 Var(
                     hook_expr,
-                    _var_type="str",
                     _var_data=VarData(position=Hooks.HookPosition.POST_TRIGGER),
                 )
             )

reflex/components/lucide/icon.py

@@ -6,7 +6,7 @@
 from reflex.vars.base import LiteralVar, Var
 from reflex.vars.sequence import LiteralStringVar, StringVar
 
-LUCIDE_LIBRARY = "lucide-react@0.545.0"
+LUCIDE_LIBRARY = "lucide-react@0.546.0"
 
 
 class LucideIconComponent(Component):
@@ -1115,6 +1115,7 @@ def _get_imports(self):
     "minimize",
     "minus",
     "monitor_check",
+    "monitor_cloud",
     "monitor_cog",
     "monitor_dot",
     "monitor_down",

reflex/components/plotly/plotly.py

@@ -72,7 +72,7 @@ class Plotly(NoSSRComponent):
 
     library = "[email protected]"
 
-    lib_dependencies: list[str] = ["[email protected].1"]
+    lib_dependencies: list[str] = ["[email protected].2"]
 
     tag = "Plot"
 
@@ -303,7 +303,7 @@ class PlotlyBasic(Plotly):
 
     library = "[email protected]"
 
-    lib_dependencies: list[str] = ["[email protected].1"]
+    lib_dependencies: list[str] = ["[email protected].2"]
 
     def add_imports(self) -> ImportDict | list[ImportDict]:
         """Add imports for the plotly basic component.
@@ -329,7 +329,7 @@ class PlotlyCartesian(Plotly):
 
     library = "[email protected]"
 
-    lib_dependencies: list[str] = ["[email protected].1"]
+    lib_dependencies: list[str] = ["[email protected].2"]
 
     def add_imports(self) -> ImportDict | list[ImportDict]:
         """Add imports for the plotly cartesian component.
@@ -355,7 +355,7 @@ class PlotlyGeo(Plotly):
 
     library = "[email protected]"
 
-    lib_dependencies: list[str] = ["[email protected].1"]
+    lib_dependencies: list[str] = ["[email protected].2"]
 
     def add_imports(self) -> ImportDict | list[ImportDict]:
         """Add imports for the plotly geo component.
@@ -381,7 +381,7 @@ class PlotlyGl3d(Plotly):
 
     library = "[email protected]"
 
-    lib_dependencies: list[str] = ["[email protected].1"]
+    lib_dependencies: list[str] = ["[email protected].2"]
 
     def add_imports(self) -> ImportDict | list[ImportDict]:
         """Add imports for the plotly 3d component.
@@ -407,7 +407,7 @@ class PlotlyGl2d(Plotly):
 
     library = "[email protected]"
 
-    lib_dependencies: list[str] = ["[email protected].1"]
+    lib_dependencies: list[str] = ["[email protected].2"]
 
     def add_imports(self) -> ImportDict | list[ImportDict]:
         """Add imports for the plotly 2d component.
@@ -433,7 +433,7 @@ class PlotlyMapbox(Plotly):
 
     library = "[email protected]"
 
-    lib_dependencies: list[str] = ["[email protected].1"]
+    lib_dependencies: list[str] = ["[email protected].2"]
 
     def add_imports(self) -> ImportDict | list[ImportDict]:
         """Add imports for the plotly mapbox component.
@@ -459,7 +459,7 @@ class PlotlyFinance(Plotly):
 
     library = "[email protected]"
 
-    lib_dependencies: list[str] = ["[email protected].1"]
+    lib_dependencies: list[str] = ["[email protected].2"]
 
     def add_imports(self) -> ImportDict | list[ImportDict]:
         """Add imports for the plotly finance component.
@@ -485,7 +485,7 @@ class PlotlyStrict(Plotly):
 
     library = "[email protected]"
 
-    lib_dependencies: list[str] = ["[email protected].1"]
+    lib_dependencies: list[str] = ["[email protected].2"]
 
     def add_imports(self) -> ImportDict | list[ImportDict]:
         """Add imports for the plotly strict component.

reflex/components/radix/primitives/dialog.py

@@ -73,6 +73,8 @@ class DialogTrigger(DialogElement, RadixPrimitiveTriggerComponent):
 
     _memoization_mode = MemoizationMode(recursive=False)
 
+    _valid_parents = ["DialogRoot"]
+
 
 class DialogContent(elements.Div, DialogElement):
     """Content component to display inside a Dialog modal."""

reflex/components/recharts/recharts.py

@@ -8,7 +8,7 @@
 class Recharts(Component):
     """A component that wraps a recharts lib."""
 
-    library = "recharts@3.2.1"
+    library = "recharts@3.3.0"
 
     def _get_style(self) -> dict:
         return {"wrapperStyle": self.style}
@@ -17,7 +17,7 @@ def _get_style(self) -> dict:
 class RechartsCharts(NoSSRComponent, MemoizationLeaf):
     """A component that wraps a recharts lib."""
 
-    library = "recharts@3.2.1"
+    library = "recharts@3.3.0"
 
 
 LiteralAnimationEasing = Literal["ease", "ease-in", "ease-out", "ease-in-out", "linear"]

reflex/constants/installer.py

@@ -143,11 +143,11 @@ def DEPENDENCIES(cls) -> dict[str, str]:
         "postcss-import": "16.1.1",
         "@react-router/dev": _react_router_version,
         "@react-router/fs-routes": _react_router_version,
-        "vite": "npm:[email protected].17",
+        "vite": "npm:[email protected].18",
     }
     OVERRIDES = {
         # This should always match the `react` version in DEPENDENCIES for recharts compatibility.
         "react-is": _react_version,
         "cookie": "1.0.2",
-        "vite": "npm:[email protected].17",
+        "vite": "npm:[email protected].18",
     }