[FR] Allow {% cache %} tags to keep track of assets included with {% js %} / {% css %} tags

[MoritzLost]

Since Craft 3.7 the {% cache %} tag keeps track of JS/CSS code registered with the {% js %} and {% css %} and adds them back to the view every time that cache is used. However, this doesn't work if you're using those tags to register files (assets) instead of inline code. This is a feature discussion to change that, allowing the cache tag to keep track of assets included with the js / css tags and add them to the view when the cache is used, the same as it does with inline code.

This is a good idea because the current behaviour (inline code is supported, assets are not) is unexpected and can lead to bugs that are hard to track down and fix if you don't know about it. Also, there are situations where you can't break out of the {% cache %} tags inside a template easily, so registering assets in this way isn't possible.

Usage example

A common scenario is using matrix blocks as a content builder, where each block is a content section. To keep things organized, there's one template per matrix block. Each block template outputs the content of the current section, some of which may require additional JS/CSS assets. For example, a block that contains an interactive map might require some JS to to initialize the map:

{# sections/block--map.twig #}

{% extends 'sections/block' %}

{% js '/dist/js/map.js' %}

{% block content %}
    <div class="map"></div>
{% endblock %}

This works fine unless you want to cache the entire output of the matrix sections. If the cache tag is in a top-level entry template, the block template can't register the JS asset since it won't be included if the matrix content is loaded from the cache. So you have to register the asset somewhere else, either in a hook in a custom module or in the top-level entry template. Both not ideal in terms of discoverability and maintainability.

Having the {% cache %} tag play nicely with the {% js %} and {% css %} tags would allow the scenario above to work.

[RyanRoberts]

I've just had some major head scratching around this same scenario too. It would be great if it would work the way described above.

[RedLucas]

I think simplemap is trying to work around this issue by using registerScript() and adding attributes to it... but it's running into an error because the value of the first parameter of registerScript cannot be empty (throws an error).

I made a PR that "fixes" it ethercreative/simplemap#341, but I now discovered that now that we're using the correct method for attaching a JS file, that we now have this issue.

I've been running into this issue quite a lot (I think every time I try to add a new feature) so I'm not sure how easy this is to fix but I'd really appreciate it.

This feels like a bug not a feature request

[brandonkelly]

Just went ahead and added this for the next Craft 4 release ✨ (1cb2edf)

Don’t feel comfortable doing it in 3.x because this was quite a bit more involved than inline JS/CSS code.

[brandonkelly]

Craft 4.0.0-RC2 is out now with that change.

[MoritzLost]

Awesome, thanks Brandon! 🚀