Allow adding class to a template tag div (#10)

Archmonger · web-flow · commit 24deb2c7dae9 · 2021-09-08T23:51:27.000-07:00
* rename view.html -&gt; component.html

* remove pinned twisted version

* add class as a component param

* pin idom to 0.31
diff --git a/requirements/test-env.txt b/requirements/test-env.txt
@@ -1,6 +1,3 @@
 django
 selenium
-
-# required due issue with channels:
-# https://github.com/django/channels/issues/1639#issuecomment-817994671
-twisted<21
+twisted
diff --git a/src/django_idom/templates/idom/component.html b/src/django_idom/templates/idom/component.html
@@ -1,5 +1,5 @@
 {% load static %}
-<div id="{{ idom_mount_uuid }}"></div>
+<div id="{{ idom_mount_uuid }}" class="{{ class }}"></div>
 <script type="module" crossorigin="anonymous">
   import { mountViewToElement } from "{% static 'js/django-idom-client.js' %}";
   const mountPoint = document.getElementById("{{ idom_mount_uuid }}");
diff --git a/src/django_idom/templatetags/idom.py b/src/django_idom/templatetags/idom.py
@@ -16,13 +16,15 @@
 register = template.Library()
 
 
-@register.inclusion_tag("idom/view.html")
+@register.inclusion_tag("idom/component.html")
 def idom_component(_component_id_, **kwargs):
     _register_component(_component_id_)
 
+    class_ = kwargs.pop("class", "")
     json_kwargs = json.dumps(kwargs, separators=(",", ":"))
 
     return {
+        "class": class_,
         "idom_websocket_url": IDOM_WEBSOCKET_URL,
         "idom_web_modules_url": IDOM_WEB_MODULES_URL,
         "idom_mount_uuid": uuid4().hex,
diff --git a/tests/test_app/templates/base.html b/tests/test_app/templates/base.html
@@ -15,9 +15,9 @@
 
   <body>
     <h1>IDOM Test Page</h1>
-    <div>{% idom_component "test_app.components.HelloWorld" %}</div>
-    <div>{% idom_component "test_app.components.Button" %}</div>
-    <div>{% idom_component "test_app.components.ParametrizedComponent" x=123 y=456 %}</div>
-    <div>{% idom_component "test_app.components.SimpleBarChart" %}</div>
+    <div>{% idom_component "test_app.components.HelloWorld" class="hello-world" %}</div>
+    <div>{% idom_component "test_app.components.Button" class="button" %}</div>
+    <div>{% idom_component "test_app.components.ParametrizedComponent" class="parametarized-component" x=123 y=456 %}</div>
+    <div>{% idom_component "test_app.components.SimpleBarChart" class="simple-bar-chart" %}</div>
   </body>
 </html>
