Enable string interpolation with multiple placeholders in HTML attribute (#59)

* Add placeholder replacement functionality for interpolated attribute values

* Fix string formatting in attribute value tests for consistency

* Fix logic for segment processing in attribute interpolation

* Add a couple tests so I'm sure I understand the behavior here.

* Update README

---------

Co-authored-by: Dave <[email protected]>

Author: koxudaxi

README.md

@@ -97,6 +97,15 @@ button = html(t"<button id={element_id}>Click me</button>")
 # <button id="my-button">Click me</button>
 ```
 
+Multiple substitutions in a single attribute are supported too:
+
+```python
+first = "Alice"
+last = "Smith"
+button = html(t'<button data-name="{first} {last}">Click me</button>')
+# <button data-name="Alice Smith">Click me</button>
+```
+
 Boolean attributes are supported too. Just use a boolean value in the attribute
 position:
 

tdom/processor.py

@@ -1,4 +1,5 @@
 import random
+import re
 import string
 import sys
 import typing as t
@@ -53,6 +54,7 @@ def format_interpolation(interpolation: Interpolation) -> object:
 
 _PLACEHOLDER_PREFIX = f"t🐍-{''.join(random.choices(string.ascii_lowercase, k=4))}-"
 _PP_LEN = len(_PLACEHOLDER_PREFIX)
+_PLACEHOLDER_PATTERN = re.compile(re.escape(_PLACEHOLDER_PREFIX) + r"(\d+)")
 
 
 def _placeholder(i: int) -> str:
@@ -65,6 +67,47 @@ def _placholder_index(s: str) -> int:
     return int(s[_PP_LEN:])
 
 
+def _replace_placeholders_in_string(
+    value: str, interpolations: tuple[Interpolation, ...]
+) -> object:
+    """Replace any placeholders embedded within a string attribute value."""
+    segments: list[tuple[str, object]] = []
+    has_static_content = False
+    last_index = 0
+
+    for match in _PLACEHOLDER_PATTERN.finditer(value):
+        if match.start() > last_index:
+            static_segment = value[last_index : match.start()]
+            segments.append(("static", static_segment))
+            if static_segment:
+                has_static_content = True
+
+        index = int(match.group(1))
+        interpolation = interpolations[index]
+        formatted = format_interpolation(interpolation)
+        segments.append(("dynamic", formatted))
+        last_index = match.end()
+
+    if last_index < len(value):
+        static_segment = value[last_index:]
+        segments.append(("static", static_segment))
+        if static_segment:
+            has_static_content = True
+
+    if not segments:
+        return value
+
+    dynamic_segments = [segment for segment in segments if segment[0] == "dynamic"]
+
+    if not has_static_content and len(dynamic_segments) == 1 and len(segments) == 1:
+        return dynamic_segments[0][1]
+
+    return "".join(
+        str(segment[1]) if segment[0] == "static" else str(segment[1])
+        for segment in segments
+    )
+
+
 def _instrument(
     strings: tuple[str, ...], callable_infos: tuple[CallableInfo | None, ...]
 ) -> t.Iterable[str]:
@@ -256,13 +299,22 @@ def _substitute_interpolated_attrs(
     """
     new_attrs: dict[str, object | None] = {}
     for key, value in attrs.items():
-        if value and value.startswith(_PLACEHOLDER_PREFIX):
-            # Interpolated attribute value
-            index = _placholder_index(value)
-            interpolation = interpolations[index]
-            interpolated_value = format_interpolation(interpolation)
-            new_attrs[key] = interpolated_value
-        elif key.startswith(_PLACEHOLDER_PREFIX):
+        if isinstance(value, str):
+            matches = tuple(_PLACEHOLDER_PATTERN.finditer(value))
+            if matches:
+                if len(matches) == 1:
+                    match = matches[0]
+                    if match.start() == 0 and match.end() == len(value):
+                        index = int(match.group(1))
+                        interpolation = interpolations[index]
+                        interpolated_value = format_interpolation(interpolation)
+                        new_attrs[key] = interpolated_value
+                        continue
+
+                new_attrs[key] = _replace_placeholders_in_string(value, interpolations)
+                continue
+
+        if key.startswith(_PLACEHOLDER_PREFIX):
             # Spread attributes
             index = _placholder_index(key)
             interpolation = interpolations[index]

tdom/processor_test.py

@@ -460,6 +460,19 @@ def test_interpolated_class_attribute():
     assert str(node) == '<button class="btn btn-primary active">Click me</button>'
 
 
+def test_interpolated_class_attribute_with_multiple_placeholders():
+    classes1 = ["btn", "btn-primary"]
+    classes2 = [False and "disabled", None, {"active": True}]
+    node = html(t'<button class="{classes1} {classes2}">Click me</button>')
+    # CONSIDER: Is this what we want? Currently, when we have multiple
+    # placeholders in a single attribute, we treat it as a string attribute.
+    assert node == Element(
+        "button",
+        attrs={"class": "['btn', 'btn-primary'] [False, None, {'active': True}]"},
+        children=[Text("Click me")],
+    )
+
+
 def test_interpolated_attribute_spread_with_class_attribute():
     attrs = {"id": "button1", "class": ["btn", "btn-primary"]}
     node = html(t"<button {attrs}>Click me</button>")
@@ -471,6 +484,52 @@ def test_interpolated_attribute_spread_with_class_attribute():
     assert str(node) == '<button id="button1" class="btn btn-primary">Click me</button>'
 
 
+def test_interpolated_attribute_value_embedded_placeholder():
+    slug = "item42"
+    node = html(t"<div data-id='prefix-{slug}'></div>")
+    assert node == Element(
+        "div",
+        attrs={"data-id": "prefix-item42"},
+        children=[],
+    )
+    assert str(node) == '<div data-id="prefix-item42"></div>'
+
+
+def test_interpolated_attribute_value_with_static_prefix_and_suffix():
+    counter = 3
+    node = html(t'<div data-id="item-{counter}-suffix"></div>')
+    assert node == Element(
+        "div",
+        attrs={"data-id": "item-3-suffix"},
+        children=[],
+    )
+    assert str(node) == '<div data-id="item-3-suffix"></div>'
+
+
+def test_interpolated_attribute_value_multiple_placeholders():
+    start = 1
+    end = 5
+    node = html(t'<div data-range="{start}-{end}"></div>')
+    assert node == Element(
+        "div",
+        attrs={"data-range": "1-5"},
+        children=[],
+    )
+    assert str(node) == '<div data-range="1-5"></div>'
+
+
+def test_interpolated_attribute_value_multiple_placeholders_no_quotes():
+    start = 1
+    end = 5
+    node = html(t"<div data-range={start}-{end}></div>")
+    assert node == Element(
+        "div",
+        attrs={"data-range": "1-5"},
+        children=[],
+    )
+    assert str(node) == '<div data-range="1-5"></div>'
+
+
 def test_interpolated_data_attributes():
     data = {"user-id": 123, "role": "admin", "wild": True}
     node = html(t"<div data={data}>User Info</div>")
@@ -485,6 +544,13 @@ def test_interpolated_data_attributes():
     )
 
 
+def test_interpolated_data_attribute_multiple_placeholders():
+    confusing = {"user-id": "user-123"}
+    placeholders = {"role": "admin"}
+    with pytest.raises(TypeError):
+        _ = html(t'<div data="{confusing} {placeholders}">User Info</div>')
+
+
 def test_interpolated_aria_attributes():
     aria = {"label": "Close", "hidden": True, "another": False, "more": None}
     node = html(t"<button aria={aria}>X</button>")
@@ -499,6 +565,13 @@ def test_interpolated_aria_attributes():
     )
 
 
+def test_interpolated_aria_attribute_multiple_placeholders():
+    confusing = {"label": "Close"}
+    placeholders = {"hidden": True}
+    with pytest.raises(TypeError):
+        _ = html(t'<button aria="{confusing} {placeholders}">X</button>')
+
+
 def test_interpolated_style_attribute():
     styles = {"color": "red", "font-weight": "bold", "font-size": "16px"}
     node = html(t"<p style={styles}>Warning!</p>")
@@ -513,6 +586,19 @@ def test_interpolated_style_attribute():
     )
 
 
+def test_interpolated_style_attribute_multiple_placeholders():
+    styles1 = {"color": "red"}
+    styles2 = {"font-weight": "bold"}
+    node = html(t"<p style='{styles1} {styles2}'>Warning!</p>")
+    # CONSIDER: Is this what we want? Currently, when we have multiple
+    # placeholders in a single attribute, we treat it as a string attribute.
+    assert node == Element(
+        "p",
+        attrs={"style": "{'color': 'red'} {'font-weight': 'bold'}"},
+        children=[Text("Warning!")],
+    )
+
+
 def test_style_attribute_str():
     styles = "color: red; font-weight: bold;"
     node = html(t"<p style={styles}>Warning!</p>")