feat(change_detection): json pipe

Closes #1957

modules/angular2/src/change_detection/change_detection.ts

@@ -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 = {};

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

@@ -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(); }
+}

modules/angular2/src/facade/lang.dart

@@ -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 {

modules/angular2/src/facade/lang.ts

@@ -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); }