ClassList 2

classList_v2.js

ClassList.prototype.reduce = function (reducer, initialValue) {
  return ClassList.of(this._classes.reduce(reducer, initialValue));
}

// Notice how we can define "filter" by reducing the previous array 
// into a new array with only the values that satisfies the predicate

ClassList.prototype.filter = function (predicate) {
  return ClassList.of(this.getClasses()).reduce((newList, currentClass) => {
    if (predicate(currentClass)) newList.push(currentClass);
    return newList;
  }, []);
}

// These are derivation and mostly for convenience

ClassList.prototype.mapFilter = function(predicate, fn) {
  return ClassList.of(this.getClasses()).filter(predicate).map(fn);
};

ClassList.prototype.filterReduce = function (predicate, fn) {
  return ClassList.of(this.getClasses()).filter(predicate).reduce(fn);
};

// this is wrong
ClassList.prototype.concat = function(otherArray) {
//                                         here is what is wrong
//                                         Can you tell why?
//                                         ---------------------
//                                                  ||
//                                                  \/
  return ClassList.of(this.getClasses().concat(otherArray));
};

classList_v2_usage.js

const onlyBtn = (className) => /^btn(-|.)*/.test(className);
const solarizedBtnCls = ClassList.of(['btn-solarized--active', 'btn-solarized']);
const btnCls = ClassList.of([
  'btn',
  'active',
  'btn-default'
]).filter(onlyBtn)
// ClassList(['btn', 'btn-default'])

// Trying to do btnCls + solarizedBtnCls will break
ClassList.of([
  'btn',
  'active',
  'btn-default'
]).concat(solarizedBtnCls);