Can class use mix-ins pattern when using MobX?

[wh5938316]

For example, using mix-ins to extends multiple utility classes, like this:

import { autorun, makeObservable } from "mobx";

type GConstructor<T = {}> = new (...args: any[]) => T;

interface HasLife {
  grow: () => void;
}

class Animal {
  age: number;

  constructor(age: number) {
    this.age = age;
  }
}

function addLife<TBase extends GConstructor<Animal>>(Base: TBase) {
  return class Jumpable extends Base {
    // this is wrong, mixins class cannot use constructor!
    constructor() {
      super();
      makeObservable(this, {
        age: observable,
        grow: action,
      });
    }
    grow() {
      this.age++;
    }
  };
}

class Dog extends addLife(Animal) implements HasLife {
  constructor(age: number) {
    super(age);
  }
}

const dog = new Dog(0);

autorun(() => {
  console.log(dog.age);
});

dog.grow();

The example I provided cannot run correctly because mixin classes cannot have constructors, but I would also like to mark the member methods as observable or action in the mixin classes.

What should I do?

or, What is the common approach within the mobx community for dealing with this problem using other methods?

[kubk]

I am not sure if inheritance is a good way of using Mobx. Mobx supports limited inheritance: https://mobx.js.org/subclassing.html

Moreover inheritance creates more issues in your case because you won't be able to extend from many objects at the same time (JS doesn't support multiple inheritance).

It looks like you need something like Entity-Component-System and this is out of Mobx responsibilty: https://en.wikipedia.org/wiki/Entity_component_system

I've found some snippet and it looks like it's going to work with Mobx. Not sure if it's going to help.

class Character {

    abilities  = [];

    addAbility (...abilities) {
        for (const a of abilities) {
            this.abilities.push(a);
        }
        return this;
    }

    getAbility (AbilityClass) {
        for (const a of this.abilities) {
            if (a instanceof AbilityClass) {
                return a;
            }
        }
        return null;
    }

}

// Abilities

class Ability {}

class HealthAbility extends Ability {
    health     = 100;
    maxHealth  = 100;
}
class MovementAbility extends Ability {
    x = 0;
    y = 0;

    moveTo(x, y) {
        this.x = x;
        this.y = y;
    }
}
class SpellCastAbility extends Ability {
    mana       = 100;
    maxMana    = 100;

    cast () {
        this.mana--;
    }
}
class MeleeFightAbility extends Ability {
    stamina    = 100;
    maxStamina = 100;

    constructor (power) {
        this.power = power;
    }

    hit () {
        this.stamina--;
    }
}

// characters

class CharactersFactory {
    createMage () {
        return new Character().addAbility(
            new MovementAbility(),
            new HealthAbility(),
            new SpellCastAbility()
        );
    }
    createWarrior () {
        return new Character().addAbility(
            new MovementAbility(),
            new HealthAbility(),
            new MeleeFightAbility(3)
        );
    }
    createPaladin () {
        return new Character().addAbility(
            new MovementAbility(),
            new HealthAbility(),
            new SpellCastAbility(),
            new MeleeFightAbility(2)
        );
    }
}

[wh5938316]

In Typescript, Class can multiple inheritance with mixins pattern

So I am considering whether it is possible to use this method to combine Mobx class.

[urugator]

Constructors in mixins are technically fine (there is always an implicit constructor anyway). The reason why mixin shouldn't have one is the composability/reusability aspect - if each mixin has different constructor signature you can't really "mix" them together.
But you actually don't care about the constructor arguments, so you can implement the default constructor with the extra makeObservable call:

// @ts-ignore
constructor(...args) {
  super(...args);
  makeObservable(this, {
    age: observable,
    grow: action,
  });
}

Not sure if it somehow messes up types.

Alternatively, but less conviniently, each mixin can expose unique init method, which you would have to call manually from final constructor.

[urugator]

Or you could actually use decorators (you could even call them manually if you don't want to rely on @ syntax), because they don't require makeObservable being called in every constructor (last one is enough), however it's an implementation detail, therefore probably not something you should rely on.

[wh5938316]

Thank you.

But I am confused about how to declare a class member variable as observable in the class, and not using makeObservable & @ syntax. I have not found any use case for it.

[urugator]

function addLife<TBase extends GConstructor<Animal>>(Base: TBase) {
  class Jumpable extends Base {   
    grow() {
      this.age++;
    }
  };
  observable(Jumpable.prototype, 'age');
  action(Jumpable.prototype, 'grow')
  return Jumpable;  
}

You still have to call makeObservable(this) in Dog constructor. Keep in mind Dog must use decorators as well, it's not possible to combine decorators and annotations in single inheritance chain.
As I said, I don't recommend this approach, use at own risk.

[wh5938316]

Thank you, I understand, I saw in the document that mobx's suggestion is "prefer composition over inheritance", and in this example, what is the method of composition?