reflex 0.5.4a2__py3-none-any.whl → 0.5.5__py3-none-any.whl

reflex/constants/__init__.py

@@ -10,6 +10,7 @@ from .base import (
     REFLEX_VAR_CLOSING_TAG,
     REFLEX_VAR_OPENING_TAG,
     RELOAD_CONFIG,
+    SESSION_STORAGE,
     SKIP_COMPILE_ENV_VAR,
     ColorMode,
     Dirs,
@@ -62,7 +63,7 @@ from .route import (
     RouteRegex,
     RouteVar,
 )
-from .style import STYLES_DIR, Tailwind
+from .style import Tailwind
 
 __ALL__ = [
     ALEMBIC_CONFIG,
@@ -88,6 +89,7 @@ __ALL__ = [
     Imports,
     IS_WINDOWS,
     LOCAL_STORAGE,
+    SESSION_STORAGE,
     LogLevel,
     MemoizationDisposition,
     MemoizationMode,
@@ -113,7 +115,6 @@ __ALL__ = [
     SETTER_PREFIX,
     SKIP_COMPILE_ENV_VAR,
     SocketEvent,
-    STYLES_DIR,
     Tailwind,
     Templates,
     CompileVars,

reflex/constants/base.py

@@ -25,30 +25,26 @@ class Dirs(SimpleNamespace):
     EXTERNAL_APP_ASSETS = "external"
     # The name of the utils file.
     UTILS = "utils"
-    # The name of the output static directory.
-    STATIC = "_static"
-    # The name of the public html directory served at "/"
-    PUBLIC = "public"
     # The name of the state file.
     STATE_PATH = "/".join([UTILS, "state"])
     # The name of the components file.
     COMPONENTS_PATH = "/".join([UTILS, "components"])
     # The name of the contexts file.
     CONTEXTS_PATH = "/".join([UTILS, "context"])
-    # The directory where the app pages are compiled to.
-    WEB_PAGES = os.path.join(WEB, "pages")
-    # The directory where the static build is located.
-    WEB_STATIC = os.path.join(WEB, STATIC)
-    # The directory where the utils file is located.
-    WEB_UTILS = os.path.join(WEB, UTILS)
-    # The directory where the assets are located.
-    WEB_ASSETS = os.path.join(WEB, PUBLIC)
-    # The env json file.
-    ENV_JSON = os.path.join(WEB, "env.json")
-    # The reflex json file.
-    REFLEX_JSON = os.path.join(WEB, "reflex.json")
-    # The path to postcss.config.js
-    POSTCSS_JS = os.path.join(WEB, "postcss.config.js")
+    # The name of the output static directory.
+    STATIC = "_static"
+    # The name of the public html directory served at "/"
+    PUBLIC = "public"
+    # The directory where styles are located.
+    STYLES = "styles"
+    # The name of the pages directory.
+    PAGES = "pages"
+    # The name of the env json file.
+    ENV_JSON = "env.json"
+    # The name of the reflex json file.
+    REFLEX_JSON = "reflex.json"
+    # The name of the postcss config file.
+    POSTCSS_JS = "postcss.config.js"
 
 
 class Reflex(SimpleNamespace):
@@ -61,7 +57,7 @@ class Reflex(SimpleNamespace):
     VERSION = metadata.version(MODULE_NAME)
 
     # The reflex json file.
-    JSON = os.path.join(Dirs.WEB, "reflex.json")
+    JSON = "reflex.json"
 
     # Files and directories used to init a new project.
     # The directory to store reflex dependencies.
@@ -117,7 +113,7 @@ class Next(SimpleNamespace):
     # The NextJS config file
     CONFIG_FILE = "next.config.js"
     # The sitemap config file.
-    SITEMAP_CONFIG_FILE = os.path.join(Dirs.WEB, "next-sitemap.config.js")
+    SITEMAP_CONFIG_FILE = "next-sitemap.config.js"
     # The node modules directory.
     NODE_MODULES = "node_modules"
     # The package lock file.
@@ -130,9 +126,11 @@ class Next(SimpleNamespace):
 class ColorMode(SimpleNamespace):
     """Constants related to ColorMode."""
 
-    NAME = "colorMode"
+    NAME = "rawColorMode"
+    RESOLVED_NAME = "resolvedColorMode"
     USE = "useColorMode"
     TOGGLE = "toggleColorMode"
+    SET = "setColorMode"
 
 
 # Env modes
@@ -182,6 +180,7 @@ class Ping(SimpleNamespace):
 # Keys in the client_side_storage dict
 COOKIES = "cookies"
 LOCAL_STORAGE = "local_storage"
+SESSION_STORAGE = "session_storage"
 
 # If this env var is set to "yes", App.compile will be a no-op
 SKIP_COMPILE_ENV_VAR = "__REFLEX_SKIP_COMPILE"

reflex/constants/compiler.py

@@ -12,7 +12,7 @@ from reflex.utils.imports import ImportVar
 SETTER_PREFIX = "set_"
 
 # The file used to specify no compilation.
-NOCOMPILE_FILE = ".web/nocompile"
+NOCOMPILE_FILE = "nocompile"
 
 
 class Ext(SimpleNamespace):
@@ -80,6 +80,8 @@ class PageNames(SimpleNamespace):
     DOCUMENT_ROOT = "_document"
     # The name of the theme page.
     THEME = "theme"
+    # The module containing components.
+    COMPONENTS = "components"
     # The module containing shared stateful components
     STATEFUL_COMPONENTS = "stateful_components"
 

reflex/constants/config.py

@@ -1,4 +1,5 @@
 """Config constants."""
+
 import os
 from types import SimpleNamespace
 

reflex/constants/event.py

@@ -1,4 +1,5 @@
 """Event-related constants."""
+
 from enum import Enum
 from types import SimpleNamespace
 

reflex/constants/installer.py

@@ -1,11 +1,12 @@
 """File for constants related to the installation process. (Bun/FNM/Node)."""
+
 from __future__ import annotations
 
 import os
 import platform
 from types import SimpleNamespace
 
-from .base import IS_WINDOWS, Dirs, Reflex
+from .base import IS_WINDOWS, Reflex
 
 
 def get_fnm_name() -> str | None:
@@ -105,7 +106,7 @@ class PackageJson(SimpleNamespace):
         EXPORT_SITEMAP = "next build && next-sitemap"
         PROD = "next start"
 
-    PATH = os.path.join(Dirs.WEB, "package.json")
+    PATH = "package.json"
 
     DEPENDENCIES = {
         "@emotion/react": "11.11.1",

reflex/constants/style.py

@@ -1,13 +1,7 @@
 """Style constants."""
 
-import os
 from types import SimpleNamespace
 
-from reflex.constants.base import Dirs
-
-# The directory where styles are located.
-STYLES_DIR = os.path.join(Dirs.WEB, "styles")
-
 
 class Tailwind(SimpleNamespace):
     """Tailwind constants."""
@@ -15,8 +9,8 @@ class Tailwind(SimpleNamespace):
     # The Tailwindcss version
     VERSION = "tailwindcss@3.3.2"
     # The Tailwind config.
-    CONFIG = os.path.join(Dirs.WEB, "tailwind.config.js")
+    CONFIG = "tailwind.config.js"
     # Default Tailwind content paths
     CONTENT = ["./pages/**/*.{js,ts,jsx,tsx}", "./utils/**/*.{js,ts,jsx,tsx}"]
-    # Relative tailwind style path to root stylesheet in STYLES_DIR.
+    # Relative tailwind style path to root stylesheet in Dirs.STYLES.
     ROOT_STYLE_PATH = "./tailwind.css"

reflex/event.py

@@ -386,12 +386,12 @@ class FileUpload(Base):
         )
 
         upload_id = self.upload_id or DEFAULT_UPLOAD_ID
-
         spec_args = [
             (
                 Var.create_safe("files", _var_is_string=False),
                 Var.create_safe(
-                    f"filesById.{upload_id}", _var_is_string=False
+                    f"filesById[{Var.create_safe(upload_id, _var_is_string=True)._var_name_unwrapped}]",
+                    _var_is_string=False,
                 )._replace(_var_data=upload_files_context_var_data),
             ),
             (
@@ -617,6 +617,34 @@ def remove_local_storage(key: str) -> EventSpec:
     )
 
 
+def clear_session_storage() -> EventSpec:
+    """Set a value in the session storage on the frontend.
+
+    Returns:
+        EventSpec: An event to clear the session storage.
+    """
+    return server_side(
+        "_clear_session_storage",
+        get_fn_signature(clear_session_storage),
+    )
+
+
+def remove_session_storage(key: str) -> EventSpec:
+    """Set a value in the session storage on the frontend.
+
+    Args:
+        key: The key identifying the variable in the session storage to remove.
+
+    Returns:
+        EventSpec: An event to remove an item based on the provided key in session storage.
+    """
+    return server_side(
+        "_remove_session_storage",
+        get_fn_signature(remove_session_storage),
+        key=key,
+    )
+
+
 def set_clipboard(content: str) -> EventSpec:
     """Set the text in content in the clipboard.
 
@@ -738,10 +766,12 @@ def call_script(
     callback_kwargs = {}
     if callback is not None:
         callback_kwargs = {
-            "callback": format.format_queue_events(
-                callback,
-                args_spec=lambda result: [result],
-            )
+            "callback": str(
+                format.format_queue_events(
+                    callback,
+                    args_spec=lambda result: [result],
+                ),
+            ),
         }
     return server_side(
         "_call_script",

reflex/experimental/assets.py

@@ -1,4 +1,5 @@
 """Helper functions for adding assets to the app."""
+
 import inspect
 from pathlib import Path
 from typing import Optional

reflex/experimental/client_state.py

@@ -1,4 +1,5 @@
 """Handle client side state with `useState`."""
+
 from __future__ import annotations
 
 import dataclasses
@@ -8,7 +9,7 @@ from typing import Any, Callable, Optional, Type, Union
 from reflex import constants
 from reflex.event import EventChain, EventHandler, EventSpec, call_script
 from reflex.utils.imports import ImportVar
-from reflex.vars import Var, VarData
+from reflex.vars import Var, VarData, get_unique_variable_name
 
 NoValue = object()
 
@@ -74,7 +75,10 @@ class ClientStateVar(Var):
 
     @classmethod
     def create(
-        cls, var_name: str, default: Any = NoValue, global_ref: bool = True
+        cls,
+        var_name: str | None = None,
+        default: Any = NoValue,
+        global_ref: bool = True,
     ) -> "ClientStateVar":
         """Create a local_state Var that can be accessed and updated on the client.
 
@@ -101,6 +105,8 @@ class ClientStateVar(Var):
         Returns:
             ClientStateVar
         """
+        if var_name is None:
+            var_name = get_unique_variable_name()
         assert isinstance(var_name, str), "var_name must be a string."
         if default is NoValue:
             default_var = Var.create_safe("", _var_is_local=False, _var_is_string=False)
@@ -188,7 +194,7 @@ class ClientStateVar(Var):
             # This is a hack to make it work like an EventSpec taking an arg
             value = Var.create_safe(value, _var_is_string=isinstance(value, str))
             if not value._var_is_string and value._var_full_name.startswith("_"):
-                arg = value._var_name_unwrapped
+                arg = value._var_name_unwrapped.partition(".")[0]
             else:
                 arg = ""
             setter = f"({arg}) => {setter}({value._var_name_unwrapped})"

reflex/experimental/hooks.py

@@ -1,4 +1,5 @@
 """Add standard Hooks wrapper for React."""
+
 from __future__ import annotations
 
 from reflex.utils.imports import ImportVar

reflex/experimental/misc.py

@@ -1,12 +1,21 @@
 """Miscellaneous functions for the experimental package."""
 
 import asyncio
+from typing import Any
 
 
-async def run_in_thread(func):
+async def run_in_thread(func) -> Any:
     """Run a function in a separate thread.
 
+    To not block the UI event queue, run_in_thread must be inside inside a rx.background() decorated method.
+
     Args:
-        func (callable): The function to run.
+        func (callable): The non-async function to run.
+
+    Returns:
+        Any: The return value of the function.
     """
-    await asyncio.get_event_loop().run_in_executor(None, func)
+    assert not asyncio.coroutines.iscoroutinefunction(
+        func
+    ), "func must be a non-async function"
+    return await asyncio.get_event_loop().run_in_executor(None, func)

reflex/middleware/hydrate_middleware.py

@@ -1,4 +1,5 @@
 """Middleware to hydrate the state."""
+
 from __future__ import annotations
 
 from typing import TYPE_CHECKING, Optional

reflex/middleware/middleware.py

@@ -1,4 +1,5 @@
 """Base Reflex middleware."""
+
 from __future__ import annotations
 
 from abc import ABC

reflex/state.py

@@ -1988,6 +1988,7 @@ class StateProxy(wrapt.ObjectProxy):
         self._self_substate_path = state_instance.get_full_name().split(".")
         self._self_actx = None
         self._self_mutable = False
+        self._self_actx_lock = asyncio.Lock()
 
     async def __aenter__(self) -> StateProxy:
         """Enter the async context manager protocol.
@@ -2001,6 +2002,7 @@ class StateProxy(wrapt.ObjectProxy):
         Returns:
             This StateProxy instance in mutable mode.
         """
+        await self._self_actx_lock.acquire()
         self._self_actx = self._self_app.modify_state(
             token=_substate_key(
                 self.__wrapped__.router.session.client_token,
@@ -2025,7 +2027,10 @@ class StateProxy(wrapt.ObjectProxy):
         if self._self_actx is None:
             return
         self._self_mutable = False
-        await self._self_actx.__aexit__(*exc_info)
+        try:
+            await self._self_actx.__aexit__(*exc_info)
+        finally:
+            self._self_actx_lock.release()
         self._self_actx = None
 
     def __enter__(self):
@@ -2835,6 +2840,38 @@ class LocalStorage(ClientStorageBase, str):
         return inst
 
 
+class SessionStorage(ClientStorageBase, str):
+    """Represents a state Var that is stored in sessionStorage in the browser."""
+
+    name: str | None
+
+    def __new__(
+        cls,
+        object: Any = "",
+        encoding: str | None = None,
+        errors: str | None = None,
+        /,
+        name: str | None = None,
+    ) -> "SessionStorage":
+        """Create a client-side sessionStorage (str).
+
+        Args:
+            object: The initial object.
+            encoding: The encoding to use.
+            errors: The error handling scheme to use
+            name: The name of the storage on the client side
+
+        Returns:
+            The client-side sessionStorage object.
+        """
+        if encoding or errors:
+            inst = super().__new__(cls, object, encoding or "utf-8", errors or "strict")
+        else:
+            inst = super().__new__(cls, object)
+        inst.name = name
+        return inst
+
+
 class MutableProxy(wrapt.ObjectProxy):
     """A proxy for a mutable object that tracks changes."""
 

reflex/style.py

@@ -2,41 +2,88 @@
 
 from __future__ import annotations
 
-from typing import Any, Tuple
+from typing import Any, Literal, Tuple, Type
 
 from reflex import constants
 from reflex.event import EventChain
 from reflex.utils import format
 from reflex.utils.imports import ImportVar
-from reflex.vars import BaseVar, Var, VarData
+from reflex.vars import BaseVar, CallableVar, Var, VarData
 
 VarData.update_forward_refs()  # Ensure all type definitions are resolved
 
 SYSTEM_COLOR_MODE: str = "system"
 LIGHT_COLOR_MODE: str = "light"
 DARK_COLOR_MODE: str = "dark"
+LiteralColorMode = Literal["system", "light", "dark"]
 
 # Reference the global ColorModeContext
-color_mode_var_data = VarData(
-    imports={
-        f"/{constants.Dirs.CONTEXTS_PATH}": [ImportVar(tag="ColorModeContext")],
-        "react": [ImportVar(tag="useContext")],
-    },
-    hooks={
-        f"const [ {constants.ColorMode.NAME}, {constants.ColorMode.TOGGLE} ] = useContext(ColorModeContext)": None,
-    },
-)
-# Var resolves to the current color mode for the app ("light" or "dark")
-color_mode = BaseVar(
-    _var_name=constants.ColorMode.NAME,
-    _var_type="str",
-    _var_data=color_mode_var_data,
-)
+color_mode_imports = {
+    f"/{constants.Dirs.CONTEXTS_PATH}": [ImportVar(tag="ColorModeContext")],
+    "react": [ImportVar(tag="useContext")],
+}
+
+
+def _color_mode_var(_var_name: str, _var_type: Type = str) -> BaseVar:
+    """Create a Var that destructs the _var_name from ColorModeContext.
+
+    Args:
+        _var_name: The name of the variable to get from ColorModeContext.
+        _var_type: The type of the Var.
+
+    Returns:
+        The BaseVar for accessing _var_name from ColorModeContext.
+    """
+    return BaseVar(
+        _var_name=_var_name,
+        _var_type=_var_type,
+        _var_is_local=False,
+        _var_is_string=False,
+        _var_data=VarData(
+            imports=color_mode_imports,
+            hooks={f"const {{ {_var_name} }} = useContext(ColorModeContext)": None},
+        ),
+    )
+
+
+@CallableVar
+def set_color_mode(
+    new_color_mode: LiteralColorMode | Var[LiteralColorMode] | None = None,
+) -> BaseVar[EventChain]:
+    """Create an EventChain Var that sets the color mode to a specific value.
+
+    Note: `set_color_mode` is not a real event and cannot be triggered from a
+    backend event handler.
+
+    Args:
+        new_color_mode: The color mode to set.
+
+    Returns:
+        The EventChain Var that can be passed to an event trigger.
+    """
+    base_setter = _color_mode_var(
+        _var_name=constants.ColorMode.SET,
+        _var_type=EventChain,
+    )
+    if new_color_mode is None:
+        return base_setter
+
+    if not isinstance(new_color_mode, Var):
+        new_color_mode = Var.create_safe(new_color_mode, _var_is_string=True)
+    return base_setter._replace(
+        _var_name=f"() => {base_setter._var_name}({new_color_mode._var_name_unwrapped})",
+        merge_var_data=new_color_mode._var_data,
+    )
+
+
+# Var resolves to the current color mode for the app ("light", "dark" or "system")
+color_mode = _color_mode_var(_var_name=constants.ColorMode.NAME)
+# Var resolves to the resolved color mode for the app ("light" or "dark")
+resolved_color_mode = _color_mode_var(_var_name=constants.ColorMode.RESOLVED_NAME)
 # Var resolves to a function invocation that toggles the color mode
-toggle_color_mode = BaseVar(
+toggle_color_mode = _color_mode_var(
     _var_name=constants.ColorMode.TOGGLE,
     _var_type=EventChain,
-    _var_data=color_mode_var_data,
 )
 
 breakpoints = ["0", "30em", "48em", "62em", "80em", "96em"]
@@ -273,7 +320,7 @@ def format_as_emotion(style_dict: dict[str, Any]) -> Style | None:
 
 
 def convert_dict_to_style_and_format_emotion(
-    raw_dict: dict[str, Any]
+    raw_dict: dict[str, Any],
 ) -> dict[str, Any] | None:
     """Convert a dict to a style dict and then format as emotion.
 

reflex/testing.py

@@ -330,7 +330,7 @@ class AppHarness:
         # Start the frontend.
         self.frontend_process = reflex.utils.processes.new_process(
             [reflex.utils.prerequisites.get_package_manager(), "run", "dev"],
-            cwd=self.app_path / reflex.constants.Dirs.WEB,
+            cwd=self.app_path / reflex.utils.prerequisites.get_web_dir(),
             env={"PORT": "0"},
             **FRONTEND_POPEN_ARGS,
         )
@@ -854,7 +854,11 @@ class AppHarnessProd(AppHarness):
     frontend_server: Optional[Subdir404TCPServer] = None
 
     def _run_frontend(self):
-        web_root = self.app_path / reflex.constants.Dirs.WEB_STATIC
+        web_root = (
+            self.app_path
+            / reflex.utils.prerequisites.get_web_dir()
+            / reflex.constants.Dirs.STATIC
+        )
         error_page_map = {
             404: web_root / "404.html",
         }