Skip to content

Commit 5b5d31f

Browse files
vsavkinvsavkin
committed
feat(pipe): added the Pipe decorator and the pipe property to View
BREAKING CHANGE: Instead of configuring pipes via a Pipes object, now you can configure them by providing the pipes property to the View decorator. @pipe({ name: 'double' }) class DoublePipe { transform(value, args) { return value * 2; } } @view({ template: '{{ 10 | double}}' pipes: [DoublePipe] }) class CustomComponent {} Closes #3572
1 parent 02b7e61 commit 5b5d31f

62 files changed

Lines changed: 623 additions & 520 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎modules/angular2/annotations.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
export {
1313
ComponentAnnotation,
1414
DirectiveAnnotation,
15+
PipeAnnotation,
1516
LifecycleEvent
1617
} from './src/core/annotations/annotations';
1718

@@ -43,5 +44,7 @@ export {
4344
ViewFactory,
4445
Query,
4546
QueryFactory,
46-
ViewQuery
47+
ViewQuery,
48+
Pipe,
49+
PipeFactory
4750
} from 'angular2/src/core/annotations/decorators';

‎modules/angular2/change_detection.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,12 @@ export {
2020
ChangeDetectorRef,
2121

2222
WrappedValue,
23-
defaultPipes,
24-
Pipe,
25-
Pipes,
23+
PipeTransform,
2624
IterableDiffers,
2725
IterableDiffer,
2826
IterableDifferFactory,
2927
KeyValueDiffers,
3028
KeyValueDiffer,
3129
KeyValueDifferFactory,
32-
BasePipe
30+
BasePipeTransform
3331
} from 'angular2/src/change_detection/change_detection';

‎modules/angular2/pipes.ts‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,11 @@
44
* This module provides advanced support for extending change detection.
55
*/
66

7-
export {UpperCasePipe} from './src/change_detection/pipes/uppercase_pipe';
8-
export {LowerCasePipe} from './src/change_detection/pipes/lowercase_pipe';
9-
export {AsyncPipe} from './src/change_detection/pipes/async_pipe';
10-
export {JsonPipe} from './src/change_detection/pipes/json_pipe';
11-
export {DatePipe} from './src/change_detection/pipes/date_pipe';
12-
export {DecimalPipe, PercentPipe, CurrencyPipe} from './src/change_detection/pipes/number_pipe';
13-
export {LimitToPipe} from './src/change_detection/pipes/limit_to_pipe';
7+
export {UpperCasePipe} from './src/pipes/uppercase_pipe';
8+
export {LowerCasePipe} from './src/pipes/lowercase_pipe';
9+
export {AsyncPipe} from './src/pipes/async_pipe';
10+
export {JsonPipe} from './src/pipes/json_pipe';
11+
export {DatePipe} from './src/pipes/date_pipe';
12+
export {DecimalPipe, PercentPipe, CurrencyPipe} from './src/pipes/number_pipe';
13+
export {LimitToPipe} from './src/pipes/limit_to_pipe';
14+
export {DEFAULT_PIPES_TOKEN, DEFAULT_PIPES} from './src/pipes/default_pipes';

