reflex 0.6.5a3__py3-none-any.whl → 0.6.6a1__py3-none-any.whl

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

@@ -705,6 +705,11 @@ export const useEventLoop = (
       _e.stopPropagation();
     }
     const combined_name = events.map((e) => e.name).join("+++");
+    if (event_actions?.temporal) {
+      if (!socket.current || !socket.current.connected) {
+        return;  // don't queue when the backend is not connected
+      }
+    }
     if (event_actions?.throttle) {
       // If throttle returns false, the events are not added to the queue.
       if (!throttle(combined_name, event_actions.throttle)) {
@@ -762,7 +767,7 @@ export const useEventLoop = (
     window.onunhandledrejection = function (event) {
       addEvents([
         Event(`${exception_state_name}.handle_frontend_exception`, {
-          stack: event.reason.stack,
+          stack: event.reason?.stack,
           component_stack: "",
         }),
       ]);
@@ -837,11 +842,20 @@ export const useEventLoop = (
       }
     };
     const change_complete = () => addEvents(onLoadInternalEvent());
+    const change_error = () => {
+      // Remove cached error state from router for this page, otherwise the
+      // page will never send on_load events again.
+      if (router.components[router.pathname].error) {
+        delete router.components[router.pathname].error;
+      }
+    }
     router.events.on("routeChangeStart", change_start);
     router.events.on("routeChangeComplete", change_complete);
+    router.events.on("routeChangeError", change_error);
     return () => {
       router.events.off("routeChangeStart", change_start);
       router.events.off("routeChangeComplete", change_complete);
+      router.events.off("routeChangeError", change_error);
     };
   }, [router]);
 

reflex/__init__.py

@@ -264,6 +264,7 @@ _MAPPING: dict = {
     "experimental": ["_x"],
     "admin": ["AdminDash"],
     "app": ["App", "UploadFile"],
+    "assets": ["asset"],
     "base": ["Base"],
     "components.component": [
         "Component",
@@ -298,6 +299,7 @@ _MAPPING: dict = {
     "components.moment": ["MomentDelta", "moment"],
     "config": ["Config", "DBConfig"],
     "constants": ["Env"],
+    "constants.colors": ["Color"],
     "event": [
         "EventChain",
         "EventHandler",
@@ -338,7 +340,7 @@ _MAPPING: dict = {
     ],
     "istate.wrappers": ["get_state"],
     "style": ["Style", "toggle_color_mode"],
-    "utils.imports": ["ImportVar"],
+    "utils.imports": ["ImportDict", "ImportVar"],
     "utils.serializers": ["serializer"],
     "vars": ["Var", "field", "Field"],
 }

reflex/__init__.pyi

@@ -19,6 +19,7 @@ from . import vars as vars
 from .admin import AdminDash as AdminDash
 from .app import App as App
 from .app import UploadFile as UploadFile
+from .assets import asset as asset
 from .base import Base as Base
 from .components import el as el
 from .components import lucide as lucide
@@ -152,6 +153,7 @@ from .components.suneditor import editor as editor
 from .config import Config as Config
 from .config import DBConfig as DBConfig
 from .constants import Env as Env
+from .constants.colors import Color as Color
 from .event import EventChain as EventChain
 from .event import EventHandler as EventHandler
 from .event import background as background
@@ -192,6 +194,7 @@ from .state import dynamic as dynamic
 from .state import var as var
 from .style import Style as Style
 from .style import toggle_color_mode as toggle_color_mode
+from .utils.imports import ImportDict as ImportDict
 from .utils.imports import ImportVar as ImportVar
 from .utils.serializers import serializer as serializer
 from .vars import Field as Field

reflex/app.py

@@ -850,10 +850,9 @@ class App(MiddlewareMixin, LifespanMixin):
         if self.theme is not None:
             # If a theme component was provided, wrap the app with it
             app_wrappers[(20, "Theme")] = self.theme
-            # Fix #2992 by removing the top-level appearance prop
-            self.theme.appearance = None
 
         for route in self.unevaluated_pages:
+            console.debug(f"Evaluating page: {route}")
             self._compile_page(route)
 
         # Add the optional endpoints (_upload)
@@ -1006,6 +1005,9 @@ class App(MiddlewareMixin, LifespanMixin):
         compile_results.append(
             compiler.compile_contexts(self.state, self.theme),
         )
+        if self.theme is not None:
+            # Fix #2992 by removing the top-level appearance prop
+            self.theme.appearance = None
         progress.advance(task)
 
         # Compile the app root.

reflex/assets.py

@@ -0,0 +1,95 @@
+"""Helper functions for adding assets to the app."""
+
+import inspect
+from pathlib import Path
+from typing import Optional
+
+from reflex import constants
+from reflex.utils.exec import is_backend_only
+
+
+def asset(
+    path: str,
+    shared: bool = False,
+    subfolder: Optional[str] = None,
+    _stack_level: int = 1,
+) -> str:
+    """Add an asset to the app, either shared as a symlink or local.
+
+    Shared/External/Library assets:
+        Place the file next to your including python file.
+        Links the file to the app's external assets directory.
+
+    Example:
+    ```python
+    # my_custom_javascript.js is a shared asset located next to the including python file.
+    rx.script(src=rx.asset(path="my_custom_javascript.js", shared=True))
+    rx.image(src=rx.asset(path="test_image.png", shared=True, subfolder="subfolder"))
+    ```
+
+    Local/Internal assets:
+        Place the file in the app's assets/ directory.
+
+    Example:
+    ```python
+    # local_image.png is an asset located in the app's assets/ directory. It cannot be shared when developing a library.
+    rx.image(src=rx.asset(path="local_image.png"))
+    ```
+
+    Args:
+        path: The relative path of the asset.
+        subfolder: The directory to place the shared asset in.
+        shared: Whether to expose the asset to other apps.
+        _stack_level: The stack level to determine the calling file, defaults to
+            the immediate caller 1. When using rx.asset via a helper function,
+            increase this number for each helper function in the stack.
+
+    Raises:
+        FileNotFoundError: If the file does not exist.
+        ValueError: If subfolder is provided for local assets.
+
+    Returns:
+        The relative URL to the asset.
+    """
+    assets = constants.Dirs.APP_ASSETS
+    backend_only = is_backend_only()
+
+    # Local asset handling
+    if not shared:
+        cwd = Path.cwd()
+        src_file_local = cwd / assets / path
+        if subfolder is not None:
+            raise ValueError("Subfolder is not supported for local assets.")
+        if not backend_only and not src_file_local.exists():
+            raise FileNotFoundError(f"File not found: {src_file_local}")
+        return f"/{path}"
+
+    # Shared asset handling
+    # Determine the file by which the asset is exposed.
+    frame = inspect.stack()[_stack_level]
+    calling_file = frame.filename
+    module = inspect.getmodule(frame[0])
+    assert module is not None
+
+    external = constants.Dirs.EXTERNAL_APP_ASSETS
+    src_file_shared = Path(calling_file).parent / path
+    if not src_file_shared.exists():
+        raise FileNotFoundError(f"File not found: {src_file_shared}")
+
+    caller_module_path = module.__name__.replace(".", "/")
+    subfolder = f"{caller_module_path}/{subfolder}" if subfolder else caller_module_path
+
+    # Symlink the asset to the app's external assets directory if running frontend.
+    if not backend_only:
+        # Create the asset folder in the currently compiling app.
+        asset_folder = Path.cwd() / assets / external / subfolder
+        asset_folder.mkdir(parents=True, exist_ok=True)
+
+        dst_file = asset_folder / path
+
+        if not dst_file.exists() and (
+            not dst_file.is_symlink() or dst_file.resolve() != src_file_shared.resolve()
+        ):
+            dst_file.symlink_to(src_file_shared)
+
+    return f"/{external}/{subfolder}/{path}"

reflex/base.py

@@ -130,8 +130,8 @@ class Base(BaseModel):  # pyright: ignore [reportUnboundVariable]
         Returns:
             The value of the field.
         """
-        if isinstance(key, str) and key in self.__fields__:
+        if isinstance(key, str):
             # Seems like this function signature was wrong all along?
             # If the user wants a field that we know of, get it and pass it off to _get_value
-            key = getattr(self, key)
+            return getattr(self, key, key)
         return key

reflex/components/base/error_boundary.py

@@ -2,14 +2,15 @@
 
 from __future__ import annotations
 
-from typing import Dict, List, Tuple
+from typing import Dict, Tuple
 
-from reflex.compiler.compiler import _compile_component
 from reflex.components.component import Component
-from reflex.components.el import div, p
-from reflex.event import EventHandler
+from reflex.components.datadisplay.logo import svg_logo
+from reflex.components.el import a, button, details, div, h2, hr, p, pre, summary
+from reflex.event import EventHandler, set_clipboard
 from reflex.state import FrontendEventExceptionState
 from reflex.vars.base import Var
+from reflex.vars.function import ArgsFunctionOperation
 
 
 def on_error_spec(
@@ -40,38 +41,7 @@ class ErrorBoundary(Component):
     on_error: EventHandler[on_error_spec]
 
     # Rendered instead of the children when an error is caught.
-    Fallback_component: Var[Component] = Var(_js_expr="Fallback")._replace(
-        _var_type=Component
-    )
-
-    def add_custom_code(self) -> List[str]:
-        """Add custom Javascript code into the page that contains this component.
-
-        Custom code is inserted at module level, after any imports.
-
-        Returns:
-            The custom code to add.
-        """
-        fallback_container = div(
-            p("Ooops...Unknown Reflex error has occured:"),
-            p(
-                Var(_js_expr="error.message"),
-                color="red",
-            ),
-            p("Please contact the support."),
-        )
-
-        compiled_fallback = _compile_component(fallback_container)
-
-        return [
-            f"""
-                function Fallback({{ error, resetErrorBoundary }}) {{
-                    return (
-                        {compiled_fallback}
-                    );
-                }}
-            """
-        ]
+    fallback_render: Var[Component]
 
     @classmethod
     def create(cls, *children, **props):
@@ -86,6 +56,99 @@ class ErrorBoundary(Component):
         """
         if "on_error" not in props:
             props["on_error"] = FrontendEventExceptionState.handle_frontend_exception
+        if "fallback_render" not in props:
+            props["fallback_render"] = ArgsFunctionOperation.create(
+                ("event_args",),
+                Var.create(
+                    div(
+                        div(
+                            div(
+                                h2(
+                                    "An error occurred while rendering this page.",
+                                    font_size="1.25rem",
+                                    font_weight="bold",
+                                ),
+                                p(
+                                    "This is an error with the application itself.",
+                                    opacity="0.75",
+                                ),
+                                details(
+                                    summary("Error message", padding="0.5rem"),
+                                    div(
+                                        div(
+                                            pre(
+                                                Var(
+                                                    _js_expr="event_args.error.stack",
+                                                ),
+                                            ),
+                                            padding="0.5rem",
+                                            width="fit-content",
+                                        ),
+                                        width="100%",
+                                        max_height="50vh",
+                                        overflow="auto",
+                                        background="#000",
+                                        color="#fff",
+                                        border_radius="0.25rem",
+                                    ),
+                                    button(
+                                        "Copy",
+                                        on_click=set_clipboard(
+                                            Var(_js_expr="event_args.error.stack"),
+                                        ),
+                                        padding="0.35rem 0.75rem",
+                                        margin="0.5rem",
+                                        background="#fff",
+                                        color="#000",
+                                        border="1px solid #000",
+                                        border_radius="0.25rem",
+                                        font_weight="bold",
+                                    ),
+                                ),
+                                display="flex",
+                                flex_direction="column",
+                                gap="1rem",
+                                max_width="50ch",
+                                border="1px solid #888888",
+                                border_radius="0.25rem",
+                                padding="1rem",
+                            ),
+                            hr(
+                                border_color="currentColor",
+                                opacity="0.25",
+                            ),
+                            a(
+                                div(
+                                    "Built with ",
+                                    svg_logo("currentColor"),
+                                    display="flex",
+                                    align_items="baseline",
+                                    justify_content="center",
+                                    font_family="monospace",
+                                    gap="0.5rem",
+                                ),
+                                href="https://reflex.dev",
+                            ),
+                            display="flex",
+                            flex_direction="column",
+                            gap="1rem",
+                        ),
+                        height="100%",
+                        width="100%",
+                        position="absolute",
+                        display="flex",
+                        align_items="center",
+                        justify_content="center",
+                    )
+                ),
+                _var_type=Component,
+            )
+        else:
+            props["fallback_render"] = ArgsFunctionOperation.create(
+                ("event_args",),
+                props["fallback_render"],
+                _var_type=Component,
+            )
         return super().create(*children, **props)
 
 

reflex/components/base/error_boundary.pyi

@@ -3,7 +3,7 @@
 # ------------------- DO NOT EDIT ----------------------
 # This file was generated by `reflex/utils/pyi_generator.py`!
 # ------------------------------------------------------
-from typing import Any, Dict, List, Optional, Tuple, Union, overload
+from typing import Any, Dict, Optional, Tuple, Union, overload
 
 from reflex.components.component import Component
 from reflex.event import BASE_STATE, EventType
@@ -15,13 +15,12 @@ def on_error_spec(
 ) -> Tuple[Var[str], Var[str]]: ...
 
 class ErrorBoundary(Component):
-    def add_custom_code(self) -> List[str]: ...
     @overload
     @classmethod
     def create(  # type: ignore
         cls,
         *children,
-        Fallback_component: Optional[Union[Component, Var[Component]]] = None,
+        fallback_render: Optional[Union[Component, Var[Component]]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -57,7 +56,7 @@ class ErrorBoundary(Component):
         Args:
             *children: The children of the component.
             on_error: Fired when the boundary catches an error.
-            Fallback_component: Rendered instead of the children when an error is caught.
+            fallback_render: Rendered instead of the children when an error is caught.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/component.py

@@ -186,6 +186,23 @@ ComponentStyle = Dict[
 ComponentChild = Union[types.PrimitiveType, Var, BaseComponent]
 
 
+def satisfies_type_hint(obj: Any, type_hint: Any) -> bool:
+    """Check if an object satisfies a type hint.
+
+    Args:
+        obj: The object to check.
+        type_hint: The type hint to check against.
+
+    Returns:
+        Whether the object satisfies the type hint.
+    """
+    if isinstance(obj, LiteralVar):
+        return types._isinstance(obj._var_value, type_hint)
+    if isinstance(obj, Var):
+        return types._issubclass(obj._var_type, type_hint)
+    return types._isinstance(obj, type_hint)
+
+
 class Component(BaseComponent, ABC):
     """A component with style, event trigger and other props."""
 
@@ -460,8 +477,7 @@ class Component(BaseComponent, ABC):
                     )
                 ) or (
                     # Else just check if the passed var type is valid.
-                    not passed_types
-                    and not types._issubclass(passed_type, expected_type, value)
+                    not passed_types and not satisfies_type_hint(value, expected_type)
                 ):
                     value_name = value._js_expr if isinstance(value, Var) else value
 
@@ -1904,6 +1920,11 @@ memo = custom_component
 class NoSSRComponent(Component):
     """A dynamic component that is not rendered on the server."""
 
+    def _get_import_name(self) -> None | str:
+        if not self.library:
+            return None
+        return f"${self.library}" if self.library.startswith("/") else self.library
+
     def _get_imports(self) -> ParsedImportDict:
         """Get the imports for the component.
 
@@ -1917,8 +1938,9 @@ class NoSSRComponent(Component):
         _imports = super()._get_imports()
 
         # Do NOT import the main library/tag statically.
-        if self.library is not None:
-            _imports[self.library] = [
+        import_name = self._get_import_name()
+        if import_name is not None:
+            _imports[import_name] = [
                 imports.ImportVar(
                     tag=None,
                     render=False,
@@ -1936,10 +1958,10 @@ class NoSSRComponent(Component):
         opts_fragment = ", { ssr: false });"
 
         # extract the correct import name from library name
-        if self.library is None:
+        base_import_name = self._get_import_name()
+        if base_import_name is None:
             raise ValueError("Undefined library for NoSSRComponent")
-
-        import_name = format.format_library_name(self.library)
+        import_name = format.format_library_name(base_import_name)
 
         library_import = f"const {self.alias if self.alias else self.tag} = dynamic(() => import('{import_name}')"
         mod_import = (

reflex/components/core/cond.py

@@ -171,6 +171,14 @@ def cond(condition: Any, c1: Any, c2: Any = None) -> Component | Var:
     )
 
 
+@overload
+def color_mode_cond(light: Component, dark: Component | None = None) -> Component: ...  # type: ignore
+
+
+@overload
+def color_mode_cond(light: Any, dark: Any = None) -> Var: ...
+
+
 def color_mode_cond(light: Any, dark: Any = None) -> Var | Component:
     """Create a component or Prop based on color_mode.
 

reflex/components/datadisplay/code.py

@@ -382,7 +382,7 @@ for theme_name in dir(Theme):
 class CodeBlock(Component, MarkdownComponentMap):
     """A code block."""
 
-    library = "react-syntax-highlighter@15.6.1"
+    library = "react-syntax-highlighter@15.6.0"
 
     tag = "PrismAsyncLight"
 

reflex/components/datadisplay/logo.py

@@ -1,22 +1,23 @@
 """A Reflex logo component."""
 
+from typing import Union
+
 import reflex as rx
 
 
-def logo(**props):
-    """A Reflex logo.
+def svg_logo(color: Union[str, rx.Var[str]] = rx.color_mode_cond("#110F1F", "white")):
+    """A Reflex logo SVG.
 
     Args:
-        **props: The props to pass to the component.
+        color: The color of the logo.
 
     Returns:
-        The logo component.
+        The Reflex logo SVG.
     """
 
     def logo_path(d):
         return rx.el.svg.path(
             d=d,
-            fill=rx.color_mode_cond("#110F1F", "white"),
         )
 
     paths = [
@@ -28,18 +29,30 @@ def logo(**props):
         "M47.04 4.8799V0.399902H49.28V4.8799H47.04ZM53.76 4.8799V0.399902H56V4.8799H53.76ZM49.28 7.1199V4.8799H53.76V7.1199H49.28ZM47.04 11.5999V7.1199H49.28V11.5999H47.04ZM53.76 11.5999V7.1199H56V11.5999H53.76Z",
     ]
 
+    return rx.el.svg(
+        *[logo_path(d) for d in paths],
+        width="56",
+        height="12",
+        viewBox="0 0 56 12",
+        fill=color,
+        xmlns="http://www.w3.org/2000/svg",
+    )
+
+
+def logo(**props):
+    """A Reflex logo.
+
+    Args:
+        **props: The props to pass to the component.
+
+    Returns:
+        The logo component.
+    """
     return rx.center(
         rx.link(
             rx.hstack(
                 "Built with ",
-                rx.el.svg(
-                    *[logo_path(d) for d in paths],
-                    width="56",
-                    height="12",
-                    viewBox="0 0 56 12",
-                    fill="none",
-                    xmlns="http://www.w3.org/2000/svg",
-                ),
+                svg_logo(),
                 text_align="center",
                 align="center",
                 padding="1em",

reflex/components/el/__init__.pyi

@@ -5,6 +5,7 @@
 
 from . import elements as elements
 from .elements.forms import Button as Button
+from .elements.forms import Datalist as Datalist
 from .elements.forms import Fieldset as Fieldset
 from .elements.forms import Form as Form
 from .elements.forms import Input as Input
@@ -18,6 +19,7 @@ from .elements.forms import Progress as Progress
 from .elements.forms import Select as Select
 from .elements.forms import Textarea as Textarea
 from .elements.forms import button as button
+from .elements.forms import datalist as datalist
 from .elements.forms import fieldset as fieldset
 from .elements.forms import form as form
 from .elements.forms import input as input

reflex/components/el/elements/__init__.py

@@ -7,6 +7,7 @@ from reflex.utils import lazy_loader
 _MAPPING = {
     "forms": [
         "button",
+        "datalist",
         "fieldset",
         "form",
         "input",

reflex/components/el/elements/__init__.pyi

@@ -4,6 +4,7 @@
 # ------------------------------------------------------
 
 from .forms import Button as Button
+from .forms import Datalist as Datalist
 from .forms import Fieldset as Fieldset
 from .forms import Form as Form
 from .forms import Input as Input
@@ -17,6 +18,7 @@ from .forms import Progress as Progress
 from .forms import Select as Select
 from .forms import Textarea as Textarea
 from .forms import button as button
+from .forms import datalist as datalist
 from .forms import fieldset as fieldset
 from .forms import form as form
 from .forms import input as input
@@ -226,6 +228,7 @@ from .typography import ul as ul
 _MAPPING = {
     "forms": [
         "button",
+        "datalist",
         "fieldset",
         "form",
         "input",

reflex/components/el/elements/forms.py

@@ -681,6 +681,7 @@ class Textarea(BaseHTML):
 
 
 button = Button.create
+datalist = Datalist.create
 fieldset = Fieldset.create
 form = Form.create
 input = Input.create

reflex/components/el/elements/forms.pyi

@@ -1490,6 +1490,7 @@ class Textarea(BaseHTML):
         ...
 
 button = Button.create
+datalist = Datalist.create
 fieldset = Fieldset.create
 form = Form.create
 input = Input.create

reflex/components/moment/moment.py

@@ -1,7 +1,8 @@
 """Moment component for humanized date rendering."""
 
 import dataclasses
-from typing import List, Optional
+from datetime import date, datetime, time, timedelta
+from typing import List, Optional, Union
 
 from reflex.components.component import NoSSRComponent
 from reflex.event import EventHandler, passthrough_event_spec
@@ -19,7 +20,7 @@ class MomentDelta:
     weeks: Optional[int] = dataclasses.field(default=None)
     days: Optional[int] = dataclasses.field(default=None)
     hours: Optional[int] = dataclasses.field(default=None)
-    minutess: Optional[int] = dataclasses.field(default=None)
+    minutes: Optional[int] = dataclasses.field(default=None)
     seconds: Optional[int] = dataclasses.field(default=None)
     milliseconds: Optional[int] = dataclasses.field(default=None)
 
@@ -78,7 +79,7 @@ class Moment(NoSSRComponent):
     duration: Var[str]
 
     # The date to display (also work if passed as children).
-    date: Var[str]
+    date: Var[Union[str, datetime, date, time, timedelta]]
 
     # Shows the duration (elapsed time) between now and the provided datetime.
     duration_from_now: Var[bool]