@box -- an observable with an @action setter -- mobx6 version?

[lbwexler]

Am looking to use the very useful @box annotation created by sonaye, several years back, and discussed in this interesting thread.

#839

The source is quite simple, and is below -- however, I am unable to make this work on mobx6.
Anybody still using this? Any pointers -- thought I saw some reference to an update here, but unable to find it.

(from 'sonaye')

useStrict(true);

const box = (target, name, descriptor) => {
  const privateName = `_${name}`;
  observable(target, privateName, descriptor);
  return computed(target, name, {
    get() {
      return this[privateName];
    },
    set(value) {
      this[privateName] = value;
    }
  });
};

class Store {
  @box hello = 'Hello World!';
}

const store = new Store();

autorun(() => console.log(store.hello));

// these are mobx actions
store.hello = 'Hello JavaScript!';
store.hello = 'Hello MobX!';
store.hello = 'Hello Decorators!';

[kubk]

Hi @lbwexler

Have you tried observable.box()? https://mobx.js.org/api.html#observablebox

I've never tried but I think the following should work:

class Store {
  item = observable.box(1)

  constructor() {
    makeAutoObservable(this)
  }
}

The following probably also work, but you won't get correct TS types:

class Store {
  item = 1; // TS will think it's a regular primitive, not an object with getter/setter

  constructor() {
    makeObservable(this, { item: observable.box })
  }
}

[urugator]

Atm it's not possible to implement such decorator due to how decorators and field initializers work. Unless you would call something extra in constructor - in the same spirit as you have to call makeObservable(this). Or you would have to rely on compiler specific behavior (babel). Or @box('actualFieldName') _initialValue = 'Hello world' would be doable.

[lbwexler]

Thanks for the really fast and thoughtful replies! So I was actually able to get something to work, doing something similar to your first suggestion urugator!

We want to allow the following minimal property definition:

@bindable foo = 'bar';

First we have the following:

function bindable(target, name, descriptor) {
    // Place a hidden getter on prototype that wraps the backing observable.
    const {initializer} = descriptor,
        propName = name + '_bindable',
        valName = name + '_bindable_value';
    Object.defineProperty(
        target,
        propName, {
            get() {
                return getOrCreate(this, valName, () => {
                    const initVal = initializer?.call(this);
                    return observable.box(initVal);
                });
            }
        }
    );

    // Create the descriptor for a getter/setter pair..
    descriptor =  {
        get() {return this[propName].get()},
        set(v) {runInAction(() => this[propName].set(v))},
        enumerable: true,
        configurable: true
    };

    // Record on class, so we can later create on *instance* in makeObservable.
    // (Be sure to create cloned list for *this* particular class.)
    const key = '_xhBindableProperties';
    if (!target.hasOwnProperty(key)) {
        target[key] = {...target[key]};
    }
    target[key][name] = descriptor;

    // Return the get/set to be placed on prototype.  (If makeObservable() never called, or called
    // late, the non-enumerable property will still be available.)
    return descriptor;
}

and then, we "override" the native makeObservable to finish the job, so that our new property can be enumerable on our actual instances....

/**
 * An enhanced version of the native mobx makeObservable.
 */
export function makeObservable(
    target: any,
    annotations?: AnnotationsMap<any, never>,
    options?: CreateObservableOptions
) {

    // Finish creating 'bindable' properties for this instance.
    // Do here to ensure it's enumerable on *instance*
    const bindables = target._xhBindableProperties ?? {};
    forEach(bindables, (descriptor, name) => {
        Object.defineProperty(target, name, descriptor);
    });

    return baseMakeObservable(target, annotations, options);
}

[urugator]

descriptor and therefore initializer isn't available with TS compiler, you only get a prototype (first arg) and name (second arg). But you don't need it. The gist is correct, store field name on proto in decorator, redefine fields in constructor.
As an alternative to using box/runInAction you can define standard prop/accessor, manually call observer/computed decorators on Object.getPrototypeOf(this) and leave the rest on makeObservable (box/runInAction would be preferred though).

[urugator]

Gets a little bit trickier with inheritance though, because parent's constructor sees decorators applied in child, but can't access child's field as they don't exist yet. So you basically have to skip these fields and remove applied decorators, so you don't try to apply them again in child's constructor. You can take a look at makeObservable impl to see how it's handled.

[lbwexler]

Thanks!

Note we are currently using babel transpiler and we allow it to process the decorators using its `plugin-proposal-decorators'. So we have the initializer. (We do use Typescript, but not for the decorators.)

[urugator]

Then you probably only need decorator. I am not sure about initializer semantics, but I think you can basically place the whole redefinition logic in there.

[lbwexler]

You can, yes, and that is how we originally had it, but that leaves the property definition on the prototype. To get the property as enumerable 'on the instance' (the way you would expect for a bare-bones class property.), you need to define it in the constructor.
Looking forward to the next iteration of decorators!
(Also -- meant to say thanks for your great contributions to this project)

[urugator]

Note you can turn the original descriptor into an accessor that lazily redefines itself the first time you call it - so instead of redefining in constructor it happens on the first access (get/set). That's how previous mobx versions used to do it, but as I said it's not possible now.

[urugator]

Looking forward to the next iteration of decorators!

https://www.youtube.com/watch?v=8Ab3ArE8W3s&t=2012s
https://www.youtube.com/watch?v=XFTOG895C7c&t=1586s