reflex 0.8.0a6__py3-none-any.whl → 0.8.1a1__py3-none-any.whl

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

@@ -295,6 +295,20 @@ export const applyEvent = async (event, socket, navigate, params) => {
     return false;
   }
 
+  if (event.name == "_blur_focus") {
+    const ref =
+      event.payload.ref in refs ? refs[event.payload.ref] : event.payload.ref;
+    const current = ref?.current;
+    if (current === undefined || current?.blur === undefined) {
+      console.error(
+        `No element found for ref ${event.payload.ref} in _blur_focus`,
+      );
+    } else {
+      current.blur();
+    }
+    return false;
+  }
+
   if (event.name == "_set_value") {
     const ref =
       event.payload.ref in refs ? refs[event.payload.ref] : event.payload.ref;
@@ -370,7 +384,10 @@ export const applyEvent = async (event, socket, navigate, params) => {
         ...Object.fromEntries(new URLSearchParams(window.location.search)),
         ...params(),
       },
-      asPath: window.location.pathname + window.location.search,
+      asPath:
+        window.location.pathname +
+        window.location.search +
+        window.location.hash,
     };
   }
 

reflex/.templates/web/vite-plugin-safari-cachebust.js

@@ -0,0 +1,160 @@
+/* vite-plugin-safari-cachebust.js
+ *
+ * Rewrite modulepreload <link> tags and ESM imports to include a cache-busting
+ * query parameter for Safari browser.
+ *
+ * https://github.com/remix-run/react-router/issues/12761
+ *
+ * The issue seems to be Safari over-aggressive caching of ESM imports (and modulepreload)
+ * which does not respect the cache-control headers sent by the server. This approach
+ * allows hot reload to work in Safari when adding routes or changing dependencies.
+ *
+ * No equivalent transformation is needed for production builds, as the
+ * output already contains the file hash in the name.
+ */
+
+/**
+ * @typedef {import('vite').Plugin} Plugin
+ * @typedef {import('vite').ViteDevServer} ViteDevServer
+ * @typedef {import('http').IncomingMessage} IncomingMessage
+ * @typedef {import('http').ServerResponse} ServerResponse
+ * @typedef {import('connect').NextHandleFunction} NextHandleFunction
+ */
+
+const pluginName = "vite-plugin-safari-cachebust";
+
+/**
+ * Creates a Vite plugin that adds cache-busting for Safari browsers
+ * @returns {Plugin} The Vite plugin
+ */
+export default function safariCacheBustPlugin() {
+  return {
+    name: pluginName,
+    /**
+     * Configure the dev server with the Safari middleware
+     * @param {ViteDevServer} server - The Vite dev server instance
+     */
+    configureServer(server) {
+      server.middlewares.use(createSafariMiddleware());
+    },
+  };
+}
+
+/**
+ * Determines if the user agent is Safari
+ * @param {string} ua - The user agent string
+ * @returns {boolean} True if the browser is Safari
+ */
+function isSafari(ua) {
+  return /Safari/.test(ua) && !/Chrome/.test(ua);
+}
+
+/**
+ * Creates a middleware that adds cache-busting for Safari browsers
+ * @returns {NextHandleFunction} The middleware function
+ */
+function createSafariMiddleware() {
+  // Set when a log message for rewriting n links has been emitted.
+  let _have_logged_n = -1;
+
+  /**
+   * Rewrites module import links in HTML content with cache-busting parameters
+   * @param {string} html - The HTML content to process
+   * @returns {string} The processed HTML content
+   */
+  function rewriteModuleImports(html) {
+    const currentTimestamp = new Date().getTime();
+    const parts = html.split(/(<link\s+rel="modulepreload"[^>]*>)/g);
+    /** @type {[string, string][]} */
+    const replacements = parts
+      .map((chunk) => {
+        const match = chunk.match(
+          /<link\s+rel="modulepreload"\s+href="([^"]+)"(.*?)\/?>/,
+        );
+        if (!match) return;
+
+        const [fullMatch, href, rest] = match;
+        if (/^(https?:)?\/\//.test(href)) return;
+
+        try {
+          const newHref = href.includes("?")
+            ? `${href}&__reflex_ts=${currentTimestamp}`
+            : `${href}?__reflex_ts=${currentTimestamp}`;
+          return [href, newHref];
+        } catch {
+          // no worries;
+        }
+      })
+      .filter(Boolean);
+    if (replacements.length && _have_logged_n !== replacements.length) {
+      _have_logged_n = replacements.length;
+      console.debug(
+        `[${pluginName}] Rewrote ${replacements.length} modulepreload links with __reflex_ts param.`,
+      );
+    }
+    return replacements.reduce((accumulator, [target, replacement]) => {
+      return accumulator.split(target).join(replacement);
+    }, html);
+  }
+
+  /**
+   * Middleware function to handle Safari cache busting
+   * @param {IncomingMessage} req - The incoming request
+   * @param {ServerResponse} res - The server response
+   * @param {(err?: any) => void} next - The next middleware function
+   * @returns {void}
+   */
+  return function safariCacheBustMiddleware(req, res, next) {
+    const ua = req.headers["user-agent"] || "";
+    // Remove our special cache bust query param to avoid affecting lower middleware layers.
+    if (
+      req.url &&
+      (req.url.includes("?__reflex_ts=") || req.url.includes("&__reflex_ts="))
+    ) {
+      req.url = req.url.replace(/(\?|&)__reflex_ts=\d+/, "");
+      return next();
+    }
+
+    // Only apply this middleware for Safari browsers.
+    if (!isSafari(ua)) return next();
+
+    // Only transform requests that want HTML.
+    const header_accept = req.headers["accept"] || "";
+    if (
+      typeof header_accept !== "string" ||
+      !header_accept.includes("text/html")
+    ) {
+      return next();
+    }
+
+    let buffer = "";
+    const _end = res.end.bind(res);
+
+    res.setHeader("x-modified-by", "vite-plugin-safari-cachebust");
+    /**
+     * Overridden write method to collect chunks
+     * @param {any} chunk - The chunk to write
+     * @param {...any} args - Additional arguments
+     * @returns {boolean} Result of the write operation
+     */
+    res.write = function (chunk, ...args) {
+      buffer += chunk instanceof Buffer ? chunk.toString("utf-8") : chunk;
+      return true;
+    };
+
+    /**
+     * Overridden end method to process and send the final response
+     * @param {any} chunk - The final chunk to write
+     * @param {...any} args - Additional arguments
+     * @returns {ServerResponse<IncomingMessage>} The server response
+     */
+    res.end = function (chunk, ...args) {
+      if (chunk) {
+        buffer += chunk instanceof Buffer ? chunk.toString("utf-8") : chunk;
+      }
+      buffer = rewriteModuleImports(buffer);
+      return _end(buffer, ...args);
+    };
+    return next();
+  };
+}

