reflex 0.6.0a4__py3-none-any.whl → 0.6.1__py3-none-any.whl

reflex/components/datadisplay/logo.py

@@ -12,31 +12,33 @@ def logo(**props):
     Returns:
         The logo component.
     """
-    light_mode_logo = """<svg width="56" height="12" viewBox="0 0 56 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 11.6V0.400024H8.96V4.88002H6.72V2.64002H2.24V4.88002H6.72V7.12002H2.24V11.6H0ZM6.72 11.6V7.12002H8.96V11.6H6.72Z" fill="#110F1F"/>
-<path d="M11.2 11.6V0.400024H17.92V2.64002H13.44V4.88002H17.92V7.12002H13.44V9.36002H17.92V11.6H11.2Z" fill="#110F1F"/>
-<path d="M20.16 11.6V0.400024H26.88V2.64002H22.4V4.88002H26.88V7.12002H22.4V11.6H20.16Z" fill="#110F1F"/>
-<path d="M29.12 11.6V0.400024H31.36V9.36002H35.84V11.6H29.12Z" fill="#110F1F"/>
-<path d="M38.08 11.6V0.400024H44.8V2.64002H40.32V4.88002H44.8V7.12002H40.32V9.36002H44.8V11.6H38.08Z" fill="#110F1F"/>
-<path d="M47.04 4.88002V0.400024H49.28V4.88002H47.04ZM53.76 4.88002V0.400024H56V4.88002H53.76ZM49.28 7.12002V4.88002H53.76V7.12002H49.28ZM47.04 11.6V7.12002H49.28V11.6H47.04ZM53.76 11.6V7.12002H56V11.6H53.76Z" fill="#110F1F"/>
-</svg>"""
-
-    dark_mode_logo = """<svg width="56" height="12" viewBox="0 0 56 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 11.5999V0.399902H8.96V4.8799H6.72V2.6399H2.24V4.8799H6.72V7.1199H2.24V11.5999H0ZM6.72 11.5999V7.1199H8.96V11.5999H6.72Z" fill="white"/>
-<path d="M11.2 11.5999V0.399902H17.92V2.6399H13.44V4.8799H17.92V7.1199H13.44V9.3599H17.92V11.5999H11.2Z" fill="white"/>
-<path d="M20.16 11.5999V0.399902H26.88V2.6399H22.4V4.8799H26.88V7.1199H22.4V11.5999H20.16Z" fill="white"/>
-<path d="M29.12 11.5999V0.399902H31.36V9.3599H35.84V11.5999H29.12Z" fill="white"/>
-<path d="M38.08 11.5999V0.399902H44.8V2.6399H40.32V4.8799H44.8V7.1199H40.32V9.3599H44.8V11.5999H38.08Z" fill="white"/>
-<path d="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" fill="white"/>
-</svg>"""
+
+    def logo_path(d):
+        return rx.el.svg.path(
+            d=d,
+            fill=rx.color_mode_cond("#110F1F", "white"),
+        )
+
+    paths = [
+        "M0 11.5999V0.399902H8.96V4.8799H6.72V2.6399H2.24V4.8799H6.72V7.1199H2.24V11.5999H0ZM6.72 11.5999V7.1199H8.96V11.5999H6.72Z",
+        "M11.2 11.5999V0.399902H17.92V2.6399H13.44V4.8799H17.92V7.1199H13.44V9.3599H17.92V11.5999H11.2Z",
+        "M20.16 11.5999V0.399902H26.88V2.6399H22.4V4.8799H26.88V7.1199H22.4V11.5999H20.16Z",
+        "M29.12 11.5999V0.399902H31.36V9.3599H35.84V11.5999H29.12Z",
+        "M38.08 11.5999V0.399902H44.8V2.6399H40.32V4.8799H44.8V7.1199H40.32V9.3599H44.8V11.5999H38.08Z",
+        "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.center(
         rx.link(
             rx.hstack(
                 "Built with ",
-                rx.color_mode_cond(
-                    rx.html(light_mode_logo),
-                    rx.html(dark_mode_logo),
+                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",
                 ),
                 text_align="center",
                 align="center",

reflex/components/dynamic.py

@@ -0,0 +1,157 @@
+"""Components that are dynamically generated on the backend."""
+
+from reflex import constants
+from reflex.utils import imports
+from reflex.utils.serializers import serializer
+from reflex.vars import Var, get_unique_variable_name
+from reflex.vars.base import VarData, transform
+
+
+def get_cdn_url(lib: str) -> str:
+    """Get the CDN URL for a library.
+
+    Args:
+        lib: The library to get the CDN URL for.
+
+    Returns:
+        The CDN URL for the library.
+    """
+    return f"https://cdn.jsdelivr.net/npm/{lib}" + "/+esm"
+
+
+def load_dynamic_serializer():
+    """Load the serializer for dynamic components."""
+    # Causes a circular import, so we import here.
+    from reflex.components.component import Component
+
+    @serializer
+    def make_component(component: Component) -> str:
+        """Generate the code for a dynamic component.
+
+        Args:
+            component: The component to generate code for.
+
+        Returns:
+            The generated code
+        """
+        # Causes a circular import, so we import here.
+        from reflex.compiler import templates, utils
+
+        rendered_components = {}
+        # Include dynamic imports in the shared component.
+        if dynamic_imports := component._get_all_dynamic_imports():
+            rendered_components.update(
+                {dynamic_import: None for dynamic_import in dynamic_imports}
+            )
+
+        # Include custom code in the shared component.
+        rendered_components.update(
+            {code: None for code in component._get_all_custom_code()},
+        )
+
+        rendered_components[
+            templates.STATEFUL_COMPONENT.render(
+                tag_name="MySSRComponent",
+                memo_trigger_hooks=[],
+                component=component,
+            )
+        ] = None
+
+        libs_in_window = [
+            "react",
+            "@radix-ui/themes",
+        ]
+
+        imports = {}
+        for lib, names in component._get_all_imports().items():
+            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
+                )
+            ):
+                imports[get_cdn_url(lib)] = names
+            else:
+                imports[lib] = names
+
+        module_code_lines = templates.STATEFUL_COMPONENTS.render(
+            imports=utils.compile_imports(imports),
+            memoized_code="\n".join(rendered_components),
+        ).splitlines()[1:]
+
+        # Rewrite imports from `/` to destructure from window
+        for ix, line in enumerate(module_code_lines[:]):
+            if line.startswith("import "):
+                if 'from "/' in line:
+                    module_code_lines[ix] = (
+                        line.replace("import ", "const ", 1).replace(
+                            " from ", " = window['__reflex'][", 1
+                        )
+                        + "]"
+                    )
+                else:
+                    for lib in libs_in_window:
+                        if f'from "{lib}"' in line:
+                            module_code_lines[ix] = (
+                                line.replace("import ", "const ", 1)
+                                .replace(
+                                    f' from "{lib}"', f" = window.__reflex['{lib}']", 1
+                                )
+                                .replace(" as ", ": ")
+                            )
+            if line.startswith("export function"):
+                module_code_lines[ix] = line.replace(
+                    "export function", "export default function", 1
+                )
+
+        module_code_lines.insert(0, "const React = window.__reflex.react;")
+
+        return "//__reflex_evaluate\n" + "\n".join(module_code_lines)
+
+    @transform
+    def evaluate_component(js_string: Var[str]) -> Var[Component]:
+        """Evaluate a component.
+
+        Args:
+            js_string: The JavaScript string to evaluate.
+
+        Returns:
+            The evaluated JavaScript string.
+        """
+        unique_var_name = get_unique_variable_name()
+
+        return js_string._replace(
+            _js_expr=unique_var_name,
+            _var_type=Component,
+            merge_var_data=VarData.merge(
+                VarData(
+                    imports={
+                        f"/{constants.Dirs.STATE_PATH}": [
+                            imports.ImportVar(tag="evalReactComponent"),
+                        ],
+                        "react": [
+                            imports.ImportVar(tag="useState"),
+                            imports.ImportVar(tag="useEffect"),
+                        ],
+                    },
+                    hooks={
+                        f"const [{unique_var_name}, set_{unique_var_name}] = useState(null);": None,
+                        "useEffect(() => {"
+                        "let isMounted = true;"
+                        f"evalReactComponent({str(js_string)})"
+                        ".then((component) => {"
+                        "if (isMounted) {"
+                        f"set_{unique_var_name}(component);"
+                        "}"
+                        "});"
+                        "return () => {"
+                        "isMounted = false;"
+                        "};"
+                        "}"
+                        f", [{str(js_string)}]);": None,
+                    },
+                ),
+            ),
+        )

reflex/components/el/elements/forms.py

@@ -10,7 +10,7 @@ from jinja2 import Environment
 from reflex.components.el.element import Element
 from reflex.components.tags.tag import Tag
 from reflex.constants import Dirs, EventTriggers
-from reflex.event import EventChain, EventHandler
+from reflex.event import EventChain, EventHandler, prevent_default
 from reflex.utils.imports import ImportDict
 from reflex.vars import VarData
 from reflex.vars.base import LiteralVar, Var
@@ -148,6 +148,9 @@ class Form(BaseHTML):
         Returns:
             The form component.
         """
