From 79fc10957d62b30a85db838e82793cb54645d207 Mon Sep 17 00:00:00 2001
From: Benedikt Bartscher <bb@senbax.de>
Date: Sun, 4 Aug 2024 22:36:56 +0200
Subject: [PATCH] move state.js to jinja, related to #3738

---
 .../web/utils/state.js.jinja2}                |  4 ++--
 reflex/compiler/compiler.py                   | 21 +++++++++++++++++++
 reflex/compiler/templates.py                  | 11 ++++++++++
 reflex/compiler/utils.py                      |  9 ++++++++
 reflex/constants/base.py                      |  2 ++
 reflex/constants/compiler.py                  |  1 -
 6 files changed, 45 insertions(+), 3 deletions(-)
 rename reflex/.templates/{web/utils/state.js => jinja/web/utils/state.js.jinja2} (99%)

diff --git a/reflex/.templates/web/utils/state.js b/reflex/.templates/jinja/web/utils/state.js.jinja2
similarity index 99%
rename from reflex/.templates/web/utils/state.js
rename to reflex/.templates/jinja/web/utils/state.js.jinja2
index b696f39ac..ef92ba35a 100644
--- a/reflex/.templates/web/utils/state.js
+++ b/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 });
       }
diff --git a/reflex/compiler/compiler.py b/reflex/compiler/compiler.py
index 4122a0938..998b6fc8b 100644
--- a/reflex/compiler/compiler.py
+++ b/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]:
diff --git a/reflex/compiler/templates.py b/reflex/compiler/templates.py
index debb20a3d..aa7628bb8 100644
--- a/reflex/compiler/templates.py
+++ b/reflex/compiler/templates.py
@@ -14,6 +14,7 @@ class ReflexJinjaEnvironment(Environment):
         from reflex.state import (
             FrontendEventExceptionState,
             OnLoadInternalState,
+            State,
             UpdateVarsInternalState,
         )
 
@@ -48,6 +49,7 @@ class ReflexJinjaEnvironment(Environment):
             "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.
 
diff --git a/reflex/compiler/utils.py b/reflex/compiler/utils.py
index 29398da87..ad6933e63 100644
--- a/reflex/compiler/utils.py
+++ b/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.
 
diff --git a/reflex/constants/base.py b/reflex/constants/base.py
index 6ec73cdf0..2a1db1ac2 100644
--- a/reflex/constants/base.py
+++ b/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 "/"
diff --git a/reflex/constants/compiler.py b/reflex/constants/compiler.py
index 0754af624..3fdbf2c48 100644
--- a/reflex/constants/compiler.py
+++ b/reflex/constants/compiler.py
@@ -1,7 +1,6 @@
 """Compiler variables."""
 
 import enum
-import os
 from enum import Enum
 from types import SimpleNamespace