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

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

reflex/event.py

@@ -1930,7 +1930,7 @@ class LiteralEventVar(VarOperationCall, LiteralVar, EventVar):
             _var_type=EventSpec,
             _var_data=_var_data,
             _var_value=value,
-            _func=FunctionStringVar("Event"),
+            _func=FunctionStringVar("ReflexEvent"),
             _args=(
                 # event handler name
                 ".".join(

reflex/experimental/client_state.py

@@ -167,7 +167,7 @@ class ClientStateVar(Var):
             ] = None
             imports.update(_refs_import)
         return cls(
-            _js_expr="",
+            _js_expr="null",
             _setter_name=setter_name,
             _getter_name=var_name,
             _id_name=id_name,

reflex/istate/manager.py

@@ -667,7 +667,8 @@ class StateManagerRedis(StateManager):
                     _substate_key(client_token, substate),
                     substate,
                     lock_id,
-                )
+                ),
+                name=f"reflex_set_state|{client_token}|{substate.get_full_name()}",
             )
             for substate in state.substates.values()
         ]

reflex/plugins/shared_tailwind.py

@@ -1,12 +1,11 @@
 """Tailwind CSS configuration types for Reflex plugins."""
 
 import dataclasses
+from collections.abc import Mapping
 from copy import deepcopy
 from typing import Any, Literal, TypedDict
 
-from typing_extensions import NotRequired
-
-from reflex.utils.decorator import once
+from typing_extensions import NotRequired, Unpack
 
 from .base import Plugin as PluginBase
 
@@ -80,71 +79,97 @@ class TailwindConfig(TypedDict):
     plugins: NotRequired[list[TailwindPluginConfig]]
 
 