+        if "on_submit" not in props:
+            props["on_submit"] = prevent_default
+
         if "handle_submit_unique_name" in props:
             return super().create(*children, **props)
 

reflex/components/gridjs/datatable.py

@@ -124,7 +124,8 @@ class DataTable(Gridjs):
         if types.is_dataframe(type(self.data)):
             # If given a pandas df break up the data and columns
             data = serialize(self.data)
-            assert isinstance(data, dict), "Serialized dataframe should be a dict."
+            if not isinstance(data, dict):
+                raise ValueError("Serialized dataframe should be a dict.")
             self.columns = LiteralVar.create(data["columns"])
             self.data = LiteralVar.create(data["data"])
 

reflex/components/markdown/markdown.py

@@ -95,12 +95,16 @@ class Markdown(Component):
             *children: The children of the component.
             **props: The properties of the component.
 
+        Raises:
+            ValueError: If the children are not valid.
+
         Returns:
             The markdown component.
         """
-        assert (
-            len(children) == 1 and types._isinstance(children[0], Union[str, Var])
-        ), "Markdown component must have exactly one child containing the markdown source."
+        if len(children) != 1 or not types._isinstance(children[0], Union[str, Var]):
+            raise ValueError(
+                "Markdown component must have exactly one child containing the markdown source."
+            )
 
         # Update the base component map with the custom component map.
         component_map = {**get_base_component_map(), **props.pop("component_map", {})}
@@ -147,7 +151,7 @@ class Markdown(Component):
         Returns:
             The imports for the markdown component.
         """
