fix(ivy): support dynamic host attribute bindings (#29033)

In the @Component decorator, the 'host' field is an object which represents
host bindings. The type of this field is complex, but is generally of the
form {[key: string]: string}. Several different kinds of bindings can be
specified, depending on the structure of the key.

For example:

```
@Component({
  host: {'[prop]': 'someExpr'}
})
```

will bind an expression 'someExpr' to the property 'prop'. This is known to
be a property binding because of the square brackets in the binding key.

If the binding key is a plain string (no brackets or parentheses), then it
is known as an attribute binding. In this case, the right-hand side is not
interpreted as an expression, but is instead a constant string.

There is no actual requirement that at build time, these constant strings
are known to the compiler, but this was previously enforced as a side effect
of requiring the binding expressions for property and event bindings to be
statically known (as they need to be parsed). This commit breaks that
relationship and allows the attribute bindings to be dynamic. In the case
that they are dynamic, the references to the dynamic values are reflected
into the Ivy instructions for attribute bindings.

PR Close #29033
This commit is contained in:
Alex Rickabaugh
2019-02-27 16:54:37 -08:00
committed by Andrew Kushnir
parent a23a0bc3a4
commit b50283ed67
7 changed files with 113 additions and 82 deletions

View File

@ -6,12 +6,13 @@
* found in the LICENSE file at https://angular.io/license
*/
import {ConstantPool, Expression, ParseError, R3DirectiveMetadata, R3QueryMetadata, Statement, WrappedNodeExpr, compileDirectiveFromMetadata, makeBindingParser, parseHostBindings, verifyHostBindings} from '@angular/compiler';
import {ConstantPool, Expression, ParseError, ParsedHostBindings, R3DirectiveMetadata, R3QueryMetadata, Statement, WrappedNodeExpr, compileDirectiveFromMetadata, makeBindingParser, parseHostBindings, verifyHostBindings} from '@angular/compiler';
import * as ts from 'typescript';
import {ErrorCode, FatalDiagnosticError} from '../../diagnostics';
import {Reference} from '../../imports';
import {EnumValue, PartialEvaluator} from '../../partial_evaluator';
import {DynamicValue, EnumValue, PartialEvaluator} from '../../partial_evaluator';
import {ClassMember, ClassMemberKind, Decorator, ReflectionHost, filterToMembersWithDecorator, reflectObjectLiteral} from '../../reflection';
import {LocalModuleScopeRegistry} from '../../scope/src/local';
import {extractDirectiveGuards} from '../../scope/src/util';
@ -441,18 +442,14 @@ function isPropertyTypeMember(member: ClassMember): boolean {
member.kind === ClassMemberKind.Property;
}
type StringMap = {
[key: string]: string
type StringMap<T> = {
[key: string]: T;
};
function extractHostBindings(
metadata: Map<string, ts.Expression>, members: ClassMember[], evaluator: PartialEvaluator,
coreModule: string | undefined): {
attributes: StringMap,
listeners: StringMap,
properties: StringMap,
} {
let hostMetadata: StringMap = {};
coreModule: string | undefined): ParsedHostBindings {
let hostMetadata: StringMap<string|Expression> = {};
if (metadata.has('host')) {
const expr = metadata.get('host') !;
const hostMetaMap = evaluator.evaluate(expr);
@ -466,10 +463,19 @@ function extractHostBindings(
value = value.resolved;
}
if (typeof value !== 'string' || typeof key !== 'string') {
throw new Error(`Decorator host metadata must be a string -> string object, got ${value}`);
if (typeof key !== 'string') {
throw new Error(
`Decorator host metadata must be a string -> string object, but found unparseable key ${key}`);
}
if (typeof value == 'string') {
hostMetadata[key] = value;
} else if (value instanceof DynamicValue) {
hostMetadata[key] = new WrappedNodeExpr(value.node as ts.Expression);
} else {
throw new Error(
`Decorator host metadata must be a string -> string object, but found unparseable value ${value}`);
}
hostMetadata[key] = value;
});
}