fix: do not aggregate kwargs that start with colon (#561)

src/django_components/template_parser.py

@@ -261,7 +261,9 @@ def process_aggregate_kwargs(kwargs: Mapping[str, Any]) -> Dict[str, Any]:
     processed_kwargs = {}
     nested_kwargs: Dict[str, Dict[str, Any]] = {}
     for key, val in kwargs.items():
-        if ":" not in key:
+        # NOTE: If we get a key that starts with `:`, like `:class`, we do not split it.
+        # This syntax is used by Vue and AlpineJS.
+        if ":" not in key or key.startswith(":"):
             processed_kwargs[key] = val
             continue
 

tests/test_template_parser.py

@@ -3,6 +3,7 @@ from django.template.base import Parser
 
 from django_components import component, types
 from django_components.component import safe_resolve_dict, safe_resolve_list
+from django_components.template_parser import process_aggregate_kwargs
 from django_components.templatetags.component_tags import _parse_component_with_args
 
 from .django_test_setup import setup_test_config
@@ -88,3 +89,31 @@ class ParserComponentTest(BaseTestCase):
             abc
             """,
         )
+
+
+class AggregateKwargsTest(BaseTestCase):
+    def test_aggregate_kwargs(self):
+        processed = process_aggregate_kwargs(
+            {
+                "attrs:@click.stop": "dispatch('click_event')",
+                "attrs:x-data": "{hello: 'world'}",
+                "attrs:class": "class_var",
+                "my_dict:one": 2,
+                "three": "four",
+                ":placeholder": "No text",
+            }
+        )
+
+        self.assertDictEqual(
+            processed,
+            {
+                "attrs": {
+                    "@click.stop": "dispatch('click_event')",
+                    "x-data": "{hello: 'world'}",
+                    "class": "class_var",
+                },
+                "my_dict": {"one": 2},
+                "three": "four",
+                ":placeholder": "No text",
+            },
+        )