Filters in Liquid not working as documented

[forsartis]

In the supported features section of the Liquid docs (https://www.11ty.io/docs/languages/liquid/#supported-features) the syntax for Eleventy Universal Filters doesn’t work.

<ul>
  {% for item in testdata | sort %}
    <li>{{ item }}</li>
  {% endfor %}
</ul>

This throws the follwing error:

Problem writing Eleventy templates: (more in DEBUG output)
> Having trouble rendering html template ./index.html (TemplateContentRenderError)
> Having trouble compiling template ./index.html (TemplateContentCompileError)
> illegal tag: {% for item in testdata | sort %}, line:11 (ParseError)
> illegal tag: {% for item in testdata | sort %} (AssertionError):
    AssertionError: illegal tag: {% for item in testdata | sort %}
…

[kleinfreund]

I’m not quite sure if filters are supposed to work on Liquid iteration tags. The following works:

<ul>
  {% assign testdata = some_array | sort %}
  {% for item in testdata %}
  <li>{{ item }}</li>
  {% endfor %}
</ul>

Is there an example in the 11ty or Shopify Liquid docs (https://shopify.github.io/liquid/) that uses filters like this?

[forsartis]

Ah, good to know filters work on the assign tag. Though they didn’t work inside {% %} tags at all, but only tried iteration and if tags.

No examples that use filters on iteration tag as far as I know. It works in Nunjucks, but isn’t supported in Liquid, I guess.

[zachleat]

Yeah, I personally found this to be an annoying discrepancy between Nunjucks and Liquid too.

There are a few fancy things you can do in Liquid iteration though. Peep the tests here: https://github.com/harttle/liquidjs/blob/master/test/integration/builtin/tags/for.ts#L176

Hope that’s useful, it was kinda buried.

[zachleat]

This is an automated message to let you know that a helpful response was posted to your issue and for the health of the repository issue tracker the issue will be closed. This is to help alleviate issues hanging open waiting for a response from the original poster.

If the response works to solve your problem—great! But if you’re still having problems, do not let the issue’s closing deter you if you have additional questions! Post another comment and I will reopen the issue. Thanks!

[whaleen]

Having trouble with Liquid's "where" filter (https://liquidjs.com/filters/where.html#sidebar)

Trying:

{% assign nerd_cards = collections.card | where: "class", "nerd" %}
    
{% for card in nerd_cards %}
  <li>
    {{ card.data.title }}
  </li>
{% endfor %}

Resulting in complete unfiltered list of ALL cards... :(

[pdehaan]

Having trouble with Liquid's "where" filter (liquidjs.com/filters/where.html#sidebar)

Possibly worth pointing out that it looks like eleventy@0.11.0 shipped with an older version of liquidjs which may not have had where filter implemented:

eleventy/package.json

Line 109 in 36c5022

"liquidjs": "^6.4.3",

(where the where filter might not have been added to liquidjs until v8.1.0 (per the CHANGELOG)

The latest Eleventy in GitHub looks like it might have the latest Liquidjs, so you could either try installing from GitHub directly, or the docs has a good section on bringing your own custom version of Liquidjs: https://www.11ty.dev/docs/languages/liquid/#optional-set-your-own-library-instance (if you'd rather try manually npm installing the latest liquidjs and using that directly until a new version of eleventy is released).

[whaleen]

Thanks for looking into this @pdehaan

I've tried my best to attempt both your suggestions.

Not sure how to use the latest version of Eleventy if it's newer than 0.11.0. I'm only running 'npm install' and getting the latest release. How can I install directly from GitHub?

And, for the other option, I've tried 'npm install liquidjs' and now am unsure about the instructions (https://www.11ty.dev/docs/languages/liquid/#optional-set-your-own-library-instance) to 'SET YOUR OWN LIBRARY INSTANCE' in the 11ty docs.

How do I make 11ty, presumably in .eleventy.js, to utilise the latest liquidjs I've now got in my package.json:

  "dependencies": {
    "liquidjs": "^9.16.1",

[pdehaan]

@whaleen Probably better to just inject the latest liquidjs instead of installing the bleeding edge from GitHub. See https://github.com/pdehaan/11ty-504

I forgot that the constructor and stuff changed between liquidjs@6 and liquidjs@9 (but thankfully there was a GitHub PR for updating docs https://github.com/11ty/11ty-website/pull/326/files):

1. https://github.com/pdehaan/11ty-504/blob/master/.eleventy.js shows how you can use your custom LiquidJS after running npm i liquidjs@latest -D.
2. https://github.com/pdehaan/11ty-504/blob/master/src/pages/home.liquid shows how you can use the where filter in liquidjs@9 (using some dummy data, I didnt try creating some fake collections to test if your exact use case would work or if there are potential issues w/ nested collection data -- although Where nested property is not supported harttle/liquidjs#178 implies nested data should work in v9.5.0+).

[anneke]

@pdehaan hi Peter, thanks for commenting! I have tried your suggestion, unfortunately I get this error. I'm probably not the only one who will come accross this page, so just to let others know, you might get the same issue.
I've installed the latest liquidjs version, but using your code in my eleventy config file I get this:

`TemplateContentRenderError` was thrown
> liquidEngine.renderer.renderTemplates(...).then is not a function, file:./content/nl/kitchensink.md, line:33, col:1

`RenderError` was thrown
> liquidEngine.renderer.renderTemplates(...).then is not a function

@pdehaan do you have any idea what causes this error? When I remove your code (still having installed a different liquid version), there's no problem. Except for the where filter seemingly not working yet :)

[anneke]

Ah, I see using the code on the Eleventy documentation page about this ( https://www.11ty.dev/docs/languages/liquid/#optional-set-your-own-library-instance currently ) does not work for me. I'll open a new issue :)

[pdehaan]

OK, looks like liquidjs@9 support was added via #1058 PR. There were a lot more internal changes in that PR than I would have guessed, so it might not currently be possible to shim a newer version of liquid w/ render support until 11ty v1.0.0 ships.

It doesn't look like there's an 11ty v1 beta or prerelease on npm yet, per:

npm info @11ty/eleventy versions --json
[
  "0.2.0",
  "0.2.1",
  # ...,
  "0.11.0-beta.2",
  "0.11.0-beta.3",
  "0.11.0-beta.4",
  "0.11.0",
  "0.11.1"
]

Not sure if you'd have any better luck installing via GitHub directly via npm i github:11ty/eleventy -S (until eleventy@1.0.0-beta appears on npm). I haven't used LiquidJS's new render tag yet, so I don't have any snippets handy to test locally to see if that'd work or not, I'm just making wild, unfounded guesses. :yolo:

[pdehaan]

Sorry, I think I started blending this thread with the #1579 discussion.

I was able to get the latest 11ty installed from GitHub using npm i github:11ty/eleventy -D and use the latest liquidjs@9 without any problems or workarounds (which should include the latest liquid tags and filters).

In the #1579 thread there is also a link to my sample repo which shows how you can install the latest version of liquidjs (if it's newer than what's already specified in the current 11ty package.json semver range) and set the custom liquid library since the syntax is slightly different than is currently documented in 11ty docs.

[anneke]

In the end I worked around it by adding an Eleventy filter, so instead of

{% assign blogposts = collections.published_posts | where:"locale", "en" %}

I can do

{% assign blogposts = collections.published_posts | getEnglish %}

Which uses this (in eleventy.js):

 eleventyConfig.addFilter("getEnglish", function (collection) {
    return collection.filter((post) => Boolean(post.data.locale == "en"));
  });

That was good enough for my usecase. I just wanted to leave this here for other googlers like me, updating the version of Liquid would be the cleaner solution of course :)