cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: camelCase Angular (kebab-case removal)

Browse Source 
BREAKING CHANGE:

Angular is now fully camel case.

Before:

    <p *ng-if="cond">
    <my-cmp [my-prop]="exp">
    <my-cmp (my-event)="action()">
    <my-cmp [(my-prop)]="prop">
    <input #my-input>
    <template ng-for #my-item [ng-for-of]=items #my-index="index">

After

    <p *ngIf="cond">
    <my-cmp [myProp]="exp">
    <my-cmp (myEvent)="action()">
    <my-cmp [(myProp)]="prop">
    <input #myInput>`,
    <template ngFor="#my-item" [ngForOf]=items #myIndex="index">

The full details are found in [angular2/docs/migration/kebab-case.md](https://github.com/angular/angular/blob/master/modules/angular2/docs/migration/kebab-case.md)
This commit is contained in:
Victor Berchet
2015-11-23 16:02:19 -08:00
committed by Igor Minar
parent b386d1134a
commit da9b46a071
120 changed files with 759 additions and 802 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
modules/angular2/test/compiler/template_parser_spec.ts
View File

@ -66,7 +66,7 @@ export function main() {
beforeEach(inject([TemplateParser], (_parser) => {
parser = _parser;
ngIf = CompileDirectiveMetadata.create(
{selector: '[ng-if]', type: new CompileTypeMetadata({name: 'NgIf'}), inputs: ['ngIf']});
{selector: '[ngIf]', type: new CompileTypeMetadata({name: 'NgIf'}), inputs: ['ngIf']});
}));
function parse(template: string, directives: CompileDirectiveMetadata[]): TemplateAst[] {
@ -120,16 +120,16 @@ export function main() {
]);
});
it('should parse and camel case bound properties', () => {
it('should parse dash case bound properties', () => {
expect(humanizeTplAst(parse('<div [some-prop]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'someProp', 'v', null]
[BoundElementPropertyAst, PropertyBindingType.Property, 'some-prop', 'v', null]
]);
});
it('should normalize property names via the element schema', () => {
expect(humanizeTplAst(parse('<div [mapped-attr]="v">', [])))
expect(humanizeTplAst(parse('<div [mappedAttr]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'mappedProp', 'v', null]
@ -144,31 +144,12 @@ export function main() {
]);
});
it('should parse and camel case bound attributes', () => {
expect(humanizeTplAst(parse('<div [attr.some-attr]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Attribute, 'someAttr', 'v', null]
]);
expect(humanizeTplAst(parse('<div [ATTR.some-attr]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Attribute, 'someAttr', 'v', null]
]);
});
it('should parse and dash case bound classes', () => {
expect(humanizeTplAst(parse('<div [class.some-class]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Class, 'some-class', 'v', null]
]);
expect(humanizeTplAst(parse('<div [CLASS.some-class]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Class, 'some-class', 'v', null]
]);
});
it('should parse mixed case bound classes', () => {
@ -179,25 +160,27 @@ export function main() {
]);
});
it('should parse and camel case bound styles', () => {
expect(humanizeTplAst(parse('<div [style.some-style]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Style, 'someStyle', 'v', null]
]);
expect(humanizeTplAst(parse('<div [STYLE.some-style]="v">', [])))
it('should parse mixed case bound styles', () => {
expect(humanizeTplAst(parse('<div [style.someStyle]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Style, 'someStyle', 'v', null]
]);
});
it('should parse and mixed case bound styles', () => {
expect(humanizeTplAst(parse('<div [style.someStyle]="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Style, 'someStyle', 'v', null]
]);
it('should report invalid prefixes', () => {
expect(() => parse('<p [atTr.foo]>', []))
.toThrowError(
`Template parse errors:\nInvalid property name 'atTr.foo' ("<p [ERROR ->][atTr.foo]>"): TestComp@0:3`);
expect(() => parse('<p [sTyle.foo]>', []))
.toThrowError(
`Template parse errors:\nInvalid property name 'sTyle.foo' ("<p [ERROR ->][sTyle.foo]>"): TestComp@0:3`);
expect(() => parse('<p [Class.foo]>', []))
.toThrowError(
`Template parse errors:\nInvalid property name 'Class.foo' ("<p [ERROR ->][Class.foo]>"): TestComp@0:3`);
expect(() => parse('<p [bar.foo]>', []))
.toThrowError(
`Template parse errors:\nInvalid property name 'bar.foo' ("<p [ERROR ->][bar.foo]>"): TestComp@0:3`);
});
it('should parse bound properties via [...] and not report them as attributes', () => {
@ -214,11 +197,6 @@ export function main() {
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null]
]);
expect(humanizeTplAst(parse('<div BIND-prop="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null]
]);
});
it('should parse bound properties via {{...}} and not report them as attributes', () => {
@ -243,12 +221,9 @@ export function main() {
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]);
});
it('should parse and camel case event names', () => {
it('should parse event names case sensitive', () => {
expect(humanizeTplAst(parse('<div (some-event)="v">', [])))
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'someEvent', null, 'v']]);
});
it('should parse mixed case event names', () => {
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'some-event', null, 'v']]);
expect(humanizeTplAst(parse('<div (someEvent)="v">', [])))
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'someEvent', null, 'v']]);
});
@ -256,8 +231,6 @@ export function main() {
it('should parse bound events via on- and not report them as attributes', () => {
expect(humanizeTplAst(parse('<div on-event="v">', [])))
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]);
expect(humanizeTplAst(parse('<div ON-event="v">', [])))
.toEqual([[ElementAst, 'div'], [BoundEventAst, 'event', null, 'v']]);
});
it('should allow events on explicit embedded templates that are emitted by a directive',
@ -295,12 +268,6 @@ export function main() {
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null],
[BoundEventAst, 'propChange', null, 'v = $event']
]);
expect(humanizeTplAst(parse('<div BINDON-prop="v">', [])))
.toEqual([
[ElementAst, 'div'],
[BoundElementPropertyAst, PropertyBindingType.Property, 'prop', 'v', null],
[BoundEventAst, 'propChange', null, 'v = $event']
]);
});
});
@ -374,7 +341,7 @@ export function main() {
it('should parse directive properties', () => {
var dirA = CompileDirectiveMetadata.create(
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['aProp']});
expect(humanizeTplAst(parse('<div [a-prop]="expr"></div>', [dirA])))
expect(humanizeTplAst(parse('<div [aProp]="expr"></div>', [dirA])))
.toEqual([
[ElementAst, 'div'],
[DirectiveAst, dirA],
@ -436,12 +403,10 @@ export function main() {
it('should parse variables via var-... and not report them as attributes', () => {
expect(humanizeTplAst(parse('<div var-a>', [])))
.toEqual([[ElementAst, 'div'], [VariableAst, 'a', '']]);
expect(humanizeTplAst(parse('<div VAR-a>', [])))
.toEqual([[ElementAst, 'div'], [VariableAst, 'a', '']]);
});
it('should camel case variables', () => {
expect(humanizeTplAst(parse('<div var-some-a>', [])))
it('should parse camel case variables', () => {
expect(humanizeTplAst(parse('<div var-someA>', [])))
.toEqual([[ElementAst, 'div'], [VariableAst, 'someA', '']]);
});
@ -467,6 +432,11 @@ export function main() {
There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"></div>"): TestComp@0:5`);
});
it('should report invalid variable names', () => {
expect(() => parse('<div #a-b></div>', [])).toThrowError(`Template parse errors:
"-" is not allowed in variable names ("<div [ERROR ->]#a-b></div>"): TestComp@0:5`);
});
it('should allow variables with values that dont match a directive on embedded template elements',
() => {
expect(humanizeTplAst(parse('<template #a="b"></template>', [])))
@ -515,8 +485,6 @@ There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"><
it('should wrap the element into an EmbeddedTemplateAST', () => {
expect(humanizeTplAst(parse('<div template>', [])))
.toEqual([[EmbeddedTemplateAst], [ElementAst, 'div']]);
expect(humanizeTplAst(parse('<div TEMPLATE>', [])))
.toEqual([[EmbeddedTemplateAst], [ElementAst, 'div']]);
});
it('should parse bound properties', () => {
@ -575,7 +543,7 @@ There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"><
});
it('should work with *... and use the attribute name as property binding name', () => {
expect(humanizeTplAst(parse('<div *ng-if="test">', [ngIf])))
expect(humanizeTplAst(parse('<div *ngIf="test">', [ngIf])))
.toEqual([
[EmbeddedTemplateAst],
[DirectiveAst, ngIf],
@ -585,7 +553,7 @@ There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"><
});
it('should work with *... and empty value', () => {
expect(humanizeTplAst(parse('<div *ng-if>', [ngIf])))
expect(humanizeTplAst(parse('<div *ngIf>', [ngIf])))
.toEqual([
[EmbeddedTemplateAst],
[DirectiveAst, ngIf],
@ -682,8 +650,8 @@ There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"><
.toEqual([['a', null], ['b', 0], ['#text(hello)', 0]]);
});
it('should project children of components with ng-non-bindable', () => {
expect(humanizeContentProjection(parse('<div ng-non-bindable>{{hello}}<span></span></div>',
it('should project children of components with ngNonBindable', () => {
expect(humanizeContentProjection(parse('<div ngNonBindable>{{hello}}<span></span></div>',
[createComp('div', ['*'])])))
.toEqual([['div', null], ['#text({{hello}})', 0], ['span', 0]]);
});
@ -705,8 +673,8 @@ There is no directive with "exportAs" set to "dirA" ("<div [ERROR ->]#a="dirA"><
});
it('should report invalid property names', () => {
expect(() => parse('<div [invalid-prop]></div>', [])).toThrowError(`Template parse errors:
Can't bind to 'invalidProp' since it isn't a known native property ("<div [ERROR ->][invalid-prop]></div>"): TestComp@0:5`);
expect(() => parse('<div [invalidProp]></div>', [])).toThrowError(`Template parse errors:
Can't bind to 'invalidProp' since it isn't a known native property ("<div [ERROR ->][invalidProp]></div>"): TestComp@0:5`);
});
it('should report errors in expressions', () => {
@ -813,46 +781,43 @@ Property binding a not used by any directive on an embedded template ("[ERROR ->
});
it('should ignore bindings on children of elements with ng-non-bindable', () => {
expect(humanizeTplAst(parse('<div ng-non-bindable>{{b}}</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, '{{b}}']]);
expect(humanizeTplAst(parse('<div NG-NON-BINDABLE>{{b}}</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'NG-NON-BINDABLE', ''], [TextAst, '{{b}}']]);
it('should ignore bindings on children of elements with ngNonBindable', () => {
expect(humanizeTplAst(parse('<div ngNonBindable>{{b}}</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ngNonBindable', ''], [TextAst, '{{b}}']]);
});
it('should keep nested children of elements with ng-non-bindable', () => {
expect(humanizeTplAst(parse('<div ng-non-bindable><span>{{b}}</span></div>', [])))
it('should keep nested children of elements with ngNonBindable', () => {
expect(humanizeTplAst(parse('<div ngNonBindable><span>{{b}}</span></div>', [])))
.toEqual([
[ElementAst, 'div'],
[AttrAst, 'ng-non-bindable', ''],
[AttrAst, 'ngNonBindable', ''],
[ElementAst, 'span'],
[TextAst, '{{b}}']
]);
});
it('should ignore <script> elements inside of elements with ng-non-bindable', () => {
expect(humanizeTplAst(parse('<div ng-non-bindable><script></script>a</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, 'a']]);
it('should ignore <script> elements inside of elements with ngNonBindable', () => {
expect(humanizeTplAst(parse('<div ngNonBindable><script></script>a</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ngNonBindable', ''], [TextAst, 'a']]);
});
it('should ignore <style> elements inside of elements with ng-non-bindable', () => {
expect(humanizeTplAst(parse('<div ng-non-bindable><style></style>a</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, 'a']]);
it('should ignore <style> elements inside of elements with ngNonBindable', () => {
expect(humanizeTplAst(parse('<div ngNonBindable><style></style>a</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ngNonBindable', ''], [TextAst, 'a']]);
});
it('should ignore <link rel="stylesheet"> elements inside of elements with ng-non-bindable',
it('should ignore <link rel="stylesheet"> elements inside of elements with ngNonBindable',
() => {
expect(humanizeTplAst(parse('<div ng-non-bindable><link rel="stylesheet">a</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ng-non-bindable', ''], [TextAst, 'a']]);
expect(humanizeTplAst(parse('<div ngNonBindable><link rel="stylesheet">a</div>', [])))
.toEqual([[ElementAst, 'div'], [AttrAst, 'ngNonBindable', ''], [TextAst, 'a']]);
});
it('should convert <ng-content> elements into regular elements inside of elements with ng-non-bindable',
it('should convert <ng-content> elements into regular elements inside of elements with ngNonBindable',
() => {
expect(
humanizeTplAst(parse('<div ng-non-bindable><ng-content></ng-content>a</div>', [])))
expect(humanizeTplAst(parse('<div ngNonBindable><ng-content></ng-content>a</div>', [])))
.toEqual([
[ElementAst, 'div'],
[AttrAst, 'ng-non-bindable', ''],
[AttrAst, 'ngNonBindable', ''],
[ElementAst, 'ng-content'],
[TextAst, 'a']
]);
@ -946,11 +911,11 @@ Property binding a not used by any directive on an embedded template ("[ERROR ->
it('should support directive property', () => {
var dirA = CompileDirectiveMetadata.create(
{selector: 'div', type: new CompileTypeMetadata({name: 'DirA'}), inputs: ['aProp']});
expect(humanizeTplAstSourceSpans(parse('<div [a-prop]="foo | bar"></div>', [dirA])))
expect(humanizeTplAstSourceSpans(parse('<div [aProp]="foo | bar"></div>', [dirA])))
.toEqual([
[ElementAst, 'div', '<div [a-prop]="foo | bar">'],
[DirectiveAst, dirA, '<div [a-prop]="foo | bar">'],
[BoundDirectivePropertyAst, 'aProp', '(foo | bar)', '[a-prop]="foo | bar"']
[ElementAst, 'div', '<div [aProp]="foo | bar">'],
[DirectiveAst, dirA, '<div [aProp]="foo | bar">'],
[BoundDirectivePropertyAst, 'aProp', '(foo | bar)', '[aProp]="foo | bar"']
]);
});