move state.js to jinja, related to reflex-dev#3738

Author: benedikt-bartscher

reflex/.templates/web/utils/state.js reflex/.templates/jinja/web/utils/state.js.jinja2

@@ -810,7 +810,7 @@ export const useEventLoop = (
         const vars = {};
         vars[storage_to_state_map[e.key]] = e.newValue;
         const event = Event(
-          `${state_name}.{{ update_vars_internal }}`,
+          `${state_name}.{{ const.update_vars_internal }}`,
           { vars: vars }
         );
         addEvents([event], e);
@@ -824,7 +824,7 @@ export const useEventLoop = (
   // Route after the initial page hydration.
   useEffect(() => {
     const change_start = () => {
-      const main_state_dispatch = dispatch["reflex___state____state"];
+      const main_state_dispatch = dispatch["{{ const.state_name }}"];
       if (main_state_dispatch !== undefined) {
         main_state_dispatch({ is_hydrated: false });
       }

reflex/compiler/compiler.py

@@ -126,6 +126,15 @@ def _compile_contexts(state: Optional[Type[BaseState]], theme: Component | None)
     )
 
 
+def _compile_state() -> str:
+    """Compile the state.
+
+    Returns:
+        The compiled state.
+    """
+    return templates.state().render()
+
+
 def _compile_page(
     component: BaseComponent,
     state: Type[BaseState] | None,
@@ -424,6 +433,18 @@ def compile_contexts(
     return output_path, _compile_contexts(state, theme)
 
 
+def compile_state() -> tuple[str, str]:
+    """Compile the state.
+
+    Returns:
+        The path and code of the compiled state.
+    """
+    output_path = utils.get_state_path()
+
+    code = _compile_state()
+    return output_path, code
+
+
 def compile_page(
     path: str, component: BaseComponent, state: Type[BaseState] | None
 ) -> tuple[str, str]:

reflex/compiler/templates.py

@@ -14,6 +14,7 @@ def __init__(self) -> None:
         from reflex.state import (
             FrontendEventExceptionState,
             OnLoadInternalState,
+            State,
             UpdateVarsInternalState,
         )
 
@@ -48,6 +49,7 @@ def __init__(self) -> None:
             "set_color_mode": constants.ColorMode.SET,
             "use_color_mode": constants.ColorMode.USE,
             "hydrate": constants.CompileVars.HYDRATE,
+            "state_name": State.get_name(),
             "on_load_internal": f"{OnLoadInternalState.get_name()}.on_load_internal",
             "update_vars_internal": f"{UpdateVarsInternalState.get_name()}.update_vars_internal",
             "frontend_exception_state": FrontendEventExceptionState.get_full_name(),
@@ -111,6 +113,15 @@ def context():
     return get_template("web/utils/context.js.jinja2")
 
 
+def state():
+    """Template for the state file.
+
+    Returns:
+        Template: The template for the state file.
+    """
+    return get_template("web/utils/state.js.jinja2")
+
+
 def tailwind_config():
     """Template for Tailwind config.
 

reflex/compiler/utils.py

@@ -399,6 +399,15 @@ def get_context_path() -> str:
     return str(get_web_dir() / (constants.Dirs.CONTEXTS_PATH + constants.Ext.JS))
 
 
+def get_state_path() -> str:
+    """Get the path of the state file.
+
+    Returns:
+        The path of the state module.
+    """
+    return str(get_web_dir() / (constants.Dirs.STATES_PATH + constants.Ext.JS))
+
+
 def get_components_path() -> str:
     """Get the path of the compiled components.
 

reflex/constants/base.py

@@ -35,6 +35,8 @@ class Dirs(SimpleNamespace):
     COMPONENTS_PATH = "/".join([UTILS, "components"])
     # The name of the contexts file.
     CONTEXTS_PATH = "/".join([UTILS, "context"])
+    # The name of the states file.
+    STATES_PATH = "/".join([UTILS, "state"])
     # The name of the output static directory.
     STATIC = "_static"
     # The name of the public html directory served at "/"

reflex/constants/compiler.py

@@ -1,7 +1,6 @@
 """Compiler variables."""
 
 import enum
-import os
 from enum import Enum
 from types import SimpleNamespace