Asynchronous shortcode breaks macros

[Lamecarlate]

Hello,

I wanted to add an icon in a macro, and it seems to fail silently. No error in the console, and the html is truncated just before the icon, the macro is returned and displayed as is. In my case, breaking the html, since there is no closing tag…

My macro:

{%- macro warning(content) -%}
<div class="warning-block">    
    {% icon "triangle-alert" %}

    {{ content }}
</div>
{%- endmacro -%}

This outputs:

<div class="warning-block">

and stops. The rest of the template, after the macro, is displayed.

Note: I installed the Lucide Icons Plugin, to test if the problem was only the plugin, or shortcodes in macros, or any other thing. It works with the {% lucide "triangle-alert" %} provided by this plugin.

Do you need more information, what can I do to help?

Thanks in advance.

[uncenter]

Hi, unfortunately this is due to a limitation of the templating language itself: https://mozilla.github.io/nunjucks/templating.html#macro.

Important note: If you are using the asynchronous API, please be aware that you cannot do anything asynchronous inside macros. This is because macros are called like normal functions. In the future we may have a way to call a function asynchronously. If you do this now, the behavior is undefined.

Since the icon shortcode is asynchronous, you cannot use it in macros.

[uncenter]

Though, I could look into providing a synchronous version of the shortcode...

[Lamecarlate]

Oh. I did not realise it was asynchronous… So, I guess the Lucide shortcut is synchronous (the Lucide plugin is here).

Is it possible to override your Icons plugin to make it synchronous? Oh, I see your second comment now… Can I help? I'm new to Eleventy but not bad in JS, I could try to understand.

[uncenter]

The difference is that the Lucide plugin statically imports the icon data, whereas this plugin uses the filesystem as the source - meaning we read files for the SVG data, asynchronously. I think I should look into providing a more customizable approach to "sources" - maybe I provide a FileSystemSource class and a StaticSource for reading from the filesystem vs retrieving from an object? Some things I'll have to think about here... if you have any other/better ideas feel free to chime in 😅

[Lamecarlate]

Thanks for changing the title, it was a bit aggressive, I'm sorry.

Just asking, why did you choose the asynchronous API, what's the advantages here?

[uncenter]

It's faster in some places because I can queue a bunch of file system reads, like for many icons at once, without having to wait for the previous one to complete. Or at least that's my understanding 😅 - I've never been super confident with sync/async work. I could probably add a sync version of the shortcode though as I was saying earlier, I don't think it would be super difficult.