reflex 0.5.4a3__tar.gz → 0.5.5a1__tar.gz

{reflex-0.5.4a3 → reflex-0.5.5a1}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: reflex
-Version: 0.5.4a3
+Version: 0.5.5a1
 Summary: Web apps in pure Python.
 Home-page: https://reflex.dev
 License: Apache-2.0
@@ -21,7 +21,7 @@ Requires-Dist: build (>=1.0.3,<2.0)
 Requires-Dist: charset-normalizer (>=3.3.2,<4.0)
 Requires-Dist: dill (>=0.3.8,<0.4)
 Requires-Dist: distro (>=1.8.0,<2.0) ; sys_platform == "linux"
-Requires-Dist: fastapi (>=0.96.0,<1.0)
+Requires-Dist: fastapi (>=0.96.0,<0.111.0)
 Requires-Dist: gunicorn (>=20.1.0,<23.0)
 Requires-Dist: httpx (>=0.25.1,<1.0)
 Requires-Dist: jinja2 (>=3.1.2,<4.0)

{reflex-0.5.4a3 → reflex-0.5.5a1}/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "reflex"
-version = "0.5.4a3"
+version = "0.5.5a1"
 description = "Web apps in pure Python."
 license = "Apache-2.0"
 authors = [
@@ -28,7 +28,7 @@ packages = [
 [tool.poetry.dependencies]
 python = "^3.8"
 dill = ">=0.3.8,<0.4"
-fastapi = ">=0.96.0,<1.0"
+fastapi = ">=0.96.0,<0.111.0"
 gunicorn = ">=20.1.0,<23.0"
 jinja2 = ">=3.1.2,<4.0"
 psutil = ">=5.9.4,<6.0"
@@ -73,8 +73,8 @@ darglint = ">=1.8.1,<2.0"
 toml = ">=0.10.2,<1.0"
 pytest-asyncio = ">=0.20.1,<0.22.0" # https://github.com/pytest-dev/pytest-asyncio/issues/706
 pytest-cov = ">=4.0.0,<5.0"
-black = "^22.10.0,<23.0"
-ruff = "0.1.0"
+black = "^24.3.0"
+ruff = "^0.4.9"
 pandas = [
     {version = ">=2.1.1,<3.0", python = ">=3.9,<3.13"},
     {version = ">=1.5.3,<2.0", python = ">=3.8,<3.9"},
@@ -99,9 +99,11 @@ build-backend = "poetry.core.masonry.api"
 
 [tool.ruff]
 exclude = ["*.pyi"]
-target-version = "py37"
+target-version = "py38"
 lint.select = ["B", "D", "E", "F", "I", "SIM", "W"]
 lint.ignore = ["B008", "D203", "D205", "D213", "D401", "D406", "D407", "E501", "F403", "F405", "F541"]
+lint.pydocstyle.convention = "google"
+
 [tool.ruff.lint.per-file-ignores]
 "__init__.py" = ["F401"]
 "tests/*.py" = ["D100", "D103", "D104", "B018"]

{reflex-0.5.4a3 → reflex-0.5.5a1}/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-0.5.4a3 → reflex-0.5.5a1}/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-0.5.4a3 → reflex-0.5.5a1}/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-0.5.4a3 → reflex-0.5.5a1}/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-0.5.4a3 → reflex-0.5.5a1}/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-0.5.4a3 → reflex-0.5.5a1}/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-0.5.4a3 → reflex-0.5.5a1}/reflex/.templates/apps/demo/code/styles.py

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

{reflex-0.5.4a3 → reflex-0.5.5a1}/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-0.5.5a1/reflex/.templates/web/components/reflex/chakra_color_mode_provider.js

@@ -0,0 +1,36 @@
+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 { theme, resolvedTheme, setTheme } = useTheme();
+  const { colorMode, toggleColorMode } = chakraUseColorMode();
+  const [resolvedColorMode, setResolvedColorMode] = useState(colorMode);
+
+  useEffect(() => {
+    if (colorMode != resolvedTheme) {
+      toggleColorMode();
+    }
+    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={{ rawColorMode, resolvedColorMode, toggleColorMode, setColorMode }}
+    >
+      {children}
+    </ColorModeContext.Provider>
+  );
+}

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

@@ -0,0 +1,35 @@
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { ColorModeContext, defaultColorMode } from "/utils/context.js";
+
+export default function RadixThemesColorModeProvider({ children }) {
+  const { theme, resolvedTheme, setTheme } = useTheme();
+  const [rawColorMode, setRawColorMode] = useState(defaultColorMode);
+  const [resolvedColorMode, setResolvedColorMode] = useState("dark");
+
+  useEffect(() => {
+    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={{ rawColorMode, resolvedColorMode, toggleColorMode, setColorMode }}
+    >
+      {children}
+    </ColorModeContext.Provider>
+  );
+}

{reflex-0.5.4a3 → reflex-0.5.5a1}/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-0.5.4a3 → reflex-0.5.5a1}/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-0.5.4a3 → reflex-0.5.5a1}/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-0.5.4a3 → reflex-0.5.5a1}/reflex/admin.py

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

{reflex-0.5.4a3 → reflex-0.5.5a1}/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-0.5.4a3 → reflex-0.5.5a1}/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-0.5.4a3 → reflex-0.5.5a1}/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-0.5.4a3 → reflex-0.5.5a1}/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-0.5.4a3 → reflex-0.5.5a1}/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,