feat(template): support spread syntax ...

[bigopon]

📖 Description

When the number of bindable properties grows bigger, and the binding are repetitive, it's quite a boilerplate having to specify everything, as per the examples in #1477 #1258 :

Desirable:

  <k-button  repeat.for="action of actions" ...action>${action.content}</k-button>
  <k-button  repeat.for="action of actions" ...$bindables="action">${action.content}</k-button>
  <k-button  repeat.for="action of actions" $bindables.spread="action">${action.content}</k-button>

Not desirable

  <k-button color.bind="action.color"
            size.bind="action.size"
            type.bind="action.type" 
            repeat.for="action of actions">${action.content}</k-button>  

This PR adds support for spread syntaxes:

• full: $bindables.spread="expression"
• short: ...$bindables="expression"
• shorter: ...expresion

Note:

• binding created via $bindables will have mode to-view, ignoring any default mode of the target bindable properties
• If the same object is returned from evaluating the expression, the spread binding won't try to rebind its inner bindings. This means mutating and then reassigning won't result in new binding, instead, give the spread binding a new object.
• fix an issue with spreading ...$attrs not consider element bindable properties before custom attribute

🎫 Issues

Close #1477
Close #1258

cc @fkleuver @Sayan751 @brandonseydel @Vheissu

[codecov]

Codecov Report

Attention: Patch coverage is 92.85714% with 10 lines in your changes are missing coverage. Please review.

Project coverage is 88.57%. Comparing base (eaf2cd7) to head (16a6bb3).
Report is 4 commits behind head on master.

Files	Patch %	Lines
...ackages/runtime-html/src/binding/spread-binding.ts	88.05%	8 Missing ⚠️
...-html/src/resources/template-controllers/portal.ts	0.00%	1 Missing ⚠️
...ackages/template-compiler/src/template-compiler.ts	97.91%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #1965      +/-   ##
==========================================
- Coverage   88.62%   88.57%   -0.05%     
==========================================
  Files         272      272              
  Lines       22823    22909      +86     
  Branches     5292     5302      +10     
==========================================
+ Hits        20226    20292      +66     
- Misses       2597     2617      +20     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[bigopon]

https://docs.aurelia.io/~/revisions/ctGO74i4b489eQEAiUE7/components/bindable-properties#bindables-spreading

[brandonseydel]

How does order work or is there an error? e.g.

<mb-button small.bind="false" $bindables.spread="{small:true}" />

[bigopon]

How does order work or is there an error? e.g.

<mb-button small.bind="false" $bindables.spread="{small:true}" />

It will create 2 binding in the order seen in the template.

[Vheissu]

Amazing work @bigopon it's actually awesome how very little code this is to implement.

[Sayan751]

Thanks @bigopon for this nice addition!

[bigopon]

@fkleuver @Sayan751 I ended up giving a special treatment to ... syntax, embed the knowledge of it into the compiler. I think it's more appropriate this way, as there are syntax, parser, command, instruction and order matters to juggle, separating the work out into different concepts likely gonna results in leaky abstraction.

[bigopon]

@Sayan751 I'll go ahead with a new beta for the weekend, but will address any comments you have.

[Sayan751]

Great work @bigopon! Just some minor comments and questions.