MakeAutoObservable, Typescript, and nested ES6 classes

[micka190]

Just wondering if there's a best practice for dealing with multiple nested ES6 classes that should all be observable?

Assuming I have a situation where I have a lot of small classes, which will all eventually be rendered/updated through my UI, what's the simplest way to make them all observable?

For example, given this:

class Foo {
  public propA: string;

  constructor() {
    this.propA = 'some value';
  }
}

import Foo from './Foo.ts';

class Bar {
  public propB: number;
  public propFoo: Foo;

  constructor() {
    this.propB = 10;
    this.propFoo = new Foo();
  }
}

import Bar from './Bar.ts';

class Container {
  public propBar: Bar;

  constructor() {
    this.propBar = new Bar();
  }
}

What would be the proper way to make all of these observable? I tried doing the following:

import { makeAutoObservable, observable } from 'mobx';
import Bar from './Bar.ts';

class Container {
  public propC: number;
  public propBar: Bar;

  constructor() {
    this.propC = 0;
    this.propBar = new Bar();
    makeAutoObservable(this, {propBar: observable});
  }
}

Since the docs say that should make propBar recursively observable (which I assume means that its properties and its children's properties will all be observable), however, that doesn't seem to work.

That's when I noticed this:

That is, if and only if the value is a plain object, array, Map or Set.

I'm not sure if "a plain object" includes ES6 classes or not (or if this might be an issue with TypeScript).

It works fine if I explicitly call makeAutoObservable(this) in Foo and Bar's constructors, but I'm in a situation where I have some objects that are 5-6 levels deep. Am I really supposed to explicitly make everything observable? Or am I missing something? It's not a problem if I do, but I'm just wondering if there's another way.

[urugator]

Am I really supposed to explicitly make everything observable?

Yes, each class is responsible for annotating itself. Notice you're not only making the instance observable, but also modifying the prototype (functions become actions etc), so it's good idea to keep it colocated.
Also note that this recursion process uses observable(object), which creates an observable copy of the object, while makeAutoObservable(object) modifies the object directly.

Btw you're not nesting classes, but composing class instances. Nested or inner class usually refers to ability to define class as part of another class - usually accessible only to the outer class.

[codeBelt]

I have a related question. Does makeAutoObservable ignore properties that are already observables? For example does the childStore property in ParentClass get modified again from the ParentClass makeAutoObservable call when the ChildClass has already called it's own makeAutoObservable?

class ChildClass {
  someProperty: boolean = false;

  constructor() {
    makeAutoObservable(this);
  }
}

class ParentClass {
  childStore: ChildClass;
  anotherProperty: number = 0;

  constructor() {
    this.childStore = new ChildClass();

    makeAutoObservable(this);
  }
}

Or do you always have to ignore the field like: makeAutoObservable(this, { childStore: false });

[urugator]

Why don't you try? It will work just fine, however you have to distinquish between property and it's value - both of them can be made observable:

makeAutoObservable(this, { childStore: false }); completely ignores property.

makeAutoObservable(this, { childStore: observable.ref }); makes the property observable (it will react to assigments), but the assigned value is always left as is.

makeAutoObservable(this, { childStore: observable.deep }); (this is default) makes the property observable and if possible converts the value to observable on any assignment - if the assigned value is already observable, it's left as is.
Any: this.childStore = value basically becomes this.childStore = observable(value)

Similary makeAutoObservable(this, { childStore: observable.shallow }); changes all assignments to:
this.childStore = observable(value, {}, { deep: false })

observable(observable(observable(value))) - the outer observable calls are noop