reflex/.templates/web/vite.config.js

@@ -1,9 +1,35 @@
 import { fileURLToPath, URL } from "url";
 import { reactRouter } from "@react-router/dev/vite";
 import { defineConfig } from "vite";
+import safariCacheBustPlugin from "./vite-plugin-safari-cachebust";
+
+// Ensure that bun always uses the react-dom/server.node functions.
+function alwaysUseReactDomServerNode() {
+  return {
+    name: "vite-plugin-always-use-react-dom-server-node",
+    enforce: "pre",
+
+    resolveId(source, importer) {
+      if (
+        typeof importer === "string" &&
+        importer.endsWith("/entry.server.node.tsx") &&
+        source.includes("react-dom/server")
+      ) {
+        return this.resolve("react-dom/server.node", importer, {
+          skipSelf: true,
+        });
+      }
+      return null;
+    },
+  };
+}
 
 export default defineConfig((config) => ({
-  plugins: [reactRouter()],
+  plugins: [
+    alwaysUseReactDomServerNode(),
+    reactRouter(),
+    safariCacheBustPlugin(),
+  ],
   build: {
     rollupOptions: {
       jsx: {},
@@ -29,10 +55,6 @@ export default defineConfig((config) => ({
         find: "@",
         replacement: fileURLToPath(new URL("./public", import.meta.url)),
       },
-    ].concat(
-      config.command === "build"
-        ? [{ find: "react-dom/server", replacement: "react-dom/server.node" }]
-        : [],
-    ),
+    ],
   },
 }));

reflex/app.py

@@ -1741,7 +1741,7 @@ async def process(
                     if (path := router_data.get(constants.RouteVar.PATH))
                     else "404"
                 ).removeprefix("/")
-                state.router = RouterData(router_data)
+                state.router = RouterData.from_router_data(router_data)
 
             # Preprocess the event.
             update = await app._preprocess(state, event)

reflex/components/__init__.py

@@ -14,6 +14,7 @@ _SUBMODULES: set[str] = {
     "plotly",
     "radix",
     "react_player",
+    "react_router",
     "sonner",
     "el",
     "base",

reflex/components/component.py

@@ -5,6 +5,7 @@ from __future__ import annotations
 import contextlib
 import copy
 import dataclasses
+import enum
 import functools
 import inspect
 import typing
@@ -479,6 +480,57 @@ def _components_from(
     return ()
 
 
+def _deterministic_hash(value: object) -> int:
+    """Hash a rendered dictionary.
+
+    Args:
+        value: The dictionary to hash.
+
+    Returns:
+        The hash of the dictionary.
+
+    Raises:
+        TypeError: If the value is not hashable.
+    """
+    if isinstance(value, BaseComponent):
+        # If the value is a component, hash its rendered code.
+        rendered_code = value.render()
+        return _deterministic_hash(rendered_code)
+    if isinstance(value, Var):
+        return _deterministic_hash((value._js_expr, value._get_all_var_data()))
+    if isinstance(value, VarData):
+        return _deterministic_hash(dataclasses.asdict(value))
+    if isinstance(value, dict):
+        # Sort the dictionary to ensure consistent hashing.
+        return _deterministic_hash(
+            tuple(sorted((k, _deterministic_hash(v)) for k, v in value.items()))
+        )
+    if isinstance(value, int):
+        # Hash numbers and booleans directly.
+        return int(value)
+    if isinstance(value, float):
+        return _deterministic_hash(str(value))
+    if isinstance(value, str):
+        return int(md5(f'"{value}"'.encode()).hexdigest(), 16)
+    if isinstance(value, (tuple, list)):
+        # Hash tuples by hashing each element.
+        return _deterministic_hash(
+            "[" + ",".join(map(str, map(_deterministic_hash, value))) + "]"
+        )
+    if isinstance(value, enum.Enum):
+        # Hash enums by their name.
+        return _deterministic_hash(str(value))
+    if value is None:
+        # Hash None as a special case.
+        return _deterministic_hash("None")
+
+    msg = (
+        f"Cannot hash value `{value}` of type `{type(value).__name__}`. "
+        "Only BaseComponent, Var, VarData, dict, str, tuple, and enum.Enum are supported."
+    )
+    raise TypeError(msg)
+
+
 DEFAULT_TRIGGERS: Mapping[str, types.ArgsSpec | Sequence[types.ArgsSpec]] = {
     EventTriggers.ON_FOCUS: no_args_event_spec,
     EventTriggers.ON_BLUR: no_args_event_spec,
@@ -2430,7 +2482,7 @@ class StatefulComponent(BaseComponent):
             return None
 
         # Compute the hash based on the rendered code.
-        code_hash = md5(str(rendered_code).encode("utf-8")).hexdigest()
+        code_hash = _deterministic_hash(rendered_code)
 
         # Format the tag name including the hash.
         return format.format_state_name(

reflex/components/core/upload.py

@@ -50,7 +50,7 @@ upload_files_context_var_data: VarData = VarData(
 )
 
 
-def upload_file(id_: str = DEFAULT_UPLOAD_ID) -> Var:
+def upload_file(id_: str | Var[str] = DEFAULT_UPLOAD_ID) -> Var:
     """Get the file upload drop trigger.
 
     This var is passed to the dropzone component to update the file list when a
@@ -62,7 +62,7 @@ def upload_file(id_: str = DEFAULT_UPLOAD_ID) -> Var:
     Returns:
         A var referencing the file upload drop trigger.
     """
-    id_var = LiteralStringVar.create(id_)
+    id_var = LiteralStringVar.create(id_) if not isinstance(id_, Var) else id_
     var_name = f"""e => setFilesById(filesById => {{
     const updatedFilesById = Object.assign({{}}, filesById);
     updatedFilesById[{id_var!s}] = e;
@@ -79,7 +79,7 @@ def upload_file(id_: str = DEFAULT_UPLOAD_ID) -> Var:
     )
 
 
-def selected_files(id_: str = DEFAULT_UPLOAD_ID) -> Var:
+def selected_files(id_: str | Var[str] = DEFAULT_UPLOAD_ID) -> Var:
     """Get the list of selected files.
 
     Args:
@@ -88,9 +88,9 @@ def selected_files(id_: str = DEFAULT_UPLOAD_ID) -> Var:
     Returns:
         A var referencing the list of selected file paths.
     """
-    id_var = LiteralStringVar.create(id_)
+    id_var = LiteralStringVar.create(id_) if not isinstance(id_, Var) else id_
     return Var(
-        _js_expr=f"(filesById[{id_var!s}] ? filesById[{id_var!s}].map((f) => (f.path || f.name)) : [])",
+        _js_expr=f"(filesById[{id_var!s}] ? filesById[{id_var!s}].map((f) => f.name) : [])",
         _var_type=list[str],
         _var_data=VarData.merge(
             upload_files_context_var_data, id_var._get_all_var_data()

reflex/components/el/__init__.py

@@ -8,11 +8,17 @@ from . import elements
 
 _SUBMODULES: set[str] = {"elements"}
 _SUBMOD_ATTRS: dict[str, list[str]] = {
-    f"elements.{k}": v for k, v in elements._MAPPING.items()
+    # rx.el.a is replaced by React Router's Link.
+    f"elements.{k}": [_v for _v in v if _v != "a"]
+    for k, v in elements._MAPPING.items()
+}
+_EXTRA_MAPPINGS: dict[str, str] = {
+    "a": "reflex.components.react_router.link",
 }
 
 __getattr__, __dir__, __all__ = lazy_loader.attach(
     __name__,
     submodules=_SUBMODULES,
     submod_attrs=_SUBMOD_ATTRS,
+    **_EXTRA_MAPPINGS,
 )

reflex/components/radix/themes/typography/link.py

@@ -14,6 +14,7 @@ from reflex.components.core.cond import cond
 from reflex.components.el.elements.inline import A
 from reflex.components.markdown.markdown import MarkdownComponentMap
 from reflex.components.radix.themes.base import LiteralAccentColor, RadixThemesComponent
+from reflex.components.react_router.dom import ReactRouterLink
 from reflex.utils.imports import ImportDict, ImportVar
 from reflex.vars.base import Var
 
@@ -21,36 +22,6 @@ from .base import LiteralTextSize, LiteralTextTrim, LiteralTextWeight
 
 LiteralLinkUnderline = Literal["auto", "hover", "always", "none"]
 
-LiteralLinkDiscover = Literal["none", "render"]
-
-
-class ReactRouterLink(A):
-    """Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an <a>."""
-
-    library = "react-router"
-
-    tag = "Link"
-
-    alias = "ReactRouterLink"
-
-    # The page to link to.
-    to: Var[str]
-
-    # Replaces the current entry in the history stack instead of pushing a new one onto it.
-    replace: Var[bool]
-
-    # Will use document navigation instead of client side routing when the link is clicked: the browser will handle the transition normally (as if it were an <a href>).
-    reload_document: Var[bool]
-
-    # Prevents the scroll position from being reset to the top of the window when the link is clicked and the app is using ScrollRestoration. This only prevents new locations resetting scroll to the top, scroll position will be restored for back/forward button navigation.
-    prevent_scroll_reset: Var[bool]
-
-    # Defines the link discovery behavior
-    discover: Var[LiteralLinkDiscover]
-
-    # Enables a View Transition for this navigation.
-    view_transition: Var[bool]
-
 
 _KNOWN_REACT_ROUTER_LINK_PROPS = frozenset(ReactRouterLink.get_props())
 

reflex/components/react_router/__init__.py

@@ -0,0 +1,5 @@
+"""React-router internal components."""
+
+from .dom import ReactRouterLink
+
+link = ReactRouterLink.create

reflex/components/react_router/dom.py

@@ -0,0 +1,69 @@
+"""Components for client side navigation within React Router applications."""
+
+from __future__ import annotations
+
+from typing import ClassVar, Literal, TypedDict
+
+from reflex.components.el.elements.inline import A
+from reflex.vars.base import Var
+
+LiteralLinkDiscover = Literal["none", "render"]
+
+
+class To(TypedDict):
+    """Structured object for navigating via the `to` prop."""
+
+    # A URL pathname, beginning with a /
+    pathname: str
+
+    # A URL search string, beginning with a ?.
+    search: str
+
+    # A URL fragment identifier, beginning with a #.
+    hash: str
+
+
+class ReactRouterLink(A):
+    """Links are accessible elements used primarily for navigation. This component is styled to resemble a hyperlink and semantically renders an <a>."""
+
+    library = "react-router"
+
+    tag = "Link"
+
+    alias = "ReactRouterLink"
+
+    # The page to link to.
+    to: Var[str | To]
+
+    # Replaces the current entry in the history stack instead of pushing a new one onto it.
+    replace: Var[bool]
+
+    # Will use document navigation instead of client side routing when the link is clicked: the browser will handle the transition normally (as if it were an <a href>).
+    reload_document: Var[bool]
+
+    # Prevents the scroll position from being reset to the top of the window when the link is clicked and the app is using ScrollRestoration. This only prevents new locations resetting scroll to the top, scroll position will be restored for back/forward button navigation.
+    prevent_scroll_reset: Var[bool]
+
+    # Defines the link discovery behavior
+    discover: Var[LiteralLinkDiscover]
+
+    # Enables a View Transition for this navigation.
+    view_transition: Var[bool]
+
+    @classmethod
+    def create(cls, *children, **props):
+        """Create a ReactRouterLink component for client-side navigation.
+
+        Args:
+            *children: The children of the component.
+            **props: The props of the component.
+
+        Returns:
+            The ReactRouterLink component.
+        """
+        # React Router special behavior is triggered on the `to` prop, not href.
+        if "to" not in props and "href" in props:
+            props["to"] = props.pop("href")
+        return super().create(*children, **props)
+
+    _invalid_children: ClassVar[list[str]] = ["A", "ReactRouterLink"]

reflex/components/recharts/recharts.py

@@ -8,7 +8,7 @@ from reflex.components.component import Component, MemoizationLeaf, NoSSRCompone
 class Recharts(Component):
     """A component that wraps a recharts lib."""
 
-    library = "recharts@3.0.0"
+    library = "recharts@3.0.2"
 
     def _get_style(self) -> dict:
         return {"wrapperStyle": self.style}
@@ -17,7 +17,7 @@ class Recharts(Component):
 class RechartsCharts(NoSSRComponent, MemoizationLeaf):
     """A component that wraps a recharts lib."""
 
-    library = "recharts@3.0.0"
+    library = "recharts@3.0.2"
 
 
 LiteralAnimationEasing = Literal["ease", "ease-in", "ease-out", "ease-in-out", "linear"]

reflex/config.py

@@ -19,7 +19,12 @@ from reflex.base import Base
 from reflex.constants.base import LogLevel
 from reflex.environment import EnvironmentVariables as EnvironmentVariables
 from reflex.environment import EnvVar as EnvVar
-from reflex.environment import ExistingPath, interpret_env_var_value
+from reflex.environment import (
+    ExistingPath,
+    _load_dotenv_from_files,
+    _paths_from_env_files,
+    interpret_env_var_value,
+)
 from reflex.environment import env_var as env_var
 from reflex.environment import environment as environment
 from reflex.plugins import Plugin
@@ -27,40 +32,6 @@ from reflex.utils import console
 from reflex.utils.exceptions import ConfigError
 from reflex.utils.types import true_type_for_pydantic_field
 
-try:
-    from dotenv import load_dotenv
-except ImportError:
-    load_dotenv = None
-
-
-def _load_dotenv_from_str(env_files: str) -> None:
-    if not env_files:
-        return
-
-    if load_dotenv is None:
-        console.error(
-            """The `python-dotenv` package is required to load environment variables from a file. Run `pip install "python-dotenv>=1.1.0"`."""
-        )
-        return
-
-    # load env files in reverse order if they exist
-    for env_file_path in [
-        Path(p) for s in reversed(env_files.split(os.pathsep)) if (p := s.strip())
-    ]:
-        if env_file_path.exists():
-            load_dotenv(env_file_path, override=True)
-
-
-def _load_dotenv_from_env():
-    """Load environment variables from paths specified in REFLEX_ENV_FILE."""
-    env_env_file = os.environ.get("REFLEX_ENV_FILE")
-    if env_env_file:
-        _load_dotenv_from_str(env_env_file)
-
-
-# Load the env files at import time if they are set in the ENV_FILE environment variable.
-_load_dotenv_from_env()
-
 
 class DBConfig(Base):
     """Database config."""
@@ -358,7 +329,7 @@ class Config(Base):
             The updated config values.
         """
         if self.env_file:
-            _load_dotenv_from_str(self.env_file)
+            _load_dotenv_from_files(_paths_from_env_files(self.env_file))
 
         updated_values = {}
         # Iterate over the fields.

reflex/constants/installer.py

@@ -75,7 +75,7 @@ fetch-retries=0
 
 
 def _determine_react_router_version() -> str:
-    default_version = "7.6.2"
+    default_version = "7.6.3"
     if (version := os.getenv("REACT_ROUTER_VERSION")) and version != default_version:
         from reflex.utils import console
 
@@ -143,7 +143,7 @@ class PackageJson(SimpleNamespace):
         "postcss-import": "16.1.1",
         "@react-router/dev": _react_router_version,
         "@react-router/fs-routes": _react_router_version,
-        "rolldown-vite": "7.0.1",
+        "rolldown-vite": "7.0.3",
     }
     OVERRIDES = {
         # This should always match the `react` version in DEPENDENCIES for recharts compatibility.