reflex 0.6.1a2__py3-none-any.whl → 0.6.2a1__py3-none-any.whl

reflex/.templates/jinja/web/pages/_app.js.jinja2

@@ -7,10 +7,9 @@ import '/styles/styles.css'
 {% block declaration %}
 import { EventLoopProvider, StateProvider, defaultColorMode } from "/utils/context.js";
 import { ThemeProvider } from 'next-themes'
-import * as React from "react";
-import * as utils_context from "/utils/context.js";
-import * as utils_state from "/utils/state.js";
-import * as radix from "@radix-ui/themes";
+{% for library_alias, library_path in  window_libraries %}
+import * as {{library_alias}} from "{{library_path}}";
+{% endfor %}
 
 {% for custom_code in custom_codes %}
 {{custom_code}}
@@ -33,10 +32,9 @@ export default function MyApp({ Component, pageProps }) {
   React.useEffect(() => {
     // Make contexts and state objects available globally for dynamic eval'd components
     let windowImports = {
-      "react": React,
-      "@radix-ui/themes": radix,
-      "/utils/context": utils_context,
-      "/utils/state": utils_state,
+{% for library_alias, library_path in  window_libraries %}
+      "{{library_path}}": {{library_alias}},
+{% endfor %}
     };
     window["__reflex"] = windowImports;
   }, []);

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

@@ -544,13 +544,19 @@ export const uploadFiles = async (
 
 /**
  * Create an event object.
- * @param name The name of the event.
- * @param payload The payload of the event.
- * @param handler The client handler to process event.
+ * @param {string} name The name of the event.
+ * @param {Object.<string, Any>} payload The payload of the event.
+ * @param {Object.<string, (number|boolean)>} event_actions The actions to take on the event.
+ * @param {string} handler The client handler to process event.
  * @returns The event object.
  */
-export const Event = (name, payload = {}, handler = null) => {
-  return { name, payload, handler };
+export const Event = (
+  name,
+  payload = {},
+  event_actions = {},
+  handler = null
+) => {
+  return { name, payload, handler, event_actions };
 };
 
 /**
@@ -676,6 +682,12 @@ export const useEventLoop = (
     if (!(args instanceof Array)) {
       args = [args];
     }
+
+    event_actions = events.reduce(
+      (acc, e) => ({ ...acc, ...e.event_actions }),
+      event_actions ?? {}
+    );
+
     const _e = args.filter((o) => o?.preventDefault !== undefined)[0];
 
     if (event_actions?.preventDefault && _e?.preventDefault) {

reflex/app.py

@@ -431,25 +431,12 @@ class App(MiddlewareMixin, LifespanMixin, Base):
             The generated component.
 
         Raises:
-            VarOperationTypeError: When an invalid component var related function is passed.
-            TypeError: When an invalid component function is passed.
             exceptions.MatchTypeError: If the return types of match cases in rx.match are different.
         """
-        from reflex.utils.exceptions import VarOperationTypeError
-
         try:
             return component if isinstance(component, Component) else component()
         except exceptions.MatchTypeError:
             raise
-        except TypeError as e:
-            message = str(e)
-            if "Var" in message:
-                raise VarOperationTypeError(
-                    "You may be trying to use an invalid Python function on a state var. "
-                    "When referencing a var inside your render code, only limited var operations are supported. "
-                    "See the var operation docs here: https://reflex.dev/docs/vars/var-operations/"
-                ) from e
-            raise e
 
     def add_page(
         self,
@@ -1536,7 +1523,9 @@ class EventNamespace(AsyncNamespace):
         """
         fields = json.loads(data)
         # Get the event.
-        event = Event(**{k: v for k, v in fields.items() if k != "handler"})
+        event = Event(
+            **{k: v for k, v in fields.items() if k not in ("handler", "event_actions")}
+        )
 
         self.token_to_sid[event.token] = sid
         self.sid_to_token[sid] = event.token

reflex/compiler/compiler.py

@@ -40,6 +40,20 @@ def _compile_document_root(root: Component) -> str:
     )
 
 
+def _normalize_library_name(lib: str) -> str:
+    """Normalize the library name.
+
+    Args:
+        lib: The library name to normalize.
+
+    Returns:
+        The normalized library name.
+    """
+    if lib == "react":
+        return "React"
+    return lib.replace("@", "").replace("/", "_").replace("-", "_")
+
+
 def _compile_app(app_root: Component) -> str:
     """Compile the app template component.
 
@@ -49,10 +63,20 @@ def _compile_app(app_root: Component) -> str:
     Returns:
         The compiled app.
     """
+    from reflex.components.dynamic import bundled_libraries
+
+    window_libraries = [
+        (_normalize_library_name(name), name) for name in bundled_libraries
+    ] + [
+        ("utils_context", f"/{constants.Dirs.UTILS}/context"),
+        ("utils_state", f"/{constants.Dirs.UTILS}/state"),
+    ]
+
     return templates.APP_ROOT.render(
         imports=utils.compile_imports(app_root._get_all_imports()),
         custom_codes=app_root._get_all_custom_code(),
         hooks={**app_root._get_all_hooks_internal(), **app_root._get_all_hooks()},
+        window_libraries=window_libraries,
         render=app_root.render(),
     )
 
@@ -171,7 +195,7 @@ def _compile_root_stylesheet(stylesheets: list[str]) -> str:
             stylesheet_full_path = (
                 Path.cwd() / constants.Dirs.APP_ASSETS / stylesheet.strip("/")
             )
-            if not os.path.exists(stylesheet_full_path):
+            if not stylesheet_full_path.exists():
                 raise FileNotFoundError(
                     f"The stylesheet file {stylesheet_full_path} does not exist."
                 )

reflex/compiler/utils.py

@@ -2,7 +2,6 @@
 
 from __future__ import annotations
 
-import os
 from pathlib import Path
 from typing import Any, Callable, Dict, Optional, Type, Union
 from urllib.parse import urlparse
@@ -457,16 +456,16 @@ def add_meta(
     return page
 
 
-def write_page(path: str, code: str):
+def write_page(path: str | Path, code: str):
     """Write the given code to the given path.
 
     Args:
         path: The path to write the code to.
         code: The code to write.
     """
-    path_ops.mkdir(os.path.dirname(path))
-    with open(path, "w", encoding="utf-8") as f:
-        f.write(code)
+    path = Path(path)
+    path_ops.mkdir(path.parent)
+    path.write_text(code, encoding="utf-8")
 
 
 def empty_dir(path: str | Path, keep_files: list[str] | None = None):

reflex/components/component.py

@@ -38,8 +38,10 @@ from reflex.constants import (
 )
 from reflex.event import (
     EventChain,
+    EventChainVar,
     EventHandler,
     EventSpec,
+    EventVar,
     call_event_fn,
     call_event_handler,
     get_handler_args,
@@ -514,7 +516,7 @@ class Component(BaseComponent, ABC):
             Var,
             EventHandler,
             EventSpec,
-            List[Union[EventHandler, EventSpec]],
+            List[Union[EventHandler, EventSpec, EventVar]],
             Callable,
         ],
     ) -> Union[EventChain, Var]:
@@ -532,11 +534,16 @@ class Component(BaseComponent, ABC):
         """
         # If it's an event chain var, return it.
         if isinstance(value, Var):
-            if value._var_type is not EventChain:
+            if isinstance(value, EventChainVar):
+                return value
+            elif isinstance(value, EventVar):
+                value = [value]
+            elif issubclass(value._var_type, (EventChain, EventSpec)):
+                return self._create_event_chain(args_spec, value.guess_type())
+            else:
                 raise ValueError(
-                    f"Invalid event chain: {repr(value)} of type {type(value)}"
+                    f"Invalid event chain: {str(value)} of type {value._var_type}"
                 )
-            return value
         elif isinstance(value, EventChain):
             # Trust that the caller knows what they're doing passing an EventChain directly
             return value
@@ -547,7 +554,7 @@ class Component(BaseComponent, ABC):
 
         # If the input is a list of event handlers, create an event chain.
         if isinstance(value, List):
-            events: list[EventSpec] = []
+            events: List[Union[EventSpec, EventVar]] = []
             for v in value:
                 if isinstance(v, (EventHandler, EventSpec)):
                     # Call the event handler to get the event.
@@ -561,6 +568,8 @@ class Component(BaseComponent, ABC):
                             "lambda inside an EventChain list."
                         )
                     events.extend(result)
+                elif isinstance(v, EventVar):
+                    events.append(v)
                 else:
                     raise ValueError(f"Invalid event: {v}")
 
@@ -570,32 +579,30 @@ class Component(BaseComponent, ABC):
             if isinstance(result, Var):
                 # Recursively call this function if the lambda returned an EventChain Var.
                 return self._create_event_chain(args_spec, result)
-            events = result
+            events = [*result]
 
         # Otherwise, raise an error.
         else:
             raise ValueError(f"Invalid event chain: {value}")
 
         # Add args to the event specs if necessary.
-        events = [e.with_args(get_handler_args(e)) for e in events]
-
-        # Collect event_actions from each spec
-        event_actions = {}
-        for e in events:
-            event_actions.update(e.event_actions)
+        events = [
+            (e.with_args(get_handler_args(e)) if isinstance(e, EventSpec) else e)
+            for e in events
+        ]
 
         # Return the event chain.
         if isinstance(args_spec, Var):
             return EventChain(
                 events=events,
                 args_spec=None,
-                event_actions=event_actions,
+                event_actions={},
             )
         else:
             return EventChain(
                 events=events,
                 args_spec=args_spec,
-                event_actions=event_actions,
+                event_actions={},
             )
 
     def get_event_triggers(self) -> Dict[str, Any]:
@@ -1030,8 +1037,11 @@ class Component(BaseComponent, ABC):
             elif isinstance(event, EventChain):
                 event_args = []
                 for spec in event.events:
-                    for args in spec.args:
-                        event_args.extend(args)
+                    if isinstance(spec, EventSpec):
+                        for args in spec.args:
+                            event_args.extend(args)
+                    else:
+                        event_args.append(spec)
                 yield event_trigger, event_args
 
     def _get_vars(self, include_children: bool = False) -> list[Var]:
@@ -1105,8 +1115,12 @@ class Component(BaseComponent, ABC):
         for trigger in self.event_triggers.values():
             if isinstance(trigger, EventChain):
                 for event in trigger.events:
-                    if event.handler.state_full_name:
-                        return True
+                    if isinstance(event, EventSpec):
+                        if event.handler.state_full_name:
+                            return True
+                    else:
+                        if event._var_state:
+                            return True
             elif isinstance(trigger, Var) and trigger._var_state:
                 return True
         return False

reflex/components/dynamic.py

@@ -1,11 +1,18 @@
 """Components that are dynamically generated on the backend."""
 
+from typing import TYPE_CHECKING
+
 from reflex import constants
 from reflex.utils import imports
+from reflex.utils.exceptions import DynamicComponentMissingLibrary
+from reflex.utils.format import format_library_name
 from reflex.utils.serializers import serializer
 from reflex.vars import Var, get_unique_variable_name
 from reflex.vars.base import VarData, transform
 
+if TYPE_CHECKING:
+    from reflex.components.component import Component
+
 
 def get_cdn_url(lib: str) -> str:
     """Get the CDN URL for a library.
@@ -19,6 +26,27 @@ def get_cdn_url(lib: str) -> str:
     return f"https://cdn.jsdelivr.net/npm/{lib}" + "/+esm"
 
 
+bundled_libraries = {
+    "react",
+    "@radix-ui/themes",
+    "@emotion/react",
+}
+
+
+def bundle_library(component: "Component"):
+    """Bundle a library with the component.
+
+    Args:
+        component: The component to bundle the library with.
+
+    Raises:
+        DynamicComponentMissingLibrary: Raised when a dynamic component is missing a library.
+    """
+    if component.library is None:
+        raise DynamicComponentMissingLibrary("Component must have a library to bundle.")
+    bundled_libraries.add(format_library_name(component.library))
+
+
 def load_dynamic_serializer():
     """Load the serializer for dynamic components."""
     # Causes a circular import, so we import here.
@@ -57,20 +85,15 @@ def load_dynamic_serializer():
             )
         ] = None
 
-        libs_in_window = [
-            "react",
-            "@radix-ui/themes",
-        ]
+        libs_in_window = bundled_libraries
 
         imports = {}
         for lib, names in component._get_all_imports().items():
+            formatted_lib_name = format_library_name(lib)
             if (
                 not lib.startswith((".", "/"))
                 and not lib.startswith("http")
-                and all(
-                    not lib.startswith(lib_in_window)
-                    for lib_in_window in libs_in_window
-                )
+                and formatted_lib_name not in libs_in_window
             ):
                 imports[get_cdn_url(lib)] = names
             else:
@@ -108,7 +131,14 @@ def load_dynamic_serializer():
 
         module_code_lines.insert(0, "const React = window.__reflex.react;")
 
-        return "//__reflex_evaluate\n" + "\n".join(module_code_lines)
+        return "\n".join(
+            [
+                "//__reflex_evaluate",
+                "/** @jsx jsx */",
+                "const { jsx } = window.__reflex['@emotion/react']",
+                *module_code_lines,
+            ]
+        )
 
     @transform
     def evaluate_component(js_string: Var[str]) -> Var[Component]:

reflex/components/el/elements/media.py

@@ -317,6 +317,42 @@ class Svg(BaseHTML):
     xmlns: Var[str]
 
 
+class Text(BaseHTML):
+    """The SVG text component."""
+
+    tag = "text"
+    # The x coordinate of the starting point of the text baseline.
+    x: Var[Union[str, int]]
+    # The y coordinate of the starting point of the text baseline.
+    y: Var[Union[str, int]]
+    # Shifts the text position horizontally from a previous text element.
+    dx: Var[Union[str, int]]
+    # Shifts the text position vertically from a previous text element.
+    dy: Var[Union[str, int]]
+    # Rotates orientation of each individual glyph.
+    rotate: Var[Union[str, int]]
+    # How the text is stretched or compressed to fit the width defined by the text_length attribute.
+    length_adjust: Var[str]
+    # A width that the text should be scaled to fit.
+    text_length: Var[Union[str, int]]
+
+
+class Line(BaseHTML):
+    """The SVG line component."""
+
+    tag = "line"
+    # The x-axis coordinate of the line starting point.
+    x1: Var[Union[str, int]]
+    # The x-axis coordinate of the the line ending point.
+    x2: Var[Union[str, int]]
+    # The y-axis coordinate of the line starting point.
+    y1: Var[Union[str, int]]
+    # The y-axis coordinate of the the line ending point.
+    y2: Var[Union[str, int]]
+    # The total path length, in user units.
+    path_length: Var[int]
+
+
 class Circle(BaseHTML):
     """The SVG circle component."""
 
@@ -331,6 +367,22 @@ class Circle(BaseHTML):
     path_length: Var[int]
 
 
+class Ellipse(BaseHTML):
+    """The SVG ellipse component."""
+
+    tag = "ellipse"
+    # The x position of the center of the ellipse.
+    cx: Var[Union[str, int]]
+    # The y position of the center of the ellipse.
+    cy: Var[Union[str, int]]
+    # The radius of the ellipse on the x axis.
+    rx: Var[Union[str, int]]
+    # The radius of the ellipse on the y axis.
+    ry: Var[Union[str, int]]
+    # The total length for the ellipse's circumference, in user units.
+    path_length: Var[int]
+
+
 class Rect(BaseHTML):
     """The SVG rect component."""
 
@@ -394,6 +446,39 @@ class LinearGradient(BaseHTML):
     y2: Var[Union[str, int, bool]]
 
 
+class RadialGradient(BaseHTML):
+    """Display the radialGradient element."""
+
+    tag = "radialGradient"
+
+    # The x coordinate of the end circle of the radial gradient.
+    cx: Var[Union[str, int, bool]]
+
+    # The y coordinate of the end circle of the radial gradient.
+    cy: Var[Union[str, int, bool]]
+
+    # The radius of the start circle of the radial gradient.
+    fr: Var[Union[str, int, bool]]
+
+    # The x coordinate of the start circle of the radial gradient.
+    fx: Var[Union[str, int, bool]]
+
+    # The y coordinate of the start circle of the radial gradient.
+    fy: Var[Union[str, int, bool]]
+
+    # Units for the gradient.
+    gradient_units: Var[Union[str, bool]]
+
+    # Transform applied to the gradient.
+    gradient_transform: Var[Union[str, bool]]
+
+    # The radius of the end circle of the radial gradient.
+    r: Var[Union[str, int, bool]]
+
+    # Method used to spread the gradient.
+    spread_method: Var[Union[str, bool]]
+
+
 class Stop(BaseHTML):
     """Display the stop element."""
 
@@ -421,12 +506,16 @@ class Path(BaseHTML):
 class SVG(ComponentNamespace):
     """SVG component namespace."""
 
+    text = staticmethod(Text.create)
+    line = staticmethod(Line.create)
     circle = staticmethod(Circle.create)
+    ellipse = staticmethod(Ellipse.create)
     rect = staticmethod(Rect.create)
     polygon = staticmethod(Polygon.create)
     path = staticmethod(Path.create)
     stop = staticmethod(Stop.create)
     linear_gradient = staticmethod(LinearGradient.create)
+    radial_gradient = staticmethod(RadialGradient.create)
     defs = staticmethod(Defs.create)
     __call__ = staticmethod(Svg.create)