Resolve media and template files relative to component class dir (#395), thanks @JuroOravec

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Emil Stenström <emil@emilstenstrom.se>

sampleproject/components/calendar/calendar.py

@@ -23,3 +23,27 @@ class Calendar(component.Component):
     class Media:
         css = "calendar/calendar.css"
         js = "calendar/calendar.js"
+
+
+@component.register("calendar_relative")
+class CalendarRelative(component.Component):
+    # Note that Django will look for templates inside `[your apps]/components` dir and
+    # `[project root]/components` dir. To customize which template to use based on context
+    # you can override def get_template_name() instead of specifying the below variable.
+    template_name = "calendar.html"
+
+    # This component takes one parameter, a date string to show in the template
+    def get_context_data(self, date):
+        return {
+            "date": date,
+        }
+
+    def get(self, request, *args, **kwargs):
+        context = {
+            "date": request.GET.get("date", ""),
+        }
+        return self.render_to_response(context)
+
+    class Media:
+        css = "calendar.css"
+        js = "calendar.js"

sampleproject/components/nested/calendar/calendar.css

@@ -0,0 +1,2 @@
+.calendar-component { width: 200px; background: pink; }
+.calendar-component span { font-weight: bold; }

sampleproject/components/nested/calendar/calendar.html

@@ -0,0 +1,19 @@
+<div class="calendar-component">
+  <div>Today's date is <span>{{ date }}</span></div>
+  <div>Your to-dos:</div>
+  <ul>
+    <li>
+      {% component "todo" %}
+        {% fill "todo_text" %}
+          Stop forgetting the milk!
+        {% endfill %}
+      {% endcomponent %}
+    </li>
+    <li>
+      {% component "todo" %}
+        {# As of v0.28, 'fill' tag optional for 1-slot filling if component template specifies a 'default' slot #}
+        Wear all-white clothes to laser tag tournament.
+      {% endcomponent %}
+    </li>
+  </ul>
+</div>

sampleproject/components/nested/calendar/calendar.js

@@ -0,0 +1,5 @@
+(function(){
+    if (document.querySelector(".calendar-component")) {
+        document.querySelector(".calendar-component").onclick = function(){ alert("Clicked calendar!"); };
+    }
+})()

sampleproject/components/nested/calendar/calendar.py

@@ -0,0 +1,25 @@
+from django_components import component
+
+
+@component.register("calendar_nested")
+class CalendarNested(component.Component):
+    # Note that Django will look for templates inside `[your apps]/components` dir and
+    # `[project root]/components` dir. To customize which template to use based on context
+    # you can override def get_template_name() instead of specifying the below variable.
+    template_name = "calendar.html"
+
+    # This component takes one parameter, a date string to show in the template
+    def get_context_data(self, date):
+        return {
+            "date": date,
+        }
+
+    def get(self, request, *args, **kwargs):
+        context = {
+            "date": request.GET.get("date", ""),
+        }
+        return self.render_to_response(context)
+
+    class Media:
+        css = "calendar.css"
+        js = "calendar.js"

sampleproject/components/urls.py

@@ -1,8 +1,11 @@
-from components.calendar.calendar import Calendar
+from components.calendar.calendar import Calendar, CalendarRelative
 from components.greeting import Greeting
+from components.nested.calendar.calendar import CalendarNested
 from django.urls import path
 
 urlpatterns = [
     path("greeting/", Greeting.as_view(), name="greeting"),
     path("calendar/", Calendar.as_view(), name="calendar"),
+    path("calendar-relative/", CalendarRelative.as_view(), name="calendar-relative"),
+    path("calendar-nested/", CalendarNested.as_view(), name="calendar-nested"),
 ]