Complex logic for conditionals

[kethinov]

HTML grammar doesn't permit things like:

<if location="homepage" or location="about" or location="etc">

This is because location is an attribute that is being duplicated on the same element multiple times.

To achieve this style of boolean logic, we need a new syntax that can evaluate JavaScript expressions directly:

<if eval="model.location === 'homepage' || model.location === 'about' || model.location === 'etc'">

Same for one-line ifs:

<!-- Returns true if location is homepage, about, or etc. -->
<p if-eval="model.location === 'homepage' || model.location === 'about' || model.location === 'etc'" true="class='shown'" false="class='hidden'">One-line if.</p>

Implementing this would also allow us to close:

• Add boolean logic to one line ifs #204

While implementing this, be sure to use eval('(expression)') to limit the potential for arbitrary code execution. Wrapping eval statements in parenthesis should limit the execution merely to evaluating conditionals to some degree.

A related thing to consider is adding <script eval> to let Teddy just execute scripts. If you need to do that, it probably means you're coding a template in a badly designed app, so I would rather encourage the developer to refactor things than give Teddy a way to sidestep technical debt. However it might possibly be worth implementing it as an off by default feature that has to be turned on with settings perhaps.

See also https://macarthur.me/posts/with