Re-setting options on an existing instance can have side effects

I’ve found that react-codemirror seems incompatible with proper usage of the lint add-on to CodeMirror.

The way to activate linting is to set it as an option, e.g.

CodeMirror.fromTextArea([…], {
  lint: {
    predef: ["window"]
  }
});

lint’s default behavior is to respond to onChange events (debounced and on a 500ms delay), but when it’s first initialized, it runs immediately on the current editor value. react-codemirror’s approach to setting all of the options whenever the component updates effectively causes lint to fire on every editor change (with no delay) because setting the lint option re-initializes it, even if the option provided is the same.

I have a proof-of-concept that addresses this problem by comparing the editor’s existing option values to the new option values on each update, and only setting each option if it’s different. But, I’m waiting to hear about #49 because the underlying bug behind that pull request prevents options from being applied correctly to multiple instances of CodeMirror.

The approach I had in mind is a bit of a kludge, but I think JSON.stringify would suffice as a way to compare option values quickly:

setCodeMirrorOptionIfChanged: function(optionName, newValue) {
    var oldValue = this.codeMirror.getOption(optionName);
    if (JSON.stringify(oldValue) !== JSON.stringify(newValue)) {
        this.codeMirror.setOption(optionName, newValue);
    }
},

[attaboy]

@justindeguzman I ended up forking this project pretty aggressively since it seemed dormant for awhile. To solve this particular problem I added some functions to test “deep” object/array equality.

function deepEquals(thing1, thing2) {
  if (thing1 === thing2) {
    return true;
  } else if (Number.isNaN(thing1) && Number.isNaN(thing2)) {
    return true;
  } else if (Array.isArray(thing1) && Array.isArray(thing2)) {
    return arraysEqual(thing1, thing2);
  } else if (typeof(thing1) === 'object' && typeof(thing2) === 'object') {
    return objectsEqual(thing1, thing2);
  } else {
    return false;
  }
}

function arraysEqual(array1, array2) {
  if (array1.length !== array2.length) {
    return false;
  } else {
    return array1.every(function(item, index) {
      return deepEquals(array1[index], array2[index]);
    });
  }
}

function objectsEqual(obj1, obj2) {
  if (obj1.constructor !== obj2.constructor) {
    return false;
  }
  var obj1Keys = Object.keys(obj1);
  var obj2Keys = Object.keys(obj2);
  if (!arraysEqual(obj1Keys.sort(), obj2Keys.sort())) {
    return false;
  }
  return obj1Keys.every(function(key) {
    return deepEquals(obj1[key], obj2[key]);
  });
}

  setCodeMirrorOptionIfChanged: function(optionName, newValue) {
    var oldValue = this.codeMirror.getOption(optionName);
    if (!deepEquals(oldValue, newValue)) {
      this.codeMirror.setOption(optionName, newValue);
    }
  },

[cacois]

@attaboy Got it! Turns out I wasn’t getting the JSHINT function to be globally available, as necessary. Once I figured out how to import it properly, things began working fine. Thanks!