script type=module

[TheSteveBurgess]

Hi,

Is there a way to set the type of the javascript script tag that is created? It looks like there is a add_module_attribute_to_scripts method in middleware.py but i can't see how its implemented.

[EmilStenstrom]

That method isn't currently used anywhere, and should probably be removed. To render the script tag for a specific component, the method render_js_dependencies. Here's the default implementation:

django-components/django_components/component.py

Line 110 in 27521a5

def render_js_dependencies(self):

The render_js() call returns the <script> tag without type="module" added. So if you override that method, and do a string replace on <script with <script type="module" I think everyhing would work as you want?

[TheSteveBurgess]

I was hoping to be able to set it on a per component basis, I think the above code would add type=module to all script tags would it not?

I was able to achieve what I needed without making any code changes after spending some time looking at the Django Media class

It turns out since 4.1 the js file path can actually be an object that implements an html() method (https://docs.djangoproject.com/en/4.1/topics/forms/media/#paths-as-objects)

That means you're able to directly specify how the script tag should look by doing something like this

class My_component(component.Component):
    template_name = "my_component/template.html"

    def get_context_data(self):
        return {
           # "param": "sample value",
        }

    class Media:
        css = "my_component/style.css"
        js = [format_html(
            '<script type="module" src="{}"></script>', 
            "my_component/script.js"
        )]

Thanks for the quick reply though 😊

[EmilStenstrom]

You override the method I pointed to in your own specific component class. That means all usages of that class will get the type="module" thing, everything else unchanged.

Happy to see that it's possible to solve with the built-in Media class, I was hoping that we would get some benefits down the line from it! :)