Skip to content

Commit

Permalink
feat(change_detection): json pipe
Browse files Browse the repository at this point in the history
Closes #1957
  • Loading branch information
PatrickJS authored and mhevery committed May 18, 2015
1 parent 8e84f8a commit 9860382
Show file tree
Hide file tree
Showing 5 changed files with 202 additions and 3 deletions.
11 changes: 10 additions & 1 deletion modules/angular2/src/change_detection/change_detection.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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 = {};
Expand Down
80 changes: 80 additions & 0 deletions modules/angular2/src/change_detection/pipes/json_pipe.ts
Original file line number Diff line number Diff line change
@@ -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(); }
}
5 changes: 4 additions & 1 deletion modules/angular2/src/facade/lang.dart
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
12 changes: 11 additions & 1 deletion modules/angular2/src/facade/lang.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,17 +38,21 @@ if (assertionsEnabled_) {
int = {};
_global.assert = function() {};
}

export {int};

// This function is needed only to properly support Dart's const expressions
// see https://github.com/angular/ts2dart/pull/151 for more info
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 {
Expand Down Expand Up @@ -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); }
Expand Down
97 changes: 97 additions & 0 deletions modules/angular2/test/change_detection/pipes/json_pipe_spec.js
Original file line number Diff line number Diff line change
@@ -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();
});
});

});
}

1 comment on commit 9860382

@cexbrayat
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@PatrickJS damn, I was going to submit the exact same PR (except I missed the whole Dart thing :)

As a side note, you have an unused import isBlank in json_pipe.ts and I was a bit stricter on the types (latestValue could be a string instead of any ?). Nice job!

Please sign in to comment.