Elgato_dark/angular
1
0
Fork 0
mirror of https://github.com/angular/angular synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor(compiler): add support style property units (#50489)

Browse source 
Add support for specifying units in style property bindings in the
template pipeline

PR Close #50489
This commit is contained in:
Miles Malerba 2023-06-09 20:31:43 -07:00 committed by Andrew Kushnir
parent b289332f2c
commit ebe10dd68f
5 changed files with 17 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_styling/style_bindings/TEST_CASES.json
View file

@ -52,8 +52,7 @@
"failureMessage": "Incorrect template",
"files": ["style_binding_suffixed.js"]
}
],
"skipForTemplatePipeline": true
]
},
{
"description": "should not create instructions for empty style bindings",

8
packages/compiler/src/template/pipeline/ir/src/ops/update.ts
View file

@ -131,16 +131,22 @@ export interface StylePropOp extends Op<UpdateOp>, ConsumesVarsTrait, DependsOnS
* Expression which is bound to the property.
*/
expression: o.Expression;
/**
* The unit of the expression value.
*/
unit: string|null;
}
/** Create a `StylePropOp`. */
export function createStylePropOp(
xref: XrefId, name: string, expression: o.Expression): StylePropOp {
xref: XrefId, name: string, expression: o.Expression, unit: string|null): StylePropOp {
return {
kind: OpKind.StyleProp,
target: xref,
name,
expression,
unit,
...TRAIT_DEPENDS_ON_SLOT_CONTEXT,
...TRAIT_CONSUMES_VARS,
...NEW_OP,

4
packages/compiler/src/template/pipeline/src/ingest.ts
View file

@ -252,7 +252,7 @@ function ingestBindings(
function ingestPropertyBinding(
view: ViewCompilation, xref: ir.XrefId,
bindingKind: ir.ElementAttributeKind.Binding|ir.ElementAttributeKind.Template,
{name, value, type}: t.BoundAttribute): void {
{name, value, type, unit}: t.BoundAttribute): void {
if (value instanceof e.ASTWithSource) {
value = value.ast;
}
@ -286,7 +286,7 @@ function ingestPropertyBinding(
if (bindingKind !== ir.ElementAttributeKind.Binding) {
throw Error('Unexpected style binding on ng-template');
}
view.update.push(ir.createStylePropOp(xref, name, convertAst(value, view.tpl)));
view.update.push(ir.createStylePropOp(xref, name, convertAst(value, view.tpl), unit));
break;
default:
// TODO: implement remaining binding types.

11
packages/compiler/src/template/pipeline/src/instruction.ts
View file

@ -140,11 +140,12 @@ export function property(name: string, expression: o.Expression): ir.UpdateOp {
]);
}
export function styleProp(name: string, expression: o.Expression): ir.UpdateOp {
return call(Identifiers.styleProp, [
o.literal(name),
expression,
]);
export function styleProp(name: string, expression: o.Expression, unit: string|null): ir.UpdateOp {
const args = [o.literal(name), expression];
if (unit !== null) {
args.push(o.literal(unit));
}
return call(Identifiers.styleProp, args);
}
export function styleMap(expression: o.Expression): ir.UpdateOp {

2
packages/compiler/src/template/pipeline/src/phases/reify.ts
View file

@ -122,7 +122,7 @@ function reifyUpdateOperations(_view: ViewCompilation, ops: ir.OpList<ir.UpdateO
ir.OpList.replace(op, ng.property(op.name, op.expression));
break;
case ir.OpKind.StyleProp:
ir.OpList.replace(op, ng.styleProp(op.name, op.expression));
ir.OpList.replace(op, ng.styleProp(op.name, op.expression, op.unit));
break;
case ir.OpKind.StyleMap:
ir.OpList.replace(op, ng.styleMap(op.expression));