JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

versionify - object proxy to track changes and navigation versions.

JavaScript

/**
 Author : lidlanca 2021 March 30 


Note: we use Object.assign to reassign an old version 
 this does not replace to the old version , it just assign all the changes from the selected 
 version. 
 which mean changing version is always addative in this implemnetation. 
 we can implement a replace instead of assign. but we will need to delete all of the object own properties before we assign. 
*/

function versionify(target) {
  var p1 = new Proxy(target, {
    versions: [JSON.parse(JSON.stringify(target))],
    index: 0,

    get(t, k, proxy) {
      if (k == 'latest') {
        this.index = this.versions.length - 1
        Object.assign(target, this.versions[this.index])

        return proxy
      }
      
      if (k == 'first') {
        this.index = 0
        Object.assign(target, this.versions[this.index])
        return proxy
      }
      
      if (k == 'prev') {
        this.index--
        Object.assign(target, this.versions[this.index < 0 ? 0 : this.index])
        return proxy
      }
      if (k == 'next') {
        this.index++
        Object.assign(target, this.versions[this.index >= this.versions.length ? this.versions.length - 1 : this.index])
        return proxy
      }
      if (k === 'versions') {
        return this.versions
      }
      return Reflect.get(...arguments)
    },
    set(target) {
      Reflect.set(...arguments)
      this.versions.push(JSON.parse(JSON.stringify(target)))
      this.index++
      return true
    },
    deleteProperty(target, prop) {
      Reflect.deleteProperty(target, prop)
      this.versions.push(JSON.parse(JSON.stringify(target)))
      return true
    }
  })
  return p1

}

// initialize a versionify 
p1 = versionify({
  "message": "in the begining there was nothing"
})

p1.message = "then there was this"
p1.self  = "self is not this"
p1.message ="lets delete self"
delete p1.self
p1.message = "self was deleted"
p1 = p1.prev.prev
p1.message = "prev was...