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

reflex/.templates/apps/demo/code/demo.py

@@ -1,4 +1,5 @@
 """Welcome to Reflex! This file outlines the steps to create a basic app."""
+
 from typing import Callable
 
 import reflex as rx

reflex/.templates/apps/demo/code/pages/__init__.py

@@ -1,4 +1,5 @@
 """The pages of the app."""
+
 from .chatapp import chatapp_page
 from .datatable import datatable_page
 from .forms import forms_page

reflex/.templates/apps/demo/code/pages/datatable.py

@@ -1,4 +1,5 @@
 """The settings page for the template."""
+
 from typing import Any
 
 import reflex as rx

reflex/.templates/apps/demo/code/pages/forms.py

@@ -1,4 +1,5 @@
 """The settings page for the template."""
+
 import reflex as rx
 
 from ..states.form_state import FormState, UploadState

reflex/.templates/apps/demo/code/pages/graphing.py

@@ -1,4 +1,5 @@
 """The dashboard page for the template."""
+
 import reflex as rx
 
 from ..states.pie_state import PieChartState

reflex/.templates/apps/demo/code/pages/home.py

@@ -1,4 +1,5 @@
 """The home page of the app."""
+
 import reflex as rx
 
 from ..styles import *

reflex/.templates/apps/demo/code/styles.py

@@ -1,4 +1,5 @@
 """Styles for the app."""
+
 import reflex as rx
 
 from .state import State

reflex/.templates/apps/demo/code/webui/components/loading_icon.py

@@ -13,14 +13,7 @@ class LoadingIcon(rx.Component):
     stroke_width: rx.Var[str]
     speed: rx.Var[str]
     height: rx.Var[str]
-
-    def get_event_triggers(self) -> dict:
-        """Get the event triggers that pass the component's value to the handler.
-
-        Returns:
-            A dict mapping the event trigger to the var that is passed to the handler.
-        """
-        return {"on_change": lambda status: [status]}
+    on_change: rx.EventHandler[lambda status: [status]]
 
 
 loading_icon = LoadingIcon.create

reflex/.templates/web/components/reflex/chakra_color_mode_provider.js

@@ -1,21 +1,36 @@
-import { useColorMode as chakraUseColorMode } from "@chakra-ui/react"
-import { useTheme } from "next-themes"
-import { useEffect } from "react"
-import { ColorModeContext } from "/utils/context.js"
+import { useColorMode as chakraUseColorMode } from "@chakra-ui/react";
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { ColorModeContext, defaultColorMode } from "/utils/context.js";
 
 export default function ChakraColorModeProvider({ children }) {
-  const {colorMode, toggleColorMode} = chakraUseColorMode()
-  const {theme, setTheme} = useTheme()
+  const { theme, resolvedTheme, setTheme } = useTheme();
+  const { colorMode, toggleColorMode } = chakraUseColorMode();
+  const [resolvedColorMode, setResolvedColorMode] = useState(colorMode);
 
   useEffect(() => {
-    if (colorMode != theme) {
-        toggleColorMode()
+    if (colorMode != resolvedTheme) {
+      toggleColorMode();
     }
-  }, [theme])
+    setResolvedColorMode(resolvedTheme);
+  }, [theme, resolvedTheme]);
 
+  const rawColorMode = colorMode;
+  const setColorMode = (mode) => {
+    const allowedModes = ["light", "dark", "system"];
+    if (!allowedModes.includes(mode)) {
+      console.error(
+        `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".`
+      );
+      mode = defaultColorMode;
+    }
+    setTheme(mode);
+  };
   return (
-    <ColorModeContext.Provider value={[ colorMode, toggleColorMode ]}>
+    <ColorModeContext.Provider
+      value={{ rawColorMode, resolvedColorMode, toggleColorMode, setColorMode }}
+    >
       {children}
     </ColorModeContext.Provider>
-  )
-}
+  );
+}

reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js

@@ -3,18 +3,32 @@ 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);
+  const { theme, resolvedTheme, setTheme } = useTheme();
+  const [rawColorMode, setRawColorMode] = useState(defaultColorMode);
+  const [resolvedColorMode, setResolvedColorMode] = useState("dark");
 
   useEffect(() => {
-    setColorMode(resolvedTheme);
-  }, [resolvedTheme]);
+    setRawColorMode(theme);
+    setResolvedColorMode(resolvedTheme);
+  }, [theme, resolvedTheme]);
 
   const toggleColorMode = () => {
     setTheme(resolvedTheme === "light" ? "dark" : "light");
   };
