Duplicate Media(CSS, JS) load when using class inheritance in django components

Question

I am using django-components. Common parts are inherited from parent classes and child classes are registered as components. It is written as follows

components.py

from django_components import component


class Parent(component.Component):
    def get_context_data(self, data):
        return {
            "data": data,
        }


@component.register("aaa")
class ChildA(Parent):
    template_name = "/aaa.html"

    class Media:
        css = ["css/my.css", "css/test/aaa.css"]
        js = "js/common.js"


@component.register("bbb")
class ChildB(Parent):
    template_name = "/bbb.html"

    class Media:
        css = ["css/my.css", "css/test/bbb.css"]
        js = "js/common.js"

When I call the aaa component in a template, I want to call only the Media (css, js) associated with the ChildA class.

xxx.html

        {% component "aaa" data=""%}

However, when we check the expanded HTML, even the Media of ChildB is called as shown below.

Expanded final HTML

<script src="js/common.js" ></script>
<script src="js/common.js" ></script>

<link href="css/my.css" media="all" rel="stylesheet">
<link href="css/test/aaa.css" media="all" rel="stylesheet">
<link href="css/my.css" media="all" rel="stylesheet">
<link href="css/test/bbb.css" media="all" rel="stylesheet">

What should I do to avoid calling Media of a component of another class that has the same parent?

We have already confirmed that common.js is called only once when ChildB js is specified empty.

@component.register("bbb")
class ChildB(Parent):
    template_name = "/bbb.html"

    class Media:
        css = ["css/my.css", "css/test/bbb.css"]
        js = ""

Answer 1

You can change this behaviour by using django_components.middleware.ComponentDependencyMiddleware in your middleware.

This is as yet undocumented, but you can read more about it here: https://github.com/EmilStenstrom/django-components/issues/71