Why doesn't MobX go full-on proxy (so that any newly added properties are automatically observable)?

[IKoshelev]

For a few years now I've been waiting for a state-management library that would utilize Proxies to give us state that looks like Plain Old JS Objects, but is fully observable. I was excited to see that MobX went the Proxies route after V4 (the one I'm using now), but after trying it out, I feel like more could be achieved with Proxies.

I spent a weekend to try out a Proof-of-concept and was quite successful: https://github.com/IKoshelev/react-mobx-mvvm-showcase/tree/observable-proxy-proof-of-concept

Hosted build: https://observableproxyshowcase.z33.web.core.windows.net/

I was able to start proxying app state at the root, and make sure that all the state is behind proxies (i.e. one Proxy per object). So, our app comes down to making a new state root:

export const app = makeApp({});

app.state.todos = []; //despite being added later, these are fully observable
app.state.filter = "ALL";

ReactDOM.render(
  <div>
    <AppContext.Provider value={{ app }}>
      <TodoListCmp appState={app.state} />
    </AppContext.Provider>
  </div>,
  document.getElementById('root')
);

And ALL the state inside is granularly observable (you don't need to ever explicitly make observable anything you add to tree). You can literally drop the following code in the console and it will work:

window.app.state.todos.push({
	id: 100,
	text: "ggggggggg",
	done: false
});

setTimeout(() => {
	window.app.state.todos.find(x => x.id === 100).done = true;
}, 1500);

End result, despite being a very bare-bones experience, looks quite sturdy. In fact, the result is so good I'm surprised we don't have a mainstream state-management lib that would take this approach (a few similar experiments I found are mostly obscure).

So I was wondering, am I missing something? Does the "Proxy all state" approach have some inherent flaw that makes it a bad idea?

[mweststrate]

Eh MobX already does that. What made you conclude it doesnt?

…

On Mon, 21 Dec 2020, 00:45 IKoshelev, ***@***.***> wrote: For a few years now I've been waiting for a state-management library that would utilize Proxies to give us state that looks like Plain Old JS Objects, but is fully observable. I was excited to see that MobX went the Proxies route after V4 (the one I'm using now), but after trying it out, I feel like more could be achieved with Proxies. I spent a weekend to try out a Proof-of-concept and was quite successful: https://github.com/IKoshelev/react-mobx-mvvm-showcase/tree/observable-proxy-proof-of-concept I was able to start proxying app state at the root, and make sure that all the state is behind proxies (i.e. one Proxy per object). So, our comes down to making a new state root: export const app = makeApp({}); app.state.todos = []; //despite being added later, these are fully observableapp.state.filter = "ALL"; ReactDOM.render( <div> <AppContext.Provider value={{ app }}> <TodoListCmp appState={app.state} /> </AppContext.Provider> </div>, document.getElementById('root')); And ALL the state inside is granularly observable (you don't need to ever explicitly make observable anything you add to tree). End result, despite being a very bare-bones experience, looks quite sturdy. In fact, the result is so good I'm surprised we don't have a mainstream state-management lib that would take this approach. So I was wondering, am I missing something? Does the "Proxy all state" approach have some inherent flaw that makes it a bad idea? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#2683>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAN4NBB4HSVUVXRQEACMQNTSV2LELANCNFSM4VDQQWDQ> .

[IKoshelev]

Interesting. I couldn't replicate this in my experiments before (maybe I was concentrating on makeObservable)? But now I checked a few thing with observable, and it does go deep. Thank you.

[pauldraper]

MobX does this for observable, but not for makeObservable (nor AFAIK is there a way to do that for makeObservable.

[IKoshelev]

(nor AFAIK is there a way to do that for makeObservable.

It comes down to "Can an existing object be seamlessly converted into a Proxy?". The only plausible way I could think of would be to delete all own keys and replace prototype of the object with a Proxy via Object.setPrototypeOf. This would work for some things, like getting / setting keys, but not for all. Anything that does not involve the prototype, like getting own keys / descriptors, would not work as expected. Nor would reference comparison of the object against future proxies. So, too risky to use in a team-written code.