feat(change_detection): json pipe

Closes #1957
This commit is contained in:
gdi2290 2015-05-18 09:24:52 -07:00 committed by Misko Hevery
parent 8e84f8a1c4
commit 986038242a
5 changed files with 202 additions and 3 deletions

View File

@ -7,6 +7,7 @@ import {ObservablePipeFactory} from './pipes/observable_pipe';
import {PromisePipeFactory} from './pipes/promise_pipe';
import {UpperCaseFactory} from './pipes/uppercase_pipe';
import {LowerCaseFactory} from './pipes/lowercase_pipe';
import {JsonPipeFactory} from './pipes/json_pipe';
import {NullPipeFactory} from './pipes/null_pipe';
import {ChangeDetection, ProtoChangeDetector, ChangeDetectorDefinition} from './interfaces';
import {Injectable} from 'angular2/src/di/decorators';
@ -55,12 +56,20 @@ export var uppercase: List < PipeFactory >= [new UpperCaseFactory(), new NullPip
*/
export var lowercase: List < PipeFactory >= [new LowerCaseFactory(), new NullPipeFactory()];
/**
* Json stringify transform.
*
* @exportedAs angular2/pipes
*/
export var json: List < PipeFactory >= [new JsonPipeFactory(), new NullPipeFactory()];
export var defaultPipes = {
"iterableDiff": iterableDiff,
"keyValDiff": keyValDiff,
"async": async,
"uppercase": uppercase,
"lowercase": lowercase
"lowercase": lowercase,
"json": json
};
export var preGeneratedProtoDetectors = {};

View File

@ -0,0 +1,80 @@
import {isBlank, isPresent, CONST, Json} from 'angular2/src/facade/lang';
import {Pipe, PipeFactory} from './pipe';
// HACK: workaround for Traceur behavior.
// It expects all transpiled modules to contain this marker.
// TODO: remove this when we no longer use traceur
export var __esModule = true;
/**
* Implements json transforms to any object.
*
* # Example
*
* In this example we transform the user object to json.
*
* ```
* @Component({
* selector: "user-cmp"
* })
* @View({
* template: "User: {{ user | json }}"
* })
* class Username {
* user:Object
* constructor() {
* this.user = { name: "PatrickJS" };
* }
* }
*
* ```
*
* @exportedAs angular2/pipes
*/
export class JsonPipe extends Pipe {
_latestRef: any;
_latestValue: any;
constructor() {
super();
this._latestRef = null;
this._latestValue = null;
}
onDestroy(): void {
if (isPresent(this._latestValue)) {
this._latestRef = null;
this._latestValue = null;
}
}
supports(obj): boolean { return true; }
transform(value): any {
if (value === this._latestRef) {
return this._latestValue;
} else {
return this._prettyPrint(value);
}
}
_prettyPrint(value) {
this._latestRef = value;
this._latestValue = Json.stringify(value);
return this._latestValue;
}
}
/**
* Provides a factory for [JsonPipeFactory].
*
* @exportedAs angular2/pipes
*/
@CONST()
export class JsonPipeFactory extends PipeFactory {
constructor() { super(); }
supports(obj): boolean { return true; }
create(cdRef): Pipe { return new JsonPipe(); }
}

View File

@ -209,7 +209,10 @@ bool assertionsEnabled() {
// Can't be all uppercase as our transpiler would think it is a special directive...
class Json {
static parse(String s) => convert.JSON.decode(s);
static String stringify(data) => convert.JSON.encode(data);
static String stringify(data) {
var encoder = new convert.JsonEncoder.withIndent(" ");
return encoder.convert(data);
}
}
class DateWrapper {

View File

@ -38,6 +38,7 @@ if (assertionsEnabled_) {
int = {};
_global.assert = function() {};
}
export {int};
// This function is needed only to properly support Dart's const expressions
@ -45,10 +46,13 @@ export {int};
export function CONST_EXPR<T>(expr: T): T {
return expr;
}
export function CONST() {
return (target) => target;
}
export class ABSTRACT {}
export class IMPLEMENTS {}
export function isPresent(obj): boolean {
@ -246,7 +250,13 @@ export function print(obj) {
}
// Can't be all uppercase as our transpiler would think it is a special directive...
export var Json = _global.JSON;
export class Json {
static parse(s: string) { return _global.JSON.parse(s); }
static stringify(data): string {
// Dart doesn't take 3 arguments
return _global.JSON.stringify(data, null, 2);
}
}
export class DateWrapper {
static fromMillis(ms) { return new Date(ms); }

View File

@ -0,0 +1,97 @@
import {ddescribe, describe, it, iit, xit, expect, beforeEach, afterEach,
AsyncTestCompleter, inject, proxy, SpyObject, IS_DARTIUM} from 'angular2/test_lib';
import {Json, RegExp, NumberWrapper, StringWrapper} from 'angular2/src/facade/lang';
import {JsonPipe} from 'angular2/src/change_detection/pipes/json_pipe';
export function main() {
describe("JsonPipe", () => {
var regNewLine = new RegExp('\n');
var canHasUndefined; // because Dart doesn't like undefined;
var inceptionObj;
var inceptionObjString;
var catString;
var pipe;
function normalize(obj: string): string {
return StringWrapper.replace(obj, regNewLine, '');
}
beforeEach(() => {
inceptionObj = {
dream: {
dream: {
dream: 'Limbo'
}
}
};
inceptionObjString = "{\n" +
" \"dream\": {\n" +
" \"dream\": {\n" +
" \"dream\": \"Limbo\"\n" +
" }\n" +
" }\n" +
"}";
catString = 'Inception Cat';
pipe = new JsonPipe();
});
describe("supports", () => {
it("should support objects", () => {
expect(pipe.supports(inceptionObj)).toBe(true);
});
it("should support strings", () => {
expect(pipe.supports(catString)).toBe(true);
});
it("should support null", () => {
expect(pipe.supports(null)).toBe(true);
});
it("should support NaN", () => {
expect(pipe.supports(NumberWrapper.NaN)).toBe(true);
});
if (!IS_DARTIUM) {
it("should support undefined", () => {
expect(pipe.supports(canHasUndefined)).toBe(true);
});
}
});
describe("transform", () => {
it("should return JSON-formatted string", () => {
expect(pipe.transform(inceptionObj)).toEqual(inceptionObjString);
});
it("should return JSON-formatted string even when normalized", () => {
var dream1 = normalize(pipe.transform(inceptionObj));
var dream2 = normalize(inceptionObjString);
expect(dream1).toEqual(dream2);
});
it("should return JSON-formatted string similar to Json.stringify", () => {
var dream1 = normalize(pipe.transform(inceptionObj));
var dream2 = normalize(Json.stringify(inceptionObj));
expect(dream1).toEqual(dream2);
});
it("should return same value when nothing has changed since the last call", () => {
expect(pipe.transform(inceptionObj)).toEqual(inceptionObjString);
expect(pipe.transform(inceptionObj)).toEqual(inceptionObjString);
});
});
describe("onDestroy", () => {
it("should do nothing when no latest value", () => {
expect(() => pipe.onDestroy()).not.toThrow();
});
});
});
}