Output warning if the component HTML doesn't appear to be well formed.

Author: adamghill

django_unicorn/components/unicorn_template_response.py

@@ -1,4 +1,6 @@
 import logging
+import re
+from collections import deque
 
 from django.template.response import TemplateResponse
 
@@ -19,6 +21,45 @@
 logger = logging.getLogger(__name__)
 
 
+# https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
+EMPTY_ELEMENTS = (
+    "<area>",
+    "<base>",
+    "<br>",
+    "<col>",
+    "<embed>",
+    "<hr>",
+    "<img>",
+    "<input>",
+    "<link>",
+    "<meta>",
+    "<param>",
+    "<source>",
+    "<track>",
+    "<wbr>",
+)
+
+
+def is_html_well_formed(html: str) -> bool:
+    """
+    Whether the passed-in HTML is missing any closing elements which can cause issues when rendering.
+    """
+
+    tag_list = re.split("(<[^>!]*>)", html)[1::2]
+    stack = deque()
+
+    for tag in tag_list:
+        if "/" not in tag:
+            cleaned_tag = re.sub(r"(<(\w+)[^>!]*>)", r"<\2>", tag)
+
+            if cleaned_tag not in EMPTY_ELEMENTS:
+                stack.append(cleaned_tag)
+        elif len(stack) > 0 and (tag.replace("/", "") == stack[len(stack) - 1]):
+            stack.pop()
+
+    return len(stack) == 0
+
+
 class UnsortedAttributes(HTMLFormatter):
     """
     Prevent beautifulsoup from re-ordering attributes.
@@ -68,6 +109,11 @@ def render(self):
 
         content = response.content.decode("utf-8")
 
+        if not is_html_well_formed(content):
+            logger.warning(
+                f"The HTML in '{self.component.component_name}' appears to be missing a closing tag. That can potentially cause errors in Unicorn."
+            )
+
         frontend_context_variables = self.component.get_frontend_context_variables()
         frontend_context_variables_dict = orjson.loads(frontend_context_variables)
         checksum = generate_checksum(orjson.dumps(frontend_context_variables_dict))

example/project/settings.py

@@ -145,5 +145,10 @@
             "level": "INFO",
             "propagate": False,
         },
+        "django_unicorn": {
+            "handlers": ["console"],
+            "level": "DEBUG",
+            "propagate": False,
+        },
     },
 }

tests/components/test_is_html_well_formed.py

@@ -0,0 +1,123 @@
+from django_unicorn.components.unicorn_template_response import is_html_well_formed
+
+
+def test_is_html_well_formed():
+    html = """
+<div>
+    something
+</div>
+    """
+    actual = is_html_well_formed(html)
+
+    assert actual is True
+
+
+def test_is_html_well_formed_comment():
+    html = """
+
+<!-- some comment here -->
+
+<div>
+    something
+</div>
+    """
+    actual = is_html_well_formed(html)
+
+    assert actual is True
+
+
+def test_is_html_well_formed_p():
+    html = """
+
+<p>
+    something
+    <br />
+</p>
+    """
+    actual = is_html_well_formed(html)
+
+    assert actual is True
+
+
+def test_is_html_well_formed_missing_internal():
+    html = """
+<p>
+<div>
+    something
+    <br />
+</p>
+    """
+    actual = is_html_well_formed(html)
+
+    assert actual is False
+
+
+def test_is_html_well_formed_multiple():
+    html = """
+<div>
+    <div>something</div>
+</div>
+    """
+    actual = is_html_well_formed(html)
+
+    assert actual is True
+
+
+def test_is_html_well_formed_missing():
+    html = """
+<div>
+    something
+
+    """
+    actual = is_html_well_formed(html)
+
+    assert actual is False
+
+
+def test_is_html_well_formed_invalid():
+    html = """
+<div>
+    something
+</di>
+
+    """
+    actual = is_html_well_formed(html)
+
+    assert actual is False
+
+
+def test_is_html_well_formed_no_slash():
+    html = """
+<div>
+    something
+<div>
+
+    """
+    actual = is_html_well_formed(html)
+
+    assert actual is False
+
+
+def test_is_well_formed_more():
+    html = """
+<div>
+  <button unicorn:click="$reset">Reset the component</button>
+  <button onclick="document.getElementById('name').value = 'asdf';">Plain JS set value on key1</button>
+  <button onclick="Unicorn.trigger('unicorn.components.hello_world.HelloWorldView', 'key1')">Trigger key1</button>
+  <br />
+  <br />
+
+  <label></label>
+  <input unicorn:model="name" type="text" id="name" unicorn:key="key1">
+
+  Hello, {{ name|default:'World' }}!
+
+  <div>
+    Request path context variable: '{{ request.path }}'
+  </div>
+</div>
+    """
+
+    actual = is_html_well_formed(html)
+
+    assert actual is True