Allowing filters to use dynamic variables in Pug

Enter your suggestions in details:

Pug has a filter system that is currently hooked up to Lume’s filters, that other template engines like Nunjucks also use. However, Pug limits filter inputs to plain text only, which is incredibly inconvenient for Lume users.

For example, the date filter added by the Date plugin can be used in Pug like this:

:date(pattern="HUMAN_DATETIME") 2022-11-22 7:00:30Z

However, this does not work with Pug variables (so something like :date()= variable does not work), and that is by design:

Warning Filters are rendered at compile time. This makes them fast, but it also means that they cannot support dynamic content or options.

By default, compilation in the browser does not have access to JSTransformer-based filters, unless the JSTransformer modules are explicitly packed and made available through a CommonJS platform (such as Browserify or Webpack). In fact, the page you are reading right now uses Browserify to make the filters available in the browser.

Templates pre-compiled on the server do not have this limitation.

As Lume precompiles templates as an SSG, I think we should lift this limitation and bring Pug in line with other template engines like Nunjucks.

[pluiedev]

Nice! Is it possible to have both? For example filters.md(value) and :md?

It’s possible yeah, you just have to inject filters into the page data before rendering, which makes them available to the template as a global variable. Gonna open a PR that does exactly that very soon 👍

[oscarotero]

Nice! Is it possible to have both? For example filters.md(value) and :md?