Support customize type checker in observable.

[janryWang]

For some special types(such as ReactNode,Moment,Immutable Object etc.) in deep observable, I hope the typer checker can be customized.
here is the source code location
https://github.com/mobxjs/mobx/blob/main/packages/mobx/src/api/observable.ts#L125
Usage can be like this.

makeObservable({
  data:{...}
},{
  data:observable.deep((target,targetPropName)=>{
    if(isReactElement(target) || isMoment(target)) return observable.ref(target)
    return observable(target)
  })
})

[janryWang]

@mweststrate @FredyC Have any thoughts?

[mweststrate]

I never needed it, as in all my use cases observable.ref sufficed. Not entirely unsympathetic to the idea, but wondering if it shouldn't be more of a global config then, doing it per declaration might be error prone as it is easy to forget, and also requires mobx to carry context around about the decorator that was used. Curious about real life use cases indeed if .ref / .shallow didn't suffice?

…

On Wed, Feb 17, 2021 at 8:54 AM ChenLei ***@***.***> wrote: What's the scenario that you can't direct use observable.ref ? Can you add a killer user case to proof your idea is meanful? Thanks class DataStore { @observable.ref moment; @observable.ref reactDomNode; constructor() { makeObservable(this) }} // or class DataStore { reactDomNode; moment; constructor() { makeObservable(this, { moment: observable.ref, reactDomNode: observable.ref }) }} — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2809 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBGKXBH75QI7Y5QYCJTS7N745ANCNFSM4XX32R3Q> .

[urugator]

observable.deep is a conviniency, something that fits most of the cases and assumes plain data structures. It's not intended to work with any arbitrary data structure. Imo generally mobx should aim to work in two "modes":
explicit - user is in full control and responsbile for making things observable, batched etc.
implicit - provides some convinient defaults, that are guaranteed to work in our domain - meaning everything is observable, batched etc.
I don't think it's worth to make this automatic implicit behavior further configurable, because you can always achieve the same with the explicit behavior and it often significantly increases complexity of the library - more than the complexity you would have to introduce to you code.
I also worry that this is one of the features that would lead to missuse and antipatterns. It already seems to me that some ppl treat mobx as some kind of AOP library, which can inject arbitrary logic into any object (not to mention they should often use simple composition instead).
Lastly we would expose something that was so far implementation detail (maintenance burden) and we would probably have to adapt API so there aren't multiple ways of doing same thing.

[janryWang]

Thank you for your patient response, but if custom type checker is not supported, it is difficult for me to build an observable tree model. If there is a some hacked solution, I would choose to use a hack, but the official does not want to expose such an API. ,and I can’t use hacked solution, it’s really hard for me now.

[janryWang]

Two options I can think of:

1. Support custom type checker, this is the most direct
2. Support custom annotations, I can directly create an annotation similar to observable.deep

[mweststrate]

as @urugator indicated you can write your own to-observable logic that does recursively exactly the same, something along the lines of:

function createMyFancyObservable(value) {
  if (!value || typeof value !== "object") return value; // primitive
  if (isReactNode(value) || momentJSThing(value) || /* etc */) return value; // no conversion
  if (Array.isArray(value)) return observable.array(value.map(createMyFancyObservable), { deep: false })
  if (value instanceof Map) return observable.map(Array.from(value.entries()).map(([key, value] => [key, createMyFancyObservable(value)]), { deep: false }))
  return observable.object(Object.fromEntries(Object.entries(value).map((key, value) => [key, createMyFancyObservable(value)]), { deep: false })
}

[janryWang]

function createMyFancyObservable(value) {
  if (!value || typeof value !== "object") return value; // primitive
  if (isValidElement(value)) return value; // no conversion
  if (Array.isArray(value))
    return observable.array(value.map(createMyFancyObservable), {
      deep: false
    });
  const target = Object.fromEntries(
    Object.entries(value).map((key, value) => [
      key,
      createMyFancyObservable(value)
    ])
  );
  return observable.object(target, { deep: false });
}

const aa = createMyFancyObservable({});

aa.bb = {
  cc: {
    dd: <div>Hello world</div>
  }
};

Thanks Reply, But this example still doesn't seem to recognize ReactNode. @mweststrate

This is codesandbox

In the console, I will see that the react element will also be converted into a proxy object

[iChenLei]

I think this idea only work on in initialization stage.

const data = createMyFancyObservable(rawData);

// not
const data = createMyFancyObservable({});
data = rawData;

Rerun the script

function createMyFancyObservable(value) {
  if (!value || typeof value !== "object") return value; // primitive
  if (isValidElement(value)) return value; // no conversion
  if (Array.isArray(value))
    return observable.array(value.map(createMyFancyObservable), {
      deep: false
    });
  const target = Object.fromEntries(
    Object.entries(value).map([key, value] => [
      key,
      createMyFancyObservable(value)
    ])
  );
  return observable.object(target, { deep: false });    👈🏻   // <- still covert object property to observable 
 }

createMyFancyObservable({
  bb: {
    cc: {
      dd: <div>Hello world</div>
    }
  }
})

but not work, cause { depp: false } not work as expected?

append

from mweststrate's comment

const data = createMyFancyObservable({});
data = createMyFancyObservable(rawData);  // reassign

[janryWang]

I hope it not only supports initial creation, but also supports dynamic creation of observable objects. 😅

[mweststrate]

Pass new values through the same func before you assign them to the tree

…

On Thu, 18 Feb 2021, 08:21 Janry, ***@***.***> wrote: I hope it not only supports initial creation, but also supports dynamic creation of observable objects. 😅 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2809 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBE2252KESUZCSIAKWLS7TEX5ANCNFSM4XX32R3Q> .

[janryWang]

So I have to do a deep recursion on all the data every time, the performance will become very bad.

[mweststrate]

The recursion is exactly the same regardless whether MobX does it or you do it yourself. But you only need to apply it to new values you are about to store. Not to everything every time.

…

On Thu, Feb 18, 2021 at 8:30 AM Janry ***@***.***> wrote: So I have to do a deep recursion on all the data every time, the performance will become very bad. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2809 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBB7NQWWL7ZQOH6UOLLS7TF2JANCNFSM4XX32R3Q> .