reflex 0.8.0a7__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/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.

reflex/environment.py

@@ -5,6 +5,7 @@ from __future__ import annotations
 import concurrent.futures
 import dataclasses
 import enum
+import importlib
 import inspect
 import multiprocessing
 import os
@@ -24,6 +25,7 @@ from typing import (
 )
 
 from reflex import constants
+from reflex.plugins import Plugin
 from reflex.utils.exceptions import EnvironmentVarValueError
 from reflex.utils.types import GenericType, is_union, value_inside_optional
 
@@ -126,6 +128,48 @@ def interpret_path_env(value: str, field_name: str) -> Path:
     return Path(value)
 
 
+def interpret_plugin_env(value: str, field_name: str) -> Plugin:
+    """Interpret a plugin environment variable value.
+
+    Args:
+        value: The environment variable value.
+        field_name: The field name.
+
+    Returns:
+        The interpreted value.
+
+    Raises:
+        EnvironmentVarValueError: If the value is invalid.
+    """
+    if "." not in value:
+        msg = f"Invalid plugin value: {value!r} for {field_name}. Plugin name must be in the format 'package.module.PluginName'."
+        raise EnvironmentVarValueError(msg)
+
+    import_path, plugin_name = value.rsplit(".", 1)
+
+    try:
+        module = importlib.import_module(import_path)
+    except ImportError as e:
+        msg = f"Failed to import module {import_path!r} for {field_name}: {e}"
+        raise EnvironmentVarValueError(msg) from e
+
+    try:
+        plugin_class = getattr(module, plugin_name, None)
+    except Exception as e:
+        msg = f"Failed to get plugin class {plugin_name!r} from module {import_path!r} for {field_name}: {e}"
+        raise EnvironmentVarValueError(msg) from e
+
+    if not inspect.isclass(plugin_class) or not issubclass(plugin_class, Plugin):
+        msg = f"Invalid plugin class: {plugin_name!r} for {field_name}. Must be a subclass of Plugin."
+        raise EnvironmentVarValueError(msg)
+
+    try:
+        return plugin_class()
+    except Exception as e:
+        msg = f"Failed to instantiate plugin {plugin_name!r} for {field_name}: {e}"
+        raise EnvironmentVarValueError(msg) from e
+
+
 def interpret_enum_env(value: str, field_type: GenericType, field_name: str) -> Any:
     """Interpret an enum environment variable value.
 
@@ -181,6 +225,8 @@ def interpret_env_var_value(
         return interpret_path_env(value, field_name)
     if field_type is ExistingPath:
         return interpret_existing_path_env(value, field_name)
+    if field_type is Plugin:
+        return interpret_plugin_env(value, field_name)
     if get_origin(field_type) is list:
         return [
             interpret_env_var_value(

reflex/event.py

@@ -570,7 +570,7 @@ class JavascriptHTMLInputElement:
 class JavascriptInputEvent:
     """Interface for a Javascript InputEvent https://developer.mozilla.org/en-US/docs/Web/API/InputEvent."""
 
-    target: JavascriptHTMLInputElement = JavascriptHTMLInputElement()  # noqa: RUF009
+    target: JavascriptHTMLInputElement = JavascriptHTMLInputElement()
 
 
 @dataclasses.dataclass(
@@ -1025,6 +1025,22 @@ def set_focus(ref: str) -> EventSpec:
     )
 
 
+def blur_focus(ref: str) -> EventSpec:
+    """Blur focus of specified ref.
+
+    Args:
+        ref: The ref.
+
+    Returns:
+        An event to blur focus on the ref
+    """
+    return server_side(
+        "_blur_focus",
+        get_fn_signature(blur_focus),
+        ref=LiteralVar.create(format.format_ref(ref)),
+    )
+
+
 def scroll_to(elem_id: str, align_to_top: bool | Var[bool] = True) -> EventSpec:
     """Select the id of a html element for scrolling into view.
 
@@ -2293,6 +2309,7 @@ class EventNamespace:
     back = staticmethod(back)
     window_alert = staticmethod(window_alert)
     set_focus = staticmethod(set_focus)
+    blur_focus = staticmethod(blur_focus)
     scroll_to = staticmethod(scroll_to)
     set_value = staticmethod(set_value)
     remove_cookie = staticmethod(remove_cookie)