+  const setColorMode = (mode) => {
+    const allowedModes = ["light", "dark", "system"];
+    if (!allowedModes.includes(mode)) {
+      console.error(
+        `Invalid color mode "${mode}". Defaulting to "${defaultColorMode}".`
+      );
+      mode = defaultColorMode;
+    }
+    setTheme(mode);
+  };
   return (
-    <ColorModeContext.Provider value={[colorMode, toggleColorMode]}>
+    <ColorModeContext.Provider
+      value={{ rawColorMode, resolvedColorMode, toggleColorMode, setColorMode }}
+    >
       {children}
     </ColorModeContext.Provider>
   );

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

@@ -107,6 +107,18 @@ export const getBackendURL = (url_str) => {
   return endpoint;
 };
 
+/**
+ * Determine if any event in the event queue is stateful.
+ *
+ * @returns True if there's any event that requires state and False if none of them do.
+ */
+export const isStateful = () => {
+  if (event_queue.length === 0) {
+    return false;
+  }
+  return event_queue.some(event => event.name.startsWith("state"));
+}
+
 /**
  * Apply a delta to the state.
  * @param state The state to apply the delta to.
@@ -116,6 +128,20 @@ export const applyDelta = (state, delta) => {
   return { ...state, ...delta };
 };
 
+/**
+ * Only Queue and process events when websocket connection exists.
+ * @param event The event to queue.
+ * @param socket The socket object to send the event on.
+ *
+ * @returns Adds event to queue and processes it if websocket exits, does nothing otherwise.
+ */
+export const queueEventIfSocketExists = async (events, socket) => {
+  if (!socket) {
+    return;
+  }
+  await queueEvents(events, socket);
+}
+
 /**
  * Handle frontend event or send the event to the backend via Websocket.
  * @param event The event to send.
@@ -143,18 +169,30 @@ export const applyEvent = async (event, socket) => {
 
   if (event.name == "_remove_cookie") {
     cookies.remove(event.payload.key, { ...event.payload.options });
-    queueEvents(initialEvents(), socket);
+    queueEventIfSocketExists(initialEvents(), socket);
     return false;
   }
 
   if (event.name == "_clear_local_storage") {
     localStorage.clear();
-    queueEvents(initialEvents(), socket);
+    queueEventIfSocketExists(initialEvents(), socket);
     return false;
   }
 
   if (event.name == "_remove_local_storage") {
     localStorage.removeItem(event.payload.key);
+    queueEventIfSocketExists(initialEvents(), socket);
+    return false;
+  }
+
+  if (event.name == "_clear_session_storage") {
+    sessionStorage.clear();
+    queueEvents(initialEvents(), socket);
+    return false;
+  }
+
+  if (event.name == "_remove_session_storage") {
+    sessionStorage.removeItem(event.payload.key);
     queueEvents(initialEvents(), socket);
     return false;
   }
@@ -249,7 +287,7 @@ export const applyRestEvent = async (event, socket) => {
   let eventSent = false;
   if (event.handler === "uploadFiles") {
 
-    if (event.payload.files === undefined || event.payload.files.length === 0){
+    if (event.payload.files === undefined || event.payload.files.length === 0) {
       // Submit the event over the websocket to trigger the event handler.
       return await applyEvent(Event(event.name), socket)
     }
@@ -282,8 +320,8 @@ export const queueEvents = async (events, socket) => {
  * @param socket The socket object to send the event on.
  */
 export const processEvent = async (socket) => {
-  // Only proceed if the socket is up, otherwise we throw the event into the void
-  if (!socket) {
+  // Only proceed if the socket is up and no event in the queue uses state, otherwise we throw the event into the void
+  if (!socket && isStateful()) {
     return;
   }
 
@@ -350,9 +388,17 @@ export const connect = async (
     }
   }
 
+  const pagehideHandler = (event) => {
+    if (event.persisted && socket.current?.connected) {
+      console.log("Disconnect backend before bfcache on navigation");
+      socket.current.disconnect();
+    }
+  }
+
   // Once the socket is open, hydrate the page.
   socket.current.on("connect", () => {
     setConnectErrors([]);
+    window.addEventListener("pagehide", pagehideHandler);
   });
 
   socket.current.on("connect_error", (error) => {
@@ -362,6 +408,7 @@ export const connect = async (
   // When the socket disconnects reset the event_processing flag
   socket.current.on("disconnect", () => {
     event_processing = false;
+    window.removeEventListener("pagehide", pagehideHandler);
   });
 
   // On each received message, queue the updates and events.
@@ -512,7 +559,18 @@ export const hydrateClientStorage = (client_storage) => {
       }
     }
   }
-  if (client_storage.cookies || client_storage.local_storage) {
+  if (client_storage.session_storage && typeof window != "undefined") {
+    for (const state_key in client_storage.session_storage) {
+      const session_options = client_storage.session_storage[state_key];
+      const session_storage_value = sessionStorage.getItem(
+        session_options.name || state_key
+      );
+      if (session_storage_value != null) {
+        client_storage_values[state_key] = session_storage_value;
+      }
+    }
+  }
+  if (client_storage.cookies || client_storage.local_storage || client_storage.session_storage) {
     return client_storage_values;
   }
   return {};
@@ -552,7 +610,15 @@ const applyClientStorageDelta = (client_storage, delta) => {
       ) {
         const options = client_storage.local_storage[state_key];
         localStorage.setItem(options.name || state_key, delta[substate][key]);
+      } else if(
+        client_storage.session_storage &&
+        state_key in client_storage.session_storage &&
+        typeof window !== "undefined"
+      ) {
+        const session_options = client_storage.session_storage[state_key];
+        sessionStorage.setItem(session_options.name || state_key, delta[substate][key]);
       }
+
     }
   }
 };
