Support dj-value attribute.

Author: adamghill

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## 0.27.0-dev
+
+- Add `django-compressor` integration.
+- Add `dj-value` attribute for rendering Django variables as an element's inner content.
+
 ## 0.26.0
 
 - Add `get_template_loaders` for easier `TEMPLATES` configuration in `settings.py`.

README.md

@@ -159,6 +159,12 @@
   Else
 </div>  <!-- </div>{% endif %} -->
 ```
+
+```html
+<!-- value-attribute.html -->
+<div dj-value="request.user">  <!-- <div>{{ request.user }}</div> -->
+</div>
+```
 <!-- readme-examples-end -->
 
 ## 📖 Documentation

docs/source/changelog.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 0.27.0-dev
+
+- Add `dj-value` attribute for rendering Django variables as an element's inner content.
+
 ## 0.26.0
 
 - Add `get_template_loaders` for easier `TEMPLATES` configuration in `settings.py`.

docs/source/tag-attributes.md

@@ -63,4 +63,44 @@ The `dj-angles` approach is shown first and then the equivalent Django Template
   else
 </div>
 {% endif %}
-```
+```
+
+## `value`
+
+```html
+<div dj-value="request.user"></div>
+```
+
+```html
+<div>{{ request.user }}</div>
+```
+
+`dj-value` replaces the element's inner content with the value wrapped in `{{ }}`. It can be combined with `dj-if` to conditionally render a value:
+
+```html
+<div dj-if="is_authenticated" dj-value="request.user"></div>
+```
+
+```html
+{% if is_authenticated %}<div>{{ request.user }}</div>{% endif %}
+```
+
+Filters and expressions are passed through as-is:
+
+```html
+<div dj-value="user.name|upper"></div>
+```
+
+```html
+<div>{{ user.name|upper }}</div>
+```
+
+Void and self-closing tags are turned into paired tags so the value has a place to render:
+
+```html
+<img dj-value="avatar.url" />
+```
+
+```html
+<img>{{ avatar.url }}</img>
+```

src/dj_angles/replacers/__init__.py

@@ -1,6 +1,6 @@
 import logging
 
-from dj_angles.replacers.attributes import replace_attributes
+from dj_angles.replacers.attributes import replace_attributes, replace_values
 from dj_angles.replacers.comments import mask_comments
 from dj_angles.replacers.tags import replace_tags
 from dj_angles.replacers.variables import replace_variables
@@ -31,10 +31,13 @@ def convert_template(html: str, *, origin=None) -> str:
     # 2. Replace variables, e.g. `{{ foo or bar }}`
     html = replace_variables(html)
 
-    # 3. Replace tags, e.g. `<dj-include />`
+    # 3. Replace value attributes, e.g. `<div dj-value="request.user">`
+    html = replace_values(html)
+
+    # 4. Replace tags, e.g. `<dj-include />`
     html = replace_tags(html, origin=origin)
 
-    # 4. Unmask comments
+    # 5. Unmask comments
     for i, comment in enumerate(comments):
         html = html.replace(f"__DJ_ANGLES_COMMENT_{i}__", comment)
 

src/dj_angles/replacers/attributes.py

@@ -281,3 +281,101 @@ def _remove_attribute(tag: str, attr_match: re.Match, tag_start: int) -> str:
     new_tag = re.sub(r"\s{2,}", " ", new_tag)
 
     return new_tag
+
+
+def replace_values(html: str) -> str:
+    """Convert `dj-value` attributes to Django variable output.
+
+    The attribute is removed from the opening tag, the element's inner content
+    is replaced with `{{ value }}`, and void/self-closing tags are turned into
+    paired tags so the value has a place to render.
+
+    Args:
+        html: The HTML string to process.
+
+    Returns:
+        HTML with `dj-value` attributes replaced by Django template variables.
+    """
+
+    prefix = get_setting("initial_attribute_regex", default=r"(dj-)")
+
+    attr_pattern = rf"\s({prefix}value)(?:=(?:\"(?P<v1>[^\"]*)\"|" + r"'(?P<v2>[^']*)'" + r"|(?P<v3>[^\s>]+)))?"
+
+    elements = []
+
+    for match in re.finditer(attr_pattern, html):
+        condition = match.group("v1") or match.group("v2") or match.group("v3") or ""
+
+        if not condition:
+            attr_name = match.group(1)
+            raise AssertionError(f"{attr_name} attribute must have a value")
+
+        # Find the start of the containing tag
+        tag_start = html.rfind("<", 0, match.start())
+
+        # Find the end of the opening tag
+        tag_end = html.find(">", match.end()) + 1
+
+        # Find the element's full extent (including closing tag)
+        full_end = _find_element_end(html, tag_start, tag_end)
+
+        original_tag = html[tag_start:tag_end]
+        original_full = html[tag_start:full_end]
+
+        # dj-value is only valid on opening tags
+        if original_tag.startswith("</"):
+            attr_name = match.group(1)
+            raise AssertionError(f"Invalid use of {attr_name} attribute on closing tag")
+
+        elements.append(
+            {
+                "match": match,
+                "tag_start": tag_start,
+                "tag_end": tag_end,
+                "full_end": full_end,
+                "original_tag": original_tag,
+                "original_full": original_full,
+                "condition": condition,
+            }
+        )
+
+    # Sort by position so outermost elements are processed first
+    elements.sort(key=lambda e: e["tag_start"])
+
+    edits: list[AtomicEdit] = []
+
+    for elem in elements:
+        # Skip elements that are nested inside another dj-value element
+        if any(
+            other["tag_start"] <= elem["tag_start"] and other["full_end"] >= elem["full_end"]
+            for other in elements
+            if other is not elem
+        ):
+            continue
+
+        # Remove the dj-value attribute from the opening tag
+        cleaned_tag = _remove_attribute(elem["original_tag"], elem["match"], elem["tag_start"])
+
+        # Turn self-closing tags into regular tags so they can have inner content
+        cleaned_tag = re.sub(r"\s*/>$", ">", cleaned_tag)
+
+        # Get the tag name
+        tag_match = re.match(r"<(\w+)", cleaned_tag)
+        tag_name = tag_match.group(1) if tag_match else ""
+
+        # Find the existing closing tag, or generate one
+        closing_tag_matches = list(re.finditer(rf"</{tag_name}\s*>", elem["original_full"], re.IGNORECASE))
+        closing_tag = closing_tag_matches[-1].group(0) if closing_tag_matches else f"</{tag_name}>"
+
+        replacement = f"{cleaned_tag}{{{{ {elem['condition']} }}}}{closing_tag}"
+
+        edits.append(
+            AtomicEdit(
+                position=elem["tag_start"],
+                content=replacement,
+                is_insert=False,
+                end_position=elem["full_end"],
+            )
+        )
+
+    return apply_edits(html, edits)

tests/dj_angles/replacers/attributes/test_replace_values.py

@@ -0,0 +1,94 @@
+from collections import namedtuple
+
+import pytest
+
+from dj_angles.replacers.attributes import replace_values
+
+# Structure to store parameterize data
+Params = namedtuple(
+    "Params",
+    ("original", "replacement"),
+)
+
+
+@pytest.mark.parametrize(
+    Params._fields,
+    (
+        Params(
+            original="<div dj-value='request.user'></div>",
+            replacement="<div>{{ request.user }}</div>",
+        ),
+        Params(
+            original='<div dj-value="request.user"></div>',
+            replacement="<div>{{ request.user }}</div>",
+        ),
+        Params(
+            original="<div dj-value=request.user></div>",
+            replacement="<div>{{ request.user }}</div>",
+        ),
+        Params(
+            original="<div dj-value='x'>fallback</div>",
+            replacement="<div>{{ x }}</div>",
+        ),
+        Params(
+            original="<div dj-value='user.name|upper'></div>",
+            replacement="<div>{{ user.name|upper }}</div>",
+        ),
+        Params(
+            original="<img dj-value='x' />",
+            replacement="<img>{{ x }}</img>",
+        ),
+        Params(
+            original="<input dj-value='x'>",
+            replacement="<input>{{ x }}</input>",
+        ),
+        Params(
+            original='<div class="foo" dj-value="x"></div>',
+            replacement='<div class="foo">{{ x }}</div>',
+        ),
+        Params(
+            original="<div dj-value='x'><span>nested</span></div>",
+            replacement="<div>{{ x }}</div>",
+        ),
+        Params(
+            original="<div dj-value='x'>  <span>nested</span>  </div>",
+            replacement="<div>{{ x }}</div>",
+        ),
+    ),
+)
+def test_replace_values(original, replacement):
+    actual = replace_values(original)
+    assert actual == replacement
+
+
+def test_empty_value_raises():
+    with pytest.raises(AssertionError, match="dj-value attribute must have a value"):
+        replace_values("<div dj-value=''></div>")
+
+
+def test_missing_value_raises():
+    with pytest.raises(AssertionError, match="dj-value attribute must have a value"):
+        replace_values("<div dj-value></div>")
+
+
+def test_closing_tag_raises():
+    with pytest.raises(AssertionError, match="Invalid use of dj-value attribute on closing tag"):
+        replace_values("</div dj-value='x'>")
+
+
+def test_multiple_elements():
+    original = "<div dj-value='x'></div><span dj-value='y'></span>"
+    expected = "<div>{{ x }}</div><span>{{ y }}</span>"
+
+    actual = replace_values(original)
+
+    assert actual == expected
+
+
+def test_nested_elements():
+    original = "<div dj-value='outer'><span dj-value='inner'></span></div>"
+    expected = "<div>{{ outer }}</div>"
+
+    actual = replace_values(original)
+
+    assert actual == expected

tests/dj_angles/replacers/test_convert_template.py

@@ -846,3 +846,57 @@ def test_if_nested_same_tag_bug():
     actual = convert_template(template)
 
     assert actual == expected
+
+
+def test_value_simple():
+    expected = "<div>{{ request.user }}</div>"
+
+    template = '<div dj-value="request.user"></div>'
+    actual = convert_template(template)
+
+    assert actual == expected
+
+
+def test_value_replaces_content():
+    expected = "<div>{{ request.user }}</div>"
+
+    template = '<div dj-value="request.user">fallback</div>'
+    actual = convert_template(template)
+
+    assert actual == expected
+
+
+def test_value_with_filter():
+    expected = "<div>{{ request.user|upper }}</div>"
+
+    template = '<div dj-value="request.user|upper"></div>'
+    actual = convert_template(template)
+
+    assert actual == expected
+
+
+def test_value_with_if():
+    expected = "{% if is_authenticated %}<div>{{ request.user }}</div>{% endif %}"
+
+    template = '<div dj-if="is_authenticated" dj-value="request.user"></div>'
+    actual = convert_template(template)
+
+    assert actual == expected
+
+
+def test_value_void_element():
+    expected = "<input>{{ request.user }}</input>"
+
+    template = '<input dj-value="request.user">'
+    actual = convert_template(template)
+
+    assert actual == expected
+
+
+def test_value_self_closing_element():
+    expected = "<img>{{ request.user }}</img>"
+
+    template = '<img dj-value="request.user" />'
+    actual = convert_template(template)
+
+    assert actual == expected