reflex 0.8.0a6__py3-none-any.whl → 0.8.1__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/__init__.pyi

@@ -15,6 +15,7 @@ from . import (
     plotly,
     radix,
     react_player,
+    react_router,
     recharts,
     sonner,
 )
@@ -34,6 +35,7 @@ __all__ = [
     "plotly",
     "radix",
     "react_player",
+    "react_router",
     "recharts",
     "sonner",
 ]

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/banner.py

@@ -268,7 +268,9 @@ class WifiOffPulse(Icon):
         Returns:
             The icon component with default props applied.
         """
-        pulse_var = Var(_js_expr="pulse")
+        pulse_var = Var(r"keyframes({ from: { opacity: 0 }, to: { opacity: 1 } })").to(
+            str
+        )
         return super().create(
             "wifi_off",
             color=props.pop("color", "crimson"),
@@ -289,18 +291,6 @@ class WifiOffPulse(Icon):
         """
         return {"@emotion/react": [ImportVar(tag="keyframes")]}
 
-    def _get_custom_code(self) -> str | None:
-        return """
-const pulse = keyframes`
-    0% {
-        opacity: 0;
-    }
-    100% {
-        opacity: 1;
-    }
-`
-"""
-
 
 class ConnectionPulser(Div):
     """A connection pulser component."""

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/core/upload.pyi

@@ -20,8 +20,8 @@ from reflex.vars.base import Var
 DEFAULT_UPLOAD_ID: str
 upload_files_context_var_data: VarData
 
-def upload_file(id_: str = DEFAULT_UPLOAD_ID) -> Var: ...
-def selected_files(id_: str = DEFAULT_UPLOAD_ID) -> Var: ...
+def upload_file(id_: str | Var[str] = DEFAULT_UPLOAD_ID) -> Var: ...
+def selected_files(id_: str | Var[str] = DEFAULT_UPLOAD_ID) -> Var: ...
 @CallableEventSpec
 def clear_selected_files(id_: str = DEFAULT_UPLOAD_ID) -> EventSpec: ...
 def cancel_upload(upload_id: str) -> EventSpec: ...

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/el/__init__.pyi

@@ -3,6 +3,8 @@
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
 
+from reflex.components.react_router import link as a
+
 from . import elements
 from .elements.forms import (
     Button,
@@ -63,7 +65,6 @@ from .elements.inline import (
     Time,
     U,
     Wbr,
-    a,
     abbr,
     b,
     bdi,

reflex/components/radix/primitives/accordion.py

@@ -431,6 +431,14 @@ class AccordionIcon(Icon):
         return super().create(tag="chevron_down", class_name=cls_name, **props)
 
 
+SLIDE_DOWN = Var(
+    r'keyframes({ from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" } })'
+)
+SLIDE_UP = Var(
+    r'keyframes({ from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 } })'
+)
+
+
 class AccordionContent(AccordionComponent):
     """An accordion component."""
 
@@ -464,44 +472,17 @@ class AccordionContent(AccordionComponent):
 
         return super().create(*children, class_name=cls_name, **props)
 
-    def add_custom_code(self) -> list[str]:
-        """Add custom code to the component.
-
-        Returns:
-            The custom code of the component.
-        """
-        return [
-            """
-const slideDown = keyframes`
-from {
-  height: 0;
-}
-to {
-  height: var(--radix-accordion-content-height);
-}
-`
-const slideUp = keyframes`
-from {
-  height: var(--radix-accordion-content-height);
-}
-to {
-  height: 0;
-}
-`
-"""
-        ]
-
     def add_style(self) -> dict[str, Any] | None:
         """Add style to the component.
 
         Returns:
             The style of the component.
         """
-        slide_down = Var("slideDown").to(str) + Var.create(
+        slide_down = SLIDE_DOWN.to(str) + Var.create(
             " var(--animation-duration) var(--animation-easing)",
         )
 
-        slide_up = Var("slideUp").to(str) + Var.create(
+        slide_up = SLIDE_UP.to(str) + Var.create(
             " var(--animation-duration) var(--animation-easing)",
         )
 

reflex/components/radix/primitives/accordion.pyi

@@ -706,6 +706,13 @@ class AccordionIcon(Icon):
             The Accordion icon Component.
         """
 
+SLIDE_DOWN = Var(
+    'keyframes({ from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" } })'
+)
+SLIDE_UP = Var(
+    'keyframes({ from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 } })'
+)
+
 class AccordionContent(AccordionComponent):
     def add_imports(self) -> dict: ...
     @classmethod
@@ -824,7 +831,6 @@ class AccordionContent(AccordionComponent):
             The Accordion content Component.
         """
 
-    def add_custom_code(self) -> list[str]: ...
     def add_style(self) -> dict[str, Any] | None: ...
 
 class Accordion(ComponentNamespace):

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())