reflex 0.8.7__py3-none-any.whl → 0.8.8a1__py3-none-any.whl

reflex/components/el/elements/forms.py

@@ -6,8 +6,6 @@ from collections.abc import Iterator
 from hashlib import md5
 from typing import Any, ClassVar, Literal
 
-from jinja2 import Environment
-
 from reflex.components.el.element import Element
 from reflex.components.tags.tag import Tag
 from reflex.constants import Dirs, EventTriggers
@@ -31,21 +29,40 @@ from reflex.vars.number import ternary_operation
 
 from .base import BaseHTML
 
-HANDLE_SUBMIT_JS_JINJA2 = Environment().from_string(
+
+def _handle_submit_js_template(
+    handle_submit_unique_name: str,
+    form_data: str,
+    field_ref_mapping: str,
+    on_submit_event_chain: str,
+    reset_on_submit: str,
+) -> str:
+    """Generate handle submit JS using f-string formatting.
+
+    Args:
+        handle_submit_unique_name: Unique name for the handle submit function.
+        form_data: Name of the form data variable.
+        field_ref_mapping: JSON string of field reference mappings.
+        on_submit_event_chain: Event chain for the submit handler.
+        reset_on_submit: Boolean string indicating if form should reset after submit.
+
+    Returns:
+        JavaScript code for the form submit handler.
     """
-    const handleSubmit_{{ handle_submit_unique_name }} = useCallback((ev) => {
+    return f"""
+    const handleSubmit_{handle_submit_unique_name} = useCallback((ev) => {{
         const $form = ev.target
         ev.preventDefault()
-        const {{ form_data }} = {...Object.fromEntries(new FormData($form).entries()), ...{{ field_ref_mapping }}};
+        const {form_data} = {{...Object.fromEntries(new FormData($form).entries()), ...{field_ref_mapping}}};
 
-        ({{ on_submit_event_chain }}(ev));
+        ({on_submit_event_chain}(ev));
 
-        if ({{ reset_on_submit }}) {
+        if ({reset_on_submit}) {{
             $form.reset()
-        }
-    })
+        }}
+    }})
     """
-)
+
 
 ButtonType = Literal["submit", "reset", "button"]
 
@@ -198,14 +215,14 @@ class Form(BaseHTML):
         if EventTriggers.ON_SUBMIT not in self.event_triggers:
             return []
         return [
-            HANDLE_SUBMIT_JS_JINJA2.render(
-                handle_submit_unique_name=self.handle_submit_unique_name,
-                form_data=FORM_DATA,
+            _handle_submit_js_template(
+                handle_submit_unique_name=str(self.handle_submit_unique_name),
+                form_data=str(FORM_DATA),
                 field_ref_mapping=str(LiteralVar.create(self._get_form_refs())),
                 on_submit_event_chain=str(
                     LiteralVar.create(self.event_triggers[EventTriggers.ON_SUBMIT])
                 ),
-                reset_on_submit=self.reset_on_submit,
+                reset_on_submit=str(self.reset_on_submit).lower(),
             )
         ]
 

reflex/components/el/elements/forms.pyi

@@ -6,8 +6,6 @@
 from collections.abc import Mapping, Sequence
 from typing import Any, Literal
 
-from jinja2 import Environment
-
 from reflex.components.core.breakpoints import Breakpoints
 from reflex.components.el.element import Element
 from reflex.event import EventType, KeyInputInfo, PointerEventInfo
@@ -16,9 +14,6 @@ from reflex.vars.base import Var
 
 from .base import BaseHTML
 
-HANDLE_SUBMIT_JS_JINJA2 = Environment().from_string(
-    "\n    const handleSubmit_{{ handle_submit_unique_name }} = useCallback((ev) => {\n        const $form = ev.target\n        ev.preventDefault()\n        const {{ form_data }} = {...Object.fromEntries(new FormData($form).entries()), ...{{ field_ref_mapping }}};\n\n        ({{ on_submit_event_chain }}(ev));\n\n        if ({{ reset_on_submit }}) {\n            $form.reset()\n        }\n    })\n    "
-)
 ButtonType = Literal["submit", "reset", "button"]
 
 class Button(BaseHTML):

reflex/components/lucide/icon.py

@@ -6,7 +6,7 @@ from reflex.utils.imports import ImportVar
 from reflex.vars.base import LiteralVar, Var
 from reflex.vars.sequence import LiteralStringVar, StringVar
 
-LUCIDE_LIBRARY = "lucide-react@0.539.0"
+LUCIDE_LIBRARY = "lucide-react@0.540.0"
 
 
 class LucideIconComponent(Component):
@@ -1330,6 +1330,7 @@ LUCIDE_ICON_LIST = [
     "rocket",
     "rocking_chair",
     "roller_coaster",
+    "rose",
     "rotate_3d",
     "rotate_ccw_key",
     "rotate_ccw_square",

reflex/components/lucide/icon.pyi

@@ -11,7 +11,7 @@ from reflex.components.core.breakpoints import Breakpoints
 from reflex.event import EventType, PointerEventInfo
 from reflex.vars.base import Var
 
-LUCIDE_LIBRARY = "lucide-react@0.539.0"
+LUCIDE_LIBRARY = "lucide-react@0.540.0"
 
 class LucideIconComponent(Component):
     @classmethod
@@ -1395,6 +1395,7 @@ LUCIDE_ICON_LIST = [
     "rocket",
     "rocking_chair",
     "roller_coaster",
+    "rose",
     "rotate_3d",
     "rotate_ccw_key",
     "rotate_ccw_square",

reflex/components/markdown/markdown.py

@@ -422,12 +422,12 @@ let {_LANGUAGE!s} = match ? match[1] : '';
 
     def _get_custom_code(self) -> str | None:
         hooks = {}
-        from reflex.compiler.templates import MACROS
+        from reflex.compiler.templates import _render_hooks
 
         for _component in self.component_map.values():
             comp = _component(_MOCK_ARG)
             hooks.update(comp._get_all_hooks())
-        formatted_hooks = MACROS.module.renderHooks(hooks)  # pyright: ignore [reportAttributeAccessIssue]
+        formatted_hooks = _render_hooks(hooks)
         return f"""
         function {self._get_component_map_name()} () {{
             {formatted_hooks}

reflex/components/radix/primitives/accordion.py

@@ -54,7 +54,7 @@ def _inherited_variant_selector(
 class AccordionComponent(RadixPrimitiveComponent):
     """Base class for all @radix-ui/accordion components."""
 
-    library = "@radix-ui/react-accordion@1.2.11"
+    library = "@radix-ui/react-accordion@1.2.12"
 
     # The color scheme of the component.
     color_scheme: Var[LiteralAccentColor]

reflex/components/radix/primitives/drawer.py

@@ -21,7 +21,7 @@ class DrawerComponent(RadixPrimitiveComponent):
 
     library = "vaul@1.1.2"
 
-    lib_dependencies: list[str] = ["@radix-ui/react-dialog@1.1.14"]
+    lib_dependencies: list[str] = ["@radix-ui/react-dialog@1.1.15"]
 
 
 LiteralDirectionType = Literal["top", "bottom", "left", "right"]

reflex/components/radix/primitives/form.py

@@ -17,7 +17,7 @@ from .base import RadixPrimitiveComponentWithClassName
 class FormComponent(RadixPrimitiveComponentWithClassName):
     """Base class for all @radix-ui/react-form components."""
 
-    library = "@radix-ui/react-form@0.1.7"
+    library = "@radix-ui/react-form@0.1.8"
 
 
 class FormRoot(FormComponent, HTMLForm):

reflex/components/radix/primitives/slider.py

@@ -17,7 +17,7 @@ LiteralSliderDir = Literal["ltr", "rtl"]
 class SliderComponent(RadixPrimitiveComponentWithClassName):
     """Base class for all @radix-ui/react-slider components."""
 
-    library = "@radix-ui/react-slider@1.3.5"
+    library = "@radix-ui/react-slider@1.3.6"
 
 
 def on_value_event_spec(

reflex/components/tags/cond_tag.py

@@ -1,22 +1,31 @@
 """Tag to conditionally render components."""
 
 import dataclasses
-from collections.abc import Mapping
+from collections.abc import Iterator, Mapping
 from typing import Any
 
 from reflex.components.tags.tag import Tag
-from reflex.vars.base import Var
 
 
-@dataclasses.dataclass(frozen=True)
+@dataclasses.dataclass(frozen=True, kw_only=True)
 class CondTag(Tag):
     """A conditional tag."""
 
     # The condition to determine which component to render.
-    cond: Var[Any] = dataclasses.field(default_factory=lambda: Var.create(True))
+    cond_state: str
 
     # The code to render if the condition is true.
-    true_value: Mapping = dataclasses.field(default_factory=dict)
+    true_value: Mapping
 
     # The code to render if the condition is false.
     false_value: Mapping | None = None
+
+    def __iter__(self) -> Iterator[tuple[str, Any]]:
+        """Iterate over the tag's attributes.
+
+        Yields:
+            An iterator over the tag's attributes.
+        """
+        yield ("cond_state", self.cond_state)
+        yield ("true_value", self.true_value)
+        yield ("false_value", self.false_value)

reflex/components/tags/iter_tag.py

@@ -68,32 +68,6 @@ class IterTag(Tag):
             _var_type=self.get_iterable_var_type(),
         ).guess_type()
 
-    def get_index_var_arg(self) -> Var:
-        """Get the index var for the tag (without curly braces).
-
-        This is used to render the index var in the .map() function.
-
-        Returns:
-            The index var.
-        """
-        return Var(
-            _js_expr=self.index_var_name,
-            _var_type=int,
-        ).guess_type()
-
-    def get_arg_var_arg(self) -> Var:
-        """Get the arg var for the tag (without curly braces).
-
-        This is used to render the arg var in the .map() function.
-
-        Returns:
-            The arg var.
-        """
-        return Var(
-            _js_expr=self.arg_var_name,
-            _var_type=self.get_iterable_var_type(),
-        ).guess_type()
-
     def render_component(self) -> Component:
         """Render the component.
 

reflex/components/tags/match_tag.py

@@ -1,22 +1,31 @@
 """Tag to conditionally match cases."""
 
 import dataclasses
-from collections.abc import Sequence
+from collections.abc import Iterator, Mapping, Sequence
 from typing import Any
 
 from reflex.components.tags.tag import Tag
-from reflex.vars.base import Var
 
 
-@dataclasses.dataclass(frozen=True)
+@dataclasses.dataclass(frozen=True, kw_only=True)
 class MatchTag(Tag):
     """A match tag."""
 
     # The condition to determine which case to match.
-    cond: Var[Any] = dataclasses.field(default_factory=lambda: Var.create(True))
+    cond: str
 
     # The list of match cases to be matched.
-    match_cases: Sequence[Any] = dataclasses.field(default_factory=list)
+    match_cases: Sequence[tuple[Sequence[str], Mapping]]
 
     # The catchall case to match.
-    default: Any = dataclasses.field(default=Var.create(None))
+    default: Any
+
+    def __iter__(self) -> Iterator[tuple[str, Any]]:
+        """Iterate over the tag's attributes.
+
+        Yields:
+            An iterator over the tag's attributes.
+        """
+        yield ("cond", self.cond)
+        yield ("match_cases", self.match_cases)
+        yield ("default", self.default)

reflex/components/tags/tag.py

@@ -3,7 +3,7 @@
 from __future__ import annotations
 
 import dataclasses
-from collections.abc import Mapping, Sequence
+from collections.abc import Iterator, Mapping, Sequence
 from typing import Any
 
 from reflex.event import EventChain
@@ -41,16 +41,13 @@ class Tag:
     # The props of the tag.
     props: Mapping[str, Any] = dataclasses.field(default_factory=dict)
 
-    # The inner contents of the tag.
-    contents: str = ""
-
     # Special props that aren't key value pairs.
     special_props: Sequence[Var] = dataclasses.field(default_factory=list)
 
     # The children components.
     children: Sequence[Any] = dataclasses.field(default_factory=list)
 
-    def format_props(self) -> list:
+    def format_props(self) -> list[str]:
         """Format the tag's props.
 
         Returns:
@@ -69,7 +66,7 @@ class Tag:
         """
         return dataclasses.replace(self, **kwargs)
 
-    def __iter__(self):
+    def __iter__(self) -> Iterator[tuple[str, Any]]:
         """Iterate over the tag's fields.
 
         Yields:

reflex/components/tags/tagless.py

@@ -1,12 +1,18 @@
 """A tag with no tag."""
 
+import dataclasses
+
 from reflex.components.tags import Tag
 from reflex.utils import format
 
 
+@dataclasses.dataclass(frozen=True, kw_only=True)
 class Tagless(Tag):
     """A tag with no tag."""
 
+    # The inner contents of the tag.
+    contents: str
+
     def __str__(self) -> str:
         """Return the string representation of the tag.
 
@@ -20,3 +26,11 @@ class Tagless(Tag):
         if len(self.contents) > 0 and self.contents[-1] == " ":
             out = out + space
         return out
+
+    def __iter__(self):
+        """Iterate over the tag's fields.
+
+        Yields:
+            tuple[str, Any]: The field name and value.
+        """
+        yield "contents", self.contents

reflex/constants/base.py

@@ -141,8 +141,6 @@ class Templates(SimpleNamespace):
         BASE = Reflex.ROOT_DIR / Reflex.MODULE_NAME / ".templates"
         # The web subdirectory of the template directory.
         WEB_TEMPLATE = BASE / "web"
-        # The jinja template directory.
-        JINJA_TEMPLATE = BASE / "jinja"
         # Where the code for the templates is stored.
         CODE = "code"
 

reflex/constants/installer.py

@@ -75,7 +75,7 @@ fetch-retries=0
 
 
 def _determine_react_router_version() -> str:
-    default_version = "7.8.0"
+    default_version = "7.8.1"
     if (version := os.getenv("REACT_ROUTER_VERSION")) and version != default_version:
         from reflex.utils import console
 
@@ -131,7 +131,7 @@ class PackageJson(SimpleNamespace):
             "react": cls._react_version,
             "react-helmet": "6.1.0",
             "react-dom": cls._react_version,
-            "isbot": "5.1.29",
+            "isbot": "5.1.30",
             "socket.io-client": "4.8.1",
             "universal-cookie": "7.2.2",
         }
@@ -143,11 +143,11 @@ class PackageJson(SimpleNamespace):
         "postcss-import": "16.1.1",
         "@react-router/dev": _react_router_version,
         "@react-router/fs-routes": _react_router_version,
-        "vite": "npm:rolldown-vite@7.1.2",
+        "vite": "npm:rolldown-vite@7.1.3",
     }
     OVERRIDES = {
         # This should always match the `react` version in DEPENDENCIES for recharts compatibility.
         "react-is": _react_version,
         "cookie": "1.0.2",
-        "vite": "npm:rolldown-vite@7.1.2",
+        "vite": "npm:rolldown-vite@7.1.3",
     }

reflex/custom_components/custom_components.py

@@ -18,6 +18,202 @@ from reflex.constants import CustomComponents
 from reflex.utils import console, frontend_skeleton
 
 
+def _pyproject_toml_template(
+    package_name: str, module_name: str, reflex_version: str
+) -> str:
+    """Template for custom components pyproject.toml.
+
+    Args:
+        package_name: The name of the package.
+        module_name: The name of the module.
+        reflex_version: The version of Reflex.
+
+    Returns:
+        Rendered pyproject.toml content as string.
+    """
+    return f"""[build-system]
+requires = ["setuptools", "wheel"]
+build-backend = "setuptools.build_meta"
+
+[project]
+name = "{package_name}"
+version = "0.0.1"
+description = "Reflex custom component {module_name}"
+readme = "README.md"
+license = {{ text = "Apache-2.0" }}
+requires-python = ">=3.10"
+authors = [{{ name = "", email = "YOUREMAIL@domain.com" }}]
+keywords = ["reflex","reflex-custom-components"]
+
+dependencies = ["reflex>={reflex_version}"]
+
+classifiers = ["Development Status :: 4 - Beta"]
+
+[project.urls]
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.setuptools.packages.find]
+where = ["custom_components"]
+"""
+
+
+def _readme_template(module_name: str, package_name: str) -> str:
+    """Template for custom components README.
+
+    Args:
+        module_name: The name of the module.
+        package_name: The name of the package.
+
+    Returns:
+        Rendered README.md content as string.
+    """
+    return f"""# {module_name}
+
+A Reflex custom component {module_name}.
+
+## Installation
+
+```bash
+pip install {package_name}
+```
+"""
+
+
+def _source_template(component_class_name: str, module_name: str) -> str:
+    """Template for custom components source.
+
+    Args:
+        component_class_name: The name of the component class.
+        module_name: The name of the module.
+
+    Returns:
+        Rendered custom component source code as string.
+    """
+    return rf'''
+"""Reflex custom component {component_class_name}."""
+
+# For wrapping react guide, visit https://reflex.dev/docs/wrapping-react/overview/
+
+import reflex as rx
+
+# Some libraries you want to wrap may require dynamic imports.
+# This is because they they may not be compatible with Server-Side Rendering (SSR).
+# To handle this in Reflex, all you need to do is subclass `NoSSRComponent` instead.
+# For example:
+# from reflex.components.component import NoSSRComponent
+# class {component_class_name}(NoSSRComponent):
+#     pass
+
+
+class {component_class_name}(rx.Component):
+    """{component_class_name} component."""
+
+    # The React library to wrap.
+    library = "Fill-Me"
+
+    # The React component tag.
+    tag = "Fill-Me"
+
+    # If the tag is the default export from the module, you must set is_default = True.
+    # This is normally used when components don't have curly braces around them when importing.
+    # is_default = True
+
+    # If you are wrapping another components with the same tag as a component in your project
+    # you can use aliases to differentiate between them and avoid naming conflicts.
+    # alias = "Other{component_class_name}"
+
+    # The props of the React component.
+    # Note: when Reflex compiles the component to Javascript,
+    # `snake_case` property names are automatically formatted as `camelCase`.
+    # The prop names may be defined in `camelCase` as well.
+    # some_prop: rx.Var[str] = "some default value"
+    # some_other_prop: rx.Var[int] = 1
+
+    # By default Reflex will install the library you have specified in the library property.
+    # However, sometimes you may need to install other libraries to use a component.
+    # In this case you can use the lib_dependencies property to specify other libraries to install.
+    # lib_dependencies: list[str] = []
+
+    # Event triggers declaration if any.
+    # Below is equivalent to merging `{{ "on_change": lambda e: [e] }}`
+    # onto the default event triggers of parent/base Component.
+    # The function defined for the `on_change` trigger maps event for the javascript
+    # trigger to what will be passed to the backend event handler function.
+    # on_change: rx.EventHandler[lambda e: [e]]
+
+    # To add custom code to your component
+    # def _get_custom_code(self) -> str:
+    #     return "const customCode = 'customCode';"
+
+
+{module_name} = {component_class_name}.create
+'''
+
+
+def _init_template(module_name: str) -> str:
+    """Template for custom components __init__.py.
+
+    Args:
+        module_name: The name of the module.
+
+    Returns:
+        Rendered __init__.py content as string.
+    """
+    return f"from .{module_name} import *"
+
+
+def _demo_app_template(custom_component_module_dir: str, module_name: str) -> str:
+    """Template for custom components demo app.
+
+    Args:
+        custom_component_module_dir: The directory of the custom component module.
+        module_name: The name of the module.
+
+    Returns:
+        Rendered demo app source code as string.
+    """
+    return rf'''
+"""Welcome to Reflex! This file showcases the custom component in a basic app."""
+
+from rxconfig import config
+
+import reflex as rx
+
+from {custom_component_module_dir} import {module_name}
+
+filename = f"{{config.app_name}}/{{config.app_name}}.py"
+
+
+class State(rx.State):
+    """The app state."""
+    pass
+
+def index() -> rx.Component:
+    return rx.center(
+        rx.theme_panel(),
+        rx.vstack(
+            rx.heading("Welcome to Reflex!", size="9"),
+            rx.text(
+                "Test your custom component by editing ",
+                rx.code(filename),
+                font_size="2em",
+            ),
+            {module_name}(),
+            align="center",
+            spacing="7",
+        ),
+        height="100vh",
+    )
+
+
+# Add state and page to the app.
+app = rx.App()
+app.add_page(index)
+'''
+
+
 def set_loglevel(ctx: Any, self: Any, value: str | None):
     """Set the log level.
 
@@ -77,11 +273,9 @@ def _create_package_config(module_name: str, package_name: str):
         module_name: The name of the module.
         package_name: The name of the package typically constructed with `reflex-` prefix and a meaningful library name.
     """
-    from reflex.compiler import templates
-
     pyproject = Path(CustomComponents.PYPROJECT_TOML)
     pyproject.write_text(
-        templates.CUSTOM_COMPONENTS_PYPROJECT_TOML.render(
+        _pyproject_toml_template(
             module_name=module_name,
             package_name=package_name,
             reflex_version=constants.Reflex.VERSION,
@@ -96,11 +290,9 @@ def _create_readme(module_name: str, package_name: str):
         module_name: The name of the module.
         package_name: The name of the python package to be published.
     """
-    from reflex.compiler import templates
-
     readme = Path(CustomComponents.PACKAGE_README)
     readme.write_text(
-        templates.CUSTOM_COMPONENTS_README.render(
+        _readme_template(
             module_name=module_name,
             package_name=package_name,
         )
@@ -119,19 +311,15 @@ def _write_source_and_init_py(
         component_class_name: The name of the component class.
         module_name: The name of the module.
     """
-    from reflex.compiler import templates
-
     module_path = custom_component_src_dir / f"{module_name}.py"
     module_path.write_text(
-        templates.CUSTOM_COMPONENTS_SOURCE.render(
+        _source_template(
             component_class_name=component_class_name, module_name=module_name
         )
     )
 
     init_path = custom_component_src_dir / CustomComponents.INIT_FILE
-    init_path.write_text(
-        templates.CUSTOM_COMPONENTS_INIT_FILE.render(module_name=module_name)
-    )
+    init_path.write_text(_init_template(module_name=module_name))
 
 
 def _populate_demo_app(name_variants: NameVariants):
@@ -141,7 +329,6 @@ def _populate_demo_app(name_variants: NameVariants):
         name_variants: the tuple including various names such as package name, class name needed for the project.
     """
     from reflex import constants
-    from reflex.compiler import templates
     from reflex.reflex import _init
 
     demo_app_dir = Path(name_variants.demo_app_dir)
@@ -155,10 +342,10 @@ def _populate_demo_app(name_variants: NameVariants):
         # We start with the blank template as basis.
         _init(name=demo_app_name, template=constants.Templates.DEFAULT)
         # Then overwrite the app source file with the one we want for testing custom components.
-        # This source file is rendered using jinja template file.
+        # This source file is rendered using template file.
         demo_file = Path(f"{demo_app_name}/{demo_app_name}.py")
         demo_file.write_text(
-            templates.CUSTOM_COMPONENTS_DEMO_APP.render(
+            _demo_app_template(
                 custom_component_module_dir=name_variants.custom_component_module_dir,
                 module_name=name_variants.module_name,
             )