feat(Directive): Have a single Directive.host which mimics HTML
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
committed by
Tobias Bosch
Tobias Bosch
parent
47b6b05017
commit
f3b49378e4
@@ -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']]));
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
@@ -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});
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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']);
|
||||
|
||||
@@ -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"'})
|
||||
});
|
||||
|
||||
@@ -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: []});
|
||||
|
||||
Reference in New Issue
Block a user