feat: propagate VarData.module_code into page module code

news/6456.feature.md

@@ -0,0 +1 @@
+The page compiler now propagates `VarData.module_code` into the compiled page module, emitting the module-level JS snippets contributed by a page's Vars (and hook `VarData`) alongside its components' custom code.

packages/reflex-base/news/6456.feature.md

@@ -0,0 +1 @@
+Added a `module_code` field to `VarData`, letting a Var carry module-level JS snippets (top-of-file helpers and constants). Snippets are de-duplicated when var data is merged and exposed through `Component._iter_var_module_code` for the compiler to emit into the page module.

packages/reflex-base/src/reflex_base/components/component.py

@@ -357,6 +357,7 @@ def _clear_compile_caches(self) -> None:
             "_vars_cache",
             "_imports_cache",
             "_hooks_internal_cache",
+            "_var_module_code_cache",
             "_get_component_prop_property",
         ):
             attrs.pop(attr, None)
@@ -1733,6 +1734,45 @@ def _get_custom_code(self) -> str | None:
         """
         return None
 
+    def _iter_var_module_code(self) -> Iterator[str]:
+        """Yield module_code carried by Vars and hook-VarData on this component.
+
+        Per-component only — does not recurse into children or prop subtrees.
+        Callers that need a subtree walk (e.g. :meth:`_get_all_custom_code`)
+        recurse externally.
+
+        Yields:
+            module_code snippets contributed by this component's Vars.
+        """
+        yield from self._iter_var_only_module_code()
+        for hook_var_data in self._get_hooks_internal().values():
+            if hook_var_data is None:
+                continue
+            yield from hook_var_data.module_code
+        for hook_var_data in self._get_added_hooks().values():
+            if hook_var_data is None:
+                continue
+            yield from hook_var_data.module_code
+
+    def _iter_var_only_module_code(self) -> Iterator[str]:
+        """Yield module_code carried by this component's own Vars.
+
+        Covers Vars on props, style, and event-trigger args — but not the
+        VarData on hooks. Callers that already hold the component's hook dicts
+        collect hook module_code separately, avoiding a second uncached
+        :meth:`_get_added_hooks`.
+
+        The snippets are gathered during :meth:`_get_vars_hooks`'s Var walk and
+        cached, so this reuses that single walk rather than iterating the Vars
+        (and re-reading their VarData) again.
+
+        Yields:
+            module_code snippets from this component's Vars.
+        """
+        if "_var_module_code_cache" not in self.__dict__:
+            self._get_hooks_internal()
+        yield from self._var_module_code_cache
+
     def _get_all_custom_code(self) -> dict[str, None]:
         """Get custom code for the component and its children.
 
@@ -1755,6 +1795,9 @@ def _get_all_custom_code(self) -> dict[str, None]:
             for item in clz.add_custom_code(self):
                 code[item] = None
 
+        for snippet in self._iter_var_module_code():
+            code.setdefault(snippet, None)
+
         # Add the custom code for the children.
         for child in self.children:
             code |= child._get_all_custom_code()
@@ -1948,10 +1991,15 @@ def _get_ref_hook(self) -> Var | None:
     def _get_vars_hooks(self) -> dict[str, VarData | None]:
         """Get the hooks required by vars referenced in this component.
 
+        The Var module_code is gathered during this same walk and cached on
+        ``_var_module_code_cache`` so :meth:`_iter_var_only_module_code` reuses
+        it instead of iterating the Vars (and their VarData) a second time.
+
         Returns:
             The hooks for the vars.
         """
         vars_hooks = {}
+        var_module_code: list[str] = []
         for var in self._get_vars():
             var_data = var._get_all_var_data()
             if var_data is not None:
@@ -1965,6 +2013,8 @@ def _get_vars_hooks(self) -> dict[str, VarData | None]:
                 )
                 for component in var_data.components:
                     vars_hooks.update(component._get_all_hooks())
+                var_module_code.extend(var_data.module_code)
+        self._var_module_code_cache = tuple(var_module_code)
         return vars_hooks
 
     def _get_events_hooks(self) -> dict[str, VarData | None]:

packages/reflex-base/src/reflex_base/vars/base.py

@@ -141,6 +141,9 @@ class VarData:
     # Components that are part of this var
     components: tuple[BaseComponent, ...] = dataclasses.field(default_factory=tuple)
 
