harttle / liquidjs

A simple, expressive, safe and Shopify compatible template engine in pure JavaScript.
https://liquidjs.com
MIT License
1.52k stars 238 forks source link

Add support for Not operator #575

Closed ybouane closed 1 year ago

ybouane commented 1 year ago

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: https://github.com/Shopify/liquid/issues/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 commented 1 year ago

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: https://github.com/harttle/liquidjs/blob/312000366d4f059590e3ecc72c14695a70b0f31d/test/e2e/issues.ts#L380-L391

ybouane commented 1 year ago

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

MariannaAtPlay commented 8 months ago

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 commented 8 months ago

@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