Can I default makeAutoObservable to use observable.shallow?

[codeBelt]

If I want all the properties on the store to be observable.shallow I have to do the following:

export class MyStore {
  list: [];
  request1Results = { data: [], isRequesting: false };
  request2Results = { data: {}, isRequesting: false };

  constructor() {
    makeAutoObservable(
      this,
      {
        list: observable.shallow,
        request1Results: observable.shallow,
        request2Results: observable.shallow,
      },
      { autoBind: true }
    );
  }
}

Is there something I am missing where I can set an option to have a default observable for my store? I know there is deep: false which is observable.ref but it would be nice to set a default.

export class MyStore {
  list: [];
  request1Results = { data: [], isRequesting: false };
  request2Results = { data: {}, isRequesting: false };

  constructor() {
    makeAutoObservable(this, {}, { autoBind: true, default: observable.shallow });
  }
}

[mweststrate]

I think you can use { defaultDecorator: observable.shallow }, source, although we never blessed it as official api

[urugator]

Yea, please don't :) Firstly someone just probably forget to remove it, secondly the name doesn't make a lot of sense anymore and lastly, as the name suggest, it will be used as a default annotation for everything - it won't simply change default enhancer for observables.

[codeBelt]

Ya I tried defaultDecorator before but that caused some errors/issues.

Is this a feature you might add?

[urugator]

Personally I would be hesitant to do so.
Less importantly it doesn't fit into the current API very well - there should be either enhancer option or deep option, but not both. enhancer, besides being another internal concept that user would have to know, can be a source of possible confusion: for shallowly observable object/array/etc you need ref enhancer - not a shallow enhancer.
Most importantly I think it shouldn't be needed. deep: false should be used to create observable container that ignores it's content, usually some kind of foreign objects (eg react elements).
An array/object that is observable 1 level deep, seems conceptually quite weird to me and even confusing from usage perspective. Eventually you may ask for enhancer that is arbitrary number of levels deep. Generally, I think there shouldn't be too many possible combinations of some implicit/automatic behavior, because then, due to the number of possibilities, it becomes quite hard to anticipate what's going to happen when. You know it's simpler living in a word where either: everything is stated explicitely (no automatic/implicit behavior) or everything has the same default automatic behavior as a convinience, unless you explicitely state otherwise. One shouldn't try to safe every possible keystroke by being "smart", but write code that is easy to reason about.
Personally I would even get rid of observable.shallow annotation - in the rare cases where it's needed one can handle the creation of the value manually prop = observable([], { deep: false }), which also seems easier to understand for eventual reader (it would be wise to annotate the field with ref though).
That being said, the decision, perhaps fortunately for some, isn't up to me :D

What's your use case or motiviation, why do you need this regularly?

[mweststrate]

I think having shallow by default is quite a rare request, (I think this is the first time in a couple of years), so I find it hard to justify adding it to the core api as well. @codeBelt did you consider creating a simple utility function that does this for you if it is a common pattern?

[codeBelt]

@urugator you are correct I should be using observable.ref.
@mweststrate creating a utility function does solve my issue with my common pattern. (I should of thought of that)

Example with utility to handle common pattern
https://codesandbox.io/s/mobxdiscussions2874-5x9i2?file=/src/App.tsx

---

There were to two motivation to using observable.shallow (now observable.ref):

1. 90% of MobX usage in our app is handling api requesting states and updating the data on the page. Since most of the time we are not changing any nested data and we're mainly passing the data to react-window it seems like a good idea not have the deeply observed data. Also I do use a common pattern for our response results that nests the response data and a isRequesting state together. { deep: false } does not work for this situation.

Simplified Example:

export const initialResponseStatus = (defaultValue, defaultIsRequesting = false) => {
  return {
    isRequesting: defaultIsRequesting,
    data: defaultValue
  };
};

export class MyStore {
  employeesResults = initialResponseStatus([]);

  constructor() {
    makeAutoObservable(this, {}, { autoBind: true });
  }

  async loadEmployee() {
    await requestAction(
      this.employeesResults,
      getEmployeeRequest()
    );
  }
}

Adding observable and observable.ref to initialResponseStatus solves my original question about have a default prop.

export const initialResponseStatus = (defaultValue, defaultIsRequesting = false) => {
  return observable(
    {
      isRequesting: defaultIsRequesting,
      data: defaultValue
    },
    { data: observable.ref }
  );
};

2. The second motivation was dealing with console.log and needing to expand nested Proxy objects to view the data. I know I can use toJS and I do but sometimes when I am lazy it's just extra work ;).

---

I totally understand why you don't want to add/support lot of features like a default option. I am still learning MobX and I might look back and realize that having a default option doesn't makes sense so please forgive my inexperience. Just like { autoBind: true } I don't need to manually add a action.bound enhancer option to all of my actions. That is why I thought if makeAutoObservable had a default option it would make it more convent for users just like autoBind.

Thanks for all the responses.