State.js

const State = state => new Proxy({
  state,
  listeners: [],
  subscribe(listener) {
    this.listeners.push(listener)
    return () => this.listeners.filter(x => x !== listener)
  },
  set(stateUpdates) {
    this.state = Object.assign({}, this.state, stateUpdates);
    this.listeners.forEach(f => {
      f()
    })
  }
}, {
  get(obj, k) {
    return obj.state[k] !== undefined && !['set', 'subscribe'].includes(k)
      ? obj.state[k]
      : obj[k]
  }
})


const initialState = { name: '' }

const state = State(initialState)

const unsubscribe = state.subscribe(() => {
  document.body.innerHTML = `<p>Hello ${state.name}</p>`
})

state.set({ name: 'World' })


unsubscribe()