ngx-object-diff
Version:
An Angular 2+ library to compare and show object differences.
609 lines (602 loc) • 19.4 kB
JavaScript
import { SecurityContext, Injectable, ɵɵdefineInjectable, ɵɵinject, Component, Input, NgModule } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
/**
* @fileoverview added by tsickle
* Generated from: lib/ngx-object-diff.service.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxObjectDiffService = /** @class */ (function () {
function NgxObjectDiffService(sanitizer) {
this.sanitizer = sanitizer;
this.openChar = '{';
this.closeChar = '}';
}
/* service methods */
/**
* @param char
*/
/* service methods */
/**
* @param {?} char
* @return {?}
*/
NgxObjectDiffService.prototype.setOpenChar = /* service methods */
/**
* @param {?} char
* @return {?}
*/
function (char) {
this.openChar = char;
};
/**
* @param char
*/
/**
* @param {?} char
* @return {?}
*/
NgxObjectDiffService.prototype.setCloseChar = /**
* @param {?} char
* @return {?}
*/
function (char) {
this.closeChar = char;
};
/**
* diff between object a and b
* @param a
* @param b
* @param shallow
* @param isOwn
* @return
*/
/**
* diff between object a and b
* @param {?} a
* @param {?} b
* @param {?=} shallow
* @param {?=} isOwn
* @return {?}
*/
NgxObjectDiffService.prototype.diff = /**
* diff between object a and b
* @param {?} a
* @param {?} b
* @param {?=} shallow
* @param {?=} isOwn
* @return {?}
*/
function (a, b, shallow, isOwn) {
if (a === b) {
return this.equalObj(a);
}
/** @type {?} */
var diffValue = {};
/** @type {?} */
var equal = true;
for (var key in a) {
if ((!isOwn && key in b) || (isOwn && typeof b != 'undefined' && b.hasOwnProperty(key))) {
if (a[key] === b[key]) {
diffValue[key] = this.equalObj(a[key]);
}
else {
if (!shallow && this.isValidAttr(a[key], b[key])) {
/** @type {?} */
var valueDiff = this.diff(a[key], b[key], shallow, isOwn);
if (valueDiff.changed == 'equal') {
diffValue[key] = this.equalObj(a[key]);
}
else {
equal = false;
diffValue[key] = valueDiff;
}
}
else {
equal = false;
diffValue[key] = {
changed: 'primitive change',
removed: a[key],
added: b[key]
};
}
}
}
else {
equal = false;
diffValue[key] = {
changed: 'removed',
value: a[key]
};
}
}
for (var key in b) {
if ((!isOwn && !(key in a)) || (isOwn && typeof a != 'undefined' && !a.hasOwnProperty(key))) {
equal = false;
diffValue[key] = {
changed: 'added',
value: b[key]
};
}
}
if (equal) {
return this.equalObj(a);
}
else {
return {
changed: 'object change',
value: diffValue
};
}
};
/**
* compare and build the difference of two objects taking only its own properties into account
* @param a
* @param b
* @param shallow
*/
/**
* compare and build the difference of two objects taking only its own properties into account
* @param {?} a
* @param {?} b
* @param {?=} shallow
* @return {?}
*/
NgxObjectDiffService.prototype.diffOwnProperties = /**
* compare and build the difference of two objects taking only its own properties into account
* @param {?} a
* @param {?} b
* @param {?=} shallow
* @return {?}
*/
function (a, b, shallow) {
return this.diff(a, b, shallow, true);
};
/**
* Convert to a readable xml/html Json structure
* @param changes
* @return
* @param shallow
*/
/**
* Convert to a readable xml/html Json structure
* @param {?} changes
* @param {?=} shallow
* @return {?}
*/
NgxObjectDiffService.prototype.toJsonView = /**
* Convert to a readable xml/html Json structure
* @param {?} changes
* @param {?=} shallow
* @return {?}
*/
function (changes, shallow) {
return this.formatToJsonXMLString(changes, shallow);
};
/**
* Convert to a readable xml/html Json structure
* @return
* @param obj
* @param shallow
*/
/**
* Convert to a readable xml/html Json structure
* @param {?} object
* @param {?=} shallow
* @return {?}
*/
NgxObjectDiffService.prototype.objToJsonView = /**
* Convert to a readable xml/html Json structure
* @param {?} object
* @param {?=} shallow
* @return {?}
*/
function (object, shallow) {
return this.formatObjToJsonXMLString(object, shallow);
};
/**
* Convert to a readable xml/html Json structure
* @param changes
* @return
* @param shallow
*/
/**
* Convert to a readable xml/html Json structure
* @param {?} changes
* @param {?=} shallow
* @return {?}
*/
NgxObjectDiffService.prototype.toJsonDiffView = /**
* Convert to a readable xml/html Json structure
* @param {?} changes
* @param {?=} shallow
* @return {?}
*/
function (changes, shallow) {
return this.formatChangesToXMLString(changes, shallow);
};
/**
* Convert to a readable xml/html Json structure
* Convert to a readable xml/html Json structure
* @return
* @param obj
* @param shallow
*/
/**
* Convert to a readable xml/html Json structure
* Convert to a readable xml/html Json structure
* @private
* @param {?} obj
* @param {?} shallow
* @return {?}
*/
NgxObjectDiffService.prototype.formatObjToJsonXMLString = /**
* Convert to a readable xml/html Json structure
* Convert to a readable xml/html Json structure
* @private
* @param {?} obj
* @param {?} shallow
* @return {?}
*/
function (obj, shallow) {
return this.sanitizer.bypassSecurityTrustHtml(this.inspect(obj, shallow));
};
/**
* Convert to a readable xml/html Json structure
* @param changes
* @return
* @param shallow
*/
/**
* Convert to a readable xml/html Json structure
* @private
* @param {?} changes
* @param {?=} shallow
* @return {?}
*/
NgxObjectDiffService.prototype.formatToJsonXMLString = /**
* Convert to a readable xml/html Json structure
* @private
* @param {?} changes
* @param {?=} shallow
* @return {?}
*/
function (changes, shallow) {
/** @type {?} */
var properties = [];
/** @type {?} */
var diff = changes.value;
if (changes.changed == 'equal') {
return this.sanitizer.sanitize(SecurityContext.HTML, this.sanitizer.bypassSecurityTrustHtml(this.inspect(diff, shallow)));
}
for (var key in diff) {
properties.push(this.formatChange(key, diff[key], shallow));
}
return this.sanitizer.sanitize(SecurityContext.HTML, this.sanitizer.bypassSecurityTrustHtml('<span>' + this.openChar + '</span>\n<div class="diff-level">' + properties.join('<span>,</span>\n') + '\n</div><span>' + this.closeChar + '</span>'));
};
/**
* @private
* @param {?} changes
* @param {?=} shallow
* @return {?}
*/
NgxObjectDiffService.prototype.formatChangesToXMLString = /**
* @private
* @param {?} changes
* @param {?=} shallow
* @return {?}
*/
function (changes, shallow) {
/** @type {?} */
var properties = [];
if (changes.changed == 'equal') {
return '';
}
/** @type {?} */
var diff = changes.value;
for (var key in diff) {
/** @type {?} */
var changed = diff[key].changed;
if (changed !== 'equal')
properties.push(this.formatChange(key, diff[key], shallow, true));
}
return this.sanitizer.sanitize(SecurityContext.HTML, this.sanitizer.bypassSecurityTrustHtml('<span>' + this.openChar + '</span>\n<div class="diff-level">' + properties.join('<span>,</span>\n') + '\n</div><span>' + this.closeChar + '</span>'));
};
/**
* @param key
* @param diffItem
* @returns
* @param shallow
* @param diffOnly
*/
/**
* @private
* @param {?} key
* @param {?} diffItem
* @param {?} shallow
* @param {?=} diffOnly
* @return {?}
*/
NgxObjectDiffService.prototype.formatChange = /**
* @private
* @param {?} key
* @param {?} diffItem
* @param {?} shallow
* @param {?=} diffOnly
* @return {?}
*/
function (key, diffItem, shallow, diffOnly) {
/** @type {?} */
var changed = diffItem.changed;
/** @type {?} */
var property;
switch (changed) {
case 'equal':
property = (this.stringifyObjectKey(this.escapeHTML(key)) + '<span>: </span>' + this.inspect(diffItem.value));
break;
case 'removed':
property = ('<del class="diff">' + this.stringifyObjectKey(this.escapeHTML(key)) + '<span>: </span>' + this.inspect(diffItem.value) + '</del>');
break;
case 'added':
property = ('<ins class="diff">' + this.stringifyObjectKey(this.escapeHTML(key)) + '<span>: </span>' + this.inspect(diffItem.value) + '</ins>');
break;
case 'primitive change':
/** @type {?} */
var prefix = this.stringifyObjectKey(this.escapeHTML(key)) + '<span>: </span>';
property = ('<del class="diff diff-key">' + prefix + this.inspect(diffItem.removed) + '</del><span>,</span>\n' +
'<ins class="diff diff-key">' + prefix + this.inspect(diffItem.added) + '</ins>');
break;
case 'object change':
property = shallow ? '' : (this.stringifyObjectKey(key) + '<span>: </span>' + (diffOnly ? this.formatChangesToXMLString(diffItem) : this.formatToJsonXMLString(diffItem)));
break;
}
return property;
};
/**
* @param obj
* @return
* @param shallow
*/
/**
* @private
* @param {?} obj
* @param {?=} shallow
* @return {?}
*/
NgxObjectDiffService.prototype.inspect = /**
* @private
* @param {?} obj
* @param {?=} shallow
* @return {?}
*/
function (obj, shallow) {
return this._inspect('', obj, shallow);
};
/**
* @param accumulator
* @param obj
* @see http://jsperf.com/continuation-passing-style/3
* @return
* @param shallow
*/
/**
* @see http://jsperf.com/continuation-passing-style/3
* @private
* @param {?} accumulator
* @param {?} obj
* @param {?=} shallow
* @return {?}
*/
NgxObjectDiffService.prototype._inspect = /**
* @see http://jsperf.com/continuation-passing-style/3
* @private
* @param {?} accumulator
* @param {?} obj
* @param {?=} shallow
* @return {?}
*/
function (accumulator, obj, shallow) {
switch (typeof obj) {
case 'object':
if (!obj) {
accumulator += 'null';
break;
}
if (shallow) {
accumulator += '[object]';
break;
}
/** @type {?} */
var keys = Object.keys(obj);
/** @type {?} */
var length_1 = keys.length;
if (length_1 === 0) {
accumulator += '<span>' + this.openChar + this.closeChar + '</span>';
}
else {
accumulator += '<span>' + this.openChar + '</span>\n<div class="diff-level">';
for (var i = 0; i < length_1; i++) {
/** @type {?} */
var key = keys[i];
accumulator = this._inspect(accumulator + this.stringifyObjectKey(this.escapeHTML(key)) + '<span>: </span>', obj[key]);
if (i < length_1 - 1) {
accumulator += '<span>,</span>\n';
}
}
accumulator += '\n</div><span>' + this.closeChar + '</span>';
}
break;
case 'string':
accumulator += JSON.stringify(this.escapeHTML(obj));
break;
case 'undefined':
accumulator += 'undefined';
break;
default:
accumulator += this.escapeHTML(String(obj));
break;
}
return accumulator;
};
/**
* @param key
* @return
*/
/**
* @private
* @param {?} key
* @return {?}
*/
NgxObjectDiffService.prototype.stringifyObjectKey = /**
* @private
* @param {?} key
* @return {?}
*/
function (key) {
return /^[a-z0-9_$]*$/i.test(key) ?
key :
JSON.stringify(key);
};
/**
* @param string
* @return
*/
/**
* @private
* @param {?} string
* @return {?}
*/
NgxObjectDiffService.prototype.escapeHTML = /**
* @private
* @param {?} string
* @return {?}
*/
function (string) {
return string.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
};
/**
* @param obj
* @returns
*/
/**
* @private
* @param {?} obj
* @return {?}
*/
NgxObjectDiffService.prototype.equalObj = /**
* @private
* @param {?} obj
* @return {?}
*/
function (obj) {
return {
changed: 'equal',
value: obj
};
};
/**
* @param a
* @param b
* @returns
*/
/**
* @private
* @param {?} a
* @param {?} b
* @return {?}
*/
NgxObjectDiffService.prototype.isValidAttr = /**
* @private
* @param {?} a
* @param {?} b
* @return {?}
*/
function (a, b) {
/** @type {?} */
var typeA = typeof a;
/** @type {?} */
var typeB = typeof b;
return (a && b && (typeA == 'object' || typeA == 'function') && (typeB == 'object' || typeB == 'function'));
};
NgxObjectDiffService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
NgxObjectDiffService.ctorParameters = function () { return [
{ type: DomSanitizer }
]; };
/** @nocollapse */ NgxObjectDiffService.ngInjectableDef = ɵɵdefineInjectable({ factory: function NgxObjectDiffService_Factory() { return new NgxObjectDiffService(ɵɵinject(DomSanitizer)); }, token: NgxObjectDiffService, providedIn: "root" });
return NgxObjectDiffService;
}());
if (false) {
/**
* @type {?}
* @private
*/
NgxObjectDiffService.prototype.openChar;
/**
* @type {?}
* @private
*/
NgxObjectDiffService.prototype.closeChar;
/**
* @type {?}
* @private
*/
NgxObjectDiffService.prototype.sanitizer;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/ngx-object-diff.component.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxObjectDiffComponent = /** @class */ (function () {
function NgxObjectDiffComponent() {
}
NgxObjectDiffComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-object-diff',
template: "\n <pre [innerHTML]=\"obj\"></pre>\n ",
styles: ["\n pre{\n display: block;\n padding: 9.5px;\n margin: 0 0 10px;\n font-size: 13px;\n line-height: 1.428571429;\n color: #333;\n word-break: break-all;\n word-wrap: break-word;\n background-color: #f5f5f5;\n border: 1px solid #ccc;\n border-radius: 4px;\n }\n :host >>> .diff {\n display: inline-block;\n }\n :host >>> .diff-level {\n margin-left: 1.6em;\n }\n :host >>> .diff-holder {\n color: #666;\n margin: 0;\n }\n :host >>> .diff-holder span {\n color: #AAA;\n }\n :host >>> del.diff {\n text-decoration: none;\n color: #b30000;\n background: #fadad7;\n }\n :host >>> ins.diff {\n background: #eaf2c2;\n color: #406619;\n text-decoration: none;\n }\n :host >>> del.diff-key {\n border: 1px solid #f8a4a4;\n }\n :host >>> ins.diff-key {\n border: 1px solid #a3ce4c;\n margin-top: -1px;\n position: relative;\n }\n :host >>> ins.diff span {\n color: #AABF40;\n }\n :host >>> del.diff span {\n color: #EE8177;\n }\n "]
}] }
];
NgxObjectDiffComponent.propDecorators = {
obj: [{ type: Input }]
};
return NgxObjectDiffComponent;
}());
if (false) {
/** @type {?} */
NgxObjectDiffComponent.prototype.obj;
}
/**
* @fileoverview added by tsickle
* Generated from: lib/ngx-object-diff.module.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxObjectDiffModule = /** @class */ (function () {
function NgxObjectDiffModule() {
}
NgxObjectDiffModule.decorators = [
{ type: NgModule, args: [{
declarations: [NgxObjectDiffComponent],
imports: [],
providers: [NgxObjectDiffService],
exports: [NgxObjectDiffComponent]
},] }
];
return NgxObjectDiffModule;
}());
/**
* @fileoverview added by tsickle
* Generated from: public-api.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/**
* @fileoverview added by tsickle
* Generated from: ngx-object-diff.ts
* @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
export { NgxObjectDiffComponent, NgxObjectDiffModule, NgxObjectDiffService };
//# sourceMappingURL=ngx-object-diff.js.map