reflex 0.8.5a1__py3-none-any.whl → 0.8.6a0__py3-none-any.whl

reflex/.templates/{web/vite.config.js → jinja/web/vite.config.js.jinja2}

@@ -25,6 +25,7 @@ function alwaysUseReactDomServerNode() {
 }
 
 export default defineConfig((config) => ({
+  base: "{{base}}",
   plugins: [
     alwaysUseReactDomServerNode(),
     reactRouter(),
@@ -33,6 +34,16 @@ export default defineConfig((config) => ({
   build: {
     rollupOptions: {
       jsx: {},
+      output: {
+        advancedChunks: {
+          groups: [
+            {
+              test: /env.json/,
+              name: "reflex-env",
+            },
+          ],
+        },
+      },
     },
   },
   server: {

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

@@ -530,6 +530,7 @@ export const connect = async (
     transports: transports,
     protocols: [reflexEnvironment.version],
     autoUnref: false,
+    query: { token: getToken() },
   });
   // Ensure undefined fields in events are sent as null instead of removed
   socket.current.io.encoder.replacer = (k, v) => (v === undefined ? null : v);
@@ -601,6 +602,10 @@ export const connect = async (
     event_processing = false;
     queueEvents([...initialEvents(), event], socket, true, navigate, params);
   });
+  socket.current.on("new_token", async (new_token) => {
+    token = new_token;
+    window.sessionStorage.setItem(TOKEN_KEY, new_token);
+  });
 
   document.addEventListener("visibilitychange", checkVisibility);
 };

reflex/__init__.py

@@ -285,6 +285,7 @@ _MAPPING: dict = {
         "data_editor_theme",
     ],
     "components.sonner.toast": ["toast"],
+    "components.props": ["PropsBase"],
     "components.datadisplay.logo": ["logo"],
     "components.gridjs": ["data_table"],
     "components.moment": ["MomentDelta", "moment"],

reflex/__init__.pyi

@@ -62,6 +62,7 @@ from .components.lucide import icon
 from .components.markdown import markdown
 from .components.moment import MomentDelta, moment
 from .components.plotly import plotly
+from .components.props import PropsBase
 from .components.radix.primitives.accordion import accordion
 from .components.radix.primitives.drawer import drawer
 from .components.radix.primitives.form import form
@@ -193,6 +194,7 @@ __all__ = [
     "Model",
     "MomentDelta",
     "NoSSRComponent",
+    "PropsBase",
     "Script",
     "SessionStorage",
     "State",

reflex/app.py

@@ -13,6 +13,7 @@ import io
 import json
 import sys
 import traceback
+import urllib.parse
 from collections.abc import (
     AsyncGenerator,
     AsyncIterator,
@@ -114,6 +115,7 @@ from reflex.utils import (
 )
 from reflex.utils.exec import get_compile_context, is_prod_mode, is_testing_env
 from reflex.utils.imports import ImportVar
+from reflex.utils.token_manager import TokenManager
 from reflex.utils.types import ASGIApp, Message, Receive, Scope, Send
 
 if TYPE_CHECKING:
@@ -1958,12 +1960,6 @@ class EventNamespace(AsyncNamespace):
     # The application object.
     app: App
 
-    # Keep a mapping between socket ID and client token.
-    token_to_sid: dict[str, str]
-
-    # Keep a mapping between client token and socket ID.
-    sid_to_token: dict[str, str]
-
     def __init__(self, namespace: str, app: App):
         """Initialize the event namespace.
 
@@ -1972,17 +1968,45 @@ class EventNamespace(AsyncNamespace):
             app: The application object.
         """
         super().__init__(namespace)
-        self.token_to_sid = {}
-        self.sid_to_token = {}
         self.app = app
 
-    def on_connect(self, sid: str, environ: dict):
+        # Use TokenManager for distributed duplicate tab prevention
+        self._token_manager = TokenManager.create()
+
+    @property
+    def token_to_sid(self) -> dict[str, str]:
+        """Get token to SID mapping for backward compatibility.
+
+        Returns:
+            The token to SID mapping dict.
+        """
+        # For backward compatibility, expose the underlying dict
+        return self._token_manager.token_to_sid
+
+    @property
+    def sid_to_token(self) -> dict[str, str]:
+        """Get SID to token mapping for backward compatibility.
+
+        Returns:
+            The SID to token mapping dict.
+        """
+        # For backward compatibility, expose the underlying dict
+        return self._token_manager.sid_to_token
+
+    async def on_connect(self, sid: str, environ: dict):
         """Event for when the websocket is connected.
 
         Args:
             sid: The Socket.IO session id.
             environ: The request information, including HTTP headers.
         """
+        query_params = urllib.parse.parse_qs(environ.get("QUERY_STRING", ""))
+        token_list = query_params.get("token", [])
+        if token_list:
+            await self.link_token_to_sid(sid, token_list[0])
+        else:
+            console.warn(f"No token provided in connection for session {sid}")
+
         subprotocol = environ.get("HTTP_SEC_WEBSOCKET_PROTOCOL")
         if subprotocol and subprotocol != constants.Reflex.VERSION:
             console.warn(
@@ -1995,9 +2019,18 @@ class EventNamespace(AsyncNamespace):
         Args:
             sid: The Socket.IO session id.
         """
-        disconnect_token = self.sid_to_token.pop(sid, None)
+        # Get token before cleaning up
+        disconnect_token = self.sid_to_token.get(sid)
         if disconnect_token:
-            self.token_to_sid.pop(disconnect_token, None)
+            # Use async cleanup through token manager
+            task = asyncio.create_task(
+                self._token_manager.disconnect_token(disconnect_token, sid)
+            )
+            # Don't await to avoid blocking disconnect, but handle potential errors
+            task.add_done_callback(
+                lambda t: t.exception()
+                and console.error(f"Token cleanup error: {t.exception()}")
+            )
 
     async def emit_update(self, update: StateUpdate, sid: str) -> None:
         """Emit an update to the client.
@@ -2055,8 +2088,13 @@ class EventNamespace(AsyncNamespace):
             msg = f"Failed to deserialize event data: {fields}."
             raise exceptions.EventDeserializationError(msg) from ex
 
-        self.token_to_sid[event.token] = sid
-        self.sid_to_token[sid] = event.token
+        # Correct the token if it doesn't match what we expect for this SID
+        expected_token = self.sid_to_token.get(sid)
+        if expected_token and event.token != expected_token:
+            # Create new event with corrected token since Event is frozen
+            from dataclasses import replace
+
+            event = replace(event, token=expected_token)
 
         # Get the event environment.
         if self.app.sio is None:
@@ -2106,3 +2144,17 @@ class EventNamespace(AsyncNamespace):
         """
         # Emit the test event.
         await self.emit(str(constants.SocketEvent.PING), "pong", to=sid)
+
+    async def link_token_to_sid(self, sid: str, token: str):
+        """Link a token to a session id.
+
+        Args:
+            sid: The Socket.IO session id.
+            token: The client token.
+        """
+        # Use TokenManager for duplicate detection and Redis support
+        new_token = await self._token_manager.link_token_to_sid(token, sid)
+
+        if new_token:
+            # Duplicate detected, emit new token to client
+            await self.emit("new_token", new_token, to=sid)

reflex/compiler/templates.py

@@ -149,6 +149,9 @@ STYLE = get_template("web/styles/styles.css.jinja2")
 # Code that generate the package json file
 PACKAGE_JSON = get_template("web/package.json.jinja2")
 
+# Code that generate the vite.config.js file
+VITE_CONFIG = get_template("web/vite.config.js.jinja2")
+
 # Template containing some macros used in the web pages.
 MACROS = get_template("web/pages/macros.js.jinja2")
 

reflex/compiler/utils.py

@@ -23,8 +23,7 @@ from reflex.constants.state import FIELD_MARKER
 from reflex.istate.storage import Cookie, LocalStorage, SessionStorage
 from reflex.state import BaseState, _resolve_delta
 from reflex.style import Style
-from reflex.utils import console, format, imports, path_ops
-from reflex.utils.exec import is_in_app_harness
+from reflex.utils import format, imports, path_ops
 from reflex.utils.imports import ImportVar, ParsedImportDict
 from reflex.utils.prerequisites import get_web_dir
 from reflex.vars.base import Field, Var
@@ -201,16 +200,11 @@ def compile_state(state: type[BaseState]) -> dict:
     except RuntimeError:
         pass
     else:
-        if is_in_app_harness():
-            # Playwright tests already have an event loop running, so we can't use asyncio.run.
-            with concurrent.futures.ThreadPoolExecutor() as pool:
-                resolved_initial_state = pool.submit(
-                    asyncio.run, _resolve_delta(initial_state)
-                ).result()
-                console.warn(
-                    f"Had to get initial state in a thread 🤮 {resolved_initial_state}",
-                )
-                return _sorted_keys(resolved_initial_state)
+        with concurrent.futures.ThreadPoolExecutor() as pool:
+            resolved_initial_state = pool.submit(
+                asyncio.run, _resolve_delta(initial_state)
+            ).result()
+            return _sorted_keys(resolved_initial_state)
 
     # Normally the compile runs before any event loop starts, we asyncio.run is available for calling.
     return _sorted_keys(asyncio.run(_resolve_delta(initial_state)))

reflex/components/core/auto_scroll.py

@@ -52,11 +52,12 @@ class AutoScroll(Div):
             The hooks required for the component.
         """
         ref_name = self.get_ref()
+        unique_id = ref_name
         return [
-            "const wasNearBottom = useRef(false);",
-            "const hadScrollbar = useRef(false);",
+            f"const wasNearBottom_{unique_id} = useRef(false);",
+            f"const hadScrollbar_{unique_id} = useRef(false);",
             f"""
-const checkIfNearBottom = () => {{
+const checkIfNearBottom_{unique_id} = () => {{
     if (!{ref_name}.current) return;
 
     const container = {ref_name}.current;
@@ -64,14 +65,14 @@ const checkIfNearBottom = () => {{
 
     const distanceFromBottom = container.scrollHeight - container.scrollTop - container.clientHeight;
 
-    wasNearBottom.current = distanceFromBottom <= nearBottomThreshold;
+    wasNearBottom_{unique_id}.current = distanceFromBottom <= nearBottomThreshold;
 
     // Track if container had a scrollbar
-    hadScrollbar.current = container.scrollHeight > container.clientHeight;
+    hadScrollbar_{unique_id}.current = container.scrollHeight > container.clientHeight;
 }};
 """,
             f"""
-const scrollToBottomIfNeeded = () => {{
+const scrollToBottomIfNeeded_{unique_id} = () => {{
     if (!{ref_name}.current) return;
 
     const container = {ref_name}.current;
@@ -80,12 +81,12 @@ const scrollToBottomIfNeeded = () => {{
     // Scroll if:
     // 1. User was near bottom, OR
     // 2. Container didn't have scrollbar before but does now
-    if (wasNearBottom.current || (!hadScrollbar.current && hasScrollbarNow)) {{
+    if (wasNearBottom_{unique_id}.current || (!hadScrollbar_{unique_id}.current && hasScrollbarNow)) {{
       container.scrollTop = container.scrollHeight;
     }}
 
     // Update scrollbar state for next check
-    hadScrollbar.current = hasScrollbarNow;
+    hadScrollbar_{unique_id}.current = hasScrollbarNow;
 }};
 """,
             f"""
@@ -93,24 +94,24 @@ useEffect(() => {{
     const container = {ref_name}.current;
     if (!container) return;
 
-    scrollToBottomIfNeeded();
+    scrollToBottomIfNeeded_{unique_id}();
 
     // Create ResizeObserver to detect height changes
     const resizeObserver = new ResizeObserver(() => {{
-        scrollToBottomIfNeeded();
+        scrollToBottomIfNeeded_{unique_id}();
     }});
 
     // Track scroll position before height changes
-    container.addEventListener('scroll', checkIfNearBottom);
+    container.addEventListener('scroll', checkIfNearBottom_{unique_id});
 
     // Initial check
-    checkIfNearBottom();
+    checkIfNearBottom_{unique_id}();
 
     // Observe container for size changes
     resizeObserver.observe(container);
 
     return () => {{
-        container.removeEventListener('scroll', checkIfNearBottom);
+        container.removeEventListener('scroll', checkIfNearBottom_{unique_id});
         resizeObserver.disconnect();
     }};
 }});

reflex/components/datadisplay/dataeditor.py

@@ -197,6 +197,9 @@ class DataEditor(NoSSRComponent):
     # Enables or disables the overlay shadow when scrolling vertically.
     fixed_shadow_y: Var[bool]
 
+    # Controls the presence of the fill indicator
+    fill_handle: Var[bool]
+
     # The number of columns which should remain in place when scrolling horizontally. Doesn't include rowMarkers.
     freeze_columns: Var[int]
 

reflex/components/datadisplay/dataeditor.pyi

@@ -141,6 +141,7 @@ class DataEditor(NoSSRComponent):
         draw_focus_ring: Var[bool] | bool | None = None,
         fixed_shadow_x: Var[bool] | bool | None = None,
         fixed_shadow_y: Var[bool] | bool | None = None,
+        fill_handle: Var[bool] | bool | None = None,
         freeze_columns: Var[int] | int | None = None,
         group_header_height: Var[int] | int | None = None,
         header_height: Var[int] | int | None = None,
@@ -245,6 +246,7 @@ class DataEditor(NoSSRComponent):
             draw_focus_ring: Controls the drawing of the focus ring.
             fixed_shadow_x: Enables or disables the overlay shadow when scrolling horizontally.
             fixed_shadow_y: Enables or disables the overlay shadow when scrolling vertically.
+            fill_handle: Controls the presence of the fill indicator
             freeze_columns: The number of columns which should remain in place when scrolling horizontally. Doesn't include rowMarkers.
             group_header_height: Controls the header of the group header row.
             header_height: Controls the height of the header row.

reflex/components/el/__init__.pyi

@@ -106,6 +106,7 @@ from .elements.media import (
     Line,
     LinearGradient,
     Map,
+    Marker,
     Object,
     Path,
     Picture,
@@ -132,6 +133,7 @@ from .elements.media import (
     line,
     linear_gradient,
     map,
+    marker,
     object,
     path,
     picture,
@@ -332,6 +334,7 @@ __all__ = [
     "Main",
     "Map",
     "Mark",
+    "Marker",
     "Math",
     "Meta",
     "Meter",
@@ -457,6 +460,7 @@ __all__ = [
     "main",
     "map",
     "mark",
+    "marker",
     "math",
     "meta",
     "meter",

reflex/components/el/elements/__init__.py

@@ -78,6 +78,7 @@ _MAPPING = {
         "linear_gradient",
         "radial_gradient",
         "defs",
+        "marker",
     ],
     "metadata": [
         "base",

reflex/components/el/elements/__init__.pyi

@@ -104,6 +104,7 @@ from .media import (
     Line,
     LinearGradient,
     Map,
+    Marker,
     Object,
     Path,
     Picture,
@@ -130,6 +131,7 @@ from .media import (
     line,
     linear_gradient,
     map,
+    marker,
     object,
     path,
     picture,
@@ -336,6 +338,7 @@ _MAPPING = {
         "linear_gradient",
         "radial_gradient",
         "defs",
+        "marker",
     ],
     "metadata": ["base", "head", "link", "meta", "title", "style"],
     "other": ["details", "dialog", "summary", "slot", "template", "math", "html"],
@@ -469,6 +472,7 @@ __all__ = [
     "Main",
     "Map",
     "Mark",
+    "Marker",
     "Math",
     "Meta",
     "Meter",
@@ -593,6 +597,7 @@ __all__ = [
     "main",
     "map",
     "mark",
+    "marker",
     "math",
     "meta",
     "meter",

reflex/components/el/elements/media.py

@@ -484,6 +484,36 @@ class Path(BaseHTML):
     d: Var[str | int | float]
 
 
+class Marker(BaseHTML):
+    """Display the marker element."""
+
+    tag = "marker"
+
+    # The height of the marker viewport.
+    marker_height: Var[str | int | float]
+
+    # The width of the marker viewport.
+    marker_width: Var[str | int | float]
+
+    # The coordinate system for the marker attributes.
+    marker_units: Var[str]
+
+    # The orientation of the marker relative to the shape it is attached to.
+    orient: Var[str | int | float]
+
+    # How the svg fragment must be deformed if it is embedded in a container with a different aspect ratio.
+    preserve_aspect_ratio: Var[str]
+
+    # The x coordinate for the reference point of the marker.
+    ref_x: Var[str | int | float]
+
+    # The y coordinate for the reference point of the marker.
+    ref_y: Var[str | int | float]
+
+    # The bound of the SVG viewport for the current SVG fragment.
+    view_box: Var[str]
+
+
 class G(BaseHTML):
     """The SVG g component, used to group other SVG elements."""
 
@@ -522,6 +552,7 @@ class SVG(ComponentNamespace):
     linear_gradient = staticmethod(LinearGradient.create)
     radial_gradient = staticmethod(RadialGradient.create)
     defs = staticmethod(Defs.create)
+    marker = staticmethod(Marker.create)
     g = staticmethod(G.create)
     __call__ = staticmethod(Svg.create)
 
@@ -537,6 +568,7 @@ stop = Stop.create
 linear_gradient = LinearGradient.create
 radial_gradient = RadialGradient.create
 defs = Defs.create
+marker = Marker.create
 g = G.create
 area = Area.create
 audio = Audio.create