-@once
-def tailwind_config_js_template():
-    """Get the Tailwind config template.
+def tailwind_config_js_template(
+    *, default_content: list[str], **kwargs: Unpack[TailwindConfig]
+):
+    """Generate a Tailwind CSS configuration file in JavaScript format.
+
+    Args:
+        default_content: The default content to use if none is provided.
+        **kwargs: The template variables.
 
     Returns:
         The Tailwind config template.
     """
-    from reflex.compiler.templates import from_string
-
-    source = r"""
-{# Extract destructured imports from plugin dicts only #}
-{%- set imports = [] %}
-
-{%- for plugin in plugins if plugin is mapping and plugin.import is defined %}
-  {%- set _ = imports.append(plugin.import) %}
-{%- endfor %}
-
-{%- for imp in imports %}
-import { {{ imp.name }} } from {{ imp.from | tojson }};
-{%- endfor %}
-
-{%- for plugin in plugins %}
-{% if plugin is mapping and plugin.call is not defined %}
-import plugin{{ loop.index }} from {{ plugin.name | tojson }};
-{%- elif plugin is not mapping %}
-import plugin{{ loop.index }} from {{ plugin | tojson }};
-{%- endif %}
-{%- endfor %}
-
-{%- for preset in presets %}
-import preset{{ loop.index }} from {{ preset | tojson }};
-{%- endfor %}
-
-export default {
-    content: {{ (content if content is defined else DEFAULT_CONTENT) | tojson }},
-    {% if theme is defined %}theme: {{ theme | tojson }},{% else %}theme: {},{% endif %}
-    {% if darkMode is defined %}darkMode: {{ darkMode | tojson }},{% endif %}
-    {% if corePlugins is defined %}corePlugins: {{ corePlugins | tojson }},{% endif %}
-    {% if important is defined %}important: {{ important | tojson }},{% endif %}
-    {% if prefix is defined %}prefix: {{ prefix | tojson }},{% endif %}
-    {% if separator is defined %}separator: {{ separator | tojson }},{% endif %}
-    {% if presets is defined %}
-    presets: [
-        {% for preset in presets %}
-            preset{{ loop.index }},
-        {% endfor %}
-    ],
-    {% endif %}
-    plugins: [
-        {% for plugin in plugins %}
-            {% if plugin is mapping and plugin.call is defined %}
-                {{ plugin.call }}(
-                    {%- if plugin.args is defined -%}
-                        {{ plugin.args | tojson }}
-                    {%- endif -%}
-                ),
-            {% else %}
-                plugin{{ loop.index }},
-            {% endif %}
-        {% endfor %}
+    import json
+
+    # Extract parameters
+    plugins = kwargs.get("plugins", [])
+    presets = kwargs.get("presets", [])
+    content = kwargs.get("content")
+    theme = kwargs.get("theme")
+    dark_mode = kwargs.get("darkMode")
+    core_plugins = kwargs.get("corePlugins")
+    important = kwargs.get("important")
+    prefix = kwargs.get("prefix")
+    separator = kwargs.get("separator")
+
+    # Extract destructured imports from plugin dicts only
+    imports = [
+        plugin["import"]
+        for plugin in plugins
+        if isinstance(plugin, Mapping) and "import" in plugin
     ]
-};
-"""
 
-    return from_string(source)
+    # Generate import statements for destructured imports
+    import_lines = "\n".join(
+        [
+            f"import {{ {imp['name']} }} from {json.dumps(imp['from'])};"
+            for imp in imports
+        ]
+    )
+
+    # Generate plugin imports
+    plugin_imports = []
+    for i, plugin in enumerate(plugins, 1):
+        if isinstance(plugin, Mapping) and "call" not in plugin:
+            plugin_imports.append(
+                f"import plugin{i} from {json.dumps(plugin['name'])};"
+            )
+        elif not isinstance(plugin, Mapping):
+            plugin_imports.append(f"import plugin{i} from {json.dumps(plugin)};")
+
+    plugin_imports_lines = "\n".join(plugin_imports)
+
+    presets_imports_lines = "\n".join(
+        [
+            f"import preset{i} from {json.dumps(preset)};"
+            for i, preset in enumerate(presets, 1)
+        ]
+    )
+
+    # Generate plugin array
+    plugin_list = []
+    for i, plugin in enumerate(plugins, 1):
+        if isinstance(plugin, Mapping) and "call" in plugin:
+            args_part = ""
+            if "args" in plugin:
+                args_part = json.dumps(plugin["args"])
+            plugin_list.append(f"{plugin['call']}({args_part})")
+        else:
+            plugin_list.append(f"plugin{i}")
+
+    plugin_use_str = ",".join(plugin_list)
+
+    return rf"""
+{import_lines}
+
+{plugin_imports_lines}
+
+{presets_imports_lines}
+
+export default {{
+    content: {json.dumps(content if content else default_content)},
+    theme: {json.dumps(theme if theme else {})},
+    {f"darkMode: {json.dumps(dark_mode)}," if dark_mode is not None else ""}
+    {f"corePlugins: {json.dumps(core_plugins)}," if core_plugins is not None else ""}
+    {f"importants: {json.dumps(important)}," if important is not None else ""}
+    {f"prefix: {json.dumps(prefix)}," if prefix is not None else ""}
+    {f"separator: {json.dumps(separator)}," if separator is not None else ""}
+    {f"presets: [{', '.join(f'preset{i}' for i in range(1, len(presets) + 1))}]," if presets else ""}
+    plugins: [{plugin_use_str}]
+}};
+"""
 
 
 @dataclasses.dataclass

reflex/plugins/tailwind_v3.py

@@ -48,9 +48,9 @@ def compile_config(config: TailwindConfig):
     Returns:
         The compiled Tailwind config.
     """
-    return Constants.CONFIG, tailwind_config_js_template().render(
+    return Constants.CONFIG, tailwind_config_js_template(
         **config,
-        DEFAULT_CONTENT=Constants.CONTENT,
+        default_content=Constants.CONTENT,
     )
 
 

reflex/plugins/tailwind_v4.py

@@ -17,7 +17,7 @@ class Constants(SimpleNamespace):
     """Tailwind constants."""
 
     # The Tailwindcss version
-    VERSION = "tailwindcss@4.1.11"
+    VERSION = "tailwindcss@4.1.12"
     # The Tailwind config.
     CONFIG = "tailwind.config.js"
     # Default Tailwind content paths
@@ -47,9 +47,9 @@ def compile_config(config: TailwindConfig):
     Returns:
         The compiled Tailwind config.
     """
-    return Constants.CONFIG, tailwind_config_js_template().render(
+    return Constants.CONFIG, tailwind_config_js_template(
         **config,
-        DEFAULT_CONTENT=Constants.CONTENT,
+        default_content=Constants.CONTENT,
     )
 
 
@@ -156,7 +156,7 @@ class TailwindV4Plugin(TailwindPlugin):
         return [
             *super().get_frontend_development_dependencies(**context),
             Constants.VERSION,
-            "@tailwindcss/postcss@4.1.11",
+            "@tailwindcss/postcss@4.1.12",
         ]
 
     def pre_compile(self, **context):

reflex/state.py

@@ -11,6 +11,7 @@ import functools
 import inspect
 import pickle
 import sys
+import time
 import typing
 import warnings
 from collections.abc import AsyncIterator, Callable, Sequence
@@ -284,7 +285,10 @@ async def _resolve_delta(delta: Delta) -> Delta:
     for state_name, state_delta in delta.items():
         for var_name, value in state_delta.items():
             if asyncio.iscoroutine(value):
-                tasks[state_name, var_name] = asyncio.create_task(value)
+                tasks[state_name, var_name] = asyncio.create_task(
+                    value,
+                    name=f"reflex_resolve_delta|{state_name}|{var_name}|{time.time()}",
+                )
     for (state_name, var_name), task in tasks.items():
         delta[state_name][var_name] = await task
     return delta

reflex/utils/format.py

@@ -330,7 +330,7 @@ def format_route(route: str) -> str:
 
 def format_match(
     cond: str | Var,
-    match_cases: list[list[Var]],
+    match_cases: list[tuple[list[Var], Var]],
     default: Var,
 ) -> str:
     """Format a match expression whose return type is a Var.
@@ -347,8 +347,7 @@ def format_match(
     switch_code = f"(() => {{ switch (JSON.stringify({cond})) {{"
 
     for case in match_cases:
-        conditions = case[:-1]
-        return_value = case[-1]
+        conditions, return_value = case
 
         case_conditions = " ".join(
             [f"case JSON.stringify({condition!s}):" for condition in conditions]
@@ -519,7 +518,7 @@ def format_event(event_spec: EventSpec) -> str:
 
     if event_spec.client_handler_name:
         event_args.append(wrap(event_spec.client_handler_name, '"'))
-    return f"Event({', '.join(event_args)})"
+    return f"ReflexEvent({', '.join(event_args)})"
 
 
 if TYPE_CHECKING:

reflex/utils/frontend_skeleton.py

@@ -169,7 +169,7 @@ def _update_react_router_config(config: Config, prerender_routes: bool = False):
 
 
 def _compile_package_json():
-    return templates.PACKAGE_JSON.render(
+    return templates.package_json_template(
         scripts={
             "dev": constants.PackageJson.Commands.DEV,
             "export": constants.PackageJson.Commands.EXPORT,
@@ -192,7 +192,7 @@ def _compile_vite_config(config: Config):
     base = "/"
     if frontend_path := config.frontend_path.strip("/"):
         base += frontend_path + "/"
-    return templates.VITE_CONFIG.render(base=base)
+    return templates.vite_config_template(base=base)
 
 
 def initialize_vite_config():

reflex/utils/imports.py

@@ -7,6 +7,24 @@ from collections import defaultdict
 from collections.abc import Mapping, Sequence
 
 
+def merge_parsed_imports(
+    *imports: ImmutableParsedImportDict,
+) -> ParsedImportDict:
+    """Merge multiple parsed import dicts together.
+
+    Args:
+        *imports: The list of import dicts to merge.
+
+    Returns:
+        The merged import dicts.
+    """
+    all_imports: defaultdict[str, list[ImportVar]] = defaultdict(list)
+    for import_dict in imports:
+        for lib, fields in import_dict.items():
+            all_imports[lib].extend(fields)
+    return all_imports
+
+
 def merge_imports(
     *imports: ImportDict | ParsedImportDict | ParsedImportTuple,
 ) -> ParsedImportDict:

reflex/utils/pyi_generator.py

@@ -145,7 +145,7 @@ def _get_type_hint(
     res = ""
     args = get_args(value)
 
-    if value is type(None):
+    if value is type(None) or value is None:
         return "None"
 
     if rx_types.is_union(value):
@@ -425,10 +425,18 @@ def type_to_ast(typ: Any, cls: type) -> ast.expr:
     Returns:
         The AST representation of the type annotation.
     """
-    if typ is type(None):
+    if typ is type(None) or typ is None:
         return ast.Name(id="None")
 
     origin = get_origin(typ)
+    if origin is typing.Literal:
+        return ast.Subscript(
+            value=ast.Name(id="Literal"),
+            slice=ast.Tuple(
+                elts=[ast.Constant(value=val) for val in get_args(typ)], ctx=ast.Load()
+            ),
+            ctx=ast.Load(),
+        )
     if origin is UnionType:
         origin = typing.Union
 

reflex/utils/telemetry.py

@@ -353,7 +353,10 @@ def send(event: str, telemetry_enabled: bool | None = None, **kwargs):
 
     try:
         # Within an event loop context, send the event asynchronously.
-        task = asyncio.create_task(async_send(event, telemetry_enabled, **kwargs))
+        task = asyncio.create_task(
+            async_send(event, telemetry_enabled, **kwargs),
+            name=f"reflex_send_telemetry_event|{event}",
+        )
         background_tasks.add(task)
         task.add_done_callback(background_tasks.discard)
     except RuntimeError:

reflex/utils/templates.py

@@ -1,7 +1,6 @@
 """This module provides utilities for managing Reflex app templates."""
 
 import dataclasses
-import re
 import shutil
 import tempfile
 import zipfile
@@ -33,12 +32,8 @@ def create_config(app_name: str):
     # Import here to avoid circular imports.
     from reflex.compiler import templates
 
-    config_name = f"{re.sub(r'[^a-zA-Z]', '', app_name).capitalize()}Config"
-
     console.debug(f"Creating {constants.Config.FILE}")
-    constants.Config.FILE.write_text(
-        templates.RXCONFIG.render(app_name=app_name, config_name=config_name)
-    )
+    constants.Config.FILE.write_text(templates.rxconfig_template(app_name=app_name))
 
 
 def initialize_app_directory(