How to complete a simple mobx?

[RookieGz]

This is my code:

class DependenceManager {
  static Dep = null;
  _store = {}; 

  beginCollect(handler) {
    DependenceManager.Dep = handler;
  }
  collect(obid) {
    if (DependenceManager.Dep) {
      this._store[obid] = this._store[obid] || [];
      this._store[obid].push(DependenceManager.Dep);
    }
  }
  endCollect() {
    DependenceManager.Dep = null;
  }

  tigger(obid) {
    if (this._store[obid]) {
      this._store[obid].forEach((watcher) => {
        watcher();
      });
    }
  }
}

const dependencer = new DependenceManager();

let globalObId = 0;
class Observable {
  _obId = 0;
  _val = null;
  constructor(val) {
    this._obId = globalObId++;
    this._val = val;
  }

  set(newVal) {
    this._val = newVal;
    dependencer.tigger(this._obId);
  }

  get() {
    dependencer.collect(this._obId);
    return this._val;
  }
}

function createObservable(val) {
  if (typeof val === "object") {
    const _val = { ...val };

    const keys = Object.keys(_val);
    for (let i of keys) {
      _val[i] = createObservable(_val[i]);
    }
    const observableVal = new Observable(_val);
    const _proxy = new Proxy(observableVal, {
      get(target, name) {
        return target.get()[name];
      },
      set(target, name, newVal) {
        target._val[name].set(newVal);
        return true;
      },
    });

    return _proxy;
  }

  return val;
}

function autorun(handler) {
  dependencer.beginCollect(handler);
  handler();
  dependencer.endCollect();
}

function observable(target) {
  return createObservable(target);
}

let test = observable({ a: 1, b: { c: 2 } });

autorun(() => {
  console.log("test2", test.b.c);
});

this code has some question:

• Incorrect dependency collection：dependencer
• wrong trigger dependency on set value

how do i complete this createObservable?
thanks :-)

[RookieGz]

update createObservable

function createObservable(_target) {
  if (typeof _target === "object") {
    const _val = {};
    const keys = Object.keys(_target);

    for (let i of keys) {
      const item = _createObservable(_target[i]);
      _val[i] = item;
    }

    return new Proxy(new Observable(_val), {
      get(target, name) {
        console.log(name)
        return target.get()[name];
      },
      set(target, name, newVal) {
        target.get()[name].set(newVal);
        return true;
      },
    });
  }
  return new Observable(_target);
}

but this function doesn't work。
this is test example：

let test = observable({ a: 1, b: { c: 2, d: { e: 3 } } });
console.log("start", test);
console.log(test.b.d.e);
autorun(() => {
  console.log("test2", test.b.d.e);
});
console.log(dependencer);
test.b.d.e = 4;