reflex 0.5.3a2__tar.gz → 0.5.4__tar.gz

{reflex-0.5.3a2 → reflex-0.5.4}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: reflex
-Version: 0.5.3a2
+Version: 0.5.4
 Summary: Web apps in pure Python.
 Home-page: https://reflex.dev
 License: Apache-2.0

{reflex-0.5.3a2 → reflex-0.5.4}/pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "reflex"
-version = "0.5.3a2"
+version = "0.5.4"
 description = "Web apps in pure Python."
 license = "Apache-2.0"
 authors = [

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/.templates/apps/demo/code/webui/state.py

@@ -66,7 +66,8 @@ class State(State):
         del self.chats[self.current_chat]
         if len(self.chats) == 0:
             self.chats = DEFAULT_CHATS
-        self.current_chat = list(self.chats.keys())[0]
+        # set self.current_chat to the first chat.
+        self.current_chat = next(iter(self.chats))
         self.toggle_drawer()
 
     def set_chat(self, chat_name: str):
@@ -85,7 +86,7 @@ class State(State):
         Returns:
             The list of chat names.
         """
-        return list(self.chats.keys())
+        return [*self.chats]
 
     async def process_question(self, form_data: dict[str, str]):
         """Get the response from the API.

reflex-0.5.4/reflex/.templates/web/components/reflex/radix_themes_color_mode_provider.js

@@ -0,0 +1,21 @@
+import { useTheme } from "next-themes";
+import { useEffect, useState } from "react";
+import { ColorModeContext, defaultColorMode } from "/utils/context.js";
+
+export default function RadixThemesColorModeProvider({ children }) {
+  const { resolvedTheme, setTheme } = useTheme();
+  const [colorMode, setColorMode] = useState(defaultColorMode);
+
+  useEffect(() => {
+    setColorMode(resolvedTheme);
+  }, [resolvedTheme]);
+
+  const toggleColorMode = () => {
+    setTheme(resolvedTheme === "light" ? "dark" : "light");
+  };
+  return (
+    <ColorModeContext.Provider value={[colorMode, toggleColorMode]}>
+      {children}
+    </ColorModeContext.Provider>
+  );
+}

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/.templates/web/utils/state.js

@@ -358,6 +358,12 @@ export const connect = async (
   socket.current.on("connect_error", (error) => {
     setConnectErrors((connectErrors) => [connectErrors.slice(-9), error]);
   });
+
+  // When the socket disconnects reset the event_processing flag
+  socket.current.on("disconnect", () => {
+    event_processing = false;
+  });
+
   // On each received message, queue the updates and events.
   socket.current.on("event", (message) => {
     const update = JSON5.parse(message);

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/__init__.py

@@ -248,7 +248,12 @@ _MAPPING: dict = {
     "admin": ["AdminDash"],
     "app": ["App", "UploadFile"],
     "base": ["Base"],
-    "components.component": ["Component", "NoSSRComponent", "memo"],
+    "components.component": [
+        "Component",
+        "NoSSRComponent",
+        "memo",
+        "ComponentNamespace",
+    ],
     "components.el.elements.media": ["image"],
     "components.lucide": ["icon"],
     **COMPONENTS_BASE_MAPPING,
@@ -270,6 +275,7 @@ _MAPPING: dict = {
         "data_editor",
         "data_editor_theme",
     ],
+    "components.sonner.toast": ["toast"],
     "components.datadisplay.logo": ["logo"],
     "components.gridjs": ["data_table"],
     "components.moment": ["MomentDelta", "moment"],

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/__init__.pyi

@@ -24,6 +24,7 @@ from .base import Base as Base
 from .components.component import Component as Component
 from .components.component import NoSSRComponent as NoSSRComponent
 from .components.component import memo as memo
+from .components.component import ComponentNamespace as ComponentNamespace
 from .components.el.elements.media import image as image
 from .components.lucide import icon as icon
 from .components.base.fragment import fragment as fragment
@@ -143,6 +144,7 @@ from .components.core.upload import upload as upload
 from .components.datadisplay.code import code_block as code_block
 from .components.datadisplay.dataeditor import data_editor as data_editor
 from .components.datadisplay.dataeditor import data_editor_theme as data_editor_theme
+from .components.sonner.toast import toast as toast
 from .components.datadisplay.logo import logo as logo
 from .components.gridjs import data_table as data_table
 from .components.moment import MomentDelta as MomentDelta

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/app.py

@@ -707,11 +707,8 @@ class App(LifespanMixin, Base):
         page_imports = {
             i
             for i, tags in imports.items()
-            if i
-            not in [
-                *constants.PackageJson.DEPENDENCIES.keys(),
-                *constants.PackageJson.DEV_DEPENDENCIES.keys(),
-            ]
+            if i not in constants.PackageJson.DEPENDENCIES
+            and i not in constants.PackageJson.DEV_DEPENDENCIES
             and not any(i.startswith(prefix) for prefix in ["/", ".", "next/"])
             and i != ""
             and any(tag.install for tag in tags)

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/compiler/compiler.py

@@ -17,7 +17,7 @@ from reflex.components.component import (
 )
 from reflex.config import get_config
 from reflex.state import BaseState
-from reflex.style import LIGHT_COLOR_MODE
+from reflex.style import SYSTEM_COLOR_MODE
 from reflex.utils.exec import is_prod_mode
 from reflex.utils.imports import ImportVar
 from reflex.vars import Var
@@ -79,7 +79,7 @@ def _compile_contexts(state: Optional[Type[BaseState]], theme: Component | None)
     """
     appearance = getattr(theme, "appearance", None)
     if appearance is None:
-        appearance = LIGHT_COLOR_MODE
+        appearance = SYSTEM_COLOR_MODE
     return (
         templates.CONTEXT.render(
             initial_state=utils.compile_state(state),

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/components/chakra/base.py

@@ -65,7 +65,9 @@ class ChakraProvider(ChakraComponent):
             A new ChakraProvider component.
         """
         return super().create(
-            theme=Var.create("extendTheme(theme)", _var_is_local=False),
+            theme=Var.create(
+                "extendTheme(theme)", _var_is_local=False, _var_is_string=False
+            ),
         )
 
     def _get_imports(self) -> imports.ImportDict:

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/components/chakra/forms/checkbox.py

@@ -51,7 +51,7 @@ class Checkbox(ChakraComponent):
     name: Var[str]
 
     # The value of the input field when checked (use is_checked prop for a bool)
-    value: Var[str] = Var.create("true")  # type: ignore
+    value: Var[str] = Var.create("true", _var_is_string=True)  # type: ignore
 
     # The spacing between the checkbox and its label text (0.5rem)
     spacing: Var[str]

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/components/chakra/forms/pininput.py

@@ -122,7 +122,7 @@ class PinInput(ChakraComponent):
             if ref:
                 return (
                     f"const {ref} = {str(refs_declaration)}; "
-                    f"{str(Var.create_safe(ref).as_ref())} = {ref}"
+                    f"{str(Var.create_safe(ref, _var_is_string=False).as_ref())} = {ref}"
                 )
             return super()._get_ref_hook()
 

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/components/chakra/forms/rangeslider.py

@@ -80,7 +80,7 @@ class RangeSlider(ChakraComponent):
             if ref:
                 return (
                     f"const {ref} = Array.from({{length:2}}, () => useRef(null)); "
-                    f"{str(Var.create_safe(ref).as_ref())} = {ref}"
+                    f"{str(Var.create_safe(ref, _var_is_string=False).as_ref())} = {ref}"
                 )
             return super()._get_ref_hook()
 

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/components/chakra/navigation/link.py

@@ -25,7 +25,9 @@ class Link(ChakraComponent):
     text: Var[str]
 
     # What the link renders to.
-    as_: Var[str] = BaseVar.create(value="{NextLink}", _var_is_local=False)  # type: ignore
+    as_: Var[str] = BaseVar.create(
+        value="{NextLink}", _var_is_local=False, _var_is_string=False
+    )  # type: ignore
 
     # If true, the link will open in new tab.
     is_external: Var[bool]

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/components/component.py

@@ -319,7 +319,9 @@ class Component(BaseComponent, ABC):
             # Set default values for any props.
             if types._issubclass(field.type_, Var):
                 field.required = False
-                field.default = Var.create(field.default)
+                field.default = Var.create(
+                    field.default, _var_is_string=isinstance(field.default, str)
+                )
             elif types._issubclass(field.type_, EventHandler):
                 field.required = False
 
@@ -348,7 +350,10 @@ class Component(BaseComponent, ABC):
             "id": kwargs.get("id"),
             "children": children,
             **{
-                prop: Var.create(kwargs[prop])
+                prop: Var.create(
+                    kwargs[prop],
+                    _var_is_string=False if isinstance(kwargs[prop], str) else None,
+                )
                 for prop in self.get_initial_props()
                 if prop in kwargs
             },
@@ -360,7 +365,6 @@ class Component(BaseComponent, ABC):
         # Get the component fields, triggers, and props.
         fields = self.get_fields()
         component_specific_triggers = self.get_event_triggers()
-        triggers = component_specific_triggers.keys()
         props = self.get_props()
 
         # Add any events triggers.
@@ -370,13 +374,17 @@ class Component(BaseComponent, ABC):
 
         # Iterate through the kwargs and set the props.
         for key, value in kwargs.items():
-            if key.startswith("on_") and key not in triggers and key not in props:
+            if (
+                key.startswith("on_")
+                and key not in component_specific_triggers
+                and key not in props
+            ):
                 raise ValueError(
                     f"The {(comp_name := type(self).__name__)} does not take in an `{key}` event trigger. If {comp_name}"
                     f" is a third party component make sure to add `{key}` to the component's event triggers. "
                     f"visit https://reflex.dev/docs/wrapping-react/guide/#event-triggers for more info."
                 )
-            if key in triggers:
+            if key in component_specific_triggers:
                 # Event triggers are bound to event chains.
                 field_type = EventChain
             elif key in props:
@@ -392,7 +400,10 @@ class Component(BaseComponent, ABC):
                 passed_types = None
                 try:
                     # Try to create a var from the value.
-                    kwargs[key] = Var.create(value)
+                    kwargs[key] = Var.create(
+                        value,
+                        _var_is_string=False if isinstance(value, str) else None,
+                    )
 
                     # Check that the var type is not None.
                     if kwargs[key] is None:
@@ -417,7 +428,9 @@ class Component(BaseComponent, ABC):
                 if types.is_union(passed_type):
                     # We need to check all possible types in the union.
                     passed_types = (
-                        arg for arg in passed_type.__args__ if arg is not type(None)
+                        arg
+                        for arg in passed_type.__args__  # type: ignore
+                        if arg is not type(None)
                     )
                 if (
                     # If the passed var is a union, check if all possible types are valid.
@@ -436,10 +449,11 @@ class Component(BaseComponent, ABC):
                     )
 
             # Check if the key is an event trigger.
-            if key in triggers:
+            if key in component_specific_triggers:
                 # Temporarily disable full control for event triggers.
                 kwargs["event_triggers"][key] = self._create_event_chain(
-                    value=value, args_spec=component_specific_triggers[key]
+                    value=value,  # type: ignore
+                    args_spec=component_specific_triggers[key],
                 )
 
         # Remove any keys that were added as events.
@@ -519,13 +533,23 @@ class Component(BaseComponent, ABC):
                     events.append(event)
                 elif isinstance(v, Callable):
                     # Call the lambda to get the event chain.
-                    events.extend(call_event_fn(v, args_spec))
+                    result = call_event_fn(v, args_spec)
+                    if isinstance(result, Var):
+                        raise ValueError(
+                            f"Invalid event chain: {v}. Cannot use a Var-returning "
+                            "lambda inside an EventChain list."
+                        )
+                    events.extend(result)
                 else:
                     raise ValueError(f"Invalid event: {v}")
 
         # If the input is a callable, create an event chain.
         elif isinstance(value, Callable):
-            events = call_event_fn(value, args_spec)
+            result = call_event_fn(value, args_spec)
+            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
 
         # Otherwise, raise an error.
         else:
@@ -659,7 +683,9 @@ class Component(BaseComponent, ABC):
             # Add ref to element if `id` is not None.
             ref = self.get_ref()
             if ref is not None:
-                props["ref"] = Var.create(ref, _var_is_local=False)
+                props["ref"] = Var.create(
+                    ref, _var_is_local=False, _var_is_string=False
+                )
         else:
             props = props.copy()
 
@@ -1078,7 +1104,9 @@ class Component(BaseComponent, ABC):
                 vars.append(comp_prop)
             elif isinstance(comp_prop, str):
                 # Collapse VarData encoded in f-strings.
-                var = Var.create_safe(comp_prop)
+                var = Var.create_safe(
+                    comp_prop, _var_is_string=isinstance(comp_prop, str)
+                )
                 if var._var_data is not None:
                     vars.append(var)
 
@@ -1375,7 +1403,7 @@ class Component(BaseComponent, ABC):
         """
         ref = self.get_ref()
         if ref is not None:
-            return f"const {ref} = useRef(null); {str(Var.create_safe(ref).as_ref())} = {ref};"
+            return f"const {ref} = useRef(null); {str(Var.create_safe(ref, _var_is_string=False).as_ref())} = {ref};"
 
     def _get_vars_hooks(self) -> dict[str, None]:
         """Get the hooks required by vars referenced in this component.
@@ -2134,7 +2162,7 @@ class StatefulComponent(BaseComponent):
 
             # Store the memoized function name and hook code for this event trigger.
             trigger_memo[event_trigger] = (
-                Var.create_safe(memo_name)._replace(
+                Var.create_safe(memo_name, _var_is_string=False)._replace(
                     _var_type=EventChain, merge_var_data=memo_var_data
                 ),
                 f"const {memo_name} = useCallback({rendered_chain}, [{', '.join(var_deps)}])",

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/components/core/banner.py

@@ -132,7 +132,8 @@ useEffect(() => {{
         toast.dismiss("{toast_id}");
         setUserDismissed(false);  // after reconnection reset dismissed state
     }}
-}}, [{connect_errors}]);"""
+}}, [{connect_errors}]);""",
+            _var_is_string=False,
         )
 
         hook._var_data = VarData.merge(  # type: ignore

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/components/core/client_side_routing.py

@@ -14,7 +14,7 @@ from reflex.components.component import Component
 from reflex.components.core.cond import cond
 from reflex.vars import Var
 
-route_not_found: Var = Var.create_safe(constants.ROUTE_NOT_FOUND)
+route_not_found: Var = Var.create_safe(constants.ROUTE_NOT_FOUND, _var_is_string=False)
 
 
 class ClientSideRouting(Component):
@@ -23,13 +23,13 @@ class ClientSideRouting(Component):
     library = "/utils/client_side_routing"
     tag = "useClientSideRouting"
 
-    def _get_hooks(self) -> str:
+    def add_hooks(self) -> list[str]:
         """Get the hooks to render.
 
         Returns:
             The useClientSideRouting hook.
         """
-        return f"const {constants.ROUTE_NOT_FOUND} = {self.tag}()"
+        return [f"const {constants.ROUTE_NOT_FOUND} = {self.tag}()"]
 
     def render(self) -> str:
         """Render the component.

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/components/core/client_side_routing.pyi

@@ -15,6 +15,7 @@ from reflex.vars import Var
 route_not_found: Var
 
 class ClientSideRouting(Component):
+    def add_hooks(self) -> list[str]: ...
     def render(self) -> str: ...
     @overload
     @classmethod

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/components/core/debounce.py

@@ -99,7 +99,9 @@ class DebounceInput(Component):
             props["class_name"] = f"{props.get('class_name', '')} {child.class_name}"
         child_ref = child.get_ref()
         if props.get("input_ref") is None and child_ref:
-            props["input_ref"] = Var.create_safe(child_ref, _var_is_local=False)
+            props["input_ref"] = Var.create_safe(
+                child_ref, _var_is_local=False, _var_is_string=False
+            )
             props["id"] = child.id
 
         # Set the child element to wrap, including any imports/hooks from the child.

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/components/core/foreach.py

@@ -60,7 +60,7 @@ class Foreach(Component):
                 deprecation_version="0.5.0",
                 removal_version="0.6.0",
             )
-        iterable = Var.create_safe(iterable)
+        iterable = Var.create_safe(iterable, _var_is_string=False)
         if iterable._var_type == Any:
             raise ForeachVarError(
                 f"Could not foreach over var `{iterable._var_full_name}` of type Any. "

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/components/core/upload.py

@@ -119,6 +119,7 @@ def get_upload_dir() -> Path:
 
 uploaded_files_url_prefix: Var = Var.create_safe(
     "${getBackendURL(env.UPLOAD)}",
+    _var_is_string=False,
     _var_data=VarData(
         imports={
             f"/{Dirs.STATE_PATH}": [imports.ImportVar(tag="getBackendURL")],
@@ -230,7 +231,7 @@ class Upload(MemoizationLeaf):
             key: value for key, value in props.items() if key in supported_props
         }
         # The file input to use.
-        upload = Input.create(type_="file")
+        upload = Input.create(type="file")
         upload.special_props = {
             BaseVar(_var_name="{...getInputProps()}", _var_type=None)
         }

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/components/datadisplay/code.py

@@ -504,10 +504,13 @@ class CodeBlock(Component):
             style=Var.create(
                 format.to_camel_case(f"{predicate}{qmark}{value.replace('`', '')}"),
                 _var_is_local=False,
+                _var_is_string=False,
             )
         ).remove_props("theme", "code")
         if self.code is not None:
-            out.special_props.add(Var.create_safe(f"children={str(self.code)}"))
+            out.special_props.add(
+                Var.create_safe(f"children={str(self.code)}", _var_is_string=False)
+            )
         return out
 
     @staticmethod

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/components/datadisplay/dataeditor.py

@@ -252,13 +252,20 @@ class DataEditor(NoSSRComponent):
             "on_column_resize": lambda col, width: [col, width],
         }
 
-    def _get_hooks(self) -> str | None:
+    def add_hooks(self) -> list[str]:
+        """Get the hooks to render.
+
+        Returns:
+            The hooks to render.
+        """
         # Define the id of the component in case multiple are used in the same page.
         editor_id = get_unique_variable_name()
 
         # Define the name of the getData callback associated with this component and assign to get_cell_content.
         data_callback = f"getData_{editor_id}"
-        self.get_cell_content = Var.create(data_callback, _var_is_local=False)  # type: ignore
+        self.get_cell_content = Var.create(
+            data_callback, _var_is_local=False, _var_is_string=False
+        )  # type: ignore
 
         code = [f"function {data_callback}([col, row])" "{"]
 
@@ -272,7 +279,7 @@ class DataEditor(NoSSRComponent):
             ]
         )
 
-        return "\n".join(code)
+        return ["\n".join(code)]
 
     @classmethod
     def create(cls, *children, **props) -> Component:
@@ -296,11 +303,7 @@ class DataEditor(NoSSRComponent):
 
         # If rows is not provided, determine from data.
         if rows is None:
-            props["rows"] = (
-                data.length()  # BaseVar.create(value=f"{data}.length()", is_local=False)
-                if isinstance(data, Var)
-                else len(data)
-            )
+            props["rows"] = data.length() if isinstance(data, Var) else len(data)
 
         if not isinstance(columns, Var) and len(columns):
             if (

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/components/datadisplay/dataeditor.pyi

@@ -81,6 +81,7 @@ class DataEditorTheme(Base):
 
 class DataEditor(NoSSRComponent):
     def get_event_triggers(self) -> Dict[str, Callable]: ...
+    def add_hooks(self) -> list[str]: ...
     @overload
     @classmethod
     def create(  # type: ignore

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/components/el/elements/forms.py

@@ -17,7 +17,7 @@ from reflex.vars import BaseVar, Var
 
 from .base import BaseHTML
 
-FORM_DATA = Var.create("form_data")
+FORM_DATA = Var.create("form_data", _var_is_string=False)
 HANDLE_SUBMIT_JS_JINJA2 = Environment().from_string(
     """
     const handleSubmit_{{ handle_submit_unique_name }} = useCallback((ev) => {
@@ -181,18 +181,25 @@ class Form(BaseHTML):
             },
         )
 
-    def _get_hooks(self) -> str | None:
+    def add_hooks(self) -> list[str]:
+        """Add hooks for the form.
+
+        Returns:
+            The hooks for the form.
+        """
         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,
-            field_ref_mapping=str(Var.create_safe(self._get_form_refs())),
-            on_submit_event_chain=format_event_chain(
-                self.event_triggers[EventTriggers.ON_SUBMIT]
-            ),
-            reset_on_submit=self.reset_on_submit,
-        )
+            return []
+        return [
+            HANDLE_SUBMIT_JS_JINJA2.render(
+                handle_submit_unique_name=self.handle_submit_unique_name,
+                form_data=FORM_DATA,
+                field_ref_mapping=str(Var.create_safe(self._get_form_refs())),
+                on_submit_event_chain=format_event_chain(
+                    self.event_triggers[EventTriggers.ON_SUBMIT]
+                ),
+                reset_on_submit=self.reset_on_submit,
+            )
+        ]
 
     def _render(self) -> Tag:
         render_tag = super()._render()
@@ -214,17 +221,19 @@ class Form(BaseHTML):
             # when ref start with refs_ it's an array of refs, so we need different method
             # to collect data
             if ref.startswith("refs_"):
-                ref_var = Var.create_safe(ref[:-3]).as_ref()
+                ref_var = Var.create_safe(ref[:-3], _var_is_string=False).as_ref()
                 form_refs[ref[5:-3]] = Var.create_safe(
                     f"getRefValues({str(ref_var)})",
                     _var_is_local=False,
+                    _var_is_string=False,
                     _var_data=ref_var._var_data,
                 )
             else:
-                ref_var = Var.create_safe(ref).as_ref()
+                ref_var = Var.create_safe(ref, _var_is_string=False).as_ref()
                 form_refs[ref[4:]] = Var.create_safe(
                     f"getRefValue({str(ref_var)})",
                     _var_is_local=False,
+                    _var_is_string=False,
                     _var_data=ref_var._var_data,
                 )
         return form_refs
@@ -623,6 +632,7 @@ class Textarea(BaseHTML):
                 on_key_down=Var.create_safe(
                     f"(e) => enterKeySubmitOnKeyDown(e, {self.enter_key_submit._var_name_unwrapped})",
                     _var_is_local=False,
+                    _var_is_string=False,
                     _var_data=self.enter_key_submit._var_data,
                 )
             )
@@ -631,6 +641,7 @@ class Textarea(BaseHTML):
                 on_input=Var.create_safe(
                     f"(e) => autoHeightOnInput(e, {self.auto_height._var_name_unwrapped})",
                     _var_is_local=False,
+                    _var_is_string=False,
                     _var_data=self.auto_height._var_data,
                 )
             )

{reflex-0.5.3a2 → reflex-0.5.4}/reflex/components/el/elements/forms.pyi

@@ -19,7 +19,7 @@ from reflex.utils.format import format_event_chain
 from reflex.vars import BaseVar, Var
 from .base import BaseHTML
 
-FORM_DATA = Var.create("form_data")
+FORM_DATA = Var.create("form_data", _var_is_string=False)
 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 }}\n\n        if ({{ reset_on_submit }}) {\n            $form.reset()\n        }\n    })\n    "
 )
@@ -581,6 +581,7 @@ class Form(BaseHTML):
             The form component.
         """
         ...
+    def add_hooks(self) -> list[str]: ...
 
 class Input(BaseHTML):
     def get_event_triggers(self) -> Dict[str, Any]: ...