observable.js

ShowsStore = {
  shows: new Map(),
  getById: function(id) {
    return this.shows.get(id)
  },
  add: function(data) {
    this.shows.set(data.id, data)
  }
};

autoruns = []

function observable(obj, key, initialValue) {
  let value = initialValue
  Object.defineProperty(obj, key, {
    set: function(newValue) {
     autoruns.forEach(function(cb) { cb({ obj: obj, key: key, newValue: newValue, oldValue: value }) })
     value = newValue;
    },
    get: function() {
      return value;
    }
  })
}

function computed(obj, key, cb) {
  Object.defineProperty(obj, key, {
    get: function() {
      return cb.bind(this)()
    }
  })
}

UIStore = {}

observable(UIStore, 'showId', null)
computed(UIStore, 'show', function() { return ShowsStore.getById(this.showId) })


autoruns.push(function (change) {
  if (change.key === 'showId') {
    fetch(`https://api.tvmaze.com/shows/${change.newValue}?embed=cast`)
    .then(function (res) { return res.json() })
    .then(function (show) {
      console.log("- Got show", show.id, show)
      ShowsStore.add(show)
    })
  }
})