Cms: Render script tag in plugin template after Asset Bundles

Created on 12 Mar 2021  Â·  3Comments  Â·  Source: craftcms/cms

Description

{% js %}
// some JavaScript
{% endjs %}

Renders after Asset Bundles' <script> elements have rendered, as expected. The code may depend on one of those script files.

{% js "plugin/plugin.js" with {type:'module'} %}

Renders before Assets Bundles' <script> elements have rendered. The code cannot depend on those script files.

with can't be used on a code block, so type="module" can't be added to a JavaScript code block that fires after the Asset Bundles, and if it's added to a file reference, it appears before the necessary referenced files.

Shouldn't at endbody consistently output both code blocks and JS files after the Asset Bundles?

The ideal solution would be to be able to output type="module" on the script tag for an Asset Bundle resource. I've been trying to find a work around for that limitation.

Steps to reproduce

Use either of the {% js %} tags above to observe that JS is output before or after Asset Bundles are rendered, depending on whether it's a file reference or code block.

Additional info

  • Craft version: 3.6.6
enhancement site development

Most helpful comment

Just added a new {% script %} tag for the next release, which works similarly to {% js %} except that you get full control of the tag attributes. So you could do this:

{% script with {type: 'module'} %}
// some JavaScript
{% endscript %}

To get it early, change your craftcms/cms requirement in composer.json to "dev-release/3.6.11" and run composer update.

All 3 comments

Just added a new {% script %} tag for the next release, which works similarly to {% js %} except that you get full control of the tag attributes. So you could do this:

{% script with {type: 'module'} %}
// some JavaScript
{% endscript %}

To get it early, change your craftcms/cms requirement in composer.json to "dev-release/3.6.11" and run composer update.

Thanks!

Craft 3.6.11 is out now with the new {% script %} tag ✨

Was this page helpful?
0 / 5 - 0 ratings

Related issues

benface picture benface  Â·  3Comments

mccombs picture mccombs  Â·  3Comments

angrybrad picture angrybrad  Â·  3Comments

davist11 picture davist11  Â·  3Comments

bitboxfw picture bitboxfw  Â·  3Comments