+    # Module-level JS snippets this var contributes to the page (top-of-file helpers/constants)
+    module_code: tuple[str, ...] = dataclasses.field(default_factory=tuple)
+
     def __init__(
         self,
         state: str = "",
@@ -150,6 +153,7 @@ def __init__(
         deps: list[Var] | None = None,
         position: Hooks.HookPosition | None = None,
         components: Iterable[BaseComponent] | None = None,
+        module_code: Iterable[str] | None = None,
     ):
         """Initialize the var data.
 
@@ -161,6 +165,7 @@ def __init__(
             deps: Dependencies of the var for useCallback.
             position: Position of the hook in the component.
             components: Components that are part of this var.
+            module_code: Module-level JS snippets this var contributes to the page.
         """
         if isinstance(hooks, str):
             hooks = [hooks]
@@ -176,6 +181,7 @@ def __init__(
         object.__setattr__(self, "deps", tuple(deps or []))
         object.__setattr__(self, "position", position or None)
         object.__setattr__(self, "components", tuple(components or []))
+        object.__setattr__(self, "module_code", tuple(module_code or []))
 
         if hooks and any(hooks.values()):
             # Merge our dependencies first, so they can be referenced.
@@ -188,6 +194,7 @@ def __init__(
                 object.__setattr__(self, "deps", merged_var_data.deps)
                 object.__setattr__(self, "position", merged_var_data.position)
                 object.__setattr__(self, "components", merged_var_data.components)
+                object.__setattr__(self, "module_code", merged_var_data.module_code)
 
     def old_school_imports(self) -> ImportDict:
         """Return the imports as a mutable dict.
@@ -259,6 +266,14 @@ def merge(*all: VarData | None) -> VarData | None:
             component for var_data in all_var_datas for component in var_data.components
         )
 
+        module_code = tuple(
+            dict.fromkeys(
+                snippet
+                for var_data in all_var_datas
+                for snippet in var_data.module_code
+            )
+        )
+
         return VarData(
             state=state,
             field_name=field_name,
@@ -267,6 +282,7 @@ def merge(*all: VarData | None) -> VarData | None:
             deps=deps,
             position=position,
             components=components,
+            module_code=module_code,
         )
 
     def __bool__(self) -> bool:
@@ -283,6 +299,7 @@ def __bool__(self) -> bool:
             or self.deps
             or self.position
             or self.components
+            or self.module_code
         )
 
     @classmethod

reflex/compiler/plugins/builtin.py

@@ -192,8 +192,18 @@ def leave_component(
 
         self._collect_component_custom_code(page_context.module_code, comp)
 
+        # Fetch once and reuse for both the module_code scan and page-hook
+        # aggregation; _get_added_hooks is uncached, so a second call recomputes.
+        hooks_internal = comp._get_hooks_internal()
+        added_hooks = comp._get_added_hooks()
+        self._collect_var_module_code(
+            page_context.module_code, comp, hooks_internal, added_hooks
+        )
+
         if not in_prop_tree:
-            self._collect_component_hooks(page_context.hooks, comp)
+            self._collect_component_hooks(
+                page_context.hooks, comp, hooks_internal, added_hooks
+            )
 
             if (
                 type(comp)._get_app_wrap_components
@@ -252,6 +262,7 @@ def _compiler_bind_leave_component(
         extend_imports = self._extend_imports
         collect_component_hooks = self._collect_component_hooks
         collect_component_custom_code = self._collect_component_custom_code
+        collect_var_module_code = self._collect_var_module_code
         collect_app_wrap_components = self._collect_app_wrap_components
         base_get_app_wrap_components = Component._get_app_wrap_components
         seen_app_wrap_methods: set[object] = set()
@@ -270,8 +281,14 @@ def leave_component(
 
             collect_component_custom_code(module_code, comp)
 
+            # Fetch once and reuse for both the module_code scan and page-hook
+            # aggregation; _get_added_hooks is uncached.
+            hooks_internal = comp._get_hooks_internal()
+            added_hooks = comp._get_added_hooks()
+            collect_var_module_code(module_code, comp, hooks_internal, added_hooks)
+
             if not in_prop_tree:
-                collect_component_hooks(hooks, comp)
+                collect_component_hooks(hooks, comp, hooks_internal, added_hooks)
 
                 app_wrap_method = type(comp)._get_app_wrap_components
                 if (
@@ -295,12 +312,19 @@ def leave_component(
     def _collect_component_hooks(
         page_hooks: dict[str, VarData | None],
         component: Component,
+        hooks_internal: dict[str, VarData | None],
+        added_hooks: dict[str, VarData | None],
     ) -> None:
-        """Collect hooks for one structural-tree component in legacy order."""
-        page_hooks.update(component._get_hooks_internal())
+        """Add one structural-tree component's hooks in legacy order.
+
+        ``hooks_internal`` and ``added_hooks`` are passed in (already fetched for
+        the module_code scan) rather than re-fetched, so each component pays a
+        single uncached ``_get_added_hooks``.
+        """
+        page_hooks.update(hooks_internal)
         if (user_hooks := component._get_hooks()) is not None:
             page_hooks[user_hooks] = None
-        page_hooks.update(component._get_added_hooks())
+        page_hooks.update(added_hooks)
 
     @staticmethod
     def _extend_imports(
@@ -329,6 +353,34 @@ def _collect_component_custom_code(
             for item in clz.add_custom_code(component):
                 module_code[item] = None
 
+    @staticmethod
+    def _collect_var_module_code(
+        module_code: dict[str, None],
+        component: Component,
+        hooks_internal: dict[str, VarData | None],
+        added_hooks: dict[str, VarData | None],
+    ) -> None:
+        """Collect module_code from this component's Vars and pre-fetched hooks.
+
+        ``hooks_internal`` and ``added_hooks`` are the dicts already fetched for
+        page-hook aggregation, reused here so each component avoids a second
+        uncached ``_get_added_hooks``. Per-component contract — the walker
+        re-enters each prop subtree with ``in_prop_tree=True`` so this helper
+        does not recurse, mirroring :meth:`_collect_component_custom_code`.
+        """
+        for snippet in component._iter_var_only_module_code():
+            module_code.setdefault(snippet, None)
+        for hook_var_data in hooks_internal.values():
+            if hook_var_data is None:
+                continue
+            for snippet in hook_var_data.module_code:
+                module_code.setdefault(snippet, None)
+        for hook_var_data in added_hooks.values():
+            if hook_var_data is None:
+                continue
+            for snippet in hook_var_data.module_code:
+                module_code.setdefault(snippet, None)
+
     def _collect_app_wrap_components(
         self,
         page_app_wrap_components: dict[tuple[int, str], Component],

reflex/compiler/utils.py

@@ -498,6 +498,8 @@ def _root_only_custom_code(component: Component) -> dict[str, None]:
     for clz in component._iter_parent_classes_with_method("add_custom_code"):
         for item in clz.add_custom_code(component):
             code[item] = None
+    for snippet in component._iter_var_module_code():
+        code.setdefault(snippet, None)
     return code