-        from reflex.components.datadisplay.code import CodeBlock
+        from reflex.components.datadisplay.code import CodeBlock, Theme
         from reflex.components.radix.themes.typography.code import Code
 
         return [
@@ -173,8 +177,8 @@ class Markdown(Component):
                 component(_MOCK_ARG)._get_all_imports()  # type: ignore
                 for component in self.component_map.values()
             ],
-            CodeBlock.create(theme="light")._get_imports(),  # type: ignore,
-            Code.create()._get_imports(),  # type: ignore,
+            CodeBlock.create(theme=Theme.light)._get_imports(),
+            Code.create()._get_imports(),
         ]
 
     def get_component(self, tag: str, **props) -> Component:

reflex/components/markdown/markdown.pyi

@@ -93,6 +93,9 @@ class Markdown(Component):
             custom_attrs: custom attribute
             **props: The properties of the component.
 
+        Raises:
+            ValueError: If the children are not valid.
+
         Returns:
             The markdown component.
         """

reflex/components/radix/themes/components/progress.py

@@ -4,6 +4,7 @@ from typing import Literal
 
 from reflex.components.component import Component
 from reflex.components.core.breakpoints import Responsive
+from reflex.style import Style
 from reflex.vars.base import Var
 
 from ..base import LiteralAccentColor, RadixThemesComponent
@@ -38,6 +39,21 @@ class Progress(RadixThemesComponent):
     # The duration of the progress bar animation. Once the duration times out, the progress bar will start an indeterminate animation.
     duration: Var[str]
 
+    # The color of the progress bar fill animation.
+    fill_color: Var[str]
+
+    @staticmethod
+    def _color_selector(color: str) -> Style:
+        """Return a style object with the correct color and css selector.
+
+        Args:
+            color: Color of the fill part.
+
+        Returns:
+            Style: Style object with the correct css selector and color.
+        """
+        return Style({".rt-ProgressIndicator": {"background_color": color}})
+
     @classmethod
     def create(cls, *children, **props) -> Component:
         """Create a Progress component.
