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

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

@@ -768,7 +768,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);
@@ -782,7 +782,7 @@ export const useEventLoop = (
  // Route after the initial page hydration.
  useEffect(() => {
  const change_start = () => {
- const main_state_dispatch = dispatch["state"]
+ const main_state_dispatch = dispatch["{{ const.state_name }}"]
  if (main_state_dispatch !== undefined) {
  main_state_dispatch({ is_hydrated: false })
  }

reflex/app.py

@@ -943,6 +943,8 @@ def get_compilation_time() -> str:
  compile_results.append(
  compiler.compile_contexts(self.state, self.theme),
  )
+ # Compile the state
+ compile_results.append(compiler.compile_state())
  # Fix #2992 by removing the top-level appearance prop
  if self.theme is not None:
  self.theme.appearance = None

reflex/compiler/compiler.py

@@ -102,6 +102,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: Component,
  state: Type[BaseState],
@@ -400,6 +409,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: Component, state: Type[BaseState]
 ) -> 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

@@ -382,6 +382,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

@@ -31,6 +31,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 "/"