‎modules/angular2/src/change_detection/abstract_change_detector.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {ChangeDetectionUtil} from './change_detection_util';
44
import {ChangeDetectorRef} from './change_detector_ref';
55
import {DirectiveRecord} from './directive_record';
66
import {ChangeDetector, ChangeDispatcher} from './interfaces';
7+
import {Pipes} from './pipes';
78
import {
89
ChangeDetectionError,
910
ExpressionChangedAfterItHasBeenCheckedException,
@@ -12,7 +13,6 @@ import {
1213
import {ProtoRecord} from './proto_record';
1314
import {BindingRecord} from './binding_record';
1415
import {Locals} from './parser/locals';
15-
import {Pipes} from './pipes/pipes';
1616
import {CHECK_ALWAYS, CHECK_ONCE, CHECKED, DETACHED, ON_PUSH} from './constants';
1717
import {wtfCreateScope, wtfLeave, WtfScopeFn} from '../profile/profile';
1818

‎modules/angular2/src/change_detection/change_detection.ts‎

Lines changed: 2 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,10 @@
11
import {JitProtoChangeDetector} from './jit_proto_change_detector';
22
import {PregenProtoChangeDetector} from './pregen_proto_change_detector';
33
import {DynamicProtoChangeDetector} from './proto_change_detector';
4-
import {Pipes} from './pipes/pipes';
54
import {IterableDiffers, IterableDifferFactory} from './differs/iterable_differs';
65
import {DefaultIterableDifferFactory} from './differs/default_iterable_differ';
76
import {KeyValueDiffers, KeyValueDifferFactory} from './differs/keyvalue_differs';
87
import {DefaultKeyValueDifferFactory} from './differs/default_keyvalue_differ';
9-
import {AsyncPipe} from './pipes/async_pipe';
10-
import {UpperCasePipe} from './pipes/uppercase_pipe';
11-
import {LowerCasePipe} from './pipes/lowercase_pipe';
12-
import {JsonPipe} from './pipes/json_pipe';
13-
import {LimitToPipe} from './pipes/limit_to_pipe';
14-
import {DatePipe} from './pipes/date_pipe';
15-
import {DecimalPipe, PercentPipe, CurrencyPipe} from './pipes/number_pipe';
168
import {ChangeDetection, ProtoChangeDetector, ChangeDetectorDefinition} from './interfaces';
179
import {Injector, Inject, Injectable, OpaqueToken, Optional, Binding} from 'angular2/di';
1810
import {List, StringMap, StringMapWrapper} from 'angular2/src/facade/collection';
@@ -50,30 +42,10 @@ export {BindingRecord} from './binding_record';
5042
export {DirectiveIndex, DirectiveRecord} from './directive_record';
5143
export {DynamicChangeDetector} from './dynamic_change_detector';
5244
export {ChangeDetectorRef} from './change_detector_ref';
53-
export {Pipes} from './pipes/pipes';
5445
export {IterableDiffers, IterableDiffer, IterableDifferFactory} from './differs/iterable_differs';
5546
export {KeyValueDiffers, KeyValueDiffer, KeyValueDifferFactory} from './differs/keyvalue_differs';
56-
export {WrappedValue, Pipe, BasePipe} from './pipes/pipe';
57-
58-
59-
function createPipes(inj: Injector): Pipes {
60-
return new Pipes(
61-
{
62-
"async": AsyncPipe,
63-
"uppercase": UpperCasePipe,
64-
"lowercase": LowerCasePipe,
65-
"json": JsonPipe,
66-
"limitTo": LimitToPipe,
67-
"number": DecimalPipe,
68-
"percent": PercentPipe,
69-
"currency": CurrencyPipe,
70-
"date": DatePipe
71-
},
72-
inj);
73-
}
74-
75-
export const defaultPipes: Binding =
76-
CONST_EXPR(new Binding(Pipes, {toFactory: createPipes, deps: [Injector]}));
47+
export {PipeTransform, BasePipeTransform} from './pipe_transform';
48+
export {WrappedValue} from './change_detection_util';
7749

7850
/**
7951
* Structural diffing for `Object`s and `Map`s.

‎modules/angular2/src/change_detection/change_detection_jit_generator.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -179,12 +179,10 @@ export class ChangeDetectorJITGenerator {
179179
var newValue = this._names.getLocalName(r.selfIndex);
180180

181181
var pipe = this._names.getPipeName(r.selfIndex);
182-
var cdRef = "this.ref";
183182
var pipeType = r.name;
184-
185183
var read = `
186184
if (${pipe} === ${UTIL}.uninitialized) {
187-
${pipe} = ${this._names.getPipesAccessorName()}.get('${pipeType}', ${cdRef});
185+
${pipe} = ${this._names.getPipesAccessorName()}.get('${pipeType}');
188186
}
189187
${newValue} = ${pipe}.transform(${context}, [${argString}]);
190188
`;

‎modules/angular2/src/change_detection/change_detection_util.ts‎

Lines changed: 39 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,47 @@
11
import {CONST_EXPR, isPresent, isBlank, BaseException, Type} from 'angular2/src/facade/lang';
22
import {List, ListWrapper, MapWrapper, StringMapWrapper} from 'angular2/src/facade/collection';
33
import {ProtoRecord} from './proto_record';
4-
import {WrappedValue} from './pipes/pipe';
54
import {CHECK_ALWAYS, CHECK_ONCE, CHECKED, DETACHED, ON_PUSH} from './constants';
65

6+
7+
/**
8+
* Indicates that the result of a {@link Pipe} transformation has changed even though the reference
9+
* has not changed.
10+
*
11+
* The wrapped value will be unwrapped by change detection, and the unwrapped value will be stored.
12+
*
13+
* Example:
14+
*
15+
* ```
16+
* if (this._latestValue === this._latestReturnedValue) {
17+
* return this._latestReturnedValue;
18+
* } else {
19+
* this._latestReturnedValue = this._latestValue;
20+
* return WrappedValue.wrap(this._latestValue); // this will force update
21+
* }
22+
* ```
23+
*/
24+
export class WrappedValue {
25+
constructor(public wrapped: any) {}
26+
27+
static wrap(value: any): WrappedValue {
28+
var w = _wrappedValues[_wrappedIndex++ % 5];
29+
w.wrapped = value;
30+
return w;
31+
}
32+
}
33+
34+
var _wrappedValues = [
35+
new WrappedValue(null),
36+
new WrappedValue(null),
37+
new WrappedValue(null),
38+
new WrappedValue(null),
39+
new WrappedValue(null)
40+
];
41+
42+
var _wrappedIndex = 0;
43+
44+
745
export class SimpleChange {
846
constructor(public previousValue: any, public currentValue: any) {}
947

‎modules/angular2/src/change_detection/dynamic_change_detector.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -269,7 +269,7 @@ export class DynamicChangeDetector extends AbstractChangeDetector<any> {
269269
var storedPipe = this._readPipe(proto);
270270
if (isPresent(storedPipe)) return storedPipe;
271271

272-
var pipe = this.pipes.get(proto.name, this.ref);
272+
var pipe = this.pipes.get(proto.name);
273273
this._writePipe(proto, pipe);
274274
return pipe;
275275
}

‎modules/angular2/src/change_detection/pipe_transform.ts‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import {ABSTRACT, BaseException, CONST, Type} from 'angular2/src/facade/lang';
2+
3+
/**
4+
* An interface which all pipes must implement.
5+
*
6+
* #Example
7+
*
8+
* ```
9+
* class DoublePipe implements PipeTransform {
10+
* onDestroy() {}
11+
*
12+
* transform(value, args = []) {
13+
* return `${value}${value}`;
14+
* }
15+
* }
16+
* ```
17+
*/
18+
export interface PipeTransform {
19+
onDestroy(): void;
20+
21+
transform(value: any, args: List<any>): any;
22+
}
23+
24+
/**
25+
* Provides default implementation of the `onDestroy` method.
26+
*
27+
* #Example
28+
*
29+
* ```
30+
* class DoublePipe extends BasePipe {
31+
* transform(value) {
32+
* return `${value}${value}`;
33+
* }
34+
* }
35+
* ```
36+
*/
37+
@CONST()
38+
export class BasePipeTransform implements PipeTransform {
39+
onDestroy(): void {}
40+
transform(value: any, args: List<any>): any { return _abstract(); }
41+
}
42+
43+
function _abstract() {
44+
throw new BaseException('This method is abstract');
45+
}

‎modules/angular2/src/change_detection/pipes.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import {PipeTransform} from './pipe_transform';
2+
3+
export interface Pipes { get(name: string): PipeTransform; }

0 commit comments

Comments
 (0)