@@ -50,6 +66,12 @@ class Progress(RadixThemesComponent):
             The Progress Component.
         """
         props.setdefault("width", "100%")
+        if "fill_color" in props:
+            color = props.get("fill_color", "")
+            style = props.get("style", {})
+            style = style | cls._color_selector(color)
+            props["style"] = style
+
         return super().create(*children, **props)
 
 

reflex/components/radix/themes/components/progress.pyi

@@ -107,6 +107,7 @@ class Progress(RadixThemesComponent):
             ]
         ] = None,
         duration: Optional[Union[Var[str], str]] = None,
+        fill_color: Optional[Union[Var[str], str]] = None,
         style: Optional[Style] = None,
         key: Optional[Any] = None,
         id: Optional[Any] = None,
@@ -162,6 +163,7 @@ class Progress(RadixThemesComponent):
             high_contrast: Whether to render the progress bar with higher contrast color against background
             radius: Override theme radius for progress bar: "none" | "small" | "medium" | "large" | "full"
             duration: The duration of the progress bar animation. Once the duration times out, the progress bar will start an indeterminate animation.
+            fill_color: The color of the progress bar fill animation.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/components/segmented_control.py

@@ -23,6 +23,7 @@ class SegmentedControlRoot(RadixThemesComponent):
     # Variant of button: "classic" | "surface"
     variant: Var[Literal["classic", "surface"]]
 
+    # The type of the segmented control, either "single" for selecting one option or "multiple" for selecting multiple options.
     type: Var[Literal["single", "multiple"]]
 
     # Override theme color for button
@@ -34,8 +35,10 @@ class SegmentedControlRoot(RadixThemesComponent):
     # The default value of the segmented control.
     default_value: Var[Union[str, List[str]]]
 
+    # The current value of the segmented control.
     value: Var[Union[str, List[str]]]
 
+    # Handles the `onChange` event for the SegmentedControl component.
     on_change: EventHandler[lambda e0: [e0]]
 
     _rename_props = {"onChange": "onValueChange"}

reflex/components/radix/themes/components/segmented_control.pyi

@@ -161,9 +161,11 @@ class SegmentedControlRoot(RadixThemesComponent):
             *children: Child components.
             size: The size of the segmented control: "1" | "2" | "3"
             variant: Variant of button: "classic" | "surface"
+            type: The type of the segmented control, either "single" for selecting one option or "multiple" for selecting multiple options.
             color_scheme: Override theme color for button
             radius: The radius of the segmented control: "none" | "small" | "medium" | "large" | "full"
             default_value: The default value of the segmented control.
+            value: The current value of the segmented control.
             style: The style of the component.
             key: A unique key for the component.
             id: The id for the component.

reflex/components/radix/themes/layout/stack.py

@@ -33,7 +33,7 @@ class Stack(Flex):
         """
         # Apply the default classname
         given_class_name = props.pop("class_name", [])
-        if isinstance(given_class_name, str):
+        if not isinstance(given_class_name, list):
             given_class_name = [given_class_name]
         props["class_name"] = ["rx-Stack", *given_class_name]
 

reflex/components/recharts/cartesian.py

@@ -167,7 +167,7 @@ class ZAxis(Recharts):
 
     tag = "ZAxis"
 
-    alias = "RechartszAxis"
+    alias = "RechartsZAxis"
 
     # The key of data displayed in the axis.
     data_key: Var[Union[str, int]]

reflex/components/sonner/toast.py

