Merge branch 'main' into move-pydantic,-sqlmodel,-alembic-to-optional-dependencies

Author: adhami3310

reflex/.templates/web/utils/react-theme.js

@@ -18,9 +18,18 @@ const ThemeContext = createContext({
 
 export function ThemeProvider({ children, defaultTheme = "system" }) {
   const [theme, setTheme] = useState(defaultTheme);
-  const [systemTheme, setSystemTheme] = useState(
-    defaultTheme !== "system" ? defaultTheme : "light",
-  );
+
+  // Detect system preference synchronously during initialization
+  const getInitialSystemTheme = () => {
+    if (defaultTheme !== "system") return defaultTheme;
+    if (typeof window === "undefined") return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  };
+
+  const [systemTheme, setSystemTheme] = useState(getInitialSystemTheme);
+  const [isInitialized, setIsInitialized] = useState(false);
 
   const firstRender = useRef(true);
 
@@ -43,6 +52,7 @@ export function ThemeProvider({ children, defaultTheme = "system" }) {
     // Load saved theme from localStorage
     const savedTheme = localStorage.getItem("theme") || defaultTheme;
     setTheme(savedTheme);
+    setIsInitialized(true);
   });
 
   const resolvedTheme = useMemo(
@@ -68,10 +78,12 @@ export function ThemeProvider({ children, defaultTheme = "system" }) {
     };
   });
 
-  // Save theme to localStorage whenever it changes
+  // Save theme to localStorage whenever it changes (but not on initial mount)
   useEffect(() => {
-    localStorage.setItem("theme", theme);
-  }, [theme]);
+    if (isInitialized) {
+      localStorage.setItem("theme", theme);
+    }
+  }, [theme, isInitialized]);
 
   useEffect(() => {
     const root = window.document.documentElement;

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

@@ -791,9 +791,9 @@ export const hydrateClientStorage = (client_storage) => {
     for (const state_key in client_storage.cookies) {
       const cookie_options = client_storage.cookies[state_key];
       const cookie_name = cookie_options.name || state_key;
-      const cookie_value = cookies.get(cookie_name);
+      const cookie_value = cookies.get(cookie_name, { doNotParse: true });
       if (cookie_value !== undefined) {
-        client_storage_values[state_key] = cookies.get(cookie_name);
+        client_storage_values[state_key] = cookie_value;
       }
     }
   }

reflex/compiler/utils.py

@@ -359,6 +359,8 @@ def create_document_root(
     Returns:
         The document root.
     """
+    from reflex.utils.misc import preload_color_theme
+
     existing_meta_types = set()
 
     for component in head_components or []:
@@ -385,7 +387,11 @@ def create_document_root(
             Meta.create(name="viewport", content="width=device-width, initial-scale=1")
         )
 
+    # Add theme preload script as the very first component to prevent FOUC
+    theme_preload_components = [preload_color_theme()]
+
     head_components = [
+        *theme_preload_components,
         *(head_components or []),
         *maybe_head_components,
         *always_head_components,

reflex/utils/console.py

@@ -3,6 +3,7 @@
 from __future__ import annotations
 
 import contextlib
+import datetime
 import inspect
 import os
 import shutil
@@ -136,7 +137,7 @@ def print_to_log_file(msg: str, *, dedupe: bool = False, **kwargs):
         dedupe: If True, suppress multiple console logs of print message.
         kwargs: Keyword arguments to pass to the print function.
     """
-    log_file_console().print(msg, **kwargs)
+    log_file_console().print(f"[{datetime.datetime.now()}] {msg}", **kwargs)
 
 
 def debug(msg: str, *, dedupe: bool = False, **kwargs):

reflex/utils/decorator.py

@@ -2,7 +2,8 @@
 
 import functools
 from collections.abc import Callable
-from typing import ParamSpec, TypeVar
+from pathlib import Path
+from typing import ParamSpec, TypeVar, cast
 
 T = TypeVar("T")
 
@@ -70,3 +71,77 @@ def wrapper(*args: P.args, **kwargs: P.kwargs) -> T:
         return result
 
     return wrapper
+
+
+def _write_cached_procedure_file(payload: str, cache_file: Path, value: object):
+    import pickle
+
+    cache_file.write_bytes(pickle.dumps((payload, value)))
+
+
+def _read_cached_procedure_file(cache_file: Path) -> tuple[str | None, object]:
+    import pickle
+
+    if cache_file.exists():
+        with cache_file.open("rb") as f:
+            return pickle.loads(f.read())
+
+    return None, None
+
+
+P = ParamSpec("P")
+Picklable = TypeVar("Picklable")
+
+
+def cached_procedure(
+    cache_file_path: Callable[[], Path],
+    payload_fn: Callable[P, str],
+) -> Callable[[Callable[P, Picklable]], Callable[P, Picklable]]:
+    """Decorator to cache the result of a function based on its arguments.
+
+    Args:
+        cache_file_path: Function that computes the cache file path.
+        payload_fn: Function that computes cache payload from function args.
+
+    Returns:
+        The decorated function.
+    """
+
+    def _inner_decorator(func: Callable[P, Picklable]) -> Callable[P, Picklable]:
+        def _inner(*args: P.args, **kwargs: P.kwargs) -> Picklable:
+            _cache_file = cache_file_path()
+
+            payload, value = _read_cached_procedure_file(_cache_file)
+            new_payload = payload_fn(*args, **kwargs)
+
+            if payload != new_payload:
+                new_value = func(*args, **kwargs)
+                _write_cached_procedure_file(new_payload, _cache_file, new_value)
+                return new_value
+
+            from reflex.utils import console
+
+            console.debug(
+                f"Using cached value for {func.__name__} with payload: {new_payload}"
+            )
+            return cast("Picklable", value)
+
+        return _inner
+
+    return _inner_decorator
+
+
+def cache_result_in_disk(
+    cache_file_path: Callable[[], Path],
+) -> Callable[[Callable[[], Picklable]], Callable[[], Picklable]]:
+    """Decorator to cache the result of a function on disk.
+
+    Args:
+        cache_file_path: Function that computes the cache file path.
+
+    Returns:
+        The decorated function.
+    """
+    return cached_procedure(
+        cache_file_path=cache_file_path, payload_fn=lambda: "constant"
+    )

reflex/utils/misc.py

@@ -90,3 +90,46 @@ def with_cwd_in_syspath():
             yield
         finally:
             sys.path[:] = orig_sys_path
+
+
+def preload_color_theme():
+    """Create a script component that preloads the color theme to prevent FOUC.
+
+    This script runs immediately in the document head before React hydration,
+    reading the saved theme from localStorage and applying the correct CSS classes
+    to prevent flash of unstyled content.
+
+    Returns:
+        Script: A script component to add to App.head_components
+    """
+    from reflex.components.el.elements.scripts import Script
+
+    # Create direct inline script content (like next-themes dangerouslySetInnerHTML)
+    script_content = """
+// Only run in browser environment, not during SSR
+if (typeof document !== 'undefined') {
+    try {
+        const theme = localStorage.getItem("theme") || "system";
+        const systemPreference = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+        const resolvedTheme = theme === "system" ? systemPreference : theme;
+
+        console.log("[PRELOAD] Theme applied:", resolvedTheme, "from theme:", theme, "system:", systemPreference);
+
+        // Apply theme immediately - blocks until complete
+        // Use classList to avoid overwriting other classes
+        document.documentElement.classList.remove("light", "dark");
+        document.documentElement.classList.add(resolvedTheme);
+        document.documentElement.style.colorScheme = resolvedTheme;
+
+    } catch (e) {
+        // Fallback to system preference on any error (resolve "system" to actual theme)
+        const fallbackTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+        console.log("[PRELOAD] Error, falling back to:", fallbackTheme);
+        document.documentElement.classList.remove("light", "dark");
+        document.documentElement.classList.add(fallbackTheme);
+        document.documentElement.style.colorScheme = fallbackTheme;
+    }
+}
+"""
+
+    return Script.create(script_content)

reflex/utils/prerequisites.py

@@ -19,7 +19,7 @@
 import tempfile
 import typing
 import zipfile
-from collections.abc import Callable, Sequence
+from collections.abc import Sequence
 from datetime import datetime
 from pathlib import Path
 from types import ModuleType
@@ -37,6 +37,7 @@
 from reflex.config import Config, get_config
 from reflex.environment import environment
 from reflex.utils import console, net, path_ops, processes, redir
+from reflex.utils.decorator import cached_procedure
 from reflex.utils.exceptions import SystemPackageMissingError
 from reflex.utils.misc import get_module_path
 from reflex.utils.registry import get_npm_registry
@@ -1249,71 +1250,9 @@ def install_bun():
         )
 
 
-def _write_cached_procedure_file(payload: str, cache_file: str | Path):
-    cache_file = Path(cache_file)
-    cache_file.write_text(payload)
-
-
-def _read_cached_procedure_file(cache_file: str | Path) -> str | None:
-    cache_file = Path(cache_file)
-    if cache_file.exists():
-        return cache_file.read_text()
-    return None
-
-
-def _clear_cached_procedure_file(cache_file: str | Path):
-    cache_file = Path(cache_file)
-    if cache_file.exists():
-        cache_file.unlink()
-
-
-def cached_procedure(
-    cache_file: str | None,
-    payload_fn: Callable[..., str],
-    cache_file_fn: Callable[[], str] | None = None,
-):
-    """Decorator to cache the runs of a procedure on disk. Procedures should not have
-       a return value.
-
-    Args:
-        cache_file: The file to store the cache payload in.
-        payload_fn: Function that computes cache payload from function args.
-        cache_file_fn: Function that computes the cache file name at runtime.
-
-    Returns:
-        The decorated function.
-
-    Raises:
-        ValueError: If both cache_file and cache_file_fn are provided.
-    """
-    if cache_file and cache_file_fn is not None:
-        msg = "cache_file and cache_file_fn cannot both be provided."
-        raise ValueError(msg)
-
-    def _inner_decorator(func: Callable):
-        def _inner(*args, **kwargs):
-            _cache_file = cache_file_fn() if cache_file_fn is not None else cache_file
-            if not _cache_file:
-                msg = "Unknown cache file, cannot cache result."
-                raise ValueError(msg)
-            payload = _read_cached_procedure_file(_cache_file)
-            new_payload = payload_fn(*args, **kwargs)
-            if payload != new_payload:
-                _clear_cached_procedure_file(_cache_file)
-                func(*args, **kwargs)
-                _write_cached_procedure_file(new_payload, _cache_file)
-
-        return _inner
-
-    return _inner_decorator
-
-
 @cached_procedure(
-    cache_file_fn=lambda: str(
-        get_web_dir() / "reflex.install_frontend_packages.cached"
-    ),
-    payload_fn=lambda p, c: f"{sorted(p)!r},{c.json()}",
-    cache_file=None,
+    cache_file_path=lambda: get_web_dir() / "reflex.install_frontend_packages.cached",
+    payload_fn=lambda packages, config: f"{sorted(packages)!r},{config.json()}",
 )
 def install_frontend_packages(packages: set[str], config: Config):
     """Installs the base and custom frontend packages.