From 0300f81c3e9834934b3191585691f0c97002a4e7 Mon Sep 17 00:00:00 2001
From: Lendemor <thomas.brandeho@gmail.com>
Date: Wed, 18 Dec 2024 15:34:46 +0100
Subject: [PATCH] use macros for rendering

---
 .../.templates/jinja/web/pages/_app.js.jinja2 | 14 +----
 .../web/pages/custom_component.js.jinja2      | 14 +----
 .../jinja/web/pages/macros.js.jinja2          | 54 +++++++++++++++++++
 .../web/pages/stateful_component.js.jinja2    | 20 ++-----
 4 files changed, 61 insertions(+), 41 deletions(-)
 create mode 100644 reflex/.templates/jinja/web/pages/macros.js.jinja2

diff --git a/reflex/.templates/jinja/web/pages/_app.js.jinja2 b/reflex/.templates/jinja/web/pages/_app.js.jinja2
index fcc9b2bc3..40e31dee6 100644
--- a/reflex/.templates/jinja/web/pages/_app.js.jinja2
+++ b/reflex/.templates/jinja/web/pages/_app.js.jinja2
@@ -1,4 +1,5 @@
 {% extends "web/pages/base_page.js.jinja2" %}
+{% from "web/pages/macros.js.jinja2" import renderHooks %}
 
 {% block early_imports %}
 import '$/styles/styles.css'
@@ -18,18 +19,7 @@ import * as {{library_alias}} from "{{library_path}}";
 
 {% block export %}
 function AppWrap({children}) {
-
-  {% for hook, data in hooks if data and data.position and data.position == const.hook_position.INTERNAL %}
-  {{ hook }}
-  {% endfor %}
-
-  {% for hook, data in hooks if not data or (not data.position or data.position == const.hook_position.PRE_TRIGGER) %}
-  {{ hook }}
-  {% endfor %}
-
-  {% for hook, data in hooks if data and data.position and data.position == const.hook_position.POST_TRIGGER %}
-  {{ hook }}
-  {% endfor %}
+  {{ renderHooks(hooks) }}
 
   return (
     {{utils.render(render, indent_width=0)}}
diff --git a/reflex/.templates/jinja/web/pages/custom_component.js.jinja2 b/reflex/.templates/jinja/web/pages/custom_component.js.jinja2
index 779584452..a57bb87da 100644
--- a/reflex/.templates/jinja/web/pages/custom_component.js.jinja2
+++ b/reflex/.templates/jinja/web/pages/custom_component.js.jinja2
@@ -1,5 +1,5 @@
 {% extends "web/pages/base_page.js.jinja2" %}
-
+{% from "web/pages/macros.js.jinja2" import renderHooks %}
 {% block export %}
 {% for component in components %}
 
@@ -8,17 +8,7 @@
 {% endfor %}
 
 export const {{component.name}} = memo(({ {{-component.props|join(", ")-}} }) => {
-    {% for hook, data in component.hooks if data and data.position and data.position == const.hook_position.INTERNAL %}
-    {{ hook }}
-    {% endfor %}
-
-    {% for hook, data in component.hooks if not data or (not data.position or data.position == const.hook_position.PRE_TRIGGER) %}
-    {{ hook }}
-    {% endfor %}
-
-    {% for hook, data in component.hooks if data and data.position and data.position == const.hook_position.POST_TRIGGER %}
-    {{ hook }}
-    {% endfor %}
+    {{ renderHooks(component.hooks.items()) }}
 
     return(
         {{utils.render(component.render)}}
diff --git a/reflex/.templates/jinja/web/pages/macros.js.jinja2 b/reflex/.templates/jinja/web/pages/macros.js.jinja2
new file mode 100644
index 000000000..9e3f29510
--- /dev/null
+++ b/reflex/.templates/jinja/web/pages/macros.js.jinja2
@@ -0,0 +1,54 @@
+{% macro sortHooks(hooks) %}
+    {% set internal_hooks = [] %}
+    {% set pre_trigger_hooks = [] %}
+    {% set post_trigger_hooks = [] %}
+
+    {% for hook, data in hooks %}
+        {% if data and data.position and data.position == const.hook_position.INTERNAL %}
+            {% set internal_hooks = internal_hooks + [hook] %}
+        {% elif data and data.position and data.position == const.hook_position.POST_TRIGGER %}
+            {% set post_trigger_hooks = post_trigger_hooks+ [hook] %}
+        {% else %}
+            {% set pre_trigger_hooks = pre_trigger_hooks + [hook] %}
+        {% endif %}
+    {% endfor %}
+{% endmacro %}
+
+{% macro renderHooks(hooks) %}
+  {{ sortHooks(hooks) }}
+
+  {# Render the grouped hooks #}
+  {% for hook in internal_hooks %}
+  {{ hook }}
+  {% endfor %}
+
+  {% for hook in pre_trigger_hooks %}
+  {{ hook }}
+  {% endfor %}
+
+  {% for hook in post_trigger_hooks %}
+  {{ hook }}
+  {% endfor %}
+{% endmacro %}
+
+{% macro renderHooksWithMemo(hooks, memo)%}
+  {{ sortHooks(hooks) }}
+  
+  {# Render the grouped hooks #}
+  {% for hook in internal_hooks %}
+  {{ hook }}
+  {% endfor %}
+
+  {% for hook in pre_trigger_hooks %}
+  {{ hook }}
+  {% endfor %}
+
+  {% for hook in memo %}
+  {{ hook }}
+  {% endfor %}
+
+  {% for hook in post_trigger_hooks %}
+  {{ hook }}
+  {% endfor %}
+
+{% endmacro %}
\ No newline at end of file
diff --git a/reflex/.templates/jinja/web/pages/stateful_component.js.jinja2 b/reflex/.templates/jinja/web/pages/stateful_component.js.jinja2
index dab3707a7..1ed7323b1 100644
--- a/reflex/.templates/jinja/web/pages/stateful_component.js.jinja2
+++ b/reflex/.templates/jinja/web/pages/stateful_component.js.jinja2
@@ -1,24 +1,10 @@
 {% import 'web/pages/utils.js.jinja2' as utils %}
-
+{% from 'web/pages/macros.js.jinja2' import renderHooksWithMemo %}
 {% set all_hooks = component._get_all_hooks().items() %}
 
 export function {{tag_name}} () {
-  {% for hook, data in all_hooks if data and data.position and data.position == const.hook_position.INTERNAL %}
-  {{ hook }}
-  {% endfor %}
-
-  {% for hook, data in all_hooks if not data or (not data.position or data.position == const.hook_position.PRE_TRIGGER) %}
-  {{ hook }}
-  {% endfor %}
-
-  {% for hook in memo_trigger_hooks %}
-  {{ hook }}
-  {% endfor %}
-
-  {% for hook, data in all_hooks if data and data.position and data.position == const.hook_position.POST_TRIGGER %}
-  {{ hook }}
-  {% endfor %}
-
+  {{ renderHooksWithMemo(all_hooks, memo_trigger_hooks) }}
+  
   return (
     {{utils.render(component.render(), indent_width=0)}}
   )