Add quoted vs unquoted value resolution for components (#77)

joshuadavidthomas · pre-commit-ci[bot] · web-flow · commit e6dea0ba43d4 · 2024-12-30T14:53:49.000-06:00
Co-authored-by: pre-commit-ci[bot] &lt;66853113+pre-commit-ci[bot]@users.noreply.github.com&gt;
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,6 +18,10 @@ and this project attempts to adhere to [Semantic Versioning](https://semver.org/
 
 ## [Unreleased]
 
+### Changed
+
+- Improved handling of quoted vs unquoted attribute values in `{% bird %}` components. Quoted values (e.g., `class="static-class"`) are treated as literal strings, while unquoted values (e.g., `class=dynamic_class`) are resolved from the template context. This allows for more explicit control over whether an attribute value should be treated as a literal or resolved dynamically.
+
 ## [0.6.2]
 
 ### Changed
@@ -53,7 +57,7 @@ and this project attempts to adhere to [Semantic Versioning](https://semver.org/
 ### Added
 
 - Added component caching with LRU (Least Recently Used) strategy via global `components` registry.
-  - `cachetools>=5.5.0` is now a dependency of the library to support this new cache strategy
+    - `cachetools>=5.5.0` is now a dependency of the library to support this new cache strategy
 
 ### Changed
 
@@ -112,8 +116,8 @@ and this project attempts to adhere to [Semantic Versioning](https://semver.org/
 - Created a custom template loader for integration with django-bird's compiler and Django's template engine.
 - Added support for nested components and dynamic slot rendering.
 - Initial configuration of the library through the `settings.DJANGO_BIRD` dictionary, including these settings:
-  - `COMPONENT_DIRS` - List of directories to search for components
-  - `ENABLE_AUTO_CONFIG` - Boolean to enable/disable auto-configuration
+    - `COMPONENT_DIRS` - List of directories to search for components
+    - `ENABLE_AUTO_CONFIG` - Boolean to enable/disable auto-configuration
 
 ### New Contributors
 
diff --git a/docs/params.md b/docs/params.md
@@ -184,3 +184,85 @@ This will render as:
 ```{note}
 Props defined without a default value will render as an empty string if no value is provided when using the component. This behavior may change in a future version to either require default values or handle undefined props differently.
 ```
+
+## Value Resolution
+
+Both attributes and properties support literal (quoted) and dynamic (unquoted) values. This allows you to either hard-code values or resolve them from the template context.
+
+The rules for value resolution are:
+
+- Quoted values (`"value"` or `'value'`) are treated as literal strings
+- Unquoted values are resolved from the template context
+- Boolean values can be passed directly (`disabled=True`) or as strings (`disabled="True"`)
+- Both attributes and properties follow these same resolution rules
+
+### Literal Values
+
+Using quoted values ensures the exact string is used:
+
+```htmldjango
+{% bird button class="btn-primary" variant="large" disabled="true" %}
+    Click me
+{% endbird %}
+```
+
+Renders as:
+
+```html
+<button class="btn-primary" variant="large" disabled="true">Click me</button>
+```
+
+### Dynamic Values
+
+Unquoted values are resolved from the template context:
+
+```htmldjango
+{% bird button class=button_class variant=size disabled=is_disabled %}
+    Click me
+{% endbird %}
+```
+
+With this context:
+
+```python
+{
+    "button_class": "btn-secondary",
+    "size": "small",
+    "is_disabled": True,
+}
+```
+
+Renders as:
+
+```html
+<button class="btn-secondary" variant="small" disabled>Click me</button>
+```
+
+You can also access nested attributes using dot notation:
+
+```htmldjango
+{% bird button class=theme.button.class disabled=user.is_inactive %}
+    Click me
+{% endbird %}
+```
+
+With this context:
+
+```python
+{
+    "theme": {
+        "button": {
+            "class": "themed-button",
+        }
+    },
+    "user": {
+        "is_inactive": True,
+    },
+}
+```
+
+Renders as:
+
+```html
+<button class="themed-button" disabled>Click me</button>
+```
diff --git a/src/django_bird/params.py b/src/django_bird/params.py
@@ -2,6 +2,7 @@
 
 from dataclasses import dataclass
 from dataclasses import field
+from typing import Any
 
 from django import template
 from django.template.base import NodeList
@@ -12,34 +13,56 @@
 from ._typing import TagBits
 
 
+@dataclass
+class Value:
+    raw: str | bool | None
+    quoted: bool = False
+
+    def resolve(self, context: Context) -> Any:
+        if self.raw is None or (isinstance(self.raw, str) and self.raw == "False"):
+            return None
+        if (isinstance(self.raw, bool) and self.raw) or (
+            isinstance(self.raw, str) and self.raw == "True"
+        ):
+            return True
+        if isinstance(self.raw, str) and not self.quoted:
+            try:
+                return template.Variable(str(self.raw)).resolve(context)
+            except template.VariableDoesNotExist:
+                return self.raw
+        return self.raw
+
+
 @dataclass
 class Param:
     name: str
-    value: str | bool | None
+    value: Value
 
-    def render(self, context: Context) -> str:
-        if self.value is None or (
-            isinstance(self.value, str) and self.value == "False"
-        ):
+    def _resolve_value(self, context: Context) -> str | bool | None:
+        return self.value.resolve(context)
+
+    def render_attr(self, context: Context) -> str:
+        value = self._resolve_value(context)
+        if value is None:
             return ""
-        if (isinstance(self.value, bool) and self.value) or (
-            isinstance(self.value, str) and self.value == "True"
-        ):
+        if value is True:
             return self.name
-        try:
-            value = template.Variable(str(self.value)).resolve(context)
-        except template.VariableDoesNotExist:
-            value = self.value
         return f'{self.name}="{value}"'
 
+    def render_prop(self, context: Context) -> str | bool | None:
+        return self._resolve_value(context)
+
     @classmethod
-    def from_bit(cls, bit: str):
-        value: str | bool
+    def from_bit(cls, bit: str) -> Param:
         if "=" in bit:
-            name, value = bit.split("=", 1)
-            value = value.strip("'\"")
+            name, raw_value = bit.split("=", 1)
+            # Check if the value is quoted
+            if raw_value.startswith(("'", '"')) and raw_value.endswith(raw_value[0]):
+                value = Value(raw_value[1:-1], quoted=True)
+            else:
+                value = Value(raw_value.strip(), quoted=False)
         else:
-            name, value = bit, True
+            name, value = bit, Value(True)
         return cls(name, value)
 
 
@@ -60,23 +83,24 @@ def render_props(self, nodelist: NodeList | None, context: Context):
             if not isinstance(node, PropNode):
                 continue
 
-            value: str | bool | None = node.default
+            # Create a Value instance for the default
+            value = Value(node.default, quoted=False)
 
             for idx, attr in enumerate(self.attrs):
                 if node.name == attr.name:
-                    if attr.value:
-                        value = attr.value
+                    if attr.value.raw is not None:  # Changed from attr.value
+                        value = attr.value  # Now passing the entire Value instance
                     attrs_to_remove.add(idx)
 
             self.props.append(Param(name=node.name, value=value))
 
         for idx in sorted(attrs_to_remove, reverse=True):
             self.attrs.pop(idx)
 
-        return {prop.name: prop.value for prop in self.props}
+        return {prop.name: prop.render_prop(context) for prop in self.props}
 
     def render_attrs(self, context: Context) -> SafeString:
-        rendered = " ".join(attr.render(context) for attr in self.attrs)
+        rendered = " ".join(attr.render_attr(context) for attr in self.attrs)
         return mark_safe(rendered)
 
     @classmethod
diff --git a/src/django_bird/templatetags/tags/bird.py b/src/django_bird/templatetags/tags/bird.py
@@ -60,6 +60,9 @@ def __init__(self, name: str, params: Params, nodelist: NodeList | None) -> None
     @override
     def render(self, context: Context) -> str:
         component_name = self.get_component_name(context)
+        print(f"self.name: {self.name}")
+        print(f"component_name: {component_name}")
+        print(f"component_name type: {type(component_name)}")
         component = components.get_component(component_name)
         component_context = self.get_component_context_data(component, context)
         return component.render(component_context)
diff --git a/tests/templatetags/test_bird.py b/tests/templatetags/test_bird.py
@@ -13,6 +13,7 @@
 
 from django_bird.params import Param
 from django_bird.params import Params
+from django_bird.params import Value
 from django_bird.templatetags.tags.bird import END_TAG
 from django_bird.templatetags.tags.bird import TAG
 from django_bird.templatetags.tags.bird import BirdNode
@@ -48,17 +49,37 @@ def test_missing_argument(self):
     @pytest.mark.parametrize(
         "params,expected_params",
         [
-            ("class='btn'", Params(attrs=[Param(name="class", value="btn")])),
+            (
+                "class='btn'",
+                Params(attrs=[Param(name="class", value=Value("btn", quoted=True))]),
+            ),
             (
                 "class='btn' id='my-btn'",
                 Params(
                     attrs=[
-                        Param(name="class", value="btn"),
-                        Param(name="id", value="my-btn"),
+                        Param(name="class", value=Value("btn", quoted=True)),
+                        Param(name="id", value=Value("my-btn", quoted=True)),
+                    ]
+                ),
+            ),
+            ("disabled", Params(attrs=[Param(name="disabled", value=Value(True))])),
+            (
+                "class=dynamic_class",
+                Params(
+                    attrs=[
+                        Param(name="class", value=Value("dynamic_class", quoted=False))
+                    ]
+                ),
+            ),
+            (
+                "class=item.name id=user.id",
+                Params(
+                    attrs=[
+                        Param(name="class", value=Value("item.name", quoted=False)),
+                        Param(name="id", value=Value("user.id", quoted=False)),
                     ]
                 ),
             ),
-            ("disabled", Params(attrs=[Param(name="disabled", value=True)])),
         ],
     )
     def test_node_params(self, params, expected_params):
@@ -157,6 +178,30 @@ def test_rendered_name(
                 {"slot": "Click me"},
                 "<button>Click me</button>",
             ),
+            (
+                "<button {{ attrs }}>Click me</button>",
+                "{% bird button class=dynamic_class %}Click me{% endbird %}",
+                {"dynamic_class": "btn-primary"},
+                '<button class="btn-primary">Click me</button>',
+            ),
+            (
+                "<button {{ attrs }}>Click me</button>",
+                "{% bird button class='dynamic_class' %}Click me{% endbird %}",
+                {"dynamic_class": "btn-primary"},
+                '<button class="dynamic_class">Click me</button>',
+            ),
+            (
+                "<button {{ attrs }}>Click me</button>",
+                "{% bird button class=btn.class %}Click me{% endbird %}",
+                {"btn": {"class": "btn-success"}},
+                '<button class="btn-success">Click me</button>',
+            ),
+            (
+                "<button {{ attrs }}>Click me</button>",
+                "{% bird button class='btn.class' %}Click me{% endbird %}",
+                {"btn": {"class": "btn-success"}},
+                '<button class="btn.class">Click me</button>',
+            ),
         ],
     )
     def test_rendered_attrs(
@@ -305,6 +350,36 @@ def get_template_libraries(self, libraries):
                 {},
                 '<button class="btn-primary" data-attr="button" disabled>Click me</button>',
             ),
+            (
+                "{% bird:prop class %}<button class='{{ props.class }}'>{{ slot }}</button>",
+                "{% bird button class=dynamic_class %}Click me{% endbird %}",
+                {"dynamic_class": "btn-primary"},
+                "<button class='btn-primary'>Click me</button>",
+            ),
+            (
+                "{% bird:prop class %}<button class='{{ props.class }}'>{{ slot }}</button>",
+                "{% bird button class='dynamic_class' %}Click me{% endbird %}",
+                {"dynamic_class": "btn-primary"},
+                "<button class='dynamic_class'>Click me</button>",
+            ),
+            (
+                "{% bird:prop class %}<button class='{{ props.class }}'>{{ slot }}</button>",
+                "{% bird button class=btn.class %}Click me{% endbird %}",
+                {"btn": {"class": "btn-success"}},
+                "<button class='btn-success'>Click me</button>",
+            ),
+            (
+                "{% bird:prop class %}<button class='{{ props.class }}'>{{ slot }}</button>",
+                "{% bird button class='btn.class' %}Click me{% endbird %}",
+                {"btn": {"class": "btn-success"}},
+                "<button class='btn.class'>Click me</button>",
+            ),
+            (
+                "{% bird:prop class='default' %}<button class='{{ props.class }}'>{{ slot }}</button>",
+                "{% bird button class=active_class %}Click me{% endbird %}",
+                {"active_class": "active"},
+                "<button class='active'>Click me</button>",
+            ),
         ],
     )
     def test_with_props(
diff --git a/tests/test_params.py b/tests/test_params.py
