refactor(view): remove hostActions
BREAKING CHANGE Closes #3396 Replacement. Either direct DOM access or Renderer in WebWorkers.
This commit is contained in:
parent
37b042b361
commit
ac3f5106e4
|
@ -214,12 +214,6 @@ export class DirectiveBinding extends ResolvedBinding {
|
|||
return isPresent(this.metadata) && isPresent(this.metadata.events) ? this.metadata.events : [];
|
||||
}
|
||||
|
||||
get hostActions(): Map<string, string> {
|
||||
return isPresent(this.metadata) && isPresent(this.metadata.hostActions) ?
|
||||
this.metadata.hostActions :
|
||||
new Map();
|
||||
}
|
||||
|
||||
get changeDetection() { return this.metadata.changeDetection; }
|
||||
|
||||
static createFromBinding(binding: Binding, ann: DirectiveMetadata): DirectiveBinding {
|
||||
|
@ -312,22 +306,10 @@ function _createEventEmitterAccessors(bwv: BindingWithVisibility): EventEmitterA
|
|||
});
|
||||
}
|
||||
|
||||
function _createHostActionAccessors(bwv: BindingWithVisibility): HostActionAccessor[] {
|
||||
var binding = bwv.binding;
|
||||
if (!(binding instanceof DirectiveBinding)) return [];
|
||||
var res = [];
|
||||
var db = <DirectiveBinding>binding;
|
||||
MapWrapper.forEach(db.hostActions, (actionExpression, actionName) => {
|
||||
res.push(new HostActionAccessor(actionExpression, reflector.getter(actionName)));
|
||||
});
|
||||
return res;
|
||||
}
|
||||
|
||||
export class ProtoElementInjector {
|
||||
view: viewModule.AppView;
|
||||
attributes: Map<string, string>;
|
||||
eventEmitterAccessors: List<List<EventEmitterAccessor>>;
|
||||
hostActionAccessors: List<List<HostActionAccessor>>;
|
||||
protoInjector: ProtoInjector;
|
||||
|
||||
static create(parent: ProtoElementInjector, index: number, bindings: List<ResolvedBinding>,
|
||||
|
@ -386,15 +368,10 @@ export class ProtoElementInjector {
|
|||
public _firstBindingIsComponent: boolean,
|
||||
public directiveVariableBindings: Map<string, number>) {
|
||||
var length = bwv.length;
|
||||
|
||||
this.protoInjector = new ProtoInjector(bwv);
|
||||
|
||||
this.eventEmitterAccessors = ListWrapper.createFixedSize(length);
|
||||
this.hostActionAccessors = ListWrapper.createFixedSize(length);
|
||||
|
||||
for (var i = 0; i < length; ++i) {
|
||||
this.eventEmitterAccessors[i] = _createEventEmitterAccessors(bwv[i]);
|
||||
this.hostActionAccessors[i] = _createHostActionAccessors(bwv[i]);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -563,10 +540,6 @@ export class ElementInjector extends TreeNode<ElementInjector> implements Depend
|
|||
return this._proto.eventEmitterAccessors;
|
||||
}
|
||||
|
||||
getHostActionAccessors(): List<List<HostActionAccessor>> {
|
||||
return this._proto.hostActionAccessors;
|
||||
}
|
||||
|
||||
getDirectiveVariableBindings(): Map<string, number> {
|
||||
return this._proto.directiveVariableBindings;
|
||||
}
|
||||
|
|
|
@ -211,7 +211,6 @@ export class AppViewManagerUtils {
|
|||
currView.preBuiltObjects[boundElementIndex]);
|
||||
this._populateViewLocals(currView, elementInjector, boundElementIndex);
|
||||
this._setUpEventEmitters(currView, elementInjector, boundElementIndex);
|
||||
this._setUpHostActions(currView, elementInjector, boundElementIndex);
|
||||
}
|
||||
}
|
||||
var pipes = isPresent(hostElementInjector) ?
|
||||
|
@ -250,20 +249,6 @@ export class AppViewManagerUtils {
|
|||
}
|
||||
}
|
||||
|
||||
_setUpHostActions(view: viewModule.AppView, elementInjector: eli.ElementInjector,
|
||||
boundElementIndex: number) {
|
||||
var hostActions = elementInjector.getHostActionAccessors();
|
||||
for (var directiveIndex = 0; directiveIndex < hostActions.length; ++directiveIndex) {
|
||||
var directiveHostActions = hostActions[directiveIndex];
|
||||
var directive = elementInjector.getDirectiveAtIndex(directiveIndex);
|
||||
|
||||
for (var index = 0; index < directiveHostActions.length; ++index) {
|
||||
var hostActionAccessor = directiveHostActions[index];
|
||||
hostActionAccessor.subscribe(view, boundElementIndex, directive);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
dehydrateView(initView: viewModule.AppView) {
|
||||
var endViewOffset = initView.viewOffset +
|
||||
initView.mainMergeMapping.nestedViewCountByViewIndex[initView.viewOffset];
|
||||
|
|
|
@ -628,31 +628,6 @@ export class DirectiveMetadata extends InjectableMetadata {
|
|||
* In this example using `my-button` directive (ex.: `<div my-button></div>`) on a host element
|
||||
* (here: `<div>` ) will ensure that this element will get the "button" role.
|
||||
*
|
||||
* ## Actions
|
||||
*
|
||||
* Specifies which DOM methods a directive can invoke.
|
||||
*
|
||||
* ## Syntax
|
||||
*
|
||||
* ```
|
||||
* @Directive({
|
||||
* selector: 'input',
|
||||
* host: {
|
||||
* '@emitFocus': 'focus()'
|
||||
* }
|
||||
* })
|
||||
* class InputDirective {
|
||||
* constructor() {
|
||||
* this.emitFocus = new EventEmitter();
|
||||
* }
|
||||
*
|
||||
* focus() {
|
||||
* this.emitFocus.next();
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* In this example calling focus on InputDirective will result in calling focus on the input.
|
||||
*/
|
||||
host: StringMap<string, string>;
|
||||
|
||||
|
|
|
@ -163,15 +163,13 @@ export class RenderDirectiveMetadata {
|
|||
hostListeners: Map<string, string>;
|
||||
hostProperties: Map<string, string>;
|
||||
hostAttributes: Map<string, string>;
|
||||
hostActions: Map<string, string>;
|
||||
// group 1: "property" from "[property]"
|
||||
// group 2: "event" from "(event)"
|
||||
// group 3: "action" from "@action"
|
||||
private static _hostRegExp = /^(?:(?:\[([^\]]+)\])|(?:\(([^\)]+)\))|(?:@(.+)))$/g;
|
||||
private static _hostRegExp = /^(?:(?:\[([^\]]+)\])|(?:\(([^\)]+)\)))$/g;
|
||||
|
||||
constructor({id, selector, compileChildren, events, hostListeners, hostProperties, hostAttributes,
|
||||
hostActions, properties, readAttributes, type, callOnDestroy, callOnChange,
|
||||
callOnCheck, callOnInit, callOnAllChangesDone, changeDetection, exportAs}: {
|
||||
properties, readAttributes, type, callOnDestroy, callOnChange, callOnCheck,
|
||||
callOnInit, callOnAllChangesDone, changeDetection, exportAs}: {
|
||||
id?: string,
|
||||
selector?: string,
|
||||
compileChildren?: boolean,
|
||||
|
@ -179,7 +177,6 @@ export class RenderDirectiveMetadata {
|
|||
hostListeners?: Map<string, string>,
|
||||
hostProperties?: Map<string, string>,
|
||||
hostAttributes?: Map<string, string>,
|
||||
hostActions?: Map<string, string>,
|
||||
properties?: List<string>,
|
||||
readAttributes?: List<string>,
|
||||
type?: number,
|
||||
|
@ -198,7 +195,6 @@ export class RenderDirectiveMetadata {
|
|||
this.hostListeners = hostListeners;
|
||||
this.hostAttributes = hostAttributes;
|
||||
this.hostProperties = hostProperties;
|
||||
this.hostActions = hostActions;
|
||||
this.properties = properties;
|
||||
this.readAttributes = readAttributes;
|
||||
this.type = type;
|
||||
|
@ -233,7 +229,6 @@ export class RenderDirectiveMetadata {
|
|||
let hostListeners = new Map();
|
||||
let hostProperties = new Map();
|
||||
let hostAttributes = new Map();
|
||||
let hostActions = new Map();
|
||||
|
||||
if (isPresent(host)) {
|
||||
MapWrapper.forEach(host, (value: string, key: string) => {
|
||||
|
@ -244,8 +239,6 @@ export class RenderDirectiveMetadata {
|
|||
hostProperties.set(matches[1], value);
|
||||
} else if (isPresent(matches[2])) {
|
||||
hostListeners.set(matches[2], value);
|
||||
} else if (isPresent(matches[3])) {
|
||||
hostActions.set(matches[3], value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -258,7 +251,6 @@ export class RenderDirectiveMetadata {
|
|||
hostListeners: hostListeners,
|
||||
hostProperties: hostProperties,
|
||||
hostAttributes: hostAttributes,
|
||||
hostActions: hostActions,
|
||||
properties: properties,
|
||||
readAttributes: readAttributes,
|
||||
type: type,
|
||||
|
|
|
@ -380,7 +380,6 @@ export class Serializer {
|
|||
'exportAs': meta.exportAs,
|
||||
'hostProperties': this.mapToObject(meta.hostProperties),
|
||||
'hostListeners': this.mapToObject(meta.hostListeners),
|
||||
'hostActions': this.mapToObject(meta.hostActions),
|
||||
'hostAttributes': this.mapToObject(meta.hostAttributes)
|
||||
};
|
||||
return obj;
|
||||
|
@ -392,7 +391,6 @@ export class Serializer {
|
|||
compileChildren: obj['compileChildren'],
|
||||
hostProperties: this.objectToMap(obj['hostProperties']),
|
||||
hostListeners: this.objectToMap(obj['hostListeners']),
|
||||
hostActions: this.objectToMap(obj['hostActions']),
|
||||
hostAttributes: this.objectToMap(obj['hostAttributes']),
|
||||
properties: obj['properties'],
|
||||
readAttributes: obj['readAttributes'],
|
||||
|
|
|
@ -117,11 +117,6 @@ class HasEventEmitter {
|
|||
constructor() { this.emitter = "emitter"; }
|
||||
}
|
||||
|
||||
class HasHostAction {
|
||||
hostActionName;
|
||||
constructor() { this.hostActionName = "hostAction"; }
|
||||
}
|
||||
|
||||
class NeedsAttribute {
|
||||
typeAttribute;
|
||||
titleAttribute;
|
||||
|
@ -433,18 +428,6 @@ export function main() {
|
|||
expect(accessor.eventName).toEqual('publicEmitter');
|
||||
expect(accessor.getter(new HasEventEmitter())).toEqual('emitter');
|
||||
});
|
||||
|
||||
it('should return a list of hostAction accessors', () => {
|
||||
var binding = DirectiveBinding.createFromType(
|
||||
HasEventEmitter, new DirectiveMetadata({host: {'@hostActionName': 'onAction'}}));
|
||||
|
||||
var inj = createPei(null, 0, [binding]);
|
||||
expect(inj.hostActionAccessors.length).toEqual(1);
|
||||
|
||||
var accessor = inj.hostActionAccessors[0][0];
|
||||
expect(accessor.methodName).toEqual('onAction');
|
||||
expect(accessor.getter(new HasHostAction())).toEqual('hostAction');
|
||||
});
|
||||
});
|
||||
|
||||
describe(".create", () => {
|
||||
|
|
|
@ -841,31 +841,6 @@ export function main() {
|
|||
});
|
||||
}));
|
||||
|
||||
if (DOM.supportsDOMEvents()) {
|
||||
it("should support invoking methods on the host element via hostActions",
|
||||
inject(
|
||||
[TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
|
||||
tcb.overrideView(MyComp, new ViewMetadata({
|
||||
template: '<div update-host-actions></div>',
|
||||
directives: [DirectiveUpdatingHostActions]
|
||||
}))
|
||||
|
||||
.createAsync(MyComp)
|
||||
.then((rootTC) => {
|
||||
var tc = rootTC.componentViewChildren[0];
|
||||
var nativeElement = tc.nativeElement;
|
||||
var updateHost = tc.inject(DirectiveUpdatingHostActions);
|
||||
|
||||
ObservableWrapper.subscribe(updateHost.setAttr, (_) => {
|
||||
expect(DOM.hasAttribute(nativeElement, 'update-host-actions')).toBe(true);
|
||||
async.done();
|
||||
});
|
||||
|
||||
updateHost.triggerSetAttr('value');
|
||||
});
|
||||
}));
|
||||
}
|
||||
|
||||
it('should support render events',
|
||||
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
|
||||
tcb.overrideView(
|
||||
|
|
|
@ -87,17 +87,13 @@ export function main() {
|
|||
createHostPv([createNestedElBinder(createComponentPv()), createEmptyElBinder()]);
|
||||
var hostView = createViewWithChildren(hostPv);
|
||||
var spyEventAccessor1 = SpyObject.stub({"subscribe": null});
|
||||
SpyObject.stub(hostView.elementInjectors[0], {
|
||||
'getHostActionAccessors': [],
|
||||
'getEventEmitterAccessors': [[spyEventAccessor1]],
|
||||
'getDirectiveAtIndex': dir
|
||||
});
|
||||
SpyObject.stub(
|
||||
hostView.elementInjectors[0],
|
||||
{'getEventEmitterAccessors': [[spyEventAccessor1]], 'getDirectiveAtIndex': dir});
|
||||
var spyEventAccessor2 = SpyObject.stub({"subscribe": null});
|
||||
SpyObject.stub(hostView.elementInjectors[1], {
|
||||
'getHostActionAccessors': [],
|
||||
'getEventEmitterAccessors': [[spyEventAccessor2]],
|
||||
'getDirectiveAtIndex': dir
|
||||
});
|
||||
SpyObject.stub(
|
||||
hostView.elementInjectors[1],
|
||||
{'getEventEmitterAccessors': [[spyEventAccessor2]], 'getDirectiveAtIndex': dir});
|
||||
|
||||
utils.hydrateRootHostView(hostView, createInjector());
|
||||
|
||||
|
@ -105,31 +101,6 @@ export function main() {
|
|||
expect(spyEventAccessor2.spy('subscribe')).toHaveBeenCalledWith(hostView, 1, dir);
|
||||
});
|
||||
|
||||
it("should set up host action listeners", () => {
|
||||
var dir = new Object();
|
||||
|
||||
var hostPv =
|
||||
createHostPv([createNestedElBinder(createComponentPv()), createEmptyElBinder()]);
|
||||
var hostView = createViewWithChildren(hostPv);
|
||||
var spyActionAccessor1 = SpyObject.stub({"subscribe": null});
|
||||
SpyObject.stub(hostView.elementInjectors[0], {
|
||||
'getHostActionAccessors': [[spyActionAccessor1]],
|
||||
'getEventEmitterAccessors': [],
|
||||
'getDirectiveAtIndex': dir
|
||||
});
|
||||
var spyActionAccessor2 = SpyObject.stub({"subscribe": null});
|
||||
SpyObject.stub(hostView.elementInjectors[1], {
|
||||
'getHostActionAccessors': [[spyActionAccessor2]],
|
||||
'getEventEmitterAccessors': [],
|
||||
'getDirectiveAtIndex': dir
|
||||
});
|
||||
|
||||
utils.hydrateRootHostView(hostView, createInjector());
|
||||
|
||||
expect(spyActionAccessor1.spy('subscribe')).toHaveBeenCalledWith(hostView, 0, dir);
|
||||
expect(spyActionAccessor2.spy('subscribe')).toHaveBeenCalledWith(hostView, 1, dir);
|
||||
});
|
||||
|
||||
it("should not hydrate element injectors of component views inside of embedded fragments",
|
||||
() => {
|
||||
var hostView = createViewWithChildren(createHostPv([
|
||||
|
|
|
@ -8,17 +8,12 @@ export function main() {
|
|||
describe('host', () => {
|
||||
it('should parse host configuration', () => {
|
||||
var md = RenderDirectiveMetadata.create({
|
||||
host: MapWrapper.createFromPairs([
|
||||
['(event)', 'eventVal'],
|
||||
['[prop]', 'propVal'],
|
||||
['@action', 'actionVal'],
|
||||
['attr', 'attrVal']
|
||||
])
|
||||
host: MapWrapper.createFromPairs(
|
||||
[['(event)', 'eventVal'], ['[prop]', 'propVal'], ['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']]));
|
||||
});
|
||||
});
|
||||
|
|
|
@ -97,11 +97,6 @@ void allTests() {
|
|||
expect(metadata.hostAttributes.length).toBe(1);
|
||||
expect(metadata.hostAttributes).toContain('attName');
|
||||
expect(metadata.hostAttributes['attName']).toEqual('attValue');
|
||||
|
||||
expect(metadata.hostActions).toBeNotNull();
|
||||
expect(metadata.hostActions.length).toBe(1);
|
||||
expect(metadata.hostActions).toContain('actionName');
|
||||
expect(metadata.hostActions['actionName']).toEqual('actionValue');
|
||||
});
|
||||
|
||||
it('should parse lifecycle events.', () async {
|
||||
|
|
|
@ -15,7 +15,6 @@ void initReflector(reflector) {
|
|||
const Component(host: const {
|
||||
'(change)': 'onChange(\$event)',
|
||||
'[value]': 'value',
|
||||
'@actionName': 'actionValue',
|
||||
'attName': 'attValue'
|
||||
})
|
||||
], const [
|
||||
|
|
|
@ -7,7 +7,6 @@
|
|||
"compileChildren": true,
|
||||
"hostProperties": {},
|
||||
"hostListeners": {},
|
||||
"hostActions": {},
|
||||
"hostAttributes": {},
|
||||
"properties": [],
|
||||
"readAttributes": [],
|
||||
|
|
|
@ -7,7 +7,6 @@
|
|||
"compileChildren": true,
|
||||
"hostProperties": {},
|
||||
"hostListeners": {},
|
||||
"hostActions": {},
|
||||
"hostAttributes": {},
|
||||
"properties": null,
|
||||
"readAttributes": null,
|
||||
|
@ -31,7 +30,6 @@
|
|||
"compileChildren": true,
|
||||
"hostProperties": {"hprop": "hprop"},
|
||||
"hostListeners": {},
|
||||
"hostActions": {},
|
||||
"hostAttributes": {},
|
||||
"properties": ["prop"],
|
||||
"readAttributes": null,
|
||||
|
@ -55,7 +53,6 @@
|
|||
"compileChildren": true,
|
||||
"hostProperties": {},
|
||||
"hostListeners": {"subevent": "doAThing()"},
|
||||
"hostActions": {},
|
||||
"hostAttributes": {},
|
||||
"properties": [],
|
||||
"readAttributes": null,
|
||||
|
@ -79,7 +76,6 @@
|
|||
"compileChildren": true,
|
||||
"hostProperties": {},
|
||||
"hostListeners": {},
|
||||
"hostActions": {},
|
||||
"hostAttributes": {},
|
||||
"properties": ["ngForOf"],
|
||||
"readAttributes": null,
|
||||
|
@ -95,4 +91,4 @@
|
|||
"version": 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -7,7 +7,6 @@
|
|||
"compileChildren": true,
|
||||
"hostProperties": {},
|
||||
"hostListeners": {},
|
||||
"hostActions": {},
|
||||
"hostAttributes": {},
|
||||
"properties": null,
|
||||
"readAttributes": null,
|
||||
|
@ -31,7 +30,6 @@
|
|||
"compileChildren": true,
|
||||
"hostProperties": {},
|
||||
"hostListeners": {},
|
||||
"hostActions": {},
|
||||
"hostAttributes": {},
|
||||
"properties": [],
|
||||
"readAttributes": [],
|
||||
|
@ -55,7 +53,6 @@
|
|||
"compileChildren": true,
|
||||
"hostProperties": {},
|
||||
"hostListeners": {},
|
||||
"hostActions": {},
|
||||
"hostAttributes": {},
|
||||
"properties": [],
|
||||
"readAttributes": [],
|
||||
|
@ -79,7 +76,6 @@
|
|||
"compileChildren": true,
|
||||
"hostProperties": {},
|
||||
"hostListeners": {},
|
||||
"hostActions": {},
|
||||
"hostAttributes": {},
|
||||
"properties": [],
|
||||
"readAttributes": [],
|
||||
|
@ -103,7 +99,6 @@
|
|||
"compileChildren": true,
|
||||
"hostProperties": {},
|
||||
"hostListeners": {},
|
||||
"hostActions": {},
|
||||
"hostAttributes": {},
|
||||
"properties": [],
|
||||
"readAttributes": [],
|
||||
|
@ -127,7 +122,6 @@
|
|||
"compileChildren": true,
|
||||
"hostProperties": {},
|
||||
"hostListeners": {},
|
||||
"hostActions": {},
|
||||
"hostAttributes": {},
|
||||
"properties": [],
|
||||
"readAttributes": [],
|
||||
|
@ -151,7 +145,6 @@
|
|||
"compileChildren": true,
|
||||
"hostProperties": {},
|
||||
"hostListeners": {},
|
||||
"hostActions": {},
|
||||
"hostAttributes": {},
|
||||
"properties": [],
|
||||
"readAttributes": [],
|
||||
|
@ -175,7 +168,6 @@
|
|||
"compileChildren": true,
|
||||
"hostProperties": {},
|
||||
"hostListeners": {},
|
||||
"hostActions": {},
|
||||
"hostAttributes": {},
|
||||
"properties": [],
|
||||
"readAttributes": [],
|
||||
|
@ -191,4 +183,4 @@
|
|||
"version": 1
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue