From 1e6a94fff4f7506f480104942226e20b51d94bd7 Mon Sep 17 00:00:00 2001
From: Fabio Kapsahili <fabio.kapsahili@axa.ch>
Date: Tue, 9 Jan 2024 12:21:26 +0100
Subject: [PATCH 1/2] Add basic react 18 support

---
 .../templates/react_print.html                | 36 ++++++++++++++-----
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/django_react_templatetags/templates/react_print.html b/django_react_templatetags/templates/react_print.html
index 008c7a9..317fba5 100644
--- a/django_react_templatetags/templates/react_print.html
+++ b/django_react_templatetags/templates/react_print.html
@@ -2,14 +2,34 @@
     {% for component in components %}
         {{ component.json_obj|json_script:component.data_identifier }}
         <script>
-            ReactDOM.{{ ssr_available|yesno:"hydrate,render" }}(
-                React.createElement({{ component.name }}, JSON.parse(document.getElementById("{{ component.data_identifier }}").textContent)),
-            {% if ssr_available and component.ssr_params.hypernova_id %}
-                document.querySelector('div[data-hypernova-id="{{ component.ssr_params.hypernova_id }}"]')
-            {% else %}
-                document.getElementById('{{ component.identifier }}')
-            {% endif %}
-            );
+            var react18VersionKey = "DjangoReactTemplatetags_ReactMajorVersion";
+
+            if (typeof window !== "undefined" && !window[react18VersionKey] && window.React) {
+                window[react18VersionKey] = parseInt(React.version.split(".")[0]);
+            }
+
+            if (window[react18VersionKey] >= 18) {
+                {% if ssr_available and component.ssr_params.hypernova_id %}
+                    const domNode = document.querySelector('div[data-hypernova-id="{{ component.ssr_params.hypernova_id }}"]');
+                    ReactDOM.hydrateRoot(domNode, 
+                        React.createElement({{ component.name }}, JSON.parse(document.getElementById("{{ component.data_identifier }}").textContent))
+                    );
+                {% else %}
+                    const domNode = document.getElementById('{{ component.identifier }}');
+                    ReactDOM.createRoot(domNode).render(
+                        React.createElement({{ component.name }}, JSON.parse(document.getElementById("{{ component.data_identifier }}").textContent))
+                    );
+                {% endif %}
+            } else {
+                ReactDOM.{{ ssr_available|yesno:"hydrate,render" }}(
+                    React.createElement({{ component.name }}, JSON.parse(document.getElementById("{{ component.data_identifier }}").textContent)),
+                    {% if ssr_available and component.ssr_params.hypernova_id %}
+                    document.querySelector('div[data-hypernova-id="{{ component.ssr_params.hypernova_id }}"]')
+                    {% else %}
+                    document.getElementById('{{ component.identifier }}')
+                    {% endif %}
+                    );
+            }
         </script>
     {% endfor %}
 {% endif %}

From 88901e1f198431b77011963517fceb9c9942d1c9 Mon Sep 17 00:00:00 2001
From: Fabio Kapsahili <fabio.kapsahili@axa.ch>
Date: Tue, 9 Jan 2024 14:38:40 +0100
Subject: [PATCH 2/2] Fix indents

---
 django_react_templatetags/templates/react_print.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/django_react_templatetags/templates/react_print.html b/django_react_templatetags/templates/react_print.html
index 317fba5..29eb75a 100644
--- a/django_react_templatetags/templates/react_print.html
+++ b/django_react_templatetags/templates/react_print.html
@@ -23,12 +23,12 @@
             } else {
                 ReactDOM.{{ ssr_available|yesno:"hydrate,render" }}(
                     React.createElement({{ component.name }}, JSON.parse(document.getElementById("{{ component.data_identifier }}").textContent)),
-                    {% if ssr_available and component.ssr_params.hypernova_id %}
+                {% if ssr_available and component.ssr_params.hypernova_id %}
                     document.querySelector('div[data-hypernova-id="{{ component.ssr_params.hypernova_id }}"]')
-                    {% else %}
+                {% else %}
                     document.getElementById('{{ component.identifier }}')
-                    {% endif %}
-                    );
+                {% endif %}
+                );
             }
         </script>
     {% endfor %}