How to use deep-diff - 10 common examples

function logger(nextProps, nextState) {
        if (enabled(groupName) || enabled(traceGroupName)) {
          const
            startTime = now(),
            time = new Date(),
            propsDiff = differ(this.props, nextProps),
            stateDiff = differ(this.state, nextState),
            groupTitle = `${groupName} @${time.getHours()}:${time.getMinutes()}:${time.getSeconds()}`

          logGroup(groupTitle)
          logPropsDiff(propsDiff)
          logStateDiff(stateDiff)

          console.debug(`→ logger took ${(now() - startTime).toFixed(3)}ms on instance ${this._reactInternalInstance._rootNodeID}`) // eslint-disable-line no-underscore-dangle
          console.groupEnd(groupName)
        }
      }

s3.getBucketWebsite({ Bucket: config.domain }, function (err, website) { // eslint-disable-line handle-callback-err
    var dirty = diff(website || {}, websiteConfig.WebsiteConfiguration)
    if (dirty) {
      putWebsite()
    } else {
      cb(null, parseWebsite(website, null, config))
    }
  })
}

listenerFlag = true;
    document.addEventListener('seeduxRestore', (e) => {
      next({
        type: 'seedux_RESTORE',
        restoreState: e.detail.restoreState,
      });
    }, false);
  }

  const newState = getState();


//  this imported diff function returns undefined if no diffs are found,
//  so we need to potentially assign an empty array instead to keep the shape
//  of our HistoryEntries consistent
  const diffs = diff(oldState, newState) || [];
  const newHistoryEntry = {
    originalAction: action,
    modifiedAction,
    newState,
    diffs,
  };
  const evt = document.createEvent('CustomEvent');
  evt.initCustomEvent('actionDispatched', true, true, newHistoryEntry);
  document.dispatchEvent(evt);
  return modifiedAction;
};

function _getDiff(oldVal, newVal, actionType) {
  const calcDiff = diff(oldVal, newVal);
  if (!calcDiff || !calcDiff.length) {
    return 'No changes';
  }

  return calcDiff.reduce((log, change) => {
    let kind = _getChangeKind(change.kind);
    let location;

    // Special case to skip RECEIVE_CHART_OPTIONS* since it merges in new fields
    if ('D' === change.kind && actions.RECEIVE_CHART_OPTIONS === actionType) {
      return log;
    }

    // If not an array change
    if ('A' !== change.kind) {
      location = change.path.join('.');

(err, json) => {
		if (err) {
			throw err;
		}
		const customConfig = {};

		observableDiff(unifiedNewConfig, json, d => {
			// if there is any change on one attribute of object in array
			// we want to preserve the full object not just that single attribute
			// it is required due to nature of configuration merging in helpers/config.js
			// e.g. If someone changed ip of a peer we want to keep full peer object in array
			//
			// if change is type of edit value
			// and change path is pointing to a deep object
			// and path second last index is an integer (means its an array element)
			const changeInDeepObject =
				d.kind === 'E' &&
				d.path.length > 2 &&
				Number.isInteger(d.path[d.path.length - 2]);

			// if there is a change in array element we want to preserve it as well to original value
			const changeInArrayElement = d.kind === 'A';

// Start off with the stuff that we do not diff (we are not the source of truth for
        // these - they will always be applied as given to us).
        const final = {
            Common: populateNonTruthClasses(to.Common, this.classesOfTruth)
        };
        const updatedClasses = [];
        const updatedNames = {};

        const toDelete = {
            Common: {}
        };

        // let deep-diff update the from declaration so we don't have to figure out how
        // to apply the changes. Collect updated paths on the way so we can copy just
        // the changed data
        observableDiff(from, to, (diff) => {
            // diff.path looks like ['Common', 'VLAN', 'myVlan'], for example
            if (this.classesOfTruth.indexOf(diff.path[1]) !== -1) {
                applyChange(from, to, diff);

                // the item at index 1 is the name of the class in the schema
                // if these are named objects (vlans, for example) the name is at
                // index 2
                const schemaClass = diff.path[1];
                let objectName;
                if (this.namelessClasses.indexOf(schemaClass) === -1) {
                    objectName = diff.path[2];
                }
                // For additions of named classes, the object name will be in the rhs object
                if (!objectName && diff.rhs) {
                    objectName = Object.keys(diff.rhs)[0];
                }

beforeCompile: function() {
    var self = this;
    var blank_doc = BlueInk.component(this.editor).options.data();

    if (Object.keys(this.doc).length < 2
        && undefined !== this.doc.type) {
      // we have "stub" / initiation doc, so reset to defaults
      this.doc = blank_doc.doc;
    }

    // trigger new keys into Vue.js' observable-ness
    observableDiff(this.doc, blank_doc.doc,
      function(diff) {
        // if we've got a new key addition, trigger an $add
        if (diff.kind === 'N') {
          self.doc.$add(diff.path.join('.'), diff.rhs);
        }
      });
  },
  compiled: function() {

(err, json) => {
		if (err) {
			throw err;
		}
		const customConfig = {};

		observableDiff(unifiedNewConfig, json, d => {
			// if there is any change on one attribute of object in array
			// we want to preserve the full object not just that single attribute
			// it is required due to nature of configuration merging in helpers/config.js
			// e.g. If someone changed ip of a peer we want to keep full peer object in array
			//
			// if change is type of edit value
			// and change path is pointing to a deep object
			// and path second last index is an integer (means its an array element)
			const changeInDeepObject =
				d.kind === 'E' &&
				d.path.length > 2 &&
				Number.isInteger(d.path[d.path.length - 2]);

			// if there is a change in array element we want to preserve it as well to original value
			const changeInArrayElement = d.kind === 'A';

if (changeInArrayElement) {
				_.set(
					customConfig,
					clonedPath,
					_.get(unifiedNewConfig, clonedPath, {})
				);
			} else if (changeInDeepObject) {
				// Remove last item in path to get index of object in array
				clonedPath.splice(-1, 1);
				_.set(
					customConfig,
					clonedPath,
					_.get(unifiedNewConfig, clonedPath, {})
				);
			}
			applyChange(customConfig, json, d);
		});

if (changeInArrayElement) {
				_.set(
					customConfig,
					clonedPath,
					_.get(unifiedNewConfig, clonedPath, {})
				);
			} else if (changeInDeepObject) {
				// Remove last item in path to get index of object in array
				clonedPath.splice(-1, 1);
				_.set(
					customConfig,
					clonedPath,
					_.get(unifiedNewConfig, clonedPath, {})
				);
			}
			applyChange(customConfig, json, d);
		});