Add support for Not operator

[ybouane]

Hey there,
I wanted to request a new feature that would solve a lot of issues when using Liquid. The possibility to add support for the Not operator (and maybe parenthesis, but let's just tackle not first). The usual response to this request is: just use the unless tag

But this is very often not enough or leads to other issues.
Here's an example:

My condition is a simple one (I don't feel like this is an edge case at all):
link && !button

The ideal code would be:

{% if link and not button %}
  <a href="{{ link }}">Lot more code here</a>
{% else %}
  <div>Lot more code here</div>
{% endif %}

But that doesn't work and to do it with a combination of if/unless, the code becomes:

{% if link  %}
  {% unless button %}
    <a href="{{ link }}">Lot more code here</a>
  {% else %}
    <div>Lot more code here</div>
  {% endunless %}
{% else %}
  <div>Lot more code here</div>
{% endif %}

As you notice the issue is that [Lot more code] here becomes redundant which is pretty annoying considering that adding this simple and obvious feature would solve all these cases.

This issue is not new, a lot of people have been requesting it in the past 11 years now:
Shopify/liquid#138

If the issue is that it's a breaking change, my argument would be that it's not. It's a new feature, past code would still work totally fine and new code would have access to this feature.

It could also be optionally enabled behind an option.

[harttle]

I think it's reasonable to have a not operator so expression in LiquidJS is now logic complete. Parenthesis seems not comply with "Liquid style", not adding it for now.

It is backward-compatible, I'm adding this feature in a minor version. Please check with v10.4.0, see this use case:

liquidjs/test/e2e/issues.ts

Lines 380 to 391 in 3120003

	it('#575 Add support for Not operator', async () => {
	const liquid = new Liquid()
	const tpl = `
	{% if link and not button %}
	<a href="{{ link }}">Lot more code here</a>
	{% else %}
	<div>Lot more code here</div>
	{% endif %}`
	const ctx = { link: 'https://example.com', button: false }
	const html = await liquid.parseAndRender(tpl, ctx)
	expect(html.trim()).to.equal('<a href="https://example.com">Lot more code here</a>')
	})

[ybouane]

Glad to hear that! Thank you for looking into it!

[MariannaAtPlay]

I'm adding this feature in a minor version. Please check with v10.4.0, see this use case:

Does this mean that the "not" operator is now available? How can I check which version I am running? I just tried it and it's not working for me... Have the docs been updated? Can't seem to find any reference to this operator...

[harttle]

@MariannaAtPlay , yes it's now available since 10.4.

Sorry the docs are not yet updated, but I created an example for you: https://liquidjs.com/playground.html#eyUgaWYgbGluayBhbmQgbm90IGJ1dHRvbiAlfSANCiAgIDxhIGhyZWY9Int7IGxpbmsgfX0iPkxvdCBtb3JlIGNvZGUgaGVyZTwvYT4gDQp7JSBlbHNlICV9IA0KICAgPGRpdj5Mb3QgbW9yZSBjb2RlIGhlcmU8L2Rpdj4gDQp7JSBlbmRpZiAlfQ==,ewogICJsaW5rIjogImh0dHBzOi8vd3d3LmJhaWR1LmNvbSIsCiAgImJ1dHRvbiI6IGZhbHNlCn0=

In JavaScript, you can get the version number by

require('liquidjs').version // or `liquidjs.version` in browsers

Or in npm package, you'll need this npm command to list the version

npm list liquidjs