Templating wish list

[CITguy]

I'd like to use this issue to keep track of stuff I wish I could do with the templating logic.

Ideally, I wish I could use an established templating language like EJS or doT.js.

[CITguy]

One thing I can't do is a "default" fallback for when a property has multiple values.

Currently, I have to negate all other values to get a "default" / fallback condition.

{{?prop=a}}content A
{{?prop=b}}content B
{{?prop=c}}content C
..
{{!prop=a&prop=b&prop=c&prop=...}}fallback content

I wish I could use more of a "switch/case"-like syntax...

{{?prop=a}}content A
{{?prop=b}}content B
{{?prop=c}}content C
...
{{?prop=*}}fallback content

[CITguy]

Conditional blocks

Say I have a Button component with the following setup...

Button
  - iconOnly:boolean(false)
  - label:string('button')
  - iconLeft:instanceSwap
  - iconRight:instanceSwap

the following table illustrates which props apply for different values of iconOnly

	iconOnly == true	iconOnly == false
label		✅
iconLeft	✅	✅
iconRight		✅

Current

<my-button
  {{?property.iconRight}}iconright="{{property.iconRight}}"
  {{?property.iconOnly=true|property.iconLeft}}iconleft="{{property.iconLeft}}"
{{?property.iconOnly=true}}></my-button>
{{?property.iconOnly=false}}>
{{?property.iconOnly=false}}  {{property.label}}
{{?property.iconOnly=false}}</my-button>

Ideal

Using EJS syntax for block conditionals...

<% if (property.iconOnly == true) { %>
<my-button
  iconleft="{{property.iconLeft}}"
></my-button>
<% } else { %>
<my-button
  {{?property.iconRight}}iconright="{{property.iconRight}}"
  {{?property.iconLeft}}iconleft="{{property.iconLeft}}"
>
  {{property.label}}
</my-button>
<% } %>