Derived ViewModels (How to efficiently structure them?)

[theodm]

Hello,

I'm building an editor application with undo/redo functionality. I separated the undoable domain state from volatile runtime state:

Undoable state -> stored in a MobX(-Keystone) store (UStore) (Being in MobX-Keystone probably shouldn't be of concern here)
Volatile UI/runtime state -> stored in a ViewModel store (VMStore)

The ViewModels wrap the domain objects and add additional observables and computed values.

Domain (undoable state)

interface UMode {
    readonly type: "select" | "insert";
}

class USelectMode implements UMode {
    readonly type = "select";

    @observable.ref accessor selectedObjectIds: string[] = [];
}

class UInsertMode implements UMode {
    readonly type = "insert";

    @observable.ref accessor objectTypeToInsert: string = "";
}

class UState {
    @observable.ref accessor activeMode: UMode;

    constructor() {
        this.activeMode = new USelectMode();
    }

    @action
    enterSelectMode() {
        this.activeMode = new USelectMode();
    }

    @action
    enterInsertMode() {
        this.activeMode = new UInsertMode();
    }
}

ViewModels

Each ViewModel wraps a domain object and adds volatile state:

class VMSelectMode {
    readonly type = "select";

    constructor(readonly origin: USelectMode) {}

    @observable.ref accessor hoveredObjectId: string | null = null;
}

class VMInsertMode {
    readonly type = "insert";

    constructor(readonly origin: UInsertMode) {}

    @observable.ref accessor insertPosition: { x: number; y: number } | null = null;
}

class VMStore {
    readonly uState: UState;

    @observable.ref accessor map: maplibregl.Map | null = null;

    constructor() {
        this.uState = new UState();
    }

    get mode() {
        switch (this.uState.activeMode.type) {
            case "select":
                return new VMSelectMode(this.uState.activeMode as USelectMode);
            case "insert":
                return new VMInsertMode(this.uState.activeMode as UInsertMode);
        }
    }
}

Problem

This obviously doesn't work because the getter creates a new ViewModel instance every time.

However, the ViewModels:

• need their own observables
• depend on both domain state and volatile state
• should stay stable as long as the origin object stays the same

Approaches I considered

1. computed: Probably wrong, since computed values should be pure and shouldn't create observable objects.
2. createTransformer / computedFn from mobx-utils: These seem to have the same issue (returning observable instances from computed-like constructs).
3. Store the VM instances and sync them. For example: keep a currentModeVM and update it when uState.activeMode changes.

But the mechanisms for detecting that change are unclear:
3a. observe / intercept seem discouraged
3b. reaction / autorun run after transactions and are meant for side effects
3c. manually notifying the VM layer from the domain layer feels wrong

Question
What is the best approach?

There seem to be a few issues where that topic was more or less discussed, but they didn't really help me:

• Derived arrays in MobX #166
• Reactive graph transformations #67

Happy to here about best practices, maybe someone has an even better architecture. Maybe I'm really on the wrong path.