@@ -684,7 +750,7 @@ export const useEventLoop = (
     const change_start = () => {
       const main_state_dispatch = dispatch["state"]
       if (main_state_dispatch !== undefined) {
-        main_state_dispatch({is_hydrated: false})
+        main_state_dispatch({ is_hydrated: false })
       }
     }
     const change_complete = () => addEvents(onLoadInternalEvent());

reflex/__init__.py

@@ -287,12 +287,14 @@ _MAPPING: dict = {
         "background",
         "call_script",
         "clear_local_storage",
+        "clear_session_storage",
         "console_log",
         "download",
         "prevent_default",
         "redirect",
         "remove_cookie",
         "remove_local_storage",
+        "remove_session_storage",
         "set_clipboard",
         "set_focus",
         "scroll_to",
@@ -307,6 +309,7 @@ _MAPPING: dict = {
         "var",
         "Cookie",
         "LocalStorage",
+        "SessionStorage",
         "ComponentState",
         "State",
     ],

reflex/__init__.pyi

@@ -157,12 +157,14 @@ from .event import EventHandler as EventHandler
 from .event import background as background
 from .event import call_script as call_script
 from .event import clear_local_storage as clear_local_storage
+from .event import clear_session_storage as clear_session_storage
 from .event import console_log as console_log
 from .event import download as download
 from .event import prevent_default as prevent_default
 from .event import redirect as redirect
 from .event import remove_cookie as remove_cookie
 from .event import remove_local_storage as remove_local_storage
+from .event import remove_session_storage as remove_session_storage
 from .event import set_clipboard as set_clipboard
 from .event import set_focus as set_focus
 from .event import scroll_to as scroll_to
@@ -177,6 +179,7 @@ from .model import Model as Model
 from .state import var as var
 from .state import Cookie as Cookie
 from .state import LocalStorage as LocalStorage
+from .state import SessionStorage as SessionStorage
 from .state import ComponentState as ComponentState
 from .state import State as State
 from .style import Style as Style

reflex/admin.py

@@ -1,4 +1,5 @@
 """The Reflex Admin Dashboard."""
+
 from dataclasses import dataclass, field
 from typing import Optional
 

reflex/app.py

@@ -176,9 +176,9 @@ class App(LifespanMixin, Base):
     stylesheets: List[str] = []
 
     # A component that is present on every page (defaults to the Connection Error banner).
-    overlay_component: Optional[
-        Union[Component, ComponentCallable]
-    ] = default_overlay_component
+    overlay_component: Optional[Union[Component, ComponentCallable]] = (
+        default_overlay_component
+    )
 
     # Components to add to the head of every page.
     head_components: List[Component] = []
@@ -541,7 +541,7 @@ class App(LifespanMixin, Base):
 
         # Ensure state is enabled if this page uses state.
         if self.state is None:
-            if on_load or component._has_event_triggers():
+            if on_load or component._has_stateful_event_triggers():
                 self._enable_state()
             else:
                 for var in component._get_vars(include_children=True):
@@ -751,10 +751,12 @@ class App(LifespanMixin, Base):
         if should_skip_compile():
             return False
 
+        nocompile = prerequisites.get_web_dir() / constants.NOCOMPILE_FILE
+
         # Check the nocompile file.
-        if os.path.exists(constants.NOCOMPILE_FILE):
+        if nocompile.exists():
             # Delete the nocompile file
-            os.remove(constants.NOCOMPILE_FILE)
+            nocompile.unlink()
             return False
 
         # By default, compile the app.

reflex/app_module_for_backend.py

@@ -1,6 +1,7 @@
 """Shims the real reflex app module for running backend server (uvicorn or gunicorn).
 Only the app attribute is explicitly exposed.
 """
+
 from concurrent.futures import ThreadPoolExecutor
 
 from reflex import constants
@@ -8,7 +9,7 @@ from reflex.utils import telemetry
 from reflex.utils.exec import is_prod_mode
 from reflex.utils.prerequisites import get_app
 
-if "app" != constants.CompileVars.APP:
+if constants.CompileVars.APP != "app":
     raise AssertionError("unexpected variable name for 'app'")
 
 telemetry.send("compile")

reflex/base.py

@@ -6,12 +6,12 @@ import os
 from typing import TYPE_CHECKING, Any, List, Type
 
 try:
-    import pydantic.v1 as pydantic
+    import pydantic.v1.main as pydantic_main
     from pydantic.v1 import BaseModel
     from pydantic.v1.fields import ModelField
 except ModuleNotFoundError:
     if not TYPE_CHECKING:
-        import pydantic
+        import pydantic.main as pydantic_main
         from pydantic import BaseModel
         from pydantic.fields import ModelField  # type: ignore
 
@@ -45,10 +45,10 @@ def validate_field_name(bases: List[Type["BaseModel"]], field_name: str) -> None
 
 # monkeypatch pydantic validate_field_name method to skip validating
 # shadowed state vars when reloading app via utils.prerequisites.get_app(reload=True)
-pydantic.main.validate_field_name = validate_field_name  # type: ignore
+pydantic_main.validate_field_name = validate_field_name  # type: ignore
 
 
-class Base(pydantic.BaseModel):  # pyright: ignore [reportUnboundVariable]
+class Base(BaseModel):  # pyright: ignore [reportUnboundVariable]
     """The base class subclassed by all Reflex classes.
 
     This class wraps Pydantic and provides common methods such as

reflex/compiler/compiler.py

@@ -20,6 +20,7 @@ from reflex.state import BaseState
 from reflex.style import SYSTEM_COLOR_MODE
 from reflex.utils.exec import is_prod_mode
 from reflex.utils.imports import ImportVar
+from reflex.utils.prerequisites import get_web_dir
 from reflex.vars import Var
 
 
@@ -469,7 +470,7 @@ def compile_tailwind(
         The compiled Tailwind config.
     """
     # Get the path for the output file.
-    output_path = constants.Tailwind.CONFIG
+    output_path = get_web_dir() / constants.Tailwind.CONFIG
 
     # Compile the config.
     code = _compile_tailwind(config)
@@ -483,7 +484,7 @@ def remove_tailwind_from_postcss() -> tuple[str, str]:
         The path and code of the compiled postcss.config.js.
     """
     # Get the path for the output file.
-    output_path = constants.Dirs.POSTCSS_JS
+    output_path = str(get_web_dir() / constants.Dirs.POSTCSS_JS)
 
     code = [
         line
@@ -502,7 +503,7 @@ def purge_web_pages_dir():
         return
 
     # Empty out the web pages directory.
-    utils.empty_dir(constants.Dirs.WEB_PAGES, keep_files=["_app.js"])
+    utils.empty_dir(get_web_dir() / constants.Dirs.PAGES, keep_files=["_app.js"])
 
 
 class ExecutorSafeFunctions:

reflex/compiler/templates.py

@@ -37,7 +37,9 @@ class ReflexJinjaEnvironment(Environment):
                 constants.CompileVars.PROCESSING: False,
             },
             "color_mode": constants.ColorMode.NAME,
+            "resolved_color_mode": constants.ColorMode.RESOLVED_NAME,
             "toggle_color_mode": constants.ColorMode.TOGGLE,
+            "set_color_mode": constants.ColorMode.SET,
             "use_color_mode": constants.ColorMode.USE,
             "hydrate": constants.CompileVars.HYDRATE,
             "on_load_internal": constants.CompileVars.ON_LOAD_INTERNAL,