angular2-prettyjson - npm Package Compare versions

Comparing version 1.0.4 to 1.0.5

index.d.ts

 export { PrettyJsonPipe } from "./src/prettyjson.pipe";
 export { SafeJsonPipe } from "./src/json.pipe";
 export { PrettyJsonComponent } from "./src/prettyjson.component";

index.js

@@ -0,0 +0,0 @@ "use strict";

package.json

 {
   "name": "angular2-prettyjson",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Angular2 json utils. Includes a pipe to replace Angular's built in json pipe which implements spacing, avoids circular references. Also includes a component that will pretty print json with syntax highlight",
@@ -25,5 +25,4 @@ "main": "index.js",
     "@angular/common": "^2.0.0-rc.1",
-    "@angular/core": "2.0.0-rc.1",
-    "json-stringify-safe": "^5.0.1",
-    "rxjs": "5.0.0-beta.6",
+    "@angular/core": "^2.0.0-rc.1",
+    "rxjs": "^5.0.0-beta.6",
     "zone.js": "^0.6.6"
@@ -30,0 +29,0 @@ },

README.md

@@ -1,6 +0,6 @@
-# Angular 2 Pretty Json v1.0.4
+# Angular 2 Pretty Json v1.0.5
 
-A module for Angular 2 debug output of objects. Contains a pipe similar to [JsonPipe](https://angular.io/docs/ts/latest/api/common/index/JsonPipe-class.html) but adds support for spacing and handling of circular structures.
-Also contains a component that outputs any object with syntax highlight.
-Warning: just as the `JsonPipe`, this is an impure pipe and should used only for debugging purposes.
+A module for Angular 2 debug output of objects. Contains a pipe similar to [JsonPipe](https://angular.io/docs/ts/latest/api/common/index/JsonPipe-class.html) but adds support for spacing and handling of circular structures.  
+Also contains a component that outputs any object with syntax highlight.  
+**Warning**: just as the `JsonPipe`, this is an impure pipe and should used only for debugging purposes.
 
@@ -113,1 +113,26 @@ ## Install
 ![Pretty json with syntax highlight](https://cloud.githubusercontent.com/assets/487758/15599410/a68103f4-2415-11e6-8c5e-d86c22abd72b.png)
+
+## Integrate with [Angular-CLI](https://github.com/angular/angular-cli)
+
+1. Install
+1. Add `'angular2-prettyjson/**/*.+(js|js.map)'` to the `vendorNpmFiles` array in `angular-cli-build.js`
+1. In `src/system-config.js`:
+    - Add `'angular2-prettyjson'` to the "third party barrels"
+    - Add `'angular2-prettyjson': 'vendor/angular2-prettyjson'` to the System config: 
+    - ```
+        System.config({
+            map: {
+                '@angular': 'vendor/@angular',
+                'rxjs': 'vendor/rxjs',
+                'angular2-prettyjson': 'vendor/angular2-prettyjson',
+                'main': 'main.js'
+            },
+            packages: cliSystemConfigPackages
+        });
+      ```
+
+## Changelog
+
+1. Changed dependencies to anything _above_ Angular RC1
+1. Fixed styling of PrettyJsonComponent
+1. Added how-to integrate with Angular-CLI

src/json.pipe.d.ts

@@ -0,0 +0,0 @@ import { PipeTransform } from "@angular/core";

src/json.pipe.js

@@ -11,17 +11,21 @@ "use strict";
 };
-const core_1 = require("@angular/core");
-const safe_util_1 = require("./safe.util");
-let SafeJsonPipe = class SafeJsonPipe {
-    transform(obj, spaces = 2) {
+var core_1 = require("@angular/core");
+var safe_util_1 = require("./safe.util");
+var SafeJsonPipe = (function () {
+    function SafeJsonPipe() {
+    }
+    SafeJsonPipe.prototype.transform = function (obj, spaces) {
+        if (spaces === void 0) { spaces = 2; }
         return JSON.stringify(obj, safe_util_1.serializer(), spaces);
-    }
-};
-SafeJsonPipe = __decorate([
-    core_1.Pipe({
-        name: "json",
-        pure: false
-    }), 
-    __metadata('design:paramtypes', [])
-], SafeJsonPipe);
+    };
+    SafeJsonPipe = __decorate([
+        core_1.Pipe({
+            name: "json",
+            pure: false
+        }), 
+        __metadata('design:paramtypes', [])
+    ], SafeJsonPipe);
+    return SafeJsonPipe;
+}());
 exports.SafeJsonPipe = SafeJsonPipe;
 //# sourceMappingURL=json.pipe.js.map

src/prettyjson.component.d.ts

 export declare class PrettyJsonComponent {
     obj: any;
 }

src/prettyjson.component.js

@@ -22,7 +22,7 @@ "use strict";
         core_1.Component({
+            selector: "prettyjson",
             pipes: [prettyjson_pipe_1.PrettyJsonPipe],
-            selector: "prettyjson",
             template: "\n    <pre [innerHtml]=\"obj | prettyjson\">\n    </pre>\n  ",
             styles: [
-                "pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }\n    .string { color: green; }\n    .number { color: darkorange; }\n    .boolean { color: blue; }\n    .null { color: magenta; }\n    .key { color: red; }"
+                "pre {outline: 1px solid #ccc; padding: 5px; margin: 5px; }\n    :host >>> .string { color: green; }\n    :host >>> .number { color: darkorange; }\n    :host >>> .boolean { color: blue; }\n    :host >>> .null { color: magenta; }\n    :host >>> .key { color: red; }"
             ]
@@ -29,0 +29,0 @@ }),

src/prettyjson.pipe.d.ts

@@ -0,0 +0,0 @@ import { PipeTransform } from "@angular/core";

src/prettyjson.pipe.js

@@ -11,9 +11,13 @@ "use strict";
 };
-const core_1 = require("@angular/core");
-const safe_util_1 = require("./safe.util");
-let PrettyJsonPipe = class PrettyJsonPipe {
-    transform(obj, spaces = 2) {
+var core_1 = require("@angular/core");
+var safe_util_1 = require("./safe.util");
+var PrettyJsonPipe = (function () {
+    function PrettyJsonPipe() {
+    }
+    PrettyJsonPipe.prototype.transform = function (obj, spaces) {
+        if (spaces === void 0) { spaces = 2; }
         return this._syntaxHighlight(obj, safe_util_1.serializer(), spaces);
-    }
-    _syntaxHighlight(json, serializer, spacing) {
+    };
+    PrettyJsonPipe.prototype._syntaxHighlight = function (json, serializer, spacing) {
+        // Credits to the accepted answer here http://stackoverflow.com/questions/4810841/how-can-i-pretty-print-json-using-javascript
         if (typeof json !== "string") {
@@ -24,3 +28,3 @@ json = JSON.stringify(json, serializer, spacing);
         return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
-            let cls = "number";
+            var cls = "number";
             if (/^"/.test(match)) {
@@ -40,14 +44,15 @@ if (/:$/.test(match)) {
             }
-            return `<span class="${cls}">${match}</span>`;
+            return "<span class=\"" + cls + "\">" + match + "</span>";
         });
-    }
-};
-PrettyJsonPipe = __decorate([
-    core_1.Pipe({
-        name: "prettyjson",
-        pure: false
-    }), 
-    __metadata('design:paramtypes', [])
-], PrettyJsonPipe);
+    };
+    PrettyJsonPipe = __decorate([
+        core_1.Pipe({
+            name: "prettyjson",
+            pure: false
+        }), 
+        __metadata('design:paramtypes', [])
+    ], PrettyJsonPipe);
+    return PrettyJsonPipe;
+}());
 exports.PrettyJsonPipe = PrettyJsonPipe;
 //# sourceMappingURL=prettyjson.pipe.js.map

No alert changes

Improved metrics

Total package byte prevSize

35132

increased by4.12%

Dependency count

4

decreased by-20%

Lines of code

675

increased by1.35%

Number of lines in readme file

137

increased by21.24%

Dependency changes

• - Removedjson-stringify-safe@^5.0.1

• - Removed@angular/core@2.0.0-rc.1(transitive)

• - Removedjson-stringify-safe@5.0.1(transitive)

• - Removedrxjs@5.0.0-beta.6(transitive)

• Updated@angular/core@^2.0.0-rc.1

• Updatedrxjs@^5.0.0-beta.6