Boolean Expressions and Interpolated Expression Modifiers in HTMT
I recently released the 2.0 version of HTMT, and with it came new features, such as boolean expressions and interpolated expression modifiers. I feel like these are the two features that make HTMT pretty feature-complete now and allow me to focus on other projects, such as the Markdown parser that powers Tobey, and further down the line porting Invobi over to C# from its current PHP implementation.
Anyway, let's dive into these features.
Boolean Expressions
Boolean expressions are an addition to the if
and unless
attributes in HTMT. While previously
you could only use these attributes to check if a variable was truthy or falsy, you can now use boolean expressions to check for equality,
So for example you could do something like this:
<div x:if="(a is b) or (b is c)">
<p>Either a is b or b is c</p>
</div>
It supports the following operators: is
, and
and or
, and you can use parentheses to group expressions. You can
not only compare variables, but also strings and numbers (ints and floats).
Of course a simple truthy/falsey check is still possible, but if HTMT detects any spaces in the expression, it will treat it as a boolean expression.
I do plan to add more operators in the future, such as is not
, is less than
, is more than
, and so forth. I like natural language,
so I want to make it as easy to read as possible, and something that designers can easily understand.
Interpolated Expression Modifiers
Interpolated expression modifiers are a way to modify the output of an expression. They are added to the end of an expression and are separated by a pipe |
,
allowing you to chain multiple modifiers together, like so:
<p x:inner-text="{title|uppercase|reversed}">
This would output the title
variable, but it would make the output uppercase and then reverse it.
Modifiers can also take arguments, like so:
<p x:inner-text="{title|truncate:10}">
This would truncate the title
variable to 10 characters.
The arguments can be anything, and it is up to the modifier to parse them into what they need. All of this is, of course, extendable, meaning that you can create your own modifiers and use them in your templates.
Currently, the following modifiers are available in HTMT:
uppercase
lowercase
reversed
truncate
capitalize
date
I don't have any need for more right now, but I'm open to pull requests if you want to contribute.
All in all I'm really happy with how HTMT is turning out, and I'm excited to see what people will build with it. It has been immensely useful to myself, and has been very fun to build. I really enjoy C# and the .NET ecosystem, and I'm looking forward to building more tools and libraries in this space.