search

EmilStenstrom / django-components

Create simple reusable template components in Django.
MIT License
1.18k stars 76 forks source link

Support for dynamically loading component's JS/CSS dependencies #510

Open maximbelyayev opened 5 months ago

maximbelyayev commented 5 months ago

Apologies ahead of time as I'm fairly new to django-components.

Context: Let's say I have an index.html with {% component_css_dependencies %} and/or {% component_css_dependencies %} declared in the head/script sections, respectively. I have templates that extend index.html that contain templatetags for django-component modal. The modal django-component loads partial templates via HTMX.

Issue: If the partial templates loaded via modal django-component/HTMX contain calls to other django-components (e.g., an input django-component), then the input django-component's JS/CSS dependencies are not loaded into head/script of index.html.

It seems any django-component's JS/CSS dependencies will only load if the component is explicitly declared via templatetag in index.html template (or any other template that extends index.html).

Request / Solution: I think the behavior I'm looking to achieve is dynamic loading of JS/CSS dependencies based on the templatetag call, and a recursive search of the{% component_css/js_dependencies %} locations to load into.

JuroOravec commented 5 months ago

Hey @maximbelyayev thanks for taking the time to write this down and welcome!

I don't use HTMX + Django much, so to clarify, when you say "partial templates", do you mean HTML snippets that will be inserted into an already-existing HTML in the browser? So it's not a fully qualified HTML with <html> and <body>:

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    ...
  </body>
</html>

but instead only the snippet that will be rendered, e.g.

<div>
  hello
  ...
</div>

And when it comes to dynamically loading JS/CSS, see the discussion at https://github.com/EmilStenstrom/django-components/issues/478#issuecomment-2097537059. There we talked about an idea of having a JS script that would manage and load CSS/JS on-demand. But we haven't flashed it out yet, so any feedback is welcome.

maximbelyayev commented 5 months ago

Hi @JuroOravec, yes exactly by 'partial templates' I mean snippets without a <html> and <body> that are injectable into templates with a head/body.

Good to know this was discussed already! I don't know if I can contribute but happy to tes/provide feedback if this feature or JS script does get implemented.