@@ -17,7 +17,7 @@ from reflex.event import (
 from reflex.style import Style, resolved_color_mode
 from reflex.utils import format
 from reflex.utils.imports import ImportVar
-from reflex.utils.serializers import serialize, serializer
+from reflex.utils.serializers import serializer
 from reflex.vars import VarData
 from reflex.vars.base import LiteralVar, Var
 
@@ -281,8 +281,8 @@ class Toaster(Component):
         if message == "" and ("title" not in props or "description" not in props):
             raise ValueError("Toast message or title or description must be provided.")
         if props:
-            args = serialize(ToastProps(**props))  # type: ignore
-            toast = f"{toast_command}(`{message}`, {args})"
+            args = LiteralVar.create(ToastProps(**props))
+            toast = f"{toast_command}(`{message}`, {str(args)})"
         else:
             toast = f"{toast_command}(`{message}`)"
 

reflex/components/tags/iter_tag.py

@@ -114,6 +114,9 @@ class IterTag(Tag):
     def render_component(self) -> Component:
         """Render the component.
 
+        Raises:
+            ValueError: If the render function takes more than 2 arguments.
+
         Returns:
             The rendered component.
         """
@@ -132,7 +135,8 @@ class IterTag(Tag):
             component = self.render_fn(arg)
         else:
             # If the render function takes the index as an argument.
-            assert len(args) == 2
+            if len(args) != 2:
+                raise ValueError("The render function must take 2 arguments.")
             component = self.render_fn(arg, index)
 
         # Nested foreach components or cond must be wrapped in fragments.

reflex/config.py

@@ -158,7 +158,7 @@ class Config(Base):
     app_name: str
 
     # The log level to use.
-    loglevel: constants.LogLevel = constants.LogLevel.INFO
+    loglevel: constants.LogLevel = constants.LogLevel.DEFAULT
 
     # The port to run the frontend on. NOTE: When running in dev mode, the next available port will be used if this is taken.
     frontend_port: int = constants.DefaultPorts.FRONTEND_PORT
@@ -194,7 +194,7 @@ class Config(Base):
     cors_allowed_origins: List[str] = ["*"]
 
     # Tailwind config.
-    tailwind: Optional[Dict[str, Any]] = {}
+    tailwind: Optional[Dict[str, Any]] = {"plugins": ["@tailwindcss/typography"]}
 
     # Timeout when launching the gunicorn server. TODO(rename this to backend_timeout?)
     timeout: int = 120

reflex/constants/base.py

@@ -117,7 +117,9 @@ class Templates(SimpleNamespace):
     REFLEX_BUILD_POLL_URL = REFLEX_BUILD_BACKEND + "/api/init/{reflex_init_token}"
 
     # The URL to fetch the generation's reflex code
-    REFLEX_BUILD_CODE_URL = REFLEX_BUILD_BACKEND + "/api/gen/{generation_hash}"
+    REFLEX_BUILD_CODE_URL = (
+        REFLEX_BUILD_BACKEND + "/api/gen/{generation_hash}/refactored"
+    )
 
     class Dirs(SimpleNamespace):
         """Folders used by the template system of Reflex."""
@@ -171,6 +173,7 @@ class LogLevel(str, Enum):
     """The log levels."""
 
     DEBUG = "debug"
+    DEFAULT = "default"
     INFO = "info"
     WARNING = "warning"
     ERROR = "error"

reflex/constants/installer.py

@@ -54,6 +54,9 @@ class Bun(SimpleNamespace):
     # Path of the bunfig file
     CONFIG_PATH = "bunfig.toml"
 
+    # The environment variable to use the system installed bun.
+    USE_SYSTEM_VAR = "REFLEX_USE_SYSTEM_BUN"
+
 
 # FNM config.
 class Fnm(SimpleNamespace):
@@ -96,6 +99,9 @@ class Node(SimpleNamespace):
     # The default path where npm is installed.
     NPM_PATH = os.path.join(BIN_PATH, "npm")
 
+    # The environment variable to use the system installed node.
+    USE_SYSTEM_VAR = "REFLEX_USE_SYSTEM_NODE"
+
 
 class PackageJson(SimpleNamespace):
     """Constants used to build the package.json file."""
@@ -111,10 +117,11 @@ class PackageJson(SimpleNamespace):
     PATH = "package.json"
 
     DEPENDENCIES = {
+        "@babel/standalone": "7.25.3",
         "@emotion/react": "11.11.1",
         "axios": "1.6.0",
         "json5": "2.2.3",
-        "next": "14.0.1",
+        "next": "14.2.13",
         "next-sitemap": "4.1.8",
         "next-themes": "0.2.1",
         "react": "18.2.0",