honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(ivy): compiler should generate bindings to host attrs properly (#26973) 

PR Close #26973
This commit is contained in:
Kara Erickson 2018-11-06 19:05:06 -08:00
parent a4398aa17f
commit 9e26216c40
7 changed files with 336 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
packages/compiler-cli/test/compliance/r3_compiler_compliance_spec.ts
View File

@ -559,87 +559,6 @@ describe('compiler compliance', () => {
expectEmit(source, OtherDirectiveDefinition, 'Incorrect OtherDirective.ngDirectiveDef');
});
it('should support host bindings', () => {
const files = {
app: {
'spec.ts': `
import {Directive, HostBinding, NgModule} from '@angular/core';
@Directive({selector: '[hostBindingDir]'})
export class HostBindingDir {
@HostBinding('id') dirId = 'some id';
}
@NgModule({declarations: [HostBindingDir]})
export class MyModule {}
`
}
};
const HostBindingDirDeclaration = `
HostBindingDir.ngDirectiveDef = $r3$.ɵdefineDirective({
type: HostBindingDir,
selectors: [["", "hostBindingDir", ""]],
factory: function HostBindingDir_Factory(t) { return new (t || HostBindingDir)(); },
hostBindings: function HostBindingDir_HostBindings(dirIndex, elIndex) {
$r3$.ɵelementProperty(elIndex, "id", $r3$.ɵbind($r3$.ɵload(dirIndex).dirId));
},
hostVars: 1
});
`;
const result = compile(files, angularFiles);
const source = result.source;
expectEmit(source, HostBindingDirDeclaration, 'Invalid host binding code');
});
it('should support host bindings with pure functions', () => {
const files = {
app: {
'spec.ts': `
import {Component, NgModule} from '@angular/core';
@Component({
selector: 'host-binding-comp',
host: {
'[id]': '["red", id]'
},
template: ''
})
export class HostBindingComp {
id = 'some id';
}
@NgModule({declarations: [HostBindingComp]})
export class MyModule {}
`
}
};
const HostBindingCompDeclaration = `
const $ff$ = function ($v$) { return ["red", $v$]; };
…
HostBindingComp.ngComponentDef = $r3$.ɵdefineComponent({
type: HostBindingComp,
selectors: [["host-binding-comp"]],
factory: function HostBindingComp_Factory(t) { return new (t || HostBindingComp)(); },
hostBindings: function HostBindingComp_HostBindings(dirIndex, elIndex) {
$r3$.ɵelementProperty(elIndex, "id", $r3$.ɵbind($r3$.ɵpureFunction1(1, $ff$, $r3$.ɵload(dirIndex).id)));
},
hostVars: 3,
consts: 0,
vars: 0,
template: function HostBindingComp_Template(rf, ctx) {}
});
`;
const result = compile(files, angularFiles);
const source = result.source;
expectEmit(source, HostBindingCompDeclaration, 'Invalid host binding code');
});
it('should not treat ElementRef, ViewContainerRef, or ChangeDetectorRef specially when injecting',
() => {
const files = {

160
packages/compiler-cli/test/compliance/r3_view_compiler_binding_spec.ts
View File

@ -122,6 +122,166 @@ describe('compiler compliance: bindings', () => {
});
});
describe('host bindings', () => {
it('should support host bindings', () => {
const files = {
app: {
'spec.ts': `
import {Directive, HostBinding, NgModule} from '@angular/core';
@Directive({selector: '[hostBindingDir]'})
export class HostBindingDir {
@HostBinding('id') dirId = 'some id';
}
@NgModule({declarations: [HostBindingDir]})
export class MyModule {}
`
}
};
const HostBindingDirDeclaration = `
HostBindingDir.ngDirectiveDef = $r3$.ɵdefineDirective({
type: HostBindingDir,
selectors: [["", "hostBindingDir", ""]],
factory: function HostBindingDir_Factory(t) { return new (t || HostBindingDir)(); },
hostBindings: function HostBindingDir_HostBindings(dirIndex, elIndex) {
$r3$.ɵelementProperty(elIndex, "id", $r3$.ɵbind($r3$.ɵload(dirIndex).dirId));
},
hostVars: 1
});
`;
const result = compile(files, angularFiles);
const source = result.source;
expectEmit(source, HostBindingDirDeclaration, 'Invalid host binding code');
});
it('should support host bindings with pure functions', () => {
const files = {
app: {
'spec.ts': `
import {Component, NgModule} from '@angular/core';
@Component({
selector: 'host-binding-comp',
host: {
'[id]': '["red", id]'
},
template: ''
})
export class HostBindingComp {
id = 'some id';
}
@NgModule({declarations: [HostBindingComp]})
export class MyModule {}
`
}
};
const HostBindingCompDeclaration = `
const $ff$ = function ($v$) { return ["red", $v$]; };
…
HostBindingComp.ngComponentDef = $r3$.ɵdefineComponent({
type: HostBindingComp,
selectors: [["host-binding-comp"]],
factory: function HostBindingComp_Factory(t) { return new (t || HostBindingComp)(); },
hostBindings: function HostBindingComp_HostBindings(dirIndex, elIndex) {
$r3$.ɵelementProperty(elIndex, "id", $r3$.ɵbind($r3$.ɵpureFunction1(1, $ff$, $r3$.ɵload(dirIndex).id)));
},
hostVars: 3,
consts: 0,
vars: 0,
template: function HostBindingComp_Template(rf, ctx) {}
});
`;
const result = compile(files, angularFiles);
const source = result.source;
expectEmit(source, HostBindingCompDeclaration, 'Invalid host binding code');
});
it('should support host attribute bindings', () => {
const files = {
app: {
'spec.ts': `
import {Directive, NgModule} from '@angular/core';
@Directive({
selector: '[hostAttributeDir]',
host: {
'[attr.required]': 'required'
}
})
export class HostAttributeDir {
required = true;
}
@NgModule({declarations: [HostAttributeDir]})
export class MyModule {}
`
}
};
const HostAttributeDirDeclaration = `
HostAttributeDir.ngDirectiveDef = $r3$.ɵdefineDirective({
type: HostAttributeDir,
selectors: [["", "hostAttributeDir", ""]],
factory: function HostAttributeDir_Factory(t) { return new (t || HostAttributeDir)(); },
hostBindings: function HostAttributeDir_HostBindings(dirIndex, elIndex) {
$r3$.ɵelementAttribute(elIndex, "required", $r3$.ɵbind($r3$.ɵload(dirIndex).required));
},
hostVars: 1
});
`;
const result = compile(files, angularFiles);
const source = result.source;
expectEmit(source, HostAttributeDirDeclaration, 'Invalid host attribute code');
});
it('should support host attributes', () => {
const files = {
app: {
'spec.ts': `
import {Directive, NgModule} from '@angular/core';
@Directive({
selector: '[hostAttributeDir]',
host: {
'aria-label': 'label'
}
})
export class HostAttributeDir {
}
@NgModule({declarations: [HostAttributeDir]})
export class MyModule {}
`
}
};
const HostAttributeDirDeclaration = `
HostAttributeDir.ngDirectiveDef = $r3$.ɵdefineDirective({
type: HostAttributeDir,
selectors: [["", "hostAttributeDir", ""]],
factory: function HostAttributeDir_Factory(t) { return new (t || HostAttributeDir)(); },
attributes: ["aria-label", "label"]
});
`;
const result = compile(files, angularFiles);
const source = result.source;
expectEmit(source, HostAttributeDirDeclaration, 'Invalid host attribute code');
});
});
describe('non bindable behavior', () => {
const getAppFiles = (template: string = ''): MockDirectory => ({
app: {

2
packages/compiler-cli/test/ngtsc/ngtsc_spec.ts
View File

@ -477,7 +477,7 @@ describe('ngtsc behavioral tests', () => {
env.driveMain();
const jsContents = env.getContents('test.js');
expect(jsContents)
.toContain(`i0.ɵelementProperty(elIndex, "attr.hello", i0.ɵbind(i0.ɵload(dirIndex).foo));`);
.toContain(`i0.ɵelementAttribute(elIndex, "hello", i0.ɵbind(i0.ɵload(dirIndex).foo));`);
expect(jsContents)
.toContain(`i0.ɵelementProperty(elIndex, "prop", i0.ɵbind(i0.ɵload(dirIndex).bar));`);
expect(jsContents)

35
packages/compiler/src/render3/view/compiler.ts
View File

@ -32,6 +32,10 @@ import {CONTEXT_NAME, DefinitionMap, RENDER_FLAGS, TEMPORARY_NAME, asLiteral, co
const EMPTY_ARRAY: any[] = [];
// This regex matches any binding names that contain the "attr." prefix, e.g. "attr.required"
// If there is a match, the first matching group will contain the attribute name to bind.
const ATTR_REGEX = /attr\.([^\]]+)/;
function baseDirectiveFields(
meta: R3DirectiveMetadata, constantPool: ConstantPool,
bindingParser: BindingParser): {definitionMap: DefinitionMap, statements: o.Statement[]} {
@ -625,11 +629,14 @@ function createHostBindingsFunction(
const bindingExpr = convertPropertyBinding(
null, bindingContext, value, 'b', BindingForm.TrySimple,
() => error('Unexpected interpolation'));
const {bindingName, instruction} = getBindingNameAndInstruction(binding.name);
statements.push(...bindingExpr.stmts);
statements.push(o.importExpr(R3.elementProperty)
statements.push(o.importExpr(instruction)
.callFn([
o.variable('elIndex'),
o.literal(binding.name),
o.literal(bindingName),
o.importExpr(R3.bind).callFn([bindingExpr.currValExpr]),
])
.toStmt());
@ -649,6 +656,22 @@ function createHostBindingsFunction(
return null;
}
function getBindingNameAndInstruction(bindingName: string):
{bindingName: string, instruction: o.ExternalReference} {
let instruction !: o.ExternalReference;
// Check to see if this is an attr binding or a property binding
const attrMatches = bindingName.match(ATTR_REGEX);
if (attrMatches) {
bindingName = attrMatches[1];
instruction = R3.elementAttribute;
} else {
instruction = R3.elementProperty;
}
return {bindingName, instruction};
}
function createFactoryExtraStatementsFn(meta: R3DirectiveMetadata, bindingParser: BindingParser):
((instance: o.Expression) => o.Statement[])|null {
const eventBindings =
@ -698,8 +721,8 @@ const HOST_REG_EXP = /^(?:(?:\[([^\]]+)\])|(?:\(([^\)]+)\)))|(\@[-\w]+)$/;
// Represents the groups in the above regex.
const enum HostBindingGroup {
// group 1: "prop" from "[prop]"
Property = 1,
// group 1: "prop" from "[prop]", or "attr.role" from "[attr.role]"
Binding = 1,
// group 2: "event" from "(event)"
Event = 2,
@ -724,8 +747,8 @@ export function parseHostBindings(host: {[key: string]: string}): {
const matches = key.match(HOST_REG_EXP);
if (matches === null) {
attributes[key] = value;
} else if (matches[HostBindingGroup.Property] != null) {
properties[matches[HostBindingGroup.Property]] = value;
} else if (matches[HostBindingGroup.Binding] != null) {
properties[matches[HostBindingGroup.Binding]] = value;
} else if (matches[HostBindingGroup.Event] != null) {
listeners[matches[HostBindingGroup.Event]] = value;
} else if (matches[HostBindingGroup.Animation] != null) {

24
packages/core/test/render3/host_binding_spec.ts
View File

@ -622,4 +622,28 @@ describe('host bindings', () => {
expect(hostElement.title).toBe('other title');
});
it('should support host attributes', () => {
// host: {
// 'role': 'listbox'
// }
class HostAttributeDir {
static ngDirectiveDef = defineDirective({
selectors: [['', 'hostAttributeDir', '']],
type: HostAttributeDir,
factory: () => new HostAttributeDir(),
attributes: ['role', 'listbox']
});
}
// <div hostAttributeDir></div>
const App = createComponent('app', (rf: RenderFlags, ctx: any) => {
if (rf & RenderFlags.Create) {
element(0, 'div', ['hostAttributeDir', '']);
}
}, 1, 0, [HostAttributeDir]);
const fixture = new ComponentFixture(App);
expect(fixture.html).toEqual(`<div hostattributedir="" role="listbox"></div>`);
});
});

1
packages/forms/test/reactive_integration_spec.ts
View File

@ -1918,7 +1918,6 @@ import {MyInput, MyInputForm} from './value_accessor_integration_spec';
expect(form.valid).toEqual(true);
});
fixmeIvy('host attribute instructions are not generated properly') &&
it('changes on bound properties should change the validation state of the form', () => {
const fixture = initTest(ValidationBindingsForm);
const form = new FormGroup({

1
packages/forms/test/template_integration_spec.ts
View File

@ -1420,7 +1420,6 @@ import {NgModelCustomComp, NgModelCustomWrapper} from './value_accessor_integrat
expect(form.control.hasError('minlength', ['tovalidate'])).toBeTruthy();
}));
fixmeIvy('host attribute instructions are not generated properly') &&
it('changes on bound properties should change the validation state of the form',
fakeAsync(() => {
const fixture = initTest(NgModelValidationBindings);