A simple implementation of undo and redo in JavaScript

undoRedo.js

const stripLast = arr => {
  // split the last item from an array and return a tupple of [rest, last]
  const length = arr.length;
  const lastItem = arr[length - 1];
  const restOfArr = arr.slice(0, length - 1);
  return [restOfArr, lastItem];
};

const createTrimStartArray = length => arr => {
  const startIndex = arr.length < length ? 0 : length;
  const trimmedArr = arr.slice(startIndex, arr.length);
  return trimmedArr;
};

function createUndoRedo(initial, options = {}) {
  const { trace, historyLimit = Infinity } = options;
  let _historyLimit = historyLimit;
  let _trimStartArray = createTrimStartArray(_historyLimit);
  let _timeline = {
    past: [],
    current: initial,
    future: []
  };
  log("init");

  function log(str = "") {
    trace && console.log(str, this.current);
  }

  function _getCurrent() {
    return _timeline.current;
  }

  function _canUndo() {
    return _timeline.past.length > 0;
  }

  function _canRedo() {
    return _timeline.future.length > 0;
  }

  function update(next) {
    // update the current value
    const { past, current } = _timeline;
    // calculate history storage limit
    const limitedPast = _trimStartArray(past);
    _timeline = {
      past: [...limitedPast, current],
      current: next,
      // reset redo, don't allow redo if we update in the middle of the timeline
      // this seems to be the idiomatic approach for most applications
      future: []
    };
    log("update");
    return this.current;
  }

  function undo() {
    if (this.canUndo) {
      const { past, current, future } = _timeline;
      const [restOfArr, lastItem] = stripLast(past);
      _timeline = {
        past: restOfArr,
        current: lastItem,
        future: [...future, current]
      };
      log("undo");
      return this.current;
    }
  }

  function redo() {
    if (this.canRedo) {
      const { past, current, future } = _timeline;
      const [restOfArr, lastItem] = stripLast(future);
      _timeline = {
        past: [...past, current],
        current: lastItem,
        future: restOfArr
      };
      log("redo");
      return this.current;
    }
  }

  const publicAPI = {
    update,
    undo,
    redo,
    get current() {
      return _getCurrent();
    },
    get canRedo() {
      return _canRedo();
    },
    get canUndo() {
      return _canUndo();
    },
    get historyLimit() {
      return _historyLimit;
    },
    set historyLimit(val) {
      _historyLimit = val;
      _trimStartArray = createTrimStartArray(_historyLimit);
    }
  };

  return publicAPI;
}

undoRedo2.js

const splitLast = arr => {
  // split the last item from an array and return a tupple of [rest, last]
  const length = arr.length;
  const lastItem = arr[length - 1];
  const restOfArr = arr.slice(0, length - 1);
  return [restOfArr, lastItem];
};

const createShiftArrayItem = length => arr => {
  const startIndex = arr.length < length ? 0 : length;
  const trimmedArr = arr.slice(startIndex, arr.length);
  return trimmedArr;
};

const purify = val => {
  const typeAsString = Object.prototype.toString.call(val);
  switch (typeAsString) {
    case "[object Array]":
      return val.slice();
    case "[object Object]":
      return { ...val };
    default:
      return val;
  }
};

function createUndoRedo(initial, options = {}) {
  const { trace, immutable, historyLimit = Infinity } = options;
  let _historyLimit = historyLimit;
  let _shiftArrayItem = createShiftArrayItem(_historyLimit);

  logCurrent("init");

  function createTimeline(initialCurrent) {
    return {
      history: [],
      current: initialCurrent,
      future: []
    };
  }

  function logCurrent(str = "") {
    trace && console.log(str, this.current);
  }

  function update(timeline, next) {
    // update the current value
    const { history, current } = timeline;
    // calculate history storage limit
    const limitedHistory = _shiftArrayItem(history);
    const nextTimeline = {
      history: [...limitedHistory, current],
      current: immutable ? purify(next) : next,
      // reset redo, don't allow redo if we update in the middle of the timeline
      // this seems to be the idiomatic approach for most applications
      future: []
    };
    logCurrent("update");
    return nextTimeline;
  }

  function undo(timeline) {
    if (_canUndo(timeline)) {
      const { history, current, future } = timeline;
      const [restOfArr, lastItem] = splitLast(history);
      const nextTimeline = {
        history: restOfArr,
        current: lastItem,
        future: [...future, current]
      };
      logCurrent("undo");
      return nextTimeline;
    } else {
      return timeline;
    }
  }

  function redo(timeline) {
    if (_canRedo(timeline)) {
      const { history, current, future } = timeline;
      const [restOfArr, lastItem] = splitLast(future);
      const nextTimeline = {
        history: [...history, current],
        current: lastItem,
        future: restOfArr
      };
      logCurrent("redo");
      return nextTimeline;
    } else {
      return timeline;
    }
  }

  function _canUndo(timeline) {
    return timeline.history.length > 0;
  }

  function _canRedo(timeline) {
    return timeline.future.length > 0;
  }

  const publicAPI = {
    createTimeline,
    update,
    undo,
    redo,
    get historyLimit() {
      return _historyLimit;
    },
    set historyLimit(val) {
      _historyLimit = val;
      _shiftArrayItem = createShiftArrayItem(_historyLimit);
    }
  };

  return publicAPI;
}

usage example with react