A silly store library. Create a state and it's actions, whatch and handle it's changes.

event.ts

type CustomEventHandler = (event: any) => void;

type CustomEvent = {
  name: string,
  handler: CustomEventHandler
};

export default function Event (object) {
  const event = {
    list: [],

    emit: (name, payload) => {
      const events = event.list.filter((event) => event.name === name);
      events.forEach(() => {
        if (typeof event.handler !== 'function')
          return;
        event.handler(payload);
      });
    },

    on: (name, handler) => {
      event.list = [ ...event.list, { name, handler } ];
    },
    
    off: (name, handler) => {

    }
  };
  return event;
}

store.js

const state = Object.create(null);
let source = Object.create(null);

state.$events = [];

state.$event = {
  list: [],
  emit () {
    
  }
};

state.$emit = (name, payload) => {
  const events = state.$events.filter()
};

state.$on = (name = '', callback = () => undefined) => {
  const events = state.$events
  state.$events = [
    ...events,
    {
      name: event,
      callback
    }
  ]
};

state.$off = (name = '', callback = null) => {
  const events = state.$events
  state.$events = events.filter((_) => {
    if (event && callback) {
      return _.name !== event && _.callback !== callback
    } else if (event && !callback) {
      return _.name !== event
    } else {
      return true
    }
  })
};

Object.defineProperty(state, 'name', {
  get () {
    const value = source.name
    state.$emit('get:name', {
      value
    });
    return value;
  }
  set (value) {
    const old = source.name
    const changed = { ...source, name: value }
    state.$emit('change', {
      value: { old: source, 'new': changed }
    })
    state.$emit('change:name', {
      value: {
        old,
        'new': value
      }
    });
    state = changed
  }
});