refactor(pipes): removed pipes from properties

BREAKING CHANGE:

This PR remove an ability to use pipes in the properties config. Instead, inject the pipe registry.
This commit is contained in:
vsavkin
2015-06-18 15:40:12 -07:00
parent ad7aca631d
commit 20a8f0dbe5
31 changed files with 261 additions and 270 deletions

View File

@ -145,7 +145,7 @@ export class ChangeDetectorJITGenerator {
_getNonNullPipeNames(): List<string> {
var pipes = [];
this.records.forEach((r) => {
if (r.mode === RecordType.PIPE || r.mode === RecordType.BINDING_PIPE) {
if (r.isPipeRecord()) {
pipes.push(this._pipeNames[r.selfIndex]);
}
});
@ -245,7 +245,7 @@ export class ChangeDetectorJITGenerator {
var change = this._changeNames[r.selfIndex];
var pipe = this._pipeNames[r.selfIndex];
var cdRef = r.mode === RecordType.BINDING_PIPE ? "this.ref" : "null";
var cdRef = "this.ref";
var protoIndex = r.selfIndex - 1;
var pipeType = r.name;

View File

@ -269,14 +269,7 @@ export class DynamicChangeDetector extends AbstractChangeDetector {
if (isPresent(storedPipe)) {
storedPipe.onDestroy();
}
// Currently, only pipes that used in bindings in the template get
// the changeDetectorRef of the encompassing component.
//
// In the future, pipes declared in the bind configuration should
// be able to access the changeDetectorRef of that component.
var cdr = proto.mode === RecordType.BINDING_PIPE ? this.ref : null;
var pipe = this.pipeRegistry.get(proto.name, context, cdr);
var pipe = this.pipeRegistry.get(proto.name, context, this.ref);
this._writePipe(proto, pipe);
return pipe;
}

View File

@ -141,11 +141,8 @@ export class KeyedAccess extends AST {
visit(visitor: AstVisitor) { return visitor.visitKeyedAccess(this); }
}
export class Pipe extends AST {
constructor(public exp: AST, public name: string, public args: List<any>,
public inBinding: boolean) {
super();
}
export class BindingPipe extends AST {
constructor(public exp: AST, public name: string, public args: List<any>) { super(); }
visit(visitor: AstVisitor) { return visitor.visitPipe(this); }
}
@ -336,7 +333,7 @@ export interface AstVisitor {
visitChain(ast: Chain): any;
visitConditional(ast: Conditional): any;
visitIf(ast: If): any;
visitPipe(ast: Pipe): any;
visitPipe(ast: BindingPipe): any;
visitFunctionCall(ast: FunctionCall): any;
visitImplicitReceiver(ast: ImplicitReceiver): any;
visitInterpolation(ast: Interpolation): any;
@ -394,8 +391,8 @@ export class AstTransformer implements AstVisitor {
ast.falseExp.visit(this));
}
visitPipe(ast: Pipe) {
return new Pipe(ast.exp.visit(this), ast.name, this.visitAll(ast.args), ast.inBinding);
visitPipe(ast: BindingPipe) {
return new BindingPipe(ast.exp.visit(this), ast.name, this.visitAll(ast.args));
}
visitKeyedAccess(ast: KeyedAccess) {

View File

@ -34,7 +34,7 @@ import {
PrefixNot,
Conditional,
If,
Pipe,
BindingPipe,
Assignment,
Chain,
KeyedAccess,
@ -73,15 +73,6 @@ export class Parser {
return new ASTWithSource(ast, input, location);
}
addPipes(bindingAst: ASTWithSource, pipes: List<string>): ASTWithSource {
if (ListWrapper.isEmpty(pipes)) return bindingAst;
var res: AST = ListWrapper.reduce(
pipes, (result, currentPipeName) => new Pipe(result, currentPipeName, [], false),
bindingAst.ast);
return new ASTWithSource(res, bindingAst.source, bindingAst.location);
}
parseTemplateBindings(input: string, location: any): List<TemplateBinding> {
var tokens = this._lexer.tokenize(input);
return new _ParseAST(input, location, tokens, this._reflector, false).parseTemplateBindings();
@ -224,7 +215,7 @@ class _ParseAST {
while (this.optionalCharacter($COLON)) {
args.push(this.parsePipe());
}
result = new Pipe(result, name, args, true);
result = new BindingPipe(result, name, args);
} while (this.optionalOperator("|"));
}

View File

@ -15,12 +15,10 @@ import {
isArray
} from 'angular2/src/facade/lang';
import {WrappedValue, Pipe, PipeFactory} from './pipe';
import {WrappedValue, Pipe, BasePipe, PipeFactory} from './pipe';
@CONST()
export class IterableChangesFactory extends PipeFactory {
constructor() { super(); }
export class IterableChangesFactory implements PipeFactory {
supports(obj): boolean { return IterableChanges.supportsObj(obj); }
create(cdRef): Pipe { return new IterableChanges(); }
@ -29,7 +27,7 @@ export class IterableChangesFactory extends PipeFactory {
/**
* @exportedAs angular2/pipes
*/
export class IterableChanges extends Pipe {
export class IterableChanges extends BasePipe {
private _collection = null;
private _length: int = null;
// Keeps track of the used records at any point in time (during & across `_check()` calls)
@ -95,7 +93,7 @@ export class IterableChanges extends Pipe {
if (this.check(collection)) {
return WrappedValue.wrap(this);
} else {
return this;
return null;
}
}

View File

@ -1,5 +1,5 @@
import {isBlank, isPresent, Json} from 'angular2/src/facade/lang';
import {Pipe, PipeFactory} from './pipe';
import {Pipe, BasePipe, PipeFactory} from './pipe';
/**
* Implements json transforms to any object.
@ -26,9 +26,7 @@ import {Pipe, PipeFactory} from './pipe';
*
* @exportedAs angular2/pipes
*/
export class JsonPipe extends Pipe {
supports(obj): boolean { return true; }
export class JsonPipe extends BasePipe {
transform(value): string { return Json.stringify(value); }
create(cdRef): Pipe { return this }

View File

@ -1,15 +1,13 @@
import {ListWrapper, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
import {stringify, looseIdentical, isJsObject, CONST} from 'angular2/src/facade/lang';
import {WrappedValue, Pipe, PipeFactory} from './pipe';
import {WrappedValue, BasePipe, Pipe, PipeFactory} from './pipe';
/**
* @exportedAs angular2/pipes
*/
@CONST()
export class KeyValueChangesFactory extends PipeFactory {
constructor() { super(); }
export class KeyValueChangesFactory implements PipeFactory {
supports(obj): boolean { return KeyValueChanges.supportsObj(obj); }
create(cdRef): Pipe { return new KeyValueChanges(); }
@ -18,7 +16,7 @@ export class KeyValueChangesFactory extends PipeFactory {
/**
* @exportedAs angular2/pipes
*/
export class KeyValueChanges extends Pipe {
export class KeyValueChanges extends BasePipe {
private _records: Map<any, any> = new Map();
private _mapHead: KVChangeRecord = null;
private _previousMapHead: KVChangeRecord = null;
@ -37,7 +35,7 @@ export class KeyValueChanges extends Pipe {
if (this.check(map)) {
return WrappedValue.wrap(this);
} else {
return this;
return null;
}
}

View File

@ -23,7 +23,7 @@ import {Pipe} from './pipe';
*
* @exportedAs angular2/pipes
*/
export class LowerCasePipe extends Pipe {
export class LowerCasePipe implements Pipe {
_latestValue: string = null;
supports(str): boolean { return isString(str); }

View File

@ -1,13 +1,11 @@
import {isBlank, CONST} from 'angular2/src/facade/lang';
import {Pipe, WrappedValue, PipeFactory} from './pipe';
import {Pipe, BasePipe, WrappedValue, PipeFactory} from './pipe';
/**
* @exportedAs angular2/pipes
*/
@CONST()
export class NullPipeFactory extends PipeFactory {
constructor() { super(); }
export class NullPipeFactory implements PipeFactory {
supports(obj): boolean { return NullPipe.supportsObj(obj); }
create(cdRef): Pipe { return new NullPipe(); }
@ -16,7 +14,7 @@ export class NullPipeFactory extends PipeFactory {
/**
* @exportedAs angular2/pipes
*/
export class NullPipe extends Pipe {
export class NullPipe extends BasePipe {
called: boolean = false;
static supportsObj(obj): boolean { return isBlank(obj); }

View File

@ -29,14 +29,14 @@ import {ChangeDetectorRef} from '../change_detector_ref';
*
* @exportedAs angular2/pipes
*/
export class ObservablePipe extends Pipe {
export class ObservablePipe implements Pipe {
_latestValue: Object = null;
_latestReturnedValue: Object = null;
_subscription: Object = null;
_observable: Observable = null;
constructor(public _ref: ChangeDetectorRef) { super(); }
constructor(public _ref: ChangeDetectorRef) {}
supports(obs): boolean { return ObservableWrapper.isObservable(obs); }
@ -91,9 +91,7 @@ export class ObservablePipe extends Pipe {
* @exportedAs angular2/pipes
*/
@CONST()
export class ObservablePipeFactory extends PipeFactory {
constructor() { super(); }
export class ObservablePipeFactory implements PipeFactory {
supports(obs): boolean { return ObservableWrapper.isObservable(obs); }
create(cdRef): Pipe { return new ObservablePipe(cdRef); }

View File

@ -36,11 +36,13 @@ var _wrappedIndex = 0;
* #Example
*
* ```
* class DoublePipe extends Pipe {
* class DoublePipe implements Pipe {
* supports(obj) {
* return true;
* }
*
* onDestroy() {}
*
* transform(value) {
* return `${value}${value}`;
* }
@ -49,24 +51,34 @@ var _wrappedIndex = 0;
*
* @exportedAs angular2/pipes
*/
export class Pipe {
supports(obj): boolean { return false; }
onDestroy() {}
transform(value: any): any { return null; }
export interface Pipe {
supports(obj): boolean;
onDestroy(): void;
transform(value: any): any;
}
// TODO: vsavkin: make it an interface
@CONST()
export class PipeFactory {
supports(obs): boolean {
_abstract();
return false;
}
/**
* Provides default implementation of supports and onDestroy.
*
* #Example
*
* ```
* class DoublePipe extends BasePipe {*
* transform(value) {
* return `${value}${value}`;
* }
* }
* ```
*/
export class BasePipe implements Pipe {
supports(obj): boolean { return true; }
onDestroy(): void {}
transform(value: any): any { return _abstract(); }
}
create(cdRef): Pipe {
_abstract();
return null;
}
export interface PipeFactory {
supports(obs): boolean;
create(cdRef): Pipe;
}
function _abstract() {

View File

@ -1,6 +1,6 @@
import {List, ListWrapper} from 'angular2/src/facade/collection';
import {isBlank, isPresent, BaseException, CONST} from 'angular2/src/facade/lang';
import {Pipe} from './pipe';
import {Pipe, PipeFactory} from './pipe';
import {Injectable} from 'angular2/src/di/decorators';
import {ChangeDetectorRef} from '../change_detector_ref';
@ -8,18 +8,31 @@ import {ChangeDetectorRef} from '../change_detector_ref';
export class PipeRegistry {
constructor(public config) {}
get(type: string, obj, cdRef: ChangeDetectorRef): Pipe {
var listOfConfigs = this.config[type];
if (isBlank(listOfConfigs)) {
get(type: string, obj, cdRef?: ChangeDetectorRef, existingPipe?: Pipe): Pipe {
if (isPresent(existingPipe) && existingPipe.supports(obj)) return existingPipe;
if (isPresent(existingPipe)) existingPipe.onDestroy();
var factories = this._getListOfFactories(type, obj);
var factory = this._getMatchingFactory(factories, type, obj);
return factory.create(cdRef);
}
private _getListOfFactories(type: string, obj: any): PipeFactory[] {
var listOfFactories = this.config[type];
if (isBlank(listOfFactories)) {
throw new BaseException(`Cannot find '${type}' pipe supporting object '${obj}'`);
}
return listOfFactories;
}
var matchingConfig = ListWrapper.find(listOfConfigs, (pipeConfig) => pipeConfig.supports(obj));
if (isBlank(matchingConfig)) {
private _getMatchingFactory(listOfFactories: PipeFactory[], type: string, obj: any): PipeFactory {
var matchingFactory =
ListWrapper.find(listOfFactories, pipeFactory => pipeFactory.supports(obj));
if (isBlank(matchingFactory)) {
throw new BaseException(`Cannot find '${type}' pipe supporting object '${obj}'`);
}
return matchingConfig.create(cdRef);
return matchingFactory;
}
}

View File

@ -28,12 +28,12 @@ import {ChangeDetectorRef} from '../change_detector_ref';
*
* @exportedAs angular2/pipes
*/
export class PromisePipe extends Pipe {
export class PromisePipe implements Pipe {
_latestValue: Object = null;
_latestReturnedValue: Object = null;
_sourcePromise: Promise<any>;
constructor(public _ref: ChangeDetectorRef) { super(); }
constructor(public _ref: ChangeDetectorRef) {}
supports(promise): boolean { return isPromise(promise); }

View File

@ -23,7 +23,7 @@ import {Pipe} from './pipe';
*
* @exportedAs angular2/pipes
*/
export class UpperCasePipe extends Pipe {
export class UpperCasePipe implements Pipe {
_latestValue: string = null;
supports(str): boolean { return isString(str); }

View File

@ -11,7 +11,7 @@ import {
Chain,
Conditional,
If,
Pipe,
BindingPipe,
FunctionCall,
ImplicitReceiver,
Interpolation,
@ -179,10 +179,9 @@ class _ConvertAstIntoProtoRecords implements AstVisitor {
null, 0);
}
visitPipe(ast: Pipe) {
visitPipe(ast: BindingPipe) {
var value = ast.exp.visit(this);
var type = ast.inBinding ? RecordType.BINDING_PIPE : RecordType.PIPE;
return this._addRecord(type, ast.name, ast.name, [], null, value);
return this._addRecord(RecordType.PIPE, ast.name, ast.name, [], null, value);
}
visitKeyedAccess(ast: KeyedAccess) {

View File

@ -12,7 +12,6 @@ export enum RecordType {
INVOKE_CLOSURE,
KEYED_ACCESS,
PIPE,
BINDING_PIPE,
INTERPOLATE,
SAFE_PROPERTY,
SAFE_INVOKE_METHOD,
@ -30,9 +29,7 @@ export class ProtoRecord {
return this.mode === RecordType.INTERPOLATE || this.mode === RecordType.PRIMITIVE_OP;
}
isPipeRecord(): boolean {
return this.mode === RecordType.PIPE || this.mode === RecordType.BINDING_PIPE;
}
isPipeRecord(): boolean { return this.mode === RecordType.PIPE; }
isLifeCycleRecord(): boolean { return this.mode === RecordType.DIRECTIVE_LIFECYCLE; }
}

View File

@ -8,12 +8,17 @@ import {DOM} from 'angular2/src/dom/dom_adapter';
export class CSSClass {
_domEl;
_pipe;
_prevRawClass;
rawClass;
_rawClass;
constructor(private _pipeRegistry: PipeRegistry, ngEl: ElementRef) {
this._domEl = ngEl.domElement;
}
set rawClass(v) {
this._rawClass = v;
this._pipe = this._pipeRegistry.get('keyValDiff', this._rawClass);
}
_toggleClass(className, enabled): void {
if (enabled) {
DOM.addClass(this._domEl, className);
@ -23,19 +28,15 @@ export class CSSClass {
}
onCheck() {
if (this.rawClass != this._prevRawClass) {
this._prevRawClass = this.rawClass;
this._pipe = isPresent(this.rawClass) ?
this._pipeRegistry.get('keyValDiff', this.rawClass, null) :
null;
}
var diff = this._pipe.transform(this._rawClass);
if (isPresent(diff)) this._applyChanges(diff.wrapped);
}
if (isPresent(this._pipe) && this._pipe.check(this.rawClass)) {
this._pipe.forEachAddedItem(
(record) => { this._toggleClass(record.key, record.currentValue); });
this._pipe.forEachChangedItem(
(record) => { this._toggleClass(record.key, record.currentValue); });
this._pipe.forEachRemovedItem((record) => {
private _applyChanges(diff) {
if (isPresent(diff)) {
diff.forEachAddedItem((record) => { this._toggleClass(record.key, record.currentValue); });
diff.forEachChangedItem((record) => { this._toggleClass(record.key, record.currentValue); });
diff.forEachRemovedItem((record) => {
if (record.previousValue) {
DOM.removeClass(this._domEl, record.key);
}

View File

@ -1,5 +1,12 @@
import {Directive} from 'angular2/annotations';
import {ViewContainerRef, ViewRef, ProtoViewRef} from 'angular2/core';
import {
ViewContainerRef,
ViewRef,
ProtoViewRef,
PipeRegistry,
onCheck,
Pipe
} from 'angular2/angular2';
import {isPresent, isBlank} from 'angular2/src/facade/lang';
/**
@ -34,17 +41,25 @@ import {isPresent, isBlank} from 'angular2/src/facade/lang';
*
* @exportedAs angular2/directives
*/
@Directive(
{selector: '[ng-for][ng-for-of]', properties: ['iterableChanges: ngForOf | iterableDiff']})
@Directive({selector: '[ng-for][ng-for-of]', properties: ['ngForOf'], lifecycle: [onCheck]})
export class NgFor {
viewContainer: ViewContainerRef;
protoViewRef: ProtoViewRef;
constructor(viewContainer: ViewContainerRef, protoViewRef: ProtoViewRef) {
this.viewContainer = viewContainer;
this.protoViewRef = protoViewRef;
_ngForOf: any;
_pipe: Pipe;
constructor(private viewContainer: ViewContainerRef, private protoViewRef: ProtoViewRef,
private pipes: PipeRegistry) {}
set ngForOf(value: any) {
this._ngForOf = value;
this._pipe = this.pipes.get("iterableDiff", value, null, this._pipe);
}
set iterableChanges(changes) {
onCheck() {
var diff = this._pipe.transform(this._ngForOf);
if (isPresent(diff)) this._applyChanges(diff.wrapped);
}
private _applyChanges(changes) {
if (isBlank(changes)) {
this.viewContainer.clear();
return;
@ -67,11 +82,11 @@ export class NgFor {
NgFor.bulkInsert(insertTuples, this.viewContainer, this.protoViewRef);
for (var i = 0; i < insertTuples.length; i++) {
this.perViewChange(insertTuples[i].view, insertTuples[i].record);
this._perViewChange(insertTuples[i].view, insertTuples[i].record);
}
}
perViewChange(view, record) {
private _perViewChange(view, record) {
view.setLocal('\$implicit', record.item);
view.setLocal('index', record.currentIndex);
}

View File

@ -147,8 +147,7 @@ export class DirectiveParser implements CompileStep {
// Bindings are optional, so this binding only needs to be set up if an expression is given.
if (isPresent(bindingAst)) {
var fullExpAstWithBindPipes = this._parser.addPipes(bindingAst, pipes);
directiveBinderBuilder.bindProperty(dirProperty, fullExpAstWithBindPipes);
directiveBinderBuilder.bindProperty(dirProperty, bindingAst);
}
}

View File

@ -0,0 +1,24 @@
library test_lib.spies;
import 'package:angular2/change_detection.dart';
import './test_lib.dart';
@proxy
class SpyChangeDetector extends SpyObject implements ChangeDetector {
noSuchMethod(m) => super.noSuchMethod(m);
}
@proxy
class SpyProtoChangeDetector extends SpyObject implements ProtoChangeDetector {
noSuchMethod(m) => super.noSuchMethod(m);
}
@proxy
class SpyPipe extends SpyObject implements Pipe {
noSuchMethod(m) => super.noSuchMethod(m);
}
@proxy
class SpyPipeFactory extends SpyObject implements PipeFactory {
noSuchMethod(m) => super.noSuchMethod(m);
}

View File

@ -3,45 +3,19 @@ import {
ProtoChangeDetector,
DynamicChangeDetector
} from 'angular2/change_detection';
import {BasePipe} from 'angular2/src/change_detection/pipes/pipe';
import {SpyObject, proxy} from './test_lib';
// Remove dummy methods after https://github.com/angular/ts2dart/issues/209 is fixed.
@proxy
export class SpyChangeDetector extends SpyObject implements ChangeDetector {
parent: ChangeDetector;
mode: string;
constructor() { super(DynamicChangeDetector, true); }
addChild(cd: ChangeDetector): void { return this.spy("addChild")(cd); }
addShadowDomChild(cd: ChangeDetector): void { return this.spy("addShadowDomChild")(cd); }
removeChild(cd: ChangeDetector): void { return this.spy("removeChild")(cd); }
removeShadowDomChild(cd: ChangeDetector): void { return this.spy("removeShadowDomChild")(cd); }
remove(): void { return this.spy("remove")(); }
hydrate(context: any, locals: any, directives: any): void {
return this.spy("hydrate")(context, locals, directives);
}
dehydrate(): void { return this.spy("dehydrate")(); }
markPathToRootAsCheckOnce(): void { return this.spy("markPathToRootAsCheckOnce")(); }
detectChanges(): void { return this.spy("detectChanges")(); }
checkNoChanges(): void { return this.spy("checkNoChanges")(); }
noSuchMethod(m) { return super.noSuchMethod(m) }
export class SpyChangeDetector extends SpyObject {
constructor() { super(DynamicChangeDetector); }
}
// Remove dummy methods after https://github.com/angular/ts2dart/issues/209 is fixed.
@proxy
export class SpyProtoChangeDetector extends SpyObject implements ProtoChangeDetector {
constructor() { super(DynamicChangeDetector, true); }
export class SpyProtoChangeDetector extends SpyObject {
constructor() { super(DynamicChangeDetector); }
}
instantiate(v: any): any { return this.spy("instantiate")(v); }
}
export class SpyPipe extends SpyObject {
constructor() { super(BasePipe); }
}
export class SpyPipeFactory extends SpyObject {}

View File

@ -187,7 +187,7 @@ class SpyFunction extends gns.SpyFunction {
class SpyObject extends gns.SpyObject {
final Map<String, SpyFunction> _spyFuncs = {};
SpyObject([arg, arg2]) {}
SpyObject([arg]) {}
SpyFunction spy(String funcName) =>
_spyFuncs.putIfAbsent(funcName, () => new SpyFunction(funcName));

View File

@ -274,7 +274,7 @@ export interface GuinessCompatibleSpy extends jasmine.Spy {
}
export class SpyObject {
constructor(type = null, forceSpyCreation: boolean = false) {
constructor(type = null) {
if (type) {
for (var prop in type.prototype) {
var m = null;
@ -287,11 +287,7 @@ export class SpyObject {
// should not matter.
}
if (typeof m === 'function') {
if (forceSpyCreation) {
this.createSpy(prop);
} else {
this.spy(prop);
}
this.spy(prop);
}
}
}
@ -301,14 +297,8 @@ export class SpyObject {
spy(name) {
if (!this[name]) {
return this.createSpy(name);
} else {
return this[name];
this[name] = this._createGuinnessCompatibleSpy(name);
}
}
createSpy(name) {
this[name] = this._createGuinnessCompatibleSpy(name);
return this[name];
}

View File

@ -223,7 +223,7 @@ class _CodegenState {
List<String> _getNonNullPipeNames() {
return _records
.where((r) =>
r.mode == RecordType.PIPE || r.mode == RecordType.BINDING_PIPE)
r.mode == RecordType.PIPE)
.map((r) => _pipeNames[r.selfIndex])
.toList();
}
@ -310,7 +310,7 @@ class _CodegenState {
var change = _changeNames[r.selfIndex];
var pipe = _pipeNames[r.selfIndex];
var cdRef = r.mode == RecordType.BINDING_PIPE ? 'this.ref' : 'null';
var cdRef = 'this.ref';
var protoIndex = r.selfIndex - 1;
var pipeType = r.name;