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

feat(Directive): Have a single Directive.host which mimics HTML

Browse Source 
fixes #2268

BREAKING CHANGE:

Before

    @Directive({
      hostListeners: {'event': 'statement'},
      hostProperties: {'expression': 'hostProp'},
      hostAttributes: {'attr': 'value'},
      hostActions: {'action': 'statement'}
    })

After

    @Directive({
      host: {
        '(event)': 'statement',
        '[hostProp]': 'expression'  // k & v swapped
        'attr': 'value',
        '@action': 'statement'
      }
    })
This commit is contained in:
Victor Berchet
2015-06-09 12:33:40 +02:00
committed by Tobias Bosch
parent 47b6b05017
commit f3b49378e4
32 changed files with 316 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
modules/angular2/test/core/compiler/compiler_spec.ts
View File

@ -210,7 +210,7 @@ export function main() {
captureDirective(DirectiveWithProperties)
.then((renderDir) => {
expect(renderDir.hostProperties)
.toEqual(MapWrapper.createFromStringMap({'someField': 'someProp'}));
.toEqual(MapWrapper.createFromStringMap({'someProp': 'someExp'}));
async.done();
});
}));
@ -470,11 +470,11 @@ class SomeDirective {
class IgnoreChildrenDirective {
}
@Directive({hostListeners: {'someEvent': 'someAction'}})
@Directive({host: {'(someEvent)': 'someAction'}})
class DirectiveWithEvents {
}
@Directive({hostProperties: {'someField': 'someProp'}})
@Directive({host: {'[someProp]': 'someExp'}})
class DirectiveWithProperties {
}

2
modules/angular2/test/core/compiler/dynamic_component_loader_spec.ts
View File

@ -303,7 +303,7 @@ class DynamicallyLoaded {
class DynamicallyLoaded2 {
}
@Component({selector: 'dummy', hostProperties: {'id': 'id'}})
@Component({selector: 'dummy', host: {'[id]': 'id'}})
@View({template: "DynamicallyLoadedWithHostProps;"})
class DynamicallyLoadedWithHostProps {
id: string;

2
modules/angular2/test/core/compiler/element_injector_spec.ts
View File

@ -432,7 +432,7 @@ export function main() {
it('should return a list of hostAction accessors', () => {
var binding = DirectiveBinding.createFromType(
HasEventEmitter, new dirAnn.Directive({hostActions: {'hostActionName': 'onAction'}}));
HasEventEmitter, new dirAnn.Directive({host: {'@hostActionName': 'onAction'}}));
var inj = createPei(null, 0, [binding]);
expect(inj.hostActionAccessors.length).toEqual(1);

26
modules/angular2/test/core/compiler/integration_spec.ts
View File

@ -1432,12 +1432,12 @@ class DirectiveEmitingEvent {
fireEvent(msg: string) { ObservableWrapper.callNext(this.event, msg); }
}
@Directive({selector: '[update-host-attributes]', hostAttributes: {'role': 'button'}})
@Directive({selector: '[update-host-attributes]', host: {'role': 'button'}})
@Injectable()
class DirectiveUpdatingHostAttributes {
}
@Directive({selector: '[update-host-properties]', hostProperties: {'id': 'id'}})
@Directive({selector: '[update-host-properties]', host: {'[id]': 'id'}})
@Injectable()
class DirectiveUpdatingHostProperties {
id: string;
@ -1447,7 +1447,7 @@ class DirectiveUpdatingHostProperties {
@Directive({
selector: '[update-host-actions]',
hostActions: {'setAttr': 'setAttribute("key", $action["attrValue"])'}
host: {'@setAttr': 'setAttribute("key", $action["attrValue"])'}
})
@Injectable()
class DirectiveUpdatingHostActions {
@ -1458,7 +1458,7 @@ class DirectiveUpdatingHostActions {
triggerSetAttr(attrValue) { ObservableWrapper.callNext(this.setAttr, {'attrValue': attrValue}); }
}
@Directive({selector: '[listener]', hostListeners: {'event': 'onEvent($event)'}})
@Directive({selector: '[listener]', host: {'(event)': 'onEvent($event)'}})
@Injectable()
class DirectiveListeningEvent {
msg: string;
@ -1470,11 +1470,11 @@ class DirectiveListeningEvent {
@Directive({
selector: '[listener]',
hostListeners: {
'domEvent': 'onEvent($event.type)',
'window:domEvent': 'onWindowEvent($event.type)',
'document:domEvent': 'onDocumentEvent($event.type)',
'body:domEvent': 'onBodyEvent($event.type)'
host: {
'(domEvent)': 'onEvent($event.type)',
'(window:domEvent)': 'onWindowEvent($event.type)',
'(document:domEvent)': 'onDocumentEvent($event.type)',
'(body:domEvent)': 'onBodyEvent($event.type)'
}
})
@Injectable()
@ -1489,7 +1489,7 @@ class DirectiveListeningDomEvent {
var globalCounter = 0;
@Directive(
{selector: '[listenerother]', hostListeners: {'window:domEvent': 'onEvent($event.type)'}})
{selector: '[listenerother]', host: {'(window:domEvent)': 'onEvent($event.type)'}})
@Injectable()
class DirectiveListeningDomEventOther {
eventType: string;
@ -1501,13 +1501,13 @@ class DirectiveListeningDomEventOther {
}
}
@Directive({selector: '[listenerprevent]', hostListeners: {'click': 'onEvent($event)'}})
@Directive({selector: '[listenerprevent]', host: {'(click)': 'onEvent($event)'}})
@Injectable()
class DirectiveListeningDomEventPrevent {
onEvent(event) { return false; }
}
@Directive({selector: '[listenernoprevent]', hostListeners: {'click': 'onEvent($event)'}})
@Directive({selector: '[listenernoprevent]', host: {'(click)': 'onEvent($event)'}})
@Injectable()
class DirectiveListeningDomEventNoPrevent {
onEvent(event) { return true; }
@ -1749,4 +1749,4 @@ class SomeImperativeViewport {
@Directive({selector: '[export-dir]', exportAs: 'dir'})
class ExportDir {
}
}

16
modules/angular2/test/core/compiler/proto_view_factory_spec.ts
View File

@ -76,9 +76,9 @@ export function main() {
{variableBindings: MapWrapper.createFromStringMap({"exportName": "templateName"})}),
[
directiveBinding(
{metadata: new renderApi.DirectiveMetadata({exportAs: 'exportName'})}),
{metadata: renderApi.DirectiveMetadata.create({exportAs: 'exportName'})}),
directiveBinding(
{metadata: new renderApi.DirectiveMetadata({exportAs: 'otherName'})})
{metadata: renderApi.DirectiveMetadata.create({exportAs: 'otherName'})})
]);
expect(dvbs).toEqual(MapWrapper.createFromStringMap({"templateName": 0}));
@ -90,7 +90,7 @@ export function main() {
{variableBindings: MapWrapper.createFromStringMap({"$implicit": "templateName"})}),
[
directiveBinding({
metadata: new renderApi.DirectiveMetadata(
metadata: renderApi.DirectiveMetadata.create(
{exportAs: null, type: renderApi.DirectiveMetadata.COMPONENT_TYPE})
})
]);
@ -107,7 +107,7 @@ export function main() {
}),
[
directiveBinding(
{metadata: new renderApi.DirectiveMetadata({exportAs: 'exportName'})})
{metadata: renderApi.DirectiveMetadata.create({exportAs: 'exportName'})})
]);
}).toThrowError(new RegExp("Cannot find directive with exportAs = 'someInvalidName'"));
});
@ -120,9 +120,9 @@ export function main() {
}),
[
directiveBinding(
{metadata: new renderApi.DirectiveMetadata({exportAs: 'exportName'})}),
{metadata: renderApi.DirectiveMetadata.create({exportAs: 'exportName'})}),
directiveBinding(
{metadata: new renderApi.DirectiveMetadata({exportAs: 'exportName'})})
{metadata: renderApi.DirectiveMetadata.create({exportAs: 'exportName'})})
]);
}).toThrowError(new RegExp("More than one directive have exportAs = 'exportName'"));
});
@ -132,9 +132,9 @@ export function main() {
createDirectiveVariableBindings(
new renderApi.ElementBinder({variableBindings: MapWrapper.create()}), [
directiveBinding(
{metadata: new renderApi.DirectiveMetadata({exportAs: 'exportName'})}),
{metadata: renderApi.DirectiveMetadata.create({exportAs: 'exportName'})}),
directiveBinding(
{metadata: new renderApi.DirectiveMetadata({exportAs: 'exportName'})})
{metadata: renderApi.DirectiveMetadata.create({exportAs: 'exportName'})})
]);
}).not.toThrow();
});

3
modules/angular2/test/forms/integration_spec.ts
View File

@ -733,8 +733,7 @@ export function main() {
@Directive({
selector: '[wrapped-value]',
hostListeners: {'change': 'handleOnChange($event.target.value)'},
hostProperties: {'value': 'value'}
host: {'(change)': 'handleOnChange($event.target.value)', '[value]': 'value'}
})
class WrappedValue implements ControlValueAccessor {
value;

26
modules/angular2/test/render/api_spec.ts Normal file
View File

@ -0,0 +1,26 @@
import {DirectiveMetadata} from 'angular2/src/render/api';
import {MapWrapper} from 'angular2/src/facade/collection';
import {ddescribe, describe, expect, it} from 'angular2/test_lib';
export function main() {
describe('Metadata', () => {
describe('host', () => {
it('should parse host configuration', () => {
var md = DirectiveMetadata.create({
host: MapWrapper.createFromPairs([
['(event)', 'eventVal'],
['[prop]', 'propVal'],
['@action', 'actionVal'],
['attr', 'attrVal']
])
});
expect(md.hostListeners).toEqual(MapWrapper.createFromPairs([['event', 'eventVal']]));
expect(md.hostProperties).toEqual(MapWrapper.createFromPairs([['prop', 'propVal']]));
expect(md.hostActions).toEqual(MapWrapper.createFromPairs([['action', 'actionVal']]));
expect(md.hostAttributes).toEqual(MapWrapper.createFromPairs([['attr', 'attrVal']]));
});
});
});
}

4
modules/angular2/test/render/dom/compiler/compiler_common_tests.ts
View File

@ -62,7 +62,7 @@ export function runCompilerCommonTests() {
current.inheritedProtoView.bindVariable('b', 'a');
});
var dirMetadata = new DirectiveMetadata(
var dirMetadata = DirectiveMetadata.create(
{id: 'id', selector: 'CUSTOM', type: DirectiveMetadata.COMPONENT_TYPE});
compiler.compileHost(dirMetadata)
.then((protoView) => {
@ -218,5 +218,5 @@ class FakeTemplateLoader extends TemplateLoader {
}
}
var someComponent = new DirectiveMetadata(
var someComponent = DirectiveMetadata.create(
{selector: 'some-comp', id: 'someComponent', type: DirectiveMetadata.COMPONENT_TYPE});

38
modules/angular2/test/render/dom/compiler/directive_parser_spec.ts
View File

@ -111,7 +111,7 @@ export function main() {
var directiveBinding = results[0].directives[0];
var ast = MapWrapper.get(directiveBinding.hostPropertyBindings, 'hostProperty');
var ast = MapWrapper.get(directiveBinding.hostPropertyBindings, 'hostProp');
expect(ast.source).toEqual('dirProp');
});
@ -211,63 +211,63 @@ class MockStep implements CompileStep {
}
}
var someComponent = new DirectiveMetadata(
var someComponent = DirectiveMetadata.create(
{selector: 'some-comp', id: 'someComponent', type: DirectiveMetadata.COMPONENT_TYPE});
var someComponentDup = new DirectiveMetadata(
var someComponentDup = DirectiveMetadata.create(
{selector: 'some-comp', id: 'someComponentDup', type: DirectiveMetadata.COMPONENT_TYPE});
var someComponent2 = new DirectiveMetadata(
var someComponent2 = DirectiveMetadata.create(
{selector: 'some-comp2', id: 'someComponent2', type: DirectiveMetadata.COMPONENT_TYPE});
var someDirective = new DirectiveMetadata(
var someDirective = DirectiveMetadata.create(
{selector: '[some-decor]', id: 'someDirective', type: DirectiveMetadata.DIRECTIVE_TYPE});
var someDirectiveIgnoringChildren = new DirectiveMetadata({
var someDirectiveIgnoringChildren = DirectiveMetadata.create({
selector: '[some-decor-ignoring-children]',
compileChildren: false,
type: DirectiveMetadata.DIRECTIVE_TYPE
});
var decoratorWithMultipleAttrs = new DirectiveMetadata({
var decoratorWithMultipleAttrs = DirectiveMetadata.create({
selector: 'input[type=text][control]',
id: 'decoratorWithMultipleAttrs',
type: DirectiveMetadata.DIRECTIVE_TYPE
});
var someDirectiveWithProps = new DirectiveMetadata({
var someDirectiveWithProps = DirectiveMetadata.create({
selector: '[some-decor-props]',
properties: ['dirProp: elProp', 'doubleProp: elProp | double'],
readAttributes: ['some-attr']
});
var someDirectiveWithHostProperties = new DirectiveMetadata({
var someDirectiveWithHostProperties = DirectiveMetadata.create({
selector: '[some-decor-with-host-props]',
hostProperties: MapWrapper.createFromStringMap({'dirProp': 'hostProperty'})
host: MapWrapper.createFromStringMap({'[hostProp]' : 'dirProp'})
});
var someDirectiveWithHostAttributes = new DirectiveMetadata({
var someDirectiveWithHostAttributes = DirectiveMetadata.create({
selector: '[some-decor-with-host-attrs]',
hostAttributes: MapWrapper.createFromStringMap({'attr_name': 'attr_val', 'class': 'foo bar'})
host: MapWrapper.createFromStringMap({'attr_name': 'attr_val', 'class': 'foo bar'})
});
var someDirectiveWithEvents = new DirectiveMetadata({
var someDirectiveWithEvents = DirectiveMetadata.create({
selector: '[some-decor-events]',
hostListeners: MapWrapper.createFromStringMap({'click': 'doIt()'})
host: MapWrapper.createFromStringMap({'(click)': 'doIt()'})
});
var someDirectiveWithHostActions = new DirectiveMetadata({
var someDirectiveWithHostActions = DirectiveMetadata.create({
selector: '[some-decor-host-actions]',
hostActions: MapWrapper.createFromStringMap({'focus': 'focus()'})
host: MapWrapper.createFromStringMap({'@focus': 'focus()'})
});
var someDirectiveWithGlobalEvents = new DirectiveMetadata({
var someDirectiveWithGlobalEvents = DirectiveMetadata.create({
selector: '[some-decor-globalevents]',
hostListeners: MapWrapper.createFromStringMap({'window:resize': 'doItGlobal()'})
host: MapWrapper.createFromStringMap({'(window:resize)': 'doItGlobal()'})
});
var componentWithNonElementSelector = new DirectiveMetadata({
var componentWithNonElementSelector = DirectiveMetadata.create({
id: 'componentWithNonElementSelector',
selector: '[attr]',
type: DirectiveMetadata.COMPONENT_TYPE

33
modules/angular2/test/render/dom/convert_spec.ts
View File

@ -8,9 +8,10 @@ export function main() {
it('directiveMetadataToMap', () => {
var someComponent = new DirectiveMetadata({
compileChildren: false,
hostListeners: MapWrapper.createFromPairs([['listenKey', 'listenVal']]),
hostProperties: MapWrapper.createFromPairs([['hostPropKey', 'hostPropVal']]),
hostActions: MapWrapper.createFromPairs([['hostActionKey', 'hostActionVal']]),
hostListeners: MapWrapper.createFromPairs([['LKey', 'LVal']]),
hostProperties: MapWrapper.createFromPairs([['PKey', 'PVal']]),
hostActions: MapWrapper.createFromPairs([['AcKey', 'AcVal']]),
hostAttributes: MapWrapper.createFromPairs([['AtKey', 'AtVal']]),
id: 'someComponent',
properties: ['propKey: propVal'],
readAttributes: ['read1', 'read2'],
@ -25,12 +26,10 @@ export function main() {
});
var map = directiveMetadataToMap(someComponent);
expect(MapWrapper.get(map, 'compileChildren')).toEqual(false);
expect(MapWrapper.get(map, 'hostListeners'))
.toEqual(MapWrapper.createFromPairs([['listenKey', 'listenVal']]));
expect(MapWrapper.get(map, 'hostProperties'))
.toEqual(MapWrapper.createFromPairs([['hostPropKey', 'hostPropVal']]));
expect(MapWrapper.get(map, 'hostActions'))
.toEqual(MapWrapper.createFromPairs([['hostActionKey', 'hostActionVal']]));
expect(MapWrapper.get(map, 'hostListeners')).toEqual(MapWrapper.createFromPairs([['LKey', 'LVal']]));
expect(MapWrapper.get(map, 'hostProperties')).toEqual(MapWrapper.createFromPairs([['PKey', 'PVal']]));
expect(MapWrapper.get(map, 'hostActions')).toEqual(MapWrapper.createFromPairs([['AcKey', 'AcVal']]));
expect(MapWrapper.get(map, 'hostAttributes')).toEqual(MapWrapper.createFromPairs([['AtKey', 'AtVal']]));
expect(MapWrapper.get(map, 'id')).toEqual('someComponent');
expect(MapWrapper.get(map, 'properties')).toEqual(['propKey: propVal']);
expect(MapWrapper.get(map, 'readAttributes')).toEqual(['read1', 'read2']);
@ -47,9 +46,10 @@ export function main() {
it('mapToDirectiveMetadata', () => {
var map = MapWrapper.createFromPairs([
['compileChildren', false],
['hostListeners', MapWrapper.createFromPairs([['testKey', 'testVal']])],
['hostProperties', MapWrapper.createFromPairs([['hostPropKey', 'hostPropVal']])],
['hostActions', MapWrapper.createFromPairs([['hostActionKey', 'hostActionVal']])],
['hostProperties', MapWrapper.createFromPairs([['PKey', 'testVal']])],
['hostListeners', MapWrapper.createFromPairs([['LKey', 'testVal']])],
['hostActions', MapWrapper.createFromPairs([['AcKey', 'testVal']])],
['hostAttributes', MapWrapper.createFromPairs([['AtKey', 'testVal']])],
['id', 'testId'],
['properties', ['propKey: propVal']],
['readAttributes', ['readTest1', 'readTest2']],
@ -64,11 +64,10 @@ export function main() {
]);
var meta = directiveMetadataFromMap(map);
expect(meta.compileChildren).toEqual(false);
expect(meta.hostListeners).toEqual(MapWrapper.createFromPairs([['testKey', 'testVal']]));
expect(meta.hostProperties)
.toEqual(MapWrapper.createFromPairs([['hostPropKey', 'hostPropVal']]));
expect(meta.hostActions)
.toEqual(MapWrapper.createFromPairs([['hostActionKey', 'hostActionVal']]));
expect(meta.hostProperties).toEqual(MapWrapper.createFromPairs([['PKey', 'testVal']]));
expect(meta.hostListeners).toEqual(MapWrapper.createFromPairs([['LKey', 'testVal']]));
expect(meta.hostActions).toEqual(MapWrapper.createFromPairs([['AcKey', 'testVal']]));
expect(meta.hostAttributes).toEqual(MapWrapper.createFromPairs([['AtKey', 'testVal']]));
expect(meta.id).toEqual('testId');
expect(meta.properties).toEqual(['propKey: propVal']);
expect(meta.readAttributes).toEqual(['readTest1', 'readTest2']);

6
modules/angular2/test/render/dom/dom_renderer_integration_spec.ts
View File

@ -180,12 +180,12 @@ export function main() {
});
}
var someComponent = new DirectiveMetadata(
var someComponent = DirectiveMetadata.create(
{id: 'someComponent', type: DirectiveMetadata.COMPONENT_TYPE, selector: 'some-comp'});
var directiveWithHostActions = new DirectiveMetadata({
var directiveWithHostActions = DirectiveMetadata.create({
id: 'withHostActions',
type: DirectiveMetadata.DIRECTIVE_TYPE,
selector: '[with-host-actions]',
hostActions: MapWrapper.createFromStringMap({'setValue': 'value = "val"'})
host: MapWrapper.createFromStringMap({'@setValue': 'value = "val"'})
});

26
modules/angular2/test/render/dom/shadow_dom_emulation_integration_spec.ts
View File

@ -399,52 +399,52 @@ export function main() {
var mainDir =
new DirectiveMetadata({selector: 'main', id: 'main', type: DirectiveMetadata.COMPONENT_TYPE});
DirectiveMetadata.create({selector: 'main', id: 'main', type: DirectiveMetadata.COMPONENT_TYPE});
var simple = new DirectiveMetadata(
var simple = DirectiveMetadata.create(
{selector: 'simple', id: 'simple', type: DirectiveMetadata.COMPONENT_TYPE});
var empty =
new DirectiveMetadata({selector: 'empty', id: 'empty', type: DirectiveMetadata.COMPONENT_TYPE});
DirectiveMetadata.create({selector: 'empty', id: 'empty', type: DirectiveMetadata.COMPONENT_TYPE});
var dynamicComponent = new DirectiveMetadata(
var dynamicComponent = DirectiveMetadata.create(
{selector: 'dynamic', id: 'dynamic', type: DirectiveMetadata.COMPONENT_TYPE});
var multipleContentTagsComponent = new DirectiveMetadata({
var multipleContentTagsComponent = DirectiveMetadata.create({
selector: 'multiple-content-tags',
id: 'multiple-content-tags',
type: DirectiveMetadata.COMPONENT_TYPE
});
var manualViewportDirective = new DirectiveMetadata(
var manualViewportDirective = DirectiveMetadata.create(
{selector: '[manual]', id: 'manual', type: DirectiveMetadata.DIRECTIVE_TYPE});
var outerWithIndirectNestedComponent = new DirectiveMetadata({
var outerWithIndirectNestedComponent = DirectiveMetadata.create({
selector: 'outer-with-indirect-nested',
id: 'outer-with-indirect-nested',
type: DirectiveMetadata.COMPONENT_TYPE
});
var outerComponent =
new DirectiveMetadata({selector: 'outer', id: 'outer', type: DirectiveMetadata.COMPONENT_TYPE});
DirectiveMetadata.create({selector: 'outer', id: 'outer', type: DirectiveMetadata.COMPONENT_TYPE});
var innerComponent =
new DirectiveMetadata({selector: 'inner', id: 'inner', type: DirectiveMetadata.COMPONENT_TYPE});
DirectiveMetadata.create({selector: 'inner', id: 'inner', type: DirectiveMetadata.COMPONENT_TYPE});
var innerInnerComponent = new DirectiveMetadata(
var innerInnerComponent = DirectiveMetadata.create(
{selector: 'innerinner', id: 'innerinner', type: DirectiveMetadata.COMPONENT_TYPE});
var conditionalContentComponent = new DirectiveMetadata({
var conditionalContentComponent = DirectiveMetadata.create({
selector: 'conditional-content',
id: 'conditional-content',
type: DirectiveMetadata.COMPONENT_TYPE
});
var autoViewportDirective = new DirectiveMetadata(
var autoViewportDirective = DirectiveMetadata.create(
{selector: '[auto]', id: '[auto]', type: DirectiveMetadata.DIRECTIVE_TYPE});
var tabComponent =
new DirectiveMetadata({selector: 'tab', id: 'tab', type: DirectiveMetadata.COMPONENT_TYPE});
DirectiveMetadata.create({selector: 'tab', id: 'tab', type: DirectiveMetadata.COMPONENT_TYPE});
var simpleTemplate = new ViewDefinition(
{componentId: 'simple', template: 'SIMPLE(<content></content>)', directives: []});