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:
parent
a23a0bc3a4
commit
b50283ed67
|
@ -6,12 +6,13 @@
|
||||||
* found in the LICENSE file at https://angular.io/license
|
* 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 * as ts from 'typescript';
|
||||||
|
|
||||||
import {ErrorCode, FatalDiagnosticError} from '../../diagnostics';
|
import {ErrorCode, FatalDiagnosticError} from '../../diagnostics';
|
||||||
import {Reference} from '../../imports';
|
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 {ClassMember, ClassMemberKind, Decorator, ReflectionHost, filterToMembersWithDecorator, reflectObjectLiteral} from '../../reflection';
|
||||||
import {LocalModuleScopeRegistry} from '../../scope/src/local';
|
import {LocalModuleScopeRegistry} from '../../scope/src/local';
|
||||||
import {extractDirectiveGuards} from '../../scope/src/util';
|
import {extractDirectiveGuards} from '../../scope/src/util';
|
||||||
|
@ -441,18 +442,14 @@ function isPropertyTypeMember(member: ClassMember): boolean {
|
||||||
member.kind === ClassMemberKind.Property;
|
member.kind === ClassMemberKind.Property;
|
||||||
}
|
}
|
||||||
|
|
||||||
type StringMap = {
|
type StringMap<T> = {
|
||||||
[key: string]: string
|
[key: string]: T;
|
||||||
};
|
};
|
||||||
|
|
||||||
function extractHostBindings(
|
function extractHostBindings(
|
||||||
metadata: Map<string, ts.Expression>, members: ClassMember[], evaluator: PartialEvaluator,
|
metadata: Map<string, ts.Expression>, members: ClassMember[], evaluator: PartialEvaluator,
|
||||||
coreModule: string | undefined): {
|
coreModule: string | undefined): ParsedHostBindings {
|
||||||
attributes: StringMap,
|
let hostMetadata: StringMap<string|Expression> = {};
|
||||||
listeners: StringMap,
|
|
||||||
properties: StringMap,
|
|
||||||
} {
|
|
||||||
let hostMetadata: StringMap = {};
|
|
||||||
if (metadata.has('host')) {
|
if (metadata.has('host')) {
|
||||||
const expr = metadata.get('host') !;
|
const expr = metadata.get('host') !;
|
||||||
const hostMetaMap = evaluator.evaluate(expr);
|
const hostMetaMap = evaluator.evaluate(expr);
|
||||||
|
@ -466,10 +463,19 @@ function extractHostBindings(
|
||||||
value = value.resolved;
|
value = value.resolved;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof value !== 'string' || typeof key !== 'string') {
|
if (typeof key !== 'string') {
|
||||||
throw new Error(`Decorator host metadata must be a string -> string object, got ${value}`);
|
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;
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1306,6 +1306,31 @@ describe('ngtsc behavioral tests', () => {
|
||||||
expect(trim(jsContents)).toContain(trim(hostBindingsFn));
|
expect(trim(jsContents)).toContain(trim(hostBindingsFn));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('should accept dynamic host attribute bindings', () => {
|
||||||
|
env.tsconfig();
|
||||||
|
env.write('other.d.ts', `
|
||||||
|
export declare const foo: any;
|
||||||
|
`);
|
||||||
|
env.write('test.ts', `
|
||||||
|
import {Component} from '@angular/core';
|
||||||
|
import {foo} from './other';
|
||||||
|
|
||||||
|
const test = foo.bar();
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'test',
|
||||||
|
template: '',
|
||||||
|
host: {
|
||||||
|
'test': test,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
export class TestCmp {}
|
||||||
|
`);
|
||||||
|
env.driveMain();
|
||||||
|
const jsContents = env.getContents('test.js');
|
||||||
|
expect(jsContents).toContain('i0.ɵelementHostAttrs(ctx, ["test", test])');
|
||||||
|
});
|
||||||
|
|
||||||
it('should accept enum values as host bindings', () => {
|
it('should accept enum values as host bindings', () => {
|
||||||
env.tsconfig();
|
env.tsconfig();
|
||||||
env.write(`test.ts`, `
|
env.write(`test.ts`, `
|
||||||
|
|
|
@ -99,7 +99,7 @@ export {compileInjector, compileNgModule, R3InjectorMetadata, R3NgModuleMetadata
|
||||||
export {compilePipeFromMetadata, R3PipeMetadata} from './render3/r3_pipe_compiler';
|
export {compilePipeFromMetadata, R3PipeMetadata} from './render3/r3_pipe_compiler';
|
||||||
export {makeBindingParser, parseTemplate} from './render3/view/template';
|
export {makeBindingParser, parseTemplate} from './render3/view/template';
|
||||||
export {R3Reference} from './render3/util';
|
export {R3Reference} from './render3/util';
|
||||||
export {compileBaseDefFromMetadata, R3BaseRefMetaData, compileComponentFromMetadata, compileDirectiveFromMetadata, parseHostBindings, verifyHostBindings} from './render3/view/compiler';
|
export {compileBaseDefFromMetadata, R3BaseRefMetaData, compileComponentFromMetadata, compileDirectiveFromMetadata, parseHostBindings, ParsedHostBindings, verifyHostBindings} from './render3/view/compiler';
|
||||||
export {publishFacade} from './jit_compiler_facade';
|
export {publishFacade} from './jit_compiler_facade';
|
||||||
// This file only reexports content of the `src` folder. Keep it that way.
|
// This file only reexports content of the `src` folder. Keep it that way.
|
||||||
|
|
||||||
|
|
|
@ -21,7 +21,7 @@ import {R3InjectorMetadata, R3NgModuleMetadata, compileInjector, compileNgModule
|
||||||
import {compilePipeFromMetadata} from './render3/r3_pipe_compiler';
|
import {compilePipeFromMetadata} from './render3/r3_pipe_compiler';
|
||||||
import {R3Reference} from './render3/util';
|
import {R3Reference} from './render3/util';
|
||||||
import {R3DirectiveMetadata, R3QueryMetadata} from './render3/view/api';
|
import {R3DirectiveMetadata, R3QueryMetadata} from './render3/view/api';
|
||||||
import {compileComponentFromMetadata, compileDirectiveFromMetadata, parseHostBindings, verifyHostBindings} from './render3/view/compiler';
|
import {ParsedHostBindings, compileComponentFromMetadata, compileDirectiveFromMetadata, parseHostBindings, verifyHostBindings} from './render3/view/compiler';
|
||||||
import {makeBindingParser, parseTemplate} from './render3/view/template';
|
import {makeBindingParser, parseTemplate} from './render3/view/template';
|
||||||
import {DomElementSchemaRegistry} from './schema/dom_element_schema_registry';
|
import {DomElementSchemaRegistry} from './schema/dom_element_schema_registry';
|
||||||
|
|
||||||
|
@ -281,11 +281,7 @@ function convertR3DependencyMetadataArray(facades: R3DependencyMetadataFacade[]
|
||||||
|
|
||||||
function extractHostBindings(
|
function extractHostBindings(
|
||||||
host: {[key: string]: string}, propMetadata: {[key: string]: any[]},
|
host: {[key: string]: string}, propMetadata: {[key: string]: any[]},
|
||||||
sourceSpan: ParseSourceSpan): {
|
sourceSpan: ParseSourceSpan): ParsedHostBindings {
|
||||||
attributes: StringMap,
|
|
||||||
listeners: StringMap,
|
|
||||||
properties: StringMap,
|
|
||||||
} {
|
|
||||||
// First parse the declarations from the metadata.
|
// First parse the declarations from the metadata.
|
||||||
const bindings = parseHostBindings(host || {});
|
const bindings = parseHostBindings(host || {});
|
||||||
|
|
||||||
|
|
|
@ -59,9 +59,9 @@ export interface R3DirectiveMetadata {
|
||||||
*/
|
*/
|
||||||
host: {
|
host: {
|
||||||
/**
|
/**
|
||||||
* A mapping of attribute binding keys to unparsed expressions.
|
* A mapping of attribute binding keys to `o.Expression`s.
|
||||||
*/
|
*/
|
||||||
attributes: {[key: string]: string};
|
attributes: {[key: string]: o.Expression};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A mapping of event binding keys to unparsed expressions.
|
* A mapping of event binding keys to unparsed expressions.
|
||||||
|
@ -72,6 +72,8 @@ export interface R3DirectiveMetadata {
|
||||||
* A mapping of property binding keys to unparsed expressions.
|
* A mapping of property binding keys to unparsed expressions.
|
||||||
*/
|
*/
|
||||||
properties: {[key: string]: string};
|
properties: {[key: string]: string};
|
||||||
|
|
||||||
|
specialAttributes: {styleAttr?: string; classAttr?: string;}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -82,30 +82,18 @@ function baseDirectiveFields(
|
||||||
const contextVarExp = o.variable(CONTEXT_NAME);
|
const contextVarExp = o.variable(CONTEXT_NAME);
|
||||||
const styleBuilder = new StylingBuilder(elVarExp, contextVarExp);
|
const styleBuilder = new StylingBuilder(elVarExp, contextVarExp);
|
||||||
|
|
||||||
const allOtherAttributes: any = {};
|
const {styleAttr, classAttr} = meta.host.specialAttributes;
|
||||||
const attrNames = Object.getOwnPropertyNames(meta.host.attributes);
|
if (styleAttr !== undefined) {
|
||||||
for (let i = 0; i < attrNames.length; i++) {
|
styleBuilder.registerStyleAttr(styleAttr);
|
||||||
const attr = attrNames[i];
|
}
|
||||||
const value = meta.host.attributes[attr];
|
if (classAttr !== undefined) {
|
||||||
switch (attr) {
|
styleBuilder.registerClassAttr(classAttr);
|
||||||
// style attributes are handled in the styling context
|
|
||||||
case 'style':
|
|
||||||
styleBuilder.registerStyleAttr(value);
|
|
||||||
break;
|
|
||||||
// class attributes are handled in the styling context
|
|
||||||
case 'class':
|
|
||||||
styleBuilder.registerClassAttr(value);
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
allOtherAttributes[attr] = value;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// e.g. `hostBindings: (rf, ctx, elIndex) => { ... }
|
// e.g. `hostBindings: (rf, ctx, elIndex) => { ... }
|
||||||
definitionMap.set(
|
definitionMap.set(
|
||||||
'hostBindings', createHostBindingsFunction(
|
'hostBindings', createHostBindingsFunction(
|
||||||
meta, elVarExp, contextVarExp, allOtherAttributes, styleBuilder,
|
meta, elVarExp, contextVarExp, meta.host.attributes, styleBuilder,
|
||||||
bindingParser, constantPool, hostVarsCount));
|
bindingParser, constantPool, hostVarsCount));
|
||||||
|
|
||||||
// e.g 'inputs: {a: 'a'}`
|
// e.g 'inputs: {a: 'a'}`
|
||||||
|
@ -412,34 +400,8 @@ export function compileComponentFromRender2(
|
||||||
function directiveMetadataFromGlobalMetadata(
|
function directiveMetadataFromGlobalMetadata(
|
||||||
directive: CompileDirectiveMetadata, outputCtx: OutputContext,
|
directive: CompileDirectiveMetadata, outputCtx: OutputContext,
|
||||||
reflector: CompileReflector): R3DirectiveMetadata {
|
reflector: CompileReflector): R3DirectiveMetadata {
|
||||||
const summary = directive.toSummary();
|
// The global-analysis based Ivy mode in ngc is no longer utilized/supported.
|
||||||
const name = identifierName(directive.type) !;
|
throw new Error('unsupported');
|
||||||
name || error(`Cannot resolver the name of ${directive.type}`);
|
|
||||||
|
|
||||||
return {
|
|
||||||
name,
|
|
||||||
type: outputCtx.importExpr(directive.type.reference),
|
|
||||||
typeArgumentCount: 0,
|
|
||||||
typeSourceSpan:
|
|
||||||
typeSourceSpan(directive.isComponent ? 'Component' : 'Directive', directive.type),
|
|
||||||
selector: directive.selector,
|
|
||||||
deps: dependenciesFromGlobalMetadata(directive.type, outputCtx, reflector),
|
|
||||||
queries: queriesFromGlobalMetadata(directive.queries, outputCtx),
|
|
||||||
lifecycle: {
|
|
||||||
usesOnChanges:
|
|
||||||
directive.type.lifecycleHooks.some(lifecycle => lifecycle == LifecycleHooks.OnChanges),
|
|
||||||
},
|
|
||||||
host: {
|
|
||||||
attributes: directive.hostAttributes,
|
|
||||||
listeners: summary.hostListeners,
|
|
||||||
properties: summary.hostProperties,
|
|
||||||
},
|
|
||||||
inputs: directive.inputs,
|
|
||||||
outputs: directive.outputs,
|
|
||||||
usesInheritance: false,
|
|
||||||
exportAs: null,
|
|
||||||
providers: directive.providers.length > 0 ? new o.WrappedNodeExpr(directive.providers) : null
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -501,11 +463,12 @@ function createDirectiveSelector(selector: string | null): o.Expression {
|
||||||
return asLiteral(core.parseSelectorToR3Selector(selector));
|
return asLiteral(core.parseSelectorToR3Selector(selector));
|
||||||
}
|
}
|
||||||
|
|
||||||
function convertAttributesToExpressions(attributes: any): o.Expression[] {
|
function convertAttributesToExpressions(attributes: {[name: string]: o.Expression}):
|
||||||
|
o.Expression[] {
|
||||||
const values: o.Expression[] = [];
|
const values: o.Expression[] = [];
|
||||||
for (let key of Object.getOwnPropertyNames(attributes)) {
|
for (let key of Object.getOwnPropertyNames(attributes)) {
|
||||||
const value = attributes[key];
|
const value = attributes[key];
|
||||||
values.push(o.literal(key), o.literal(value));
|
values.push(o.literal(key), value);
|
||||||
}
|
}
|
||||||
return values;
|
return values;
|
||||||
}
|
}
|
||||||
|
@ -622,8 +585,9 @@ function createViewQueriesFunction(
|
||||||
// Return a host binding function or null if one is not necessary.
|
// Return a host binding function or null if one is not necessary.
|
||||||
function createHostBindingsFunction(
|
function createHostBindingsFunction(
|
||||||
meta: R3DirectiveMetadata, elVarExp: o.ReadVarExpr, bindingContext: o.ReadVarExpr,
|
meta: R3DirectiveMetadata, elVarExp: o.ReadVarExpr, bindingContext: o.ReadVarExpr,
|
||||||
staticAttributesAndValues: any[], styleBuilder: StylingBuilder, bindingParser: BindingParser,
|
staticAttributesAndValues: {[name: string]: o.Expression}, styleBuilder: StylingBuilder,
|
||||||
constantPool: ConstantPool, hostVarsCount: number): o.Expression|null {
|
bindingParser: BindingParser, constantPool: ConstantPool, hostVarsCount: number): o.Expression|
|
||||||
|
null {
|
||||||
const createStatements: o.Statement[] = [];
|
const createStatements: o.Statement[] = [];
|
||||||
const updateStatements: o.Statement[] = [];
|
const updateStatements: o.Statement[] = [];
|
||||||
|
|
||||||
|
@ -826,7 +790,9 @@ function createHostListeners(
|
||||||
function metadataAsSummary(meta: R3DirectiveMetadata): CompileDirectiveSummary {
|
function metadataAsSummary(meta: R3DirectiveMetadata): CompileDirectiveSummary {
|
||||||
// clang-format off
|
// clang-format off
|
||||||
return {
|
return {
|
||||||
hostAttributes: meta.host.attributes,
|
// This is used by the BindingParser, which only deals with listeners and properties. There's no
|
||||||
|
// need to pass attributes to it.
|
||||||
|
hostAttributes: {},
|
||||||
hostListeners: meta.host.listeners,
|
hostListeners: meta.host.listeners,
|
||||||
hostProperties: meta.host.properties,
|
hostProperties: meta.host.properties,
|
||||||
} as CompileDirectiveSummary;
|
} as CompileDirectiveSummary;
|
||||||
|
@ -855,32 +821,65 @@ const enum HostBindingGroup {
|
||||||
// Defines Host Bindings structure that contains attributes, listeners, and properties,
|
// Defines Host Bindings structure that contains attributes, listeners, and properties,
|
||||||
// parsed from the `host` object defined for a Type.
|
// parsed from the `host` object defined for a Type.
|
||||||
export interface ParsedHostBindings {
|
export interface ParsedHostBindings {
|
||||||
attributes: {[key: string]: string};
|
attributes: {[key: string]: o.Expression};
|
||||||
listeners: {[key: string]: string};
|
listeners: {[key: string]: string};
|
||||||
properties: {[key: string]: string};
|
properties: {[key: string]: string};
|
||||||
|
specialAttributes: {styleAttr?: string; classAttr?: string;};
|
||||||
}
|
}
|
||||||
|
|
||||||
export function parseHostBindings(host: {[key: string]: string}): ParsedHostBindings {
|
export function parseHostBindings(host: {[key: string]: string | o.Expression}):
|
||||||
const attributes: {[key: string]: string} = {};
|
ParsedHostBindings {
|
||||||
|
const attributes: {[key: string]: o.Expression} = {};
|
||||||
const listeners: {[key: string]: string} = {};
|
const listeners: {[key: string]: string} = {};
|
||||||
const properties: {[key: string]: string} = {};
|
const properties: {[key: string]: string} = {};
|
||||||
|
const specialAttributes: {styleAttr?: string; classAttr?: string;} = {};
|
||||||
|
|
||||||
Object.keys(host).forEach(key => {
|
for (const key of Object.keys(host)) {
|
||||||
const value = host[key];
|
const value = host[key];
|
||||||
const matches = key.match(HOST_REG_EXP);
|
const matches = key.match(HOST_REG_EXP);
|
||||||
|
|
||||||
if (matches === null) {
|
if (matches === null) {
|
||||||
attributes[key] = value;
|
switch (key) {
|
||||||
|
case 'class':
|
||||||
|
if (typeof value !== 'string') {
|
||||||
|
// TODO(alxhub): make this a diagnostic.
|
||||||
|
throw new Error(`Class binding must be string`);
|
||||||
|
}
|
||||||
|
specialAttributes.classAttr = value;
|
||||||
|
break;
|
||||||
|
case 'style':
|
||||||
|
if (typeof value !== 'string') {
|
||||||
|
// TODO(alxhub): make this a diagnostic.
|
||||||
|
throw new Error(`Style binding must be string`);
|
||||||
|
}
|
||||||
|
specialAttributes.styleAttr = value;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
if (typeof value === 'string') {
|
||||||
|
attributes[key] = o.literal(value);
|
||||||
|
} else {
|
||||||
|
attributes[key] = value;
|
||||||
|
}
|
||||||
|
}
|
||||||
} else if (matches[HostBindingGroup.Binding] != null) {
|
} else if (matches[HostBindingGroup.Binding] != null) {
|
||||||
|
if (typeof value !== 'string') {
|
||||||
|
// TODO(alxhub): make this a diagnostic.
|
||||||
|
throw new Error(`Property binding must be string`);
|
||||||
|
}
|
||||||
// synthetic properties (the ones that have a `@` as a prefix)
|
// synthetic properties (the ones that have a `@` as a prefix)
|
||||||
// are still treated the same as regular properties. Therefore
|
// are still treated the same as regular properties. Therefore
|
||||||
// there is no point in storing them in a separate map.
|
// there is no point in storing them in a separate map.
|
||||||
properties[matches[HostBindingGroup.Binding]] = value;
|
properties[matches[HostBindingGroup.Binding]] = value;
|
||||||
} else if (matches[HostBindingGroup.Event] != null) {
|
} else if (matches[HostBindingGroup.Event] != null) {
|
||||||
|
if (typeof value !== 'string') {
|
||||||
|
// TODO(alxhub): make this a diagnostic.
|
||||||
|
throw new Error(`Event binding must be string`);
|
||||||
|
}
|
||||||
listeners[matches[HostBindingGroup.Event]] = value;
|
listeners[matches[HostBindingGroup.Event]] = value;
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
return {attributes, listeners, properties};
|
return {attributes, listeners, properties, specialAttributes};
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -258,7 +258,10 @@ export class StylingBuilder {
|
||||||
buildParams: () => {
|
buildParams: () => {
|
||||||
// params => elementHostAttrs(directive, attrs)
|
// params => elementHostAttrs(directive, attrs)
|
||||||
this.populateInitialStylingAttrs(attrs);
|
this.populateInitialStylingAttrs(attrs);
|
||||||
return [this._directiveExpr !, getConstantLiteralFromArray(constantPool, attrs)];
|
const attrArray = !attrs.some(attr => attr instanceof o.WrappedNodeExpr) ?
|
||||||
|
getConstantLiteralFromArray(constantPool, attrs) :
|
||||||
|
o.literalArr(attrs);
|
||||||
|
return [this._directiveExpr !, attrArray];
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue