Eleventy(11ty)でショートコードを含むファイルをループさせる

11tyでショートコードを含むファイルをループさせようとするとエラーが発生していたのですが、v1.0.0で解消できたのでご紹介します。

エラーが生じる例

Eleventyで画像を扱う時はeleventy-imgでwebpとavif形式にも変換しています。
例えば、下記のようにショートコードを設定しています。

ショートコード

{% image "./src/media/images/hoge/hoge.jpg", "width", "height", "alt" %}

出力されるHTML

<picture>
  <source type="image/avif" srcset="/media/images/hoge/hoge.avif">
  <source type="image/webp" srcset="/media/images/hoge/hoge.webp">
  <source type="image/jpeg" srcset="/media/images/hoge/hoge.jpeg">
  <img src="/media/images/hoge/hoge.jpeg" width="width" height="height" alt="alt">
</picture>

記事一覧ページを作成するとして、各ブロックに上記のショートコードを設定しているファイルをincludeしてループさせたいとします。
その際、ショートコードに設定する値は配列のデータから設定するとします。

archive.njk

{%- for article in articlesData %}
  {% include 'parts/archive_card.njk' %}
{%- endfor %}

parts/archive_card.njk

<div>
  <h2>{{ article['articleTitle'] }}</h2>
  <p>{{ article['articleDesc'] }}</p>
  {% image article['imgSrc'], article['imgWidth'], article['imgHeight'], article['imgAlt'] %}
</div>

上記で実行しようとすると、エラーが発生してコンパイルされません。
ショートコードはやめて、直接imgタグで画像を読み込む方法に切り替えていました。

v1.0.0 で追加された {% setAsync %} で解消

22年10月リリースのv1.0.0で追加された{% setAsync %}で解消することができました。

archive.njk

{%- for article in articlesData %}
  {% setAsync 'articleImg' %}
    {% image article['imgSrc'], article['imgWidth'], article['imgHeight'], article['imgAlt'] %}
  {% endsetAsync %}

  {% include 'parts/archive_card.njk' %}
{%- endfor %}

parts/archive_card.njk

<div>
  <h2>{{ article['articleTitle'] }}</h2>
  <p>{{ article['articleDesc'] }}</p>
  {{ articleImg }}
</div>

上記のように{% setAsync %}でショートコードを登録し、
includeするファイルで{% setAsync %}で設定した変数を呼び出すことでエラーを解消することができました。